started map: drawing concernement with entities and contours

src/components/ConcernementMapItem.vue

@@ -10,33 +10,167 @@
 // import MA from '/api/ma-axios'
 
 export default {
+  inject: ['canvasMap'],
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      pos : {
+        x: 0,
+        y: 0
+      },
+      ray: 60,
+      time: 0,
+      salientPoints: []
+    }
+  },
   props: ['concernement'],
-  // data(){
-  //   return {
-  //     block: null
-  //   }
-  // },
-  // computed: {
-  //   ...mapState(UserStore,['isloggedin'])
-  // },
   created () {
-    console.log("ConcernementsMapItem created");
+    console.log("ConcernementsMapItem concernement", this.concernement);
+    this.entites = this.concernement.entites
+    this.parsePoints()
+    this.getSalientPoints()
+  },
+  watch: {
+    // canvasMap (n, o) {
+    //   console.log("concernementItem watch canvasMap", o, n);
+    // }
+    canvasMap: {
+      handler (n, o){
+        // console.log("concernementItem watch canvasMap.ctx", o, n);
+        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)
+      },
+      deep: true
+    } 
   },
   methods: {
-    // ...mapActions(ConcernementsStore,['loadConcernements'])
-  }
-  // components: {
-  //   LoginBlock,
-  //   UserTools
-  // }
+    parsePoints (){
+      for (let i = 0; i < this.entites.length; i++) {
+        let entite = this.entites[i]
+        console.log('entite', entite);
+        
+        this.entites[i].display = {
+          alpha: null,
+          ray: null
+        }
+        // RAYON
+        // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
+        // slope = (output_end - output_start) / (input_end - input_start)
+        // output = output_start + slope * (input - input_start)
+        // from range 0 -> 100 to range 0 -> this.ray
+        let slope = this.ray / 100
+        this.entites[i].display.ray = slope * (100 - entite.prise);
+
+        // ANGLE
+        // -90 <= mm <= 90
+        if (entite.actuelfuture) {
+          // future en haut : 180 <= a <= 360
+          // from -90 -> 90 to range 180 -> 360
+          this.entites[i].display.alpha = entite.menacemaintien + 270
+        } else {
+          // actuel: en bas : O <= a <= 180
+          // from -90 -> 90 to range 180 -> 0
+          this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
+        }
+
+        // POSITION X Y (par rapport au centre de l'entite)
+        this.entites[i].display.pos = {
+          x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
+          y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
+        }
+      }
+    },
+    getSalientPoints () {
+      // debugger
+      // console.log(this.entites);
+      let arc = 60;
+      // loop through arcs
+      for (let i = 0; i <= 360/arc; i++) {
+        // loop through entities to find the farest on the arc
+        let max_r = 0;
+        let farest = null;
+        for (let j = 0; j < this.entites.length; j++) {
+          let entite = this.entites[j];
+          if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) {
+            // if entity is in arc
+            if (entite.display.ray > max_r) {
+              // if entity is farest from precedent one
+              max_r = entite.display.ray;
+              farest = entite;
+            }
+          }
+        }
+        if (farest) {
+          this.salientPoints.push(farest.display)
+        }
+      }
+      console.log('this.salientPoints', this.salientPoints);
+    },
+    animate () {
+      if (this.ctx) {
+        // this var is only here to trigger the render()
+        this.time = Date.now();
+        // this.pos.x += 0;
+      }
+    }
+  },
+  render() {
+    // console.log('render()');
+    
+    if (!this.ctx) return;
+    
+    // this var is only here to trigger the render() from animate()
+    let time = this.time;
+
+    // place all entities points
+    for (let i = 0; i < this.entites.length; i++) {
+      let entite = this.entites[i];
+      // console.log('entite', entite);
+      this.ctx.beginPath();
+      this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
+      this.ctx.fillStyle = "#F00";
+      this.ctx.fill();
+    }
+
+    // concernement id @center
+    this.ctx.beginPath();
+    // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
+    this.ctx.fillStyle = "#000";
+    this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
+    this.ctx.fill();
+
+    // exterieur circle
+    this.ctx.beginPath();
+    this.ctx.lineWidth = 0.5;
+    this.ctx.strokeStyle = "#888";
+    this.ctx.arc(this.pos.x, this.pos.y, this.ray, 0, 2 * Math.PI, false);
+    this.ctx.stroke();
+
+    // exterieur circle
+    this.ctx.beginPath();
+    this.ctx.lineWidth = 0.5;
+    this.ctx.strokeStyle = "#888";
+    this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false);
+    this.ctx.stroke();
+
+    // contours
+    if (this.salientPoints.length > 3) {
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = "#000";
+      this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
+      for (let j = 1; j < this.salientPoints.length; j++) {
+        this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
+      }
+      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
+      this.ctx.stroke();
+    }
+  },
 }
 
 </script>
-
-<template>
-    <span>{{ concernement.title }}</span>
-</template>
-
-<style lang="css" scoped>
-
-</style>