#2140 implemented padding in concernement contour form

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
       });