started paperjs events instead of matterjs (query) events

src/App.vue

@@ -58,7 +58,7 @@ export default {
         v-for="(concernement,index) in concernements"
         :key="index"
         :concernement="concernement"
-        :opened="concernement.opened"
+        :is_opened="concernement.opened"
       />
     </MapConcernements>
     <div id="content">

src/components/ConcernementMapItem.vue

@@ -60,10 +60,11 @@ export default {
       paper_objects: {}
     }
   },
-  props: ['concernement', 'opened'],
+  props: ['concernement', 'is_opened'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernementsByID']),
+    ...mapState(ConcernementsStore,['opened']),
     ...mapState(ConcernementsStore,['opened_entite_id']),
     ...mapState(CommonStore,['hover_elmt'])
   },
@@ -72,7 +73,6 @@ export default {
     this.id = this.concernement.id
     this.entites = this.concernement.entites
     this.entites_byid = this.concernement.entites_byid
-
     // console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
     // if (this.$route.name === 'concernement'
     //   && parseInt(this.$route.params.id) === this.id
@@ -108,9 +108,8 @@ export default {
       },
       deep: true
     },
-    opened: {
+    is_opened: {
       handler (n, o) {
-
         if(n){ // opened
           this.openClose(true);
         }else{ // closed
@@ -141,6 +140,8 @@ export default {
     }
   },
   methods: {
+    ...mapActions(CommonStore,['setHoverElmt']),
+    ...mapActions(ConcernementsStore,['openCloseConcernements']),
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let i = 0; i < this.entites.length; i++) {
@@ -396,17 +397,98 @@ export default {
     },
     initPaperObjects(){
       this.paper_objects = new paper.Group({
-        pivot: new paper.Point(this.pos)
+        pivot: new paper.Point(this.pos),
+        cid: this.id
+      });
+      this.paper_objects.addChild(this.setBoussoleBG());
+      this.paper_objects.addChild(this.setPaperContour());
+      this.paper_objects.addChild(this.setPaperEntites());
+
+      this.initPaperEvents()
+    },
+    setBoussoleBG(){
+      // BOUSSOLE
+      let children = [];
+
+
+      // // exterieur circle
+      children.push(new paper.Path.Circle({
+        center: [this.pos.x, this.pos.y],
+        radius: this.ray*this.scale*0.92
+      }));
+
+      // interieur circle
+      children.push(new paper.Path.Circle({
+        center: [this.pos.x, this.pos.y],
+        radius: this.ray/2*this.scale
+      }));
+
+      // 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]
+      }));
+      // 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]
+      }))
+      
+      // fleches
+      // haute
+      children.push(new paper.Path({
+        segments: [
+          [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)],
+        ]
+      }));
+      // milieu
+      children.push(new paper.Path({
+        segments: [
+        [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)],
+        ]
+      }));
+
+
+      // 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]
+      }))
+      // 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)]
+      }))
+      
+      // 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]
+      }))
+
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(this.pos),
+        name: 'boussole_bg',
+        style: {
+          strokeColor: '#fff',
+          strokeWidth: 2
+        }
       });
 
-      this.paper_objects.addChild(this.setPaperContour());
     },
     setPaperContour(){
-      // this.paper_objects.contours = new paper.Path.Circle({
-      //   center: [this.pos.x, this.pos.y],
-      //   radius: this.ray,
-      //   fillColor: 'red'
-      // });
       let gap = 1;//1.15;
       let segments = [
         [this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]
@@ -422,8 +504,98 @@ export default {
         strokeColor: '#000',
         strokeWidth: 1,
         fillColor: 'rgba(255,255,255,0.8)',
-        pivot: new paper.Point(this.pos)
+        pivot: new paper.Point(this.pos),
-      })
+        cid: this.id
+      });
+    },
+    setPaperEntites(){
+      let g = new paper.Group({
+        pivot: new paper.Point(this.pos),
+        name: 'entites'
+      });
+      for (let i = 0; i < this.body.parts.length; i++) {
+        if (this.body.parts[i].item_type === 'entite') {
+          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',
+            eid: part.id
+            // type: 'entite'
+          }))
+
+          // if (part.id === this.opened_entite_id) {
+          //   this.ctx.fillStyle = "#01ffe2";
+          // } else {
+          //   this.ctx.fillStyle = "#000";
+          // }
+        }
+      }
+      return g;
+    },
+    initPaperEvents(){
+
+      this.paper_objects.onMouseEnter = function(event){
+        if (!this.is_opened) {
+          this.setHoverElmt({
+            type: 'concernement',
+            id: this.id
+          });
+        }
+      }.bind(this);
+      
+      this.paper_objects.onMouseMove = function(event){
+        if (this.is_opened) {
+          let result = this.paper_objects.children.entites.hitTest(event.point);
+          // console.log('move result', result);
+          if (result) {
+            this.setHoverElmt({
+              type: 'entite',
+              id: result.item.eid
+            });
+          } else {
+            this.setHoverElmt(null);
+          }
+        }
+      }.bind(this);
+      
+      this.paper_objects.onMouseLeave = function(event){
+        if (!this.is_opened) {
+          this.setHoverElmt(null);
+        }
+      }.bind(this);
+
+      this.paper_objects.onClick = function(event){
+        // console.log('paper onClick', event, this.paper_objects);
+        if (!this.is_opened) {
+          // open/close all concernements
+          this.openCloseConcernements(this.id)
+            // push route (keep the hash for map_mode)
+          this.$router.push({
+            name: 'concernement',
+            hash: `#${this.map_mode}`,
+            params: {id: this.id}
+          });
+        } else {
+          let result = this.paper_objects.children.entites.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}
+            });
+          } 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}
+            });
+          }
+        }
+      }.bind(this);
 
     },
     openClose(open) {
@@ -558,54 +730,75 @@ export default {
           Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
         }
       
-      this.paper_objects.position = this.pos;
+      this.paper_objects.position = this.pos = this.body.position;
 
+      // this.draw()
+      this.handlePaperVisibility()
+    },
+    handlePaperVisibility(){
       // contours
       if (!this.isFocused()){
         this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
+      }else{
+        this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
+        if (this.isHover) {
+          this.paper_objects.children['contours'].strokeColor = "#01ffe2";
         }else{
-          this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
+          this.paper_objects.children['contours'].strokeColor = "#000";
-          if (this.isHover) {
-            this.paper_objects.children['contours'].strokeColor = "#01ffe2";
-          }else{
-            this.paper_objects.children['contours'].strokeColor = "#000";
-          }
-        }
-      this.draw()
-    },
-    draw() {
-
-      if (!this.ctx) return;
-
-      // record the position from the main matter body
-      this.pos = this.body.position;
-
-      // drawing backgrounds
-      if (this.opened) {
-        switch (this.map_mode) {
-          case 'terraindevie':
-            this.drawBoussoleBG();
-            break;
-          case 'puissancedagir':
-            this.drawPuissanceagirBG();
-            break;
-          case 'doleancer':
-            this.drawDoleancerBG();
-            break;
         }
       }
 
       // contours
-      if (!this.opened 
+      if (!this.is_opened 
-        || (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
+        || (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
         this.paper_objects.children['contours'].visible = true;
       } else {
         this.paper_objects.children['contours'].visible = false;
       }
 
+      // backgrounds
+      if (this.is_opened) {
+        switch (this.map_mode) {
+          case 'terraindevie':
+            this.paper_objects.children.boussole_bg.visible = true;
+            break;
+          case 'puissancedagir':
+            // this.drawPuissanceagirBG();
+            break;
+          case 'doleancer':
+            // this.drawDoleancerBG();
+            break;
+        }
+      }else{
+        this.paper_objects.children.boussole_bg.visible = false;
+      }
+    },
+    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.opened) {
+        if (!this.is_opened) {
           this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
         } else {
           this.drawBesoins();
@@ -615,7 +808,7 @@ export default {
       // map mode doleancer
       // if not opened and has_doleance draw the doleance icone
       if (this.concernement.has_doleance && this.map_mode === "doleancer") {
-        if (!this.opened) {
+        if (!this.is_opened) {
           this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
         } else {
           this.drawDoleanceSteps();
@@ -623,7 +816,7 @@ export default {
       }
 
       if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') {
-        this.drawEntites()
+        // this.drawEntites()
       }
       
       
@@ -972,7 +1165,7 @@ export default {
     },
     drawEntites(){
       // IF OPENED
-      if (this.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++) {
@@ -1016,7 +1209,7 @@ export default {
 
       }
     },
-    drawContour(){
+    drawContour_OLD(){
       if (this.salientPoints.length > 3) {
         // // test draw contour from body part
         // for (let i = 0; i < this.body.parts.length; i++) {

src/components/MapConcernements.vue

@@ -107,8 +107,8 @@ export default {
     // add mouse control
     // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
     this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
-    this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
+    // this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
-    this.canvasMap.canvas.addEventListener('click', this.onClick)
+    // this.canvasMap.canvas.addEventListener('click', this.onClick)
 
     this.animate()
   },
@@ -125,7 +125,7 @@ export default {
       window.requestAnimationFrame(this.animate);
     },
     onMouseMove (e) {
-      this.checkMouseHover();
+      // this.checkMouseHover();
     },
     checkMouseHover(){
       // check item mouse over
@@ -149,23 +149,23 @@ export default {
         // if we have a results
         for (let body of query) {
           console.log('mouse hover body.item_type', body.item_type);
-          if (!this.opened // if no concernement is opened
+          // if (!this.opened // if no concernement is opened
-            && body.item_type === "concernement" // if it is a concernement
+          //   && body.item_type === "concernement" // if it is a concernement
-            && typeof this.concernementsByID[body.id] !== "undefined"  // if the id exists
+          //   && typeof this.concernementsByID[body.id] !== "undefined"  // if the id exists
-            && !this.concernementsByID[body.id].opened) { // if the concernement is not opened
+          //   && !this.concernementsByID[body.id].opened) { // if the concernement is not opened
-              hover_elmt = {
+          //     hover_elmt = {
-                type: 'concernement',
+          //       type: 'concernement',
-                id: body.id
+          //       id: body.id
-              };
+          //     };
-          }
+          // }
-          if (body.item_type === "entite" // if it is an entite
+          // if (body.item_type === "entite" // if it is an entite
-            && this.opened // if a concernement is opened
+          //   && this.opened // if a concernement is opened
-            && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
+          //   && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
-              hover_elmt = {
+          //     hover_elmt = {
-                type: 'entite',
+          //       type: 'entite',
-                id: body.id
+          //       id: body.id
-              };
+          //     };
-          }
+          // }
           if (body.item_type === "besoin" // if it is a besoin
             && this.opened) { // if a concernement is opened
               hover_elmt = {
@@ -218,42 +218,42 @@ export default {
       // no concernement is yet opened, we deal concernements
       if (!this.opened) {
         if (query.length) {
-          // open/close all concernements
+          // // open/close all concernements
-          this.openCloseConcernements(query[0].id)
+          // this.openCloseConcernements(query[0].id)
-          // push route (keep the hash for map_mode)
+          // // push route (keep the hash for map_mode)
-          this.$router.push({
+          // this.$router.push({
-            name: 'concernement',
+          //   name: 'concernement',
-            hash: `#${this.map_mode}`,
+          //   hash: `#${this.map_mode}`,
-            params: {id: query[0].id}
+          //   params: {id: query[0].id}
-          });
+          // });
         }
       }
 
       // concernement is already opened, we deal with entités
       if (this.opened) {
         if (query.length) {
-          let clickedEntityBodies = [];
+          // let clickedEntityBodies = [];
-          query.forEach(body => {
+          // query.forEach(body => {
-            // console.log('body id:', body.id);
+          //   // console.log('body id:', body.id);
-            if (body.item_type === "entite") {
+          //   if (body.item_type === "entite") {
-              clickedEntityBodies.push(body);
+          //     clickedEntityBodies.push(body);
-            }
+          //   }
-          });
+          // });
-          if (clickedEntityBodies.length) {
+          // if (clickedEntityBodies.length) {
-            // we have clicked on an entite
+          //   // we have clicked on an entite
-            this.$router.push({
+          //   this.$router.push({
-              name: 'concernement',
+          //     name: 'concernement',
-              hash: `#${this.map_mode}`,
+          //     hash: `#${this.map_mode}`,
-              params: {id: this.opened.id, eid: clickedEntityBodies[0].id}
+          //     params: {id: this.opened.id, eid: clickedEntityBodies[0].id}
-            });
+          //   });
-          } else {
+          // } else {
-            // otherwise we close the entite and come back to the concernement
+          //   // otherwise we close the entite and come back to the concernement
-            this.$router.push({
+          //   this.$router.push({
-              name: 'concernement',
+          //     name: 'concernement',
-              hash: `#${this.map_mode}`,
+          //     hash: `#${this.map_mode}`,
-              params: {id: this.opened.id}
+          //     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