drawing the contours of the contours in proximités

src/components/ConcernementMapItem.vue

@@ -97,7 +97,7 @@ export default {
       // 
       this.parseEntityPointsValues()
       // this.getSalientPoints()
-      this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexe()
+      this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.entites)
 
       // define init position of the item
       this.pos = this.getRandomPos();
@@ -305,10 +305,8 @@ export default {
       }
       // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
     },
-    getJarvisEnvelopeConvexe(){
+    getJarvisEnvelopeConvexeEntites(entites){
       let sailentEntites = [];
-      let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
-      // console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
       // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
       // find the most left point
       let l, min_x = null;
@@ -328,19 +326,6 @@ export default {
         // console.log(`do while ${this.id}`, p);
         // Add current point to result
         let entite = entites[p];
-        // let farest = {
-        //   alpha: entite.display.alpha,
-        //   ray: entite.display.ray,
-        //   pos: {
-        //     x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
-        //     y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
-        //   }
-        // };
-        // this.salientPoints.push(farest);
-        // sailentEntites.push({
-        //   alpha: entite.display.alpha,
-        //   ray: entite.display.ray
-        // });
         sailentEntites.push(entite);
 
         // Search for a point 'q' such that 
@@ -587,7 +572,7 @@ export default {
     resetPaperActiveRevision(){
       console.log('resetPaperActiveRevision');
       
-      this.getJarvisEnvelopeConvexe();
+      this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.concernement.revision_id].entites);
       
       // remove contours if already exists
       if (this.paper_main_object.children.contours) {
@@ -647,10 +632,6 @@ export default {
         // console.log(`vma x:${vma.x}, y:${vma.y}`);
         const pad = 4; // exterior padding
         // the final padded point
-        // const pa  = [
-        //   this.pos.x+(a.x+vma.x*pad)*this.scale,
-        //   this.pos.y+(a.y+vma.y*pad)*this.scale
-        // ]
         const pa  = [
           a.x+vma.x*pad,
           a.y+vma.y*pad
@@ -824,6 +805,7 @@ export default {
       return g;
     },
     setPaperEntitesProximiteReferences(){
+      // console.log('_ _ _ _ setPaperEntitesProximiteReferences')
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites_proximites_references'
@@ -841,6 +823,7 @@ export default {
             x: this.pos.x + entite.display.pos.x * this.scale,
             y: this.pos.y + entite.display.pos.y * this.scale
           }
+          // console.log(`entite_pos x:${entite_pos.x}, y:${entite_pos.y}`);
           // use paper symbol
           let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
           instance.name = 'entite';
@@ -860,24 +843,24 @@ export default {
             name: 'ref_entite_proximite'
           });
 
+          let allEntiteRefConcernementContourEntites = [];
+
           let beta = 360 / entite.entite.proximite.length;
           let ray = 5;
           let e=0;
           entite.entite.proximite.forEach(entite_ref => {
-            console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]);
+            // console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]);
             
             // create the entite ref paper point
             let ref_instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
             ref_instance.name = 'entite_ref';
 
-            // x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
-            // y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
-
             let entite_ref_pos = {
               x: entite_pos.x + ray * Math.cos((beta*e) * (Math.PI/180)),
               y: entite_pos.y + ray * Math.sin((beta*e) * (Math.PI/180)),
             }
-
+            // console.log(`entite_ref_pos x:${entite_ref_pos.x}, y:${entite_ref_pos.y}`);
+          
             ref_instance.position = new paper.Point(entite_ref_pos);
             // ref_instance.scale(this.scale);
             ref_instance.scale(this.scale*0.75);
@@ -887,20 +870,38 @@ export default {
             ref_instance.is_symbol_instance = true;
             ref_g.addChild(ref_instance)
 
-
+            // create the original concernement contours arround the entite_ref
             let ref_cid = this.allEntitesById[entite_ref.id].cid;
-            console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites);
+            // console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites);
             let ref_concernement = this.concernementsByID[ref_cid];
             
+            // define the right scale
+            let scale = 0.05;
+
             let points = [];
             ref_concernement.sailentEntites.forEach(ent => {
               points.push({
                 x: (ent.display.ray) * Math.cos(ent.display.alpha * (Math.PI/180)),
                 y: (ent.display.ray) * Math.sin(ent.display.alpha * (Math.PI/180))
               })
+              
+              // - - //
+              // concat all the contours points for general contours arround all contours :/ :( (that's a very clear description)
+              let p = {
+                x: entite_ref_pos.x - entite_pos.x + (ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)))*scale,
+                y: entite_ref_pos.y - entite_pos.y + (ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180)))*scale
+              }
+              console.log(`p x:${p.x}, y:${p.y}`);
+                
+              allEntiteRefConcernementContourEntites.push({
+                display:{
+                  ray: Math.sqrt(Math.pow(p.x,2)+Math.pow(p.y,2)),
+                  alpha: parseFloat(Math.atan2(p.y,p.x) * (180/Math.PI)).toFixed(2)
+                }
+              })
+              // - - //
             })
-            // define the right scale
-            let scale = 0.05;
+            
             // convert points to rouded and padded segments props
             let segments = this.getPaddedRoundedSegments(points, scale)
             // create "real" Paper Segments from previous segments props
@@ -921,18 +922,74 @@ export default {
               strokeColor: '#fff',
               strokeWidth: 1,
               pivot: new paper.Point(this.pos),
-              cid: this.cid
+              cid: ref_concernement.id
             });
             ref_g.addChild(contrs);
-
+            contrs.sendToBack();
 
             e++;
+          }); // end of loop on proximite for each main entite
+          
+          // // debug
+          // allEntiteRefConcernementContourEntites.forEach(e => {
+          //   let p = paper.Path.Circle({
+          //     pivot: new paper.Point({x:0,y:0}),
+          //     center: [
+          //       entite_pos.x + (e.display.ray * Math.cos(e.display.alpha * (Math.PI/180))),
+          //       entite_pos.y + (e.display.ray * Math.sin(e.display.alpha * (Math.PI/180)))
+          //     ],
+          //     radius: 0.3,
+          //     fillColor: '#00F',
+          //     strokeColor: 'rgba(0,0,255,0.05)',
+          //     strokeWidth:2
+          //   })
+          //   ref_g.addChild(p);
+          // })
+
+          // general contour arround proximité
+          // console.log('allEntiteRefConcernementContourEntites', allEntiteRefConcernementContourEntites);
+          let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(allEntiteRefConcernementContourEntites);
+          // console.log('genContoursEntite', genContoursEntite);
+          let points = [];
+          genContoursEntite.forEach(ent => {
+            points.push({
+              x: ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)),
+              y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180))
+            })
+          })
+          console.log('points', points);
+          let scale = 0.8;
+          // convert points to rouded and padded segments props
+          let segments = this.getPaddedRoundedSegments(points, scale)
+          // create "real" Paper Segments from previous segments props
+          let paper_segments = [];
+          segments.forEach(seg => {
+            paper_segments.push(new paper.Segment({
+              point: [entite_pos.x+seg.point[0]*scale, entite_pos.y+seg.point[1]*scale],
+              // point: [seg.point[0], seg.point[1]],
+              handleIn: seg.handleIn,
+              handleout: seg.handleOut
+            }))
           });
+          // create the paper path with previous segments
+          const genContrs = new paper.Path({
+            name: 'gen_contours',
+            segments: paper_segments,
+            fillColor: 'rgba(255,255,255,0.4)',
+            // selected: true,
+            strokeColor: '#fff',
+            strokeWidth: 1,
+            pivot: new paper.Point(this.pos),
+            // cid: this.cid
+          });
+          ref_g.addChild(genContrs);
+          genContrs.sendToBack();
+
           g.addChild(ref_g);
-        }
+          ref_g.sendToBack();
+        } // end of loop on entite wich have proximite
       }
       return g;
-      
     },
     setPaperAgissantes(){
       console.log('setPaperAgissantes');