grid for contents in 3 levels ok

src/components/objects/ContentBlock.vue

@@ -89,6 +89,7 @@ export default {
     img_canvas: null,
     img_size: { x: 0, y: 0 },
     img_position: { x: 0, y: 0, z: 0 },
+    img_padding: 0.25,
     face: null
   }),
   computed: {
@@ -96,7 +97,8 @@ export default {
       projSize: state => state.size,
       projPos: state => state.position,
       projWall: state => state.wall,
-      gridContentPlaced: state => state.gridContentPlaced
+      gridContentPlaced: state => state.gridContentPlaced,
+      contents_size_factor: state => state.contents_size_factor
     }),
     color () {
       let color = 0x000000
@@ -136,8 +138,8 @@ export default {
     }
   },
   created () {
-    this.size.x = this.projWall.winW / 2
-    this.size.y = this.projWall.winY / 2
+    this.size.x = this.projWall.winW * this.contents_size_factor
+    this.size.y = this.projWall.winY * this.contents_size_factor
     // console.log('ContentBlock created', this.data)
     // let txtcolor = '#000000'
     // switch (this.type) {
@@ -243,8 +245,8 @@ export default {
         .then(({ img, canvas }) => {
           // console.log('THEN img loaded ok', this, img, canvas)
           let f = this.size.x / canvas.width
-          this.img_size.x = canvas.width * f
-          this.img_size.y = this.size.y = canvas.height * f
+          this.img_size.x = canvas.width * f - this.img_padding * 2
+          this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2
           console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
           this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
           switch (this.face) {
@@ -298,7 +300,11 @@ export default {
   methods: {
     ...mapInstanceMutations(getModuleName, {
       shiftGrid: 'shiftGrid'
-    })
+    }),
+    open () {
+      this.isOpened = true
+      // this.loadContents()
+    }
   }
 }
 </script>

src/store/modules/project.js

@@ -38,7 +38,9 @@ export default {
       paddingZ: 0
     },
     contents: {},
-    grid: [],
+    contents_size_factor: 2, // factor to get the contents (grid) size proportional to windows
+    contentTypes: ['visible', 'context', 'process', 'concept'],
+    grid: { visible: [], context: [], process: [], concept: [] },
     gridContentPlaced: {}
   },
 
@@ -80,8 +82,9 @@ export default {
     setTopColor: (state, col) => { state.topColor = col },
     setFloorColor: (state, col) => { state.floorColor = col },
     setContents: (state, contents) => { state.contents = contents },
+    setGrid: (state, grid) => { state.grid = grid },
     shiftGrid: (state, c) => {
-      let p = state.grid.shift()
+      let p = state.grid[c.type].shift()
       if (!state.gridContentPlaced[c.type]) {
         state.gridContentPlaced[c.type] = {}
       }
@@ -161,23 +164,43 @@ export default {
         a++
       }
 
-      let grid = []
-      for (var l = 0; l < state.wall.nbrWinZ * 2; l++) { // cols
-        for (var m = 0; m < state.wall.nbrWinY * 2; m++) { // rows
-          grid.push({
-            z: margin + state.wall.winW / 2 * l,
-            y: margin + state.wall.winH / 2 * m
+      let grid = {}
+      let rows = state.wall.nbrWinY / state.contents_size_factor
+      let cols = state.wall.nbrWinZ / state.contents_size_factor
+      let t
+      for (var m = 0; m < rows; m++) { // rows
+        if (m > rows / 4 * 3) {
+          t = state.contentTypes[0]
+        } else if (m > rows / 4 * 2) {
+          t = state.contentTypes[1]
+        } else if (m > rows / 4) {
+          t = state.contentTypes[2]
+        } else {
+          t = state.contentTypes[3]
+        }
+        if (!grid[t]) {
+          grid[t] = []
+        }
+        for (var l = 0; l < cols; l++) { // cols
+          grid[t].push({
+            z: margin + state.wall.winW * state.contents_size_factor * l,
+            y: margin + state.wall.winH * state.contents_size_factor * m
           })
         }
       }
-      // shuffle the grid
-      for (let n = grid.length - 1; n > 0; n--) {
-        const o = Math.floor(Math.random() * n)
-        const temp = grid[n]
-        grid[n] = grid[o]
-        grid[o] = temp
+      console.log('grid', grid)
+      // shuffle the grids
+      for (var i = 0; i < state.contentTypes.length; i++) {
+        for (let n = grid[state.contentTypes[i]].length - 1; n > 0; n--) {
+          const o = Math.floor(Math.random() * n)
+          const temp = grid[state.contentTypes[i]][n]
+          grid[state.contentTypes[i]][n] = grid[state.contentTypes[i]][o]
+          grid[state.contentTypes[i]][o] = temp
+        }
       }
-      state.grid = [ ...grid ]
+      console.log('shuffeld grid', grid)
+      commit('setGrid', grid)
+      console.log('state.grid', state.grid)
     },
     build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
       console.log('build3dObjs')
@@ -307,10 +330,9 @@ export default {
     },
     loadContents ({ dispatch, commit, state }) {
       console.log('loadContents')
-      // (where: { Published: "true" })
       GRAPHQL.post('', { query: `query {
           project(id: "${state.id}") {
-            visibles{
+            visibles(where: { Published: "true" }){
               id
               Name
               Media {
@@ -322,7 +344,7 @@ export default {
               Url
               categories
             }
-            contexts{
+            contexts(where: { Published: "true" }){
               id
               Name
               Images {
@@ -333,7 +355,7 @@ export default {
               Vimeo
               Url
             }
-            processes{
+            processes(where: { Published: "true" }){
               id
               Name
               Media {
@@ -344,7 +366,7 @@ export default {
               Vimeo
               Url
             }
-            concepts{
+            concepts(where: { Published: "true" }){
               id
               Name
               Images {