finished paperjs refactoring

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);
   },
 }
 
-</script>
+</script>

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()
   },