@deck.gl-community/editable-layers 9.0.0-alpha.1

package/src/edit-modes/draw-polygon-mode.ts

@@ -0,0 +1,171 @@
+import lineIntersect from '@turf/line-intersect';
+import { lineString as turfLineString } from '@turf/helpers';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  TentativeFeature,
+  GuideFeature,
+} from './types';
+import { Polygon, FeatureCollection } from '../geojson-types';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class DrawPolygonMode extends GeoJsonEditMode {
+  createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
+    const { lastPointerMoveEvent } = props;
+    const clickSequence = this.getClickSequence();
+
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+
+    let tentativeFeature;
+    if (clickSequence.length === 1 || clickSequence.length === 2) {
+      tentativeFeature = {
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, ...lastCoords],
+        },
+      };
+    } else if (clickSequence.length > 2) {
+      tentativeFeature = {
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]],
+        },
+      };
+    }
+
+    return tentativeFeature;
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const clickSequence = this.getClickSequence();
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    const tentativeFeature = this.createTentativeFeature(props);
+    if (tentativeFeature) {
+      guides.features.push(tentativeFeature);
+    }
+
+    const editHandles: GuideFeature[] = clickSequence.map((clickedCoord, index) => ({
+      type: 'Feature',
+      properties: {
+        guideType: 'editHandle',
+        editHandleType: 'existing',
+        featureIndex: -1,
+        positionIndexes: [index],
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: clickedCoord,
+      },
+    }));
+
+    guides.features.push(...editHandles);
+
+    return guides;
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const { picks } = event;
+    const clickedEditHandle = getPickedEditHandle(picks);
+    const clickSequence = this.getClickSequence();
+
+    let overlappingLines = false;
+    if (clickSequence.length > 2 && props.modeConfig && props.modeConfig.preventOverlappingLines) {
+      const currentLine = turfLineString([
+        clickSequence[clickSequence.length - 1],
+        event.mapCoords,
+      ]);
+      const otherLines = turfLineString([...clickSequence.slice(0, clickSequence.length - 1)]);
+      const intersectingPoints = lineIntersect(currentLine, otherLines);
+      if (intersectingPoints.features.length > 0) {
+        overlappingLines = true;
+      }
+    }
+
+    let positionAdded = false;
+    if (!clickedEditHandle && !overlappingLines) {
+      // Don't add another point right next to an existing one
+      this.addClickSequence(event);
+      positionAdded = true;
+    }
+
+    if (
+      clickSequence.length > 2 &&
+      clickedEditHandle &&
+      Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+      (clickedEditHandle.properties.positionIndexes[0] === 0 ||
+        clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)
+    ) {
+      // They clicked the first or last point (or double-clicked), so complete the polygon
+
+      // Remove the hovered position
+      const polygonToAdd: Polygon = {
+        type: 'Polygon',
+        coordinates: [[...clickSequence, clickSequence[0]]],
+      };
+
+      this.resetClickSequence();
+
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    } else if (positionAdded) {
+      // new tentative point
+      props.onEdit({
+        // data is the same
+        updatedData: props.data,
+        editType: 'addTentativePosition',
+        editContext: {
+          position: event.mapCoords,
+        },
+      });
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
+    if (event.key === 'Enter') {
+      const clickSequence = this.getClickSequence();
+      if (clickSequence.length > 2) {
+        const polygonToAdd: Polygon = {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, clickSequence[0]]],
+        };
+        this.resetClickSequence();
+
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+        if (editAction) {
+          props.onEdit(editAction);
+        }
+      }
+    } else if (event.key === 'Escape') {
+      this.resetClickSequence();
+      props.onEdit({
+        // Because the new drawing feature is dropped, so the data will keep as the same.
+        updatedData: props.data,
+        editType: 'cancelFeature',
+        editContext: {},
+      });
+    }
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+    super.handlePointerMove(event, props);
+  }
+}

package/src/edit-modes/draw-rectangle-from-center-mode.ts

@@ -0,0 +1,23 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawRectangleFromCenterMode extends TwoClickPolygonMode {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    const longitude =
+      coord1[0] > coord2[0]
+        ? coord1[0] + Math.abs(coord1[0] - coord2[0])
+        : coord1[0] - Math.abs(coord1[0] - coord2[0]);
+    const latitude =
+      coord1[1] > coord2[1]
+        ? coord1[1] + Math.abs(coord1[1] - coord2[1])
+        : coord1[1] - Math.abs(coord1[1] - coord2[1]);
+
+    const rectangle = bboxPolygon([longitude, latitude, coord2[0], coord2[1]]);
+    rectangle.properties = rectangle.properties || {};
+    rectangle.properties.shape = 'Rectangle';
+
+    // @ts-expect-error turf typing too wide
+    return rectangle;
+  }
+}

package/src/edit-modes/draw-rectangle-mode.ts

@@ -0,0 +1,14 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawRectangleMode extends TwoClickPolygonMode {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    const rectangle = bboxPolygon([coord1[0], coord1[1], coord2[0], coord2[1]]);
+    rectangle.properties = rectangle.properties || {};
+    rectangle.properties.shape = 'Rectangle';
+
+    // @ts-expect-error turf typing too wide
+    return rectangle;
+  }
+}

package/src/edit-modes/draw-rectangle-using-three-points-mode.ts

@@ -0,0 +1,36 @@
+import { generatePointsParallelToLinePoints } from './utils';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { ThreeClickPolygonMode } from './three-click-polygon-mode';
+
+export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
+  getThreeClickPolygon(
+    coord1: Position,
+    coord2: Position,
+    coord3: Position,
+    modeConfig: any
+  ): FeatureOf<Polygon> | null | undefined {
+    const [p3, p4] = generatePointsParallelToLinePoints(coord1, coord2, coord3);
+
+    return {
+      type: 'Feature',
+      properties: {
+        shape: 'Rectangle',
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            // Draw a polygon containing all the points of the LineString,
+            // then the points orthogonal to the lineString,
+            // then back to the starting position
+            coord1,
+            coord2,
+            p3,
+            p4,
+            coord1,
+          ],
+        ],
+      },
+    };
+  }
+}

package/src/edit-modes/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-expect-error turf typing too wide
+    return square;
+  }
+}

package/src/edit-modes/draw-square-mode.ts

@@ -0,0 +1,36 @@
+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 DrawSquareMode 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;
+
+    const square = bboxPolygon([coord1[0], coord1[1], corner[0], corner[1]]);
+    square.properties = square.properties || {};
+    square.properties.shape = 'Square';
+
+    // @ts-expect-error turf types too wide
+    return square;
+  }
+}

package/src/edit-modes/duplicate-mode.ts

@@ -0,0 +1,21 @@
+import { StartDraggingEvent, ModeProps } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { TranslateMode } from './translate-mode';
+
+export class DuplicateMode extends TranslateMode {
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    super.handleStartDragging(event, props);
+
+    if (this._geometryBeforeTranslate) {
+      props.onEdit(this.getAddManyFeaturesAction(this._geometryBeforeTranslate, props.data));
+    }
+  }
+
+  updateCursor(props: ModeProps<FeatureCollection>) {
+    if (this._isTranslatable) {
+      props.onUpdateCursor('copy');
+    } else {
+      props.onUpdateCursor(null);
+    }
+  }
+}

package/src/edit-modes/edit-mode.ts

@@ -0,0 +1,30 @@
+/* istanbul ignore file */
+
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  Tooltip,
+  ModeProps,
+} from './types';
+
+export interface EditMode<TData, TGuides> {
+  // Called when the pointer went down and up without dragging regardless of whether something was picked
+  handleClick(event: ClickEvent, props: ModeProps<TData>): void;
+  // Called when the pointer moved, regardless of whether the pointer is down, up, and whether something was picked
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<TData>): void;
+  // Called when the pointer went down on something rendered by this layer and the pointer started to move
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<TData>): void;
+  // 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;
+  // Called when the key is up;
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<TData>): void;
+  // Return features that can be used as a guide for editing the data
+  getGuides(props: ModeProps<TData>): TGuides | undefined;
+  // Return tooltips
+  getTooltips(props: ModeProps<TData>): Tooltip[];
+}

package/src/edit-modes/elevation-mode.ts

@@ -0,0 +1,86 @@
+import { ModeProps, PointerMoveEvent, StopDraggingEvent } from './types';
+import { Position, FeatureCollection } from '../geojson-types';
+import { getPickedEditHandle } from './utils';
+import { ModifyMode } from './modify-mode';
+
+function defaultCalculateElevationChange({
+  pointerDownScreenCoords,
+  screenCoords,
+}: {
+  pointerDownScreenCoords: Position;
+  screenCoords: Position;
+}) {
+  return 10 * (pointerDownScreenCoords[1] - screenCoords[1]);
+}
+
+export class ElevationMode extends ModifyMode {
+  makeElevatedEvent(
+    event: PointerMoveEvent | StopDraggingEvent,
+    position: Position,
+    props: ModeProps<FeatureCollection>
+  ): Record<string, any> {
+    const {
+      minElevation = 0,
+      maxElevation = 20000,
+      calculateElevationChange = defaultCalculateElevationChange,
+    } = props.modeConfig || {};
+
+    if (!event.pointerDownScreenCoords) {
+      return event;
+    }
+
+    // $FlowFixMe - really, I know it has something at index 2
+    let elevation = position.length === 3 ? position[2] : 0;
+
+    // calculateElevationChange is configurable because (at this time) modes are not aware of the viewport
+    elevation += calculateElevationChange({
+      pointerDownScreenCoords: event.pointerDownScreenCoords,
+      screenCoords: event.screenCoords,
+    });
+    elevation = Math.min(elevation, maxElevation);
+    elevation = Math.max(elevation, minElevation);
+
+    return Object.assign({}, event, {
+      mapCoords: [position[0], position[1], elevation],
+    });
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+    const position = editHandle ? editHandle.geometry.coordinates : event.mapCoords;
+    // @ts-expect-error return type too wide
+    super.handlePointerMove(this.makeElevatedEvent(event, position, props), props);
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    const editHandle = getPickedEditHandle(event.picks);
+    const position = editHandle ? editHandle.geometry.coordinates : event.mapCoords;
+    // @ts-expect-error return type too wide
+    super.handleStopDragging(this.makeElevatedEvent(event, position, props), props);
+  }
+
+  getCursor(event: PointerMoveEvent): string | null | undefined {
+    let cursor = super.getCursor(event);
+    if (cursor === 'cell') {
+      cursor = 'ns-resize';
+    }
+    return cursor;
+  }
+
+  static calculateElevationChangeWithViewport(
+    viewport: any,
+    {
+      pointerDownScreenCoords,
+      screenCoords,
+    }: {
+      pointerDownScreenCoords: Position;
+      screenCoords: Position;
+    }
+  ): number {
+    // Source: https://gis.stackexchange.com/a/127949/111804
+    const metersPerPixel =
+      (156543.03392 * Math.cos((viewport.latitude * Math.PI) / 180)) / Math.pow(2, viewport.zoom);
+
+    return (metersPerPixel * (pointerDownScreenCoords[1] - screenCoords[1])) / 2;
+  }
+}

package/src/edit-modes/extend-line-string-mode.ts

@@ -0,0 +1,87 @@
+import { Position, LineString, FeatureCollection } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class ExtendLineStringMode extends GeoJsonEditMode {
+  getSingleSelectedLineString(props: ModeProps<FeatureCollection>): LineString | null | undefined {
+    const selectedGeometry = this.getSelectedGeometry(props);
+
+    if (selectedGeometry && selectedGeometry.type === 'LineString') {
+      return selectedGeometry;
+    }
+    return null;
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const { selectedIndexes } = props;
+    const selectedLineString = this.getSingleSelectedLineString(props);
+
+    if (!selectedLineString) {
+      console.warn(`ExtendLineStringMode only supported for single LineString selection`); // eslint-disable-line
+      return;
+    }
+
+    // Extend the LineString
+    let positionIndexes = [selectedLineString.coordinates.length];
+
+    const modeConfig = props.modeConfig;
+    if (modeConfig && modeConfig.drawAtFront) {
+      positionIndexes = [0];
+    }
+    const featureIndex = selectedIndexes[0];
+    const updatedData = new ImmutableFeatureCollection(props.data)
+      .addPosition(featureIndex, positionIndexes, event.mapCoords)
+      .getObject();
+
+    props.onEdit({
+      updatedData,
+      editType: 'addPosition',
+      editContext: {
+        featureIndexes: [featureIndex],
+        positionIndexes,
+        position: event.mapCoords,
+      },
+    });
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    const selectedLineString = this.getSingleSelectedLineString(props);
+    if (!selectedLineString) {
+      return guides;
+    }
+
+    const mapCoords = props.lastPointerMoveEvent && props.lastPointerMoveEvent.mapCoords;
+
+    // Draw an extension line starting from one end of the selected LineString to the cursor
+    let startPosition: Position | null | undefined = null;
+    const { modeConfig } = props;
+    if (modeConfig && modeConfig.drawAtFront) {
+      startPosition = selectedLineString.coordinates[0];
+    } else {
+      startPosition = selectedLineString.coordinates[selectedLineString.coordinates.length - 1];
+    }
+
+    guides.features.push({
+      type: 'Feature',
+      properties: {
+        guideType: 'tentative',
+      },
+      geometry: {
+        type: 'LineString',
+        coordinates: [startPosition, mapCoords],
+      },
+    });
+
+    return guides;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+  }
+}