From 6aff579f0321b3484f010d7db8da29e40c6ff4fe Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 8 Apr 2025 11:19:17 +0300
Subject: [PATCH] UI: New Maps - fix marker drag in clustering mode.

---
 .../lib/maps/data-layer/markers-data-layer.ts | 53 +++++++++----------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
index 093cc265bb..1ca5e0b1bf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
@@ -396,6 +396,8 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
   private labelOffset: L.PointTuple;
   private iconClassList: string[];
   private moving = false;
+  private dragStart: () => void;
+  private dragEnd: () => void;
 
   constructor(data: FormattedData<TbMapDatasource>,
               dsData: FormattedData<TbMapDatasource>[],
@@ -415,6 +417,8 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
   protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Marker {
     this.iconClassList = [];
     const location = this.dataLayer.dataProcessor.extractLocation(data, dsData);
+    this.dragStart = this._dragStart.bind(this);
+    this.dragEnd = this._dragEnd.bind(this);
     this.marker = L.marker(location, {
       tbMarkerData: data,
       snapIgnore: !this.dataLayer.isSnappable(),
@@ -465,44 +469,28 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
   }
 
   protected enableDrag(): void {
-    if (this.settings.markerClustering?.enable) {
-      this.marker.options.draggable = true;
-      this.marker.on('dragstart', () => {
-        this.moving = true;
-      });
-      this.marker.on('dragend', () => {
-        this.saveMarkerLocation();
-        this.moving = false;
-      });
-    } else {
+    this.marker.options.draggable = true;
+    this.marker.dragging?.enable();
+    if (!this.settings.markerClustering?.enable) {
       this.marker.pm.setOptions({
         snappable: this.dataLayer.isSnappable()
       });
       this.marker.pm.enableLayerDrag();
-      this.marker.on('pm:dragstart', () => {
-        (this.marker.dragging as any)._draggable = { _moved: true, off: (_args: any) => { return { disable: () => {}} } };
-        (this.marker.dragging as any)._enabled = true;
-        this.moving = true;
-      });
-      this.marker.on('pm:dragend', () => {
-        this.saveMarkerLocation();
-        delete (this.marker.dragging as any)._draggable;
-        delete (this.marker.dragging as any)._enabled;
-        this.moving = false;
-      });
     }
+    const evtPrefix = this.settings.markerClustering?.enable ? '' : 'pm:';
+    this.marker.on(evtPrefix + 'dragstart', this.dragStart);
+    this.marker.on(evtPrefix + 'dragend', this.dragEnd);
   }
 
   protected disableDrag(): void {
-    if (this.settings.markerClustering?.enable) {
-      this.marker.options.draggable = false;
-      this.marker.off('dragstart');
-      this.marker.off('dragend');
-    } else {
+    this.marker.options.draggable = false;
+    this.marker.dragging?.disable();
+    if (!this.settings.markerClustering?.enable) {
       this.marker.pm.disableLayerDrag();
-      this.marker.off('pm:dragstart');
-      this.marker.off('pm:dragend');
     }
+    const evtPrefix = this.settings.markerClustering?.enable ? '' : 'pm:';
+    this.marker.off(evtPrefix + 'dragstart', this.dragStart);
+    this.marker.off(evtPrefix + 'dragend', this.dragEnd);
   }
 
   protected removeDataItemTitle(): string {
@@ -513,6 +501,15 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
     return this.dataLayer.saveMarkerLocation(this.data, null);
   }
 
+  private _dragStart() {
+    this.moving = true;
+  }
+
+  private _dragEnd() {
+    this.saveMarkerLocation();
+    this.moving = false;
+  }
+
   private saveMarkerLocation() {
     const location = this.marker.getLatLng();
     this.dataLayer.saveMarkerLocation(this.data, location).subscribe();