concernement on map hover effect, better mappopup

src/components/ConcernementMapItem.vue

@@ -27,6 +27,7 @@ import Tween from "@tweenjs/tween.js";
 
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
+import { CommonStore } from '@/stores/common'
 
 export default {
   inject: ['canvasMap', 'matterEngine'],
@@ -49,14 +50,16 @@ export default {
       tween: null,
       body: null,
       body_parts: [],
-      constraint: null
+      constraint: null,
+      isHover: false
     }
   },
   props: ['concernement', 'opened'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['opened_entite_id'])
+    ...mapState(ConcernementsStore,['opened_entite_id']),
+    ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
     // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
@@ -115,6 +118,17 @@ export default {
         }
       },
       deep: true
+    },
+    hover_elmt: {
+      handler (n, o) {
+        console.log('watch hover_elmt', o, n);
+        if (n && n.type === 'concernement' && n.id === this.id) {
+          this.isHover = true;
+        } else {
+          this.isHover = false;
+        }
+      },
+      deep: true
     }
   },
   methods: {
@@ -725,14 +739,18 @@ export default {
     drawContour(){
       if (this.salientPoints.length > 3) {
         var fillStyle;
+        let strokeStyle = "#000";
         if (!this.isFocused()){
           fillStyle = "rgba(255,255,255,0.3)";
         }else{
           fillStyle = "rgba(255,255,255,0.8)"
+          if (this.isHover) {
+            strokeStyle = "#01ffe2";
+          }
         }
         this.ctx.beginPath();
         this.ctx.lineWidth = 1;
-        this.ctx.strokeStyle = "#000";
+        this.ctx.strokeStyle = strokeStyle;
         this.ctx.fillStyle = fillStyle;
         this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
         for (let j = 1; j < this.salientPoints.length; j++) {