better sailent point definition

package-lock.json

@@ -16,6 +16,7 @@
         "matter-attractors": "^0.1.6",
         "matter-js": "^0.19.0",
         "pinia": "^2.0.21",
+        "poly-decomp": "^0.3.0",
         "vue": "^3.2.38",
         "vue-router": "^4.1.5"
       },
@@ -32,7 +33,8 @@
         "prettier": "^2.7.1",
         "querystring-es3": "^0.2.1",
         "sass": "^1.57.1",
-        "vite": "^3.0.9"
+        "vite": "^3.0.9",
+        "vite-require": "^0.2.3"
       }
     },
     "node_modules/@babel/parser": {
@@ -694,6 +696,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
+      "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -1298,6 +1306,34 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1770,6 +1806,28 @@
       "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.19.0.tgz",
       "integrity": "sha512-v2huwvQGOHTGOkMqtHd2hercCG3f6QAObTisPPHg8TZqq2lz7eIY/5i/5YUV8Ibf3mEioFEmwibcPUF2/fnKKQ=="
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2015,6 +2073,14 @@
         }
       }
     },
+    "node_modules/poly-decomp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
+      "integrity": "sha512-hWeBxGzPYiybmI4548Fca7Up/0k1qS5+79cVHI9+H33dKya5YNb9hxl0ZnDaDgvrZSuYFBhkCK/HOnqN7gefkQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -2479,6 +2545,27 @@
         }
       }
     },
+    "node_modules/vite-plugin-dynamic-import": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.4.0.tgz",
+      "integrity": "sha512-OBWeCGyWE4iIwCUfx3RK8XwT1BjPAJNeMQmdO5md5Gq8PD8gLMCfUnuEiX9dIQDL9Gdvao1GNRqZwfcpwWDTNw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12"
+      }
+    },
+    "node_modules/vite-require": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vite-require/-/vite-require-0.2.3.tgz",
+      "integrity": "sha512-Lpeg5mxXiLAVrylKK9FMF8d6yxLBm6YtHXmtWpJSDSWBdl12tBsMGHOBC/fsLzATj+Zp9FHjqwzE1JayOPi9dQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "vite-plugin-dynamic-import": "^1.1.1"
+      }
+    },
     "node_modules/vue": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
@@ -3082,6 +3169,12 @@
         "esutils": "^2.0.2"
       }
     },
+    "es-module-lexer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
+      "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -3427,6 +3520,30 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3781,6 +3898,22 @@
       "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.19.0.tgz",
       "integrity": "sha512-v2huwvQGOHTGOkMqtHd2hercCG3f6QAObTisPPHg8TZqq2lz7eIY/5i/5YUV8Ibf3mEioFEmwibcPUF2/fnKKQ=="
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3939,6 +4072,11 @@
         }
       }
     },
+    "poly-decomp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
+      "integrity": "sha512-hWeBxGzPYiybmI4548Fca7Up/0k1qS5+79cVHI9+H33dKya5YNb9hxl0ZnDaDgvrZSuYFBhkCK/HOnqN7gefkQ=="
+    },
     "postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -4213,6 +4351,27 @@
         "rollup": "^2.79.1"
       }
     },
+    "vite-plugin-dynamic-import": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.4.0.tgz",
+      "integrity": "sha512-OBWeCGyWE4iIwCUfx3RK8XwT1BjPAJNeMQmdO5md5Gq8PD8gLMCfUnuEiX9dIQDL9Gdvao1GNRqZwfcpwWDTNw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12"
+      }
+    },
+    "vite-require": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vite-require/-/vite-require-0.2.3.tgz",
+      "integrity": "sha512-Lpeg5mxXiLAVrylKK9FMF8d6yxLBm6YtHXmtWpJSDSWBdl12tBsMGHOBC/fsLzATj+Zp9FHjqwzE1JayOPi9dQ==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.11",
+        "vite-plugin-dynamic-import": "^1.1.1"
+      }
+    },
     "vue": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",

package.json

@@ -16,6 +16,7 @@
     "matter-attractors": "^0.1.6",
     "matter-js": "^0.19.0",
     "pinia": "^2.0.21",
+    "poly-decomp": "^0.3.0",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5"
   },
@@ -32,6 +33,7 @@
     "prettier": "^2.7.1",
     "querystring-es3": "^0.2.1",
     "sass": "^1.57.1",
-    "vite": "^3.0.9"
+    "vite": "^3.0.9",
+    "vite-require": "^0.2.3"
   }
 }

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

vite.config.js

@@ -3,10 +3,11 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import graphql from '@rollup/plugin-graphql';
+import { viteRequire } from 'vite-require'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), graphql()],
+  plugins: [vue(), graphql(), viteRequire()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),