Merge d01127e into a523fb6

CHANGELOG.md

@@ -4,6 +4,11 @@ _All notable changes to this project will be documented in this file. This proje
 
 <!-- INSERT HERE -->
 
+<!-- NEXT VERSION
+* Call `event.cancelPan()` instead of `event.sourceEvent.stopPropagation()` in custom edit modes
+* `PointerMoveEvent` no longer has an `isDragging` flag. Instead, use the new `handleDragging` event.
+-->
+
 ## [0.17.0](https://github.com/uber/nebula.gl/compare/v0.16.0...v0.17.0) - 2020-01-10
 
 ### Changes
@@ -19,8 +24,8 @@ _All notable changes to this project will be documented in this file. This proje
 
 ### Breaking changes
 
-*  DrawCircleByBoundingBoxMode renamed to DrawCircleByDiameterMode (#314)
-*  The following props of `EditableGeoJsonLayer` are no longer proxied by nebula.gl, instead use deck.gl's [_subLayerProps](https://deck.gl/#/documentation/deckgl-api-reference/layers/composite-layer?section=_sublayerprops-object-experimental):
+* DrawCircleByBoundingBoxMode renamed to DrawCircleByDiameterMode (#314)
+* The following props of `EditableGeoJsonLayer` are no longer proxied by nebula.gl (instead use deck.gl's [_subLayerProps](https://deck.gl/#/documentation/deckgl-api-reference/layers/composite-layer?section=_sublayerprops-object-experimental)):
   * `getLineDashArray`
   * `lineDashJustified`
   * `getTentativeLineDashArray`

examples/advanced/package.json

@@ -4,13 +4,13 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open"
   },
   "dependencies": {
-    "@deck.gl/core": "^8.0.3",
-    "@deck.gl/layers": "^8.0.3",
-    "@deck.gl/react": "^8.0.3",
-    "@deck.gl/mesh-layers": "^8.0.3",
+    "@deck.gl/core": "^8.0.6",
+    "@deck.gl/layers": "^8.0.6",
+    "@deck.gl/mesh-layers": "^8.0.6",
+    "@deck.gl/react": "^8.0.6",
     "react": "^16.0.0",
     "react-dom": "^16.4.2",
-    "react-map-gl": "^3.3.4",
+    "react-map-gl": "^5.2.1",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {

modules/edit-modes/src/index.js

@@ -39,6 +39,8 @@ export type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
+  DoubleClickEvent,
   ModeProps,
   Viewport
 } from './types.js';

modules/edit-modes/src/lib/composite-mode.js

@@ -7,6 +7,7 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   GuideFeatureCollection
 } from '../types.js';
 import { BaseGeoJsonEditMode } from './geojson-edit-mode.js';
@@ -48,6 +49,10 @@ export class CompositeMode extends BaseGeoJsonEditMode {
     return this._coalesce(handler => handler.handleStopDragging(event, props));
   }
 
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
+    return this._coalesce(handler => handler.handleDragging(event, props));
+  }
+
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
     // TODO: Combine the guides *BUT* make sure if none of the results have
     // changed to return the same object so that "guides !== this.state.guides"

modules/edit-modes/src/lib/draw-90degree-polygon-mode.js

@@ -132,10 +132,10 @@ export class Draw90DegreePolygonMode extends BaseGeoJsonEditMode {
       screenCoords: [-1, -1],
       mapCoords: event.mapCoords,
       picks: [],
-      isDragging: false,
       pointerDownPicks: null,
       pointerDownScreenCoords: null,
       pointerDownMapCoords: null,
+      cancelPan: () => {},
       sourceEvent: null
     };
     this.handlePointerMove(fakePointerMoveEvent, props);

modules/edit-modes/src/lib/draw-polygon-mode.js

@@ -102,10 +102,10 @@ export class DrawPolygonMode extends BaseGeoJsonEditMode {
       screenCoords: [-1, -1],
       mapCoords: event.mapCoords,
       picks: [],
-      isDragging: false,
       pointerDownPicks: null,
       pointerDownScreenCoords: null,
       pointerDownMapCoords: null,
+      cancelPan: () => {},
       sourceEvent: null
     };
 

modules/edit-modes/src/lib/edit-mode.js

@@ -6,6 +6,7 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   Tooltip,
   ModeProps
 } from '../types.js';
@@ -23,6 +24,9 @@ export interface EditMode<TData, TGuides> {
   // Called when the pointer went down on something rendered by this layer, the pointer moved, and now the pointer is up
   handleStopDragging(event: StopDraggingEvent, props: ModeProps<TData>): void;
 
+  // Called when the pointer went down and is moving, regardless of whether something was picked
+  handleDragging(event: DraggingEvent, props: ModeProps<TData>): void;
+
   // Return features that can be used as a guide for editing the data
   getGuides(props: ModeProps<TData>): TGuides;
 

modules/edit-modes/src/lib/extrude-mode.js

@@ -7,26 +7,19 @@ import {
   getPickedIntermediateEditHandle
 } from '../utils.js';
 import type { FeatureCollection } from '../geojson-types.js';
-import type {
-  ModeProps,
-  PointerMoveEvent,
-  StartDraggingEvent,
-  StopDraggingEvent
-} from '../types.js';
-import { type GeoJsonEditAction } from './geojson-edit-mode.js';
+import type { ModeProps, StartDraggingEvent, StopDraggingEvent, DraggingEvent } from '../types.js';
 import { ModifyMode } from './modify-mode.js';
 import { ImmutableFeatureCollection } from './immutable-feature-collection.js';
 
 export class ExtrudeMode extends ModifyMode {
   // this mode is busted =(
 
   isPointAdded: boolean = false;
-  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
-    let editAction: ?GeoJsonEditAction = null;
 
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
     const editHandle = getPickedEditHandle(event.pointerDownPicks);
 
-    if (event.isDragging && editHandle) {
+    if (editHandle) {
       const { featureIndex } = editHandle.properties;
       let { positionIndexes } = editHandle.properties;
 
@@ -50,28 +43,19 @@ export class ExtrudeMode extends ModifyMode {
           .replacePosition(featureIndex, positionIndexes, p3)
           .getObject();
 
-        editAction = {
+        props.onEdit({
           updatedData,
           editType: 'extruding',
           editContext: {
             featureIndexes: [featureIndex],
             positionIndexes: this.nextPositionIndexes(positionIndexes, size),
             position: p3
           }
-        };
+        });
 
-        props.onEdit(editAction);
+        event.cancelPan();
       }
     }
-
-    const cursor = this.getCursor(event);
-    props.onUpdateCursor(cursor);
-
-    // Cancel map panning if pointer went down on an edit handle
-    const cancelMapPan = Boolean(editHandle);
-    if (cancelMapPan) {
-      event.sourceEvent.stopPropagation();
-    }
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {

modules/edit-modes/src/lib/geojson-edit-mode.js

@@ -10,6 +10,7 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   Pick,
   Tooltip,
   ModeProps,
@@ -207,12 +208,10 @@ export class BaseGeoJsonEditMode implements EditMode<FeatureCollection, GuideFea
   }
 
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void {}
-
   handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {}
-
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void {}
-
   handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void {}
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {}
 }
 
 export function getIntermediatePosition(position1: Position, position2: Position): Position {

modules/edit-modes/src/lib/modify-mode.js

@@ -19,10 +19,11 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   Viewport,
   GuideFeatureCollection
 } from '../types.js';
-import { BaseGeoJsonEditMode, type GeoJsonEditAction } from './geojson-edit-mode.js';
+import { BaseGeoJsonEditMode } from './geojson-edit-mode.js';
 import { ImmutableFeatureCollection } from './immutable-feature-collection.js';
 
 export class ModifyMode extends BaseGeoJsonEditMode {
@@ -176,12 +177,13 @@ export class ModifyMode extends BaseGeoJsonEditMode {
     }
   }
 
-  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
-    let editAction: ?GeoJsonEditAction = null;
-
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
     const editHandle = getPickedEditHandle(event.pointerDownPicks);
 
-    if (event.isDragging && editHandle) {
+    if (editHandle) {
+      // Cancel map panning if pointer went down on an edit handle
+      event.cancelPan();
+
       const editHandleProperties = editHandle.properties;
 
       const updatedData = new ImmutableFeatureCollection(props.data)
@@ -192,27 +194,21 @@ export class ModifyMode extends BaseGeoJsonEditMode {
         )
         .getObject();
 
-      editAction = {
+      props.onEdit({
         updatedData,
         editType: 'movePosition',
         editContext: {
           featureIndexes: [editHandleProperties.featureIndex],
           positionIndexes: editHandleProperties.positionIndexes,
           position: event.mapCoords
         }
-      };
-
-      props.onEdit(editAction);
+      });
     }
+  }
 
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
     const cursor = this.getCursor(event);
     props.onUpdateCursor(cursor);
-
-    // Cancel map panning if pointer went down on an edit handle
-    const cancelMapPan = Boolean(editHandle);
-    if (cancelMapPan) {
-      event.sourceEvent.stopPropagation();
-    }
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {

modules/edit-modes/src/lib/rotate-mode.js

@@ -7,6 +7,7 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   ModeProps
 } from '../types.js';
 import type { FeatureCollection, Position } from '../geojson-types.js';
@@ -17,27 +18,27 @@ export class RotateMode extends BaseGeoJsonEditMode {
   _isRotatable: boolean;
   _geometryBeingRotated: ?FeatureCollection;
 
-  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
-    this._isRotatable =
-      Boolean(this._geometryBeingRotated) || this.isSelectionPicked(event.picks, props);
-
-    this.updateCursor(props);
-
-    if (!this._isRotatable || !event.pointerDownMapCoords) {
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isRotatable) {
       // Nothing to do
       return;
     }
 
-    if (event.isDragging && this._geometryBeingRotated) {
+    if (this._geometryBeingRotated) {
       // Rotate the geometry
       props.onEdit(
         this.getRotateAction(event.pointerDownMapCoords, event.mapCoords, 'rotating', props)
       );
     }
 
-    // TODO: is there a less hacky way to prevent map panning?
     // cancel map panning
-    event.sourceEvent.stopPropagation();
+    event.cancelPan();
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    this._isRotatable = this.isSelectionPicked(event.pointerDownPicks || event.picks, props);
+
+    this.updateCursor(props);
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {

modules/edit-modes/src/lib/scale-mode.js

@@ -8,7 +8,8 @@ import type {
   ModeProps,
   PointerMoveEvent,
   StartDraggingEvent,
-  StopDraggingEvent
+  StopDraggingEvent,
+  DraggingEvent
 } from '../types.js';
 import { BaseGeoJsonEditMode, type GeoJsonEditAction } from './geojson-edit-mode.js';
 import { ImmutableFeatureCollection } from './immutable-feature-collection.js';
@@ -17,27 +18,26 @@ export class ScaleMode extends BaseGeoJsonEditMode {
   _isScalable: boolean;
   _geometryBeingScaled: ?FeatureCollection;
 
-  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
-    this._isScalable =
-      Boolean(this._geometryBeingScaled) || this.isSelectionPicked(event.picks, props);
-
-    this.updateCursor(props);
-
-    if (!this._isScalable || !event.pointerDownMapCoords) {
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isScalable) {
       // Nothing to do
       return;
     }
 
-    if (event.isDragging && this._geometryBeingScaled) {
+    if (this._geometryBeingScaled) {
       // Scale the geometry
       props.onEdit(
         this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaling', props)
       );
     }
 
-    // TODO: is there a less hacky way to prevent map panning?
-    // cancel map panning
-    event.sourceEvent.stopPropagation();
+    event.cancelPan();
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    this._isScalable = this.isSelectionPicked(event.pointerDownPicks || event.picks, props);
+
+    this.updateCursor(props);
   }
 
   handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {

modules/edit-modes/src/lib/snappable-mode.js

@@ -5,6 +5,7 @@ import type {
   PointerMoveEvent,
   StartDraggingEvent,
   StopDraggingEvent,
+  DraggingEvent,
   ModeProps,
   Pick,
   GuideFeatureCollection,
@@ -13,7 +14,7 @@ import type {
 import { getPickedEditHandle, getPickedEditHandles, getEditHandlesForGeometry } from '../utils.js';
 import { BaseGeoJsonEditMode } from './geojson-edit-mode.js';
 
-type MovementTypeEvent = PointerMoveEvent | StartDraggingEvent | StopDraggingEvent;
+type MovementTypeEvent = PointerMoveEvent | StartDraggingEvent | StopDraggingEvent | DraggingEvent;
 
 export class SnappableMode extends BaseGeoJsonEditMode {
   _handler: BaseGeoJsonEditMode;
@@ -153,6 +154,10 @@ export class SnappableMode extends BaseGeoJsonEditMode {
     this._handler.handleStopDragging(this._getSnapAwareEvent(event, props), props);
   }
 
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    this._handler.handleDragging(this._getSnapAwareEvent(event, props), props);
+  }
+
   handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
     this._handler.handlePointerMove(this._getSnapAwareEvent(event, props), props);
   }