src/components/mixins.js

@@ -7,8 +7,8 @@ export default {
     rad2deg (rad) {
       return rad * (180 / Math.PI)
     },
-    createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
-      // console.log('createLabelCanvas', this.data.Titre)
+    createBuildingTitleCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
+      console.log('createLabelCanvas', text)
       const size = fontsize
       const borderSize = 5
       let lines = text.split('\n')
@@ -41,6 +41,40 @@ export default {
       // console.log('createLabelCanvas', ctx)
       return ctx.canvas
     },
+    createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
+      console.log('createLabelCanvas', text)
+      const size = fontsize
+      const borderSize = 5
+      let lines = text.split(':')
+      const ctx = document.createElement('canvas').getContext('2d')
+      const font = `${size}px bold noto_sans,sans-serif`
+      ctx.font = font
+      // measure how long the name will be
+      const doubleBorderSize = borderSize * 2
+      let width = 0
+      for (var i = 0; i < lines.length; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
+      }
+      const height = size * lines.length + doubleBorderSize
+      this.label_size = { x: width / sizefactore, y: height / sizefactore }
+      ctx.canvas.width = width
+      ctx.canvas.height = height
+
+      // need to set font again after resizing canvas
+      ctx.font = font
+      ctx.textBaseline = 'top'
+
+      if (bgcolor) {
+        ctx.fillStyle = bgcolor
+        ctx.fillRect(0, 0, width, height)
+      }
+      ctx.fillStyle = txtcolor
+      for (var j = 0; j < lines.length; j++) {
+        ctx.fillText(lines[j], borderSize, borderSize + j * size)
+      }
+      // console.log('createLabelCanvas', ctx)
+      return ctx.canvas
+    },
     createImgCanvas (src) {
       // let vnode = this
       return new Promise((resolve, reject) => {

src/components/objects/ContentBlock.vue

@@ -5,21 +5,22 @@
       <geometry type="Box" :args="[size.x, size.y, size.z]" />
       <material type="MeshLambert" :color="color" :options="opts" />
     </mesh> -->
-    <!-- <mesh
+    <mesh
+      v-if="label_canvas"
       ref="label3d"
       name="Content"
-      :position="position"
+      :position="label_position"
       :rotation="{
         x:deg2rad(rotation.x),
         y:deg2rad(rotation.y),
         z:deg2rad(rotation.z)
       }"
     >
-      <geometry type="Plane" :args="[size.x, size.y]" />
+      <geometry type="Plane" :args="[label_size.width, label_size.height]" />
       <material type="MeshLambert" :options="label_opts">
         <texture :options="label_texture_opts" />
       </material>
-    </mesh> -->
+    </mesh>
     <mesh
       v-if="img_canvas"
       ref="img3d"
@@ -61,7 +62,7 @@ export default {
   data: () => ({
     // block3d: null,
     project: null,
-    size: { x: 0, y: 0 },
+    size: { width: 0, height: 0 },
     position: { x: 0, y: 0, z: 0 },
     rotation: { x: 0, y: 0, z: 0 },
     // opts: {
@@ -71,28 +72,27 @@ export default {
     //   // opacity: 0.6
     // },
     isOpened: false,
-    // label3d: null,
-    // label_opts: {
-    //   side: THREE.DoubleSide,
-    //   // wireframe: false,
-    //   transparent: true
-    //   // opacity: 0.6
-    //   // renderOrder: 0
-    // },
-    img_opts: {
+    label_canvas: null,
+    label_position: { x: 0, y: 0, z: 0 },
+    label_size: null,
+    label_opts: {
       // side: THREE.DoubleSide,
       // wireframe: false,
-      // transparent: true
+      transparent: true
       // opacity: 0.6
       // renderOrder: 0
     },
-    // label_position: { x: 5, y: 5, z: 6 },
-    // label_canvas: null,
-    // label_size: null,
     preview_img_url: null,
     img_canvas: null,
     img_size: { x: 0, y: 0 },
     img_position: { x: 0, y: 0, z: 0 },
+    img_opts: {
+      // side: THREE.DoubleSide,
+      // wireframe: false,
+      // transparent: true
+      // opacity: 0.6
+      // renderOrder: 0
+    },
     img_padding: 0.25,
     face: null
   }),
@@ -108,29 +108,16 @@ export default {
     }),
     color () {
       let color = 0x000000
-      switch (this.type) {
-        case 'visible':
-          color = 0x0000ff
-          break
-        case 'context':
-          color = 0x00ffff
-          break
-        case 'process':
-          color = 0xff00ff
-          break
-        default:
-          color = 0xdddddd
-      }
       return color
     },
-    // label_texture_opts () {
-    //   return {
-    //     canvas: this.label_canvas,
-    //     minFilter: THREE.LinearFilter,
-    //     wrapS: THREE.ClampToEdgeWrapping,
-    //     wrapT: THREE.ClampToEdgeWrapping
-    //   }
-    // },
+    label_texture_opts () {
+      return {
+        canvas: this.label_canvas,
+        minFilter: THREE.LinearFilter,
+        wrapS: THREE.ClampToEdgeWrapping,
+        wrapT: THREE.ClampToEdgeWrapping
+      }
+    },
     img_texture_opts () {
       return {
         canvas: this.img_canvas,
@@ -144,6 +131,92 @@ export default {
     }
   },
   created () {
+    this.size.width = this.gridCel.width
+    this.size.height = this.gridCel.height
+
+    if (typeof this.data.country !== 'undefined' &&
+      typeof this.data.country.id !== 'undefined') {
+      // console.log('this.data.country.id', parseInt(this.data.country.id))
+      switch (parseInt(this.data.country.id)) {
+        case 1:
+          this.face = 'right'
+          break
+        case 2:
+          this.face = 'back'
+          break
+        case 3:
+          this.face = 'left'
+          break
+      }
+    } else {
+      let face = Math.random()
+      switch (this.faces_opaques) {
+        case 1:
+          this.face = 'back'
+          break
+        case 2:
+          // RANDOMLY USE 2 FACES
+          if (face < 0.5) {
+            this.face = 'left'
+          } else {
+            this.face = 'right'
+          }
+          break
+        case 3:
+          // RANDOMLY USE 3 FACES
+          if (face < 0.33) {
+            this.face = 'left'
+          } else if (face >= 0.33 && face < 0.66) {
+            this.face = 'back'
+          } else {
+            this.face = 'right'
+          }
+          break
+        case 4:
+          // RANDOMLY USE 4 FACES
+          if (face < 0.25) {
+            this.face = 'left'
+          } else if (face >= 0.25 && face < 0.5) {
+            this.face = 'back'
+          } else if (face >= 0.5 && face < 0.75) {
+            this.face = 'right'
+          } else {
+            this.face = 'front'
+          }
+          break
+      }
+    }
+    // this.face = 'left'
+    // console.log('face', this.face)
+    // define side
+    let side
+    switch (this.face) {
+      case 'back':
+      case 'front':
+        side = 'x'
+        break
+      case 'left':
+      case 'right':
+        side = 'z'
+        break
+    }
+    // Get GRID's CEL
+    if (typeof this.gridsContentPlaced[side] === 'undefined' ||
+      typeof this.gridsContentPlaced[side][this.face] === 'undefined' ||
+      typeof this.gridsContentPlaced[side][this.face][this.type] === 'undefined' ||
+      typeof this.gridsContentPlaced[side][this.face][this.type][this.id] === 'undefined') {
+      // First shift grid place (will transfer it from free places to occupied places)
+      this.shiftGrid({ face: this.face, type: this.type, id: this.id })
+    }
+    // rotation and position
+    // console.log(`side: ${side}, face: ${this.face}, type: ${this.type}, id: ${this.id}`)
+    let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
+    // console.log('gridPos', gridPos)
+    this.position.x = gridPos.x
+    this.position.z = gridPos.z
+    this.position.y = gridPos.y
+    this.rotation.y = gridPos.ry
+
     if (this.data.Vimeo) {
       this.preview_img_url = this.data.Vimeo.thumbnail_url_with_play_button
     } else if (this.data.Media && this.data.Media.length) {
@@ -152,107 +225,8 @@ export default {
       this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Images[0].url}`
     }
 
-    // for now display only items that have img to preview
-    // TODO: what to do with items without images ?
     if (this.preview_img_url) {
-      // this.size.width = this.projWall.winW * this.contents_size_factor
-      // this.size.height = this.projWall.winH * this.contents_size_factor
-
-      // // get the right size depending on screen
-      // let u
-      // if (window.innerWidth > window.innerHeight) {
-      //   u = window.innerHeight / window.innerWidth
-      // } else {
-      //   u = window.innerWidth / window.innerHeight
-      // }
-      // this.size.width = this.projWall.winW * this.contents_size_factor
-      // this.size.height = this.projWall.winH * u * this.contents_size_factor
-      this.size.width = this.gridCel.width
-      this.size.height = this.gridCel.height
-      // console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.width}, size.y :${this.size.height}`)
-
-      if (typeof this.data.country !== 'undefined' &&
-        typeof this.data.country.id !== 'undefined') {
-        // console.log('this.data.country.id', parseInt(this.data.country.id))
-        switch (parseInt(this.data.country.id)) {
-          case 1:
-            this.face = 'right'
-            break
-          case 2:
-            this.face = 'back'
-            break
-          case 3:
-            this.face = 'left'
-            break
-        }
-      } else {
-        let face = Math.random()
-        switch (this.faces_opaques) {
-          case 1:
-            this.face = 'back'
-            break
-          case 2:
-            // RANDOMLY USE 2 FACES
-            if (face < 0.5) {
-              this.face = 'left'
-            } else {
-              this.face = 'right'
-            }
-            break
-          case 3:
-            // RANDOMLY USE 3 FACES
-            if (face < 0.33) {
-              this.face = 'left'
-            } else if (face >= 0.33 && face < 0.66) {
-              this.face = 'back'
-            } else {
-              this.face = 'right'
-            }
-            break
-          case 4:
-            // RANDOMLY USE 4 FACES
-            if (face < 0.25) {
-              this.face = 'left'
-            } else if (face >= 0.25 && face < 0.5) {
-              this.face = 'back'
-            } else if (face >= 0.5 && face < 0.75) {
-              this.face = 'right'
-            } else {
-              this.face = 'front'
-            }
-            break
-        }
-      }
-      // this.face = 'left'
-      // console.log('face', this.face)
-      // define side
-      let side
-      switch (this.face) {
-        case 'back':
-        case 'front':
-          side = 'x'
-          break
-        case 'left':
-        case 'right':
-          side = 'z'
-          break
-      }
-      // Get GRID's CEL
-      if (typeof this.gridsContentPlaced[side] === 'undefined' ||
-        typeof this.gridsContentPlaced[side][this.face] === 'undefined' ||
-        typeof this.gridsContentPlaced[side][this.face][this.type] === 'undefined' ||
-        typeof this.gridsContentPlaced[side][this.face][this.type][this.id] === 'undefined') {
-        // First shift grid place (will transfer it from free places to occupied places)
-        this.shiftGrid({ face: this.face, type: this.type, id: this.id })
-      }
-      // rotation and position
-      let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
-      // console.log('gridPos', gridPos)
-      this.position.x = gridPos.x
-      this.position.z = gridPos.z
-      this.position.y = gridPos.y
-      this.rotation.y = gridPos.ry
-      // console.log(this.data.Media[0].url)
+      // console.log(this.preview_img_url)
       // create image object with a promise (async img loading)
       this.createImgCanvas(this.preview_img_url)
         .then(({ img, canvas }) => {
@@ -290,8 +264,35 @@ export default {
           console.warn('CATCH img load ERROR')
         })
     }
-    // this.img_position = { ...this.position }
-    // this.img_position.y -= this.size.height
+    // else {
+    //   // if no images, display title
+    //   let labelCanvas = this.createLabelCanvas(this.data.Name, 48, 21, 0x000000)
+    //   // console.log('this.label_canvas', this.label_canvas)
+    //   let f
+    //   if (labelCanvas.width >= labelCanvas.height) {
+    //     f = this.size.width / labelCanvas.width
+    //     this.label_size.width = labelCanvas.width * f
+    //     this.label_size.height = labelCanvas.height * f
+    //   } else {
+    //     f = this.size.height / labelCanvas.height
+    //     this.label_size.height = labelCanvas.height * f
+    //     this.label_size.width = labelCanvas.width * f
+    //   }
+    //
+    //   this.label_position.y = this.position.y
+    //   switch (side) {
+    //     case 'z':
+    //       this.label_position.z = this.position.z + this.size.width / 2
+    //       this.label_position.x = this.position.x
+    //       break
+    //     case 'x':
+    //       this.label_position.x = this.position.x + this.size.width / 2
+    //       this.label_position.z = this.position.z
+    //       break
+    //   }
+    //
+    //   this.label_canvas = labelCanvas
+    // }
   },
   mounted () {
     // this.block3d = this.$refs.block3d.curObj

src/components/objects/Project.vue

@@ -166,7 +166,7 @@ export default {
     }
   },
   created () {
-    this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor)
+    this.label_canvas = this.createBuildingTitleCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor)
     this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
     this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
     this.label_position.z = this.position.z + this.size.z / 2 + 0.5

src/store/modules/project.js

@@ -100,7 +100,6 @@ export default {
     setGrids: (state, grids) => { state.grids = grids },
     // setDebugGrids3dObj: (state, obj) => { state.gridBebug3dObj = obj },
     shiftGrid: (state, c) => {
-      // console.log('shiftGrid c:', c)
       let side
       switch (c.face) {
         case 'back':
@@ -112,6 +111,7 @@ export default {
           side = 'z'
           break
       }
+      // console.log(`shiftGrid side: ${side}, face: ${c.face}, type: ${c.type}, id: ${c.id}`)
       let p = state.grids[side][c.face][c.type].pop()
       if (!state.gridsContentPlaced[side]) {
         state.gridsContentPlaced[side] = {}
@@ -249,8 +249,8 @@ export default {
           // create level if not exists
           if (!grid[t]) {
             grid[t] = []
-            // skip the first level's row as we will display wall title
-            continue
+            // // skip the first level's row as we will display wall title
+            // continue
           }
           // create cols for each rows
           for (var l = cols - 1; l >= 0; l--) { // cols
@@ -519,7 +519,10 @@ export default {
 
       return GRAPHQL.post('', { query: `query {
           project(id: "${state.id}") {
-            visibles(where: { Published: "true" }){
+            visibles(
+              where: {Published: "true"},
+              sort: "Weight:desc"
+            ){
               id
               Name
               Media {
@@ -534,6 +537,7 @@ export default {
                 id
                 Name
               }
+              Weight
             }
             contexts(where: { Published: "true" }){
               id
@@ -580,8 +584,8 @@ export default {
     },
     computeContents ({ dispatch, commit, state }, contents) {
       console.log('computeContents')
-      return Promise.all(Object.keys(contents).map(function (key) {
-        return Promise.all(contents[key].map(function (content) {
+      return Promise.all(Object.keys(contents).map(function (level) {
+        return Promise.all(contents[level].map(function (content) {
           if (content.Vimeo) {
             // console.log('Vimeo', content.Vimeo)
             // GET https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/286898202&width=480&height=360
@@ -605,10 +609,10 @@ export default {
             return content
           }
         })).then((cts) => {
-          // return an object with the right key (visible, etc, ...)
-          // console.log(`${key} cts`, cts)
+          // return an object with the right level (visible, etc, ...)
+          // console.log(`${level} cts`, cts)
           let o = {}
-          o[key] = cts
+          o[level] = cts
           return o
         })
       })).then((a) => {