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>

src/components/Header.vue

@@ -1,46 +0,0 @@
-<script>
-
-import { mapState } from 'pinia'
-import { UserStore } from '@/stores/user'
-import UserBlock from '@components/block/UserBlock.vue'
-import StaticMenu from '@components/block/StaticMenu.vue'
-
-
-export default {
-  // data(){
-  //   return {
-  //     block: null
-  //   }
-  // },
-  computed: {
-    ...mapState(UserStore,['isloggedin'])
-  },
-  methods: {
-    
-  },
-  components: {
-    UserBlock,
-    StaticMenu
-  }
-}
-
-</script>
-
-<template>
-    <header>
-    <div class="row top">
-      <h1>
-        <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
-      </h1>
-    </div>
-    <div class="row bottom">
-      <StaticMenu/>
-      <UserBlock/>
-    </div>
-  </header>
-
-</template>
-
-<style lang="scss" scoped>
-
-</style>

src/components/MapConcernements.vue

@@ -1,32 +1,50 @@
 <script>
 
-import { mapActions, mapState } from 'pinia'
-import { ConcernementsStore } from '@/stores/concernements'
-import ConcernementMapItem from '@components/ConcernementMapItem.vue'
-
+// import { mapActions, mapState } from 'pinia'
+import { computed } from 'vue'
 // import LoginBlock from '@components/block/LoginBlock.vue'
 // import UserTools from '@components/block/UserTools.vue'
 
 // import MA from '/api/ma-axios'
 
+// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
+
 export default {
-  // data(){
-  //   return {
-  //     block: null
-  //   }
+  data() {
+    return {
+      canvasMap: {
+        canvas: null,
+        ctx: null
+      },
+      animateEvent: new Event('animate')
+    }
+  },
+  provide() {
+    return {
+      // explicitly provide a computed property
+      canvasMap: computed(() => this.canvasMap)
+    }
+  },
+  mounted() {
+    this.canvasMap.canvas = this.$refs['canvas-map'];
+    this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
+
+    this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
+    this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+    this.animate()
+  },
+  // computed: {
+  // },
+  // created () {
   // },
-  computed: {
-    ...mapState(ConcernementsStore,['concernements'])
-  },
-  created () {
-    console.log("mapConcernements created");
-    this.loadConcernements()
-  },
   methods: {
-    ...mapActions(ConcernementsStore,['loadConcernements'])
+    animate () {
+      this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
+      this.canvasMap.canvas.dispatchEvent(this.animateEvent)
+      window.requestAnimationFrame(this.animate);
+    }
   },
-  components: {
-    ConcernementMapItem
+  beforeUpdate () {
   }
 }
 
@@ -34,16 +52,8 @@ export default {
 
 <template>
   <div id="map-concernements">
-    <!-- <h1>Concernements</h1> -->
-    <!-- <canvas rel="canvas-map"></canvas> -->
-    <ul>
-      <li
-        v-for="concernement in concernements"
-        v-bind:key="concernement.id"
-      >
-        <ConcernementMapItem :concernement="concernement"/>
-      </li>
-    </ul>
+    <canvas ref="canvas-map"></canvas>
+    <slot></slot>
   </div>
 </template>
 

src/components/block/LoginBlock.vue

@@ -54,13 +54,52 @@ export default {
 </script>
 
 <template>
-  <form action="" @submit.prevent="onSubmitLogin">
-    <input type="email" placeholder="email" name="email" v-model="mail">
-    <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
-    <input type="submit" value="se connecter">
-    <p v-if="loginMessage">{{ loginMessage }}</p>
-  </form>
+  <div id="login-block">
+    <span>connexion</span>
+    <form action="" @submit.prevent="onSubmitLogin">
+      <input type="email" placeholder="email" name="email" v-model="mail">
+      <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
+      <input type="submit" value="se connecter">
+      <p v-if="loginMessage">{{ loginMessage }}</p>
+    </form>
+  </div>
 </template>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
+  $pad: 1em;
+  #login-block{
+    position: relative;
+
+    span{
+      display: inline-block;
+      @include btn();
+    }
+    form{
+      background-color: #fff;
+      border-radius: 5px;
+      padding: 0 $pad;
+      position: absolute;
+      bottom: 100%;
+      left: -$pad;
+      >*{
+        margin: 0 0 0.5em 0;
+      }
+      overflow: hidden;
+      max-height:1px;
+      opacity: 0;
+      $delay: 4s;
+      transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
+    }
+    &:hover{
+      form{
+        box-shadow: 0 0 5px $btns_back;
+        padding: $pad;
+        max-height: 100px;
+        opacity: 1;
+        transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
+      }
+    }
+  }
+  
+
 </style>

src/components/block/StaticMenu.vue

@@ -51,6 +51,10 @@ export default {
     padding: 0;
     margin: 0;
     list-style: none;
+    display: flex;
+    a{
+      @include btn();
+    }
   }
 
 </style>

src/components/block/UserTools.vue

@@ -47,6 +47,9 @@ export default {
   #user-tools{
     display: flex;
     flex-direction: row;
-    gap: 0.5em;
+    gap: 0em;
+    a{
+      padding: $pad_btn;
+    }
   }
 </style>