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

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

@@ -0,0 +1,215 @@
+import turfDistance from '@turf/distance';
+import turfMidpoint from '@turf/midpoint';
+import { FeatureCollection, Position } from '../geojson-types';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  Tooltip,
+  GuideFeature,
+} from './types';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class MeasureDistanceMode extends GeoJsonEditMode {
+  _isMeasuringSessionFinished = false;
+  _currentTooltips: Tooltip[] = [];
+  _currentDistance = 0;
+
+  _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig }) => {
+    const { turfOptions, measurementCallback } = modeConfig || {};
+    const distance = turfDistance(positionA, positionB, turfOptions);
+
+    if (measurementCallback) {
+      measurementCallback(distance);
+    }
+
+    return distance;
+  };
+
+  _formatTooltip(distance, modeConfig?) {
+    const { formatTooltip, turfOptions } = modeConfig || {};
+    const units = (turfOptions && turfOptions.units) || 'kilometers';
+
+    let text;
+    if (formatTooltip) {
+      text = formatTooltip(distance);
+    } else {
+      // By default, round to 2 decimal places and append units
+      text = `${parseFloat(distance).toFixed(2)} ${units}`;
+    }
+
+    return text;
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const { modeConfig, data, onEdit } = props;
+    const { centerTooltipsOnLine = false } = modeConfig || {};
+
+    // restart measuring session
+    if (this._isMeasuringSessionFinished) {
+      this._isMeasuringSessionFinished = false;
+      this.resetClickSequence();
+      this._currentTooltips = [];
+      this._currentDistance = 0;
+    }
+
+    const { picks } = event;
+    const clickedEditHandle = getPickedEditHandle(picks);
+
+    let positionAdded = false;
+    if (!clickedEditHandle) {
+      // Don't add another point right next to an existing one
+      this.addClickSequence(event);
+      positionAdded = true;
+    }
+    const clickSequence = this.getClickSequence();
+
+    if (
+      clickSequence.length > 1 &&
+      clickedEditHandle &&
+      Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+      clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1
+    ) {
+      // They clicked the last point (or double-clicked), so add the LineString
+      this._isMeasuringSessionFinished = true;
+    } else if (positionAdded) {
+      if (clickSequence.length > 1) {
+        this._currentDistance += this._calculateDistanceForTooltip({
+          positionA: clickSequence[clickSequence.length - 2],
+          positionB: clickSequence[clickSequence.length - 1],
+          modeConfig,
+        });
+
+        const tooltipPosition = centerTooltipsOnLine
+          ? turfMidpoint(
+            clickSequence[clickSequence.length - 2],
+            clickSequence[clickSequence.length - 1]
+          ).geometry.coordinates
+          : event.mapCoords;
+
+        this._currentTooltips.push({
+          position: tooltipPosition as Position,
+          text: this._formatTooltip(this._currentDistance, modeConfig),
+        });
+      }
+
+      // new tentative point
+      onEdit({
+        // data is the same
+        updatedData: data,
+        editType: 'addTentativePosition',
+        editContext: {
+          position: event.mapCoords,
+        },
+      });
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
+    if (this._isMeasuringSessionFinished) return;
+
+    event.stopPropagation();
+    const { key } = event;
+
+    const clickSequenceLength = this.getClickSequence().length;
+
+    switch (key) {
+      case 'Escape':
+        this._isMeasuringSessionFinished = true;
+        if (clickSequenceLength === 1) {
+          this.resetClickSequence();
+          this._currentTooltips = [];
+        }
+        // force update drawings
+        props.onUpdateCursor('cell');
+        break;
+      case 'Enter':
+        this.handleClick(props.lastPointerMoveEvent, props);
+        this._isMeasuringSessionFinished = true;
+        break;
+      default:
+        break;
+    }
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const { lastPointerMoveEvent } = props;
+    const clickSequence = this.getClickSequence();
+
+    const lastCoords =
+      lastPointerMoveEvent && !this._isMeasuringSessionFinished
+        ? [lastPointerMoveEvent.mapCoords]
+        : [];
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    if (clickSequence.length > 0) {
+      guides.features.push({
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, ...lastCoords],
+        },
+      });
+    }
+
+    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;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+  }
+
+  getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] {
+    const { lastPointerMoveEvent, modeConfig } = props;
+    const { centerTooltipsOnLine = false } = modeConfig || {};
+    const positions = this.getClickSequence();
+
+    if (positions.length > 0 && lastPointerMoveEvent && !this._isMeasuringSessionFinished) {
+      const distance = this._calculateDistanceForTooltip({
+        positionA: positions[positions.length - 1],
+        positionB: lastPointerMoveEvent.mapCoords,
+        modeConfig: props.modeConfig,
+      });
+
+      const tooltipPosition = centerTooltipsOnLine
+        ? turfMidpoint(positions[positions.length - 1], lastPointerMoveEvent.mapCoords).geometry
+          .coordinates as Position
+        : lastPointerMoveEvent.mapCoords;
+
+      return [
+        ...this._currentTooltips,
+        {
+          position: tooltipPosition,
+          text: this._formatTooltip(this._currentDistance + distance, modeConfig),
+        },
+      ];
+    }
+
+    return this._currentTooltips;
+  }
+}

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

@@ -0,0 +1,293 @@
+import { point, lineString as toLineString } from '@turf/helpers';
+import {
+  recursivelyTraverseNestedArrays,
+  nearestPointOnProjectedLine,
+  nearestPointOnLine,
+  getEditHandlesForGeometry,
+  getPickedEditHandles,
+  getPickedEditHandle,
+  getPickedExistingEditHandle,
+  getPickedIntermediateEditHandle,
+  updateRectanglePosition,
+  NearestPointType,
+} from './utils';
+import { LineString, Point, Polygon, FeatureCollection, FeatureOf } from '../geojson-types';
+import {
+  ModeProps,
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  Viewport,
+  GuideFeatureCollection,
+  EditHandleFeature,
+  GuideFeature,
+} from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class ModifyMode extends GeoJsonEditMode {
+  // eslint-disable-next-line complexity
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const handles: GuideFeature[] = [];
+
+    const { data, lastPointerMoveEvent } = props;
+    const { features } = data;
+    const picks = lastPointerMoveEvent && lastPointerMoveEvent.picks;
+    const mapCoords = lastPointerMoveEvent && lastPointerMoveEvent.mapCoords;
+
+    for (const index of props.selectedIndexes) {
+      if (index < features.length) {
+        const { geometry } = features[index];
+        handles.push(...getEditHandlesForGeometry(geometry, index));
+      } else {
+        console.warn(`selectedFeatureIndexes out of range ${index}`); // eslint-disable-line no-console,no-undef
+      }
+    }
+
+    // intermediate edit handle
+    if (picks && picks.length && mapCoords) {
+      const existingEditHandle = getPickedExistingEditHandle(picks);
+      // don't show intermediate point when too close to an existing edit handle
+      const featureAsPick = !existingEditHandle && picks.find((pick) => !pick.isGuide);
+
+      // is the feature in the pick selected
+      if (
+        featureAsPick &&
+        !featureAsPick.object.geometry.type.includes('Point') &&
+        !(
+          props.modeConfig?.lockRectangles && featureAsPick.object.properties.shape === 'Rectangle'
+        ) &&
+        props.selectedIndexes.includes(featureAsPick.index)
+      ) {
+        let intermediatePoint: NearestPointType | null | undefined = null;
+        let positionIndexPrefix: number[] = [];
+        const referencePoint = point(mapCoords);
+        // process all lines of the (single) feature
+        recursivelyTraverseNestedArrays(
+          featureAsPick.object.geometry.coordinates,
+          [],
+          (lineString, prefix) => {
+            const lineStringFeature = toLineString(lineString);
+            const candidateIntermediatePoint = this.getNearestPoint(
+              // @ts-expect-error turf types too wide
+              lineStringFeature,
+              referencePoint,
+              props.modeConfig && props.modeConfig.viewport
+            );
+            if (
+              !intermediatePoint ||
+              candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist
+            ) {
+              intermediatePoint = candidateIntermediatePoint;
+              positionIndexPrefix = prefix;
+            }
+          }
+        );
+        // tack on the lone intermediate point to the set of handles
+        if (intermediatePoint) {
+          const {
+            geometry: { coordinates: position },
+            properties: { index },
+          } = intermediatePoint as NearestPointType;
+          handles.push({
+            type: 'Feature',
+            properties: {
+              guideType: 'editHandle',
+              editHandleType: 'intermediate',
+              featureIndex: featureAsPick.index,
+              positionIndexes: [...positionIndexPrefix, index + 1],
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: position,
+            },
+          });
+        }
+      }
+    }
+
+    return {
+      type: 'FeatureCollection',
+      features: handles,
+    };
+  }
+
+  // turf.js does not support elevation for nearestPointOnLine
+  getNearestPoint(
+    line: FeatureOf<LineString>,
+    inPoint: FeatureOf<Point>,
+    viewport: Viewport | null | undefined
+  ): NearestPointType {
+    const { coordinates } = line.geometry;
+    if (coordinates.some((coord) => coord.length > 2)) {
+      if (viewport) {
+        // This line has elevation, we need to use alternative algorithm
+        return nearestPointOnProjectedLine(line, inPoint, viewport);
+      }
+      // eslint-disable-next-line no-console,no-undef
+      console.log(
+        'Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.'
+      );
+    }
+    return nearestPointOnLine(line, inPoint, viewport!);
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const pickedExistingHandle = getPickedExistingEditHandle(event.picks);
+    const pickedIntermediateHandle = getPickedIntermediateEditHandle(event.picks);
+
+    if (pickedExistingHandle) {
+      const { featureIndex, positionIndexes } = pickedExistingHandle.properties;
+
+      let updatedData;
+      try {
+        updatedData = new ImmutableFeatureCollection(props.data)
+          .removePosition(featureIndex, positionIndexes)
+          .getObject();
+      } catch (ignored) {
+        // This happens if user attempts to remove the last point
+      }
+
+      if (updatedData) {
+        props.onEdit({
+          updatedData,
+          editType: 'removePosition',
+          editContext: {
+            featureIndexes: [featureIndex],
+            positionIndexes,
+            position: pickedExistingHandle.geometry.coordinates,
+          },
+        });
+      }
+    } else if (pickedIntermediateHandle) {
+      const { featureIndex, positionIndexes } = pickedIntermediateHandle.properties;
+
+      const feature = props.data.features[featureIndex];
+      const canAddPosition = !(
+        props.modeConfig?.lockRectangles && feature?.properties!.shape === 'Rectangle'
+      );
+
+      if (canAddPosition) {
+        const updatedData = new ImmutableFeatureCollection(props.data)
+          .addPosition(featureIndex, positionIndexes, pickedIntermediateHandle.geometry.coordinates)
+          .getObject();
+
+        if (updatedData) {
+          props.onEdit({
+            updatedData,
+            editType: 'addPosition',
+            editContext: {
+              featureIndexes: [featureIndex],
+              positionIndexes,
+              position: pickedIntermediateHandle.geometry.coordinates,
+            },
+          });
+        }
+      }
+    }
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+
+    if (editHandle) {
+      // Cancel map panning if pointer went down on an edit handle
+      event.cancelPan();
+
+      this._dragEditHandle('movePosition', props, editHandle, event);
+    }
+  }
+
+  _dragEditHandle(
+    editType: string,
+    props: ModeProps<FeatureCollection>,
+    editHandle: EditHandleFeature,
+    event: StopDraggingEvent | DraggingEvent
+  ) {
+    const editHandleProperties = editHandle.properties;
+    const editedFeature = props.data.features[editHandleProperties.featureIndex];
+
+    let updatedData;
+    if (props.modeConfig?.lockRectangles && editedFeature.properties!.shape === 'Rectangle') {
+      const coordinates = updateRectanglePosition(
+        editedFeature as FeatureOf<Polygon>,
+        editHandleProperties.positionIndexes![1],
+        event.mapCoords
+      ) as any; // TODO
+
+      updatedData = new ImmutableFeatureCollection(props.data)
+        .replaceGeometry(editHandleProperties.featureIndex, { coordinates, type: 'Polygon' })
+        .getObject();
+    } else {
+      updatedData = new ImmutableFeatureCollection(props.data)
+        .replacePosition(
+          editHandleProperties.featureIndex,
+          editHandleProperties.positionIndexes,
+          event.mapCoords
+        )
+        .getObject();
+    }
+
+    props.onEdit({
+      updatedData,
+      editType,
+      editContext: {
+        featureIndexes: [editHandleProperties.featureIndex],
+        positionIndexes: editHandleProperties.positionIndexes,
+        position: event.mapCoords,
+      },
+    });
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
+    const cursor = this.getCursor(event);
+    props.onUpdateCursor(cursor);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    const selectedFeatureIndexes = props.selectedIndexes;
+
+    const editHandle = getPickedIntermediateEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle) {
+      const editHandleProperties = editHandle.properties;
+
+      const updatedData = new ImmutableFeatureCollection(props.data)
+        .addPosition(
+          editHandleProperties.featureIndex,
+          editHandleProperties.positionIndexes,
+          event.mapCoords
+        )
+        .getObject();
+
+      props.onEdit({
+        updatedData,
+        editType: 'addPosition',
+        editContext: {
+          featureIndexes: [editHandleProperties.featureIndex],
+          positionIndexes: editHandleProperties.positionIndexes,
+          position: event.mapCoords,
+        },
+      });
+    }
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    const selectedFeatureIndexes = props.selectedIndexes;
+    const editHandle = getPickedEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle) {
+      this._dragEditHandle('finishMovePosition', props, editHandle, event);
+    }
+  }
+
+  getCursor(event: PointerMoveEvent): string | null | undefined {
+    const picks = (event && event.picks) || [];
+
+    const handlesPicked = getPickedEditHandles(picks);
+    if (handlesPicked.length) {
+      return 'cell';
+    }
+    return null;
+  }
+}

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

@@ -0,0 +1,202 @@
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import {point, lineString as toLineString} from '@turf/helpers';
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import turfCenter from '@turf/center';
+import {
+  recursivelyTraverseNestedArrays,
+  nearestPointOnProjectedLine,
+  getPickedEditHandles,
+  getPickedEditHandle,
+  NearestPointType
+} from './utils';
+import {LineString, Point, FeatureCollection, FeatureOf} from '../geojson-types';
+import {Viewport} from '../types';
+import {
+  ModeProps,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  EditHandleFeature,
+  GuideFeatureCollection,
+  GuideFeature
+} from './types';
+import {GeoJsonEditMode} from './geojson-edit-mode';
+import {ImmutableFeatureCollection} from './immutable-feature-collection';
+
+export class ResizeCircleMode extends GeoJsonEditMode {
+  _selectedEditHandle: EditHandleFeature | null | undefined;
+  _isResizing = false;
+
+  // eslint-disable-next-line complexity
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const handles: GuideFeature[] = [];
+    const selectedFeatureIndexes = props.selectedIndexes;
+
+    const {lastPointerMoveEvent} = props;
+    const picks = lastPointerMoveEvent && lastPointerMoveEvent.picks;
+    const mapCoords = lastPointerMoveEvent && lastPointerMoveEvent.mapCoords;
+
+    // intermediate edit handle
+    if (
+      picks &&
+      picks.length &&
+      mapCoords &&
+      selectedFeatureIndexes.length === 1 &&
+      !this._isResizing
+    ) {
+      const featureAsPick = picks.find((pick) => !pick.isGuide);
+
+      // is the feature in the pick selected
+      if (
+        featureAsPick &&
+        featureAsPick.object.properties.shape &&
+        featureAsPick.object.properties.shape.includes('Circle') &&
+        props.selectedIndexes.includes(featureAsPick.index)
+      ) {
+        let intermediatePoint: NearestPointType | null = null;
+        let positionIndexPrefix: number[] = [];
+        const referencePoint = point(mapCoords);
+        // process all lines of the (single) feature
+        recursivelyTraverseNestedArrays(
+          featureAsPick.object.geometry.coordinates,
+          [],
+          (lineString, prefix) => {
+            const lineStringFeature = toLineString(lineString);
+            const candidateIntermediatePoint = this.getNearestPoint(
+              // @ts-expect-error turf types too wide
+              lineStringFeature,
+              referencePoint,
+              props.modeConfig && props.modeConfig.viewport
+            );
+            if (
+              !intermediatePoint ||
+              candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist
+            ) {
+              intermediatePoint = candidateIntermediatePoint;
+              positionIndexPrefix = prefix;
+            }
+          }
+        );
+        // tack on the lone intermediate point to the set of handles
+        if (intermediatePoint) {
+          const {
+            geometry: {coordinates: position},
+            properties: {index}
+          } = intermediatePoint as NearestPointType;
+          handles.push({
+            type: 'Feature',
+            properties: {
+              guideType: 'editHandle',
+              editHandleType: 'intermediate',
+              featureIndex: featureAsPick.index,
+              positionIndexes: [...positionIndexPrefix, index + 1]
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: position
+            }
+          });
+        }
+      }
+    }
+
+    return {
+      type: 'FeatureCollection',
+      features: handles
+    };
+  }
+
+  // turf.js does not support elevation for nearestPointOnLine
+  getNearestPoint(
+    line: FeatureOf<LineString>,
+    inPoint: FeatureOf<Point>,
+    viewport: Viewport | null | undefined
+  ): NearestPointType {
+    const {coordinates} = line.geometry;
+    if (coordinates.some((coord) => coord.length > 2)) {
+      if (viewport) {
+        // This line has elevation, we need to use alternative algorithm
+        return nearestPointOnProjectedLine(line, inPoint, viewport);
+      }
+      // eslint-disable-next-line no-console,no-undef
+      console.log(
+        'Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.'
+      );
+    }
+    // @ts-expect-error turf types diff
+    return nearestPointOnLine(line, inPoint);
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+
+    if (editHandle) {
+      // Cancel map panning if pointer went down on an edit handle
+      event.cancelPan();
+
+      const editHandleProperties = editHandle.properties;
+
+      const feature = this.getSelectedFeature(props)!;
+      // @ts-expect-error turf types diff
+      const center = turfCenter(feature).geometry.coordinates;
+      const numberOfSteps = Object.entries(feature.geometry.coordinates[0]).length - 1;
+      const radius = Math.max(distance(center, event.mapCoords), 0.001);
+
+      const {steps = numberOfSteps} = {};
+      const options = {steps};
+      const updatedFeature = circle(center, radius, options);
+      const geometry = updatedFeature.geometry;
+
+      const updatedData = new ImmutableFeatureCollection(props.data)
+        // @ts-expect-error turf types diff
+        .replaceGeometry(editHandleProperties.featureIndex, geometry)
+        .getObject();
+
+      props.onEdit({
+        updatedData,
+        editType: 'unionGeometry',
+        editContext: {
+          featureIndexes: [editHandleProperties.featureIndex]
+        }
+      });
+    }
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
+    if (!this._isResizing) {
+      const selectedEditHandle = getPickedEditHandle(event.picks);
+      this._selectedEditHandle =
+        selectedEditHandle && selectedEditHandle.properties.editHandleType === 'intermediate'
+          ? selectedEditHandle
+          : null;
+    }
+
+    const cursor = this.getCursor(event);
+    props.onUpdateCursor(cursor);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._selectedEditHandle) {
+      this._isResizing = true;
+    }
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._isResizing) {
+      this._selectedEditHandle = null;
+      this._isResizing = false;
+    }
+  }
+
+  getCursor(event: PointerMoveEvent): string | null | undefined {
+    const picks = (event && event.picks) || [];
+
+    const handlesPicked = getPickedEditHandles(picks);
+    if (handlesPicked.length) {
+      return 'cell';
+    }
+    return null;
+  }
+}