click on entite opened the entite in concernement cartouche

src/components/ConcernementMapItem.vue

@@ -131,6 +131,7 @@ export default {
           parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
             item_type: 'entite',
             id: this.entites[i].entite.id,
+            cid: this.concernement.id, 
             isSensor: true
           }))
         }

src/components/ConcernementMapPopup.vue

@@ -65,7 +65,7 @@ export default {
       <h1>{{ concernement.title }}</h1>
     </section>
     <section v-if="infos.type === 'entite'" class="entite-map-popup">
-      <h1>alors ? {{ entite.entite.title }}</h1>
+      <h1>{{ entite.entite.title }}</h1>
     </section>
   </div>
 </template>

src/components/MapConcernements.vue

@@ -107,6 +107,7 @@ export default {
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
+    ...mapActions(ConcernementsStore,['openEntite']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@@ -114,7 +115,7 @@ export default {
       window.requestAnimationFrame(this.animate);
     },
     onMouseMove (e) {
-      // check concernement item mouse over
+      // check item mouse over
       let query;
       if (this.opened) {
         // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
@@ -158,22 +159,54 @@ export default {
     onClick (e) {
       console.log('onClick', this, e);
       // get the clicked element from matter
-      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      // 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 {
+        // if no concernement opened we query concernements
+        query = Matter.Query.point(this.world.bodies, this.mouse.position)
+      }
       // console.log(this.mouse.position);
-      // console.log(query);
-      let clickedIDs = [];
-      query.forEach(elmt => {
-        // console.log('body id:', elmt.id);
-        clickedIDs.push(elmt.id);
-      });
-      // open/close all concernements
-      this.openCloseConcernements(clickedIDs)
+      console.log('click query', query);
+      
+      // no concernement is yet opened, we deal concernements
+      if (!this.opened) {
+        let clickedIDs = [];
+        query.forEach(body => {
+          // console.log('body id:', body.id);
+          clickedIDs.push(body.id);
+        });
+        // open/close all concernements
+        this.openCloseConcernements(clickedIDs)
+  
+        // 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'});
+        }
+      }
 
-      // 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'});
+      // concernement is already opened, we deal with entités
+      if (this.opened) {
+        let clickedBodies = [];
+        query.forEach(body => {
+          // console.log('body id:', body.id);
+          if (body.item_type === "entite") {
+            clickedBodies.push(body);
+          }
+        });
+        if (clickedBodies.length) {
+          this.openEntite(clickedBodies[0].cid, clickedBodies[0].id)
+        }
       }
     }
   },