diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 1536cd6..fe7ba27 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -86,19 +86,25 @@ export default { // // console.log("we have an entity"); // this.opened_entite_id = parseInt(this.$route.params.eid); // } + + // disable concernement if less than 3 entite + if(this.entites.length < 3){ + this.hideShowConcernement(this.concernement.id, false); + } else{ + this.parsePoints() + // this.getSalientPoints() + this.getJarvisEnvelopeConvexe() - this.parsePoints() - // this.getSalientPoints() - this.getJarvisEnvelopeConvexe() - - if (this.salientPoints.length > 3) { // do not build item if it doesn't get enougth salient points if (this.canvasMap) { this.initCanvasMap() } - } else { - this.hideShowConcernement(this.concernement.id, false); } + // if (this.salientPoints.length > 3) { // do not build item if it doesn't get enougth salient points + // } else { + // this.hideShowConcernement(this.concernement.id, false); + // } + }, // mounted() { // console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas); @@ -196,7 +202,7 @@ export default { this.entites_byid[entite.entite.id].display = this.entites[i].display; } }, - getSalientPoints () { + getSalientPoints_OLD() { // debugger // console.log(this.entites); let arc = 360/30; @@ -231,10 +237,11 @@ export default { // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints); }, getJarvisEnvelopeConvexe(){ + console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length); // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/ // the most left point - let l = 0, min_x = null; - for (let i = 1; i < this.entites.length; i++) { + let l, min_x = null; + for (let i = 0; i < this.entites.length; i++) { let entite = this.entites[i]; let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)); if(!min_x || min_x > x){ @@ -244,6 +251,8 @@ export default { } let p = l, q; do { + console.log(`do while ${this.id}`, p); + // Add current point to result let entite = this.entites[p]; let farest = { alpha: entite.display.alpha, @@ -255,6 +264,13 @@ export default { }; this.salientPoints.push(farest); + + // Search for a point 'q' such that + // orientation(p, q, x) is counterclockwise + // for all points 'x'. The idea is to keep + // track of last visited most counterclock- + // wise point in q. If any point 'i' is more + // counterclock-wise than q, then update q. q = (p + 1) % this.entites.length; for (let i = 0; i < this.entites.length; i++) { let p_x = (this.entites[p].display.ray + 3) * Math.cos(this.entites[p].display.alpha * (Math.PI/180)); @@ -265,20 +281,18 @@ export default { let q_y = (this.entites[q].display.ray + 3) * Math.sin(this.entites[q].display.alpha * (Math.PI/180)); let val = (i_y - p_y) * (q_x - i_x) - (i_x - p_x) * (q_y - i_y); - + + // If i is more counterclockwise than current q, then update q if (val > 0){ q = i; } - } // Now q is the most counterclockwise with // respect to p. Set p as q for next iteration, // so that q is added to result 'hull' p = q; - } while (p != l) { - - } + } while (p != l); }, initCanvasMap (){ @@ -613,21 +627,64 @@ export default { }, setPaperContour(){ - let gap = 1;//1.15; - let segments = [ - [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++) { - segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap]) + let getExentricPoint = (b,a,c) => { + // get ac vecteur + const ac = { x: c.x - a.x, y: c.y - a.y } + // get ac longueur ac + const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); + // get ab vecteur + const ab = { x: b.x - a.x, y: b.y - a.y } + // get ab longeur + const lab = Math.sqrt(Math.pow(ab.x, 2) + Math.pow(ab.y, 2)); + // get unit vecteur ab + const vab = { x: ab.x/lab, y: ab.y/lab } + // get an vecteur + const an = { x: vab.x*lac, y: vab.y*lac } + // get n point + const n = { x: a.x + an.x, y: a.y+an.y } + // get nc midle point + const m = { x: (c.x + n.x)/2, y: (c.y + n.y)/2 } + // get ma vecteur + const ma = { x:a.x - m.x, y: a.y - m.y } + // get longeur m->a + const lma = Math.sqrt(Math.pow(ma.x, 2)+Math.pow(ma.y, 2)) + // get ma vecteur unitaire + const vma = { x: ma.x/lma, y: ma.y / lma } + const pad = 4; + return [ + this.pos.x+(a.x+vma.x*pad)*this.scale, + this.pos.y+(a.y+vma.y*pad)*this.scale + ] + } - segments.push([this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]) + const first_point = getExentricPoint( + this.salientPoints[this.salientPoints.length-1].pos, + this.salientPoints[0].pos, + this.salientPoints[1].pos + ); + let segments = [first_point]; + for (let j = 1; j < this.salientPoints.length-1; j++) { + // segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap]) + segments.push(getExentricPoint( + this.salientPoints[j-1].pos, + this.salientPoints[j].pos, + this.salientPoints[j+1].pos, + )) + } + const last_point = getExentricPoint( + this.salientPoints[this.salientPoints.length-2].pos, + this.salientPoints[this.salientPoints.length-1].pos, + this.salientPoints[0].pos + ); + segments.push(last_point) + segments.push(first_point) return new paper.Path({ name: 'contours', segments: segments, + fillColor: 'rgba(255,255,255,0.8)', // strokeColor: '#000', // strokeWidth: 1, - fillColor: 'rgba(255,255,255,0.8)', pivot: new paper.Point(this.pos), cid: this.id });