bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading graphql project contents

Browse Source
This commit is contained in:
bachir
2020-09-16 16:06:18 +02:00
parent 7c566a67d9
commit 15ad778ce2
5 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+6 -4
View File
@@ -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
+17 -7
View File
@@ -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
+23 -27
View File
@@ -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
+72 -4
View File
@@ -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
+1 -1
View File
@@ -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