From 993ac3e51574b48627f499308c0bd3d42bf7d04d Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 20 Oct 2020 16:05:11 +0200 Subject: [PATCH] started too reintroduce text cartels --- src/components/mixins.js | 38 +++- src/components/objects/ContentBlock.vue | 287 ++++++++++++------------ src/components/objects/Project.vue | 2 +- src/store/modules/project.js | 2 +- 4 files changed, 182 insertions(+), 147 deletions(-) diff --git a/src/components/mixins.js b/src/components/mixins.js index 8ff26b4..d9f4e8e 100644 --- a/src/components/mixins.js +++ b/src/components/mixins.js @@ -7,8 +7,8 @@ export default { rad2deg (rad) { return rad * (180 / Math.PI) }, - createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) { - // console.log('createLabelCanvas', this.data.Titre) + createBuildingTitleCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) { + console.log('createLabelCanvas', text) const size = fontsize const borderSize = 5 let lines = text.split('\n') @@ -41,6 +41,40 @@ export default { // console.log('createLabelCanvas', ctx) return ctx.canvas }, + createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) { + console.log('createLabelCanvas', text) + const size = fontsize + const borderSize = 5 + let lines = text.split(':') + const ctx = document.createElement('canvas').getContext('2d') + const font = `${size}px bold noto_sans,sans-serif` + ctx.font = font + // measure how long the name will be + const doubleBorderSize = borderSize * 2 + let width = 0 + for (var i = 0; i < lines.length; i++) { + width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize) + } + const height = size * lines.length + doubleBorderSize + this.label_size = { x: width / sizefactore, y: height / sizefactore } + ctx.canvas.width = width + ctx.canvas.height = height + + // need to set font again after resizing canvas + ctx.font = font + ctx.textBaseline = 'top' + + if (bgcolor) { + ctx.fillStyle = bgcolor + ctx.fillRect(0, 0, width, height) + } + ctx.fillStyle = txtcolor + for (var j = 0; j < lines.length; j++) { + ctx.fillText(lines[j], borderSize, borderSize + j * size) + } + // console.log('createLabelCanvas', ctx) + return ctx.canvas + }, createImgCanvas (src) { // let vnode = this return new Promise((resolve, reject) => { diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue index 669f4cc..312e980 100644 --- a/src/components/objects/ContentBlock.vue +++ b/src/components/objects/ContentBlock.vue @@ -5,21 +5,22 @@ --> - + ({ // block3d: null, project: null, - size: { x: 0, y: 0 }, + size: { width: 0, height: 0 }, position: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 }, // opts: { @@ -71,14 +72,20 @@ export default { // // opacity: 0.6 // }, isOpened: false, - // label3d: null, - // label_opts: { - // side: THREE.DoubleSide, - // // wireframe: false, - // transparent: true - // // opacity: 0.6 - // // renderOrder: 0 - // }, + label_canvas: null, + label_position: { x: 0, y: 0, z: 0 }, + label_size: null, + label_opts: { + // side: THREE.DoubleSide, + // wireframe: false, + transparent: true + // opacity: 0.6 + // renderOrder: 0 + }, + preview_img_url: null, + img_canvas: null, + img_size: { x: 0, y: 0 }, + img_position: { x: 0, y: 0, z: 0 }, img_opts: { // side: THREE.DoubleSide, // wireframe: false, @@ -86,13 +93,6 @@ export default { // opacity: 0.6 // renderOrder: 0 }, - // label_position: { x: 5, y: 5, z: 6 }, - // label_canvas: null, - // label_size: null, - preview_img_url: null, - img_canvas: null, - img_size: { x: 0, y: 0 }, - img_position: { x: 0, y: 0, z: 0 }, img_padding: 0.25, face: null }), @@ -108,29 +108,16 @@ export default { }), color () { let color = 0x000000 - switch (this.type) { - case 'visible': - color = 0x0000ff - break - case 'context': - color = 0x00ffff - break - case 'process': - color = 0xff00ff - break - default: - color = 0xdddddd - } return color }, - // label_texture_opts () { - // return { - // canvas: this.label_canvas, - // minFilter: THREE.LinearFilter, - // wrapS: THREE.ClampToEdgeWrapping, - // wrapT: THREE.ClampToEdgeWrapping - // } - // }, + label_texture_opts () { + return { + canvas: this.label_canvas, + minFilter: THREE.LinearFilter, + wrapS: THREE.ClampToEdgeWrapping, + wrapT: THREE.ClampToEdgeWrapping + } + }, img_texture_opts () { return { canvas: this.img_canvas, @@ -144,6 +131,92 @@ export default { } }, created () { + this.size.width = this.gridCel.width + this.size.height = this.gridCel.height + + if (typeof this.data.country !== 'undefined' && + typeof this.data.country.id !== 'undefined') { + // console.log('this.data.country.id', parseInt(this.data.country.id)) + switch (parseInt(this.data.country.id)) { + case 1: + this.face = 'right' + break + case 2: + this.face = 'back' + break + case 3: + this.face = 'left' + break + } + } else { + let face = Math.random() + switch (this.faces_opaques) { + case 1: + this.face = 'back' + break + case 2: + // RANDOMLY USE 2 FACES + if (face < 0.5) { + this.face = 'left' + } else { + this.face = 'right' + } + break + case 3: + // RANDOMLY USE 3 FACES + if (face < 0.33) { + this.face = 'left' + } else if (face >= 0.33 && face < 0.66) { + this.face = 'back' + } else { + this.face = 'right' + } + break + case 4: + // RANDOMLY USE 4 FACES + if (face < 0.25) { + this.face = 'left' + } else if (face >= 0.25 && face < 0.5) { + this.face = 'back' + } else if (face >= 0.5 && face < 0.75) { + this.face = 'right' + } else { + this.face = 'front' + } + break + } + } + // this.face = 'left' + // console.log('face', this.face) + // 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({ face: this.face, type: this.type, id: this.id }) + } + // rotation and position + // console.log(`side: ${side}, face: ${this.face}, type: ${this.type}, id: ${this.id}`) + let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id] + // console.log('gridPos', gridPos) + this.position.x = gridPos.x + this.position.z = gridPos.z + this.position.y = gridPos.y + this.rotation.y = gridPos.ry + if (this.data.Vimeo) { this.preview_img_url = this.data.Vimeo.thumbnail_url_with_play_button } else if (this.data.Media && this.data.Media.length) { @@ -152,107 +225,8 @@ export default { this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Images[0].url}` } - // for now display only items that have img to preview - // TODO: what to do with items without images ? if (this.preview_img_url) { - // this.size.width = this.projWall.winW * this.contents_size_factor - // this.size.height = this.projWall.winH * this.contents_size_factor - - // // get the right size depending on screen - // let u - // if (window.innerWidth > window.innerHeight) { - // u = window.innerHeight / window.innerWidth - // } else { - // u = window.innerWidth / window.innerHeight - // } - // this.size.width = this.projWall.winW * this.contents_size_factor - // this.size.height = this.projWall.winH * u * this.contents_size_factor - this.size.width = this.gridCel.width - this.size.height = this.gridCel.height - // console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.width}, size.y :${this.size.height}`) - - if (typeof this.data.country !== 'undefined' && - typeof this.data.country.id !== 'undefined') { - // console.log('this.data.country.id', parseInt(this.data.country.id)) - switch (parseInt(this.data.country.id)) { - case 1: - this.face = 'right' - break - case 2: - this.face = 'back' - break - case 3: - this.face = 'left' - break - } - } else { - let face = Math.random() - switch (this.faces_opaques) { - case 1: - this.face = 'back' - break - case 2: - // RANDOMLY USE 2 FACES - if (face < 0.5) { - this.face = 'left' - } else { - this.face = 'right' - } - break - case 3: - // RANDOMLY USE 3 FACES - if (face < 0.33) { - this.face = 'left' - } else if (face >= 0.33 && face < 0.66) { - this.face = 'back' - } else { - this.face = 'right' - } - break - case 4: - // RANDOMLY USE 4 FACES - if (face < 0.25) { - this.face = 'left' - } else if (face >= 0.25 && face < 0.5) { - this.face = 'back' - } else if (face >= 0.5 && face < 0.75) { - this.face = 'right' - } else { - this.face = 'front' - } - break - } - } - // this.face = 'left' - // console.log('face', this.face) - // 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({ 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) - this.position.x = gridPos.x - this.position.z = gridPos.z - this.position.y = gridPos.y - this.rotation.y = gridPos.ry - // console.log(this.data.Media[0].url) + // console.log(this.preview_img_url) // create image object with a promise (async img loading) this.createImgCanvas(this.preview_img_url) .then(({ img, canvas }) => { @@ -290,8 +264,35 @@ export default { console.warn('CATCH img load ERROR') }) } - // this.img_position = { ...this.position } - // this.img_position.y -= this.size.height + // else { + // // if no images, display title + // let labelCanvas = this.createLabelCanvas(this.data.Name, 48, 21, 0x000000) + // // console.log('this.label_canvas', this.label_canvas) + // let f + // if (labelCanvas.width >= labelCanvas.height) { + // f = this.size.width / labelCanvas.width + // this.label_size.width = labelCanvas.width * f + // this.label_size.height = labelCanvas.height * f + // } else { + // f = this.size.height / labelCanvas.height + // this.label_size.height = labelCanvas.height * f + // this.label_size.width = labelCanvas.width * f + // } + // + // this.label_position.y = this.position.y + // switch (side) { + // case 'z': + // this.label_position.z = this.position.z + this.size.width / 2 + // this.label_position.x = this.position.x + // break + // case 'x': + // this.label_position.x = this.position.x + this.size.width / 2 + // this.label_position.z = this.position.z + // break + // } + // + // this.label_canvas = labelCanvas + // } }, mounted () { // this.block3d = this.$refs.block3d.curObj diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue index fe2c5fd..8b6c2b4 100644 --- a/src/components/objects/Project.vue +++ b/src/components/objects/Project.vue @@ -166,7 +166,7 @@ export default { } }, created () { - this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor) + this.label_canvas = this.createBuildingTitleCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor) this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1 this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1 this.label_position.z = this.position.z + this.size.z / 2 + 0.5 diff --git a/src/store/modules/project.js b/src/store/modules/project.js index b82c42f..15d7ea0 100644 --- a/src/store/modules/project.js +++ b/src/store/modules/project.js @@ -100,7 +100,6 @@ export default { setGrids: (state, grids) => { state.grids = grids }, // setDebugGrids3dObj: (state, obj) => { state.gridBebug3dObj = obj }, shiftGrid: (state, c) => { - // console.log('shiftGrid c:', c) let side switch (c.face) { case 'back': @@ -112,6 +111,7 @@ export default { side = 'z' break } + // console.log(`shiftGrid side: ${side}, face: ${c.face}, type: ${c.type}, id: ${c.id}`) let p = state.grids[side][c.face][c.type].pop() if (!state.gridsContentPlaced[side]) { state.gridsContentPlaced[side] = {}