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

package/src/mode-handlers/rotate-handler.ts

@@ -0,0 +1,107 @@
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import turfTransformRotate from '@turf/transform-rotate';
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class RotateHandler extends ModeHandler {
+  _isRotatable: boolean = undefined!;
+  _geometryBeingRotated: FeatureCollection | null | undefined;
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    let editAction: EditAction | null | undefined = null;
+
+    this._isRotatable = Boolean(this._geometryBeingRotated) || this.isSelectionPicked(event.picks);
+
+    if (!this._isRotatable || !event.pointerDownMapCoords) {
+      // Nothing to do
+      return { editAction: null, cancelMapPan: false };
+    }
+
+    if (event.isDragging && this._geometryBeingRotated) {
+      // Rotate the geometry
+      editAction = this.getRotateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'rotating'
+      );
+    }
+
+    return { editAction, cancelMapPan: true };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    if (!this._isRotatable) {
+      return null;
+    }
+
+    this._geometryBeingRotated = this.getSelectedFeaturesAsFeatureCollection();
+    return null;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    if (this._geometryBeingRotated) {
+      // Rotate the geometry
+      editAction = this.getRotateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'rotated'
+      );
+      this._geometryBeingRotated = null;
+    }
+
+    return editAction;
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    if (this._isRotatable) {
+      // TODO: look at doing SVG cursors to get a better "rotate" cursor
+      return 'move';
+    }
+    return isDragging ? 'grabbing' : 'grab';
+  }
+
+  getRotateAction(startDragPoint: Position, currentPoint: Position, editType: string): EditAction {
+    const startPosition = startDragPoint;
+    // @ts-expect-error turf types diff
+    const centroid = turfCentroid(this._geometryBeingRotated);
+    // @ts-expect-error turf types diff
+    const angle = getRotationAngle(centroid, startPosition, currentPoint);
+
+    // @ts-expect-error turf type diff
+    const rotatedFeatures: FeatureCollection = turfTransformRotate(
+      // @ts-expect-error turf type diff
+      this._geometryBeingRotated,
+      angle
+    );
+
+    let updatedData = this.getImmutableFeatureCollection();
+
+    const selectedIndexes = this.getSelectedFeatureIndexes();
+    for (let i = 0; i < selectedIndexes.length; i++) {
+      const selectedIndex = selectedIndexes[i];
+      const movedFeature = rotatedFeatures.features[i];
+      updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+    }
+
+    return {
+      updatedData: updatedData.getObject(),
+      editType,
+      featureIndexes: selectedIndexes,
+      editContext: null,
+    };
+  }
+}
+
+function getRotationAngle(centroid: Position, startDragPoint: Position, currentPoint: Position) {
+  const bearing1 = turfBearing(centroid, startDragPoint);
+  const bearing2 = turfBearing(centroid, currentPoint);
+  return bearing2 - bearing1;
+}

package/src/mode-handlers/scale-handler.ts

@@ -0,0 +1,105 @@
+import turfCentroid from '@turf/centroid';
+import turfDistance from '@turf/distance';
+import turfTransformScale from '@turf/transform-scale';
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ScaleHandler extends ModeHandler {
+  _isScalable: boolean = undefined!;
+  _geometryBeingScaled: FeatureCollection | null | undefined;
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    let editAction: EditAction | null | undefined = null;
+
+    this._isScalable = Boolean(this._geometryBeingScaled) || this.isSelectionPicked(event.picks);
+
+    if (!this._isScalable || !event.pointerDownMapCoords) {
+      // Nothing to do
+      return { editAction: null, cancelMapPan: false };
+    }
+
+    if (event.isDragging && this._geometryBeingScaled) {
+      // Scale the geometry
+      editAction = this.getScaleAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'scaling'
+      );
+    }
+
+    return { editAction, cancelMapPan: true };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    if (!this._isScalable) {
+      return null;
+    }
+
+    this._geometryBeingScaled = this.getSelectedFeaturesAsFeatureCollection();
+    return null;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    if (this._geometryBeingScaled) {
+      // Scale the geometry
+      editAction = this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaled');
+      this._geometryBeingScaled = null;
+    }
+
+    return editAction;
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    if (this._isScalable) {
+      // TODO: look at doing SVG cursors to get a better "scale" cursor
+      return 'move';
+    }
+    return isDragging ? 'grabbing' : 'grab';
+  }
+
+  getScaleAction(startDragPoint: Position, currentPoint: Position, editType: string): EditAction {
+    const startPosition = startDragPoint;
+    // @ts-expect-error turf types diff
+    const centroid = turfCentroid(this._geometryBeingScaled);
+    // @ts-expect-error turf types diff
+    const factor = getScaleFactor(centroid, startPosition, currentPoint);
+    // @ts-expect-error turf type diff
+    const scaledFeatures: FeatureCollection = turfTransformScale(
+      // @ts-expect-error turf type diff
+      this._geometryBeingScaled,
+      factor,
+      {
+        origin: centroid,
+      }
+    );
+
+    let updatedData = this.getImmutableFeatureCollection();
+
+    const selectedIndexes = this.getSelectedFeatureIndexes();
+    for (let i = 0; i < selectedIndexes.length; i++) {
+      const selectedIndex = selectedIndexes[i];
+      const movedFeature = scaledFeatures.features[i];
+      updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+    }
+
+    return {
+      updatedData: updatedData.getObject(),
+      editType,
+      featureIndexes: selectedIndexes,
+      editContext: null,
+    };
+  }
+}
+
+function getScaleFactor(centroid: Position, startDragPoint: Position, currentPoint: Position) {
+  const startDistance = turfDistance(centroid, startDragPoint);
+  const endDistance = turfDistance(centroid, currentPoint);
+  return endDistance / startDistance;
+}

package/src/mode-handlers/snappable-handler.ts

@@ -0,0 +1,184 @@
+import { Feature, FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import {
+  EditHandle,
+  EditAction,
+  ModeHandler,
+  getPickedEditHandle,
+  getEditHandlesForGeometry,
+} from './mode-handler';
+
+type HandlePicks = { pickedHandle?: EditHandle; potentialSnapHandle?: EditHandle };
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class SnappableHandler extends ModeHandler {
+  _handler: ModeHandler;
+  _editHandlePicks: HandlePicks | null | undefined;
+  _startDragSnapHandlePosition: Position = undefined!;
+
+  constructor(handler: ModeHandler) {
+    super();
+    this._handler = handler;
+  }
+
+  setFeatureCollection(featureCollection: FeatureCollection): void {
+    this._handler.setFeatureCollection(featureCollection);
+  }
+
+  setModeConfig(modeConfig: any): void {
+    this._modeConfig = modeConfig;
+    this._handler.setModeConfig(modeConfig);
+  }
+
+  setSelectedFeatureIndexes(indexes: number[]): void {
+    this._handler.setSelectedFeatureIndexes(indexes);
+  }
+
+  _getSnappedMouseEvent(event: Record<string, any>, snapPoint: Position): PointerMoveEvent {
+    // @ts-expect-error narrow event type
+    return Object.assign({}, event, {
+      mapCoords: snapPoint,
+      pointerDownMapCoords: this._startDragSnapHandlePosition,
+    });
+  }
+
+  _getEditHandlePicks(event: PointerMoveEvent): HandlePicks {
+    const { picks } = event;
+
+    const potentialSnapHandle = picks.find(
+      (pick) => pick.object && pick.object.type === 'intermediate'
+    );
+    const handles = { potentialSnapHandle: potentialSnapHandle && potentialSnapHandle.object };
+
+    const pickedHandle = getPickedEditHandle(event.pointerDownPicks);
+    if (pickedHandle) {
+      return { ...handles, pickedHandle };
+    }
+
+    return handles;
+  }
+
+  _updatePickedHandlePosition(editAction: EditAction) {
+    const { pickedHandle = {} as EditHandle } = this._editHandlePicks || {};
+
+    if (pickedHandle && editAction) {
+      const { featureIndexes, updatedData } = editAction;
+
+      for (let i = 0; i < featureIndexes.length; i++) {
+        const selectedIndex = featureIndexes[i];
+        const updatedFeature = updatedData.features[selectedIndex];
+
+        const { positionIndexes, featureIndex } = pickedHandle;
+        if (selectedIndex >= 0 && featureIndex === selectedIndex) {
+          const { coordinates } = updatedFeature.geometry;
+          pickedHandle.position = positionIndexes.reduce(
+            (a: any[], b: number) => a[b],
+            coordinates
+          ) as Position;
+        }
+      }
+    }
+  }
+
+  // If additionalSnapTargets is present in modeConfig and is populated, this
+  // method will return those features along with the features
+  // that live in the current layer. Otherwise, this method will simply return the
+  // features from the current layer
+  _getSnapTargets(): Feature[] {
+    let { additionalSnapTargets } = this.getModeConfig() || {};
+    additionalSnapTargets = additionalSnapTargets || [];
+
+    const features = [
+      ...this._handler.featureCollection.getObject().features,
+      ...additionalSnapTargets,
+    ];
+    return features;
+  }
+
+  _getNonPickedIntermediateHandles(): EditHandle[] {
+    const handles: EditHandle[] = [];
+    const features = this._getSnapTargets();
+
+    for (let i = 0; i < features.length; i++) {
+      // Filter out the currently selected feature(s)
+      const isCurrentIndexFeatureNotSelected =
+        i < features.length && !this._handler.getSelectedFeatureIndexes().includes(i);
+
+      if (isCurrentIndexFeatureNotSelected) {
+        const { geometry } = features[i];
+        handles.push(...getEditHandlesForGeometry(geometry, i, 'intermediate'));
+      }
+    }
+    return handles;
+  }
+
+  // If no snap handle has been picked, only display the edit handles of the
+  // selected feature. If a snap handle has been picked, display said snap handle
+  // along with all snappable points on all non-selected features.
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): any[] {
+    const { enableSnapping } = this._modeConfig || {};
+    const handles = this._handler.getEditHandles(picks, mapCoords);
+
+    if (!enableSnapping) return handles;
+    const { pickedHandle } = this._editHandlePicks || {};
+
+    if (pickedHandle) {
+      handles.push(...this._getNonPickedIntermediateHandles(), pickedHandle);
+      return handles;
+    }
+
+    const { features } = this._handler.featureCollection.getObject();
+    for (const index of this._handler.getSelectedFeatureIndexes()) {
+      if (index < features.length) {
+        const { geometry } = features[index];
+        handles.push(...getEditHandlesForGeometry(geometry, index, 'snap'));
+      }
+    }
+
+    return handles.filter(Boolean);
+  }
+
+  _getSnapAwareEvent(event: Record<string, any>): Record<string, any> {
+    const { potentialSnapHandle } = this._editHandlePicks || {};
+
+    return potentialSnapHandle && potentialSnapHandle.position
+      ? this._getSnappedMouseEvent(event, potentialSnapHandle.position)
+      : event;
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    this._startDragSnapHandlePosition = (getPickedEditHandle(event.picks) || {}).position as Position;
+    return this._handler.handleStartDragging(event);
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    // @ts-expect-error narrow event type
+    const modeActionSummary = this._handler.handleStopDragging(this._getSnapAwareEvent(event));
+
+    this._editHandlePicks = null;
+    return modeActionSummary;
+  }
+
+  getCursor(event: { isDragging: boolean }): string {
+    return this._handler.getCursor(event);
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const { enableSnapping } = this._handler.getModeConfig() || {};
+
+    if (enableSnapping) {
+      this._editHandlePicks = this._getEditHandlePicks(event);
+    }
+    // @ts-expect-error narrow event type
+    const modeActionSummary = this._handler.handlePointerMove(this._getSnapAwareEvent(event));
+    const { editAction } = modeActionSummary;
+    if (editAction) {
+      this._updatePickedHandlePosition(editAction);
+    }
+
+    return modeActionSummary;
+  }
+}

package/src/mode-handlers/split-polygon-handler.ts

@@ -0,0 +1,177 @@
+import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
+import turfDifference from '@turf/difference';
+import turfBuffer from '@turf/buffer';
+import lineIntersect from '@turf/line-intersect';
+import { lineString } from '@turf/helpers';
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import turfDestination from '@turf/destination';
+import turfPolygonToLine from '@turf/polygon-to-line';
+import nearestPointOnLine, { NearestPointOnLine } from '@turf/nearest-point-on-line';
+import { generatePointsParallelToLinePoints } from '../utils';
+import { EditAction, ModeHandler } from './mode-handler';
+import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class SplitPolygonHandler extends ModeHandler {
+  calculateMapCoords(clickSequence: any, mapCoords: any) {
+    const modeConfig = this.getModeConfig();
+    if (!modeConfig || !modeConfig.lock90Degree || !clickSequence.length) {
+      return mapCoords;
+    }
+    if (clickSequence.length === 1) {
+      // if first point is clicked, then find closest polygon point and build ~90deg vector
+      const firstPoint = clickSequence[0];
+      const selectedGeometry = this.getSelectedGeometry();
+      // @ts-expect-error turf type diff
+      const feature = turfPolygonToLine(selectedGeometry);
+
+      const lines = feature.type === 'FeatureCollection' ? feature.features : [feature];
+      let minDistance = Number.MAX_SAFE_INTEGER;
+      let closestPoint: NearestPointOnLine | null = null;
+      // If Multipolygon, then we should find nearest polygon line and stick split to it.
+      lines.forEach((line) => {
+        const snapPoint = nearestPointOnLine(line, firstPoint);
+        const distanceFromOrigin = turfDistance(snapPoint, firstPoint);
+        if (minDistance > distanceFromOrigin) {
+          minDistance = distanceFromOrigin;
+          closestPoint = snapPoint;
+        }
+      });
+
+      if (closestPoint) {
+        // closest point is used as 90degree entry to the polygon
+        const lastBearing = turfBearing(firstPoint, closestPoint);
+        const currentDistance = turfDistance(firstPoint, mapCoords, { units: 'meters' });
+        return turfDestination(firstPoint, currentDistance, lastBearing, {
+          units: 'meters',
+        }).geometry.coordinates;
+      }
+      return mapCoords;
+    }
+    // Allow only 90 degree turns
+    const lastPoint = clickSequence[clickSequence.length - 1];
+    const [approximatePoint] = generatePointsParallelToLinePoints(
+      clickSequence[clickSequence.length - 2],
+      lastPoint,
+      mapCoords
+    );
+    // align point with current ground
+    const nearestPt = nearestPointOnLine(lineString([lastPoint, approximatePoint]), mapCoords)
+      .geometry.coordinates;
+    return nearestPt;
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick({
+      ...event,
+      mapCoords: this.calculateMapCoords(this.getClickSequence(), event.mapCoords),
+    });
+    const editAction: EditAction | null | undefined = null;
+    const tentativeFeature = this.getTentativeFeature();
+    const selectedGeometry = this.getSelectedGeometry();
+    const clickSequence = this.getClickSequence();
+
+    if (!selectedGeometry) {
+      // eslint-disable-next-line no-console,no-undef
+      console.warn('A polygon must be selected for splitting');
+      this._setTentativeFeature(null);
+      return editAction;
+    }
+    const pt = {
+      type: 'Point',
+      coordinates: clickSequence[clickSequence.length - 1],
+    };
+    // @ts-expect-error turf type diff
+    const isPointInPolygon = booleanPointInPolygon(pt, selectedGeometry);
+    if (clickSequence.length > 1 && tentativeFeature && !isPointInPolygon) {
+      this.resetClickSequence();
+      // @ts-expect-error turf type diff
+      const isLineInterectingWithPolygon = lineIntersect(tentativeFeature, selectedGeometry);
+      if (isLineInterectingWithPolygon.features.length === 0) {
+        this._setTentativeFeature(null);
+        return editAction;
+      }
+      return this.splitPolygon();
+    }
+
+    return editAction;
+  }
+
+  handlePointerMove({ mapCoords }: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const clickSequence = this.getClickSequence();
+    const result = { editAction: null, cancelMapPan: false };
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    this._setTentativeFeature({
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: [...clickSequence, this.calculateMapCoords(clickSequence, mapCoords)],
+      },
+    });
+
+    return result;
+  }
+
+  splitPolygon() {
+    const selectedGeometry = this.getSelectedGeometry();
+    const tentativeFeature = this.getTentativeFeature();
+    const featureIndex = this.getSelectedFeatureIndexes()[0];
+    const modeConfig = this.getModeConfig() || {};
+
+    // Default gap in between the polygon
+    let { gap = 0.1, units = 'centimeters' } = modeConfig;
+    if (gap === 0) {
+      gap = 0.1;
+      units = 'centimeters';
+    }
+    // @ts-expect-error turf type diff
+    const buffer = turfBuffer(tentativeFeature, gap, { units });
+    // @ts-expect-error turf type diff
+    const updatedGeometry = turfDifference(selectedGeometry, buffer);
+    this._setTentativeFeature(null);
+    if (!updatedGeometry) {
+      // eslint-disable-next-line no-console,no-undef
+      console.warn('Canceling edit. Split Polygon erased');
+      return null;
+    }
+
+    const { type, coordinates } = updatedGeometry.geometry;
+    let updatedCoordinates: any[] = []; // TODO
+    if (type === 'Polygon') {
+      // Update the coordinates as per Multipolygon
+      updatedCoordinates = coordinates.map((c) => [c]);
+    } else {
+      // Handle Case when Multipolygon has holes
+      updatedCoordinates = coordinates.reduce((agg, prev) => {
+        prev.forEach((p) => {
+          agg.push([p]);
+        });
+        return agg;
+      }, [] as any);
+    }
+
+    // Update the type to Mulitpolygon
+    const updatedData = this.getImmutableFeatureCollection().replaceGeometry(featureIndex, {
+      type: 'MultiPolygon',
+      coordinates: updatedCoordinates,
+    });
+
+    const editAction: EditAction = {
+      updatedData: updatedData.getObject(),
+      editType: 'split',
+      featureIndexes: [featureIndex],
+      editContext: null,
+    };
+
+    return editAction;
+  }
+}

package/src/mode-handlers/three-click-polygon-handler.ts

@@ -0,0 +1,25 @@
+import { ClickEvent } from '../edit-modes/types';
+import { ModeHandler, EditAction } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ThreeClickPolygonHandler extends ModeHandler {
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick(event);
+
+    const tentativeFeature = this.getTentativeFeature();
+    const clickSequence = this.getClickSequence();
+
+    if (
+      clickSequence.length > 2 &&
+      tentativeFeature &&
+      tentativeFeature.geometry.type === 'Polygon'
+    ) {
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry);
+      this.resetClickSequence();
+      this._setTentativeFeature(null);
+      return editAction;
+    }
+
+    return null;
+  }
+}