display concernements with less than 3 entites

src/components/ConcernementMapItem.vue

@@ -103,7 +103,8 @@ export default {
     // disable concernement if less than 3 entite
     if(this.entites.length < 3){
       this.hideShowConcernement(this.concernement.id, false);
-    } else{
+    } 
+    // else{
       // record canvas and ctx for rendering (drawing)
       this.canvas = this.canvasMap.canvas
       this.ctx = this.canvasMap.ctx
@@ -112,7 +113,9 @@ export default {
       this.ray = this.map_item_ray;
       // console.log(`this.ray: ${this.ray}`);
       // 
-      this.parseEntityPointsValues()
+      this.parseEntityPointsValues();
+
+
       // this.getSalientPoints()
       this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.entites)
 
@@ -132,7 +135,7 @@ export default {
           this.handleMapitemVisibility(false);
         }
       }
-    }
+    // }
 
     // this.setConcernementMapItem(this.cid, this);
     // this.setConcernementScale(this.cid, this.scale);
@@ -430,6 +433,7 @@ export default {
         }
       }
       this.concernement.parsedEntites = true;
+
     },
     getSalientPoints_OLD() {
       // debugger
@@ -799,23 +803,25 @@ export default {
       // then scale again to new size
       this.paper_main_object.scale(this.details_zoom_scale);
       // resize entites (dim them while we zoomin)
-      this.paper_main_object.children['entites'].children.forEach((child) => {
-        if(child.name === 'entite'){
-          // revert to the original size (by reverting the previous scale)
-          child.scale(1 / prev_entite_s);
-          // then scale again to new size
-          child.scale(1 / this.details_zoom_scale);
-        }else if(child.name === 'entites_labels'){
-          child.opacity = -2 + this.detailsZoomValue;
-          child.children.forEach((label) => {
+      if(this.paper_main_object.children){
+        this.paper_main_object.children['entites'].children.forEach((child) => {
+          if(child.name === 'entite'){
             // revert to the original size (by reverting the previous scale)
-            label.scale(1 / prev_entite_s);
+            child.scale(1 / prev_entite_s);
             // then scale again to new size
-            label.scale(1 / this.details_zoom_scale);
-            // label.children['label_txt'].fontSize = 4 / this.detailsZoomValue;
-          })
-        }
-      });
+            child.scale(1 / this.details_zoom_scale);
+          }else if(child.name === 'entites_labels'){
+            child.opacity = -2 + this.detailsZoomValue;
+            child.children.forEach((label) => {
+              // revert to the original size (by reverting the previous scale)
+              label.scale(1 / prev_entite_s);
+              // then scale again to new size
+              label.scale(1 / this.details_zoom_scale);
+              // label.children['label_txt'].fontSize = 4 / this.detailsZoomValue;
+            })
+          }
+        });
+      }
 
       // allow to go through walls if zoomed in
       if (this.detailsZoomValue > 1) {
@@ -875,7 +881,7 @@ export default {
         this.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.active_revision].entites);
         
         // remove contours if already exists
-        if (this.paper_main_object.children.contours) {
+        if (this.paper_main_object.children && this.paper_main_object.children.contours) {
           this.paper_main_object.children.contours.remove();
         }
         // redraw contours
@@ -921,8 +927,8 @@ export default {
       }
     },
     getPaddedRoundedSegments(points, scale){
-      // console.log(`setPaperContour ${this.concernement.id}`);
-      let getSegmentProps = (b,a,c,d) => {
+      console.log(`setPaperContour ${this.concernement.id}, points`, points);
+      let getSegmentProps = (b,a,c) => {
         const ac  = { x: c.x - a.x, y: c.y - a.y } // get ac vecteur
         const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); // get ac longueur ac
         const ab  = { x: b.x - a.x, y: b.y - a.y } // get ab vecteur
@@ -966,11 +972,11 @@ export default {
       );
       let segments = [first_point]; 
       for (let j = 1; j < points.length-1; j++) {
-          segments.push(getSegmentProps(
-            points[j-1],
-            points[j],
-            points[j+1]
-          ))
+        segments.push(getSegmentProps(
+          points[j-1],
+          points[j],
+          points[j+1]
+        ))
       }
       const last_point = getSegmentProps(
         points[points.length-2],
@@ -985,38 +991,57 @@ export default {
     setPaperContour(){
       // console.log('setPaperContour, this.sailentEntites', this.sailentEntites);
       // convert sailent entites to x,y points
-      let points = [];
-      this.sailentEntites.forEach(entite => {
-        points.push({
-          x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
-          y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
+      if (this.sailentEntites.length < 3) {
+        // if we have less than 3 entities, draw a circle
+        let circle = new paper.Path.Circle({
+          name: 'contours',
+          center: this.pos,
+          radius: this.ray/3,
+          fillColor: 'rgba(255,255,255,0.4)',
+          // selected: true,
+          strokeColor: '#fff',
+          strokeWidth: 1,
+          pivot: new paper.Point(this.pos),
+          // scale: this.details_zoom_scale,
+          cid: this.cid,
         })
-      })
-      // convert points to rouded and padded segments props
-      let segments = this.getPaddedRoundedSegments(points, this.scale)
-      // create "real" Paper Segments from previous segments props
-      let paper_segments = [];
-      segments.forEach(seg => {
-        paper_segments.push(new paper.Segment({
-          point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale],
-          handleIn: seg.handleIn,
-          handleout: seg.handleOut
-        }))
-      });
-      // create the paper path with previous segments
-      const contrs = new paper.Path({
-        name: 'contours',
-        segments: paper_segments,
-        fillColor: 'rgba(255,255,255,0.4)',
-        // selected: true,
-        strokeColor: '#fff',
-        strokeWidth: 1,
-        pivot: new paper.Point(this.pos),
-        // scale: this.details_zoom_scale,
-        cid: this.cid,
-      });
-      // return the paper path
-      return contrs;
+        return circle;
+      } else {
+        // if we have more than 3 entities, draw normal contour
+        let points = [];
+        this.sailentEntites.forEach(entite => {
+          points.push({
+            x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
+            y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
+          })
+        })
+        // convert points to rouded and padded segments props
+        let segments = this.getPaddedRoundedSegments(points, this.scale)
+        // create "real" Paper Segments from previous segments props
+        let paper_segments = [];
+        segments.forEach(seg => {
+          paper_segments.push(new paper.Segment({
+            point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale],
+            handleIn: seg.handleIn,
+            handleout: seg.handleOut
+          }))
+        });
+        // create the paper path with previous segments
+        let contrs = new paper.Path({
+          name: 'contours',
+          segments: paper_segments,
+          fillColor: 'rgba(255,255,255,0.4)',
+          // selected: true,
+          strokeColor: '#fff',
+          strokeWidth: 1,
+          pivot: new paper.Point(this.pos),
+          // scale: this.details_zoom_scale,
+          cid: this.cid,
+        });
+        // return the paper path
+        return contrs;
+      }
+      
     },
     setPaperEntites(){
       let g = new paper.Group({