Merge 3e8a089 into 22f154f

docs/api-reference/modes/overview.md

@@ -91,6 +91,13 @@ User can draw a new `Polygon` feature with 90 degree corners (right angle) by cl
 
 User can draw a new rectangular `Polygon` feature by clicking two opposing corners of the rectangle.
 
+### ModeConfig
+
+The following options can be provided in the `modeConfig` object:
+
+* `dragToDraw` (optional):  `boolean`
+  * If `true`, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.
+
 ## [DrawRectangleUsingThreePointsMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-using-three-points-mode.js)
 
 User can draw a new rectangular `Polygon` feature by clicking three corners of the rectangle.
@@ -105,6 +112,8 @@ The following options can be provided in the `modeConfig` object:
 
 * `steps` (optional):  `x <number>`
   * If steps: `x` means the circle will be drawn using `x` number of points.
+* `dragToDraw` (optional):  `boolean`
+  * If `true`, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.
 
 ## [DrawCircleByDiameterMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-by-diameter-mode.js)
 
@@ -116,11 +125,20 @@ The following options can be provided in the `modeConfig` object:
 
 * `steps` (optional):  `x <number>`
   * If steps: `x` means the circle will be drawn using `x` number of points.
+* `dragToDraw` (optional):  `boolean`
+  * If `true`, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.
 
 ## [DrawEllipseByBoundingBoxMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-by-bounding-box-mode.js)
 
 User can draw a new ellipse shape `Polygon` feature by clicking two corners of bounding box.
 
+### ModeConfig
+
+The following options can be provided in the `modeConfig` object:
+
+* `dragToDraw` (optional):  `boolean`
+  * If `true`, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.
+
 ## [DrawEllipseUsingThreePointsMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-using-three-points-mode.js)
 
 User can draw a new ellipse shape `Polygon` feature by clicking center and two corners of the ellipse.

examples/advanced/example.js

@@ -129,6 +129,13 @@ const POLYGON_DRAWING_MODES = [
   DrawEllipseUsingThreePointsMode
 ];
 
+const TWO_CLICK_POLYGON_MODES = [
+  DrawRectangleMode,
+  DrawCircleFromCenterMode,
+  DrawCircleByDiameterMode,
+  DrawEllipseByBoundingBoxMode
+];
+
 const EMPTY_FEATURE_COLLECTION = {
   type: 'FeatureCollection',
   features: []
@@ -439,9 +446,13 @@ export default class Example extends Component<
               }
               onClick={() => {
                 if (this.state.modeConfig && this.state.modeConfig.booleanOperation === operation) {
-                  this.setState({ modeConfig: null });
+                  this.setState({
+                    modeConfig: { ...(this.state.modeConfig || {}), booleanOperation: null }
+                  });
                 } else {
-                  this.setState({ modeConfig: { booleanOperation: operation } });
+                  this.setState({
+                    modeConfig: { ...(this.state.modeConfig || {}), booleanOperation: operation }
+                  });
                 }
               }}
             >
@@ -453,6 +464,28 @@ export default class Example extends Component<
     );
   }
 
+  _renderTwoClickPolygonControls() {
+    return (
+      <ToolboxRow key="twoClick">
+        <ToolboxTitle>Drag to draw</ToolboxTitle>
+        <ToolboxControl>
+          <input
+            type="checkbox"
+            checked={Boolean(this.state.modeConfig && this.state.modeConfig.dragToDraw)}
+            onChange={event =>
+              this.setState({
+                modeConfig: {
+                  ...(this.state.modeConfig || {}),
+                  dragToDraw: Boolean(event.target.checked)
+                }
+              })
+            }
+          />
+        </ToolboxControl>
+      </ToolboxRow>
+    );
+  }
+
   _renderDrawLineStringModeControls() {
     return (
       <ToolboxRow key="drawLineString">
@@ -561,6 +594,9 @@ export default class Example extends Component<
     if (POLYGON_DRAWING_MODES.indexOf(this.state.mode) > -1) {
       controls.push(this._renderBooleanOperationControls());
     }
+    if (TWO_CLICK_POLYGON_MODES.indexOf(this.state.mode) > -1) {
+      controls.push(this._renderTwoClickPolygonControls());
+    }
     if (this.state.mode === DrawLineStringMode) {
       controls.push(this._renderDrawLineStringModeControls());
     }

modules/edit-modes/src/lib/two-click-polygon-mode.js

@@ -1,12 +1,49 @@
 // @flow
 
-import type { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection } from '../types.js';
+import type {
+  ClickEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection
+} from '../types.js';
 import type { Polygon, FeatureCollection, FeatureOf, Position } from '../geojson-types.js';
 import { BaseGeoJsonEditMode } from './geojson-edit-mode.js';
 
 export class TwoClickPolygonMode extends BaseGeoJsonEditMode {
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    if (props.modeConfig && props.modeConfig.dragToDraw) {
+      // handled in drag handlers
+      return;
+    }
+
+    this.addClickSequence(event);
+
+    this.checkAndFinishPolygon(props);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+      // handled in click handlers
+      return;
+    }
+
     this.addClickSequence(event);
+    event.cancelPan();
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+      // handled in click handlers
+      return;
+    }
+    this.addClickSequence(event);
+
+    this.checkAndFinishPolygon(props);
+  }
+
+  checkAndFinishPolygon(props: ModeProps<FeatureCollection>) {
     const clickSequence = this.getClickSequence();
     const tentativeFeature = this.getTentativeGuide(props);