better sailent point definition

src/components/ConcernementMapItem.vue

@@ -21,6 +21,7 @@
 import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
+// import polydecomp from "poly-decomp";
 
 // import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
 import Tween from "@tweenjs/tween.js";
@@ -137,7 +138,7 @@ export default {
       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
@@ -245,6 +246,44 @@ export default {
             id: this.concernement.id,
           })
         ];
+
+        // // Create parts of the body : contours
+        // if (this.salientPoints.length > 2) {
+        //   var decomp = require('poly-decomp');
+        //   // window.decomp = decomp;
+        //   // debugger;
+        //   Matter.Common.setDecomp(decomp);
+        //   // Matter.Common.setDecomp(require('poly-decomp'));
+          
+        //   // let contourpoints = [];
+        //   // for (let j = 0; j < this.salientPoints.length; j++) {
+        //   //   contourpoints.push(this.salientPoints[j].pos);
+        //   // }
+        //   let contourpoints = this.salientPoints.map(function(point) {
+        //     return point.pos; //[point.pos.x, point.pos.y]
+        //   });
+        //   // console.log('contourpoints', contourpoints);
+        //   // let contourpoints = Matter.Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
+          
+        //   // let ccw_contourpoints = decomp.makeCCW(contourpoints);
+        //   // console.log('ccw_contourpoints', ccw_contourpoints);
+        //   let vertices_contour = Matter.Vertices.create(contourpoints);
+        //   // console.log('vertices_contour', vertices_contour);
+        //   // let vertices_contour_bounds = Matter.Bounds.create(vertices_contour);
+        //   // console.log('vertices_contour_bounds', vertices_contour_bounds);
+        //   // debugger;
+        //   let body_contour = Matter.Bodies.fromVertices(0, 0, vertices_contour, {
+        //     mass: 0,
+        //     item_type: 'concernement-contours',
+        //     id: this.concernement.id,
+        //   }, false, 0, 0, 0);
+        //   // debugger;
+        //   // console.log('body_contour.bounds', body_contour.bounds);
+        //   // // https://github.com/liabru/matter-js/issues/186
+        //   // Matter.Body.translate(body_contour, Matter.Vector.sub(vertices_contour_bounds.min, body_contour.bounds.min))
+        //   this.body_parts.push(body_contour);
+        // }
+
         // Create parts of the body : entities
         for (let i = 0; i < this.entites.length; i++) {
           // parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, {
@@ -259,6 +298,7 @@ export default {
             isSensor: true
           }))
         }
+        
         // Create parts of the body : besoins and responses
         this.createBesoinsBodyParts();
         
@@ -341,82 +381,6 @@ export default {
         }
       }
     },
-    getRandomPos(){
-      return {
-        x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
-        y: this.ray/2 + Math.random()*(this.canvas.height - this.ray)
-      };
-    },
-    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 de l'entite)
-        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 = 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;
-              farest = entite;
-            }
-          }
-        }
-        if (farest) {
-          this.salientPoints.push(farest.display)
-        }
-      }
-      // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
-    },
     // onBeforeEngineUpdate (event) {
     //   if (this.opened) {
     //     // Matter.Body.setPosition(this.body, this.pos);
@@ -844,6 +808,38 @@ export default {
         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();
+
+        // // test draw contour from body part
+        // for (let i = 0; i < this.body.parts.length; i++) {
+        //   if (this.body.parts[i].item_type === 'concernement-contours'){
+        //     // console.log('concernement contours', this.body.parts[i]);
+        //     this.ctx.beginPath();
+        //     this.ctx.lineWidth = 1;
+        //     this.ctx.strokeStyle = "#F00";
+        //     this.ctx.moveTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
+        //     for (let j = 1; j < this.body.parts[i].vertices.length; j++) {
+        //       this.ctx.lineTo(this.body.parts[i].vertices[j].x, this.body.parts[i].vertices[j].y);
+        //     }
+        //     this.ctx.lineTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
+        //     this.ctx.stroke();
+          
+        //       // for (let k = 0; k < this.body.parts[i].parts.length; k++) {
+        //     //   let part = this.body.parts[i];
+        //     //   let partpart = part.parts[k];
+        //     //   debugger;
+        //     //   this.ctx.beginPath();
+        //     //   this.ctx.lineWidth = 1;
+        //     //   this.ctx.strokeStyle = "#F00";
+        //     //   this.ctx.moveTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
+        //     //   for (let j = 1; j < this.body.parts[i].parts[k].vertices.length; j++) {
+        //     //     this.ctx.lineTo(this.body.parts[i].parts[k].vertices[j].x, this.body.parts[i].parts[k].vertices[j].y);
+        //     //   }
+        //     //   this.ctx.lineTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
+        //     //   this.ctx.stroke();
+              
+        //     // }
+        //   } 
+        // }
       }
     },
     isFocused(){

src/components/MapConcernements.vue

@@ -143,6 +143,7 @@ export default {
       if (query && query.length) {
         // if we have a results
         for (let body of query) {
+          console.log('mouse hover body.item_type', body.item_type);
           if (!this.opened // if no concernement is opened
             && body.item_type === "concernement" // if it is a concernement
             && typeof this.concernementsByID[body.id] !== "undefined"  // if the id exists

src/main.js

@@ -8,6 +8,10 @@ import '@csstools/normalize.css';
 import '@mdi/font/css/materialdesignicons.css'
 import './assets/main.scss'
 
+// var decomp = require('poly-decomp');
+// window.decomp = decomp;
+          
+
 const app = createApp(App)
 // https://vuejs.org/guide/components/provide-inject.html#provide
 app.config.unwrapInjectedRef = true;