Adds onCancelPan optional prop and adds more calls to cancelPan

docs/modules/editable-layers/api-reference/layers/editable-geojson-layer.md

@@ -145,6 +145,10 @@ The `onEdit` event is the core event provided by this layer and must be handled
 
 * `editContext` (Object): `null` or an object containing additional context about the edit. This is populated by the active mode.
 
+#### `onCancelPan` (Function, optional)
+
+The `onCancelPan` event is called when map panning should be cancelled to enable feature dragging interactions while editing.
+
 ### Guide style properties and data getters
 
 #### `editHandleType`: (String, optional)

modules/editable-layers/src/edit-modes/extend-line-string-mode.ts

@@ -62,6 +62,10 @@ export class ExtendLineStringMode extends GeoJsonEditMode {
 
     const mapCoords = props.lastPointerMoveEvent && props.lastPointerMoveEvent.mapCoords;
 
+    if (!mapCoords) {
+      return guides;
+    }
+
     // Draw an extension line starting from one end of the selected LineString to the cursor
     let startPosition: Position | null | undefined = null;
     const {modeConfig} = props;

modules/editable-layers/src/edit-modes/extrude-mode.ts

@@ -6,7 +6,8 @@ import bearing from '@turf/bearing';
 import {
   generatePointsParallelToLinePoints,
   getPickedEditHandle,
-  getPickedIntermediateEditHandle
+  getPickedIntermediateEditHandle,
+  shouldCancelPan
 } from './utils';
 import {FeatureCollection} from '../utils/geojson-types';
 import {ModeProps, StartDraggingEvent, StopDraggingEvent, DraggingEvent} from './types';
@@ -61,6 +62,10 @@ export class ExtrudeMode extends ModifyMode {
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (shouldCancelPan(event)) {
+      event.cancelPan();
+    }
+
     const selectedFeatureIndexes = props.selectedIndexes;
 
     const editHandle = getPickedIntermediateEditHandle(event.picks);

modules/editable-layers/src/edit-modes/modify-mode.ts

@@ -13,7 +13,8 @@ import {
   getPickedExistingEditHandle,
   getPickedIntermediateEditHandle,
   updateRectanglePosition,
-  NearestPointType
+  NearestPointType,
+  shouldCancelPan
 } from './utils';
 import {LineString, Point, Polygon, FeatureCollection, FeatureOf} from '../utils/geojson-types';
 import {
@@ -251,6 +252,10 @@ export class ModifyMode extends GeoJsonEditMode {
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (shouldCancelPan(event)) {
+      event.cancelPan();
+    }
+
     const selectedFeatureIndexes = props.selectedIndexes;
 
     const editHandle = getPickedIntermediateEditHandle(event.picks);

modules/editable-layers/src/edit-modes/resize-circle-mode.ts

@@ -182,6 +182,7 @@ export class ResizeCircleMode extends GeoJsonEditMode {
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
     if (this._selectedEditHandle) {
+      event.cancelPan();
       this._isResizing = true;
     }
   }

modules/editable-layers/src/edit-modes/rotate-mode.ts

@@ -11,7 +11,7 @@
 import {getGeom} from '@turf/invariant';
 import {point, featureCollection, lineString} from '@turf/helpers';
 import turfTransformRotate from '@turf/transform-rotate';
 import polygonToLine from '@turf/polygon-to-line';
 import {
   PointerMoveEvent,
   StartDraggingEvent,
@@ -128,6 +128,7 @@
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
     if (this._selectedEditHandle) {
+      event.cancelPan();
       this._isRotating = true;
       this._geometryBeingRotated = this.getSelectedFeaturesAsFeatureCollection(props);
     }

modules/editable-layers/src/edit-modes/scale-mode.ts

@@ -7,7 +7,7 @@
 import turfBearing from '@turf/bearing';
 import bboxPolygon from '@turf/bbox-polygon';
 import {point, featureCollection} from '@turf/helpers';
 import polygonToLine from '@turf/polygon-to-line';
 import {coordEach} from '@turf/meta';
 import turfDistance from '@turf/distance';
 import turfTransformScale from '@turf/transform-scale';
@@ -152,6 +152,7 @@
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
     if (this._selectedEditHandle) {
+      event.cancelPan();
       this._isScaling = true;
       this._geometryBeingScaled = this.getSelectedFeaturesAsFeatureCollection(props);
     }

modules/editable-layers/src/edit-modes/transform-mode.ts

@@ -33,6 +33,10 @@ export class TransformMode extends CompositeMode {
     let translateMode: TranslateMode | null = null;
     const filteredModes: GeoJsonEditMode[] = [];
 
+    if (event.picks.length) {
+      event.cancelPan();
+    }
+
     // If the user selects a scaling edit handle that overlaps with part of the selected feature,
     // it is possible for both scale and translate actions to be triggered. This logic prevents
     // this simultaneous action trigger from happening by putting a higher priority on scaling

modules/editable-layers/src/edit-modes/translate-mode.ts

@@ -5,8 +5,8 @@
 import turfBearing from '@turf/bearing';
 import turfDistance from '@turf/distance';
 import clone from '@turf/clone';
 import {point, Feature as TurfFeature, Geometry as TurfGeometry} from '@turf/helpers';
 import WebMercatorViewport from 'viewport-mercator-project';
 import {FeatureCollection, Position, Geometry} from '../utils/geojson-types';
 import {
   PointerMoveEvent,
@@ -59,6 +59,7 @@
       return;
     }
 
+    event.cancelPan();
     this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection(props);
   }
 

modules/editable-layers/src/edit-modes/types.ts

@@ -18,6 +18,7 @@ export type Pick = {
   index: number;
   object?: any;
   isGuide?: boolean;
+  featureType?: string;
   featureIndex?: number;
   type?: string;
   isEditingHandle?: boolean | null;

modules/editable-layers/src/edit-modes/utils.ts

@@ -8,10 +8,10 @@
 import bearing from '@turf/bearing';
 import pointToLineDistance from '@turf/point-to-line-distance';
 import {flattenEach} from '@turf/meta';
 import {point, MultiLineString} from '@turf/helpers';
 import {getCoords} from '@turf/invariant';
 import WebMercatorViewport from 'viewport-mercator-project';
-import {Viewport, Pick, EditHandleFeature, EditHandleType} from './types';
+import {Viewport, Pick, EditHandleFeature, EditHandleType, StartDraggingEvent} from './types';
 import {
   Geometry,
   Position,
@@ -516,3 +516,7 @@
     })
     .filter(Boolean);
 }
+
+export function shouldCancelPan(event: StartDraggingEvent) {
+  return event.picks.length && event.picks.find((p) => p.featureType === 'points');
+}

modules/editable-layers/src/editable-layers/editable-layer.ts

@@ -20,6 +20,7 @@ const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend',
 export type EditableLayerProps<DataType = any> = CompositeLayerProps & {
   pickingRadius?: number;
   pickingDepth?: number;
+  onCancelPan?: () => void;
 };
 
 export abstract class EditableLayer<
@@ -154,7 +155,13 @@ export abstract class EditableLayer<
       mapCoords,
       pointerDownScreenCoords: screenCoords,
       pointerDownMapCoords: mapCoords,
-      cancelPan: event.stopImmediatePropagation,
+      cancelPan: () => {
+        if (this.props.onCancelPan) {
+          this.props.onCancelPan();
+        }
+
+        event.stopImmediatePropagation();
+      },
       sourceEvent: event.srcEvent
     });
   }