on multiple superpositions can switch by clicking on superposed mapitem

src/components/ConcernementMapItem.vue

@@ -1264,8 +1264,12 @@ export default {
       if (this.is_hover) {
         this.paper_main_object.bringToFront();
       } else {
+        // 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'];
       // console.log('entites_superposes.children', entites_superposes.children);
@@ -1296,10 +1300,11 @@ 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.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({
@@ -1308,17 +1313,29 @@ export default {
                   cid: this.cid,
                   eids: this.superposedEntitesIDsList
                 });
-            } else {
+              } 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
+              });
+              document.body.style.cursor = "pointer";
+            }
+          }
+
         } else {
           
           // lets define some options regarding the map_mode
@@ -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'])
   },

src/stores/common.js

@@ -17,7 +17,7 @@ export const CommonStore = defineStore({
   },
   actions: {
     setHoverElmt(elmt) {
-      console.log(`setHoverElmt`, elmt);
+      // console.log(`setHoverElmt`, elmt);
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     },

src/stores/concernements.js

@@ -362,7 +362,7 @@ export const ConcernementsStore = defineStore({
         if (state) {
           this.opened_concernement = c;
           this.opened_concernement.opened_mapitem_id = id;
-          if (c.has_recit) {
+          if (c.has_recit && this.map_mode === "terraindevie") {
             this.opened_recit = c.recit;
           }
           // console.log('openCloseConcernements', this.opened_concernement.opened);

src/views/Concernement.vue

@@ -85,18 +85,7 @@ export default {
     console.log("superposition", this.superposition);
 
     if(this.map_mode === "superposition" && this.$route.query.superposition_id){
-      // get superposition_id and superposition object
+      this.getSuperposition()
-      this.superposition_id = this.$route.query.superposition_id;
-      console.log('this.superposition_id', this.superposition_id);
-      if(this.superposition_id){
-        let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
-        let couple_key = `${ids[1]}-${ids[3]}`
-        // console.log('superposition_id', this.superposition_id, couple_key, ids);
-        if (this.allSuperpositions_byid[couple_key][this.superposition_id]) {
-          this.superposition = this.allSuperpositions_byid[couple_key][this.superposition_id]
-          console.log("this.superposition", this.superposition);
-        }
-      }
       // as we have two content to show multiply the cartouch with by 2
       // necessary for mapitem opening scale and position
       this.setCartoucheWidth(2)
@@ -109,7 +98,7 @@ export default {
     // when we arrived directly to the url, load the entite
     // this.eid provided by route params
     if (this.map_mode === "terraindevie" && this.eid) {
-      this.openEntite();
+      this.setOpenedEntiteId(this.eid)
     }
   },
   watch: {
@@ -125,15 +114,21 @@ export default {
     },
     eid: {
       handler (n, o){
-        if(n){
+        this.setOpenedEntiteId(n)
-          this.openEntite()
+      },
-        }else{
+      deep: true
-          // this.entite = false;
+    },
-          this.setOpenedEntiteId(null);
+    // watch superposition_id query
+    $route: {
+      handler (n, o) {
+        console.log("concernement view $route watcher o, n", o, n);
+        if (n.query && n.query.superposition_id) {
+          this.getSuperposition()
         }
       },
       deep: true
     }
+
   },
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements',
@@ -141,28 +136,24 @@ export default {
                                       'setMapMode',
                                       'resetConcernementOpened']),
     ...mapActions(CommonStore,['setCartoucheWidth']),
-    openEntite(){
+    getSuperposition(){
-      this.setOpenedEntiteId(parseInt(this.eid))
+      console.log('getSuperposition');
-      // this.loadEntite()
+      // get superposition_id and superposition object
+      if (this.$route.query.superposition_id) {
+        this.superposition_id = this.$route.query.superposition_id;
+        console.log('this.superposition_id', this.superposition_id);
+        if(this.superposition_id){
+          let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
+          let couple_key = `${ids[1]}-${ids[3]}`
+          // console.log('superposition_id', this.superposition_id, couple_key, ids);
+          if (this.allSuperpositions_byid[couple_key][this.superposition_id]) {
+            this.superposition = this.allSuperpositions_byid[couple_key][this.superposition_id]
+            console.log("this.superposition", this.superposition);
+          }
+        }
+      }
+      
     },
-    // loadEntite(){
-    //   const ast = gql`{
-    //     entite (id: ${this.eid}) {
-    //       ...EntiteFields
-    //     }
-    //   }
-    //   ${EntiteFields}
-    //   `
-    //   console.log('ast', ast);
-    //   GQL.post('', { query: print(ast) })
-    //     .then(({data: { data: { entite }}}) => {
-    //       console.log('load entite loaded', entite)
-    //       this.entite = entite
-    //     })
-    //     .catch(error => {
-    //       console.warn('Issue with load entite', error)
-    //     })
-    // },
     closeConcernement(){
       this.resetConcernementOpened();
     }