From 6021809ce3846b8b0f15a3862bd65ac54a715c10 Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 5 Jun 2023 22:32:04 +0200 Subject: [PATCH] finished paperjs refactoring --- src/components/ConcernementMapItem.vue | 795 ++++++++++--------------- src/components/MapConcernements.vue | 4 +- 2 files changed, 322 insertions(+), 477 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 8735460..9ac85f5 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -381,7 +381,11 @@ export default { if (this.concernement.has_agissantes) { this.paper_objects.addChild(this.setPaperAgissantes()); } - + if (this.concernement.has_doleance) { + this.paper_objects.addChild(this.setPaperDoleanceBG()); + this.paper_objects.addChild(this.setPaperDoleanceICON()); + this.paper_objects.addChild(this.setPaperDoleanceSteps()); + } console.log('initPaperObjects', this.paper_objects); this.initPaperEvents() @@ -467,6 +471,7 @@ export default { children: children, pivot: new paper.Point(this.pos), name: 'boussole_bg', + locked: true, style: { strokeColor: '#fff' } @@ -567,6 +572,7 @@ export default { children: children, pivot: new paper.Point(this.pos), name: 'puissanceagir_bg', + locked: true, style: { strokeColor: '#fff' } @@ -623,6 +629,7 @@ export default { children: children, pivot: new paper.Point(this.pos), name: 'puissanceagir_icon', + locked: true, style: { strokeColor: '#000', strokeWidth: 1 @@ -700,6 +707,292 @@ export default { } } return g; + }, + setPaperDoleanceBG(){ + let children = []; + + var r = this.ray * this.scale * 0.8; // ray + var dr = r/2; // demi ray + var d = r*2; // diameter + var pcr = 2*this.scale; // petits cercle rayon + var lr = r*1.1; // legendes rayon + + // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg + // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 + // radians = degrees * (pi/180) + // degrees = radians * (180/pi) + // Points for 45° axes + let m,n; + m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon + n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon + // console.log('m', m); + + // points for legende arcs + let o = Math.cos(22.5*(Math.PI/180)) * lr; // x + let p = Math.sin(22.5*(Math.PI/180)) * lr; // y + let q = Math.sin(45*(Math.PI/180)) * lr; // x = y for legende rayon + + let style = { + strokeColor: '#fff', + strokeWidth: 1 + } + + let legende_style = { + strokeColor: '#000', + strokeWidth: 1 + } + + // arcs exterieur + // haut gauche + children.push(new paper.Path.Arc({ + from: [this.pos.x - r, this.pos.y - pcr], + through: [this.pos.x - m, this.pos.y - m], + to: [this.pos.x - pcr, this.pos.y - r], + style: style + })); + // haut droite + children.push(new paper.Path.Arc({ + from: [this.pos.x + pcr, this.pos.y - r], + through: [this.pos.x + m, this.pos.y - m], + to: [this.pos.x + r, this.pos.y - pcr], + style: style + })); + // bas droite + children.push(new paper.Path.Arc({ + from: [this.pos.x + r, this.pos.y + pcr], + through: [this.pos.x + m, this.pos.y + m], + to: [this.pos.x + pcr, this.pos.y + r], + style: style + })); + // bas gauche + children.push(new paper.Path.Arc({ + from: [this.pos.x - pcr, this.pos.y + r], + through: [this.pos.x - m, this.pos.y + m], + to: [this.pos.x - r, this.pos.y + pcr], + style: style + })); + + // arcs legendes + // bas gauche 1 + children.push(new paper.Path.Arc({ + from: [this.pos.x - pcr, this.pos.y + lr], + through: [this.pos.x - p, this.pos.y + o], + to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2], + style: legende_style + })); + + // bas gauche 2 + children.push(new paper.Path.Arc({ + from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2], + through: [this.pos.x - o, this.pos.y + p], + to: [this.pos.x - lr, this.pos.y + pcr], + style: legende_style + })); + + // haut gauche + children.push(new paper.Path.Arc({ + from: [this.pos.x - lr, this.pos.y - pcr], + through: [this.pos.x - q, this.pos.y - q], + to: [this.pos.x - pcr, this.pos.y - lr], + style: legende_style + })); + // haut droite + children.push(new paper.Path.Arc({ + from: [this.pos.x + pcr, this.pos.y - lr], + through: [this.pos.x + q, this.pos.y - q], + to: [this.pos.x + lr, this.pos.y - pcr], + style: legende_style + })); + // bas droite 1 + children.push(new paper.Path.Arc({ + from: [this.pos.x + lr, this.pos.y + pcr], + through: [this.pos.x + o, this.pos.y + p], + to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2], + style: legende_style + })); + // bas droite 2 + children.push(new paper.Path.Arc({ + from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2], + through: [this.pos.x + p, this.pos.y + o], + to: [this.pos.x + pcr, this.pos.y + lr], + style: legende_style + })); + + + // cercle interieur + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: dr, + style: style + })); + + // petit cercles + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y -r], + radius: pcr, + style: style + })); + + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y + r], + radius: pcr, + style: style + })); + + children.push(new paper.Path.Circle({ + center: [this.pos.x + r, this.pos.y], + radius: pcr, + style: style + })); + + children.push(new paper.Path.Circle({ + center: [this.pos.x -r, this.pos.y], + radius: pcr, + style: style + })); + + // axes + // vertical + // haut + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y - r + pcr], + to: [this.pos.x , this.pos.y - dr], + style: style + })); + // bas + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y + r - pcr], + to: [this.pos.x , this.pos.y + dr], + style: style + })); + + // horizontal + // gauche + children.push(new paper.Path.Line({ + from: [this.pos.x - r + pcr, this.pos.y], + to: [this.pos.x - dr, this.pos.y], + style: style + })); + // droite + children.push(new paper.Path.Line({ + from: [this.pos.x + r - pcr, this.pos.y], + to: [this.pos.x + dr, this.pos.y], + style: style + })); + + // diagonales + children.push(new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y + m], + to: [this.pos.x + n, this.pos.y + n], + style: style + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y + m], + to: [this.pos.x - n, this.pos.y + n], + style: style + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y - m], + to: [this.pos.x + n, this.pos.y - n], + style: style + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y - m], + to: [this.pos.x - n, this.pos.y - n], + style: style + })); + + return new paper.Group({ + children: children, + pivot: new paper.Point(this.pos), + name: 'doleance_bg', + locked: true + }); + }, + setPaperDoleanceICON(){ + let children = []; + + var r = 20 * this.scale; // ray + var dr = r/2; // demi ray + var d = r*2; // diameter + + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: r + })); + + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: dr + })); + + + // axes + // vertical + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y - r], + to: [this.pos.x , this.pos.y - dr], + })); + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y + r], + to: [this.pos.x , this.pos.y + dr], + })); + + // horizontal + children.push(new paper.Path.Line({ + from: [this.pos.x - r, this.pos.y], + to: [this.pos.x - dr, this.pos.y], + })); + children.push(new paper.Path.Line({ + from: [this.pos.x + r, this.pos.y], + to: [this.pos.x + dr, this.pos.y], + })); + + // diagonale + // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg + // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 + // radians = degrees * (pi/180) + // degrees = radians * (180/pi) + let m,n; + m = Math.sin(45*(Math.PI/180)) * r; + n = Math.sin(45*(Math.PI/180)) * r/2; + // console.log('m', m); + children.push(new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y + m], + to: [this.pos.x + n, this.pos.y + n], + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y + m], + to: [this.pos.x - n, this.pos.y + n], + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y - m], + to: [this.pos.x + n, this.pos.y - n], + })); + // + children.push(new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y - m], + to: [this.pos.x - n, this.pos.y - n], + })); + + return new paper.Group({ + children: children, + pivot: new paper.Point(this.pos), + name: 'doleance_icon', + locked: true, + style: { + strokeColor: '#000', + strokeWidth: 1 + } + }); + }, + setPaperDoleanceSteps(){ + }, // PAPER EVENTS initPaperEvents(){ @@ -994,6 +1287,9 @@ export default { if (this.concernement.has_puissancedagir) { this.paper_objects.children.puissanceagir_bg.visible = false; } + if (this.concernement.has_doleance) { + this.paper_objects.children.doleance_bg.visible = false; + } // choose wich one to show, if one switch (this.map_mode) { case 'terraindevie': @@ -1005,7 +1301,9 @@ export default { } break; case 'doleancer': - // this.drawDoleancerBG(); + if (this.concernement.has_doleance) { + this.paper_objects.children.doleance_bg.visible = true; + } break; } }else{ @@ -1013,6 +1311,9 @@ export default { if (this.concernement.has_puissancedagir) { this.paper_objects.children.puissanceagir_bg.visible = false; } + if (this.concernement.has_doleance) { + this.paper_objects.children.doleance_bg.visible = false; + } } // entites @@ -1052,7 +1353,22 @@ export default { } } - + // doleance + if (this.concernement.has_doleance) { + if (this.map_mode === "doleancer") { + if (!this.is_opened) { + this.paper_objects.children.doleance_icon.visible = true; + // this.paper_objects.children.doleance_steps.visible = false; + } else { + this.paper_objects.children.doleance_icon.visible = false; + // this.paper_objects.children.doleance_steps.visible = true; + // this.drawBesoins(); + } + } else { + this.paper_objects.children.doleance_icon.visible = false; + // this.paper_objects.children.doleance_steps.visible = false; + } + } }, isFocused(){ @@ -1061,481 +1377,10 @@ export default { || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir) || (this.map_mode === 'doleancer' && this.concernement.has_doleance); }, - draw() { - - // if (!this.ctx) return; - - // record the position from the main matter body - // this.pos = this.body.position; - - // drawing backgrounds - // if (this.is_opened) { - // switch (this.map_mode) { - // case 'terraindevie': - // this.drawBoussoleBG(); - // break; - // case 'puissancedagir': - // this.drawPuissanceagirBG(); - // break; - // case 'doleancer': - // this.drawDoleancerBG(); - // break; - // } - // } - - - // map mode puissance d'agir - // if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") { - // if (!this.is_opened) { - // this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone - // } else { - // this.drawBesoins(); - // } - // } - - // map mode doleancer - // if not opened and has_doleance draw the doleance icone - if (this.concernement.has_doleance && this.map_mode === "doleancer") { - if (!this.is_opened) { - this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone - } else { - this.drawDoleanceSteps(); - } - } - - // if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') { - // // this.drawEntites() - // } - - - }, - // drawPuissanceagirBG(){ - - // for (let i = 1; i < 6; i++) { - // this.ctx.beginPath(); - // this.ctx.lineWidth = 0.5; - // this.ctx.strokeStyle = `rgba(255,255,255,1)`; - // this.ctx.arc(this.pos.x, this.pos.y, ((this.ray*this.scale)/5)*i, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - // } - - // this.ctx.beginPath(); - // this.ctx.lineWidth = 1; - // this.ctx.strokeStyle = `rgba(255,255,255,1)`; - // this.ctx.setLineDash([5,5]); - // for (let j = 0; j < 4; j++) { - // let a = (90 / 4) * j; - // // diagonale - // // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg - // // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 - // // radians = degrees * (pi/180) - // // degrees = radians * (180/pi) - // let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale; - // let y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale; - // // console.log('m', m); - // this.ctx.moveTo(this.pos.x + x, this.pos.y + y); - // this.ctx.lineTo(this.pos.x - x, this.pos.y - y); - // // - // this.ctx.moveTo(this.pos.x - y, this.pos.y + x); - // this.ctx.lineTo(this.pos.x + y, this.pos.y - x); - // } - // this.ctx.stroke(); - // this.ctx.setLineDash([]); - - // this.ctx.beginPath(); - // this.ctx.fillStyle = `rgba(255,255,255,0.6)`; - // 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.fill(); - // this.ctx.stroke() - // this.ctx.closePath(); - // }, - // drawPuissanceagirIcon(){ - // var r = 20 * this.scale; // ray - // var dr = r/2; // demi ray - // var d = r*2; // diameter - - // this.ctx.beginPath(); - // this.ctx.lineWidth = 1; - // this.ctx.strokeStyle = `#000`; - // this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // this.ctx.beginPath(); - // this.ctx.lineWidth = 1; - // this.ctx.strokeStyle = `#000`; - // this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // this.ctx.beginPath(); - // this.ctx.lineWidth = 1; - // this.ctx.strokeStyle = `#000`; - // this.ctx.fillStyle = '#000'; - // this.ctx.arc(this.pos.x, this.pos.y, 2*this.scale, 0, 2 * Math.PI, false); - // this.ctx.fill(); - // this.ctx.stroke(); - - // // axes - // this.ctx.beginPath(); - // this.ctx.lineWidth = 1; - // this.ctx.strokeStyle = `#000`; - // // vertical - // // this.ctx.moveTo(this.pos.x, this.pos.y - r); - // // this.ctx.lineTo(this.pos.x , this.pos.y - dr); - // // this.ctx.moveTo(this.pos.x, this.pos.y + r); - // // this.ctx.lineTo(this.pos.x , this.pos.y + dr); - // this.ctx.moveTo(this.pos.x, this.pos.y - r); - // this.ctx.lineTo(this.pos.x , this.pos.y + r); - - // // horizontal - // // this.ctx.moveTo(this.pos.x - r, this.pos.y); - // // this.ctx.lineTo(this.pos.x - dr, this.pos.y); - // // this.ctx.moveTo(this.pos.x + r, this.pos.y); - // // this.ctx.lineTo(this.pos.x + dr, this.pos.y); - // this.ctx.moveTo(this.pos.x - r, this.pos.y); - // this.ctx.lineTo(this.pos.x + r, this.pos.y); - - // // diagonale - // // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg - // // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 - // // radians = degrees * (pi/180) - // // degrees = radians * (180/pi) - // var m = Math.sin(45*(Math.PI/180)) * r; - // // console.log('m', m); - // this.ctx.moveTo(this.pos.x + m, this.pos.y + m); - // this.ctx.lineTo(this.pos.x - m, this.pos.y - m); - // // - // this.ctx.moveTo(this.pos.x - m, this.pos.y + m); - // this.ctx.lineTo(this.pos.x + m, this.pos.y - m); - - // this.ctx.stroke(); - // }, - // drawBesoins(){ - // for (let i = 0; i < this.body.parts.length; i++) { - // if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') { - // let part = this.body.parts[i]; - - // switch (part.item_type) { - // case 'besoin': - // this.ctx.beginPath(); - // this.ctx.fillStyle = "#000"; - // this.drawDiamond(part.position.x, part.position.y, 4); - // this.ctx.fill(); - // break; - // case 'reponse': - // this.ctx.beginPath(); - // this.ctx.fillStyle = "#eee"; - // this.ctx.strokeStyle = "#000"; - // this.ctx.lineWidth = 1; - // // this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false); - // this.drawDiamond(part.position.x, part.position.y, 5); - // this.ctx.fill(); - // this.ctx.stroke(); - // break; - // } - // } - // } - // }, - // drawDiamond(x,y,r){ - // this.ctx.moveTo(x, y - r); - // this.ctx.lineTo(x + r, y); - // this.ctx.lineTo(x, y + r); - // this.ctx.lineTo(x - r, y); - // this.ctx.lineTo(x, y - r); - // }, - drawDoleanceIcon(){ - var r = 20 * this.scale; // ray - var dr = r/2; // demi ray - var d = r*2; // diameter - - this.ctx.beginPath(); - this.ctx.lineWidth = 1; - this.ctx.strokeStyle = `#000`; - this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.lineWidth = 1; - this.ctx.strokeStyle = `#000`; - this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - - // axes - this.ctx.beginPath(); - this.ctx.lineWidth = 1; - this.ctx.strokeStyle = `#000`; - // vertical - this.ctx.moveTo(this.pos.x, this.pos.y - r); - this.ctx.lineTo(this.pos.x , this.pos.y - dr); - this.ctx.moveTo(this.pos.x, this.pos.y + r); - this.ctx.lineTo(this.pos.x , this.pos.y + dr); - // this.ctx.moveTo(this.pos.x, this.pos.y - r); - // this.ctx.lineTo(this.pos.x , this.pos.y + r); - - // horizontal - this.ctx.moveTo(this.pos.x - r, this.pos.y); - this.ctx.lineTo(this.pos.x - dr, this.pos.y); - this.ctx.moveTo(this.pos.x + r, this.pos.y); - this.ctx.lineTo(this.pos.x + dr, this.pos.y); - // this.ctx.moveTo(this.pos.x - r, this.pos.y); - // this.ctx.lineTo(this.pos.x + r, this.pos.y); - - // diagonale - // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg - // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 - // radians = degrees * (pi/180) - // degrees = radians * (180/pi) - let m,n; - m = Math.sin(45*(Math.PI/180)) * r; - n = Math.sin(45*(Math.PI/180)) * r/2; - // console.log('m', m); - this.ctx.moveTo(this.pos.x + m, this.pos.y + m); - this.ctx.lineTo(this.pos.x + n, this.pos.y + n); - // - this.ctx.moveTo(this.pos.x - m, this.pos.y + m); - this.ctx.lineTo(this.pos.x - n, this.pos.y + n); - // - this.ctx.moveTo(this.pos.x + m, this.pos.y - m); - this.ctx.lineTo(this.pos.x + n, this.pos.y - n); - // - this.ctx.moveTo(this.pos.x - m, this.pos.y - m); - this.ctx.lineTo(this.pos.x - n, this.pos.y - n); - - this.ctx.stroke(); - }, - drawDoleancerBG(){ - var r = this.ray * this.scale; // ray - var dr = r/2; // demi ray - var d = r*2; // diameter - var pcr = 2*this.scale; // petits cercle rayon - - // cercle exterieur - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - // cercle interieur - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - // petit cercles - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x, this.pos.y - r, pcr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x, this.pos.y + r, pcr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x + r, this.pos.y, pcr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - this.ctx.arc(this.pos.x - r, this.pos.y, pcr, 0, 2 * Math.PI, false); - this.ctx.stroke(); - - // axes - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `#FFF`; - // vertical - this.ctx.moveTo(this.pos.x, this.pos.y - r); - this.ctx.lineTo(this.pos.x , this.pos.y - dr); - this.ctx.moveTo(this.pos.x, this.pos.y + r); - this.ctx.lineTo(this.pos.x , this.pos.y + dr); - // this.ctx.moveTo(this.pos.x, this.pos.y - r); - // this.ctx.lineTo(this.pos.x , this.pos.y + r); - - // horizontal - this.ctx.moveTo(this.pos.x - r, this.pos.y); - this.ctx.lineTo(this.pos.x - dr, this.pos.y); - this.ctx.moveTo(this.pos.x + r, this.pos.y); - this.ctx.lineTo(this.pos.x + dr, this.pos.y); - // this.ctx.moveTo(this.pos.x - r, this.pos.y); - // this.ctx.lineTo(this.pos.x + r, this.pos.y); - - // diagonale - // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg - // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 - // radians = degrees * (pi/180) - // degrees = radians * (180/pi) - let m,n; - m = Math.sin(45*(Math.PI/180)) * r; - n = Math.sin(45*(Math.PI/180)) * r/2; - // console.log('m', m); - this.ctx.moveTo(this.pos.x + m, this.pos.y + m); - this.ctx.lineTo(this.pos.x + n, this.pos.y + n); - // - this.ctx.moveTo(this.pos.x - m, this.pos.y + m); - this.ctx.lineTo(this.pos.x - n, this.pos.y + n); - // - this.ctx.moveTo(this.pos.x + m, this.pos.y - m); - this.ctx.lineTo(this.pos.x + n, this.pos.y - n); - // - this.ctx.moveTo(this.pos.x - m, this.pos.y - m); - this.ctx.lineTo(this.pos.x - n, this.pos.y - n); - - this.ctx.stroke(); - }, - drawDoleanceSteps(){ - - }, - // drawBoussoleBG_OLD(){ - // // BOUSSOLE - // // exterieur circle - // this.ctx.beginPath(); - // this.ctx.lineWidth = 2; - // this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`; - // // external circle is %8 less than max ray = (*0.92) - // this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 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*0.92 + (8*this.scale)); - // this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92); - // this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (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 = `rgba(255,255,255,${this.opacity})`;; - // // 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(); - // }, - // drawEntites(){ - // // IF OPENED - // if (this.is_opened) { - // // place all entities points - // // OR using entitées matter bodies - // for (let i = 0; i < this.body.parts.length; i++) { - // if (this.body.parts[i].item_type === 'entite' - // // draw only entite agissante if map mode is action - // && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) { - // let part = this.body.parts[i]; - // this.ctx.beginPath(); - // this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false); - // // console.log(part.id, this.opened_entite_id); - // if (part.id === this.opened_entite_id) { - // this.ctx.fillStyle = "#01ffe2"; - // } else { - // this.ctx.fillStyle = "#000"; - // } - // this.ctx.fill(); - // } - // } - // } - // // IF CLOSED - // else { - // // map mode action - // // if not opened and has_agissantes draw only entites agissantes - // if (this.concernement.has_agissantes && this.map_mode === "action") { - // for (let i = 0; i < this.body.parts.length; i++) { - // if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) { - // let part = this.body.parts[i]; - // this.ctx.beginPath(); - // this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false); - // // console.log(part.id, this.opened_entite_id); - // if (part.id === this.opened_entite_id) { - // this.ctx.fillStyle = "#01ffe2"; - // } else { - // this.ctx.fillStyle = "#000"; - // } - // this.ctx.fill(); - // } - // } - // } - - - // } - // }, - // drawContour_OLD(){ - // if (this.salientPoints.length > 3) { - // // // test draw contour from body part - // // for (let i = 0; i < this.body.parts.length; i++) { - // // if (this.body.parts[i].item_type === 'concernement-contours'){ - // // // console.log('concernement contours', this.body.parts[i]); - // // this.ctx.beginPath(); - // // this.ctx.lineWidth = 1; - // // this.ctx.strokeStyle = "#F00"; - // // this.ctx.moveTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y); - // // for (let j = 1; j < this.body.parts[i].vertices.length; j++) { - // // this.ctx.lineTo(this.body.parts[i].vertices[j].x, this.body.parts[i].vertices[j].y); - // // } - // // this.ctx.lineTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y); - // // this.ctx.stroke(); - - // // // for (let k = 0; k < this.body.parts[i].parts.length; k++) { - // // // let part = this.body.parts[i]; - // // // let partpart = part.parts[k]; - // // // debugger; - // // // this.ctx.beginPath(); - // // // this.ctx.lineWidth = 1; - // // // this.ctx.strokeStyle = "#F00"; - // // // this.ctx.moveTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y); - // // // for (let j = 1; j < this.body.parts[i].parts[k].vertices.length; j++) { - // // // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[j].x, this.body.parts[i].parts[k].vertices[j].y); - // // // } - // // // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y); - // // // this.ctx.stroke(); - - // // // } - // // } - // // - // } - // } }, render() { // console.log('render()', this.ctx); }, } - + \ No newline at end of file diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 86bd220..d3e0abb 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -47,7 +47,7 @@ export default { engine: null, world: null, // render: null, - mouse: null, + // mouse: null, mapPopupData: null, // PAPERJS paper: null @@ -109,7 +109,7 @@ export default { // add mouse control // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404 - this.mouse = Matter.Mouse.create(this.canvasMap.canvas); + // this.mouse = Matter.Mouse.create(this.canvasMap.canvas); this.animate() },