Merge b384671 into 9eb34c0

uber · May 7, 2020 · a74ff18 · a74ff18
2 parents 9eb34c0 + b384671
commit a74ff18
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 38 deletions.
diff --git a/dev-docs/RFCs/v1.0/customized-mode.md b/dev-docs/RFCs/v1.0/customized-mode.md
diff --git a/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md b/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
@@ -128,7 +128,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -165,9 +165,10 @@ export default class App extends Component {
 
 **Advanced example: multiple draw modes and editing drawn features**
 
+[codesandbox](https://codesandbox.io/s/react-map-gl-draw-example-5n97w?file=/src/app.js)
+
 ```js
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import MapGL from 'react-map-gl';
 import {
   Editor,
@@ -190,7 +191,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {

diff --git a/modules/react-map-gl-draw/README.md b/modules/react-map-gl-draw/README.md
@@ -128,7 +128,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -165,9 +165,10 @@ export default class App extends Component {
 
 **Advanced example: multiple draw modes and editing drawn features**
 
+[codesandbox](https://codesandbox.io/s/react-map-gl-draw-example-5n97w?file=/src/app.js)
+
 ```js
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import MapGL from 'react-map-gl';
 import {
   Editor,
@@ -190,7 +191,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {

diff --git a/modules/react-map-gl-draw/src/mode-handler.tsx b/modules/react-map-gl-draw/src/mode-handler.tsx
@@ -56,6 +56,7 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
 
     this._events = {
       anyclick: (evt) => this._onEvent(this._onClick, evt, true),
+      dblclick: (evt) => this._onEvent(this._onDblclick, evt, false),
       click: (evt) => evt.stopImmediatePropagation(),
       pointermove: (evt) => this._onEvent(this._onPointerMove, evt, true),
       pointerdown: (evt) => this._onEvent(this._onPointerDown, evt, true),
@@ -215,7 +216,7 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
 
     switch (editType) {
       case EDIT_TYPE.ADD_FEATURE:
-        this.props.onSelect({
+        this._onSelect({
           selectedFeature: null,
           selectedFeatureIndex: null,
           selectedEditHandleIndex: null,
@@ -308,6 +309,12 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
     this._modeHandler.handleClick(event, modeProps);
   };
 
+  _onDblclick = (event: BaseEvent) => {
+    if (isNumeric(this._getSelectedFeatureIndex())) {
+      event.sourceEvent.stopImmediatePropagation();
+    }
+  };
+
   _onPointerMove = (event: BaseEvent) => {
     // hovering
     const hovered = this._getHoverState(event);
@@ -348,15 +355,16 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
   };
 
   _onPointerDown = (event: BaseEvent) => {
+    const isDragging = event.picks && event.picks[0];
     const startDraggingEvent = {
       ...event,
-      isDragging: true,
+      isDragging,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords,
     };
 
     const newState = {
-      isDragging: true,
+      isDragging,
       pointerDownPicks: event.picks,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords,