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

concernement popup on mouse over, better boussole, misc

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-04-14 13:27:34 +02:00
parent 6e6fc74e1c
commit 6b1d2680bd
5 changed files with 159 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/ConcernementMapItem.vue
View File

@@ -219,9 +219,13 @@ export default {
this.tween.stop();
}
if (open) {
// opening
// opening tweening
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y})
.to({s: 5,x: 500, y: 500}, 800)
.to({
s: 7,
x: (this.canvas.width - 450) / 2,
y: this.canvas.height / 2
}, 800)
.onUpdate((obj) => {
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
// revert to the original size (by reverting the previous scale)
@@ -279,47 +283,90 @@ export default {
// }
this.pos = this.body.position;
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
this.ctx.stroke();
if (this.opened) {
// BOUSSOLE
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = "#fff";
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
// this.ctx.stroke();
// interieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
this.ctx.stroke();
// interieur circle
this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
// this.ctx.stroke();
// axes
// vertical
this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale);
// horizontal
this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y);
this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y);
// this.ctx.stroke();
// fleches
// haute
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
// milieu
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale));
this.ctx.stroke();
// MOINS - PLUS
this.ctx.beginPath();
this.ctx.lineWidth = 8;
this.ctx.strokeStyle = "#fff";
// PLUS
// horizontal
this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
// vertical
this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale));
this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale));
// MOINS
// horizontal
this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
// vertical
this.ctx.stroke();
}
// contours
if (this.salientPoints.length > 3) {
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "rgba(255,255,255,0.4)";
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
for (let j = 1; j < this.salientPoints.length; j++) {
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale, this.pos.y+this.salientPoints[j].pos.y*this.scale)
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15)
}
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
this.ctx.fill();
this.ctx.stroke();
}
// place all entities points
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#F00";
this.ctx.fill();
if (this.opened) {
// place all entities points
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#000";
this.ctx.fill();
}
}
// concernement id @center
this.ctx.beginPath();
// this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);