more paperjs refactoring

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(); 
-      }
-
-      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();
+    //   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.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);
+    //   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);
+    //   // 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];
+    //   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();
-
-      // 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();
+    // 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));
+    //   // 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();
-            }
-          }
-        }
+    //   // 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();
+    //   }
+    // },
+    // 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);

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();
+    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}`
+        });
+      }
     },
-    checkMouseHover(){
+    // 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 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 () {
   },