map_popup for superpositions OK

src/assets/main.scss

@@ -596,9 +596,10 @@ body{
     // left: 0;
 
     .popup-content-wrapper{
-      display: flex;
-      flex-direction: row;
-      align-items:center;
+      // display: flex;
+      // flex-direction: row;
+      // align-items:center;
+      position: relative;
       .concernement-map-popup{
         background-color: white;
         padding: 0.5em;
@@ -618,6 +619,9 @@ body{
       }
       .concernement-map-popup-recit{
         padding-left: 0.8em;
+        position: absolute;
+        top:3px;
+        left:100%;
         >svg{
           display: inline-block;
           $d: 55px; 
@@ -634,7 +638,7 @@ body{
       .besoin-map-popup,
       .reponse-map-popup{
         background-color: white;
-        padding: 1em;
+        padding: 0.5em;
         border-radius: 3px;
         max-width: 30em;
         >div{

src/components/ConcernementMapItem.vue

@@ -38,6 +38,7 @@ export default {
     return {
       id: null,
       entities: null,
+      superposedEntitesIDsList: [],
       canvas: null,
       ctx: null,
       pos : {
@@ -100,14 +101,14 @@ export default {
       // this.getSalientPoints()
       this.getJarvisEnvelopeConvexe()
 
-      // if (this.canvasMap) {
-        // define init position of the item
-        this.pos = this.getRandomPos();
-        //
-        this.initMatterBody()
-        //
-        this.initPaperObjects()
-      // }  
+      // define init position of the item
+      this.pos = this.getRandomPos();
+      //
+      this.getSuperposedEntitesIDsList();
+      //
+      this.initMatterBody()
+      //
+      this.initPaperObjects()
     }
 
     // this.setConcernementMapItem(this.cid, this);
@@ -177,7 +178,7 @@ export default {
     hover_elmt: {
       handler (n, o) {
         // console.log(`watch hover_elmt ${this.id}`, o, n);
-        if (n && n.type === 'concernement' && n.id === this.id) {
+        if (n && (n.type === 'concernement' || n.type === 'superposition') && n.id === this.id) {
           this.is_hover = true;
         } else {
           this.is_hover = false;
@@ -374,6 +375,47 @@ export default {
       if (num > 1 || num < 0) return this.getGaussianRandom() // resample between 0 and 1
       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
+        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:
+                  this.superposedEntitesIDsList.push(superposition[0].eid);
+                  break;
+                case superposition[1].cid:
+                  this.superposedEntitesIDsList.push(superposition[1].eid);
+                  break;
+              }
+            }
+          }
+        }
+      }
+      // console.log('eids', eids);
+
+    },
     // MATTER BODY
     initMatterBody (){
       
@@ -659,45 +701,7 @@ export default {
       return g;
     },
     setPaperEntitesSuperposees(){
-      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);
+      // console.log('setPaperSuperpositions, superpositions', this.concernement.superpositions);
 
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
@@ -706,7 +710,7 @@ export default {
       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 // 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
+            && this.superposedEntitesIDsList.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
@@ -1277,15 +1281,18 @@ export default {
         if (!this.is_opened) {
           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
               this.setHoverElmt({
                 type: 'superposition',
-                cid: this.id,
-                eid: 0 // TODO
+                id: this.id,
+                cid: this.cid,
+                eids: this.superposedEntitesIDsList
               });
             } else {
               this.setHoverElmt({
                 type: 'concernement',
-                id: this.id
+                id: this.id,
+                cid: this.cid
               });
             }
             

src/components/ConcernementMapPopup.vue

@@ -16,7 +16,7 @@ export default {
       dom: null,
       type: null,
       concernement: null,
-      entite: null,
+      entites: null,
       besoin: null,
       reponse: null,
       superposition: null,
@@ -24,32 +24,17 @@ export default {
     }
   },
   created () {
-    // console.log(`popup created type: ${this.infos.type}`, this.infos);
-    if (this.infos.type === 'concernement') {
-      this.concernement = this.concernementsByID[this.infos.id];
-    } else if(this.infos.type === 'entite' || this.infos.type === 'entite_action') {
-      this.entite = this.allEntitesById[this.infos.id];
-    } else if (this.infos.type === 'besoin') {
-      this.besoin = this.allBesoinsById[this.infos.id];
-    } else if (this.infos.type === 'reponse') {
-      for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) {
-        if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) {
-          this.reponse = this.allBesoinsById[this.infos.bid].reponses[i];
-          break;
-        }
-      }
-    } else if (this.infos.type === 'superposition') {
-      this.superposition = {
-        concernement: this.concernementsByID[this.infos.cid],
-        entite: this.allEntitesById[this.infos.eid]
-      }
-    }
+    console.log(`popup created type: ${this.infos.type}`, this.infos);
+    this.parseInfos()
   },
   mounted () {
     // console.log('APP onMounted')
     this.dom = this.$refs['map-popup'];
     window.addEventListener('mousemove', this.onMousemove);
   },
+  beforeUnmount () {
+    window.removeEventListener('mousemove', this.onMousemove);
+  },
   computed: {
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
@@ -59,20 +44,43 @@ export default {
   watch: {
     infos: {
       handler (n, o){
-        if (n.type === 'concernement') {
-          this.concernement = this.concernementsByID[n.id];
-        } else if(n.type === 'entite' || n.type === 'entite_action') {
-          this.entite = this.allEntitesById[this.infos.id];
-        } else if (n.type === 'besoin') {
-          this.besoin = this.allBesoinsById[this.infos.id];      
-        } else if (n.type === 'reponse') {
-          
-        } 
+        this.parseInfos()
       },
       deep: true
     },
   },
   methods: {
+    parseInfos(){
+      switch (this.infos.type) {
+        case 'concernement':
+          this.concernement = this.concernementsByID[this.infos.cid];  
+          break;
+        case 'entite':
+        case 'entite_action':
+          this.entites = [this.allEntitesById[this.infos.id]];
+          break;
+        case 'besoin':
+          this.besoin = this.allBesoinsById[this.infos.id];
+          break;
+        case 'reponse':
+          this.besoin = this.allBesoinsById[this.infos.id];
+          for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) {
+            if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) {
+              this.reponse = this.allBesoinsById[this.infos.bid].reponses[i];
+              break;
+            }
+          }
+          break;
+        case 'superposition':
+          this.concernement = this.concernementsByID[this.infos.cid];  
+          // this.entite = this.allEntitesById[this.infos.eid];
+          this.entites = [];
+          for (let eid of this.infos.eids) {
+            this.entites.push(this.allEntitesById[eid])
+          }
+          break;
+      }
+    },
     onMousemove(e){
       // console.log(`popup move type: ${this.infos.type}`);
       let v = "top";
@@ -124,23 +132,29 @@ export default {
   <div id="map-popup" ref="map-popup">
     
     <div class="popup-content-wrapper">
-      <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
-        <h1>{{ concernement.title }}</h1>
-        <ul class="icons" v-if="concernement.has_puissancedagir || concernement.has_proximite || concernement.has_superposition || concernement.has_agissantes || concernement.has_doleance">
-          <li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
-          <li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
-          <li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
-          <li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
-          <li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
-        </ul>
+      <section v-if="infos.type === 'concernement' || infos.type === 'superposition'" class="concernement-map-popup">
+        <div class="concernement-map-popup-content">
+          <h1>{{ concernement.title }}</h1>
+          <ul class="icons" v-if="concernement.has_puissancedagir || concernement.has_proximite || concernement.has_superposition || concernement.has_agissantes || concernement.has_doleance">
+            <li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
+            <li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
+            <li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
+            <li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
+            <li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
+          </ul>
+        </div>
+        <div v-if="(infos.type === 'concernement' || infos.type === 'superposition') && concernement.has_recit" class="concernement-map-popup-recit">
+          <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+        </div>
       </section>
-      <section v-if="infos.type === 'concernement' && concernement.has_recit" class="concernement-map-popup-recit">
-        <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+
+      <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition'" class="entite-map-popup">
+        <h1
+          v-for="(entite, index) of entites"
+          :key="index"
+        >⋅ {{ entite.entite.title }}</h1>
       </section>
       
-      <section v-if="infos.type === 'entite' || infos.type === 'entite_action'" class="entite-map-popup">
-        <h1>{{ entite.entite.title }}</h1>
-      </section>
       <section v-if="infos.type === 'besoin'" class="besoin-map-popup">
         <div v-html="besoin.description"></div>
       </section>

src/components/MapConcernements.vue

@@ -1115,9 +1115,6 @@ 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)
-            // TODO this two lines make the all thing very slow 
-            // concernementA.superposition_constraints[c.id] = c;
-            // concernementB.superposition_constraints[c.id] = c;
             concernementA.superposition_constraints_id.push(c.id);
             concernementB.superposition_constraints_id.push(c.id);
             // record all superposed concernements for each concernement