diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue index 3eb271e..173cc5e 100644 --- a/src/components/objects/ContentBlock.vue +++ b/src/components/objects/ContentBlock.vue @@ -89,6 +89,7 @@ export default { img_canvas: null, img_size: { x: 0, y: 0 }, img_position: { x: 0, y: 0, z: 0 }, + img_padding: 0.25, face: null }), computed: { @@ -96,7 +97,8 @@ export default { projSize: state => state.size, projPos: state => state.position, projWall: state => state.wall, - gridContentPlaced: state => state.gridContentPlaced + gridContentPlaced: state => state.gridContentPlaced, + contents_size_factor: state => state.contents_size_factor }), color () { let color = 0x000000 @@ -136,8 +138,8 @@ export default { } }, created () { - this.size.x = this.projWall.winW / 2 - this.size.y = this.projWall.winY / 2 + this.size.x = this.projWall.winW * this.contents_size_factor + this.size.y = this.projWall.winY * this.contents_size_factor // console.log('ContentBlock created', this.data) // let txtcolor = '#000000' // switch (this.type) { @@ -243,8 +245,8 @@ export default { .then(({ img, canvas }) => { // console.log('THEN img loaded ok', this, img, canvas) let f = this.size.x / canvas.width - this.img_size.x = canvas.width * f - this.img_size.y = this.size.y = canvas.height * f + this.img_size.x = canvas.width * f - this.img_padding * 2 + this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2 console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`) this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2 switch (this.face) { @@ -298,7 +300,11 @@ export default { methods: { ...mapInstanceMutations(getModuleName, { shiftGrid: 'shiftGrid' - }) + }), + open () { + this.isOpened = true + // this.loadContents() + } } } diff --git a/src/store/modules/project.js b/src/store/modules/project.js index 82816d6..5f332ef 100644 --- a/src/store/modules/project.js +++ b/src/store/modules/project.js @@ -38,7 +38,9 @@ export default { paddingZ: 0 }, contents: {}, - grid: [], + contents_size_factor: 2, // factor to get the contents (grid) size proportional to windows + contentTypes: ['visible', 'context', 'process', 'concept'], + grid: { visible: [], context: [], process: [], concept: [] }, gridContentPlaced: {} }, @@ -80,8 +82,9 @@ export default { setTopColor: (state, col) => { state.topColor = col }, setFloorColor: (state, col) => { state.floorColor = col }, setContents: (state, contents) => { state.contents = contents }, + setGrid: (state, grid) => { state.grid = grid }, shiftGrid: (state, c) => { - let p = state.grid.shift() + let p = state.grid[c.type].shift() if (!state.gridContentPlaced[c.type]) { state.gridContentPlaced[c.type] = {} } @@ -161,23 +164,43 @@ export default { 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 + 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) { + t = state.contentTypes[0] + } else if (m > rows / 4 * 2) { + t = state.contentTypes[1] + } else if (m > rows / 4) { + 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 }) } } - // 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 + 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 + } } - state.grid = [ ...grid ] + console.log('shuffeld grid', grid) + commit('setGrid', grid) + console.log('state.grid', state.grid) }, build3dObjs ({ dispatch, commit, state, getters, rootGetters }) { console.log('build3dObjs') @@ -307,10 +330,9 @@ export default { }, loadContents ({ dispatch, commit, state }) { console.log('loadContents') - // (where: { Published: "true" }) GRAPHQL.post('', { query: `query { project(id: "${state.id}") { - visibles{ + visibles(where: { Published: "true" }){ id Name Media { @@ -322,7 +344,7 @@ export default { Url categories } - contexts{ + contexts(where: { Published: "true" }){ id Name Images { @@ -333,7 +355,7 @@ export default { Vimeo Url } - processes{ + processes(where: { Published: "true" }){ id Name Media { @@ -344,7 +366,7 @@ export default { Vimeo Url } - concepts{ + concepts(where: { Published: "true" }){ id Name Images {