From 88be181204fc05b79b40e6bfc231af06fe053902 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Mon, 11 Mar 2024 12:29:39 +0100
Subject: [PATCH] #2204 entite lables are clikable

---
 src/components/ConcernementMapItem.vue | 64 +++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index ee94436..dd09065 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -975,6 +975,8 @@ export default {
           let label = new paper.Group({
             pivot: pos_point,
             name: 'label',
+            item_id: entite.entite ? entite.entite.id : null,
+            item_type: item_type
           });
 
 
@@ -986,18 +988,29 @@ export default {
             content: title,
             fillColor: 'black',
             fontFamily: 'public_sans',
-            fontSize: 4,
+            fontSize: 3,
             justification: 'left',
             name: 'label_txt'
           })
           let b = label_txt.bounds;
-          let label_bg = new paper.Path.Rectangle(b.x - pad, b.y - pad, b.width + pad*2, b.height + pad*2);
+          let rect = new paper.Rectangle(b.x - pad, b.y - pad, b.width + pad*2, b.height + pad*2);
+          let corners = new paper.Size(1,1);
+          let label_bg = new paper.Path.Rectangle(rect, corners);
           label_bg.fillColor = '#fff';
+          label_bg.strokeColor = '#fff';
+          label_bg.strokeWidth = 1;
           label_bg.opacity = 0.9;
           label_bg.name = 'label_bg';
+          let label_click_zone = new paper.Path.Rectangle(b.x - pad, b.y - pad, b.width + pad*2, b.height + pad*2);
+          label_click_zone.fillColor = '#fff';
+          label_click_zone.opacity = 0;
+          label_click_zone.name = 'label_click_zone';
+          label_click_zone.item_id = entite.entite ? entite.entite.id : null;
+          label_click_zone.item_type = item_type;
 
           label.addChild(label_bg);
-          label_txt.insertAbove(label_bg)
+          label_txt.insertAbove(label_bg);
+          label_click_zone.insertAbove(label_txt);
           // label.sendToBack();
           g_label.addChild(label);
         }
@@ -1859,14 +1872,27 @@ export default {
         if(group){
           group.children.forEach((item) => {
             if (this.opened_entite_id && item.item_id === parseInt(this.opened_entite_id) && item.item_type !== 'entite_hidden') {
+              // switch symbole definition to hover
               item.definition = item.item_type === 'entite' ? this.paper_symbol_definitions.entite_hover : this.paper_symbol_definitions.entite_action_hover;
             } else {
+              // switch back symbole definition to normal
               if ((!this.hover_elmt || item.item_id !== this.hover_elmt.id) && item.item_type !== 'entite_hidden') {
                 item.definition = item.item_type === 'entite' ? this.paper_symbol_definitions.entite : this.paper_symbol_definitions.entite_action;
               }
             }
           })
         }
+        let labels_group = this.paper_main_object.children['entites'].children['entites_labels'];
+        if (labels_group) {
+          labels_group.children.forEach((item) => {
+            if (this.opened_entite_id && item.item_id === parseInt(this.opened_entite_id) && item.item_type !== 'entite_hidden') {
+              item.bringToFront();
+              item.children[0].strokeColor = "#01ffe2";
+            }else{
+              // item.children[0].strokeColor = "#fff";
+            }
+          })
+        }
       }
       
 
@@ -2006,6 +2032,15 @@ export default {
               contr.strokeColor = '#fff';
             })
           }
+          // reset all entite labels stroke to white
+          if (this.paper_main_object.children['entites'] && this.paper_main_object.children['entites'].children['entites_labels']) {
+            this.paper_main_object.children['entites'].children['entites_labels'].children.forEach((label) => {
+              if (!this.opened_entite_id || label.item_id != parseInt(this.opened_entite_id)) {
+                label.children['label_bg'].strokeColor = '#fff';
+              }
+              
+            })
+          }
 
           // lets define some options regarding the map_mode
           let paper_group_tohit;
@@ -2033,9 +2068,9 @@ export default {
           }
 
           let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
-          // console.log('move result', result);
-          if (result && result.item.item_id) {
-            // console.log('move has result', result);
+          console.log('move result', result);
+          if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
+            console.log('move has result', result);
             let new_hover_elmt = {
               paper_id: result.item.id,
               type: result.item.item_type,
@@ -2060,12 +2095,23 @@ export default {
                 new_hover_elmt.cid = result.item.item_cid;
                 new_hover_elmt.no_popup = true;
                 break;
+              case "entite":
+              case "entite_action":
+                if(result.item.name ==  "label_click_zone"){
+                  // bring front the label in case of overlaping
+                  result.item.parent.bringToFront();
+                  result.item.parent.children[0].strokeColor = "#01ffe2";
+                }
+                break;
             }
             if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
               // console.log(`before setHoverElmt ${this.id}`);
-              this.setHoverElmt(new_hover_elmt);
+              if (this.detailsZoomValue <= 2) {
+                this.setHoverElmt(new_hover_elmt);
+              }
             }
             document.body.style.cursor = "pointer";
+            
           } else {
             // console.log('move no result');
             this.resetHoverElmt();
@@ -2074,10 +2120,6 @@ export default {
             } else {
               document.body.style.cursor = "auto";
             }
-
-            if (result && (result.item.name === 'label_txt' || result.item.name === 'label_bg')) {
-              result.item.parent.bringToFront();
-            }
           }
         }
       }.bind(this);