bodies are scaling

src/components/ConcernementMapItem.vue

@@ -41,6 +41,8 @@ export default {
       ray: 60,
       time: 0,
       salientPoints: [],
+      scale: 1,
+      oldScale: 1,
       // matter
       body: null
     }
@@ -187,8 +189,6 @@ export default {
     },
     animate (event) {
       if (this.ctx) {
-        // this var is only here to trigger the render()
-        // this.time = Date.now();
         this.pos = this.body.position;
       }
     }
@@ -198,14 +198,19 @@ export default {
     
     if (!this.ctx) return;
     
-    // this var is only here to trigger the render() from animate()
-    // let time = this.time;
+    this.scale = this.concernement.opened ? 5 : 1;
+
+    if (this.scale !== this.oldScale) {
+      Matter.Body.scale(this.body, this.scale, this.scale)
+    }
+
+
 
     // exterieur circle
     this.ctx.beginPath();
     this.ctx.lineWidth = 0.5;
     this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
-    this.ctx.arc(this.pos.x, this.pos.y, this.ray, 0, 2 * Math.PI, false);
+    this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
     this.ctx.stroke();
 
     // // interieur circle
@@ -221,11 +226,11 @@ export default {
       this.ctx.lineWidth = 1;
       this.ctx.strokeStyle = "#000";
       this.ctx.fillStyle = "rgba(255,255,255,0.4)";
-      this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
+      this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
       for (let j = 1; j < this.salientPoints.length; j++) {
-        this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
+        this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale, this.pos.y+this.salientPoints[j].pos.y*this.scale)
       }
-      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
+      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
       this.ctx.fill();
       this.ctx.stroke();
     }
@@ -235,7 +240,7 @@ export default {
       let entite = this.entites[i];
       // console.log('entite', entite);
       this.ctx.beginPath();
-      this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
+      this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
       this.ctx.fillStyle = "#F00";
       this.ctx.fill();
     }
@@ -248,7 +253,7 @@ export default {
     this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
     this.ctx.fill();
 
-
+    this.oldScale = this.scale;
   },
 }