superpositions: displaying the right entite to the right map_item

src/App.vue

@@ -32,27 +32,28 @@ export default {
       let clones = [];
       // loop through all superposition grouped by concernements couples
       for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
-        // if one concernement couple has more than one superposition
-        let superpositions_ids = Object.keys(superpositions);
-        if (superpositions_ids.length > 1) {
-          // loop through these superpositions for one concernement couple starting with the second
-          let i = 0;
-          for(let [superposition_id, superposition] of Object.entries(superpositions)){
-            i++
-            if (i === 1) {
-              continue;
-            }
-            // 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
-            })
+        // 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_byid[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_byid[couple_id][superposition_id].cloned = true;
         }
       }
       return clones;

src/components/ConcernementMapItem.vue

@@ -67,6 +67,7 @@ export default {
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernementsByID',
+                                    'allSuperpositions_byid',
                                     'opened_concernement',
                                     'opened_entite_id']),
     ...mapState(CommonStore,['hover_elmt',
@@ -76,12 +77,13 @@ export default {
                             'paper_symbol_definitions'])
   },
   created () {
-    console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
-    this.id = this.concernement.id
+    this.cid = this.concernement.id;
+    this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
+    console.log(`ConcernementsMapItem ${this.id} created`);
     // this.entites = this.concernement.entites
     this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
-    // this.entites_byid = this.concernement.entites_byid
     
+
     // disable concernement if less than 3 entite
     if(this.entites.length < 3){
       this.hideShowConcernement(this.concernement.id, false);
@@ -108,7 +110,7 @@ export default {
       // }  
     }
 
-    this.setConcernementMapItem(this.id, this);
+    // this.setConcernementMapItem(this.cid, this);
   },
   // mounted() {
   //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
@@ -116,13 +118,10 @@ export default {
   // },
   // beforeUnmount () {
   unmounted () {
-    console.log(`mapitem ${this.id} unmounted`);
+    // console.log(`mapitem ${this.id} unmounted`);
     if(this.superposition_id) {
-      console.log(`this.paper_main_object ${this.paper_main_object.id}`, this.paper_main_object);
-      // this.paper_main_object.remove()
-      // paper.remove(this.paper_main_object.id);
-      // paper.children[`clone_${this.id}.${this.superposition_id}`].remove();
-      paper.project.getItem({name:`clone_${this.id}.${this.superposition_id}`}).remove();
+      // console.log(`this.paper_main_object ${this.paper_main_object.id}`, this.paper_main_object);
+      paper.project.getItem({id:this.paper_main_object.id}).remove();
     };
     if (this.body) {
       Matter.Composite.remove(this.matterEngine.world, this.body);
@@ -196,8 +195,8 @@ export default {
   },
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
-    ...mapActions(ConcernementsStore,['setConcernementMapItem',
-                                      'openCloseConcernements',
+    ...mapActions(ConcernementsStore,['openCloseConcernements',
+                                      // 'setConcernementMapItem',
                                       'hideShowConcernement',
                                       'setBesoinPaperId',
                                       'setOpenedDoleanceField',
@@ -408,7 +407,7 @@ export default {
         this.body = Matter.Body.create({
           parts: this.body_parts,
           item_type: 'concernement',
-          id: this.superposition_id ? `${this.concernement.id}_${this.superposition_id}` : this.concernement.id,
+          id: this.id,
           frictionAir: 0,
           // mass: Math.pow(3, this.entites.length),
           // mass: 10,
@@ -471,11 +470,12 @@ export default {
     },
     // PAPER OBJECTS
     initPaperObjects(){
+
       // the main paper group containing all paper graphical items for one concernement
       this.paper_main_object = new paper.Group({
         pivot: new paper.Point(this.pos),
-        name: this.superposition_id ? `clone_${this.id}.${this.superposition_id}` : `main_${this.id}`,
-        cid: this.id,
+        name: `main_${this.id}`,
+        cid: this.cid,
         superposition_id: this.superposition_id
       });
 
@@ -659,14 +659,55 @@ export default {
       return g;
     },
     setPaperEntitesSuperposees(){
-      console.log('setPaperSuperpositions');
+      console.log('setPaperSuperpositions, superpositions', this.concernement.superpositions);
+
+      // find the right entite(s) to display on this original map_item vs cloned map item
+      // (clones are needed for multiple superpositions by concernement couples)
+      let eids = [];
+      if (this.superposition_id) {
+        // console.log('has superposition_id', this.superposition_id);
+        // if we have a superposition_id prop then we are on a temporary concernement map_item clone 
+        // find the right entite id from the superposition_id prop
+        let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
+        // console.log('ids', ids);
+        switch (this.cid) { // get the right eid regarding the cid
+          case parseInt(ids[1]):
+            eids.push(parseInt(ids[2]));
+            break;
+          case parseInt(ids[3]):
+            eids.push(parseInt(ids[4]));
+            break;
+        }
+      } else {
+        // console.log('DONOT has superposition_id');
+        // if we do not have a superposition_id prop then we are on the regular concernement map_item
+        // loop through all concernement superpositions and select only thoose which are not part of a temporary cloned
+        for(let [couple_id, superpositions] of Object.entries(this.concernement.superpositions)){
+          for(let [superposition_id, superposition] of Object.entries(superpositions)){
+            if (!superposition.cloned) { // not part of a clone
+              switch (this.cid) { // get the right eid regarding the cid
+                case superposition[0].cid:
+                  eids.push(superposition[0].eid);
+                  break;
+                case superposition[1].cid:
+                  eids.push(superposition[1].eid);
+                  break;
+              }
+            }
+          }
+        }
+      }
+      // console.log('eids', eids);
+
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites_superposes'
       });
       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 && entite.entite.superposition.length) {
+        if (entite.entite // check if we have an entite object with all the contents
+            && eids.indexOf(entite.entite.id) >= 0) // check if entite id is in the list builded above
+          {
           // console.log(`entite ${entite.entite.id}`, entite, entite.entite.superposition);
           // use paper symbol
           let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);

src/components/MapConcernements.vue

@@ -1068,19 +1068,19 @@ export default {
             matter_bodyA_id = superposition[0].cid
             matter_bodyB_id = superposition[1].cid
           } else {
-            matter_bodyA_id = `${superposition[0].cid}_${superposition_id}`
-            matter_bodyB_id = `${superposition[1].cid}_${superposition_id}`
+            matter_bodyA_id = `${superposition[0].cid}___${superposition_id}`
+            matter_bodyB_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');
-          console.log('bodyA, bodyB', bodyA, bodyB);
+          // 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);
+          // 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);
@@ -1090,7 +1090,7 @@ export default {
           }
           let pointB = null;
           let concernementB = this.concernementsByID[superposition[1].cid];
-          console.log('concernementB', concernementB);
+          // 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);

src/stores/concernements.js

@@ -23,6 +23,7 @@ export const ConcernementsStore = defineStore({
     allBesoinsById: {},
     allSuperpositions: [],
     allSuperpositions_byid: {},
+    // allSuperpositions_bycid: {},
     allProximites: [],
     opened_concernement: false,
     opened_entite_id: null,
@@ -93,7 +94,7 @@ export const ConcernementsStore = defineStore({
                   // SUPERPOSITIONS
                   if (entite.entite.superposition.length) {
                     concernement.has_superpositions = true;
-                    // concernement.superpositions = [];
+                    concernement.superpositions = {};
                     concernement.superposition_constraints_id = [];
                     concernement.superposed_concernements_id = [];
 
@@ -174,13 +175,36 @@ export const ConcernementsStore = defineStore({
             // 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}`
+              let superposition_id = `${superposition[0].cid}_${superposition[0].eid}__${superposition[1].cid}_${superposition[1].eid}`
+              // record allSuperpositions_byid
               if (!this.allSuperpositions_byid[superposition_couple_id]) {
                 this.allSuperpositions_byid[superposition_couple_id] = {};
               }
               this.allSuperpositions_byid[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].superpositions[superposition_couple_id]) {
+                  this.concernementsByID[superposition[i].cid].superpositions[superposition_couple_id] = {};
+                }
+                // 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;
+
+              }
             }
             console.log('this.allSuperpositions_byid', this.allSuperpositions_byid);
+            // console.log('this.allSuperpositions_bycid', this.allSuperpositions_bycid);
 
             this.concernements_loaded = true;
           })
@@ -325,9 +349,9 @@ export const ConcernementsStore = defineStore({
         }
       });
     },
-    setConcernementMapItem (id, o) {
-      this.concernementsByID[id].map_item = o;
-    },
+    // setConcernementMapItem (id, o) {
+    //   this.concernementsByID[id].map_item = o;
+    // },
     resetConcernementOpened () {
       this.opened_concernement = null;
       this.openCloseConcernements();