From d9690ee4c116e655d65ba3debb9ef105dae679e6 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 26 May 2023 00:10:10 +0200 Subject: [PATCH] better sailent point definition --- package-lock.json | 161 ++++++++++++++++++++++++- package.json | 4 +- src/components/ConcernementMapItem.vue | 91 +++++++++++++- src/components/MapConcernements.vue | 6 +- vite.config.js | 3 +- 5 files changed, 258 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc5dbd1..ae633bb 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f639596..10114d7 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index e166603..7f17d73 100644 --- a/src/components/ConcernementMapItem.vue +++ b/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(); } diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index fa78859..8347692 100644 --- a/src/components/MapConcernements.vue +++ b/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) { diff --git a/vite.config.js b/vite.config.js index 1018248..97befc4 100644 --- a/vite.config.js +++ b/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)),