superposition highlight on mouse hover

src/assets/main.scss

@@ -650,6 +650,12 @@ body{
           }
         }
       }
+      .entite-map-popup{
+        span.point{
+          font-weight: 900;
+          color: #01ffe2;
+        }
+      }
       h1, div{
         font-size: 1em;
         font-weight: 400;

src/components/ConcernementMapItem.vue

@@ -186,6 +186,12 @@ export default {
       },
       deep: true
     },
+    is_hover: {
+      handler (n, o) {
+        this.onIsHover(n);
+      },
+      deep: true
+    },
     active_revision: {
       handler (n, o) {
         console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
@@ -1250,6 +1256,26 @@ export default {
       }
 
     },
+    onIsHover(){
+      // handle layer z-index
+      if (this.is_hover) {
+        this.paper_main_object.bringToFront();
+      } else {
+        this.paper_main_object.sendToBack();
+      }
+      // hightlight superposed entites on focus
+      let entites_superposes = this.paper_main_object.children['entites_superposes'];
+      // console.log('entites_superposes.children', entites_superposes.children);
+      for(let paper_item of entites_superposes.children) {
+        if (this.is_hover) {
+          paper_item.definition = this.paper_symbol_definitions.entite_hover;
+          paper_item.scale(2)
+        } else {
+          paper_item.definition = this.paper_symbol_definitions.entite;
+          paper_item.scale(0.5)
+        }
+      }
+    },
     // PAPER EVENTS
     initPaperEvents(){
 
@@ -1938,10 +1964,9 @@ export default {
 
       if (this.is_hover) { // if mouse hover reset the matter body position to prev position
         Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}, true);
-      }
-      
+      }else{ // else move following the matter body position
         this.paper_main_object.position = this.pos = this.body.position;
-
+      }
       
       this.handlePaperVisibilityOnAfterEnginUpdate()
 

src/components/ConcernementMapPopup.vue

@@ -149,10 +149,13 @@ export default {
       </section>
 
       <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition'" class="entite-map-popup">
-        <h1
+        <template
           v-for="(entite, index) of entites"
           :key="index"
-        >⋅ {{ entite.entite.title }}</h1>
+        >
+        <h1><span class="point">&bull;</span> {{ entite.entite.title }}</h1>
+        </template>
+        
       </section>
       
       <section v-if="infos.type === 'besoin'" class="besoin-map-popup">
@@ -169,4 +172,5 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  
 </style>

src/components/MapConcernements.vue

@@ -1048,7 +1048,7 @@ export default {
       })
     },
     async setSuperpositionsMatterConstraints(){
-      await nextTick();
+      await nextTick(); // wait for dom to be upadted before applying consraint
       console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
       // let allBodies = Matter.Composite.allBodies(this.world);
       // console.log('allBodies', allBodies);