got dynamic store module to work
using @urbn/vuex-helpers
This commit is contained in:
Generated
+5
@@ -3087,6 +3087,11 @@
|
||||
"integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
|
||||
"dev": true
|
||||
},
|
||||
"@urbn/vuex-helpers": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@urbn/vuex-helpers/-/vuex-helpers-0.1.0.tgz",
|
||||
"integrity": "sha512-9yPAWnCA8JHNrebU/dh0/Zz/6ojZc+xL25eNjIhDuuR4TgRLOLpAeY3+JH3WkF3DfebD/F5FQ6qBHmA76rXjHw=="
|
||||
},
|
||||
"@vue/component-compiler-utils": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tweenjs/tween.js": "^18.6.0",
|
||||
"@urbn/vuex-helpers": "^0.1.0",
|
||||
"axios": "^0.18.1",
|
||||
"dat.gui": "^0.7.7",
|
||||
"oimo": "^1.0.9",
|
||||
|
||||
+2
-1
@@ -40,7 +40,8 @@
|
||||
<project
|
||||
v-for="(project) in projects"
|
||||
:key="project.id"
|
||||
:data="project"
|
||||
:id="project.id"
|
||||
:title="project.Titre"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<object3d ref="block3d" name="Project" :obj="building" :position="building_position"/>
|
||||
<object3d ref="top" :obj="top_mesh" :position="top_position"/>
|
||||
<object3d ref="floor" :obj="floor_mesh" :position="floor_position"/>
|
||||
<object3d ref="level" :obj="level_mesh" :position="level_position"/>
|
||||
<object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
|
||||
<object3d ref="top" :obj="top_mesh" :position="top_position" />
|
||||
<object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
|
||||
<object3d ref="level" :obj="level_mesh" :position="level_position" />
|
||||
<!-- <light :obj="light" :position="building_position" /> -->
|
||||
<mesh ref="label3d" name="Label" :position="label_position">
|
||||
<geometry type="Plane" :args="[label_size.x, label_size.y]" />
|
||||
@@ -11,7 +11,7 @@
|
||||
<texture :options="label_texture_opts" />
|
||||
</material>
|
||||
</mesh>
|
||||
<div v-if="isOpened">
|
||||
<!-- <div v-if="isOpened">
|
||||
<ContentBlock
|
||||
v-for="item in data.visibles"
|
||||
:key="item.id"
|
||||
@@ -48,29 +48,36 @@
|
||||
type="concept"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapInstanceState } from '@urbn/vuex-helpers'
|
||||
|
||||
import * as THREE from 'three'
|
||||
// import { toCSG, fromCSG } from 'three-csg'
|
||||
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'
|
||||
|
||||
// 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.id}`
|
||||
|
||||
export default {
|
||||
name: 'Project',
|
||||
components: {
|
||||
ContentBlock
|
||||
// ContentBlock
|
||||
},
|
||||
mixins: [mixins],
|
||||
// props: { size: Object, texture: String, position: Object, color: Number },
|
||||
props: { data: Object, len: Number, index: Number },
|
||||
props: { id: Number, title: String },
|
||||
data () {
|
||||
console.log('Project data() : data', this.data)
|
||||
// get size and positions from project store
|
||||
@@ -265,6 +272,7 @@ export default {
|
||||
levelMesh.material = levelMat
|
||||
|
||||
return {
|
||||
modName: null,
|
||||
block3d: null,
|
||||
// block_opts: materialOpts,
|
||||
label3d: null,
|
||||
@@ -297,6 +305,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapInstanceState(getModuleName, {
|
||||
storeID: state => state.id
|
||||
}),
|
||||
label_texture_opts () {
|
||||
return {
|
||||
canvas: this.label_canvas,
|
||||
@@ -308,8 +319,13 @@ export default {
|
||||
},
|
||||
created () {
|
||||
console.log('Project created: data', this, this.data)
|
||||
console.log('Project created: getModuleName', getModuleName)
|
||||
|
||||
this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
// TODO: create dynamic vuex module for each project
|
||||
// this.modNameSpace = `project:${this.data.id}`
|
||||
|
||||
// this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
this.label_canvas = this.createLabelCanvas(this.storeID.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
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
|
||||
@@ -332,10 +348,8 @@ export default {
|
||||
// console.log('project mounted', this.$env3d)
|
||||
// var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
|
||||
// this.$env3d.scene.add(light)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
// ,
|
||||
// methods: {
|
||||
//
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
// https://codeburst.io/dynamic-modules-with-vuex-and-vue-b9c481ca792
|
||||
// https://www.brophy.org/post/instance-aware-vuex-modules-1/
|
||||
|
||||
// import qs from 'querystring'
|
||||
// import { REST } from 'api/rest-axios'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
|
||||
// initial state
|
||||
state: {
|
||||
},
|
||||
|
||||
// getters
|
||||
getters: {
|
||||
},
|
||||
|
||||
// mutations
|
||||
mutations: {
|
||||
},
|
||||
|
||||
// actions
|
||||
actions: {
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// import qs from 'querystring'
|
||||
// import { REST } from 'api/rest-axios'
|
||||
import { GRAPHQL } from 'api/graphql-axios'
|
||||
import projectMod from 'store/modules/project'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
@@ -24,6 +25,19 @@ export default {
|
||||
setProjects (state, projects) {
|
||||
// record the retrieved data
|
||||
state.projects = projects
|
||||
console.log('setProjects', this)
|
||||
// register a new module only if doesn't exist
|
||||
let name
|
||||
projects.forEach((project, i) => {
|
||||
name = `project:${project.id}`
|
||||
if (!(this.state && this.state[name])) {
|
||||
projectMod.state = { ...project }
|
||||
this.registerModule(name, projectMod)
|
||||
} else {
|
||||
// re-use the already existing module
|
||||
console.log(`reusing module poject:${project.id}`)
|
||||
}
|
||||
})
|
||||
|
||||
// randomly define building sizes
|
||||
let totalW = 0
|
||||
@@ -126,16 +140,16 @@ export default {
|
||||
// async get authors
|
||||
getProjects ({ dispatch, commit, state }) {
|
||||
// GRAPHQL
|
||||
let query = `query {
|
||||
projects {
|
||||
id
|
||||
Weight
|
||||
Titre
|
||||
}
|
||||
}`
|
||||
GRAPHQL.post('', { query: query })
|
||||
.then((resp) => {
|
||||
console.log('graphql projects', resp)
|
||||
GRAPHQL.post('', { query: `query {
|
||||
projects {
|
||||
id
|
||||
Weight
|
||||
Titre
|
||||
}
|
||||
}` })
|
||||
.then(({ data: { data: { projects } = null } }) => {
|
||||
console.log('graphql projects', projects)
|
||||
commit('setProjects', projects)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('Issue with getProjects', error)
|
||||
|
||||
Reference in New Issue
Block a user