From 3a473ea9325b5649afe8436ef7639daadae8858b Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 5 Jun 2023 12:46:05 +0200 Subject: [PATCH] more paperjs refactoring --- src/components/ConcernementMapItem.vue | 875 +++++++++++++++++-------- src/components/MapConcernements.vue | 202 +++--- 2 files changed, 692 insertions(+), 385 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 90ee27f..3f6d8ae 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -395,18 +395,29 @@ export default { } } }, + // PAPER OBJECTS initPaperObjects(){ this.paper_objects = new paper.Group({ pivot: new paper.Point(this.pos), cid: this.id }); - this.paper_objects.addChild(this.setBoussoleBG()); + this.paper_objects.addChild(this.setPaperBoussoleBG()); this.paper_objects.addChild(this.setPaperContour()); this.paper_objects.addChild(this.setPaperEntites()); + if (this.concernement.has_puissancedagir) { + this.paper_objects.addChild(this.setPaperPuissanceagirBG()); + this.paper_objects.addChild(this.setPaperPuissanceagirICON()); + this.paper_objects.addChild(this.setPaperPuissanceagirBesoins()); + } + if (this.concernement.has_agissantes) { + this.paper_objects.addChild(this.setPaperAgissantes()); + } + + console.log('initPaperObjects', this.paper_objects); this.initPaperEvents() }, - setBoussoleBG(){ + setPaperBoussoleBG(){ // BOUSSOLE let children = []; @@ -414,25 +425,29 @@ export default { // // exterieur circle children.push(new paper.Path.Circle({ center: [this.pos.x, this.pos.y], - radius: this.ray*this.scale*0.92 + radius: this.ray*this.scale*0.92, + strokeWidth: 2 })); // interieur circle children.push(new paper.Path.Circle({ center: [this.pos.x, this.pos.y], - radius: this.ray/2*this.scale + radius: this.ray/2*this.scale, + strokeWidth: 2 })); // axes // vertical children.push(new paper.Path.Line({ from: [this.pos.x, this.pos.y - this.ray*this.scale], - to: [this.pos.x, this.pos.y + this.ray*this.scale] + to: [this.pos.x, this.pos.y + this.ray*this.scale], + strokeWidth: 2 })); // horizontal children.push(new paper.Path.Line({ from: [this.pos.x - this.ray*this.scale, this.pos.y], - to: [this.pos.x + this.ray*this.scale, this.pos.y] + to: [this.pos.x + this.ray*this.scale, this.pos.y], + strokeWidth: 2 })) // fleches @@ -442,7 +457,8 @@ export default { [this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)], [this.pos.x, this.pos.y - this.ray*this.scale*0.92], [this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)], - ] + ], + strokeWidth: 2 })); // milieu children.push(new paper.Path({ @@ -450,31 +466,32 @@ export default { [this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)], [this.pos.x, this.pos.y], [this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)], - ] + ], + strokeWidth: 2 })); // MOINS - PLUS - this.ctx.beginPath(); - this.ctx.lineWidth = 8; - this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;; // PLUS // horizontal children.push(new paper.Path.Line({ from: [this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], - to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale] + to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale], + strokeWidth: 8 })) // vertical children.push(new paper.Path.Line({ from: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)], - to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)] + to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)], + strokeWidth: 8 })) // MOINS // horizontal children.push(new paper.Path.Line({ from: [this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], - to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale] + to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale], + strokeWidth: 8 })) return new paper.Group({ @@ -482,8 +499,7 @@ export default { pivot: new paper.Point(this.pos), name: 'boussole_bg', style: { - strokeColor: '#fff', - strokeWidth: 2 + strokeColor: '#fff' } }); @@ -533,6 +549,184 @@ export default { } return g; }, + setPaperPuissanceagirBG(){ + let children = []; + + for (let i = 1; i < 6; i++) { + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: ((this.ray*this.scale)/5)*i, + strokeWidth: 0.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; + + children.push(new paper.Path.Line({ + from: [this.pos.x + x, this.pos.y + y], + to: [this.pos.x - x, this.pos.y - y], + strokeWidth: 1, + dashArray: [5,5] + })) + + children.push(new paper.Path.Line({ + from: [this.pos.x - y, this.pos.y + x], + to: [this.pos.x + y, this.pos.y - x], + strokeWidth: 1, + dashArray: [5,5] + })) + + } + + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: this.ray*this.scale, + strokeWidth: 2, + fillColor: `rgba(255,255,255,0.6)` + })); + + + return new paper.Group({ + children: children, + pivot: new paper.Point(this.pos), + name: 'puissanceagir_bg', + style: { + strokeColor: '#fff' + } + }); + }, + setPaperPuissanceagirICON(){ + 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 + })); + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: 2*this.scale + })); + + // axes + // vertical + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y - r], + to: [this.pos.x , this.pos.y + r], + })) + // horizontal + children.push(new paper.Path.Line({ + from: [this.pos.x - r, this.pos.y], + to: [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; + children.push(new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y + m], + to: [this.pos.x - m, this.pos.y - m], + })) + children.push(new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y + m], + to: [this.pos.x + m, this.pos.y - m], + })) + + return new paper.Group({ + children: children, + pivot: new paper.Point(this.pos), + name: 'puissanceagir_icon', + style: { + strokeColor: '#000', + strokeWidth: 1 + } + }); + }, + setPaperPuissanceagirBesoins(){ + let g = new paper.Group({ + pivot: new paper.Point(this.pos), + name: 'puissanceagir_besoins' + }); + + 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': + g.addChild( + new paper.Path({ + segments: this.getDiamondSegments(part.position.x, part.position.y, 1), + fillColor: '#000', + pivot: new paper.Point(this.pos) + }) + ) + break; + case 'reponse': + g.addChild( + new paper.Path({ + segments: this.getDiamondSegments(part.position.x, part.position.y, 1), + fillColor: '#eee', + strokeColor: "#000", + strokeWidth: 1, + pivot: new paper.Point(this.pos) + }) + ) + break; + } + } + } + + return g; + }, + getDiamondSegments(x,y,r){ + return [ + [x, y - r], + [x + r, y], + [x, y + r], + [x - r, y], + [x, y - r] + ]; + }, + setPaperAgissantes(){ + let g = new paper.Group({ + pivot: new paper.Point(this.pos), + name: 'agissantes' + }); + 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]; + g.addChild(new paper.Path.Circle({ + center: [part.position.x, part.position.y], + radius: 0.5, //0.3 + fillColor: '#000', + strokeColor: '#000', + strokeWidth: 2, + eid: part.id + })) + } + } + return g; + }, + // PAPER EVENTS initPaperEvents(){ this.paper_objects.onMouseEnter = function(event){ @@ -541,20 +735,44 @@ export default { type: 'concernement', id: this.id }); + document.body.style.cursor = "pointer"; } }.bind(this); this.paper_objects.onMouseMove = function(event){ + // TODO besoins & actions & doleances if (this.is_opened) { - let result = this.paper_objects.children.entites.hitTest(event.point); + + // lets define some options regarding the map_mode + let op; + switch (this.map_mode) { + case "terraindevie": + op = { + pg: 'entites', // paper group to hittest + type: 'entite', // type for hover element + id: 'eid' // id prop on paper item + } + break; + case "action": + op = { + pg: 'agissantes', // paper group to hittest + type: 'entite', // type for hover element + id: 'eid' // id prop on paper item + } + break; + } + + let result = this.paper_objects.children[op.pg].hitTest(event.point); // console.log('move result', result); if (result) { this.setHoverElmt({ - type: 'entite', - id: result.item.eid + type: op.type, + id: result.item[op.id] }); + document.body.style.cursor = "pointer"; } else { this.setHoverElmt(null); + document.body.style.cursor = "auto"; } } }.bind(this); @@ -562,11 +780,12 @@ export default { this.paper_objects.onMouseLeave = function(event){ if (!this.is_opened) { this.setHoverElmt(null); + document.body.style.cursor = "auto"; } }.bind(this); this.paper_objects.onClick = function(event){ - // console.log('paper onClick', event, this.paper_objects); + console.log('paper concernement onClick'); if (!this.is_opened) { // open/close all concernements this.openCloseConcernements(this.id) @@ -576,15 +795,34 @@ export default { hash: `#${this.map_mode}`, params: {id: this.id} }); + // reset the mousehover + this.resetHoverElmt(); } else { - let result = this.paper_objects.children.entites.hitTest(event.point); + // lets define some options regarding the map_mode + let op; + switch (this.map_mode) { + case "terraindevie": + op = { + pg: 'entites', // paper group to hittest + id: 'eid' // id prop on paper item + } + break; + case "action": + op = { + pg: 'agissantes', // paper group to hittest + id: 'eid' // id prop on paper item + } + break; + } + + let result = this.paper_objects.children[op.pg].hitTest(event.point); // console.log('click result', result); if (result) { // we have clicked on an entite this.$router.push({ name: 'concernement', hash: `#${this.map_mode}`, - params: {id: this.opened.id, eid: result.item.eid} + params: {id: this.opened.id, eid: result.item[op.id]} }); } else { // otherwise we close the entite and come back to the concernement @@ -593,23 +831,32 @@ export default { hash: `#${this.map_mode}`, params: {id: this.opened.id} }); + // reset the mousehover + this.resetHoverElmt(); } } }.bind(this); }, + resetHoverElmt(){ + setTimeout(()=>{ + this.setHoverElmt(null); + }, 100); + }, openClose(open) { // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`); if (this.tween) { this.tween.stop(); } if (open) { + // paper bring to front + this.paper_objects.bringToFront(); // opening tweening this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0}) .to({ s: 7, x: (this.canvas.width - 450) / 2, - y: this.canvas.height / 2, + y: this.canvas.height / 2 + 50, o: 0.8 }, 800) .onUpdate((obj) => { @@ -735,8 +982,9 @@ export default { // this.draw() this.handlePaperVisibility() }, + // PAPER VISIBILITY handlePaperVisibility(){ - // contours + // contours focused if (!this.isFocused()){ this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)"; }else{ @@ -748,7 +996,7 @@ export default { } } - // contours + // contours visibility if (!this.is_opened || (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) { this.paper_objects.children['contours'].visible = true; @@ -763,7 +1011,9 @@ export default { this.paper_objects.children.boussole_bg.visible = true; break; case 'puissancedagir': - // this.drawPuissanceagirBG(); + if (this.concernement.has_puissancedagir) { + this.paper_objects.children.puissanceagir_bg.visible = true; + } break; case 'doleancer': // this.drawDoleancerBG(); @@ -771,7 +1021,56 @@ export default { } }else{ this.paper_objects.children.boussole_bg.visible = false; + if (this.concernement.has_puissancedagir) { + this.paper_objects.children.puissanceagir_bg.visible = false; + } } + + // entites + if (this.is_opened + && this.map_mode !== 'puissancedagir' + && this.map_mode !== 'doleancer' + && this.map_mode !== 'action' ) { + this.paper_objects.children.entites.visible = true; + } else { + this.paper_objects.children.entites.visible = false; + } + + // puissance d'agir + if (this.concernement.has_puissancedagir) { + if (this.map_mode === "puissancedagir") { + if (!this.is_opened) { + this.paper_objects.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone + this.paper_objects.children.puissanceagir_besoins.visible = false; + } else { + this.paper_objects.children.puissanceagir_icon.visible = false; + this.paper_objects.children.puissanceagir_besoins.visible = true; + // this.drawBesoins(); + } + } else { + this.paper_objects.children.puissanceagir_icon.visible = false; + this.paper_objects.children.puissanceagir_besoins.visible = false; + } + } + + // agissantes + // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes); + if (this.concernement.has_agissantes) { + if (this.map_mode === "action") { + this.paper_objects.children.agissantes.visible = true; + } else { + this.paper_objects.children.agissantes.visible = false; + } + } + + + + }, + isFocused(){ + return this.map_mode === 'terraindevie' + || (this.map_mode === 'action' && this.concernement.has_agissantes) + || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir) + || (this.map_mode === 'doleancer' && this.concernement.has_doleance); }, draw() { @@ -797,13 +1096,13 @@ export default { // 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(); - } - } + // 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 @@ -815,147 +1114,147 @@ export default { } } - if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') { - // this.drawEntites() - } + // if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') { + // // this.drawEntites() + // } }, - drawPuissanceagirBG(){ + // 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(); - } + // 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.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.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, 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.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(); + // 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); + // // 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); + // // 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); + // // 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]; + // 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); - }, + // 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 @@ -1108,148 +1407,142 @@ export default { drawDoleanceSteps(){ }, - drawBoussoleBG(){ - // 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(); + // 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(); + // // 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(); + // // 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)); + // // 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(); + // 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 - 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 + // // 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(); - } - } - } + // 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(); + // } + // }, + // 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(); + // // // 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(); - // // } - // } - // - } - }, - isFocused(){ - return this.map_mode === 'terraindevie' - || (this.map_mode === 'action' && this.concernement.has_agissantes) - || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir) - || (this.map_mode === 'doleancer' && this.concernement.has_doleance); - } + // // // } + // // } + // // + // } + // } }, render() { // console.log('render()', this.ctx); diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 99b21b1..2e30e3f 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -49,6 +49,8 @@ export default { // render: null, mouse: null, mapPopupData: null, + // PAPERJS + paper: null } }, provide() { @@ -88,8 +90,9 @@ export default { let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight; console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`); - paper.setup(this.canvasMap.canvas); + this.paper = paper.setup(this.canvasMap.canvas); // console.log('this.canvasMap.paper', this.canvasMap.paper); + this.canvasMap.canvas.addEventListener('click', this.onCanvasClick); // MATTER let wall_w = 100; @@ -124,25 +127,36 @@ export default { // this.checkMouseHover(); window.requestAnimationFrame(this.animate); }, - onMouseMove (e) { - // this.checkMouseHover(); - }, - checkMouseHover(){ - // check item mouse over - let query; - if (this.opened) { - // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) - const bodies = Matter.Composite.allBodies(this.world); - for (let body of bodies) { - if (body.item_type === "concernement" && body.id === this.opened.id) { - query = Matter.Query.point(body.parts, this.mouse.position); - break; - } - } - } else { - // if no concernement opened we query concernements - query = Matter.Query.point(this.world.bodies, this.mouse.position) + onCanvasClick(event){ + // console.log('onCanvasClick'); + // use the canvas click to get back if no items is mousover + if (!this.hover_elmt) { + this.resetConcernementOpened(); + this.$router.push({ + name: 'home', + hash: `#${this.map_mode}` + }); } + }, + // onMouseMove_OLD (e) { + // // this.checkMouseHover(); + // }, + checkMouseHover_OLD(){ + // check item mouse over + // let query; + // if (this.opened) { + // // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) + // const bodies = Matter.Composite.allBodies(this.world); + // for (let body of bodies) { + // if (body.item_type === "concernement" && body.id === this.opened.id) { + // query = Matter.Query.point(body.parts, this.mouse.position); + // break; + // } + // } + // } else { + // // if no concernement opened we query concernements + // query = Matter.Query.point(this.world.bodies, this.mouse.position) + // } let hover_elmt = null; if (query && query.length) { @@ -187,84 +201,84 @@ export default { } // console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`); } - this.setHoverElmt(hover_elmt); - if (hover_elmt) { - document.body.style.cursor = "pointer"; - } else { - document.body.style.cursor = "auto"; - } + // this.setHoverElmt(hover_elmt); + // if (hover_elmt) { + // document.body.style.cursor = "pointer"; + // } else { + // document.body.style.cursor = "auto"; + // } }, - onClick (e) { - console.log('onClick', this, e); - // get the clicked element from matter - // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position) - let query; - if (this.opened) { - // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) - const bodies = Matter.Composite.allBodies(this.world); - for (let body of bodies) { - if (body.item_type === "concernement" && body.id === this.opened.id) { - query = Matter.Query.point(body.parts, this.mouse.position); - break; - } - } - } else { - // if no concernement opened we query concernements - query = Matter.Query.point(this.world.bodies, this.mouse.position) - } - // console.log(this.mouse.position); - console.log('click query', query); + // onClick_OLD (e) { + // console.log('onClick', this, e); + // // get the clicked element from matter + // // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position) + // let query; + // if (this.opened) { + // // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) + // const bodies = Matter.Composite.allBodies(this.world); + // for (let body of bodies) { + // if (body.item_type === "concernement" && body.id === this.opened.id) { + // query = Matter.Query.point(body.parts, this.mouse.position); + // break; + // } + // } + // } else { + // // if no concernement opened we query concernements + // query = Matter.Query.point(this.world.bodies, this.mouse.position) + // } + // // console.log(this.mouse.position); + // console.log('click query', query); - // no concernement is yet opened, we deal concernements - if (!this.opened) { - if (query.length) { - // // open/close all concernements - // this.openCloseConcernements(query[0].id) - // // push route (keep the hash for map_mode) - // this.$router.push({ - // name: 'concernement', - // hash: `#${this.map_mode}`, - // params: {id: query[0].id} - // }); - } - } + // // no concernement is yet opened, we deal concernements + // if (!this.opened) { + // if (query.length) { + // // // open/close all concernements + // // this.openCloseConcernements(query[0].id) + // // // push route (keep the hash for map_mode) + // // this.$router.push({ + // // name: 'concernement', + // // hash: `#${this.map_mode}`, + // // params: {id: query[0].id} + // // }); + // } + // } - // concernement is already opened, we deal with entités - if (this.opened) { - if (query.length) { - // let clickedEntityBodies = []; - // query.forEach(body => { - // // console.log('body id:', body.id); - // if (body.item_type === "entite") { - // clickedEntityBodies.push(body); - // } - // }); - // if (clickedEntityBodies.length) { - // // we have clicked on an entite - // this.$router.push({ - // name: 'concernement', - // hash: `#${this.map_mode}`, - // params: {id: this.opened.id, eid: clickedEntityBodies[0].id} - // }); - // } else { - // // otherwise we close the entite and come back to the concernement - // this.$router.push({ - // name: 'concernement', - // hash: `#${this.map_mode}`, - // params: {id: this.opened.id} - // }); - // } - } else { - // if no concernement opened retrun to home (closing concernement contents opened) - // and reset the opened state in concernement store - this.resetConcernementOpened(); - this.$router.push({ - name: 'home', - hash: `#${this.map_mode}` - }); - } - } - } + // // concernement is already opened, we deal with entités + // if (this.opened) { + // if (query.length) { + // // let clickedEntityBodies = []; + // // query.forEach(body => { + // // // console.log('body id:', body.id); + // // if (body.item_type === "entite") { + // // clickedEntityBodies.push(body); + // // } + // // }); + // // if (clickedEntityBodies.length) { + // // // we have clicked on an entite + // // this.$router.push({ + // // name: 'concernement', + // // hash: `#${this.map_mode}`, + // // params: {id: this.opened.id, eid: clickedEntityBodies[0].id} + // // }); + // // } else { + // // // otherwise we close the entite and come back to the concernement + // // this.$router.push({ + // // name: 'concernement', + // // hash: `#${this.map_mode}`, + // // params: {id: this.opened.id} + // // }); + // // } + // } else { + // // if no concernement opened retrun to home (closing concernement contents opened) + // // and reset the opened state in concernement store + // this.resetConcernementOpened(); + // this.$router.push({ + // name: 'home', + // hash: `#${this.map_mode}` + // }); + // } + // } + // } }, beforeUpdate () { },