refactored mapitem (main and clones) generation for better superpositions opening

src/App.vue

@@ -13,6 +13,13 @@ import MapConcernements from '@components/MapConcernements.vue'
 import ConcernementMapItem from '@components/ConcernementMapItem.vue'
 
 export default {
+  data() {
+    return {
+      mapitems: [],
+      // not_cloned_mapitems: [],
+      // superposed_cloned_mapitems: []
+    }
+  },
   created () {
     this.loadContentTypeDefinition();
     this.loadConcernements()
@@ -25,48 +32,92 @@ export default {
     ...mapState(UserStore,['isloggedin']),
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernements',
+                                    'concernements_loaded',
                                     'concernementsByID',
                                     '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)){
-        // 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;
+  },
+  watch: {
+    concernements_loaded:{
+      handler (n, o) {
+        if(n && !o){
+          this.parseMapitems()
         }
-      }
-      return clones;
+      },
+      deep: true
     }
   },
   methods: {
     ...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_byid)){
+    //     // 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
+    //       })
 
-    // mapitem_opened(concernement){
-    //   return concernement.opened;
-    // }
+    //       this.allSuperpositions_byid[couple_id][superposition_id].cloned = true;
+    //     }
+    //   }
+    //   this.superposed_cloned_mapitems = clones;
+    // },
+    parseMapitems() {
+      let couple_ids = Object.keys(this.allSuperpositions_byid);
+      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: [],
+          clone: false,
+        }
+        // loop through 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;
+            for(let [superposition_id, superposition] of Object.entries(this.allSuperpositions_byid[couple_id])){
+              i++;
+              if (i === 1) {
+                mapitem.superposition_ids.push(superposition_id)
+              }else{
+                this.mapitems.push({
+                  id: `${concernement.id}___${superposition_id}`,
+                  concernement: concernement,
+                  superposition_ids: [superposition_id],
+                  clone: true
+                });
+              }
+            }
+          }
+        });
+        this.mapitems.push(mapitem)
+      }
+      console.log('App mapitems', this.mapitems);
+    }
   },
   components: {
     MapConcernements,
@@ -96,25 +147,22 @@ export default {
 
   <div id="main-content">
     <MapConcernements>
-      <template v-for="(concernement,index) in concernements">
+      <template v-for="(mapitem,index) in mapitems">
         <ConcernementMapItem
-          v-if="concernement.visible"
-          :key="index"
-          :concernement="concernement"
-          :active_revision="concernement.active_revision"
+          v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
+          :key="mapitem.id"
+          :mapitem="mapitem"
         />
       </template>
-      <template v-if="map_mode === 'superposition'">
-        <template v-for="(superposition,index) in superposed_clones_concernements">
+      <!-- <template v-if="map_mode === 'superposition'">
+        <template v-for="(mapitem,index) in superposed_cloned_mapitems">
           <ConcernementMapItem
-            v-if="superposition.concernement.visible"
-            :key="index"
-            :concernement="superposition.concernement"
-            :active_revision="superposition.concernement.active_revision"
-            :superposition_id="superposition.superposition_id"
+            v-if="mapitem.concernement.visible"
+            :key="mapitem.id"
+            :mapitem="mapitem"
           />
         </template>
-      </template>
+      </template> -->
     </MapConcernements>
     <div id="content" :class="{'recit-opened':opened_recit}">
       <RouterView />

src/components/ConcernementMapItem.vue

@@ -19,6 +19,9 @@ export default {
   data() {
     return {
       id: null,
+      cid: null,
+      concernement: null,
+      active_revision: null,
       entities: null,
       superposedEntitesIDsList: [],
       canvas: null,
@@ -47,7 +50,7 @@ export default {
       paper_groups: {}
     }
   },
-  props: ['concernement', 'active_revision', 'superposition_id'],
+  props: ['mapitem'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernementsByID',
@@ -61,8 +64,13 @@ export default {
                             'paper_symbol_definitions'])
   },
   created () {
+    console.log('ConcernementMapItem', this.mapitem);
+    // this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
+    this.id = this.mapitem.id;
+    this.concernement = this.mapitem.concernement;
     this.cid = this.concernement.id;
-    this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
+    this.active_revision = this.concernement.active_revision;
+
     // console.log(`ConcernementsMapItem ${this.id} created`);
     // this.entites = this.concernement.entites
     this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
@@ -103,7 +111,7 @@ export default {
   // beforeUnmount () {
   unmounted () {
     // console.log(`mapitem ${this.id} unmounted`);
-    if(this.superposition_id) {
+    if(this.mapitem.clone) {
       // 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();
     };
@@ -185,7 +193,9 @@ export default {
     active_revision: {
       handler (n, o) {
         console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
-        this.resetPaperActiveRevision();
+        if(o & n){ // do not trigger on first variable filling (if o is null)
+          this.resetPaperActiveRevision();
+        }
       },
       deep: true
     }
@@ -372,31 +382,12 @@ export default {
       return num
     },
     getSuperposedEntitesIDsList(){
-
-      // 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]):
-            this.superposedEntitesIDsList.push(parseInt(ids[2]));
-            break;
-          case parseInt(ids[3]):
-            this.superposedEntitesIDsList.push(parseInt(ids[4]));
-            break;
-        }
-      } else if (this.concernement.superpositions) {
-        // 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
+      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 (!superposition.cloned) { // not part of a clone
+            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);
@@ -409,7 +400,7 @@ export default {
           }
         }
       }
-      // console.log('eids', eids);
+      console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
 
     },
     // MATTER BODY
@@ -514,7 +505,7 @@ export default {
         pivot: new paper.Point(this.pos),
         name: `main_${this.id}`,
         cid: this.cid,
-        superposition_id: this.superposition_id
+        superposition_id: this.mapitem.superposition_ids[0] // TODO what to do with multiples superpositions ids
       });
 
       // the sub items for one concernement
@@ -667,7 +658,7 @@ export default {
       const contrs = new paper.Path({
         name: 'contours',
         segments: segments,
-        fillColor: 'rgba(255,255,255,0.4)', // this.superposition_id ? 'rgba(255,0,0,0.4)' : 'rgba(255,255,255,0.4)',
+        fillColor: 'rgba(255,255,255,0.4)',
         // selected: true,
         strokeColor: '#fff',
         strokeWidth: 1,
@@ -1171,9 +1162,9 @@ export default {
     handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
       if (!this.isFocused()){
-        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)";
+        this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "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.superposition_id ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
+        this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "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;
@@ -1398,7 +1389,8 @@ export default {
               params: {cid: this.cid},
               query: {
                 mapitemid: this.id, 
-                superposition_id: this.superposition_id
+                // TODO when mapitem not a clone, there is no superposition_id prop
+                superposition_id: this.mapitem.superposition_ids[0]
               },
               hash: `#${this.map_mode}`
             });

src/components/MapConcernements.vue

@@ -1159,8 +1159,7 @@ export default {
             }
 
           }
-        } 
-
+        }
       }
     },
     clearSuperpositionsMatterConstraints(){

src/views/Concernement.vue

@@ -61,7 +61,7 @@ export default {
       if (this.superposition) {
         let r = null;
         this.superposition.forEach(s => {
-          if(s.cid !== this.opened_concernement.id){
+          if(this.opened_concernement && s.cid !== this.opened_concernement.id){
             r = {
               cid: s.cid,
               eid: s.eid
@@ -156,7 +156,7 @@ export default {
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="cid"/>
     <Doleancer v-if="map_mode === 'doleancer'" :id="cid"/>
   </section>
-  <section v-if="map_mode === 'superposition' && superposition" class="concernement clone">
+  <section v-if="map_mode === 'superposition' && superposition && superposed_cid_eid" class="concernement clone">
     <TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
   </section>
   <nav class="close-concernement" @click="closeConcernement">