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

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

@@ -0,0 +1,394 @@
+// TODO edit-modes: delete handlers once EditMode fully implemented
+
+import turfUnion from '@turf/union';
+import turfDifference from '@turf/difference';
+import turfIntersect from '@turf/intersect';
+
+import {
+  FeatureCollection,
+  Feature,
+  Polygon,
+  Geometry,
+  Position,
+} from '../geojson-types';
+
+import {
+  ClickEvent,
+  Pick,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+} from '../edit-modes/types';
+import { ImmutableFeatureCollection } from '../edit-modes/immutable-feature-collection';
+
+export type EditHandleType = 'existing' | 'intermediate' | 'snap';
+
+export type EditHandle = {
+  position: Position;
+  positionIndexes: number[];
+  featureIndex: number;
+  type: EditHandleType;
+};
+
+export type EditAction = {
+  updatedData: FeatureCollection;
+  editType: string;
+  featureIndexes: number[];
+  editContext: any;
+};
+
+export class ModeHandler {
+  // TODO: add underscore
+  featureCollection: ImmutableFeatureCollection = undefined!;
+  _tentativeFeature: Feature | null | undefined;
+  _modeConfig: any = null;
+  _selectedFeatureIndexes: number[] = [];
+  _clickSequence: Position[] = [];
+
+  constructor(featureCollection?: FeatureCollection) {
+    if (featureCollection) {
+      this.setFeatureCollection(featureCollection);
+    }
+  }
+
+  getFeatureCollection(): FeatureCollection {
+    return this.featureCollection.getObject();
+  }
+
+  getImmutableFeatureCollection(): ImmutableFeatureCollection {
+    return this.featureCollection;
+  }
+
+  getSelectedFeature(): Feature | null | undefined {
+    if (this._selectedFeatureIndexes.length === 1) {
+      return this.featureCollection.getObject().features[this._selectedFeatureIndexes[0]];
+    }
+    return null;
+  }
+
+  getSelectedGeometry(): Geometry | null | undefined {
+    const feature = this.getSelectedFeature();
+    if (feature) {
+      return feature.geometry;
+    }
+    return null;
+  }
+
+  getSelectedFeaturesAsFeatureCollection(): FeatureCollection {
+    const { features } = this.featureCollection.getObject();
+    const selectedFeatures = this.getSelectedFeatureIndexes().map(
+      (selectedIndex) => features[selectedIndex]
+    );
+    return {
+      type: 'FeatureCollection',
+      features: selectedFeatures,
+    };
+  }
+
+  setFeatureCollection(featureCollection: FeatureCollection): void {
+    this.featureCollection = new ImmutableFeatureCollection(featureCollection);
+  }
+
+  getModeConfig(): any {
+    return this._modeConfig;
+  }
+
+  setModeConfig(modeConfig: any): void {
+    if (this._modeConfig === modeConfig) {
+      return;
+    }
+
+    this._modeConfig = modeConfig;
+    this._setTentativeFeature(null);
+  }
+
+  getSelectedFeatureIndexes(): number[] {
+    return this._selectedFeatureIndexes;
+  }
+
+  setSelectedFeatureIndexes(indexes: number[]): void {
+    if (this._selectedFeatureIndexes === indexes) {
+      return;
+    }
+
+    this._selectedFeatureIndexes = indexes;
+    this._setTentativeFeature(null);
+  }
+
+  getClickSequence(): Position[] {
+    return this._clickSequence;
+  }
+
+  resetClickSequence(): void {
+    this._clickSequence = [];
+  }
+
+  getTentativeFeature(): Feature | null | undefined {
+    return this._tentativeFeature;
+  }
+
+  // TODO: remove the underscore
+  _setTentativeFeature(tentativeFeature: Feature | null | undefined): void {
+    this._tentativeFeature = tentativeFeature;
+    if (!tentativeFeature) {
+      // Reset the click sequence
+      this._clickSequence = [];
+    }
+  }
+
+  /**
+   * Returns a flat array of positions for the given feature along with their indexes into the feature's geometry's coordinates.
+   *
+   * @param featureIndex The index of the feature to get edit handles
+   */
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    return [];
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    return 'cell';
+  }
+
+  isSelectionPicked(picks: Pick[]): boolean {
+    if (!picks.length) return false;
+    const pickedIndexes = picks.map(({ index }) => index);
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+    return selectedFeatureIndexes.some((index) => pickedIndexes.includes(index));
+  }
+
+  getAddFeatureAction(geometry: Geometry): EditAction {
+    // Unsure why flow can't deal with Geometry type, but there I fixed it
+    const geometryAsAny: any = geometry;
+
+    const updatedData = this.getImmutableFeatureCollection()
+      .addFeature({
+        type: 'Feature',
+        properties: {},
+        geometry: geometryAsAny,
+      })
+      .getObject();
+
+    return {
+      updatedData,
+      editType: 'addFeature',
+      featureIndexes: [updatedData.features.length - 1],
+      editContext: {
+        featureIndexes: [updatedData.features.length - 1],
+      },
+    };
+  }
+
+  getAddManyFeaturesAction(featureCollection: FeatureCollection): EditAction {
+    const features = featureCollection.features;
+    let updatedData = this.getImmutableFeatureCollection();
+    const initialIndex = updatedData.getObject().features.length;
+    const updatedIndexes: number[] = [];
+    for (const feature of features) {
+      const { properties, geometry } = feature;
+      const geometryAsAny: any = geometry;
+      updatedData = updatedData.addFeature({
+        type: 'Feature',
+        properties,
+        geometry: geometryAsAny,
+      });
+      updatedIndexes.push(initialIndex + updatedIndexes.length);
+    }
+
+    return {
+      updatedData: updatedData.getObject(),
+      editType: 'addFeature',
+      featureIndexes: updatedIndexes,
+      editContext: {
+        featureIndexes: updatedIndexes,
+      },
+    };
+  }
+
+  getAddFeatureOrBooleanPolygonAction(geometry: Polygon): EditAction | null | undefined {
+    const selectedFeature = this.getSelectedFeature();
+    const modeConfig = this.getModeConfig();
+    if (modeConfig && modeConfig.booleanOperation) {
+      if (
+        !selectedFeature ||
+        (selectedFeature.geometry.type !== 'Polygon' &&
+          selectedFeature.geometry.type !== 'MultiPolygon')
+      ) {
+        // eslint-disable-next-line no-console,no-undef
+        console.warn(
+          'booleanOperation only supported for single Polygon or MultiPolygon selection'
+        );
+        return null;
+      }
+
+      const feature = {
+        type: 'Feature',
+        geometry,
+      };
+
+      let updatedGeometry;
+      if (modeConfig.booleanOperation === 'union') {
+        // @ts-expect-error turf types diff
+        updatedGeometry = turfUnion(selectedFeature, feature);
+      } else if (modeConfig.booleanOperation === 'difference') {
+        // @ts-expect-error turf type diff
+        updatedGeometry = turfDifference(selectedFeature, feature);
+      } else if (modeConfig.booleanOperation === 'intersection') {
+        // @ts-expect-error turf type diff
+        updatedGeometry = turfIntersect(selectedFeature, feature);
+      } else {
+        // eslint-disable-next-line no-console,no-undef
+        console.warn(`Invalid booleanOperation ${modeConfig.booleanOperation}`);
+        return null;
+      }
+
+      if (!updatedGeometry) {
+        // eslint-disable-next-line no-console,no-undef
+        console.warn('Canceling edit. Boolean operation erased entire polygon.');
+        return null;
+      }
+
+      const featureIndex = this.getSelectedFeatureIndexes()[0];
+
+      const updatedData = this.getImmutableFeatureCollection()
+        .replaceGeometry(featureIndex, updatedGeometry.geometry)
+        .getObject();
+
+      const editAction: EditAction = {
+        updatedData,
+        editType: 'unionGeometry',
+        featureIndexes: [featureIndex],
+        editContext: {
+          featureIndexes: [featureIndex],
+        },
+      };
+
+      return editAction;
+    }
+    return this.getAddFeatureAction(geometry);
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    this._clickSequence.push(event.mapCoords);
+
+    return null;
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    return { editAction: null, cancelMapPan: false };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    return null;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    return null;
+  }
+}
+
+export function getPickedEditHandle(
+  picks: any[] | null | undefined
+): EditHandle | null | undefined {
+  const info = picks && picks.find((pick) => pick.isEditingHandle);
+  if (info) {
+    return info.object;
+  }
+  return null;
+}
+
+export function getIntermediatePosition(position1: Position, position2: Position): Position {
+  const intermediatePosition: Position = [
+    (position1[0] + position2[0]) / 2.0,
+    (position1[1] + position2[1]) / 2.0,
+  ];
+
+  return intermediatePosition;
+}
+
+export function getEditHandlesForGeometry(
+  geometry: Geometry,
+  featureIndex: number,
+  editHandleType: EditHandleType = 'existing'
+): EditHandle[] {
+  let handles: EditHandle[] = [];
+
+  switch (geometry.type) {
+    case 'Point':
+      // positions are not nested
+      handles = [
+        {
+          position: geometry.coordinates,
+          positionIndexes: [],
+          featureIndex,
+          type: editHandleType,
+        },
+      ];
+      break;
+    case 'MultiPoint':
+    case 'LineString':
+      // positions are nested 1 level
+      handles = handles.concat(
+        getEditHandlesForCoordinates(geometry.coordinates, [], featureIndex, editHandleType)
+      );
+      break;
+    case 'Polygon':
+    case 'MultiLineString':
+      // positions are nested 2 levels
+      for (let a = 0; a < geometry.coordinates.length; a++) {
+        handles = handles.concat(
+          getEditHandlesForCoordinates(geometry.coordinates[a], [a], featureIndex, editHandleType)
+        );
+        if (geometry.type === 'Polygon') {
+          // Don't repeat the first/last handle for Polygons
+          handles = handles.slice(0, -1);
+        }
+      }
+
+      break;
+    case 'MultiPolygon':
+      // positions are nested 3 levels
+      for (let a = 0; a < geometry.coordinates.length; a++) {
+        for (let b = 0; b < geometry.coordinates[a].length; b++) {
+          handles = handles.concat(
+            getEditHandlesForCoordinates(
+              geometry.coordinates[a][b],
+              [a, b],
+              featureIndex,
+              editHandleType
+            )
+          );
+          // Don't repeat the first/last handle for Polygons
+          handles = handles.slice(0, -1);
+        }
+      }
+
+      break;
+    default:
+      // @ts-expect-error unexpected case
+      throw Error(`Unhandled geometry type: ${geometry.type}`);
+  }
+
+  return handles;
+}
+
+function getEditHandlesForCoordinates(
+  coordinates: any[],
+  positionIndexPrefix: number[],
+  featureIndex: number,
+  editHandleType: EditHandleType = 'existing'
+): EditHandle[] {
+  const editHandles: EditHandle[] = [];
+  for (let i = 0; i < coordinates.length; i++) {
+    const position = coordinates[i] as Position;
+    editHandles.push({
+      position,
+      positionIndexes: [...positionIndexPrefix, i],
+      featureIndex,
+      type: editHandleType,
+    });
+  }
+  return editHandles;
+}

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

@@ -0,0 +1,263 @@
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import { point, lineString as toLineString } from '@turf/helpers';
+import { Position, FeatureOf, Point, LineString } from '../geojson-types';
+import {
+  recursivelyTraverseNestedArrays,
+  nearestPointOnProjectedLine,
+  NearestPointType,
+} from '../utils';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+} from '../edit-modes/types';
+import {
+  EditAction,
+  EditHandle,
+  ModeHandler,
+  getPickedEditHandle,
+  getEditHandlesForGeometry,
+} from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ModifyHandler extends ModeHandler {
+  _lastPointerMovePicks: any;
+
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    let handles: EditHandle[] = [];
+    const { features } = this.featureCollection.getObject();
+
+    for (const index of this.getSelectedFeatureIndexes()) {
+      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 = picks.find(
+        (pick) => pick.isEditingHandle && pick.object && pick.object.type === 'existing'
+      );
+      // don't show intermediate point when too close to an existing edit handle
+      const featureAsPick = !existingEditHandle && picks.find((pick) => !pick.isEditingHandle);
+
+      // is the feature in the pick selected
+      if (
+        featureAsPick &&
+        !featureAsPick.object.geometry.type.includes('Point') &&
+        this.getSelectedFeatureIndexes().includes(featureAsPick.index)
+      ) {
+        let intermediatePoint: NearestPointType | null | undefined = null;
+        let positionIndexPrefix = [];
+        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.nearestPointOnLine(
+              // @ts-expect-error turf type diff
+              lineStringFeature,
+              referencePoint
+            );
+            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;
+          handles = [
+            ...handles,
+            {
+              position,
+              positionIndexes: [...positionIndexPrefix, index + 1],
+              featureIndex: featureAsPick.index,
+              type: 'intermediate',
+            },
+          ];
+        }
+      }
+    }
+
+    return handles;
+  }
+
+  // turf.js does not support elevation for nearestPointOnLine
+  nearestPointOnLine(line: FeatureOf<LineString>, inPoint: FeatureOf<Point>): NearestPointType {
+    const { coordinates } = line.geometry;
+    if (coordinates.some((coord) => coord.length > 2)) {
+      const modeConfig = this.getModeConfig();
+      if (modeConfig && modeConfig.viewport) {
+        // This line has elevation, we need to use alternative algorithm
+        return nearestPointOnProjectedLine(line, inPoint, modeConfig.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 geojson types diff
+    return nearestPointOnLine(line, inPoint);
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    const clickedEditHandle = getPickedEditHandle(event.picks);
+
+    if (clickedEditHandle && clickedEditHandle.featureIndex >= 0) {
+      if (clickedEditHandle.type === 'existing') {
+        let updatedData;
+        try {
+          updatedData = this.getImmutableFeatureCollection()
+            .removePosition(clickedEditHandle.featureIndex, clickedEditHandle.positionIndexes)
+            .getObject();
+        } catch (ignored) {
+          // This happens if user attempts to remove the last point
+        }
+
+        if (updatedData) {
+          editAction = {
+            updatedData,
+            editType: 'removePosition',
+            featureIndexes: [clickedEditHandle.featureIndex],
+            editContext: {
+              positionIndexes: clickedEditHandle.positionIndexes,
+              position: clickedEditHandle.position,
+            },
+          };
+        }
+      } else if (clickedEditHandle.type === 'intermediate') {
+        const updatedData = this.getImmutableFeatureCollection()
+          .addPosition(
+            clickedEditHandle.featureIndex,
+            clickedEditHandle.positionIndexes,
+            clickedEditHandle.position
+          )
+          .getObject();
+
+        if (updatedData) {
+          editAction = {
+            updatedData,
+            editType: 'addPosition',
+            featureIndexes: [clickedEditHandle.featureIndex],
+            editContext: {
+              positionIndexes: clickedEditHandle.positionIndexes,
+              position: clickedEditHandle.position,
+            },
+          };
+        }
+      }
+    }
+    return editAction;
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    this._lastPointerMovePicks = event.picks;
+
+    let editAction: EditAction | null | undefined = null;
+
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+
+    if (event.isDragging && editHandle) {
+      const updatedData = this.getImmutableFeatureCollection()
+        .replacePosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+        .getObject();
+
+      editAction = {
+        updatedData,
+        editType: 'movePosition',
+        featureIndexes: [editHandle.featureIndex],
+        editContext: {
+          positionIndexes: editHandle.positionIndexes,
+          position: event.mapCoords,
+        },
+      };
+    }
+
+    // Cancel map panning if pointer went down on an edit handle
+    const cancelMapPan = Boolean(editHandle);
+
+    return { editAction, cancelMapPan };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+
+    const editHandle = getPickedEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle && editHandle.type === 'intermediate') {
+      const updatedData = this.getImmutableFeatureCollection()
+        .addPosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+        .getObject();
+
+      editAction = {
+        updatedData,
+        editType: 'addPosition',
+        featureIndexes: [editHandle.featureIndex],
+        editContext: {
+          positionIndexes: editHandle.positionIndexes,
+          position: event.mapCoords,
+        },
+      };
+    }
+
+    return editAction;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+    const editHandle = getPickedEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle) {
+      const updatedData = this.getImmutableFeatureCollection()
+        .replacePosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+        .getObject();
+
+      editAction = {
+        updatedData,
+        editType: 'finishMovePosition',
+        featureIndexes: [editHandle.featureIndex],
+        editContext: {
+          positionIndexes: editHandle.positionIndexes,
+          position: event.mapCoords,
+        },
+      };
+    }
+
+    return editAction;
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    const picks = this._lastPointerMovePicks;
+
+    if (picks && picks.length > 0) {
+      const handlePicked = picks.some((pick) => pick.isEditingHandle);
+      if (handlePicked) {
+        return 'cell';
+      }
+    }
+
+    return isDragging ? 'grabbing' : 'grab';
+  }
+}