refactorisation fished, contents are back in grid

src/components/objects/ContentBlock.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { mapInstanceState } from '@urbn/vuex-helpers'
+import { mapInstanceState, mapInstanceMutations } from '@urbn/vuex-helpers'
 // import { mapState, mapGetters } from 'vuex'
 
 import * as THREE from 'three'
@@ -54,7 +54,7 @@ const getModuleName = cmp => `project:${cmp.prtId}`
 export default {
   name: 'ContentBlock',
   mixins: [mixins],
-  props: { prtId: Number, prtIndex: Number, type: String, data: Object },
+  props: { prtId: Number, type: String, data: Object },
   data: () => ({
     // block3d: null,
     project: null,
@@ -92,15 +92,11 @@ export default {
     face: null
   }),
   computed: {
-    // ...mapState({
-    //   projects: state => state.Projects.projects
-    // }),
-    // ...mapGetters({
-    //   getGridPos: 'Projects/getGridPos'
-    // }),
     ...mapInstanceState(getModuleName, {
-      size: state => state.size,
-      position: state => state.position
+      projSize: state => state.size,
+      projPos: state => state.position,
+      projWall: state => state.wall,
+      gridContentPlaced: state => state.gridContentPlaced
     }),
     color () {
       let color = 0x000000
@@ -134,12 +130,14 @@ export default {
         wrapS: THREE.ClampToEdgeWrapping,
         wrapT: THREE.ClampToEdgeWrapping
       }
+    },
+    id () {
+      return this.data.id
     }
   },
   created () {
-    this.project = this.projects[this.prtIndex]
-    this.size.x = this.project.wall.winW / 2
-    this.size.y = this.project.wall.winY / 2
+    this.size.x = this.projWall.winW / 2
+    this.size.y = this.projWall.winY / 2
     // console.log('ContentBlock created', this.data)
     // let txtcolor = '#000000'
     // switch (this.type) {
@@ -161,8 +159,8 @@ export default {
     // this.size.y = this.label_size.y + 0.2
 
     // let y = 0
-    // let top = this.prtPosition.y + this.prtSize.y / 2
-    // let floor = this.prtPosition.y - this.prtSize.y / 2
+    // let top = this.projPos.y + this.projSize.y / 2
+    // let floor = this.projPos.y - this.projSize.y / 2
     // switch (this.type) {
     //   case 'visible':
     //     y = top * Math.random()
@@ -184,25 +182,25 @@ export default {
     // if (face < 0.25) {
     //   // gauche
     //   this.face = 'left'
-    //   this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
-    //   this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+    //   this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
+    //   this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
     //   this.rotation.y = 90
     // } else if (face >= 0.25 && face < 0.5) {
     //   // fond
     //   this.face = 'back'
-    //   this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1
-    //   this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
+    //   this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
+    //   this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
     // } else if (face >= 0.5 && face < 0.75) {
     //   // droite
     //   this.face = 'right'
-    //   this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
-    //   this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+    //   this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
+    //   this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
     //   this.rotation.y = -90
     // } else {
     //   // face
     //   this.face = 'front'
-    //   this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1
-    //   this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
+    //   this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
+    //   this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
     //   this.rotation.y = 180
     // }
 
@@ -210,25 +208,28 @@ export default {
     if (face < 0.5) {
       // gauche
       this.face = 'left'
-      this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
-      // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+      this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
+      // this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
       this.rotation.y = 90
     } else {
       // droite
       this.face = 'right'
-      this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
-      // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+      this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
+      // this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
       this.rotation.y = -90
     }
 
     // With GRID
     // this.face = 'left'
-    // this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
+    // this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
     // this.rotation.y = 90
-    let pos = this.getGridPos(this.prtIndex)
+    // First shift grid place (will transfer it from free places to occupied places)
+    this.shiftGrid({ type: this.type, id: this.id })
+    // Then get the right place for the current content
+    let pos = this.gridContentPlaced[this.type][this.id]
     console.log('pos', pos)
-    this.position.z = this.prtPosition.z - this.prtSize.z / 2 + pos.z
-    this.position.y = this.prtPosition.y - this.prtSize.y / 2 + pos.y
+    this.position.z = this.projPos.z - this.projSize.z / 2 + pos.z
+    this.position.y = this.projPos.y - this.projSize.y / 2 + pos.y
 
     // this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
     // this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
@@ -293,6 +294,11 @@ export default {
         vnode: this
       }
     }
+  },
+  methods: {
+    ...mapInstanceMutations(getModuleName, {
+      shiftGrid: 'shiftGrid'
+    })
   }
 }
 </script>

src/components/objects/Project.vue

@@ -12,39 +12,31 @@
     </mesh>
     <div v-if="isOpened">
       <ContentBlock
-        v-for="item in contents.visibles"
-        :key="item.id"
-        :prtPosition="position"
-        :prtSize="size"
-        :prtIndex="index"
+        v-for="(item, i) in contents.visibles"
+        :key="i"
         type="visible"
+        :prtId="id"
         :data="item"
         />
       <ContentBlock
-        v-for="item in contents.contexts"
-        :key="item.id"
-        :prtPosition="position"
-        :prtSize="size"
-        :prtIndex="index"
+        v-for="(item, i) in contents.contexts"
+        :key="i"
         type="context"
+        :prtId="id"
         :data="item"
         />
       <ContentBlock
-        v-for="item in contents.processes"
-        :key="item.id"
-        :prtPosition="position"
-        :prtSize="size"
-        :prtIndex="index"
+        v-for="(item, i) in contents.processes"
+        :key="i"
         type="process"
+        :prtId="id"
         :data="item"
         />
       <ContentBlock
-        v-for="item in contents.concepts"
-        :key="item.id"
-        :prtPosition="position"
-        :prtSize="size"
-        :prtIndex="index"
+        v-for="(item, i) in contents.concepts"
+        :key="i"
         type="concept"
+        :prtId="id"
         :data="item"
         />
     </div>

src/store/modules/project.js

@@ -38,7 +38,8 @@ export default {
       paddingZ: 0
     },
     contents: {},
-    grid: []
+    grid: [],
+    gridContentPlaced: {}
   },
 
   // getters
@@ -77,7 +78,15 @@ export default {
     setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
     setFloorPos: (state, pos) => { state.floorPos = pos },
     setTopColor: (state, col) => { state.topColor = col },
-    setFloorColor: (state, col) => { state.floorColor = col }
+    setFloorColor: (state, col) => { state.floorColor = col },
+    setContents: (state, contents) => { state.contents = contents },
+    shiftGrid: (state, c) => {
+      let p = state.grid.shift()
+      if (!state.gridContentPlaced[c.type]) {
+        state.gridContentPlaced[c.type] = {}
+      }
+      state.gridContentPlaced[c.type][c.id] = p
+    }
   },
 
   // actions
@@ -142,34 +151,33 @@ export default {
         state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
         a++
       }
-      // state.wall = { ...wall }
-      //
-      // // CONTENTS GRID
-      // a = 0
-      // state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW)
-      // while (state.wall.paddingZ < 0.4) {
-      //   state.wall.nbrWinZ -= a
-      //   state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1)
-      //   a++
-      // }
-      //
-      // 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
-      //     })
-      //   }
-      // }
-      // // 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
-      // }
-      // state.grid = [ ...grid ]
+
+      // CONTENTS GRID
+      a = 0
+      state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW)
+      while (state.wall.paddingZ < 0.4) {
+        state.wall.nbrWinZ -= a
+        state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1)
+        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
+          })
+        }
+      }
+      // 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
+      }
+      state.grid = [ ...grid ]
     },
     build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
       console.log('build3dObjs')
@@ -299,9 +307,10 @@ export default {
     },
     loadContents ({ dispatch, commit, state }) {
       console.log('loadContents')
+      // (where: { Published: "true" })
       GRAPHQL.post('', { query: `query {
           project(id: "${state.id}") {
-            visibles(where: { Published: "true" }){
+            visibles{
               id
               Name
               Media {
@@ -313,7 +322,7 @@ export default {
               Url
               categories
             }
-            contexts(where: { Published: "true" }){
+            contexts{
               id
               Name
               Images {
@@ -324,7 +333,7 @@ export default {
               Vimeo
               Url
             }
-            processes(where: { Published: "true" }){
+            processes{
               id
               Name
               Media {
@@ -335,7 +344,7 @@ export default {
               Vimeo
               Url
             }
-            concepts(where: { Published: "true" }){
+            concepts{
               id
               Name
               Images {
@@ -348,7 +357,8 @@ export default {
           }
         }` })
         .then(({ data: { data: { project } = null } }) => {
-          console.log('graphql visibles', project)
+          console.log('graphql contents', project)
+          commit('setContents', project)
           // dispatch('computeProjects', projects)
         })
         .catch((error) => {
@@ -356,5 +366,10 @@ export default {
           Promise.reject(error)
         })
     }
+    // getGridPos ({ state, commit }) {
+    //   let p = state.grid[0]
+    //   commit('shiftGrid')
+    //   Promise.resolve(p)
+    // }
   }
 }

src/store/modules/projects.js

@@ -24,11 +24,6 @@ export default {
     projectID: (state) => (index) => {
       // console.log('getter projectID index', index)
       return state.projects[index].id
-    },
-    getGridPos: (state) => (index) => {
-      let popped = state.projects[index].grid.pop()
-      // console.log('getGridPos: popped', popped)
-      return popped
     }
   },