From 87d66a76a72f9c23b50a6d9de33293ff50409c57 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Wed, 14 Oct 2020 11:24:46 +0200 Subject: [PATCH] refactored grid placement, now up to 4 faces available --- src/components/objects/ContentBlock.vue | 80 +++++++++----- src/store/modules/project.js | 134 ++++++++++++++++-------- src/store/modules/projects.js | 4 +- 3 files changed, 147 insertions(+), 71 deletions(-) diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue index 980e472..ee73ea4 100644 --- a/src/components/objects/ContentBlock.vue +++ b/src/components/objects/ContentBlock.vue @@ -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) diff --git a/src/store/modules/project.js b/src/store/modules/project.js index fbd547e..4d86072 100644 --- a/src/store/modules/project.js +++ b/src/store/modules/project.js @@ -45,8 +45,8 @@ export default { contents: {}, contents_size_factor: 1, // factor to get the contents (grid) size proportional to windows contentTypes: ['visible', 'context', 'process', 'concept'], - grid: { visible: [], context: [], process: [], concept: [] }, - gridContentPlaced: {}, + grids: null, + gridsContentPlaced: {}, activeLevel: 'visibles' }, @@ -90,13 +90,31 @@ export default { setLevels3dObj: (state, obj) => { state.levels3dObj = obj }, setLevelsPos: (state, pos) => { state.levelsPos = pos }, setContents: (state, contents) => { state.contents = contents }, - setGrid: (state, grid) => { state.grid = grid }, + setGrids: (state, grids) => { state.grids = grids }, shiftGrid: (state, c) => { - let p = state.grid[c.type].shift() - if (!state.gridContentPlaced[c.type]) { - state.gridContentPlaced[c.type] = {} + console.log('shiftGrid c:', c) + let side + switch (c.face) { + case 'back': + case 'front': + side = 'x' + break + case 'left': + case 'right': + side = 'z' + break } - state.gridContentPlaced[c.type][c.id] = p + let p = state.grids[side][c.face][c.type].shift() + if (!state.gridsContentPlaced[side]) { + state.gridsContentPlaced[side] = {} + } + if (!state.gridsContentPlaced[side][c.face]) { + state.gridsContentPlaced[side][c.face] = {} + } + if (!state.gridsContentPlaced[side][c.face][c.type]) { + state.gridsContentPlaced[side][c.face][c.type] = {} + } + state.gridsContentPlaced[side][c.face][c.type][c.id] = p }, setActiveLevel: (state, l) => { state.activeLevel = l @@ -175,43 +193,75 @@ export default { a++ } - let grid = {} - let rows = state.wall.nbrWinY / state.contents_size_factor - let cols = state.wall.nbrWinZ / state.contents_size_factor - let t - for (var m = 0; m < rows; m++) { // rows - if (m > rows / 4 * 3 + 1) { - t = state.contentTypes[0] - } else if (m > rows / 4 * 2 + 1) { - t = state.contentTypes[1] - } else if (m > rows / 4 + 1) { - t = state.contentTypes[2] - } else { - t = state.contentTypes[3] - } - if (!grid[t]) { - grid[t] = [] - } - for (var l = 0; l < cols; l++) { // cols - grid[t].push({ - z: margin + state.wall.winW * state.contents_size_factor * l, - y: margin + state.wall.winH * state.contents_size_factor * m - }) - } + // create grids for right/left & face/back + let grids = { + x: { front: {}, back: {} }, + z: { left: {}, right: {} } } - console.log('grid', grid) - // shuffle the grids - for (var i = 0; i < state.contentTypes.length; i++) { - for (let n = grid[state.contentTypes[i]].length - 1; n > 0; n--) { - const o = Math.floor(Math.random() * n) - const temp = grid[state.contentTypes[i]][n] - grid[state.contentTypes[i]][n] = grid[state.contentTypes[i]][o] - grid[state.contentTypes[i]][o] = temp + // console.log('grids', grids) + let grid, rows, cols, t, cel + // console.log('Object.keys(grids)', Object.keys(grids)) + Object.keys(grids).map(function (side) { + // console.log('GRID side:', side) + grid = {} + // calculate cols nbr regarding the face orientation + switch (side) { + case 'z': + cols = state.wall.nbrWinZ / state.contents_size_factor + break + case 'x': + cols = state.wall.nbrWinX / state.contents_size_factor + break } - } - console.log('shuffeld grid', grid) - commit('setGrid', grid) - console.log('state.grid', state.grid) + // calculate rows + rows = state.wall.nbrWinY / state.contents_size_factor + // dispatch grid rows on to 4 levels (t) + for (var m = 0; m < rows; m++) { // rows + if (m > rows / 4 * 3 + 1) { + t = state.contentTypes[0] + } else if (m > rows / 4 * 2 + 1) { + t = state.contentTypes[1] + } else if (m > rows / 4 + 1) { + t = state.contentTypes[2] + } else { + t = state.contentTypes[3] + } + // create level if not exists + if (!grid[t]) { + grid[t] = [] + } + // create cols for each rows + for (var l = 0; l < cols; l++) { // cols + cel = { y: margin + state.wall.winH * state.contents_size_factor * m } + switch (side) { + case 'z': + cel.z = margin + state.wall.winW * state.contents_size_factor * l + break + case 'x': + cel.x = margin + state.wall.winW * state.contents_size_factor * l + break + } + grid[t].push(cel) + } + } + // console.log('grid', grid) + // clown and shuffle the grids (one by face) + // console.log('Object.keys(grids[side])', Object.keys(grids[side])) + Object.keys(grids[side]).map(function (face) { + for (var i = 0; i < state.contentTypes.length; i++) { + for (let n = grid[state.contentTypes[i]].length - 1; n > 0; n--) { + const o = Math.floor(Math.random() * n) + const temp = grid[state.contentTypes[i]][n] + grid[state.contentTypes[i]][n] = grid[state.contentTypes[i]][o] + grid[state.contentTypes[i]][o] = temp + } + } + // console.log('shuffeld grid', grid) + grids[side][face] = { ...grid } + }) + }) + commit('setGrids', grids) + console.log('state.grids', state.grids) }, build3dObjs ({ dispatch, commit, state, getters, rootGetters }) { console.log('build3dObjs') diff --git a/src/store/modules/projects.js b/src/store/modules/projects.js index b9147c6..183423f 100644 --- a/src/store/modules/projects.js +++ b/src/store/modules/projects.js @@ -40,7 +40,7 @@ export default { // actions actions: { - // async get authors + // async load projects loadProjects ({ dispatch, commit, state }) { // GRAPHQL GRAPHQL.post('', { query: `query { @@ -56,7 +56,7 @@ export default { dispatch('computeProjects', projects) }) .catch((error) => { - console.warn('Issue with getProjects', error) + console.warn('Issue with loadProjects', error) Promise.reject(error) })