on multiple superpositions can switch by clicking on superposed mapitem

src/components/ConcernementMapItem.vue

@@ -1264,7 +1264,11 @@ export default {
       if (this.is_hover) {
         this.paper_main_object.bringToFront();
       } else {
-        this.paper_main_object.sendToBack();
+        // mapitem can be hover while an other mapitem is open if it is superposed (superposition) to the currently opened mapitem
+        // in this case don't send it back
+        if (!this.opened_concernement) { 
+          this.paper_main_object.sendToBack();
+        }
       }
       // hightlight superposed entites on focus
       let entites_superposes = this.paper_main_object.children['entites_superposes'];
@@ -1296,27 +1300,40 @@ export default {
         // console.log(`onmousemove ${this.id}`);
 
         // prevent hover map item mouse event if cartouch is opened
-        if (this.cartouch_is_open) return;
-
+        if (this.cartouch_is_open && this.map_mode !== "superposition") return;
+        
         if (!this.is_open) {
-          if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
-            if (this.map_mode === 'superposition') {
-              // get the superposed entite
+          if (!this.opened_concernement) { // only if no concernement is opened and is this focused
+            if(this.isFocused()){
+              if (this.map_mode === 'superposition') {
+                // get the superposed entite
+                this.setHoverElmt({
+                  type: 'superposition',
+                  id: this.id,
+                  cid: this.cid,
+                  eids: this.superposedEntitesIDsList
+                });
+              } else{
+                this.setHoverElmt({
+                  type: 'concernement',
+                  id: this.id,
+                  cid: this.cid
+                });
+              }
+              document.body.style.cursor = "pointer";
+            }
+
+          } else if (this.map_mode === 'superposition'){
+            // if this mapitem is superposed to the opened mapitem
+            if(this.opened_concernement.all_superposed_concernements_id.indexOf(this.cid) >= 0){
               this.setHoverElmt({
                 type: 'superposition',
                 id: this.id,
                 cid: this.cid,
                 eids: this.superposedEntitesIDsList
               });
-            } else {
-              this.setHoverElmt({
-                type: 'concernement',
-                id: this.id,
-                cid: this.cid
-              });
+              document.body.style.cursor = "pointer";
             }
-            
-            document.body.style.cursor = "pointer";
           }
 
         } else {
@@ -1400,6 +1417,22 @@ export default {
             this.openCloseConcernements(this.cid, this.id)
             // reset the mousehover
             this.resetHoverElmt();
+          }  else if (this.map_mode === 'superposition'){
+            // if this mapitem is superposed to the opened mapitem
+            if(this.opened_concernement.all_superposed_concernements_id.indexOf(this.cid) >= 0){
+              // push route (keep the hash for map_mode)
+              // wait for routing to be finished before opening the mapItem
+              console.log('click on superposed this.mapitem.superposition_ids', this.mapitem.superposition_ids);
+              await this.$router.push({
+                name: 'concernement',
+                params: {cid: this.opened_concernement.cid},
+                query: {
+                  mapitemid: this.opened_concernement.opened_mapitem_id,
+                  superposition_id: this.mapitem.superposition_ids[0]
+                },
+                hash: `#${this.map_mode}`
+              });
+            }
           }
         } else { // si ce concernement est ouvert
           console.log('mapitem is opened');
@@ -1563,7 +1596,8 @@ export default {
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
             
             // paper bring to front
-            this.paper_main_object.bringToFront();
+            // this.paper_main_object.bringToFront();
+            this.paper_main_object.sendToBack();
 
             this.is_opening = false;
           });

src/components/MapConcernements.vue

@@ -148,7 +148,7 @@ export default {
   watch: {
     hover_elmt: {
       handler (n, o) {
-        console.log(`watch hover_elmt map: o, n`, o, n);
+        // console.log(`watch hover_elmt map: o, n`, o, n);
         // over highlight effect on paper items
         if (n && n.paper_id) {
           let nitem = paper.project.getItem({id: n.paper_id});

src/components/contents/TerrainDeVie.vue

@@ -99,6 +99,15 @@ export default {
       },
       deep: true
     },
+    cid: {
+      handler (n,o) {
+        console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
+        if (n) {
+          this.concernement = this.concernementsByID[n];
+        }
+      },
+      deep: true
+    },
     eid: {
       handler (n, o) {
         console.log(`TerrainDeVie watch eid o:${o}, n:${n}`);

src/components/layout/CartoucheLayout.vue

@@ -20,6 +20,17 @@ export default {
   computed: {
     ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
   },
+  watch: {
+    cid: {
+      handler (n,o) {
+        console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
+        if (n) {
+          this.concernement = this.concernementsByID[n];
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     ...mapActions(ConcernementsStore,['setMapMode'])
   },