creating clones of map_item for duplicates superposition concernement couples

src/App.vue

@@ -23,9 +23,35 @@ export default {
   },
   computed: {
     ...mapState(UserStore,['isloggedin']),
-    ...mapState(ConcernementsStore,['concernements',
+    ...mapState(ConcernementsStore,['map_mode',
+                                    'concernements',
                                     'concernementsByID',
-                                    'opened_recit'])
+                                    'allSuperpositions_byid',
+                                    'opened_recit']),
+    superposed_clones_concernements () {
+      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
+        if (superpositions.length > 1) {
+          // loop through these superpositions for one concernement couple starting with the second
+          for (let i = 1; i < superpositions.length; i++) {
+            let superposition_id = `${superpositions[i][0].cid}-${superpositions[i][0].eid}--${superpositions[i][1].cid}-${superpositions[i][1].eid}`
+            // first concernement of the couple
+            clones.push({
+              concernement: this.concernementsByID[superpositions[i][0].cid],
+              superposition_id: superposition_id
+            })
+            // second concernement of the couple
+            clones.push({
+              concernement: this.concernementsByID[superpositions[i][1].cid],
+              superposition_id: superposition_id
+            })
+          }
+        }
+      }
+      return clones;
+    }
   },
   methods: {
     ...mapActions(ConcernementsStore,['loadConcernements']),
@@ -69,6 +95,18 @@ export default {
           :active_revision="concernement.active_revision"
         />
       </template>
+      <template v-if="map_mode === 'superposition'">
+        <template v-for="(superposition,index) in superposed_clones_concernements">
+          <ConcernementMapItem
+            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"
+          />
+        </template>
+      </template>
     </MapConcernements>
     <div id="content" :class="{'recit-opened':opened_recit}">
       <RouterView />

src/components/ConcernementMapItem.vue

@@ -63,7 +63,7 @@ export default {
       paper_groups: {}
     }
   },
-  props: ['concernement', 'is_opened', 'active_revision'],
+  props: ['concernement', 'is_opened', 'active_revision', 'superposition_id'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernementsByID',
@@ -114,6 +114,20 @@ export default {
   //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
     
   // },
+  // beforeUnmount () {
+  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();
+    };
+    if (this.body) {
+      Matter.Composite.remove(this.matterEngine.world, this.body);
+    }
+  },
   watch: {
     // canvasMap (n, o) {
     //   console.log("concernementItem watch canvasMap", o, n);
@@ -460,7 +474,9 @@ export default {
       // 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),
-        cid: this.id
+        name: this.superposition_id ? `clone_${this.id}.${this.superposition_id}` : `main_${this.id}`,
+        cid: this.id,
+        superosition_id: this.superposition_id
       });
 
       // the sub items for one concernement
@@ -1219,10 +1235,19 @@ export default {
 
         if (!this.is_opened) {
           if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
-            this.setHoverElmt({
+            if (this.map_mode === 'superposition') {
-              type: 'concernement',
+              this.setHoverElmt({
-              id: this.id
+                type: 'superposition',
-            });
+                cid: this.id,
+                eid: 0 // TODO
+              });
+            } else {
+              this.setHoverElmt({
+                type: 'concernement',
+                id: this.id
+              });
+            }
+            
             document.body.style.cursor = "pointer";
           }
 

src/components/ConcernementMapPopup.vue

@@ -19,6 +19,7 @@ export default {
       entite: null,
       besoin: null,
       reponse: null,
+      superposition: null,
       headphones_path: mdiHeadphones
     }
   },
@@ -37,6 +38,11 @@ export default {
           break;
         }
       }
+    } else if (this.infos.type === 'superposition') {
+      this.superposition = {
+        concernement: this.concernementsByID[this.infos.cid],
+        entite: this.allEntitesById[this.infos.eid]
+      }
     }
   },
   mounted () {

src/stores/concernements.js

@@ -22,6 +22,7 @@ export const ConcernementsStore = defineStore({
     allEntitesById: {},
     allBesoinsById: {},
     allSuperpositions: [],
+    allSuperpositions_byid: {},
     allProximites: [],
     opened_concernement: false,
     opened_entite_id: null,
@@ -92,13 +93,16 @@ export const ConcernementsStore = defineStore({
                   // SUPERPOSITIONS
                   if (entite.entite.superposition.length) {
                     concernement.has_superpositions = true;
+                    // concernement.superpositions = [];
                     concernement.superposition_constraints_id = [];
                     concernement.superposed_concernements_id = [];
+
                     entite.entite.superposition.forEach(entite_superpose => {
                       // console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`);
                       let already_recorded = false;
                       // loop through all already recorded superposition to complete the array instead of create duplicates
                       // TODO check if target cid and eid are accessible before recording the superposition
+                      // check if half of the superpositions is already recorded, if yes complete it (add the missing concernement id)
                       for(let superposition of this.allSuperpositions) { 
                         for(let superposition_item of superposition) {
                           if (superposition_item.eid === entite.entite.id && !superposition_item.cid) {
@@ -112,10 +116,10 @@ export const ConcernementsStore = defineStore({
                           break;
                         }
                       }
-                      // if not already recorded, add it to the array
+                      // if not already recorded, add it to the array. It is incomplete has it's missing one concernement id wich will be filled in next loops
                       if (!already_recorded) {
                         console.log(`NOT already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
-                        this.allSuperpositions.push([
+                        let s = [
                           { 
                             cid: concernement.id, 
                             eid: entite.entite.id
@@ -124,7 +128,10 @@ export const ConcernementsStore = defineStore({
                             cid: null,
                             eid: entite_superpose.id
                           }
-                        ])
+                        ];
+                        // concernement.superpositions.push(s); 
+                        this.allSuperpositions.push(s);
+
                       }
                     })
                   }
@@ -161,7 +168,19 @@ export const ConcernementsStore = defineStore({
               this.concernementsByID[concernement.id] = concernement;
 
             });
+
             console.log('this.allSuperpositions', this.allSuperpositions);
+            
+            // Handle multiple superpositions accross two concernements
+            for(let superposition of this.allSuperpositions){
+              let superposition_id = `${superposition[0].cid}-${superposition[1].cid}`
+              if (!this.allSuperpositions_byid[superposition_id]) {
+                this.allSuperpositions_byid[superposition_id] = [];
+              }
+              this.allSuperpositions_byid[superposition_id].push(superposition);
+            }
+            console.log('this.allSuperpositions_byid', this.allSuperpositions_byid);
+
             this.concernements_loaded = true;
           })
           .catch(error => {