better sailent point definition

src/components/ConcernementMapItem.vue

@@ -132,6 +132,84 @@ export default {
     }
   },
   methods: {
+    parsePoints (){
+      // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
+      for (let i = 0; i < this.entites.length; i++) {
+        let entite = this.entites[i]
+        // console.log('entite', entite);
+
+        this.entites[i].display = {
+          alpha: null,
+          ray: null
+        }
+        // RAYON
+        // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
+        // slope = (output_end - output_start) / (input_end - input_start)
+        // output = output_start + slope * (input - input_start)
+        // from range 0 -> 100 to range 0 -> this.ray
+        let init_max = 100
+        let slope = this.ray / init_max
+        this.entites[i].display.ray = slope * (init_max - entite.prise);
+        // if (this.concernement.id === 28) {
+        //   console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`);
+        // }
+        
+
+        // ANGLE
+        // -90 <= mm <= 90
+        if (entite.actuelfuture) {
+          // future en haut : 180 <= a <= 360
+          // from -90 -> 90 to range 180 -> 360
+          this.entites[i].display.alpha = entite.menacemaintien + 270
+        } else {
+          // actuel: en bas : O <= a <= 180
+          // from -90 -> 90 to range 180 -> 0
+          this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
+        }
+
+        // POSITION X Y (par rapport au centre du concernement)
+        this.entites[i].display.pos = {
+          x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
+          y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
+        }
+
+        this.entites_byid[entite.entite.id].display = this.entites[i].display;
+      }
+    },
+    getSalientPoints () {
+      // debugger
+      // console.log(this.entites);
+      let arc = 360/10;
+      // loop through arcs
+      // for (let i = 360/arc; i >= 0 ; i--) {
+      for (let i = 0; i <= 360/arc ; i++) {
+        // loop through entities to find the farest on the arc
+        let max_r = 0;
+        let farest = null;
+        for (let j = 0; j < this.entites.length; j++) {
+          let entite = this.entites[j];
+          if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) { // if entity is in arc
+            if (entite.display.ray > max_r) { //  && entite.display.ray > this.ray/2 // and farest from minimu
+              // if entity is farest from precedent one 
+              max_r = entite.display.ray;
+              // recalcul x & y to get a little padding between entite and contour by increasing ray
+              farest = {
+                alpha: entite.display.alpha,
+                ray: entite.display.ray,
+                pos: {
+                  x: (entite.display.ray + 3) * Math.cos(entite.display.alpha * (Math.PI/180)),
+                  y: (entite.display.ray + 3) * Math.sin(entite.display.alpha * (Math.PI/180))
+                }
+              };
+            }
+          }
+        }
+        if (farest) {
+          this.salientPoints.push(farest)
+        }
+      }
+      console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
+    },
     initCanvasMap (){
       // console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`);
       // record canvas and ctx for rendering (drawing)
@@ -143,6 +221,12 @@ export default {
       //
       this.initMatterBody()
     },
+    getRandomPos(){
+      return {
+        x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
+        y: this.ray/2 + Math.random()*(this.canvas.height - this.ray)
+      };
+    },
     initMatterBody (){
       
       // MATTER
@@ -752,11 +836,12 @@ export default {
         this.ctx.lineWidth = 1;
         this.ctx.strokeStyle = strokeStyle;
         this.ctx.fillStyle = fillStyle;
-        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)
+        let gap = 1;//1.15;
+        this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
         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[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap)
         }
-        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.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
         this.ctx.fill();
         this.ctx.stroke();
       }

src/components/MapConcernements.vue

@@ -115,10 +115,14 @@ export default {
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
-      Matter.Engine.update(this.engine, 1)
+      Matter.Engine.update(this.engine, 1);
+      // this.checkMouseHover();
       window.requestAnimationFrame(this.animate);
     },
     onMouseMove (e) {
+      this.checkMouseHover();
+    },
+    checkMouseHover(){
       // check item mouse over
       let query;
       if (this.opened) {