From a043ca68ad241c5fbd3182db2afa080db99cccda Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 1 Apr 2025 17:43:49 +0300
Subject: [PATCH] UI: New map widget - refactor create tooltip in order to
 control layer interaction (including leaflet-geoman ugly behavior:
 disable/enable popups on toggle global draw mode)

---
 .../lib/maps/data-layer/data-layer-utils.ts   | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/data-layer-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/data-layer-utils.ts
index d5329586be..4b7b933d74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/data-layer-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/data-layer-utils.ts
@@ -29,35 +29,39 @@ export const createTooltip = (map: TbMap<any>,
                               settings: DataLayerTooltipSettings,
                               data: FormattedData<TbMapDatasource>,
                               canOpen: () => boolean): L.Popup => {
-  const tooltip = L.popup();
-  layer.bindPopup(tooltip, {autoClose: settings.autoclose, closeOnClick: false});
-  layer.off('click');
+  const tooltip = L.popup({autoClose: settings.autoclose, closeOnClick: false});
+  (tooltip as any)._source = layer;
+  layer.on('move', (e) => {
+    tooltip.setLatLng((e as any).latlng);
+  });
+  layer.on('remove', () => {
+    tooltip.close();
+  });
   if (settings.trigger === DataLayerTooltipTrigger.click) {
-    layer.on('click', () => {
+    layer.on('click', (e) => {
+      L.DomEvent.stop(e);
       if (tooltip.isOpen()) {
-        layer.closePopup();
+        tooltip.close();
       } else if (canOpen()) {
-        layer.openPopup();
+        if ((tooltip as any)._prepareOpen((layer as any)._latlng)) {
+          tooltip.openOn(map.getMap());
+        }
       }
     });
   } else if (settings.trigger === DataLayerTooltipTrigger.hover) {
     layer.on('mouseover', () => {
       if (canOpen()) {
-        layer.openPopup();
+        if ((tooltip as any)._prepareOpen((layer as any)._latlng)) {
+          tooltip.openOn(map.getMap());
+        }
       }
     });
-    layer.on('mousemove', (e) => {
-      tooltip.setLatLng(e.latlng);
-    });
     layer.on('mouseout', () => {
-      layer.closePopup();
+      tooltip.close();
     });
   }
   layer.on('popupopen', () => {
     bindTooltipActions(map, tooltip, settings, data);
-    (layer as any)._popup._closeButton.addEventListener('click', (event: Event) => {
-      event.preventDefault();
-    });
   });
   return tooltip;
 }