creating clones of map_item for duplicates superposition concernement couples

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({
-              type: 'concernement',
-              id: this.id
-            });
+            if (this.map_mode === 'superposition') {
+              this.setHoverElmt({
+                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 () {