react-map-gl-draw: fix onUpdate bubbling up when dragging finished

uber · Feb 21, 2020 · 48e762c · 48e762c
1 parent 5ada239
commit 48e762c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/examples/react-map-gl-draw/app.js b/examples/react-map-gl-draw/app.js
@@ -24,7 +24,6 @@ export default class App extends Component {
       viewport: DEFAULT_VIEWPORT,
       // editor
       selectedMode: EditorModes.READ_ONLY,
-      features: [],
       selectedFeatureIndex: null
     };
     this._editorRef = null;

diff --git a/examples/react-map-gl-draw/toolbar.js b/examples/react-map-gl-draw/toolbar.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { EditorModes } from 'react-map-gl-draw';
 
 const MODES = [
-  { id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
+  { id: EditorModes.EDITING, text: 'Edit Feature', icon: 'icon-select.svg' },
   { id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
   { id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
   { id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },

diff --git a/examples/webpack.config.local.js b/examples/webpack.config.local.js
@@ -101,7 +101,5 @@ module.exports = (config, exampleDir) => env => {
     config = addLocalDevSettings(config, exampleDir);
   }
 
-  // console.warn(JSON.stringify(config, null, 2));
-
   return config;
 };
diff --git a/modules/react-map-gl-draw/src/edit-modes/editing-mode.js b/modules/react-map-gl-draw/src/edit-modes/editing-mode.js
@@ -72,6 +72,7 @@ export default class EditingMode extends BaseMode {
 
     switch (pickedObject.type) {
       case ELEMENT_TYPE.FEATURE:
+      case ELEMENT_TYPE.FILL:
       case ELEMENT_TYPE.EDIT_HANDLE:
         this._handleDragging(event, props);
         break;

diff --git a/modules/react-map-gl-draw/src/mode-handler.js b/modules/react-map-gl-draw/src/mode-handler.js
@@ -383,14 +383,16 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
 
   _onPointerDown = (event: BaseEvent) => {
     const pickedObject = event.picks && event.picks[0] && event.picks[0].object;
+    const isDragging = pickedObject && isNumeric(pickedObject.featureIndex);
     const startDraggingEvent = {
       ...event,
+      isDragging,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords
     };
 
     const newState = {
-      isDragging: pickedObject && isNumeric(pickedObject.featureIndex),
+      isDragging,
       pointerDownPicks: event.picks,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords
@@ -403,10 +405,13 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
   };
 
   _onPointerUp = (event: MjolnirEvent) => {
+    const { didDrag, pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state;
     const stopDraggingEvent = {
       ...event,
-      pointerDownScreenCoords: this.state.pointerDownScreenCoords,
-      pointerDownMapCoords: this.state.pointerDownMapCoords
+      isDragging: false,
+      pointerDownPicks: didDrag ? pointerDownPicks : null,
+      pointerDownScreenCoords: didDrag ? pointerDownScreenCoords : null,
+      pointerDownMapCoords: didDrag ? pointerDownMapCoords : null
     };
 
     const newState = {
@@ -418,9 +423,11 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
     };
 
     this.setState(newState);
-
     const modeProps = this.getModeProps();
-    this._modeHandler.handleStopDragging(stopDraggingEvent, modeProps);
+
+    if (didDrag) {
+      this._modeHandler.handleStopDragging(stopDraggingEvent, modeProps);
+    }
   };
 
   _onPan = (event: BaseEvent) => {