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,110 +275,115 @@ export default {
       if (this.tween) {
         this.tween.update();
       }
-    }
-  },
-  render() {
-    // console.log('render()', this.ctx);
-
-    if (!this.ctx) return;
+    },
+    onAfterEngineUpdate (event) {
+      this.draw()
+    },
+    draw() {
 
-    // if (this.opened) {
-    //   Matter.Body.setPosition(this.body, this.pos);
-    // }
+      if (!this.ctx) return;
 
-    this.pos = this.body.position;
-    
-    if (this.opened) {
-      // BOUSSOLE
-      // exterieur circle
-      this.ctx.beginPath();
-      this.ctx.lineWidth = 2;
-      this.ctx.strokeStyle = "#fff";
-      this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
-      // this.ctx.stroke();
+      this.pos = this.body.position;
 
-      // interieur circle
-      this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
-      // this.ctx.stroke();      
+      // 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
+      // );
 
-      // axes
-      // vertical
-      this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale);
-      this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale);
-      // horizontal
-      this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y);
-      this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y);
-      // this.ctx.stroke();
-      
-      // fleches
-      // haute
-      this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
-      this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
-      this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));      
-      // milieu
-      this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
-      this.ctx.lineTo(this.pos.x, this.pos.y);
-      this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale));
+      if (this.opened) {
+        // BOUSSOLE
+        // exterieur circle
+        this.ctx.beginPath();
+        this.ctx.lineWidth = 2;
+        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();
 
-      this.ctx.stroke();
+        // interieur circle
+        this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
+        // this.ctx.stroke();      
 
-      // MOINS - PLUS
-      this.ctx.beginPath();
-      this.ctx.lineWidth = 8;
-      this.ctx.strokeStyle = "#fff";
-      // PLUS
-      // horizontal
-      this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
-      this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
-      // vertical
-      this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale));
-      this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale));
-      
-      // MOINS
-      // horizontal
-      this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
-      this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
-      // vertical
+        // axes
+        // vertical
+        this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale);
+        this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale);
+        // horizontal
+        this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y);
+        this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y);
+        // this.ctx.stroke();
+        
+        // fleches
+        // haute
+        this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
+        this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
+        this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));      
+        // milieu
+        this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
+        this.ctx.lineTo(this.pos.x, this.pos.y);
+        this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale));
 
-      this.ctx.stroke();
-    }
+        this.ctx.stroke();
 
-    // contours
-    if (this.salientPoints.length > 3) {
+        // MOINS - PLUS
+        this.ctx.beginPath();
+        this.ctx.lineWidth = 8;
+        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);
+        this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
+        // vertical
+        this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale));
+        this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale));
+        
+        // MOINS
+        // horizontal
+        this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
+        this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
+        // vertical
 
-      this.ctx.beginPath();
-      this.ctx.lineWidth = 1;
-      this.ctx.strokeStyle = "#000";
-      this.ctx.fillStyle = "rgba(255,255,255,0.4)";
-      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)
+        this.ctx.stroke();
       }
-      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
-      this.ctx.fill();
-      this.ctx.stroke();
-    }
 
-    if (this.opened) {
-      // place all entities points
-      for (let i = 0; i < this.entites.length; i++) {
-        let entite = this.entites[i];
-        // console.log('entite', entite);
+      // contours
+      if (this.salientPoints.length > 3) {
+
         this.ctx.beginPath();
-        this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
-        this.ctx.fillStyle = "#000";
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeStyle = "#000";
+        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)
+        }
+        this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
         this.ctx.fill();
-      } 
-    }
+        this.ctx.stroke();
+      }
 
-    // concernement id @center
-    this.ctx.beginPath();
-    // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
-    this.ctx.fillStyle = "#000";
-    this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
-    this.ctx.fill();
-    
-    
+      if (this.opened) {
+        // place all entities points
+        for (let i = 0; i < this.entites.length; i++) {
+          let entite = this.entites[i];
+          // console.log('entite', entite);
+          this.ctx.beginPath();
+          this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
+          this.ctx.fillStyle = "#000";
+          this.ctx.fill();
+        } 
+      }
+
+      // concernement id @center
+      this.ctx.beginPath();
+      // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
+      this.ctx.fillStyle = "#000";
+      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: {
   // },