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

started too reintroduce text cartels

Browse Source
This commit is contained in:
bachir
2020-10-20 16:05:11 +02:00
parent 33a351df86
commit 993ac3e515
4 changed files with 182 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mixins.js
+36 -2
View File
@@ -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) => {
src/components/objects/ContentBlock.vue
+144 -143
View File
@@ -5,21 +5,22 @@
<geometry type="Box" :args="[size.x, size.y, size.z]" />
<material type="MeshLambert" :color="color" :options="opts" />
</mesh> -->
<!-- <mesh
<mesh
v-if="label_canvas"
ref="label3d"
name="Content"
:position="position"
:position="label_position"
:rotation="{
x:deg2rad(rotation.x),
y:deg2rad(rotation.y),
z:deg2rad(rotation.z)
}"
>
<geometry type="Plane" :args="[size.x, size.y]" />
<geometry type="Plane" :args="[label_size.width, label_size.height]" />
<material type="MeshLambert" :options="label_opts">
<texture :options="label_texture_opts" />
</material>
</mesh> -->
</mesh>
<mesh
v-if="img_canvas"
ref="img3d"
@@ -61,7 +62,7 @@ export default {
data: () => ({
// 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
src/components/objects/Project.vue
+1 -1
View File
@@ -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
src/store/modules/project.js
+1 -1
View File
@@ -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] = {}