got a better map-item opening
This commit is contained in:
parent
eaeb366ffb
commit
4a7f9282b5
22
package-lock.json
generated
22
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
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, scale, scale)
|
||||
// then scale again to new scale
|
||||
Matter.Body.scale(this.body, obj.s, obj.s)
|
||||
// record new scale
|
||||
this.scale = scale;
|
||||
}else{
|
||||
this.anim = null;
|
||||
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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user