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