refactoring: replaced all matter sub body part (entites, etc) by directly paperjs groups

src/components/ConcernementMapItem.vue

@@ -335,24 +335,6 @@ export default {
             id: this.concernement.id,
           })
         ];
-
-        // 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, {
-          //   item_type: 'entite',
-          //   id: this.entites[i].id  
-          // }))
-          this.body_parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
-            item_type: 'entite',
-            id: this.entites[i].entite.id,
-            cid: this.concernement.id,
-            agissante: this.entites[i].entite.agissante,
-            isSensor: true
-          }))
-        }
-        
-        // Create parts of the body : besoins and responses
-        this.createBesoinsBodyParts();
         
         // create the body
         this.body = Matter.Body.create({
@@ -397,49 +379,6 @@ export default {
         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
-        let x = Math.cos(center_a*(Math.PI/180)) * br;
-        let y = Math.sin(center_a*(Math.PI/180)) * br;
-
-        this.body_parts.push(Matter.Bodies.circle(x, y, 0.8, {
-          item_type: 'besoin',
-          id: this.concernement.besoins[i].id,
-          cid: this.concernement.id,
-          isSensor: true
-        }));
-
-        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++) { // loop through all 4 fields, keep only the last one filled
-            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],
-                id: this.concernement.besoins[i].reponses[j].id,
-                bid: this.concernement.besoins[i].id,
-                cid: this.concernement.id,
-                isSensor: true
-              }));
-            }
-          }
-        }
-      }
-    },
     // PAPER OBJECTS
     initPaperObjects(){
       this.paper_objects = new paper.Group({
@@ -449,6 +388,7 @@ export default {
       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());
@@ -709,16 +649,36 @@ export default {
         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];
+      for (let i = 0; i < this.entites.length; i++) {
+        g.addChild(new paper.Path.Circle({
+          pivot: new paper.Point(this.pos),
+          center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
+          radius: 0.5, //0.3
+          fillColor: '#000',
+          item_id: this.entites[i].entite.id,
+          item_type: 'entite'
+        }))
+      }
+      return g;
+    },
+    setPaperAgissantes(){
+      let g = new paper.Group({
+        pivot: new paper.Point(this.pos),
+        name: 'agissantes'
+      });
+      for (let i = 0; i < this.entites.length; i++) {
+        if (this.entites[i].entite.agissante) {
           g.addChild(new paper.Path.Circle({
-            center: [part.position.x, part.position.y],
+            pivot: new paper.Point(this.pos),
+            center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
             radius: 0.5, //0.3
             fillColor: '#000',
-            item_id: part.id,
+            strokeColor: '#000',
+            strokeWidth: 3,
+            item_id: this.entites[i].entite.id,
             item_type: 'entite'
           }))
+          
         }
       }
       return g;
@@ -803,37 +763,53 @@ export default {
         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':
+      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
+        let x = Math.cos(center_a*(Math.PI/180)) * br;
+        let y = Math.sin(center_a*(Math.PI/180)) * br;
+
+        g.addChild(
+          new paper.Path({
+            pivot: new paper.Point(this.pos),
+            segments: this.getDiamondSegments(this.pos.x + x, this.pos.y + y, 1),
+            fillColor: '#000',
+            item_id: this.concernement.besoins[i].id,
+            item_cid: this.concernement.id,
+            item_type: 'besoin'
+          })
+        )
+
+        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++) { // loop through all 4 fields, keep only the last one filled
+            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;
+
               g.addChild(
                 new paper.Path({
-                  segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
-                  fillColor: '#000',
                   pivot: new paper.Point(this.pos),
-                  item_id: part.id,
-                  item_type: 'besoin'
-                })
-              )
-              break;
-            case 'reponse':
-              g.addChild(
-                new paper.Path({
-                  segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
+                  segments: this.getDiamondSegments(this.pos.x + rx, this.pos.y + ry, 1),
                   fillColor: '#eee',
                   strokeColor: "#000",
                   strokeWidth: 1,
-                  pivot: new paper.Point(this.pos),
-                  item_id: part.id,
-                  item_bid: part.bid,
-                  item_cid: part.cid,
+                  item_id: this.concernement.besoins[i].reponses[j].id,
+                  item_bid: this.concernement.besoins[i].id,
+                  item_cid: this.concernement.id,
                   item_type: 'reponse'
                 })
               )
-              break;
+            }
           }
         }
       }
@@ -849,27 +825,6 @@ export default {
         [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.3, //0.3
-            fillColor: '#000',
-            strokeColor: '#000',
-            strokeWidth: 3,
-            item_id: part.id,
-            item_type: 'entite'
-          }))
-        }
-      }
-      return g;
-    },
     setPaperDoleanceBG(){
       var r = this.ray * this.scale * 0.8;  // ray
       var dr = r/2;                         // demi ray
@@ -1803,7 +1758,7 @@ export default {
         : this.canvas.width - pseudo_center_x;
       // max and min force
       let minf = 0;
-      let maxf = 10;
+      let maxf = 6;
       // scale factor
       let scale = (maxf-minf) / (maxp-minp);
       // get the inversed distance
@@ -1840,7 +1795,7 @@ export default {
         : pseudo_center_x;
       // max and min force
       let minf = 0;
-      let maxf = 2;
+      let maxf = 1;
       // scale factor
       let scale = (maxf-minf) / (maxp-minp);
       // get the inversed distance from the side
@@ -1867,19 +1822,46 @@ export default {
       );
     },
     applyShuffleForces() {
-      var dist, dir, x_velocity;
-      dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
-      dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
-      x_velocity = Math.pow(dist/650,10) * dir;
+      // var dist, dir, x_velocity;
+      // dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
+      // dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
+      // x_velocity = Math.pow(dist/650,10) * dir;
+      let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
+      // get the direction to the centre
+      let dir = this.pos.x > pseudo_center_x 
+        ? -1 // to left 
+        : 1; // to right
+        // max & min item position
+      let minp = 0;
+      let maxp = dir < 0
+        ? this.canvas.width - pseudo_center_x
+        : pseudo_center_x;
+      // max and min force
+      let minf = 0;
+      let maxf = 10;
+      // scale factor
+      let scale = (maxf-minf) / (maxp-minp);
+      // get the inversed distance from the side
+      let dist = dir < 0 
+        ? this.pos.x - pseudo_center_x 
+        : pseudo_center_x - this.pos.x; 
+
+      let x_velocity = Math.exp(minf + scale*(dist-minp));
 
-      Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0});
+      let y_velocity = -10 + Math.random() * 10;
+      // let ori_pos = dir < 0 
+      //   ? {x:this.canvas.width, y:this.body.position.y} 
+      //   : {x:0, y:this.body.position.y};
+      // let x_force = Math.pow(dist/800,10) * dir;
+
+      Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity});
     },
     onAfterEngineUpdate (event) {
       // respawn element if outside screen
-      // if(this.pos.x < 0
-      //   || this.pos.x > this.canvas.width
-      //   || this.pos.y < 0
-      //   || this.pos.y > this.canvas.height){
+      // if(this.pos.x <= 0
+      //   || this.pos.x >= this.canvas.width
+      //   || this.pos.y <= 0
+      //   || 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();
@@ -1956,34 +1938,8 @@ export default {
         && this.map_mode !== 'doleancer' 
         && this.map_mode !== 'action' ) {
           this.paper_objects.children.entites.visible = true;
-          // if (this.opened_entite_id) {
-          //   // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
-          //   this.paper_objects.children.entites.children.forEach((entite) => {
-          //     // console.log('entite', entite);
-          //     if (entite.item_id === this.opened_entite_id) {
-          //       entite.style.fillColor = '#01ffe2';
-          //     } else {
-          //       entite.style.fillColor = '#000';
-          //     }
-          //   });
-          // } else {
-          //   this.paper_objects.children.entites.children.forEach((entite) => {
-          //     entite.style.fillColor = '#000';
-          //   })
-          // }
       } else {
         this.paper_objects.children.entites.visible = false;
-        // if(this.map_mode === 'puissancedagir'
-        //   || this.map_mode === 'doleancer' 
-        //   || this.map_mode === 'action' ){
-        //     this.paper_objects.children.entites.visible = false;
-        // }else{
-        //   this.paper_objects.children.entites.visible = true;
-        //   // this.paper_objects.children.entites.children.forEach((entite) => {
-        //   //     // entite.style.strokeWidth = 2;
-        //   //     // entite.style.strokeColor = "#fff";
-        //   //   })
-        // }
       }