|
|
@@ -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) {
|
