diff --git a/package-lock.json b/package-lock.json index 6525ffd..dc5dbd1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 070eca2..f639596 100644 --- a/package.json +++ b/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", diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index f285076..61e3c52 100644 --- a/src/components/ConcernementMapItem.vue +++ b/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 = { - 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]); + this.openClose(true); }else{ console.log('concernement item closed'); // closed - this.anim = { - init: this.scale, - target: 1, //target scale - start: Date.now(), - duration: 1000 // ms - } - if(this.constraint){ - Matter.Composite.remove(this.matterEngine.world, this.constraint); - } + this.openClose(false) } 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, "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 @@ -235,29 +214,59 @@ export default { // // Matter.Body.setPosition(this.body, this.pos); // } // }, - onAfterEngineUpdate (event) { - - if (this.anim) { - 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) - // // then scale again to new scale - Matter.Body.scale(this.body, scale, scale) - // record new scale - this.scale = scale; - }else{ - this.anim = null; - } - + openClose(open) { + if (this.tween) { + this.tween.stop(); + } + if (open) { + // opening + this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y}) + .to({s: 5,x: 500, y: 500}, 800) + .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; + + 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 { + // 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 - // this.ctx.beginPath(); - // this.ctx.lineWidth = 0.5; - // this.ctx.strokeStyle = "#888"; - // this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false); - // this.ctx.stroke(); + // interieur circle + this.ctx.beginPath(); + this.ctx.lineWidth = 0.5; + this.ctx.strokeStyle = "#888"; + this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false); + this.ctx.stroke(); // contours if (this.salientPoints.length > 3) {