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

refactorisation fished, contents are back in grid

Browse Source
This commit is contained in:
bachir
2020-09-17 10:16:00 +02:00
parent 15ad778ce2
commit 8e37e02144
4 changed files with 99 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/objects/ContentBlock.vue
+37 -31
View File
@@ -41,7 +41,7 @@
</template> </template>
<script> <script>
import { mapInstanceState } from '@urbn/vuex-helpers' import { mapInstanceState, mapInstanceMutations } from '@urbn/vuex-helpers'
// import { mapState, mapGetters } from 'vuex' // import { mapState, mapGetters } from 'vuex'
import * as THREE from 'three' import * as THREE from 'three'
@@ -54,7 +54,7 @@ const getModuleName = cmp => `project:${cmp.prtId}`
export default { export default {
name: 'ContentBlock', name: 'ContentBlock',
mixins: [mixins], mixins: [mixins],
props: { prtId: Number, prtIndex: Number, type: String, data: Object }, props: { prtId: Number, type: String, data: Object },
data: () => ({ data: () => ({
// block3d: null, // block3d: null,
project: null, project: null,
@@ -92,15 +92,11 @@ export default {
face: null face: null
}), }),
computed: { computed: {
// ...mapState({
// projects: state => state.Projects.projects
// }),
// ...mapGetters({
// getGridPos: 'Projects/getGridPos'
// }),
...mapInstanceState(getModuleName, { ...mapInstanceState(getModuleName, {
size: state => state.size, projSize: state => state.size,
position: state => state.position projPos: state => state.position,
projWall: state => state.wall,
gridContentPlaced: state => state.gridContentPlaced
}), }),
color () { color () {
let color = 0x000000 let color = 0x000000
@@ -134,12 +130,14 @@ export default {
wrapS: THREE.ClampToEdgeWrapping, wrapS: THREE.ClampToEdgeWrapping,
wrapT: THREE.ClampToEdgeWrapping wrapT: THREE.ClampToEdgeWrapping
} }
},
id () {
return this.data.id
} }
}, },
created () { created () {
this.project = this.projects[this.prtIndex] this.size.x = this.projWall.winW / 2
this.size.x = this.project.wall.winW / 2 this.size.y = this.projWall.winY / 2
this.size.y = this.project.wall.winY / 2
// console.log('ContentBlock created', this.data) // console.log('ContentBlock created', this.data)
// let txtcolor = '#000000' // let txtcolor = '#000000'
// switch (this.type) { // switch (this.type) {
@@ -161,8 +159,8 @@ export default {
// this.size.y = this.label_size.y + 0.2 // this.size.y = this.label_size.y + 0.2
// let y = 0 // let y = 0
// let top = this.prtPosition.y + this.prtSize.y / 2 // let top = this.projPos.y + this.projSize.y / 2
// let floor = this.prtPosition.y - this.prtSize.y / 2 // let floor = this.projPos.y - this.projSize.y / 2
// switch (this.type) { // switch (this.type) {
// case 'visible': // case 'visible':
// y = top * Math.random() // y = top * Math.random()
@@ -184,25 +182,25 @@ export default {
// if (face < 0.25) { // if (face < 0.25) {
// // gauche // // gauche
// this.face = 'left' // 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.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) // 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 // this.rotation.y = 90
// } else if (face >= 0.25 && face < 0.5) { // } else if (face >= 0.25 && face < 0.5) {
// // fond // // fond
// this.face = 'back' // this.face = 'back'
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1 // this.position.z = this.projPos.z - this.projSize.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.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) { // } else if (face >= 0.5 && face < 0.75) {
// // droite // // droite
// this.face = 'right' // this.face = 'right'
// 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.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) // 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 // this.rotation.y = -90
// } else { // } else {
// // face // // face
// this.face = 'front' // this.face = 'front'
// this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1 // this.position.z = this.projPos.z + this.projSize.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.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 // this.rotation.y = 180
// } // }
@@ -210,25 +208,28 @@ export default {
if (face < 0.5) { if (face < 0.5) {
// gauche // gauche
this.face = 'left' 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.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) // 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 this.rotation.y = 90
} else { } else {
// droite // droite
this.face = 'right' this.face = 'right'
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.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) // 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 this.rotation.y = -90
} }
// With GRID // With GRID
// this.face = 'left' // 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 // 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) console.log('pos', pos)
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + pos.z this.position.z = this.projPos.z - this.projSize.z / 2 + pos.z
this.position.y = this.prtPosition.y - this.prtSize.y / 2 + pos.y 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.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 // 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 vnode: this
} }
} }
},
methods: {
...mapInstanceMutations(getModuleName, {
shiftGrid: 'shiftGrid'
})
} }
} }
</script> </script>
src/components/objects/Project.vue
+12 -20
View File
@@ -12,39 +12,31 @@
</mesh> </mesh>
<div v-if="isOpened"> <div v-if="isOpened">
<ContentBlock <ContentBlock
v-for="item in contents.visibles" v-for="(item, i) in contents.visibles"
:key="item.id" :key="i"
:prtPosition="position"
:prtSize="size"
:prtIndex="index"
type="visible" type="visible"
:prtId="id"
:data="item" :data="item"
/> />
<ContentBlock <ContentBlock
v-for="item in contents.contexts" v-for="(item, i) in contents.contexts"
:key="item.id" :key="i"
:prtPosition="position"
:prtSize="size"
:prtIndex="index"
type="context" type="context"
:prtId="id"
:data="item" :data="item"
/> />
<ContentBlock <ContentBlock
v-for="item in contents.processes" v-for="(item, i) in contents.processes"
:key="item.id" :key="i"
:prtPosition="position"
:prtSize="size"
:prtIndex="index"
type="process" type="process"
:prtId="id"
:data="item" :data="item"
/> />
<ContentBlock <ContentBlock
v-for="item in contents.concepts" v-for="(item, i) in contents.concepts"
:key="item.id" :key="i"
:prtPosition="position"
:prtSize="size"
:prtIndex="index"
type="concept" type="concept"
:prtId="id"
:data="item" :data="item"
/> />
</div> </div>
src/store/modules/project.js
+50 -35
View File
@@ -38,7 +38,8 @@ export default {
paddingZ: 0 paddingZ: 0
}, },
contents: {}, contents: {},
grid: [] grid: [],
gridContentPlaced: {}
}, },
// getters // getters
@@ -77,7 +78,15 @@ export default {
setFloor3dObj: (state, obj) => { state.floor3dObj = obj }, setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
setFloorPos: (state, pos) => { state.floorPos = pos }, setFloorPos: (state, pos) => { state.floorPos = pos },
setTopColor: (state, col) => { state.topColor = col }, setTopColor: (state, col) => { state.topColor = col },
setFloorColor: (state, col) => { state.floorColor = col } setFloorColor: (state, col) => { state.floorColor = col },
setContents: (state, contents) => { state.contents = contents },
shiftGrid: (state, c) => {
let p = state.grid.shift()
if (!state.gridContentPlaced[c.type]) {
state.gridContentPlaced[c.type] = {}
}
state.gridContentPlaced[c.type][c.id] = p
}
}, },
// actions // actions
@@ -142,34 +151,33 @@ export default {
state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1) state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
a++ a++
} }
// state.wall = { ...wall }
// // CONTENTS GRID
// // CONTENTS GRID a = 0
// a = 0 state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW)
// state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW) while (state.wall.paddingZ < 0.4) {
// while (state.wall.paddingZ < 0.4) { state.wall.nbrWinZ -= a
// state.wall.nbrWinZ -= a state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1)
// state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1) a++
// a++ }
// }
// let grid = []
// grid = [] for (var l = 0; l < state.wall.nbrWinZ * 2; l++) { // cols
// for (var l = 0; l < state.wall.nbrWinZ * 2; l++) { // cols for (var m = 0; m < state.wall.nbrWinY * 2; m++) { // rows
// for (var m = 0; m < state.wall.nbrWinY * 2; m++) { // rows grid.push({
// grid.push({ z: margin + state.wall.winW / 2 * l,
// z: margin + state.wall.winW / 2 * l, y: margin + state.wall.winH / 2 * m
// y: margin + state.wall.winH / 2 * m })
// }) }
// } }
// } // shuffle the grid
// // shuffle the grid for (let n = grid.length - 1; n > 0; n--) {
// for (let n = grid.length - 1; n > 0; n--) { const o = Math.floor(Math.random() * n)
// const o = Math.floor(Math.random() * n) const temp = grid[n]
// const temp = grid[n] grid[n] = grid[o]
// grid[n] = grid[o] grid[o] = temp
// grid[o] = temp }
// } state.grid = [ ...grid ]
// state.grid = [ ...grid ]
}, },
build3dObjs ({ dispatch, commit, state, getters, rootGetters }) { build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
console.log('build3dObjs') console.log('build3dObjs')
@@ -299,9 +307,10 @@ export default {
}, },
loadContents ({ dispatch, commit, state }) { loadContents ({ dispatch, commit, state }) {
console.log('loadContents') console.log('loadContents')
// (where: { Published: "true" })
GRAPHQL.post('', { query: `query { GRAPHQL.post('', { query: `query {
project(id: "${state.id}") { project(id: "${state.id}") {
visibles(where: { Published: "true" }){ visibles{
id id
Name Name
Media { Media {
@@ -313,7 +322,7 @@ export default {
Url Url
categories categories
} }
contexts(where: { Published: "true" }){ contexts{
id id
Name Name
Images { Images {
@@ -324,7 +333,7 @@ export default {
Vimeo Vimeo
Url Url
} }
processes(where: { Published: "true" }){ processes{
id id
Name Name
Media { Media {
@@ -335,7 +344,7 @@ export default {
Vimeo Vimeo
Url Url
} }
concepts(where: { Published: "true" }){ concepts{
id id
Name Name
Images { Images {
@@ -348,7 +357,8 @@ export default {
} }
}` }) }` })
.then(({ data: { data: { project } = null } }) => { .then(({ data: { data: { project } = null } }) => {
console.log('graphql visibles', project) console.log('graphql contents', project)
commit('setContents', project)
// dispatch('computeProjects', projects) // dispatch('computeProjects', projects)
}) })
.catch((error) => { .catch((error) => {
@@ -356,5 +366,10 @@ export default {
Promise.reject(error) Promise.reject(error)
}) })
} }
// getGridPos ({ state, commit }) {
// let p = state.grid[0]
// commit('shiftGrid')
// Promise.resolve(p)
// }
} }
} }
src/store/modules/projects.js
-5
View File
@@ -24,11 +24,6 @@ export default {
projectID: (state) => (index) => { projectID: (state) => (index) => {
// console.log('getter projectID index', index) // console.log('getter projectID index', index)
return state.projects[index].id return state.projects[index].id
},
getGridPos: (state) => (index) => {
let popped = state.projects[index].grid.pop()
// console.log('getGridPos: popped', popped)
return popped
} }
}, },