loading graphql project contents

src/components/objects/ContentBlock.vue

@@ -41,14 +41,20 @@
 </template>
 
 <script>
+import { mapInstanceState } from '@urbn/vuex-helpers'
+// import { mapState, mapGetters } from 'vuex'
+
 import * as THREE from 'three'
 import mixins from 'components/mixins'
-import { mapState, mapGetters } from 'vuex'
+
+// We'll determine our module based on the moduleName prop on this component
+// https://www.npmjs.com/package/@urbn/vuex-helpers
+const getModuleName = cmp => `project:${cmp.prtId}`
 
 export default {
   name: 'ContentBlock',
   mixins: [mixins],
-  props: { prtPosition: Object, prtSize: Object, prtIndex: Number, type: String, data: Object },
+  props: { prtId: Number, prtIndex: Number, type: String, data: Object },
   data: () => ({
     // block3d: null,
     project: null,
@@ -86,11 +92,15 @@ export default {
     face: null
   }),
   computed: {
-    ...mapState({
-      projects: state => state.Projects.projects
-    }),
-    ...mapGetters({
-      getGridPos: 'Projects/getGridPos'
+    // ...mapState({
+    //   projects: state => state.Projects.projects
+    // }),
+    // ...mapGetters({
+    //   getGridPos: 'Projects/getGridPos'
+    // }),
+    ...mapInstanceState(getModuleName, {
+      size: state => state.size,
+      position: state => state.position
     }),
     color () {
       let color = 0x000000

src/components/objects/Project.vue

@@ -10,9 +10,9 @@
         <texture :options="label_texture_opts" />
       </material>
     </mesh>
-    <!-- <div v-if="isOpened">
+    <div v-if="isOpened">
       <ContentBlock
-        v-for="item in data.visibles"
+        v-for="item in contents.visibles"
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
@@ -21,7 +21,7 @@
         :data="item"
         />
       <ContentBlock
-        v-for="item in data.contexts"
+        v-for="item in contents.contexts"
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
@@ -30,7 +30,7 @@
         :data="item"
         />
       <ContentBlock
-        v-for="item in data.processes"
+        v-for="item in contents.processes"
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
@@ -39,7 +39,7 @@
         :data="item"
         />
       <ContentBlock
-        v-for="item in data.concepts"
+        v-for="item in contents.concepts"
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
@@ -47,20 +47,20 @@
         type="concept"
         :data="item"
         />
-    </div> -->
+    </div>
   </div>
 </template>
 
 <script>
 
-import { mapInstanceState } from '@urbn/vuex-helpers'
+import { mapInstanceState, mapInstanceActions } from '@urbn/vuex-helpers'
 
 import * as THREE from 'three'
 // import { ThreeBSP } from 'three-js-csg-es6'
 
 import mixins from 'components/mixins'
 
-// import ContentBlock from 'components/objects/ContentBlock'
+import ContentBlock from 'components/objects/ContentBlock'
 
 // import BgVertex from 'assets/glsl/BgVertex'
 // import BuildingFragment from 'assets/glsl/BuildingFragment'
@@ -72,25 +72,23 @@ const getModuleName = cmp => `project:${cmp.id}`
 export default {
   name: 'Project',
   components: {
-    // ContentBlock
+    ContentBlock
   },
   mixins: [mixins],
   props: { id: Number },
   data () {
     console.log('Project data()')
-
     return {
       isOpened: false,
       block3d: null,
       label3d: null,
       label_opts: {
         side: THREE.DoubleSide,
-        // wireframe: false,
         transparent: true
+        // wireframe: false,
         // opacity: 0.6
         // renderOrder: 0
       },
-      color: 0xffffff,
       label_canvas: null,
       label_size: null,
       label_position: { x: 0, y: 0, z: 0 }
@@ -107,8 +105,10 @@ export default {
       wallsPos: state => state.wallsPos,
       top3dObj: state => state.top3dObj,
       topPos: state => state.topPos,
+      topColor: state => state.topColor,
       floor3dObj: state => state.floor3dObj,
-      floorPos: state => state.floorPos
+      floorPos: state => state.floorPos,
+      contents: state => state.contents
     }),
     label_texture_opts () {
       return {
@@ -120,7 +120,7 @@ export default {
     }
   },
   created () {
-    this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
+    this.label_canvas = this.createLabelCanvas(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
@@ -129,22 +129,18 @@ export default {
   mounted () {
     console.log('project mounted', this)
     // record self references
-
     this.block3d = this.$refs.block3d.curObj
-    // this.block3d.castShadow = true
-    // this.block3d.receiveShadow = true
-
-    this.block3d.userData = {
-      vnode: this
-    }
-    // this.label3d = this.$refs.label3d.curObj
-
-    // light
-    // console.log('project mounted', this.$env3d)
-    // var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
-    // this.$env3d.scene.add(light)
+    this.block3d.userData.vnode = this
+    this.label3d = this.$refs.label3d.curObj
   },
   methods: {
+    ...mapInstanceActions(getModuleName, {
+      loadContents: 'loadContents'
+    }),
+    open () {
+      this.isOpened = true
+      this.loadContents()
+    }
   }
 }
 </script>