From 5a6a71359d31c98d3da68c319cf4b0c5c65b27ca Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Thu, 26 Oct 2023 12:11:45 +0200
Subject: [PATCH] made mapPopup hover proximites

---
 src/assets/main.scss                    | 16 +++++++++++++-
 src/components/ConcernementMapItem.vue  | 29 ++++++++++++++++++++-----
 src/components/ConcernementMapPopup.vue | 29 ++++++++++++++++++++-----
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 6396b30..39796b7 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -716,6 +716,7 @@ body{
         }
       }
       .entite-map-popup,
+      .entite-proximite-reference-map-popup,
       .besoin-map-popup,
       .reponse-map-popup{
         background-color: white;
@@ -737,7 +738,20 @@ body{
           color: #01ffe2;
         }
       }
-      h1, div{
+      .entite-proximite-reference-map-popup{
+        span.point{
+          font-weight: 900;
+        }
+        h1.ref-entite span.point{
+          color: #01ffe2;
+        }
+        div.conjunction,h2{
+          font-size: 0.756em;
+          font-weight: 400;
+          margin: 0.5em
+        }
+      }
+      h1, h2, span, div{
         font-size: 1em;
         font-weight: 400;
       }
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index 146eb1e..5727cc9 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -540,6 +540,9 @@ export default {
       
       this.initPaperEvents()
     },
+    /*
+    * called by openClose() function
+    */
     setPaperContents(){
       // trigered once opening tween is complete
       this.clearPaperContents();
@@ -589,7 +592,8 @@ export default {
       this.paper_main_object.addChild(this.setPaperEntites());
     },
     clearPaperContents(){
-      let clearable_children = ['boussole_bg', 'entites', 
+      let clearable_children = ['boussole_bg', 'entites',
+                                'entites_proximites_references',
                                 'puissanceagir_bg','puissanceagir_besoins',
                                 'agissantes',
                                 'doleance_bg', 'doleances'];
@@ -850,6 +854,11 @@ export default {
           let e=0;
           entite.entite.proximite.forEach(entite_ref => {
             // console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]);
+
+            // get the concernement parents of the proximite reference
+            let ref_cid = this.allEntitesById[entite_ref.id].cid;
+            // console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites);
+            let ref_concernement = this.concernementsByID[ref_cid];
             
             // create the entite ref paper point
             let ref_instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
@@ -867,14 +876,12 @@ export default {
             ref_instance.fillColor = '#000';
             ref_instance.item_id = entite_ref.id;
             ref_instance.item_type = 'entite_proximite_reference';
+            ref_instance.ref_cid = ref_cid;
+            ref_instance.parent_eid = entite.entite.id;
             ref_instance.is_symbol_instance = true;
             ref_g.addChild(ref_instance)
 
             // create the original concernement contours arround the entite_ref
-            let ref_cid = this.allEntitesById[entite_ref.id].cid;
-            // console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites);
-            let ref_concernement = this.concernementsByID[ref_cid];
-            
             // define the right scale
             let scale = 0.05;
 
@@ -945,6 +952,7 @@ export default {
           //   })
           //   ref_g.addChild(p);
           // })
+          // // end debug
 
           // general contour arround proximité
           // console.log('allEntiteRefConcernementContourEntites', allEntiteRefConcernementContourEntites);
@@ -1623,7 +1631,9 @@ export default {
       }
 
     },
-    // PAPER EVENTS
+    /*
+    * PAPER EVENTS
+    */
     initPaperEvents(){
 
       this.paper_main_object.onMouseLeave = function(event){
@@ -1681,6 +1691,9 @@ export default {
             case "terraindevie":
               paper_group_tohit = this.paper_main_object.children['entites'];
               break;
+            case "proximite":
+              paper_group_tohit = this.paper_main_object.children['entites_proximites_references'];
+              break;
             case "superposition":
               paper_group_tohit = this.paper_main_object.children['entites_superposes'];
               break;
@@ -1707,6 +1720,10 @@ export default {
               id: result.item.item_id
             }; 
             switch (result.item.item_type) {
+              case "entite_proximite_reference":
+                new_hover_elmt.ref_cid = result.item.ref_cid;
+                new_hover_elmt.parent_eid = result.item.parent_eid;
+                break;
               case "besoin":
                 new_hover_elmt.no_popup = true;
                 break;
diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue
index 1fc9bf8..564c9d4 100644
--- a/src/components/ConcernementMapPopup.vue
+++ b/src/components/ConcernementMapPopup.vue
@@ -17,6 +17,7 @@ export default {
       type: null,
       concernement: null,
       entites: null,
+      entite_parent: null,
       besoin: null,
       reponse: null,
       superposition: null,
@@ -51,15 +52,22 @@ export default {
   },
   methods: {
     parseInfos(){
+      console.log('mapPopup infos', this.infos);
       switch (this.infos.type) {
         case 'concernement':
           this.concernement = this.concernementsByID[this.infos.cid];  
           break;
         case 'entite':
+        case 'entite_proximite':
         case 'entite_superpose':
         case 'entite_action':
           this.entites = [this.allEntitesById[this.infos.id]];
           break;
+        case 'entite_proximite_reference':
+          this.entites = [this.allEntitesById[this.infos.id]];
+          this.concernement = this.concernementsByID[this.infos.ref_cid];
+          this.entite_parent = this.allEntitesById[this.infos.parent_eid];
+          break;
         case 'besoin':
           this.besoin = this.allBesoinsById[this.infos.id];
           break;
@@ -152,7 +160,7 @@ export default {
         </div>
       </section>
 
-      <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition' || infos.type === 'entite_superpose'" class="entite-map-popup">
+      <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition' || infos.type === 'entite_superpose' || infos.type === 'entite_proximite'" class="entite-map-popup">
         <template
           v-for="(entite, index) of entites"
           :key="index"
@@ -161,16 +169,25 @@ export default {
         </template>
         
       </section>
-      
+
+      <section v-if="infos.type === 'entite_proximite_reference'" class="entite-proximite-reference-map-popup">
+        <h1 class="parent-entite"><span class="point">&bull;</span> {{ entite_parent.entite.title }}</h1>
+        <div class="conjunction">entité a proximité</div>
+        <h1 class="ref-entite"><span class="point">&bull;</span> {{ entites[0].entite.title }}</h1>
+        <h2>{{ concernement.title }}</h2>
+      </section>
+
       <section v-if="infos.type === 'besoin'" class="besoin-map-popup">
         <div v-html="besoin.description"></div>
       </section>
+
       <section v-if="infos.type === 'reponse'" class="reponse-map-popup">
-          <div v-if="reponse.qui"><label>Qui</label><p v-html="truncate(reponse.qui, 100, true)"/></div>
-          <div v-if="reponse.quoi"><label>Quoi</label><p v-html="truncate(reponse.quoi, 100, true)"/></div>
-          <div v-if="reponse.ou"><label>Où</label><p v-html="truncate(reponse.ou, 100, true)"/></div>
-          <div v-if="reponse.avec"><label>Avec</label><p v-html="truncate(reponse.avec, 100, true)"/></div>
+        <div v-if="reponse.qui"><label>Qui</label><p v-html="truncate(reponse.qui, 100, true)"/></div>
+        <div v-if="reponse.quoi"><label>Quoi</label><p v-html="truncate(reponse.quoi, 100, true)"/></div>
+        <div v-if="reponse.ou"><label>Où</label><p v-html="truncate(reponse.ou, 100, true)"/></div>
+        <div v-if="reponse.avec"><label>Avec</label><p v-html="truncate(reponse.avec, 100, true)"/></div>
       </section>
+
     </div>
   </div>
 </template>