Add 'Draw Square From Center' mode (uber#531)

docs/api-reference/modes/overview.md

@@ -119,6 +119,17 @@ The following options can be provided in the `modeConfig` object:
 
 User can draw a new rectangular `Polygon` feature by clicking three corners of the rectangle.
 
+## [DrawSquareFromCenterMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-square-from-center-mode.ts)
+
+User can draw a new square-shaped `Polygon` feature by clicking the center and then along one of the corners of the square.
+
+### 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.
+
 ## [DrawCircleFromCenterMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-from-center-mode.ts)
 
 User can draw a new circular `Polygon` feature by clicking the center then along the ring.

examples/advanced/src/example.tsx

@@ -26,6 +26,7 @@ import {
   DrawLineStringMode,
   DrawPolygonMode,
   DrawRectangleMode,
+  DrawSquareFromCenterMode,
   DrawCircleByDiameterMode,
   DrawCircleFromCenterMode,
   DrawEllipseByBoundingBoxMode,
@@ -101,6 +102,7 @@ const ALL_MODES: any = [
       { label: 'Draw Polygon By Dragging', mode: DrawPolygonByDraggingMode },
       { label: 'Draw Rectangle', mode: DrawRectangleMode },
       { label: 'Draw Rectangle Using 3 Points', mode: DrawRectangleUsingThreePointsMode },
+      { label: 'Draw Square From Center', mode: DrawSquareFromCenterMode },
       { label: 'Draw Circle From Center', mode: DrawCircleFromCenterMode },
       { label: 'Draw Circle By Diameter', mode: DrawCircleByDiameterMode },
       { label: 'Draw Ellipse By Bounding Box', mode: DrawEllipseByBoundingBoxMode },
@@ -135,6 +137,7 @@ const POLYGON_DRAWING_MODES = [
   DrawPolygonByDraggingMode,
   DrawRectangleMode,
   DrawRectangleUsingThreePointsMode,
+  DrawSquareFromCenterMode,
   DrawCircleFromCenterMode,
   DrawCircleByDiameterMode,
   DrawEllipseByBoundingBoxMode,
@@ -143,6 +146,7 @@ const POLYGON_DRAWING_MODES = [
 
 const TWO_CLICK_POLYGON_MODES = [
   DrawRectangleMode,
+  DrawSquareFromCenterMode,
   DrawCircleFromCenterMode,
   DrawCircleByDiameterMode,
   DrawEllipseByBoundingBoxMode,

modules/edit-modes/package.json

@@ -50,6 +50,7 @@
     "test-rendering": "(cd test/rendering-test && webpack-dev-server --config webpack.config.test-rendering.js --progress --hot --open)"
   },
   "dependencies": {
+    "@turf/along": ">=6.3.0",
     "@turf/area": ">=4.0.0",
     "@turf/bbox": ">=4.0.0",
     "@turf/bbox-polygon": ">=4.0.0",

modules/edit-modes/src/index.ts

@@ -22,6 +22,7 @@ export { DrawPointMode } from './lib/draw-point-mode';
 export { DrawLineStringMode } from './lib/draw-line-string-mode';
 export { DrawPolygonMode } from './lib/draw-polygon-mode';
 export { DrawRectangleMode } from './lib/draw-rectangle-mode';
+export { DrawSquareFromCenterMode } from './lib/draw-square-from-center-mode';
 export { DrawCircleByDiameterMode } from './lib/draw-circle-by-diameter-mode';
 export { DrawCircleFromCenterMode } from './lib/draw-circle-from-center-mode';
 export { DrawEllipseByBoundingBoxMode } from './lib/draw-ellipse-by-bounding-box-mode';

modules/edit-modes/src/lib/draw-square-from-center-mode.ts

@@ -0,0 +1,46 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import turfDistance from '@turf/distance';
+import turfAlong from '@turf/along';
+import { point, lineString as turfLineString } from '@turf/helpers';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawSquareFromCenterMode extends TwoClickPolygonMode {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    // get the coordinates of the other two rectangle vertices
+    const coord3 = [coord2[0], coord1[1]];
+    const coord4 = [coord1[0], coord2[1]];
+
+    // determine the shortest distance to the origin, which will be the length of each square side
+    const distance1 = turfDistance(point(coord3), point(coord1));
+    const distance2 = turfDistance(point(coord4), point(coord1));
+    const shortestDistance = distance1 <= distance2 ? distance1 : distance2;
+
+    // determine which coordinate pair of the two is closest to the origin
+    const closestPoint = distance1 <= distance2 ? coord3 : coord4;
+
+    // create a linestring which will used to locate the second square vertex
+    const line = turfLineString([closestPoint, coord2]);
+
+    // get the coordinates of the second square vertex
+    const newPoint = turfAlong(line, shortestDistance);
+    const corner = newPoint.geometry.coordinates;
+
+    // determine the longitude and latitude values of the opposite corner
+    const longitude =
+      coord1[0] > corner[0]
+        ? coord1[0] + Math.abs(coord1[0] - corner[0])
+        : coord1[0] - Math.abs(coord1[0] - corner[0]);
+    const latitude =
+      coord1[1] > corner[1]
+        ? coord1[1] + Math.abs(coord1[1] - corner[1])
+        : coord1[1] - Math.abs(coord1[1] - corner[1]);
+
+    const square = bboxPolygon([longitude, latitude, corner[0], corner[1]]);
+    square.properties = square.properties || {};
+    square.properties.shape = 'Square';
+
+    // @ts-ignore
+    return square;
+  }
+}

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

@@ -16,6 +16,7 @@ import {
   DrawLineStringMode,
   DrawPolygonMode,
   DrawRectangleMode,
+  DrawSquareFromCenterMode,
   DrawCircleFromCenterMode,
   DrawCircleByDiameterMode,
   DrawEllipseByBoundingBoxMode,
@@ -180,6 +181,7 @@ const modeNameMapping = {
   drawLineString: DrawLineStringMode,
   drawPolygon: DrawPolygonMode,
   drawRectangle: DrawRectangleMode,
+  drawSquareFromCenter: DrawSquareFromCenterMode,
   drawCircleFromCenter: DrawCircleFromCenterMode,
   drawCircleByBoundingBox: DrawCircleByDiameterMode,
   drawEllipseByBoundingBox: DrawEllipseByBoundingBoxMode,

modules/main/src/index.ts

@@ -45,6 +45,7 @@ export { DrawPointMode } from '@nebula.gl/edit-modes';
 export { DrawLineStringMode } from '@nebula.gl/edit-modes';
 export { DrawPolygonMode } from '@nebula.gl/edit-modes';
 export { DrawRectangleMode } from '@nebula.gl/edit-modes';
+export { DrawSquareFromCenterMode } from '@nebula.gl/edit-modes';
 export { DrawCircleByDiameterMode } from '@nebula.gl/edit-modes';
 export { DrawCircleFromCenterMode } from '@nebula.gl/edit-modes';
 export { DrawEllipseByBoundingBoxMode } from '@nebula.gl/edit-modes';