From ef0d8cedf691a702b3afa735e605cba57fd1b1b0 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Wed, 13 Sep 2023 21:30:12 +0200
Subject: [PATCH] superposition map behaviours bug fix

---
 src/App.vue                            |   6 +-
 src/components/ConcernementMapItem.vue | 169 ++++++++++++-------------
 src/components/MapConcernements.vue    | 108 ++++++++++------
 src/router/index.js                    |   2 +-
 src/stores/concernements.js            |  15 +--
 5 files changed, 163 insertions(+), 137 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7c23ae3..e2a19e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,6 +63,10 @@ export default {
     ...mapActions(ConcernementsStore,['loadConcernements']),
     ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
     ...mapActions(UserStore,['checkUser']),
+
+    // mapitem_opened(concernement){
+    //   return concernement.opened;
+    // }
   },
   components: {
     MapConcernements,
@@ -97,7 +101,6 @@ export default {
           v-if="concernement.visible"
           :key="index"
           :concernement="concernement"
-          :is_opened="concernement.opened"
           :active_revision="concernement.active_revision"
         />
       </template>
@@ -107,7 +110,6 @@ export default {
             v-if="superposition.concernement.visible"
             :key="index"
             :concernement="superposition.concernement"
-            :is_opened="superposition.concernement.opened"
             :active_revision="superposition.concernement.active_revision"
             :superposition_id="superposition.superposition_id"
           />
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index d119a2c..e70abe3 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -1,23 +1,5 @@
 <script>
 
-// https://brm.io/matter-js/docs/classes/Engine.html
-// import {
-//   // Engine,
-//   // Render,
-//   // World,
-//   Bodies,
-//   Body,
-//   Events,
-//   Composite,
-//   // Composites,
-//   // Constraint,
-//   // Vertices,
-//   // Mouse,
-//   // MouseConstraint,
-//   // Query,
-//   // Common
-// } from "matter-js";
-
 import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
@@ -52,6 +34,7 @@ export default {
       prev_scale: 1,
       opacity: 0,
       tween: null,
+      is_open: false,
       is_opening: false,
       is_closing: false,
       is_hover: false,
@@ -64,7 +47,7 @@ export default {
       paper_groups: {}
     }
   },
-  props: ['concernement', 'is_opened', 'active_revision', 'superposition_id'],
+  props: ['concernement', 'active_revision', 'superposition_id'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernementsByID',
@@ -74,13 +57,13 @@ export default {
     ...mapState(CommonStore,['hover_elmt',
                             'map_item_ray',
                             'cartouch_width',
-                            'cartouch_is_opened',
+                            'cartouch_is_open',
                             'paper_symbol_definitions'])
   },
   created () {
     this.cid = this.concernement.id;
     this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
-    console.log(`ConcernementsMapItem ${this.id} created`);
+    // console.log(`ConcernementsMapItem ${this.id} created`);
     // this.entites = this.concernement.entites
     this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
     
@@ -141,21 +124,28 @@ export default {
       },
       deep: true
     },
-    is_opened: {
+    opened_concernement: {
       handler (n, o) {
-        // console.log('mapItem watch is_opened', n, this.is_opened);
-        if(n){ // opened
-          this.openClose(true);
-        }else if(o) { // closed if was opened
-          this.openClose(false);
+        if (!n) { // if there is no opened concernement
+          this.is_open = false;
+          this.applyShuffleForces();
+        } else {
+          if(this.cid === n.id && this.id === n.opened_mapitem_id){
+            this.is_open = true;
+          }else{
+            this.is_open = false;
+          }
         }
       },
       deep: true
     },
-    opened_concernement: {
+    is_open: {
       handler (n, o) {
-        if (!n) {
-          this.applyShuffleForces();
+        // console.log('mapItem watch is_open', n, this.is_open);
+        if(n){ // opened
+          this.openClose(true);
+        }else if(o) { // closed if was opened
+          this.openClose(false);
         }
       },
       deep: true
@@ -166,7 +156,7 @@ export default {
         if (n === 'terraindevie' && !this.opened_concernement) {
           this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
         }
-        if (this.is_opened & n !== o) {
+        if (this.is_open & n !== o) {
           this.setPaperContents();
         }
         if (n !== o) {
@@ -674,12 +664,12 @@ export default {
       const contrs = new paper.Path({
         name: 'contours',
         segments: segments,
-        fillColor: 'rgba(255,255,255,0.4)',
+        fillColor: 'rgba(255,255,255,0.4)', // this.superposition_id ? 'rgba(255,0,0,0.4)' : 'rgba(255,255,255,0.4)',
         // selected: true,
         strokeColor: '#fff',
         strokeWidth: 1,
         pivot: new paper.Point(this.pos),
-        cid: this.id
+        cid: this.cid
       });
 
       return contrs;
@@ -807,7 +797,7 @@ export default {
         besoin.item_type = 'besoin';
         besoin.is_symbol_instance = true;
         console.log(`paper besoin id:${besoin.id}`);
-        this.setBesoinPaperId(besoin.id, this.id, this.concernement.besoins[i].id);
+        this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
         g.addChild(besoin)
 
         let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
@@ -830,7 +820,7 @@ export default {
               reponse.item_cid = this.concernement.id;
               reponse.item_type = 'reponse';
               reponse.is_symbol_instance = true;
-              this.setBesoinPaperId(reponse.id, this.id, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
+              this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
               g.addChild(reponse)
             }
           }
@@ -1133,7 +1123,7 @@ export default {
     handlePaperVisibilityOnBeforeOpen(){
       // agissantes
       if (this.concernement.has_agissantes && this.map_mode === "action") {
-        if (!this.is_opened) {
+        if (!this.is_open) {
           this.paper_main_object.children.agissantes_icons.visible = true;
         } else {
           this.paper_main_object.children.agissantes_icons.visible = false;
@@ -1150,7 +1140,7 @@ export default {
     handlePaperVisibilityOnClosed(){
       // agissantes
       if (this.concernement.has_agissantes && this.map_mode === "action") {
-        if (!this.is_opened) {
+        if (!this.is_open) {
           this.paper_main_object.children.agissantes_icons.visible = true;
         } else {
           this.paper_main_object.children.agissantes_icons.visible = false;
@@ -1163,9 +1153,9 @@ export default {
     handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
       if (!this.isFocused()){
-        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)";
+        this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.1)'; //this.superposition_id ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
       }else{
-        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)";
+        this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.4)'; //this.superposition_id ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
         if (this.is_hover) {
           this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
           this.paper_main_object.children['contours'].strokeWidth = 2;
@@ -1178,8 +1168,8 @@ export default {
       }
 
       // contours visibility
-      if (!this.is_opened 
-        || (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
+      if (!this.is_open 
+        || (this.is_open && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
         this.paper_main_object.children['contours'].visible = true;
       } else {
         this.paper_main_object.children['contours'].visible = false;
@@ -1190,7 +1180,7 @@ export default {
       // superposition
       if (this.concernement.has_superpositions) {
         if (this.map_mode === "superposition") {
-          if (!this.is_opened) {
+          if (!this.is_open) {
             this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points
           } else {
             this.paper_main_object.children.entites_superposes.visible = true;
@@ -1203,7 +1193,7 @@ export default {
       // puissance d'agir     
       if (this.concernement.has_puissancedagir) {
         if (this.map_mode === "puissancedagir") {
-          if (!this.is_opened) {
+          if (!this.is_open) {
             this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
           } else {
             this.paper_main_object.children.puissanceagir_icon.visible = false;
@@ -1217,7 +1207,7 @@ export default {
       if (this.concernement.has_agissantes) {
         if (this.map_mode !== "action") {
           this.paper_main_object.children.agissantes_icons.visible = false;
-        } else if(!this.is_opened && !this.is_closing){
+        } else if(!this.is_open && !this.is_closing){
           this.paper_main_object.children.agissantes_icons.visible = true;
         }
       }
@@ -1225,7 +1215,7 @@ export default {
       // doleance     
       if (this.concernement.has_doleance) {
         if (this.map_mode === "doleancer") {
-          if (!this.is_opened) {
+          if (!this.is_open) {
             this.paper_main_object.children.doleance_icon.visible = true;
           } else {
             this.paper_main_object.children.doleance_icon.visible = false;
@@ -1240,7 +1230,7 @@ export default {
       }
       
       // focus on opened entite
-      if (this.is_opened && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
+      if (this.is_open && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
         let group = this.map_mode === 'terraindevie' ? this.paper_main_object.children['entites'] : this.paper_main_object.children['agissantes'];
         if(group){
           group.children.forEach((item) => {
@@ -1279,16 +1269,6 @@ export default {
     // PAPER EVENTS
     initPaperEvents(){
 
-      // this.paper_main_object.onMouseEnter = function(event){
-      //   if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
-      //     this.setHoverElmt({
-      //       type: 'concernement',
-      //       id: this.id
-      //     });
-      //     document.body.style.cursor = "pointer";
-      //   }
-      // }.bind(this);
-      
       this.paper_main_object.onMouseLeave = function(event){
         if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
           this.resetHoverElmt();
@@ -1300,11 +1280,11 @@ export default {
         // console.log(`onmousemove ${this.id}`);
 
         // prevent hover map item mouse event if cartouch is opened
-        if (this.cartouch_is_opened) {
+        if (this.cartouch_is_open) {
           return;
         }
 
-        if (!this.is_opened) {
+        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
@@ -1382,20 +1362,18 @@ export default {
         console.log('paper concernement onClick');
 
         // prevent hover map item mouse event if cartouch is opened
-        if (this.cartouch_is_opened) {
-          return;
-        }
+        if (this.cartouch_is_open) return;
         
-        if (!this.is_opened) { // si ce concernement n'est pas ouvet
+        if (!this.is_open) { // si ce concernement n'est pas ouvet
           if (!this.opened_concernement) { // si aucun concernement n'est ouvert
             console.log(`Open me ${this.id}`);
             // open/close all concernements
-            this.openCloseConcernements(this.id)
+            this.openCloseConcernements(this.cid, this.id)
               // push route (keep the hash for map_mode)
             this.$router.push({
               name: 'concernement',
               hash: `#${this.map_mode}`,
-              params: {id: this.id}
+              params: {id: this.cid, mapitemid: this.id}
             });
             // reset the mousehover
             this.resetHoverElmt();
@@ -1425,11 +1403,11 @@ export default {
                   this.$router.push({
                     name: 'concernement',
                     hash: `#${this.map_mode}`,
-                    params: {id: this.id, eid: result.item.item_id}
+                    params: {id: this.cid, mapitemid: this.id, eid: result.item.item_id}
                   });    
                   break;
                 case "doleancer":
-                  this.setOpenedDoleanceField(this.id, result.item.did, result.item.field, result.item.field_index);
+                  this.setOpenedDoleanceField(this.cid, result.item.did, result.item.field, result.item.field_index);
                   break;
               }
               
@@ -1438,7 +1416,7 @@ export default {
               this.$router.push({
                 name: 'concernement',
                 hash: `#${this.map_mode}`,
-                params: {id: this.id}
+                params: {id: this.cid, mapitemid: this.id}
               });
               // reset the mousehover
               this.resetHoverElmt();
@@ -1456,7 +1434,7 @@ export default {
     },
     // OPEN / CLOSE (with tween)
     openClose(open) {
-      // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
+      console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
       if (this.tween) {
         this.tween.stop();
       }
@@ -1492,11 +1470,15 @@ export default {
             this.paper_main_object.scale(obj.s);
 
             // update superposition constraints points
-            if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) {
+            if (this.concernement.superposition_constraints_id 
+              && this.concernement.superposition_constraints_id[this.id] 
+              && this.concernement.superposition_constraints_id[this.id].length)
+            {
               // get all the constraints of the world
               let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
               // loop through all constraint ids recorded in the concernement
-              for(let constraint_id of this.concernement.superposition_constraints_id) {
+              // get only the constraint of this concernement mapitem
+              for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
                 // get the right constraint object from matter
                 let constraint;
                 for (const c of all_constrains) {
@@ -1507,7 +1489,7 @@ export default {
                 }  
                 if (constraint) {
                   // tween the constraint point
-                  let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
+                  let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
                   let point = constraint[`point${ab}`];
                   // revert to the original point
                   let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
@@ -1579,11 +1561,15 @@ export default {
             this.paper_main_object.scale(obj.s);
             
             // update superposition constraints points
-            if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) {
+            if (this.concernement.superposition_constraints_id 
+              && this.concernement.superposition_constraints_id[this.id] 
+              && this.concernement.superposition_constraints_id[this.id].length)
+            {
               // get all the constraints of the world
               let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
               // loop through all constraint ids recorded in the concernement
-              for(let constraint_id of this.concernement.superposition_constraints_id) {
+              // get only the constraint of this concernement mapitem
+              for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
                 // get the right constraint object from matter
                 let constraint;
                 for (const c of all_constrains) {
@@ -1594,7 +1580,7 @@ export default {
                 }  
                 if (constraint) {
                   // tween the constraint point
-                  let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
+                  let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
                   let point = constraint[`point${ab}`];
                   // revert to the original point
                   let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
@@ -1622,22 +1608,20 @@ export default {
     // ENGINE UPDATE
     onBeforeEngineUpdate (event) {
 
-      // TODO stop item on mouse hover 
-      if (this.hover_elmt && this.hover_elmt.id === this.id) {
-        // Matter.Body.setStatic(this.body, true);
-      } else {
-        // Matter.Body.setStatic(this.body, false);
-      }
-
       // update the opening/closing tweening
       if (this.tween) {
         this.tween.update();
       }
 
       if (this.opened_concernement) {
+        // console.log("try to push aside", this.opened_concernement.opened_mapitem_id, this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]);
+        // console.log(this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id));
         if (
-          this.opened_concernement.id !== this.id 
-          && (!this.opened_concernement.superposed_concernements_id || this.opened_concernement.superposed_concernements_id.indexOf(this.id) < 0)
+          // this.opened_concernement.id !== this.cid &&
+          this.opened_concernement.opened_mapitem_id !== this.id 
+          // && (!this.opened_concernement.all_superposed_concernements_id || this.opened_concernement.all_superposed_concernements_id.indexOf(this.id) < 0)
+          && (!this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id] // when we are not in superposition mode
+              || this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id) < 0) // this mapitem is not superposed to the opened mapitem
         ) {
           this.pushAside()
         }
@@ -1671,7 +1655,7 @@ export default {
           || (this.map_mode === 'doleancer' && this.concernement.has_doleance);
     },
     pushAside(){
-      // console.log('pushAside', this.opened_concernement);
+      // console.log('pushAside');
       // apply a force in direction of one side or an other depending of the start position
       // the force is exponentialy proportional to the distance from the side
       // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
@@ -1680,9 +1664,14 @@ export default {
         ? (this.canvas.width - this.cartouch_width) / 2
         : this.canvas.width / 2;
       // get the direction to the closest side
-      let dir = this.pos.x > pseudo_center_x
-        ? 1 // to the right
-        : -1; // to the left
+      let dir = 
+        this.pos.x < pseudo_center_x 
+        || (this.map_mode === 'superposition' 
+          && this.concernement.superposition_constraints_id
+          && this.concernement.superposition_constraints_id[this.id]
+          && this.concernement.superposition_constraints_id[this.id].length) // go to the left if has superposition constraint applied
+        ? -1 // to the left
+        : -1; // to the right
       // max and min item position
       let minp = 0;
       let maxp = dir < 0 
@@ -1962,6 +1951,12 @@ export default {
     onAfterEngineUpdate (event) {
       this.respawn();
 
+      // stop item on mouse hover 
+      // if (this.hover_elmt && this.hover_elmt.id === this.id) {
+      //   // Matter.Body.setStatic(this.body, true);
+      // } else {
+      //   // Matter.Body.setStatic(this.body, false);
+      // }
       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
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index e16087c..70d41be 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -221,7 +221,7 @@ export default {
     },
     map_mode: {
       handler (n, o) {
-        console.log('concernementMap watch map_mode', o, n);
+        console.log('concernementMap watch map_mode o n', o, n);
         if (n === 'superposition' && !this.opened_concernement) {
           // create constraints
           this.setSuperpositionsMatterConstraints();
@@ -232,6 +232,18 @@ export default {
       },
       deep: true
     },
+    opened_concernement: {
+      handler (n, o) {
+        console.log('concernementMap watch opened_concernement o n', o, n);
+        // if (n && this.map_mode === 'superposition') {
+        //   this.clearSuperpositionsMatterConstraints();
+        // }
+        // if(o && !n){
+        //   this.setSuperpositionsMatterConstraints();
+        // }
+      },
+      deep: true
+    },
     allSuperpositions: {
       handler (n, o) {
         console.log('concernementMap watch allSuperpositions', o, n);
@@ -1050,11 +1062,7 @@ export default {
     async setSuperpositionsMatterConstraints(){
       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);
-      // let allComposites = Matter.Composite.allComposites(this.world); 
-      // console.log('allComposites', allComposites);
-
+      
       // loop through all supperposition couple
       for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
         // if couple has only one superposition, use regular mapItems
@@ -1062,25 +1070,30 @@ export default {
         let i = 0;
         for(let [superposition_id, superposition] of Object.entries(superpositions)){
           i++;
-          // console.log('superposition', superposition[0].cid, superposition[1].cid);
-          let matter_bodyA_id, matter_bodyB_id;
-          if (superpositions_ids.length === 1 || i === 1) {
-            matter_bodyA_id = superposition[0].cid
-            matter_bodyB_id = superposition[1].cid
+          
+          let concernementA = this.concernementsByID[superposition[0].cid];
+          // console.log('concernementA', concernementA);
+          let concernementB = this.concernementsByID[superposition[1].cid];
+          // console.log('concernementB', concernementB);
+
+          // console.log('superposition', superposition_id, superposition);
+          let mapitemA_id, mapitemB_id;
+          if (i === 1) {
+            mapitemA_id = superposition[0].cid
+            mapitemB_id = superposition[1].cid
           } else {
-            matter_bodyA_id = `${superposition[0].cid}___${superposition_id}`
-            matter_bodyB_id = `${superposition[1].cid}___${superposition_id}`
+            mapitemA_id = `${superposition[0].cid}___${superposition_id}` 
+            mapitemB_id = `${superposition[1].cid}___${superposition_id}` 
           }  
           
+          
           // get the concernement matter bodies with id
-          let bodyA = Matter.Composite.get(this.world, matter_bodyA_id, 'body');
-          let bodyB = Matter.Composite.get(this.world, matter_bodyB_id, 'body');
+          let bodyA = Matter.Composite.get(this.world, mapitemA_id, 'body'); // matter body id is the same as mapitem_id
+          let bodyB = Matter.Composite.get(this.world, mapitemB_id, 'body'); // matter body id is the same as mapitem_id
           // console.log('bodyA, bodyB', bodyA, bodyB);
             
           // get the entite coordinates inside the concernement body
           let pointA = null;
-          let concernementA = this.concernementsByID[superposition[0].cid];
-          // console.log('concernementA', concernementA);
           for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
             if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
               // console.log('entiteA', entiteA);
@@ -1089,8 +1102,6 @@ export default {
             }
           }
           let pointB = null;
-          let concernementB = this.concernementsByID[superposition[1].cid];
-          // console.log('concernementB', concernementB);
           for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
             if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
               // console.log('entiteB', entiteB);
@@ -1115,14 +1126,36 @@ export default {
             this.superpositions_constraints.push(c);
             Matter.Composite.add(this.world, c);
             // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem)
-            concernementA.superposition_constraints_id.push(c.id);
-            concernementB.superposition_constraints_id.push(c.id);
-            // record all superposed concernements for each concernement
-            if (concernementA.superposed_concernements_id.indexOf(concernementB.id) < 0) {
-              concernementA.superposed_concernements_id.push(concernementB.id);
+            if(!concernementA.superposition_constraints_id[mapitemA_id]){
+              concernementA.superposition_constraints_id[mapitemA_id] = [];
             }
-            if (concernementB.superposed_concernements_id.indexOf(concernementA.id) < 0) {
-              concernementB.superposed_concernements_id.push(concernementA.id);
+            concernementA.superposition_constraints_id[mapitemA_id].push(c.id);
+            if(!concernementB.superposition_constraints_id[mapitemB_id]){
+              concernementB.superposition_constraints_id[mapitemB_id] = [];
+            }
+            concernementB.superposition_constraints_id[mapitemB_id].push(c.id);
+
+            // record all superposed concernements for each concernement
+            if (concernementA.all_superposed_concernements_id.indexOf(concernementB.id) < 0) {
+              concernementA.all_superposed_concernements_id.push(concernementB.id);
+            }
+            if (concernementB.all_superposed_concernements_id.indexOf(concernementA.id) < 0) {
+              concernementB.all_superposed_concernements_id.push(concernementA.id);
+            }
+            // record all superposed concernements for each concernement by mapitem_id
+            // A
+            if (!concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id]) {
+              concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id] = []
+            }
+            if (concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id].indexOf(mapitemB_id) < 0) {
+              concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id].push(mapitemB_id);
+            }
+            // B
+            if (!concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id]) {
+              concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id] = []
+            }
+            if (concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id].indexOf(mapitemA_id) < 0) {
+              concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id].push(mapitemA_id);
             }
 
           }
@@ -1134,21 +1167,18 @@ export default {
       console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
       for(let constraint of this.superpositions_constraints){
         
-        // Delete superposition constraints recorded in concernement object
-        // delete constraint.concernementA.superposition_constraints[constraint.id];
-        // delete constraint.concernementB.superposition_constraints[constraint.id];
-        let keysA = constraint.concernementA.superposition_constraints_id;
-        keysA.forEach(i => {
-          if(constraint.concernementA.superposition_constraints_id[i] === constraint.id) {
-            delete constraint.concernementA.superposition_constraints_id[i];
-          }
-        });
-        let keysB = constraint.concernementB.superposition_constraints_id;
-        keysB.forEach(i => {
-          if(constraint.concernementB.superposition_constraints_id[i] === constraint.id) {
-            delete constraint.concernementB.superposition_constraints_id[i];
+        // Delete superposition constraints ids recorded in concernement object
+        ['A', 'B'].forEach(ab => {
+          for( let [mapitem_id, constraint_ids] of Object.entries(constraint[`concernement${ab}`].superposition_constraints_id)){
+            let indexes = Object.keys(constraint_ids);
+            indexes.forEach(i => {
+              if(constraint_ids[i] === constraint.id) {
+                delete constraint[`concernement${ab}`].superposition_constraints_id[mapitem_id][i];
+              }
+            })
           }
         });
+        
         Matter.Composite.remove(this.world, constraint, true);
       }
       this.superpositions_constraints = [];
diff --git a/src/router/index.js b/src/router/index.js
index dbbd9e3..e7d06bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,7 +25,7 @@ const router = createRouter({
       props: true
     },
     {
-      path: '/concernement/:id/:eid?',
+      path: '/concernement/:id/:mapitemid/:eid?',
       name: 'concernement',
       // component: ConcernementView,
       // route level code-splitting
diff --git a/src/stores/concernements.js b/src/stores/concernements.js
index 4ed38b8..658c05c 100644
--- a/src/stores/concernements.js
+++ b/src/stores/concernements.js
@@ -95,8 +95,9 @@ export const ConcernementsStore = defineStore({
                   if (entite.entite.superposition.length) {
                     concernement.has_superpositions = true;
                     concernement.superpositions = {};
-                    concernement.superposition_constraints_id = [];
-                    concernement.superposed_concernements_id = [];
+                    concernement.superposition_constraints_id = {};
+                    concernement.all_superposed_concernements_id = [];
+                    concernement.superposed_mapitem_id_by_mapitem_id = {};
 
                     entite.entite.superposition.forEach(entite_superpose => {
                       // console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`);
@@ -331,17 +332,18 @@ export const ConcernementsStore = defineStore({
         }
       })
     },
-    openCloseConcernements (id) {
-      console.log(`openCloseConcernements id: ${id}`);
+    openCloseConcernements (cid, id) {
+      console.log(`openCloseConcernements cid: ${cid}, id: ${id}`);
       var state;
       this.opened_concernement = null;
       this.opened_recit = null;
       this.concernements.forEach((c, i) => {
-        state = id === c.id;
+        state = cid === c.id;
         // console.log(`openCloseConcernements foreach id: ${id}, c.id: ${c.id}, state: ${state}`, id, c.id);
         c.opened = this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
         if (state) {
           this.opened_concernement = c;
+          this.opened_concernement.opened_mapitem_id = id;
           if (c.has_recit) {
             this.opened_recit = c.recit;
           }
@@ -349,9 +351,6 @@ export const ConcernementsStore = defineStore({
         }
       });
     },
-    // setConcernementMapItem (id, o) {
-    //   this.concernementsByID[id].map_item = o;
-    // },
     resetConcernementOpened () {
       this.opened_concernement = null;
       this.openCloseConcernements();