From bd86e47f528a789725cb4c9b397efca543300210 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 27 Jan 2025 10:41:29 +0200
Subject: [PATCH] UI: Map - handle layer snapping

---
 .../lib/maps/data-layer/circles-data-layer.ts |  3 ++
 .../lib/maps/data-layer/map-data-layer.ts     |  1 +
 .../lib/maps/data-layer/markers-data-layer.ts | 45 ++++++++++++++-----
 .../maps/data-layer/polygons-data-layer.ts    |  3 ++
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
index f1c364c66f..caccea87a7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
@@ -91,6 +91,9 @@ class TbCircleDataLayerItem extends TbDataLayerItem<CirclesDataLayerSettings, Tb
   }
 
   protected enableDrag(): void {
+    this.circle.pm.setOptions({
+      snappable: this.dataLayer.isSnappable()
+    });
     this.circle.pm.enableLayerDrag();
     this.circle.on('pm:dragstart', () => {
       this.editing = true;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
index 269d8fc294..f08fd0bca8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
@@ -314,6 +314,7 @@ export abstract class TbMapDataLayer<S extends MapDataLayerSettings, D extends T
 
       this.selectable = this.removeEnabled || this.editEnabled;
       this.hoverable = this.selectable || this.dragEnabled;
+      this.snappable = this.settings.edit.snappable;
     }
 
     this.dataLayerContainer = this.createDataLayerContainer();
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 8f7753b31e..1143ca14d5 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
@@ -76,7 +76,8 @@ class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, Tb
     this.iconClassList = [];
     const location = this.dataLayer.extractLocation(data, dsData);
     this.marker = L.marker(location, {
-      tbMarkerData: data
+      tbMarkerData: data,
+      snapIgnore: !this.dataLayer.isSnappable()
     });
 
     this.updateMarkerIcon(data, dsData);
@@ -129,20 +130,40 @@ class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, Tb
   }
 
   protected enableDrag(): void {
-    this.marker.options.draggable = true;
-    this.marker.on('dragstart', () => {
-      this.moving = true;
-    });
-    this.marker.on('dragend', () => {
-      this.saveMarkerLocation();
-      this.moving = false;
-    });
+    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.pm.setOptions({
+        snappable: this.dataLayer.isSnappable()
+      });
+      this.marker.pm.enableLayerDrag();
+      this.marker.on('pm:dragstart', () => {
+        this.moving = true;
+      });
+      this.marker.on('pm:dragend', () => {
+        this.saveMarkerLocation();
+        this.moving = false;
+      });
+    }
   }
 
   protected disableDrag(): void {
-    this.marker.options.draggable = false;
-    this.marker.off('dragstart');
-    this.marker.off('dragend');
+    if (this.settings.markerClustering?.enable) {
+      this.marker.options.draggable = false;
+      this.marker.off('dragstart');
+      this.marker.off('dragend');
+    } else {
+      this.marker.pm.disableLayerDrag();
+      this.marker.off('pm:dragstart');
+      this.marker.off('pm:dragend');
+    }
   }
 
   private saveMarkerLocation() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts
index 789795149c..b16952a317 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts
@@ -96,6 +96,9 @@ class TbPolygonDataLayerItem extends TbDataLayerItem<PolygonsDataLayerSettings,
   }
 
   protected enableDrag(): void {
+    this.polygon.pm.setOptions({
+      snappable: this.dataLayer.isSnappable()
+    });
     this.polygon.pm.enableLayerDrag();
     this.polygon.on('pm:dragstart', () => {
       this.editing = true;