third version of superpositions is almost done

src/App.vue

@@ -35,6 +35,7 @@ export default {
                                     'concernements_loaded',
                                     'concernementsByID',
                                     'allSuperpositions_bycids',
+                                    'allSuperpositions_clustered',
                                     'allMapItems_byid',
                                     'opened_recit']),
   },
@@ -52,74 +53,46 @@ export default {
     ...mapActions(ConcernementsStore,['loadConcernements']),
     ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
     ...mapActions(UserStore,['checkUser']),
-    // parseSuperposedMapitemsClones () {
-    //   let clones = [];
-    //   // loop through all superposition grouped by concernements couples
-    //   for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_bycids)){
-    //     // loop through all superpositions for one concernement couple and mark the first as NOT cloned and clone the others and mark them as cloned
-    //     let i = 0;
-    //     for(let [superposition_id, superposition] of Object.entries(superpositions)){
-    //       i++
-    //       if (i === 1) {
-    //         // first superposition of the couple is not cloned
-    //         this.allSuperpositions_bycids[couple_id][superposition_id].cloned = false;
-    //         continue;
-    //       }
-    //       // following superpositions of the couple generate concernement map_item clones
-    //       // first concernement of the couple
-    //       clones.push({
-    //         concernement: this.concernementsByID[superposition[0].cid],
-    //         superposition_id: superposition_id
-    //       })
-    //       // second concernement of the couple
-    //       clones.push({
-    //         concernement: this.concernementsByID[superposition[1].cid],
-    //         superposition_id: superposition_id
-    //       })
-
-    //       this.allSuperpositions_bycids[couple_id][superposition_id].cloned = true;
-    //     }
-    //   }
-    //   this.superposed_cloned_mapitems = clones;
-    // },
     parseMapitems() {
-      let couple_ids = Object.keys(this.allSuperpositions_bycids);
-      console.log('App couple_ids', couple_ids);
+      // let couple_ids = Object.keys(this.allSuperpositions_bycids);
+      // console.log('App couple_ids', couple_ids);
       // loop through all concernement
       for(let [concernement_id, concernement] of Object.entries(this.concernementsByID)){
         // create the main mapitem object
         let mapitem = {
           id: concernement.id,
           concernement: concernement,
-          superposition_ids: [],
+          // superposition_ids: [],
+          superposition_cluster_index: -1,
           clone: false,
         }
-        // loop through all superposistions couples
-        couple_ids.forEach(couple_id => {
-          let cids = couple_id.match(/(\d+)-(\d+)/i);
-          // console.log('cids', cids);
-          if (concernement.id === parseInt(cids[1]) || concernement.id === parseInt(cids[2])) {
-            let i = 0;
-            // loop through all superpositions of couple 
-            for(let [superposition_id, superposition] of Object.entries(this.allSuperpositions_bycids[couple_id])){
-              i++;
-              if (!mapitem.superposition_ids.length) {
-                // if main map item does not yet have a superposition use it and alter his id (for matter constraints)
-                mapitem.superposition_ids.push(superposition_id)
-                mapitem.id = `${concernement.id}___${superposition_id}`
-              }else{
-                let mapitem_superposition = {
-                  id: `${concernement.id}___${superposition_id}`,
-                  concernement: concernement,
-                  superposition_ids: [superposition_id],
-                  clone: true
-                };
-                this.mapitems.push(mapitem_superposition);
-                this.allMapItems_byid[mapitem_superposition.id] = mapitem_superposition;
-              }
+
+        // loop through all superposition_clusters
+        for( let [cluster_index, cluster] of this.allSuperpositions_clustered.entries()){
+          let cids = [];
+          // console.log(`cluster ${cluster_index}`, cluster);
+          for( let s of cluster){
+            cids.push(s.cid)
+          }
+          // console.log(`cids:${cids}`);
+          if(cids.indexOf(concernement.id) !== -1){
+            // console.log('concernement in cluster');
+            if (mapitem.superposition_cluster_index === -1) {
+              // if main map item does not yet have a superposition use it and alter his id (for matter constraints)
+              mapitem.superposition_cluster_index = cluster_index
+              mapitem.id = `${concernement.id}___${cluster_index}`
+            }else{
+              let mapitem_superposition = {
+                id: `${concernement.id}___${cluster_index}`,
+                concernement: concernement,
+                superposition_cluster_index: cluster_index,
+                clone: true
+              };
+              this.mapitems.push(mapitem_superposition);
+              this.allMapItems_byid[mapitem_superposition.id] = mapitem_superposition;
             }
           }
-        });
+        }
         this.mapitems.push(mapitem)
         this.allMapItems_byid[mapitem.id] = mapitem;
       }

src/components/ConcernementMapItem.vue

@@ -27,7 +27,8 @@ export default {
       concernement: null,
       active_revision: null,
       entities: null,
-      superposedEntitesIDsList: [],
+      superposedEntiteID: null,
+      // superposedEntitesIDsList: [],
       canvas: null,
       ctx: null,
       pos : {
@@ -60,6 +61,7 @@ export default {
                                     'concernementsByID',
                                     'allEntitesById',
                                     'allSuperpositions_bycids',
+                                    'allSuperpositions_clustered',
                                     'allMapItems_byid',
                                     'opened_concernement',
                                     'opened_entite_id']),
@@ -72,6 +74,7 @@ export default {
   created () {
     // console.log('ConcernementMapItem created', this.mapitem);
     // this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
+    // console.log(`this.mapitem.id`, this.mapitem.id);
     this.id = this.mapitem.id;
     this.concernement = this.mapitem.concernement;
     this.cid = this.concernement.id;
@@ -102,7 +105,7 @@ export default {
       // define init position of the item
       this.pos = this.getRandomPos();
       //
-      this.getSuperposedEntitesIDsList();
+      this.getSuperposedEntiteID();
       //
       this.initMatterBody()
       //
@@ -383,27 +386,20 @@ export default {
       if (num > 1 || num < 0) return this.getGaussianRandom() // resample between 0 and 1
       return num
     },
-    getSuperposedEntitesIDsList(){
-      if (this.concernement.superpositions) {
-        // loop through all concernement superpositions couples of this concernement
-        for(let [couple_id, superpositions] of Object.entries(this.concernement.superpositions)){
-          // loop through all superpositions of each couple
-          for(let [superposition_id, superposition] of Object.entries(superpositions)){
-            if (this.mapitem.superposition_ids.indexOf(superposition_id) >= 0) {
-              switch (this.cid) { // get the right eid regarding the cid
-                case superposition[0].cid:
-                  this.superposedEntitesIDsList.push(superposition[0].eid);
-                  break;
-                case superposition[1].cid:
-                  this.superposedEntitesIDsList.push(superposition[1].eid);
-                  break;
-              }
+    getSuperposedEntiteID(){
+      if (this.concernement.has_superpositions) {
+        let ids = this.id.match(/(\d+)___(\d+)/i);
+        if (ids) {
+          let cluster_index = ids[2];
+          // console.log(ids, cluster_index);
+          for(let cid_eid of this.allSuperpositions_clustered[cluster_index] ){
+            if(this.cid === cid_eid.cid){
+              this.superposedEntiteID = cid_eid.eid;
+              break;
             }
           }
         }
       }
-      // console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
-
     },
     // MATTER BODY
     initMatterBody (){
@@ -509,7 +505,7 @@ export default {
         pivot: new paper.Point(this.pos),
         name: `main_${this.id}`,
         cid: this.cid,
-        superposition_id: this.mapitem.superposition_ids[0]
+        // superposition_id: this.mapitem.superposition_ids[0]
       });
 
       // fadein intro
@@ -765,7 +761,7 @@ export default {
       for (let i = 0; i < this.concernement.revisions_byid[this.concernement.active_revision].entites.length; i++) {
         let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
         if (entite.entite // check if we have an entite object with all the contents
-            && this.superposedEntitesIDsList.indexOf(entite.entite.id) >= 0) // check if entite id is in the list builded above
+            && this.superposedEntiteID === entite.entite.id) // check if entite id
           {
           // console.log(`entite ${entite.entite.id}`, entite, entite.entite.superposition);
           // use paper symbol
@@ -779,6 +775,7 @@ export default {
           instance.item_type = 'entite_superpose';
           instance.is_symbol_instance = true;
           g.addChild(instance)
+          break; // there is only one superposed entite by mapitem
         }
       }
       return g;
@@ -1513,23 +1510,23 @@ export default {
             if (this.$route.query.superposition_id) {
               let superposition_id = this.$route.query.superposition_id;
               if(superposition_id){
-                let ids = superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
-                group.children.forEach((item) => {
-                  if ( (this.cid === parseInt(ids[1]) && item.item_id === parseInt(ids[2])) 
-                    || (this.cid === parseInt(ids[3]) && item.item_id === parseInt(ids[4])) ) {
-                      item.definition = this.paper_symbol_definitions.entite_hover;
-                      if(!item.focused){
-                        item.scale(2)
-                        item.focused = true;
-                      }
-                  } else if(!this.is_hover) {
-                    item.definition = this.paper_symbol_definitions.entite;
-                    if (item.focused) {
-                      item.scale(0.5)
-                      item.focused = false;
-                    }
-                  }
-                })
+                // let ids = superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
+                // group.children.forEach((item) => {
+                //   if ( (this.cid === parseInt(ids[1]) && item.item_id === parseInt(ids[2])) 
+                //     || (this.cid === parseInt(ids[3]) && item.item_id === parseInt(ids[4])) ) {
+                //       item.definition = this.paper_symbol_definitions.entite_hover;
+                //       if(!item.focused){
+                //         item.scale(2)
+                //         item.focused = true;
+                //       }
+                //   } else if(!this.is_hover) {
+                //     item.definition = this.paper_symbol_definitions.entite;
+                //     if (item.focused) {
+                //       item.scale(0.5)
+                //       item.focused = false;
+                //     }
+                //   }
+                // })
               }
             }else{
               group.children.forEach((item) => {
@@ -1659,7 +1656,7 @@ export default {
                   type: 'superposition',
                   id: this.id,
                   cid: this.cid,
-                  eids: this.superposedEntitesIDsList
+                  eid: this.superposedEntiteID
                 });
               } else{
                 this.setHoverElmt({
@@ -1678,7 +1675,7 @@ export default {
                 type: 'superposition',
                 id: this.id,
                 cid: this.cid,
-                eids: this.superposedEntitesIDsList
+                eid: this.superposedEntiteID
               });
               document.body.style.cursor = "pointer";
             }
@@ -1759,13 +1756,16 @@ export default {
             console.log(`Open me ${this.id}`);
             // push route (keep the hash for map_mode)
             // wait for routing to be finished before opening the mapItem
+            let params = {cid: parseInt(this.cid)}
+            
             let query = {mapitemid: this.id};
             if (this.map_mode === "superposition") {
-              query.superposition_id = this.mapitem.superposition_ids[0];
+              params.eid = this.superposedEntiteID
+              query.superposition_cluster_index = this.mapitem.superposition_cluster_index;
             }
             await this.$router.push({
               name: 'concernement',
-              params: {cid: parseInt(this.cid)},
+              params: params,
               query: query,
               hash: `#${this.map_mode}`
             });
@@ -1773,18 +1773,19 @@ export default {
             this.openCloseConcernements(this.cid, this.id)
             // reset the mousehover
             this.resetHoverElmt();
-          }  else if (this.map_mode === 'superposition'){
+          }  else if (this.map_mode === 'superposition'){ // si un concernement est ouvert et qu'on est en 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);
+              console.log('click on superposed this.mapitem.superposition_cluster_index', this.mapitem.superposition_cluster_index);
               await this.$router.push({
                 name: 'concernement',
-                params: {cid: this.opened_concernement.cid},
+                params: {cid: this.opened_concernement.cid, eid: this.$route.params.eid},
                 query: {
                   mapitemid: this.opened_concernement.opened_mapitem_id,
-                  superposition_id: this.mapitem.superposition_ids[0]
+                  superposition_cluster_index: this.mapitem.superposition_cluster_index,
+                  superposed_cid: this.cid
                 },
                 hash: `#${this.map_mode}`
               });
@@ -1825,7 +1826,7 @@ export default {
                     params: {cid: this.cid, eid: result.item.item_id},
                     query: {
                       mapitemid: this.id,
-                      superposition_id: this.mapitem.superposition_ids[0]
+                      // superposition_id: this.mapitem.superposition_ids[0]
                     },
                     hash: `#${this.map_mode}`,
                   });    
@@ -2078,23 +2079,14 @@ export default {
           // push all aside mapitems not superposed the the opened mapitem
           let pushaside = true;
 
-          // BUT NOT push aside mapitems superposed to superposed mapitems
-          // opened_mapitem <-- superposed_mapitems <-- superposed_mapitem
+          // BUT NOT push aside mapitems superposed to this item
+          // opened_mapitem <-- superposed_mapitems
           if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
               && this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
             { // if opened mapitem has superposed mapitems
             let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
             if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
               pushaside = false;
-            } else { // else we look for second stage of the rockette ... superposed to superposed to opened
-              superposed_ids.forEach(mapitem_id => { // for each superposed map_item, check if this mapitem is in their superposed
-                let mapitem = this.allMapItems_byid[mapitem_id]; // get the superposed (stage 1) mapitem
-                mapitem.superposition_ids.forEach(sup_id => { // for each superposed (stage 2) of the superposed (stage 1)
-                  if (this.mapitem.superposition_ids.indexOf(sup_id) >= 0) {
-                    pushaside = false;
-                  }
-                });
-              });
             }
           }
 

src/components/ConcernementMapPopup.vue

@@ -82,11 +82,7 @@ export default {
           break;
         case 'superposition':
           this.concernement = this.concernementsByID[this.infos.cid];  
-          // this.entite = this.allEntitesById[this.infos.eid];
-          this.entites = [];
-          for (let eid of this.infos.eids) {
-            this.entites.push(this.allEntitesById[eid])
-          }
+          this.entites = [this.allEntitesById[this.infos.eid]];
           break;
       }
     },

src/components/MapConcernements.vue

@@ -63,7 +63,8 @@ export default {
                                     'opened_entite_id',
                                     'opened_recit',
                                     'allSuperpositions',
-                                    'allSuperpositions_bycids'
+                                    // 'allSuperpositions_bycids',
+                                    'allSuperpositions_clustered'
                                   ]),
     ...mapState(CommonStore,['map_item_ray',
                              'hover_elmt',
@@ -1147,25 +1148,25 @@ export default {
     },
     async setSuperpositionsMatterConstraints(){
       await nextTick(); // wait for dom to be upadted before applying constraint
-      console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
+      // console.log('setSuperpositionsMatterConstraints this.allSuperpositions_clustered', this.allSuperpositions_clustered);
       
       // loop through all supperposition couple
-      for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_bycids)){
-        // if couple has only one superposition, use regular mapItems
-        // let superpositions_ids = Object.keys(superpositions);
-        let i = 0;
-        for(let [superposition_id, superposition] of Object.entries(superpositions)){
-          i++;
-          
-          let concernementA = this.concernementsByID[superposition[0].cid];
+      for(let [cluster_index, cluster] of Object.entries(this.allSuperpositions_clustered)){
+        
+        for(let [i, cid_eid_A] of cluster.entries()){
+          // console.log(`i:${i}, cid_eid_A cid:${cid_eid_A.cid}, eid:${cid_eid_A.eid}`);
+          let cid_eid_B = i === cluster.length -1 ? cluster[0] : cluster[i+1];
+          // console.log(`i:${i}, cid_eid_B cid:${cid_eid_B.cid}, eid:${cid_eid_B.eid}`);
+         
+          let concernementA = this.concernementsByID[cid_eid_A.cid];
           // console.log('concernementA', concernementA);
-          let concernementB = this.concernementsByID[superposition[1].cid];
+          let concernementB = this.concernementsByID[cid_eid_B.cid];
           // console.log('concernementB', concernementB);
 
           // console.log('superposition', superposition_id, superposition);
-          let mapitemA_id = `${superposition[0].cid}___${superposition_id}` 
-          let mapitemB_id = `${superposition[1].cid}___${superposition_id}` 
-          
+          let mapitemA_id = `${cid_eid_A.cid}___${cluster_index}` 
+          let mapitemB_id = `${cid_eid_B.cid}___${cluster_index}` 
+          // console.log(`mapitemA_id: ${mapitemA_id}, mapitemB_id: ${mapitemB_id}`);
           
           // get the concernement matter bodies with id
           let bodyA = Matter.Composite.get(this.world, mapitemA_id, 'body'); // matter body id is the same as mapitem_id
@@ -1175,7 +1176,7 @@ export default {
           // get the entite coordinates inside the concernement body
           let pointA = null;
           for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
-            if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
+            if (entiteA.entite && entiteA.entite.id === cid_eid_A.eid && entiteA.display) {
               // console.log('entiteA', entiteA);
               pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
               break;
@@ -1183,7 +1184,7 @@ export default {
           }
           let pointB = null;
           for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
-            if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
+            if (entiteB.entite && entiteB.entite.id === cid_eid_B.eid && entiteB.display) {
               // console.log('entiteB', entiteB);
               pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y); 
               break;

src/components/contents/TerrainDeVie.vue

@@ -161,7 +161,7 @@ export default {
         <!-- TODO update entite with revisions -->
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
-        <h3 v-if="entite">hello {{ entite.title }}</h3>
+        <h3 v-if="entite">{{ entite.title }}</h3>
       </div>
     </template>
     

src/stores/concernements.js

@@ -23,6 +23,7 @@ export const ConcernementsStore = defineStore({
     allBesoinsById: {},
     allSuperpositions: [],
     allSuperpositions_bycids: {},
+    allSuperpositions_clustered: [],
     allMapItems_byid: {},
     allProximites: [],
     opened_concernement: false,
@@ -173,8 +174,7 @@ export const ConcernementsStore = defineStore({
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;
 
-            });
-
+            }); // end of concernements loop
             console.log('temp_allSuperpositions', temp_allSuperpositions);
 
             // cleaning superpositions, removing all incomplète onces
@@ -185,47 +185,59 @@ export const ConcernementsStore = defineStore({
                 this.concernementsByID[s[1].cid].has_superpositions = true;
               }
             });
-
             console.log('this.allSuperpositions', this.allSuperpositions);
 
 
-            
-            // Handle multiple superpositions accross two concernements
-            for(let superposition of this.allSuperpositions){
-              let superposition_couple_id = `${superposition[0].cid}-${superposition[1].cid}`;
-              let superposition_id = `${superposition[0].cid}_${superposition[0].eid}__${superposition[1].cid}_${superposition[1].eid}`
-              // record allSuperpositions_bycids
-              if (!this.allSuperpositions_bycids[superposition_couple_id]) {
-                this.allSuperpositions_bycids[superposition_couple_id] = {};
-              }
-              this.allSuperpositions_bycids[superposition_couple_id][superposition_id] = superposition;
-
-              // record allSuperpositions_bycid
-              for (let i = 0; i < 2; i++) {
-                // i is the current concernement, j is the target
-                let j = i === 0 ? 1 : 0;
-                // if (!this.allSuperpositions_bycid[superposition[i].cid]) {
-                //   this.allSuperpositions_bycid[superposition[i].cid] = [];
-                // }
-                if(this.concernementsByID[superposition[i].cid]){
-                  if (!this.concernementsByID[superposition[i].cid].superpositions[superposition_couple_id]) {
-                    this.concernementsByID[superposition[i].cid].superpositions[superposition_couple_id] = {};
+            // get superpositions by cluster
+            for(let superpos_to_record of this.allSuperpositions){
+              let recorded = false;
+              // console.log('-- -- --');
+              // console.log(`superpos_to_record : ${superpos_to_record[0].cid}-${superpos_to_record[0].eid}, ${superpos_to_record[1].cid}-${superpos_to_record[1].eid}`);
+              // loop through alredy recorded clusters
+              for(let [cluster_index, superpo_cluster] of this.allSuperpositions_clustered.entries()){
+                // console.log('cluster_index', cluster_index);
+                // for each cluster loop throug each superposition
+                in_cluster_loop:{
+                  for(let s of superpo_cluster){
+                    // console.log(`s : ${s.cid}-${s.eid}`);
+                    // loop through each cid_eid couple of superpo to be recorded
+                    for(let i = 0; i <= 1; i++){
+                      // if one couple already recorded in the cluster, add the other one to the same cluster
+                      if (superpos_to_record[i].cid === s.cid && superpos_to_record[i].eid === s.eid){
+                        // console.log('-- recorded');
+                        let j = i === 0 ? 1 : 0;
+                        // add the right item to the cluster
+                        this.allSuperpositions_clustered[cluster_index].push(superpos_to_record[j]);
+                        // record the superposition on the concernement BY cluster index
+                        // console.log(`superpos_to_record[j].cid:${superpos_to_record[j].cid}`);
+                        // console.log('concernement', this.concernementsByID[superpos_to_record[j].cid]);
+                        // create array if not already exists
+                        if(typeof this.concernementsByID[superpos_to_record[j].cid].superpositions[cluster_index] === 'undefined'){
+                          this.concernementsByID[superpos_to_record[j].cid].superpositions[cluster_index] = [superpos_to_record];
+                        }else{
+                          this.concernementsByID[superpos_to_record[j].cid].superpositions[cluster_index].push(superpos_to_record);
+                        }
+                        recorded = true;
+                        break in_cluster_loop;
+                      }
+                    }
                   }
-                  // let s = {
-                  //   eid: superposition[i].eid,
-                  //   target_cid: superposition[j].cid,
-                  //   target_eid: superposition[j].eid,
-                  // };
-                  // this.allSuperpositions_bycid[superposition[i].cid].push(s)
-                  // this.concernementsByID[superposition[i].cid].superpositions.push(s);
-                  this.concernementsByID[superposition[i].cid].superpositions[superposition_couple_id][superposition_id] = superposition;
-
                 }
+              }
 
+              if(!recorded){
+                // console.log('-- not recorded');
+                // create cluster and fill it it with first couple
+                this.allSuperpositions_clustered.push(superpos_to_record);
+                // record superposition on each concernement of each couple member BY cluster index
+                for( let i=0; i <= 1; i++){
+                  this.concernementsByID[superpos_to_record[i].cid].superpositions[this.allSuperpositions_clustered.length-1] = [superpos_to_record];
+                  // console.log(`concernement ${superpos_to_record[i].cid} superposition by cluster index`,this.concernementsByID[superpos_to_record[i].cid].superpositions);
+                }
               }
             }
-            console.log('this.allSuperpositions_bycids', this.allSuperpositions_bycids);
-            // console.log('this.allSuperpositions_bycid', this.allSuperpositions_bycid);
+            console.log('this.allSuperpositions_clustered', this.allSuperpositions_clustered);
+
 
             this.concernements_loaded = true;
           })

src/views/Concernement.vue

@@ -30,7 +30,7 @@ export default {
     return {
       // entite: null,
       proximite_cid_eid: null,
-      superposition_id: null,
+      superposition_cluster_index: null,
       superposition: null,
       opened_besoin_id: null,
       arrowup_path: mdiArrowUp
@@ -40,7 +40,7 @@ export default {
     ...mapState(ConcernementsStore,['map_mode',
                                     'opened_concernement',
                                     'concernements_loaded',
-                                    'allSuperpositions_bycids']),
+                                    'allSuperpositions_clustered']),
     ...mapState(CommonStore,['cartouch_width']),
     // 
     main_cid_eid () {
@@ -82,7 +82,7 @@ export default {
   },
   created () {
     console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
-    console.log('Concernement view created, allSuperpositions_bycids', this.allSuperpositions_bycids);
+    console.log('Concernement view created, allSuperpositions_clustered', this.allSuperpositions_clustered);
     console.log("superposition", this.superposition);
 
     if(this.map_mode === "proximite" && this.$route.query.proximite_cid && this.$route.query.proximite_eid){
@@ -93,7 +93,7 @@ export default {
       // as we have two content to show multiply the cartouch with by 2
       // necessary for mapitem opening scale and position
       this.setCartoucheWidth(2)
-    }else if(this.map_mode === "superposition" && this.$route.query.superposition_id){
+    }else if(this.map_mode === "superposition" && this.$route.query.superposition_cluster_index){
       this.getSuperposition()
       // as we have two content to show multiply the cartouch with by 2
       // necessary for mapitem opening scale and position
@@ -131,7 +131,7 @@ export default {
     $route: {
       handler (n, o) {
         console.log("concernement view $route watcher o, n", o, n);
-        if (n.query && n.query.superposition_id) {
+        if (n.query && n.query.superposition_cluster_index) {
           this.getSuperposition()
         }
         if (n.query && n.query.proximite_cid && n.query.proximite_eid) {
@@ -157,17 +157,28 @@ export default {
     ...mapActions(CommonStore,['setCartoucheWidth']),
     getSuperposition(){
       console.log('getSuperposition');
-      // 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_bycids[couple_key][this.superposition_id]) {
-            this.superposition = this.allSuperpositions_bycids[couple_key][this.superposition_id]
-            console.log("this.superposition", this.superposition);
+      // get superposition_cluster_id and superposition object
+      if (this.$route.query.superposition_cluster_index) {
+        this.superposition_cluster_index = this.$route.query.superposition_cluster_index;
+        console.log('this.superposition_cluster_index', this.superposition_cluster_index);
+        if(this.superposition_cluster_index){
+          // 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_bycids[couple_key][this.superposition_id]) {
+          //   this.superposition = this.allSuperpositions_bycids[couple_key][this.superposition_id]
+          //   console.log("this.superposition", this.superposition);
+          // }
+          let cluster = this.allSuperpositions_clustered[this.superposition_cluster_index];
+          this.superposition = []
+          for(let cid_eid of cluster){
+            if (cid_eid.cid === this.cid) {
+              this.superposition.push(cid_eid)
+            }
+            if (cid_eid.cid === parseInt(this.$route.query.superposed_cid)){
+              this.superposition.push(cid_eid)
+              // console.log('this.superposition', this.superposition);
+            }
           }
         }
       }