reactivated background, better opening animation

src/components/ConcernementMapItem.vue

@@ -43,6 +43,7 @@ export default {
       time: 0,
       salientPoints: [],
       scale: 1,
+      opacity: 0,
       // anim: null,
       tween: null,
       // matter
@@ -144,7 +145,7 @@ export default {
 
       // 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, "afterUpdate", this.onAfterEngineUpdate);
     },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@@ -220,11 +221,12 @@ export default {
       }
       if (open) {
         // opening tweening
-        this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y})
+        this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
           .to({
             s: 7,
             x: (this.canvas.width - 450) / 2,
-            y: this.canvas.height / 2
+            y: this.canvas.height / 2,
+            o: 0.8
           }, 800)
           .onUpdate((obj) => {
             // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
@@ -234,6 +236,7 @@ export default {
             Matter.Body.scale(this.body, obj.s, obj.s)
             // record new scale
             this.scale = obj.s;
+            this.opacity = obj.o;
             
             Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y});
             this.pos = {x:obj.x, y:obj.y};
@@ -253,8 +256,8 @@ export default {
         if(this.constraint){
           Matter.Composite.remove(this.matterEngine.world, this.constraint);
         }
-        this.tween = new Tween.Tween({s: this.scale})
-          .to({s: 1}, 500)
+        this.tween = new Tween.Tween({s: this.scale, o: 1})
+          .to({s: 1, o: 0}, 500)
           .onUpdate((obj) => {
             // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
             // revert to the original size (by reverting the previous scale)
@@ -263,6 +266,7 @@ export default {
             Matter.Body.scale(this.body, obj.s, obj.s)
             // record new scale
             this.scale = obj.s;
+            this.opacity = obj.o;
           });
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();
@@ -271,25 +275,27 @@ export default {
       if (this.tween) {
         this.tween.update();
       }
-    }
     },
-  render() {
-    // console.log('render()', this.ctx);
+    onAfterEngineUpdate (event) {
+      this.draw()
+    },
+    draw() {
 
       if (!this.ctx) return;
 
-    // if (this.opened) {
-    //   Matter.Body.setPosition(this.body, this.pos);
-    // }
-
       this.pos = this.body.position;
 
+      // this.ctx.clearRect(
+      //   this.pos.x - this.ray*this.scale, this.pos.y - this.ray*this.scale,
+      //   this.ray*this.scale*2, this.ray*this.scale*2
+      // );
+
       if (this.opened) {
         // BOUSSOLE
         // exterieur circle
         this.ctx.beginPath();
         this.ctx.lineWidth = 2;
-      this.ctx.strokeStyle = "#fff";
+        this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
         this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
         // this.ctx.stroke();
 
@@ -321,7 +327,7 @@ export default {
         // MOINS - PLUS
         this.ctx.beginPath();
         this.ctx.lineWidth = 8;
-      this.ctx.strokeStyle = "#fff";
+        this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;;
         // PLUS
         // horizontal
         this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
@@ -345,7 +351,7 @@ export default {
         this.ctx.beginPath();
         this.ctx.lineWidth = 1;
         this.ctx.strokeStyle = "#000";
-      this.ctx.fillStyle = "rgba(255,255,255,0.4)";
+        this.ctx.fillStyle = "rgba(255,255,255,0.8)";
         this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
         for (let j = 1; j < this.salientPoints.length; j++) {
           this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15)
@@ -374,7 +380,10 @@ export default {
       this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
       this.ctx.fill();
 
-    
+    }
+  },
+  render() {
+    // console.log('render()', this.ctx);
   },
 }
 

src/components/MapBackground.vue

@@ -10,8 +10,8 @@ export default {
     }
   },
   mounted() {
-    // this.initGradients()
-    // this.initTrame()
+    this.initGradients()
+    this.initTrame()
   },
   // computed: {
   // },