tested consraint to move the opened body, not very satisfying

src/components/ConcernementMapItem.vue

@@ -44,7 +44,8 @@ export default {
       scale: 1,
       anim: null,
       // matter
-      body: null
+      body: null,
+      constraint: null
     }
   },
   props: ['concernement', 'opened'],
@@ -79,6 +80,7 @@ export default {
     opened: {
       handler (n, o) {
         if(n){
+          console.log('concernement item opened');
           // opened
           this.anim = {
             init: this.scale,
@@ -86,7 +88,18 @@ export default {
             start: Date.now(),
             duration: 1000 // ms 
           }
+          // create constraint to force body to move in the right position
+          // TODO this is not working well, better to move the body and then apply the constraint
+          this.constraint = Matter.Constraint.create({
+            pointA: { x: this.canvas.width/2, y: this.canvas.height/2 },
+            bodyB: this.body,
+            stiffness: 0.9,
+            damping: 0.1,
+            length: 0
+          });
+          Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
         }else{
+          console.log('concernement item closed');
           // closed
           this.anim = {
             init: this.scale,
@@ -94,6 +107,9 @@ export default {
             start: Date.now(),
             duration: 1000 // ms 
           }
+          if(this.constraint){
+            Matter.Composite.remove(this.matterEngine.world, this.constraint);
+          }
         }
         console.log(`watch opened ${this.concernement.id}`, n, o, this.anim);
       },
@@ -102,7 +118,7 @@ export default {
   },
   methods: {
     initCanvasMap (){
-      console.log('initCanvasMap');
+      // console.log('initCanvasMap');
       // record canvas and ctx for rendering (drawing)
       this.canvas = this.canvasMap.canvas
       this.ctx = this.canvasMap.ctx
@@ -118,12 +134,12 @@ export default {
 
         // https://github.com/liabru/matter-attractors/issues/8        
         // https://github.com/liabru/matter-attractors/blob/master/index.js
-        MatterAttractors.Attractors.gravityConstant = -1;
+        // MatterAttractors.Attractors.gravityConstant = -5;
         this.body = Matter.Bodies.circle(this.pos.x, this.pos.y, this.ray, {
           frictionAir: 0,
           // mass: Math.pow(3, this.entites.length),
           mass: 10,
-          restitution: 0.9,
+          restitution: 0.4,
           id: this.concernement.id,
           plugin: {
             attractors: [
@@ -133,20 +149,23 @@ export default {
             ]
           }
         });
-        let delta = 60;
+        let delta = 10;
+        // add init velocity
         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);
+        // console.log('concernement body', this.body);
       }
 
       // // listen for animate event dispatched from parent
       // this.canvas.addEventListener('animate', this.animate)
+
       // listen for afterUpdate event from Matter.Engine object
-      Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate)
+      // Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate)
+      Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
     },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@@ -211,31 +230,25 @@ export default {
       }
       // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
     },
-    scaleBody(scale){
-      // scale vertices
-      Matter.Vertices.scale(this.body.parts[0].vertices, scale, scale);
-      // update properties
-      // this.body.parts[0].axes = Matter.Axes.fromVertices(this.body.parts[0].vertices);
-      // update bounds
-      // Matter.Bounds.update(this.body.parts[0].bounds, this.body.parts[0].vertices, this.body.velocity);
-      this.body.circleRadius *= scale;
-    },
+    // onBeforeEngineUpdate (event) {
+    //   if (this.opened) {
+    //     // Matter.Body.setPosition(this.body, this.pos);
+    //   }
+    // },
     onAfterEngineUpdate (event) {
       
       if (this.anim) {
-        let time = Date.now() - this.anim.start; // get time elapsed since anime start
-        if (time <= this.anim.duration) {
-          let ease = easeInOutQuart(time / this.anim.duration); // get the easing factor
+        let elapsedTime = Date.now() - this.anim.start; // get time elapsed since anime start
+        if (elapsedTime <= this.anim.duration) {
+          let ease = easeInOutQuart(elapsedTime / this.anim.duration); // get the easing factor
           let scale = this.anim.init < this.anim.target 
             ? this.anim.init + this.anim.target * ease 
             : this.anim.init + (this.anim.target - this.anim.init) * ease; // get the current eased scale
           // // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
           // // revert to the original size (by reverting the previous scale)
           Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
-          // this.scaleBody(1 / this.scale)
           // // then scale again to new scale
           Matter.Body.scale(this.body, scale, scale)
-          // this.scaleBody(scale);
           // record new scale
           this.scale = scale;
         }else{
@@ -244,13 +257,18 @@ export default {
       
       }
 
+
     }
   },
   render() {
     // console.log('render()', this.ctx);
 
     if (!this.ctx) return;
-    
+
+    // if (this.opened) {
+    //   Matter.Body.setPosition(this.body, this.pos);
+    // }
+
     this.pos = this.body.position;
       
     // exterieur circle

src/components/MapConcernements.vue

@@ -105,6 +105,7 @@ export default {
     },
     onClick (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)
       // console.log(this.mouse.position);
       // console.log(query);
@@ -113,7 +114,6 @@ export default {
         // console.log('body id:', elmt.id);
         clickedIDs.push(elmt.id);
       });
-      let opend
       this.concernements.forEach((concernement, index) => {
         this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
       });