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>