From 362ca32407a3f07ab24620cc9feae0ddf1216c49 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 25 Jan 2022 10:52:13 +0200
Subject: [PATCH] UI: Map widgets - improve markers dragging - prevent click
 actions and popup open while dragging marker.

---
 .../components/widget/lib/maps/maps-utils.ts  | 16 ++++++++++
 .../components/widget/lib/maps/markers.ts     | 29 ++++++++++++++-----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index 0482f4cec5..bb939572f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -41,6 +41,22 @@ export function createTooltip(target: L.Layer,
     return popup;
 }
 
+export function disablePopup(target: L.Layer) {
+  if (target.isPopupOpen()) {
+    target.closePopup();
+  }
+  target.unbindPopup();
+  target.off('popupopen');
+}
+
+export function enablePopup(target: L.Layer, popup: L.Popup,
+                            settings: MarkerSettings | PolylineSettings | PolygonSettings, datasource: Datasource) {
+  target.bindPopup(popup);
+  target.on('popupopen', () => {
+    bindPopupActions(popup, settings, datasource);
+  });
+}
+
 export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
                                  datasource: Datasource) {
   const actions = popup.getElement().getElementsByClassName('tb-custom-action');
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 4c840a635e..d9e297b1cb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -23,7 +23,7 @@ import {
   MarkerSettings,
   UnitedMapSettings
 } from './map-models';
-import { bindPopupActions, createTooltip, } from './maps-utils';
+import { bindPopupActions, createTooltip, disablePopup, enablePopup, } from './maps-utils';
 import { aspectCache, fillPattern, parseWithTranslation, processPattern, safeExecute } from './common-maps-utils';
 import tinycolor from 'tinycolor2';
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
@@ -37,6 +37,7 @@ export class Marker {
     tooltip: L.Popup;
     data: FormattedData;
     dataSources: FormattedData[];
+    isDragging = false;
 
   constructor(private map: LeafletMap, private location: L.LatLng, public settings: UnitedMapSettings,
               data?: FormattedData, dataSources?, onDragendListener?) {
@@ -64,17 +65,31 @@ export class Marker {
         }
 
         if (this.settings.markerClick) {
-            this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
-                for (const action in this.settings.markerClick) {
+            if (!this.isDragging) {
+                this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
+                  for (const action in this.settings.markerClick) {
                     if (typeof (this.settings.markerClick[action]) === 'function') {
-                        this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
+                      this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
                     }
-                }
-            });
+                  }
+                });
+            }
         }
 
         if (settings.draggableMarker && onDragendListener) {
-          this.leafletMarker.on('pm:dragend', (e) => onDragendListener(e, this.data));
+          this.leafletMarker.on('pm:dragend', (e) => {
+            onDragendListener(e, this.data);
+            this.isDragging = false;
+            if (settings.showTooltip && settings.showTooltipAction === 'click') {
+              enablePopup(this.leafletMarker, this.tooltip, settings, this.data.$datasource);
+            }
+          });
+          this.leafletMarker.on('pm:dragstart', (e) => {
+            this.isDragging = true;
+            if (settings.showTooltip && settings.showTooltipAction === 'click') {
+              disablePopup(this.leafletMarker);
+            }
+          });
         }
     }