diff --git a/package-lock.json b/package-lock.json index 4f0b4d9..6525ffd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +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", "granim": "^2.0.0", "matter-attractors": "^0.1.6", "matter-js": "^0.19.0", @@ -688,6 +689,11 @@ "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", @@ -3071,6 +3077,11 @@ "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 3c57c71..070eca2 100644 --- a/package.json +++ b/package.json @@ -11,6 +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", "granim": "^2.0.0", "matter-attractors": "^0.1.6", "matter-js": "^0.19.0", diff --git a/src/App.vue b/src/App.vue index 5cf3d85..1a76e35 100644 --- a/src/App.vue +++ b/src/App.vue @@ -55,6 +55,7 @@ export default { v-for="(concernement,id) in concernementsByID" :key="id" :concernement="concernement" + :opened="concernement.opened" />
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 70bf42b..dc02b67 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -19,10 +19,10 @@ // } from "matter-js"; import Matter from "matter-js"; - import MatterAttractors from "matter-attractors"; // Matter.use(MatterAttractors); +import { easeInOutQuad, easeInOutQuart } from 'easing-utils'; import { mapState, mapActions } from 'pinia' import { ConcernementsStore } from '@/stores/concernements' @@ -42,12 +42,12 @@ export default { time: 0, salientPoints: [], scale: 1, - oldScale: 1, + anim: null, // matter body: null } }, - props: ['concernement'], + props: ['concernement', 'opened'], computed: { ...mapState(ConcernementsStore,['concernementsByID']) }, @@ -75,6 +75,29 @@ export default { } }, deep: true + }, + opened: { + handler (n, o) { + if(n){ + // opened + this.anim = { + init: this.scale, + target: 5, //target scale + start: Date.now(), + duration: 1000 // ms + } + }else{ + // closed + this.anim = { + init: this.scale, + target: 1, //target scale + start: Date.now(), + duration: 1000 // ms + } + } + console.log(`watch opened ${this.concernement.id}`, n, o, this.anim); + }, + deep: true } }, methods: { @@ -117,12 +140,13 @@ export default { }); // console.log('concernementItem mass', this.body.mass); Matter.Composite.add(this.matterEngine.world, 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.animate) + Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate) }, parsePoints (){ // converts data (menace/maintien, actuel/future, prise) into atcual position x,y @@ -187,29 +211,48 @@ export default { } // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints); }, - animate (event) { - if (this.ctx) { - this.pos = this.body.position; + 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; + }, + 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 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{ + this.anim = null; + } + } + } }, render() { // console.log('render()', this.ctx); - + if (!this.ctx) return; - this.scale = this.concernement.opened ? 5 : 1; - - if (this.scale !== this.oldScale) { - // 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.oldScale, 1 / this.oldScale) - // then scale again - Matter.Body.scale(this.body, this.scale, this.scale) - } - - - + this.pos = this.body.position; + // exterieur circle this.ctx.beginPath(); this.ctx.lineWidth = 0.5; @@ -256,8 +299,8 @@ export default { this.ctx.fillStyle = "#000"; this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y) this.ctx.fill(); - - this.oldScale = this.scale; + + }, } diff --git a/src/stores/concernements.js b/src/stores/concernements.js index be02351..a2c7a26 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -45,7 +45,7 @@ export const ConcernementsStore = defineStore({ }) }, openCloseConcernement (id, state) { - console.log('openCloseConcernement', id, state); + // console.log('openCloseConcernement', id, state); this.concernementsByID[id].opened = state; } }