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

refactored grid placement, now up to 4 faces available

Browse Source
This commit is contained in:
bachir
2020-10-14 11:24:46 +02:00
parent 83c9c24ba5
commit 87d66a76a7
3 changed files with 147 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/objects/ContentBlock.vue
+53 -27
View File
@@ -101,7 +101,7 @@ export default {
projSize: state => state.size,
projPos: state => state.position,
projWall: state => state.wall,
gridContentPlaced: state => state.gridContentPlaced,
gridsContentPlaced: state => state.gridsContentPlaced,
contents_size_factor: state => state.contents_size_factor
}),
color () {
@@ -214,39 +214,65 @@ export default {
// this.rotation.y = 180
// }
// // USES 2 FACES
// RANDOMLY USE 2 FACES
if (face < 0.5) {
// gauche
this.face = 'left'
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.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.projPos.x - this.projSize.x / 2 + 0.1
// this.rotation.y = 90
if (typeof this.gridContentPlaced[this.type] === 'undefined' ||
typeof this.gridContentPlaced[this.type][this.id] === 'undefined') {
// define side
let side
switch (this.face) {
case 'back':
case 'front':
side = 'x'
break
case 'left':
case 'right':
side = 'z'
break
}
// Get GRID's CEL
if (typeof this.gridsContentPlaced[side] === 'undefined' ||
typeof this.gridsContentPlaced[side][this.face] === 'undefined' ||
typeof this.gridsContentPlaced[side][this.face][this.type] === 'undefined' ||
typeof this.gridsContentPlaced[side][this.face][this.type][this.id] === 'undefined') {
// First shift grid place (will transfer it from free places to occupied places)
this.shiftGrid({ type: this.type, id: this.id })
this.shiftGrid({ face: this.face, type: this.type, id: this.id })
}
// rotation and position
let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
console.log('gridPos', gridPos)
switch (side) {
case 'x':
this.position.x = this.projPos.x - this.projSize.x / 2 + gridPos.x
this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
switch (this.face) {
case 'face':
this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
this.rotation.y = 180
break
case 'back':
this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
this.rotation.y = 0
break
}
break
case 'z':
this.position.z = this.projPos.z - this.projSize.z / 2 + gridPos.z
this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
switch (this.face) {
case 'left':
this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
this.rotation.y = 90
break
case 'right':
this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
this.rotation.y = -90
break
}
break
}
// 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.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
// this.label_position.z = this.position.z + this.size.z / 2 + 0.01
// console.log(this.data.Media[0].url)
// create image object with a promise (async img loading)