concernement on map hover effect, better mappopup

src/components/MapConcernements.vue

@@ -29,6 +29,7 @@ Matter.use(MatterAttractors);
 
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
+import { CommonStore } from '@/stores/common'
 
 import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
 
@@ -61,7 +62,8 @@ export default {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['opened'])
+    ...mapState(ConcernementsStore,['opened']),
+    ...mapState(CommonStore,['hover_elmt'])
   },
   created() {
     // MATTER
@@ -109,6 +111,7 @@ export default {
     ...mapActions(ConcernementsStore,['setMapMode']),
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
+    ...mapActions(CommonStore,['setHoverElmt']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@@ -132,7 +135,7 @@ export default {
         query = Matter.Query.point(this.world.bodies, this.mouse.position)
       }
       
-      this.mapPopupData = null;
+      let hover_elmt = null;
       if (query && query.length) {
         // if we have a results
         for (let body of query) {
@@ -140,7 +143,7 @@ export default {
             && body.item_type === "concernement" // if it is a concernement
             && typeof this.concernementsByID[body.id] !== "undefined"  // if the id exists
             && !this.concernementsByID[body.id].opened) { // if the concernement is not opened
-              this.mapPopupData = {
+              hover_elmt = {
                 type: 'concernement',
                 id: body.id
               };
@@ -148,14 +151,14 @@ export default {
           if (body.item_type === "entite" // if it is an entite
             && this.opened // if a concernement is opened
             && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
-              this.mapPopupData = {
+              hover_elmt = {
                 type: 'entite',
                 id: body.id
               };
           }
           if (body.item_type === "besoin" // if it is a besoin
             && this.opened) { // if a concernement is opened
-              this.mapPopupData = {
+              hover_elmt = {
                 type: 'besoin',
                 id: body.id
               };
@@ -163,15 +166,16 @@ export default {
 
           if (body.item_type === "reponse" // if it is a besoin
             && this.opened) { // if a concernement is opened
-              this.mapPopupData = {
+              hover_elmt = {
                 type: 'reponse',
                 id: body.id
               };
           }
         }
-        // console.log(`this.mapPopupData type: ${this.mapPopupData.type}, id: ${this.mapPopupData.id}`);
+        // console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`);
       }
-      if (this.mapPopupData) {
+      this.setHoverElmt(hover_elmt);
+      if (hover_elmt) {
         document.body.style.cursor = "pointer";
       } else {
         document.body.style.cursor = "auto";
@@ -293,8 +297,8 @@ export default {
     </ul>
   </nav>
   <ConcernementMapPopup
-    v-if="mapPopupData"
-    :infos="mapPopupData"
+    v-if="hover_elmt"
+    :infos="hover_elmt"
   />  
 </template>