more paperjs refactoring

src/components/ConcernementMapItem.vue

@@ -260,43 +260,6 @@ export default {
           })
         ];
 
-        // // Create parts of the body : contours
-        // if (this.salientPoints.length > 2) {
-        //   var decomp = require('poly-decomp');
-        //   // window.decomp = decomp;
-        //   // debugger;
-        //   Matter.Common.setDecomp(decomp);
-        //   // Matter.Common.setDecomp(require('poly-decomp'));
-          
-        //   // let contourpoints = [];
-        //   // for (let j = 0; j < this.salientPoints.length; j++) {
-        //   //   contourpoints.push(this.salientPoints[j].pos);
-        //   // }
-        //   let contourpoints = this.salientPoints.map(function(point) {
-        //     return point.pos; //[point.pos.x, point.pos.y]
-        //   });
-        //   // console.log('contourpoints', contourpoints);
-        //   // let contourpoints = Matter.Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
-          
-        //   // let ccw_contourpoints = decomp.makeCCW(contourpoints);
-        //   // console.log('ccw_contourpoints', ccw_contourpoints);
-        //   let vertices_contour = Matter.Vertices.create(contourpoints);
-        //   // console.log('vertices_contour', vertices_contour);
-        //   // let vertices_contour_bounds = Matter.Bounds.create(vertices_contour);
-        //   // console.log('vertices_contour_bounds', vertices_contour_bounds);
-        //   // debugger;
-        //   let body_contour = Matter.Bodies.fromVertices(0, 0, vertices_contour, {
-        //     mass: 0,
-        //     item_type: 'concernement-contours',
-        //     id: this.concernement.id,
-        //   }, false, 0, 0, 0);
-        //   // debugger;
-        //   // console.log('body_contour.bounds', body_contour.bounds);
-        //   // // https://github.com/liabru/matter-js/issues/186
-        //   // Matter.Body.translate(body_contour, Matter.Vector.sub(vertices_contour_bounds.min, body_contour.bounds.min))
-        //   this.body_parts.push(body_contour);
-        // }
-
         // Create parts of the body : entities
         for (let i = 0; i < this.entites.length; i++) {
           // parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, {
@@ -338,11 +301,7 @@ export default {
         Matter.Body.setPosition(this.body, this.pos);
 
         // add init velocity
-        let delta = 10;
+        this.setInitBodyVelocity()
-        Matter.Body.setVelocity(this.body, {
-            x: -delta + Math.random()*delta*2,
-            y: -delta + Math.random()*delta*2
-          });
         // console.log('concernementItem mass', this.body.mass);
         Matter.Composite.add(this.matterEngine.world, this.body);
         // console.log('concernement body', this.body);
@@ -355,11 +314,19 @@ export default {
         Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
       }
     },
+    setInitBodyVelocity(){
+      let delta = 10;
+      Matter.Body.setVelocity(this.body, {
+        x: -delta + Math.random()*delta*2,
+        y: -delta + Math.random()*delta*2
+      });
+    },
     createBesoinsBodyParts(){
       let res_fields = ['qui','quoi','ou','avec'];
       let arc = (360 / 16);               // unit arc
       let r = (this.ray * this.scale)/5;  // unit ray
       let br = r - r/3;                   // besoin ray
+
       for (let i = 0; i < this.concernement.besoins.length; i++) {
         let start_a = arc * i;              // angle depart (for reponses)
         let center_a = start_a + arc/2;     // angle central
@@ -376,15 +343,17 @@ export default {
         let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
         for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
           let res_a = start_a + res_arc * (j+1); // angle for response line
-          for (let f = 0; f < res_fields.length; f++) {
+          for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled
-            if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
+            if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
+              && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
+              ){
               let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
               let rx = Math.cos(res_a*(Math.PI/180)) * rr;
               let ry = Math.sin(res_a*(Math.PI/180)) * rr;
               
               this.body_parts.push(Matter.Bodies.circle(rx, ry, 0.8, {
                 item_type: 'reponse',
-                field: res_fields[f],
+                // field: res_fields[f],
                 id: this.concernement.besoins[i].reponses[j].id,
                 bid: this.concernement.besoins[i].id,
                 cid: this.concernement.id,
@@ -536,8 +505,8 @@ export default {
             center: [part.position.x, part.position.y],
             radius: 0.5, //0.3
             fillColor: '#000',
-            eid: part.id
+            item_id: part.id,
-            // type: 'entite'
+            item_type: 'entite'
           }))
 
           // if (part.id === this.opened_entite_id) {
@@ -676,7 +645,9 @@ export default {
                 new paper.Path({
                   segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
                   fillColor: '#000',
-                  pivot: new paper.Point(this.pos)
+                  pivot: new paper.Point(this.pos),
+                  item_id: part.id,
+                  item_type: 'besoin'
                 })
               )
               break;
@@ -687,7 +658,11 @@ export default {
                   fillColor: '#eee',
                   strokeColor: "#000",
                   strokeWidth: 1,
-                  pivot: new paper.Point(this.pos)
+                  pivot: new paper.Point(this.pos),
+                  item_id: part.id,
+                  item_bid: part.bid,
+                  item_cid: part.cid,
+                  item_type: 'reponse'
                 })
               )
               break;
@@ -744,34 +719,41 @@ export default {
         if (this.is_opened) {
           
           // lets define some options regarding the map_mode
-          let op;
+          let paper_group_tohit;
           switch (this.map_mode) {
             case "terraindevie":
-              op = {
+              paper_group_tohit = 'entites';
-                pg: 'entites',  // paper group to hittest
-                type: 'entite', // type for hover element
-                id: 'eid'       // id prop on paper item
-              }
               break;
             case "action":
-              op = {
+              paper_group_tohit = 'agissantes';
-                pg: 'agissantes', // paper group to hittest
+              break;
-                type: 'entite',   // type for hover element
+            case "puissancedagir":
-                id: 'eid'         // id prop on paper item
+              paper_group_tohit = 'puissanceagir_besoins';
-              }
               break;
           }
 
-          let result = this.paper_objects.children[op.pg].hitTest(event.point);
+          let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
-          // console.log('move result', result);
+
           if (result) {
-            this.setHoverElmt({
+            console.log('move result', result);
-              type: op.type,
+            let hover_elmt = {
-              id: result.item[op.id]
+              type: result.item.item_type,
-            });
+              id: result.item.item_id
+            }; 
+            switch (this.map_mode) {
+              // case "terraindevie":
+              //   break;
+              // case "action":
+              //   break;
+              case "puissancedagir":
+                hover_elmt.bid = result.item.item_bid;
+                hover_elmt.cid = result.item.item_cid;
+                break;
+            }
+            this.setHoverElmt(hover_elmt);
             document.body.style.cursor = "pointer";
           } else {
-            this.setHoverElmt(null);
+            this.resetHoverElmt();
             document.body.style.cursor = "auto";
           }
         }
@@ -779,7 +761,7 @@ export default {
       
       this.paper_objects.onMouseLeave = function(event){
         if (!this.is_opened) {
-          this.setHoverElmt(null);
+          this.resetHoverElmt();
           document.body.style.cursor = "auto";
         }
       }.bind(this);
@@ -804,13 +786,13 @@ export default {
             case "terraindevie":
               op = {
                 pg: 'entites',  // paper group to hittest
-                id: 'eid'       // id prop on paper item
+                // id: 'eid'       // id prop on paper item
               }
               break;
             case "action":
               op = {
                 pg: 'agissantes', // paper group to hittest
-                id: 'eid'         // id prop on paper item
+                // id: 'eid'         // id prop on paper item
               }
               break;
           }
@@ -822,7 +804,7 @@ export default {
             this.$router.push({
               name: 'concernement',
               hash: `#${this.map_mode}`,
-              params: {id: this.opened.id, eid: result.item[op.id]}
+              params: {id: this.opened.id, eid: result.item.item_id}
             });
           } else {
             // otherwise we close the entite and come back to the concernement
@@ -975,6 +957,7 @@ export default {
         || this.pos.y > this.canvas.height){
           this.pos = this.getRandomPos()
           Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
+          this.setInitBodyVelocity();
         }
       
       this.paper_objects.position = this.pos = this.body.position;
@@ -1006,6 +989,12 @@ export default {
 
       // backgrounds
       if (this.is_opened) {
+        // hide all bgs
+        this.paper_objects.children.boussole_bg.visible = false;
+        if (this.concernement.has_puissancedagir) {
+          this.paper_objects.children.puissanceagir_bg.visible = false;
+        }
+        // choose wich one to show, if one
         switch (this.map_mode) {
           case 'terraindevie':
             this.paper_objects.children.boussole_bg.visible = true;

src/components/MapConcernements.vue

@@ -110,8 +110,6 @@ 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('click', this.onClick)
 
     this.animate()
   },
@@ -121,10 +119,7 @@ export default {
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
     ...mapActions(CommonStore,['setHoverElmt']),
     animate () {
-      // this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
-      // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
       Matter.Engine.update(this.engine, 1);
-      // this.checkMouseHover();
       window.requestAnimationFrame(this.animate);
     },
     onCanvasClick(event){
@@ -137,148 +132,7 @@ export default {
           hash: `#${this.map_mode}`
         });
       }
-    },
-    // onMouseMove_OLD (e) {
-    //   // this.checkMouseHover();
-    // },
-    checkMouseHover_OLD(){
-      // check item mouse over
-      // let query;
-      // if (this.opened) {
-      //   // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
-      //   const bodies = Matter.Composite.allBodies(this.world);
-      //   for (let body of bodies) {
-      //     if (body.item_type === "concernement" && body.id === this.opened.id) {
-      //       query = Matter.Query.point(body.parts, this.mouse.position);
-      //       break;    
-      //     }
-      //   }
-      // } else {
-      //   // if no concernement opened we query concernements
-      //   query = Matter.Query.point(this.world.bodies, this.mouse.position)
-      // }
-      
-      let hover_elmt = null;
-      if (query && query.length) {
-        // 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
-          //   && body.item_type === "concernement" // if it is a concernement
-          //   && typeof this.concernementsByID[body.id] !== "undefined"  // if the id exists
-          //   && !this.concernementsByID[body.id].opened) { // if the concernement is not opened
-          //     hover_elmt = {
-          //       type: 'concernement',
-          //       id: body.id
-          //     };
-          // }
-          // if (body.item_type === "entite" // if it is an entite
-          //   && this.opened // if a concernement is opened
-          //   && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
-          //     hover_elmt = {
-          //       type: 'entite',
-          //       id: body.id
-          //     };
-          // }
-          if (body.item_type === "besoin" // if it is a besoin
-            && this.opened) { // if a concernement is opened
-              hover_elmt = {
-                type: 'besoin',
-                id: body.id
-              };
     }
-
-          if (body.item_type === "reponse" // if it is a besoin
-            && this.opened) { // if a concernement is opened
-              hover_elmt = {
-                type: 'reponse',
-                field: body.field,
-                id: body.id,
-                bid: body.bid,
-                cid: body.cid
-              };
-          }
-        }
-        // 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";
-      // }
-    },
-    // 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}
-    //       // });
-    //     }
-    //   }
-
-    //   // 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 () {
   },

src/stores/common.js

@@ -10,7 +10,7 @@ export const CommonStore = defineStore({
   },
   actions: {
     setHoverElmt(elmt) {
-      console.log(`setHoverElmt ${elmt}`);
+      console.log(`setHoverElmt`, elmt);
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     }