got a better map-item opening

package-lock.json

@@ -11,7 +11,7 @@
         "@csstools/normalize.css": "^12.0.0",
         "@material-design-icons/svg": "^0.14.2",
         "@mdi/font": "^7.1.96",
-        "easing-utils": "^1.0.0",
+        "@tweenjs/tween.js": "^19.0.0",
         "granim": "^2.0.0",
         "matter-attractors": "^0.1.6",
         "matter-js": "^0.19.0",
@@ -234,6 +234,11 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-19.0.0.tgz",
+      "integrity": "sha512-QVbvSlnP7FcjKr1edg460BbUlpdGzmIOfvpsvHCj3JPIVZ9S9KeQLk9mB24VlDzPIl/a/ehAZPE95xFsmqm+pQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -689,11 +694,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/easing-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/easing-utils/-/easing-utils-1.0.0.tgz",
-      "integrity": "sha512-9oabISTqjTJSZyu85nJMfYtlV2tT/Uwo0M3uqODrBWCxme0eyLqEXRuG2/uYpyqzc7iSHjV/KW2mEKTqhdtESA=="
-    },
     "node_modules/esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -2715,6 +2715,11 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "@tweenjs/tween.js": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-19.0.0.tgz",
+      "integrity": "sha512-QVbvSlnP7FcjKr1edg460BbUlpdGzmIOfvpsvHCj3JPIVZ9S9KeQLk9mB24VlDzPIl/a/ehAZPE95xFsmqm+pQ=="
+    },
     "@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -3077,11 +3082,6 @@
         "esutils": "^2.0.2"
       }
     },
-    "easing-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/easing-utils/-/easing-utils-1.0.0.tgz",
-      "integrity": "sha512-9oabISTqjTJSZyu85nJMfYtlV2tT/Uwo0M3uqODrBWCxme0eyLqEXRuG2/uYpyqzc7iSHjV/KW2mEKTqhdtESA=="
-    },
     "esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",

package.json

@@ -11,7 +11,7 @@
     "@csstools/normalize.css": "^12.0.0",
     "@material-design-icons/svg": "^0.14.2",
     "@mdi/font": "^7.1.96",
-    "easing-utils": "^1.0.0",
+    "@tweenjs/tween.js": "^19.0.0",
     "granim": "^2.0.0",
     "matter-attractors": "^0.1.6",
     "matter-js": "^0.19.0",

src/components/ConcernementMapItem.vue

@@ -22,7 +22,8 @@ import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
 
-import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
+// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
+import Tween from "@tweenjs/tween.js";
 
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
@@ -42,7 +43,8 @@ export default {
       time: 0,
       salientPoints: [],
       scale: 1,
-      anim: null,
+      // anim: null,
+      tween: null,
       // matter
       body: null,
       constraint: null
@@ -82,34 +84,11 @@ export default {
         if(n){
           console.log('concernement item opened');
           // opened
-          this.anim = {
+          this.openClose(true);
-            init: this.scale,
-            target: 5, //target scale
-            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 = {
+          this.openClose(false)
-            init: this.scale,
-            target: 1, //target scale
-            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);
       },
@@ -164,8 +143,8 @@ export default {
       // this.canvas.addEventListener('animate', this.animate)
 
       // listen for afterUpdate event from Matter.Engine object
-      // Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate)
+      Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate)
-      Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
+      // Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
     },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@@ -235,29 +214,59 @@ export default {
     //     // Matter.Body.setPosition(this.body, this.pos);
     //   }
     // },
-    onAfterEngineUpdate (event) {
+    openClose(open) {
-      
+      if (this.tween) {
-      if (this.anim) {
+        this.tween.stop();
-        let elapsedTime = Date.now() - this.anim.start; // get time elapsed since anime start
+      }
-        if (elapsedTime <= this.anim.duration) {
+      if (open) {
-          let ease = easeInOutQuart(elapsedTime / this.anim.duration); // get the easing factor
+        // opening
-          let scale = this.anim.init < this.anim.target 
+        this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y})
-            ? this.anim.init + this.anim.target * ease 
+          .to({s: 5,x: 500, y: 500}, 800)
-            : this.anim.init + (this.anim.target - this.anim.init) * ease; // get the current eased scale
+          .onUpdate((obj) => {
-          // // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
+            // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
-          // // revert to the original size (by reverting the previous scale)
+            // revert to the original size (by reverting the previous scale)
             Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
-          // // then scale again to new scale
+            // then scale again to new scale
-          Matter.Body.scale(this.body, scale, scale)
+            Matter.Body.scale(this.body, obj.s, obj.s)
             // record new scale
-          this.scale = scale;
+            this.scale = obj.s;
+            
+            Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y});
+            this.pos = {x:obj.x, y:obj.y};
+          })
+          .onComplete((obj) => {
+            this.constraint = Matter.Constraint.create({
+              pointA: this.pos,
+              bodyB: this.body,
+              stiffness: 1,
+              damping: 0,
+              length: 0
+            });
+            Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
+          });
       } else {
-          this.anim = null;
+        // closing
+        if(this.constraint){
+          Matter.Composite.remove(this.matterEngine.world, this.constraint);
         }
-      
+        this.tween = new Tween.Tween({s: this.scale})
+          .to({s: 1}, 500)
+          .onUpdate((obj) => {
+            // 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)
+            // then scale again to new scale
+            Matter.Body.scale(this.body, obj.s, obj.s)
+            // record new scale
+            this.scale = obj.s;
+          });
+      }
+      this.tween.easing(Tween.Easing.Quadratic.InOut).start();
+    },
+    onBeforeEngineUpdate (event) {
+      if (this.tween) {
+        this.tween.update();
       }
-
-
     }
   },
   render() {
@@ -278,12 +287,12 @@ export default {
     this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
     this.ctx.stroke();
 
-    // // interieur circle
+    // interieur circle
-    // this.ctx.beginPath();
+    this.ctx.beginPath();
-    // this.ctx.lineWidth = 0.5;
+    this.ctx.lineWidth = 0.5;
-    // this.ctx.strokeStyle = "#888";
+    this.ctx.strokeStyle = "#888";
-    // this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false);
+    this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
-    // this.ctx.stroke();
+    this.ctx.stroke();
 
     // contours
     if (this.salientPoints.length > 3) {