From c2799e5be0613d6d53d355d6bed31deed0851b6b Mon Sep 17 00:00:00 2001
From: Nanda <nanda.sankaran@gmail.com>
Date: Fri, 1 Dec 2023 11:58:25 +1100
Subject: [PATCH] Prevent user drawing from capturing mouse events when not in
 use.

---
 lib/Map/DragPoints/DragPoints.js |  7 +++++++
 lib/Models/UserDrawing.ts        | 25 ++++++++++++++-----------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/lib/Map/DragPoints/DragPoints.js b/lib/Map/DragPoints/DragPoints.js
index eb845a0f181..fc50c39646b 100644
--- a/lib/Map/DragPoints/DragPoints.js
+++ b/lib/Map/DragPoints/DragPoints.js
@@ -43,6 +43,13 @@ DragPoints.prototype.setUp = function () {
   }
 };
 
+/**
+ * Destroy drag points helper. The instance becomes unusable after calling destroy.
+ */
+DragPoints.prototype.destroy = function () {
+  this._dragPointsHelper.destroy();
+};
+
 /**
  * The drag count is an indication of how long the user dragged for. If it's really small, perhaps the user clicked,
  * but a mousedown/mousemove/mouseup event trio was triggered anyway. It solves a problem where in leaflet the click
diff --git a/lib/Models/UserDrawing.ts b/lib/Models/UserDrawing.ts
index b2ea987192e..a4b59302941 100644
--- a/lib/Models/UserDrawing.ts
+++ b/lib/Models/UserDrawing.ts
@@ -64,7 +64,9 @@ export default class UserDrawing extends MappableMixin(
   ) => void;
   private readonly onCleanUp?: () => void;
   private readonly invisible?: boolean;
-  private readonly dragHelper: DragPoints;
+
+  // helper for dragging points around
+  private dragHelper?: DragPoints;
 
   pointEntities: CustomDataSource;
   otherEntities: CustomDataSource;
@@ -150,14 +152,6 @@ export default class UserDrawing extends MappableMixin(
     this.drawRectangle = defaultValue(options.drawRectangle, false);
 
     this.invisible = options.invisible;
-
-    // helper for dragging points around
-    this.dragHelper = new DragPoints(options.terria, (customDataSource) => {
-      if (typeof this.onPointMoved === "function") {
-        this.onPointMoved(customDataSource);
-      }
-      this.prepareToAddNewPoint();
-    });
   }
 
   protected forceLoadMapItems(): Promise<void> {
@@ -194,6 +188,13 @@ export default class UserDrawing extends MappableMixin(
   }
 
   enterDrawMode() {
+    // Create and setup a new dragHelper
+    this.dragHelper = new DragPoints(this.terria, (customDataSource) => {
+      if (typeof this.onPointMoved === "function") {
+        this.onPointMoved(customDataSource);
+      }
+      this.prepareToAddNewPoint();
+    });
     this.dragHelper.setUp();
 
     // If we have finished a polygon, don't allow more points to be drawn. In future, perhaps support multiple polygons.
@@ -338,13 +339,14 @@ export default class UserDrawing extends MappableMixin(
       this.pointEntities.entities.removeAll();
     }
     this.pointEntities.entities.add(pointEntity);
-    this.dragHelper.updateDraggableObjects(this.pointEntities);
+    this.dragHelper?.updateDraggableObjects(this.pointEntities);
     if (isDefined(this.onPointClicked)) {
       this.onPointClicked(this.pointEntities);
     }
   }
 
   endDrawing() {
+    this.dragHelper?.destroy();
     if (this.disposePickedFeatureSubscription) {
       this.disposePickedFeatureSubscription();
     }
@@ -427,13 +429,14 @@ export default class UserDrawing extends MappableMixin(
             // getDragCount helps us determine if the point was actually dragged rather than clicked. If it was
             // dragged, we shouldn't treat it as a clicked-existing-point scenario.
             if (
+              this.dragHelper &&
               this.dragHelper.getDragCount() < 10 &&
               !this.clickedExistingPoint(pickedFeatures.features)
             ) {
               // No existing point was picked, so add a new point
               this.addPointToPointEntities("Another Point", pickedPoint);
             } else {
-              this.dragHelper.resetDragCount();
+              this.dragHelper?.resetDragCount();
             }
             reaction.dispose();