loading graphql project contents

src/App.vue

@@ -303,7 +303,7 @@ export default {
       // INTERACTIONS
       this.updatedInteractiveObjects()
 
-      // check if draging
+      // check if not draging
       if (Math.hypot(e.clientX - this.controls.mouse_start.x, e.clientY - this.controls.mouse_start.y) < 5) {
         // update the picking ray with the camera and mouse position
         this.raycaster.setFromCamera(this.mouse, this.camera)
@@ -311,11 +311,11 @@ export default {
         var intersects = this.raycaster.intersectObjects(this.interactive_objects)
         // console.log('intersects', intersects)
 
+        // if we clicked on 3Dobject
         if (intersects.length) {
           let cam = this.camera
           let camPos = { ...this.camera.position }
           console.log('onDocMouseUp intersects', intersects)
-          // for (var i = 0; i < intersects.length; i++) {
           let object = intersects[0].object
           console.log('object[0].name', object.name)
           let vnode = object.userData.vnode
@@ -328,11 +328,13 @@ export default {
             // console.log('opened_vnode', this.opened_vnode)
             this.opened_vnode.isOpened = false
           }
-          // opene current vnode
-          vnode.isOpened = true
+          // open current vnode
+          // vnode.isOpened = true
+          vnode.open()
           // recorde vnode as precedent vnode
           this.opened_vnode = vnode
 
+          // get new camera target pos
           let toPos = { ...object.position }
           if (object.name === 'Content') {
             switch (vnode.face) {

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>

src/store/modules/project.js

@@ -3,6 +3,7 @@
 
 // import qs from 'querystring'
 // import { REST } from 'api/rest-axios'
+import { GRAPHQL } from 'api/graphql-axios'
 
 import * as THREE from 'three'
 import { ThreeBSP } from 'three-js-csg-es6'
@@ -19,8 +20,10 @@ export default {
     wallsPos: null,
     top3dObj: null,
     topPos: null,
+    topColor: null,
     floor3dObj: null,
     floorPos: null,
+    florrColor: null,
     wall: {
       wallW: 0.001,
       // dig windows on face and back
@@ -34,6 +37,7 @@ export default {
       nbrWinZ: 0,
       paddingZ: 0
     },
+    contents: {},
     grid: []
   },
 
@@ -71,7 +75,9 @@ export default {
     setTop3dObj: (state, obj) => { state.top3dObj = obj },
     setTopPos: (state, pos) => { state.topPos = pos },
     setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
-    setFloorPos: (state, pos) => { state.floorPos = pos }
+    setFloorPos: (state, pos) => { state.floorPos = pos },
+    setTopColor: (state, col) => { state.topColor = col },
+    setFloorColor: (state, col) => { state.floorColor = col }
   },
 
   // actions
@@ -114,7 +120,8 @@ export default {
       // console.log('x', x)
       commit('setPosition', {
         x: x,
-        y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+        // y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+        y: -state.size.y / 4,
         z: -10 + Math.random() * 10
       })
 
@@ -235,8 +242,10 @@ export default {
       let sFloor = Math.round(40 + Math.random() * 20)
       let lFloor = Math.round(5 + Math.random() * 15)
       let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
-      let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
-      let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
+      commit('setTopColor', topColor)
+      let floorColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
+      commit('setFloorColor', floorColor)
+      let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, floorColor))
       let materialOpts = {
         color: 0xffffff,
         side: THREE.DoubleSide,
@@ -287,6 +296,65 @@ export default {
       // }
       // let levelMat = new THREE.MeshPhongMaterial(levelOpts)
       // levelMesh.material = levelMat
+    },
+    loadContents ({ dispatch, commit, state }) {
+      console.log('loadContents')
+      GRAPHQL.post('', { query: `query {
+          project(id: "${state.id}") {
+            visibles(where: { Published: "true" }){
+              id
+              Name
+              Media {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+              categories
+            }
+            contexts(where: { Published: "true" }){
+              id
+              Name
+              Images {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+            }
+            processes(where: { Published: "true" }){
+              id
+              Name
+              Media {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+            }
+            concepts(where: { Published: "true" }){
+              id
+              Name
+              Images {
+                url
+                size
+              }
+              Text2
+              Vimeo
+            }
+          }
+        }` })
+        .then(({ data: { data: { project } = null } }) => {
+          console.log('graphql visibles', project)
+          // dispatch('computeProjects', projects)
+        })
+        .catch((error) => {
+          console.warn('Issue with getProjects', error)
+          Promise.reject(error)
+        })
     }
   }
 }

src/store/modules/projects.js

@@ -98,7 +98,7 @@ export default {
           commit('increaseTotalW', w)
           size = {
             x: w,
-            y: Math.round(150 + Math.random() * 50),
+            y: Math.round(110 + Math.random() * 100),
             z: Math.round(10 + Math.random() * 30)
           }
           // convert to number the project id