made matter body parts of besoin and concernement

src/components/ConcernementMapItem.vue

@@ -48,6 +48,7 @@ export default {
       opacity: 0,
       tween: null,
       body: null,
+      body_parts: [],
       constraint: null
     }
   },
@@ -140,18 +141,19 @@ export default {
         // MatterAttractors.Attractors.gravityConstant = -5;
         
         // Create parts of the body : main big circle & entities
-        var parts = [
+        this.body_parts = [
           Matter.Bodies.circle(0, 0, this.ray, {
             item_type: 'concernement',
             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  
           // }))
-          parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
+          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,
@@ -159,10 +161,12 @@ export default {
             isSensor: true
           }))
         }
-
+        // Create parts of the body : besoins and responses
+        this.createBesoinsBodyParts();
+        
         // create the body
         this.body = Matter.Body.create({
-          parts: parts,
+          parts: this.body_parts,
           item_type: 'concernement',
           id: this.concernement.id,
           frictionAir: 0,
@@ -200,6 +204,45 @@ export default {
         Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
       }
     },
+    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++) {
+            if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
+              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',
+                id: this.concernement.besoins[i].reponses[j].id,
+                bid: this.concernement.besoins[i].id,
+                cid: this.concernement.id,
+                isSensor: true
+              }));
+            }
+          }
+        }
+      }
+    },
     getRandomPos(){
       return {
         x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
@@ -592,49 +635,29 @@ export default {
       }
     },
     drawBesoins(){
-      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++) {
-        // TODO make besoins and reponses interactives
-        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.ctx.beginPath();
-        this.ctx.fillStyle = "#000";
-        // this.ctx.arc(this.pos.x + x, this.pos.y + y, 2, 0, 2 * Math.PI, false);
-        this.drawDiamond(this.pos.x + x, this.pos.y + y, 4);
-        this.ctx.fill();
-
-        let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
-        // loop through reponses
-        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
-          // loop through fields qui, quoi, où, avec
-          for (let f = 0; f < res_fields.length; f++) {
-            if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
-              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;
-              
+      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(this.pos.x + rx, this.pos.y + ry, 5);
+              this.drawDiamond(part.position.x, part.position.y, 5);
               this.ctx.fill();
-              this.ctx.stroke();
-
-            }
-            
+              this.ctx.stroke();   
+              break;
           }
-          
         }
-        
       }
     },
     drawDiamond(x,y,r){