fixed concernements display on canvas

src/App.vue

@@ -49,15 +49,12 @@ export default {
   </header>
 
   <div id="main-content">
-    <MapConcernements v-if="isloggedin">
+    <MapConcernements>
       <ConcernementMapItem
         v-for="concernement in concernements"
         :key="concernement.id"
         :concernement="concernement"
       />
-      <!-- <ConcernementMapItem
-        :concernement="concernements[0]"
-      /> -->
     </MapConcernements>
     <div id="content" class="row">
       <RouterView />

src/components/ConcernementMapItem.vue

@@ -30,6 +30,9 @@ export default {
     this.entites = this.concernement.entites
     this.parsePoints()
     this.getSalientPoints()
+    if (this.canvasMap) {
+      this.initCanvasMap()
+    }
   },
   watch: {
     // canvasMap (n, o) {
@@ -37,19 +40,25 @@ export default {
     // }
     canvasMap: {
       handler (n, o){
-        // console.log("concernementItem watch canvasMap.ctx", o, n);
+        console.log("concernementItem watch canvasMap.ctx", o, n);
-        this.canvas = this.canvasMap.canvas
+        if (!this.canvas) {
-        this.ctx = this.canvasMap.ctx
+          this.initCanvasMap()
-        this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray)
+        }
-        this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray)
-        // listen for animate event dispatched from parent
-        this.canvas.addEventListener('animate', this.animate)
       },
       deep: true
     } 
   },
   methods: {
+    initCanvasMap (){
+      this.canvas = this.canvasMap.canvas
+      this.ctx = this.canvasMap.ctx
+      this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray)
+      this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray)
+      // listen for animate event dispatched from parent
+      this.canvas.addEventListener('animate', this.animate)
+    },
     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);
@@ -88,7 +97,7 @@ export default {
     getSalientPoints () {
       // debugger
       // console.log(this.entites);
-      let arc = 60;
+      let arc = 360/12;
       // loop through arcs
       for (let i = 0; i <= 360/arc; i++) {
         // loop through entities to find the farest on the arc
@@ -109,7 +118,7 @@ export default {
           this.salientPoints.push(farest.display)
         }
       }
-      // console.log('this.salientPoints', this.salientPoints);
+      console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
     },
     animate () {
       if (this.ctx) {
@@ -120,7 +129,7 @@ export default {
     }
   },
   render() {
-    // console.log('render()');
+    // console.log('render()', this.ctx);
     
     if (!this.ctx) return;
     

src/components/MapBackground.vue

@@ -10,7 +10,7 @@ export default {
     }
   },
   mounted() {
-    this.initGradients()
+    // this.initGradients()
     this.initTrame()
   },
   // computed: {