enites as matter body and popup display on mouse over entites

src/components/MapConcernements.vue

@@ -46,7 +46,7 @@ export default {
       world: null,
       // render: null,
       mouse: null,
-      concernementpopupid: null
+      mapPopupData: null,
     }
   },
   provide() {
@@ -59,7 +59,8 @@ export default {
   },
   computed: {
     ...mapState(ConcernementsStore,['concernements']),
-    ...mapState(ConcernementsStore,['concernementsByID'])
+    ...mapState(ConcernementsStore,['concernementsByID']),
+    ...mapState(ConcernementsStore,['opened'])
   },
   created() {
     // MATTER
@@ -105,6 +106,7 @@ export default {
   },
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernement']),
+    ...mapActions(ConcernementsStore,['resetConcernementOpened']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@@ -113,16 +115,45 @@ export default {
     },
     onMouseMove (e) {
       // check concernement item mouse over
-      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
-      // console.log('mousemove query', query);
-      if (query.length) {
-        if (typeof this.concernementsByID[query[0].id] !== "undefined" && !this.concernementsByID[query[0].id].opened) {
-          this.concernementpopupid = query[0].id;
-        } else {
-          this.concernementpopupid = null;  
+      // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      let query;
+      if (this.opened) {
+        // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
+        const bodies = Matter.Composite.allBodies(this.world);
+        for (let body of bodies) {
+          if (body.item_type === "concernement" && body.id === this.opened.id) {
+            query = Matter.Query.point(body.parts, this.mouse.position);
+            break;    
+          }
         }
-      }else{
-        this.concernementpopupid = null;
+      } else {
+        // if no concernement opened we query concernements
+        query = Matter.Query.point(this.world.bodies, this.mouse.position)
+      }
+      
+      this.mapPopupData = null;
+      if (query && query.length) {
+        // if we have a results
+        for (let body of query) {
+          if (!this.opened // if no concernement is opened
+            && 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 = {
+                type: 'concernement',
+                id: body.id
+              };
+          }
+          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 = {
+                type: 'entite',
+                id: body.id
+              };
+          }
+        }
+        // console.log(`this.mapPopupData type: ${this.mapPopupData.type}, id: ${this.mapPopupData.id}`);
       }
     },
     onClick (e) {
@@ -141,7 +172,9 @@ export default {
         this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
       });
       // if no concernement opened retrun to home (closing concernement contents opened)
+      // and reset the opened state in concernement store
       if (!clickedIDs.length) {
+        this.resetConcernementOpened();
         this.$router.push({name: 'home'});
       }
     }
@@ -190,8 +223,8 @@ export default {
     </ul>
   </nav>
   <ConcernementMapPopup
-    v-if="concernementpopupid"
-    :id="concernementpopupid"
+    v-if="mapPopupData"
+    :infos="mapPopupData"
   />  
 </template>