Merge pull request #6994 from TerriaJS/fix-pedestrian

Fix mouse capture bug that affects pedestrian mode.

CHANGES.md

@@ -2,6 +2,7 @@
 
 #### next release (8.4.1)
 
+- Fix a bug where `DragPoints` was interfering with pedstrian mode mouse movements.
 - [The next improvement]
 
 #### 8.4.0 - 2023-12-01

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

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();