diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 7f17d73..2b9a612 100644 --- a/src/components/ConcernementMapItem.vue +++ b/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(){ diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 8347692..d1cf95c 100644 --- a/src/components/MapConcernements.vue +++ b/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 diff --git a/src/main.js b/src/main.js index 737a330..15fc5f8 100644 --- a/src/main.js +++ b/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;