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

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

@@ -0,0 +1,201 @@
+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, Point } 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 { FeatureCollection } from '../geojson-types';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  TentativeFeature,
+} from './types';
+import { GeoJsonEditMode, GeoJsonEditAction } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class SplitPolygonMode extends GeoJsonEditMode {
+  calculateMapCoords(clickSequence: any, mapCoords: any, props: ModeProps<FeatureCollection>) {
+    const modeConfig = props.modeConfig;
+    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(props);
+      // @ts-expect-error turf types 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;
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const clickSequence = this.getClickSequence();
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    if (clickSequence.length === 0 || !props.lastPointerMoveEvent) {
+      // nothing to do yet
+      return guides;
+    }
+
+    const { mapCoords } = props.lastPointerMoveEvent;
+
+    guides.features.push({
+      type: 'Feature',
+      properties: {
+        guideType: 'tentative',
+      },
+      geometry: {
+        type: 'LineString',
+        coordinates: [...clickSequence, this.calculateMapCoords(clickSequence, mapCoords, props)],
+      },
+    });
+
+    return guides;
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const tentativeFeature = this.getTentativeGuide(props);
+
+    const selectedGeometry = this.getSelectedGeometry(props);
+
+    if (!selectedGeometry) {
+      // eslint-disable-next-line no-console,no-undef
+      console.warn('A polygon must be selected for splitting');
+      return;
+    }
+
+    const clickSequence = this.getClickSequence();
+    if (tentativeFeature && tentativeFeature.geometry.type === 'LineString') {
+      clickSequence.push(
+        tentativeFeature.geometry.coordinates[tentativeFeature.geometry.coordinates.length - 1]
+      );
+    } else {
+      this.addClickSequence(event);
+    }
+
+    const pt: Point = {
+      type: 'Point',
+      coordinates: clickSequence[clickSequence.length - 1],
+    };
+
+    // @ts-expect-error turf types diff
+    const isPointInPolygon = booleanPointInPolygon(pt, selectedGeometry);
+    if (clickSequence.length > 1 && tentativeFeature && !isPointInPolygon) {
+      this.resetClickSequence();
+      // @ts-expect-error narrow type
+      const isLineInterectingWithPolygon = lineIntersect(tentativeFeature, selectedGeometry);
+      if (isLineInterectingWithPolygon.features.length === 0) {
+        return;
+      }
+
+      const editAction = this.splitPolygon(tentativeFeature, props);
+
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+  }
+
+  splitPolygon(tentativeFeature: TentativeFeature, props: ModeProps<FeatureCollection>) {
+    const selectedGeometry = this.getSelectedGeometry(props);
+    const featureIndex = props.selectedIndexes[0];
+    const modeConfig = props.modeConfig || {};
+
+    // Default gap in between the polygon
+    let { gap = 0.1, units = 'centimeters' } = modeConfig;
+    if (gap === 0) {
+      gap = 0.1;
+      units = 'centimeters';
+    }
+
+    const buffer = turfBuffer(tentativeFeature, gap, { units });
+    // @ts-expect-error turf types diff
+    const updatedGeometry = turfDifference(selectedGeometry, buffer);
+    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) => {
+          // @ts-expect-error revisit coordinates type here
+          agg.push([p]);
+        });
+        return agg;
+      }, []);
+    }
+
+    // Update the type to Mulitpolygon
+    const updatedData = new ImmutableFeatureCollection(props.data).replaceGeometry(featureIndex, {
+      type: 'MultiPolygon',
+      coordinates: updatedCoordinates,
+    });
+
+    const editAction: GeoJsonEditAction = {
+      updatedData: updatedData.getObject(),
+      editType: 'split',
+      editContext: {
+        featureIndexes: [featureIndex],
+      },
+    };
+
+    return editAction;
+  }
+}

package/src/edit-modes/three-click-polygon-mode.ts

@@ -0,0 +1,111 @@
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  TentativeFeature,
+} from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class ThreeClickPolygonMode extends GeoJsonEditMode {
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    this.addClickSequence(event);
+    const clickSequence = this.getClickSequence();
+    const tentativeFeature = this.getTentativeGuide(props);
+
+    if (
+      clickSequence.length > 2 &&
+      tentativeFeature &&
+      tentativeFeature.geometry.type === 'Polygon'
+    ) {
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry, props);
+      this.resetClickSequence();
+
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const { lastPointerMoveEvent, modeConfig } = props;
+    const clickSequence = this.getClickSequence();
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return guides;
+    }
+
+    const hoveredCoord = lastPointerMoveEvent.mapCoords;
+
+    if (clickSequence.length === 1) {
+      guides.features.push({
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [clickSequence[0], hoveredCoord],
+        },
+      });
+    } else {
+      const polygon = this.getThreeClickPolygon(
+        clickSequence[0],
+        clickSequence[1],
+        hoveredCoord,
+        modeConfig
+      );
+      if (polygon) {
+        guides.features.push({
+          type: 'Feature',
+          properties: {
+            guideType: 'tentative',
+          },
+          geometry: polygon.geometry,
+        });
+      }
+    }
+
+    return guides;
+  }
+
+  getThreeClickPolygon(
+    coord1: Position,
+    coord2: Position,
+    coord3: Position,
+    modeConfig: any
+  ): FeatureOf<Polygon> | null | undefined {
+    return null;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+    super.handlePointerMove(event, props);
+  }
+
+  createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
+    const { lastPointerMoveEvent } = props;
+    const clickSequence = this.getClickSequence();
+
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+
+    let tentativeFeature;
+    if (clickSequence.length === 2) {
+      tentativeFeature = this.getThreeClickPolygon(
+        clickSequence[0],
+        clickSequence[1],
+        lastCoords[0],
+        props.modeConfig
+      );
+    }
+
+    return tentativeFeature;
+  }
+}

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

@@ -0,0 +1,75 @@
+import { featureCollection } from '@turf/helpers';
+import { PointerMoveEvent, ModeProps, StartDraggingEvent } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { TranslateMode } from './translate-mode';
+import { ScaleMode } from './scale-mode';
+import { RotateMode } from './rotate-mode';
+
+import { CompositeMode } from './composite-mode';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class TransformMode extends CompositeMode {
+  constructor() {
+    super([new TranslateMode(), new ScaleMode(), new RotateMode()]);
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    let updatedCursor: string | null = null;
+    super.handlePointerMove(event, {
+      ...props,
+      onUpdateCursor: (cursor) => {
+        updatedCursor = cursor || updatedCursor;
+      },
+    });
+    props.onUpdateCursor(updatedCursor);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    let scaleMode: ScaleMode | null = null;
+    let translateMode: TranslateMode | null = null;
+    const filteredModes: GeoJsonEditMode[] = [];
+
+    // If the user selects a scaling edit handle that overlaps with part of the selected feature,
+    // it is possible for both scale and translate actions to be triggered. This logic prevents
+    // this simultaneous action trigger from happening by putting a higher priority on scaling
+    // since the user needs to be more precise to hover over a scaling edit handle.
+    this._modes.forEach((mode) => {
+      if (mode instanceof TranslateMode) {
+        translateMode = mode;
+      } else {
+        if (mode instanceof ScaleMode) {
+          scaleMode = mode;
+        }
+        filteredModes.push(mode);
+      }
+    });
+
+    if (scaleMode instanceof ScaleMode && !scaleMode.isEditHandleSelected()) {
+      filteredModes.push(translateMode!);
+    }
+
+    filteredModes.filter(Boolean).forEach((mode) => mode.handleStartDragging(event, props));
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>) {
+    let compositeGuides = super.getGuides(props);
+    const rotateMode = (this._modes || []).find((mode) => mode instanceof RotateMode);
+
+    if (rotateMode instanceof RotateMode) {
+      const nonEnvelopeGuides = compositeGuides.features.filter((guide) => {
+        const { editHandleType, mode } = (guide.properties as any) || {};
+        // Both scale and rotate modes have the same enveloping box as a guide - only need one
+        const guidesToFilterOut = [mode];
+        // Do not render scaling edit handles if rotating
+        if (rotateMode.getIsRotating()) {
+          guidesToFilterOut.push(editHandleType);
+        }
+        return !guidesToFilterOut.includes('scale');
+      });
+
+      // @ts-expect-error turf types
+      compositeGuides = featureCollection(nonEnvelopeGuides);
+    }
+    return compositeGuides;
+  }
+}

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

@@ -0,0 +1,161 @@
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import clone from '@turf/clone';
+import { point, Feature as TurfFeature, Geometry as TurfGeometry } from '@turf/helpers';
+import WebMercatorViewport from 'viewport-mercator-project';
+import { FeatureCollection, Position, Geometry } from '../geojson-types';
+import {
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  ModeProps,
+} from './types';
+import { mapCoords } from './utils';
+import { translateFromCenter } from '../translateFromCenter';
+import { GeoJsonEditMode, GeoJsonEditAction } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class TranslateMode extends GeoJsonEditMode {
+  _geometryBeforeTranslate: FeatureCollection | null | undefined;
+  _isTranslatable: boolean = undefined!;
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isTranslatable) {
+      // Nothing to do
+      return;
+    }
+
+    if (this._geometryBeforeTranslate) {
+      // Translate the geometry
+      const editAction = this.getTranslateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'translating',
+        props
+      );
+
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+
+    // cancel map panning
+    event.cancelPan();
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    this._isTranslatable = this.isSelectionPicked(event.pointerDownPicks || event.picks, props);
+
+    this.updateCursor(props);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isTranslatable) {
+      return;
+    }
+
+    this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection(props);
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._geometryBeforeTranslate) {
+      // Translate the geometry
+      const editAction = this.getTranslateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'translated',
+        props
+      );
+
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+
+      this._geometryBeforeTranslate = null;
+    }
+  }
+
+  updateCursor(props: ModeProps<FeatureCollection>) {
+    if (this._isTranslatable) {
+      props.onUpdateCursor('move');
+    } else {
+      props.onUpdateCursor(null);
+    }
+  }
+
+  // eslint-disable-next-line max-statements
+  getTranslateAction(
+    startDragPoint: Position,
+    currentPoint: Position,
+    editType: string,
+    props: ModeProps<FeatureCollection>
+  ): GeoJsonEditAction | null | undefined {
+    if (!this._geometryBeforeTranslate) {
+      return null;
+    }
+
+    let updatedData = new ImmutableFeatureCollection(props.data);
+    const selectedIndexes = props.selectedIndexes;
+
+    const { viewport: viewportDesc, screenSpace } = props.modeConfig || {};
+
+    // move features without adapting to mercator projection
+    if (viewportDesc && screenSpace) {
+      const viewport = viewportDesc.project ? viewportDesc : new WebMercatorViewport(viewportDesc);
+
+      const from = viewport.project(startDragPoint);
+      const to = viewport.project(currentPoint);
+      const dx = to[0] - from[0];
+      const dy = to[1] - from[1];
+
+      for (let i = 0; i < selectedIndexes.length; i++) {
+        const selectedIndex = selectedIndexes[i];
+        const feature = this._geometryBeforeTranslate.features[i];
+
+        let coordinates = feature.geometry.coordinates;
+        if (coordinates) {
+          coordinates = mapCoords(coordinates, (coord) => {
+            const pixels = viewport.project(coord);
+            if (pixels) {
+              pixels[0] += dx;
+              pixels[1] += dy;
+              return viewport.unproject(pixels);
+            }
+            return null;
+          });
+
+          // @ts-expect-error turf types
+          updatedData = updatedData.replaceGeometry(selectedIndex, {
+            type: feature.geometry.type,
+            coordinates,
+          });
+        }
+      }
+    } else {
+      const p1 = point(startDragPoint);
+      const p2 = point(currentPoint);
+
+      const distanceMoved = turfDistance(p1, p2);
+      const direction = turfBearing(p1, p2);
+
+      const movedFeatures = this._geometryBeforeTranslate.features.map((feature) =>
+        translateFromCenter(clone(feature as TurfFeature<TurfGeometry>), distanceMoved, direction)
+      );
+
+      for (let i = 0; i < selectedIndexes.length; i++) {
+        const selectedIndex = selectedIndexes[i];
+        const movedFeature = movedFeatures[i];
+        updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry as Geometry);
+      }
+    }
+
+    return {
+      updatedData: updatedData.getObject(),
+      editType,
+      editContext: {
+        featureIndexes: selectedIndexes,
+      },
+    };
+  }
+}

package/src/edit-modes/two-click-polygon-mode.ts

@@ -0,0 +1,132 @@
+import {
+  ClickEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  TentativeFeature,
+} from './types';
+import { Polygon, FeatureCollection, FeatureOf, Position } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class TwoClickPolygonMode extends GeoJsonEditMode {
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    if (props.modeConfig && props.modeConfig.dragToDraw) {
+      // handled in drag handlers
+      return;
+    }
+
+    this.addClickSequence(event);
+
+    this.checkAndFinishPolygon(props);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+      // handled in click handlers
+      return;
+    }
+
+    this.addClickSequence(event);
+    event.cancelPan();
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+      // handled in click handlers
+      return;
+    }
+    this.addClickSequence(event);
+
+    this.checkAndFinishPolygon(props);
+  }
+
+  checkAndFinishPolygon(props: ModeProps<FeatureCollection>) {
+    const clickSequence = this.getClickSequence();
+    const tentativeFeature = this.getTentativeGuide(props);
+
+    if (
+      clickSequence.length > 1 &&
+      tentativeFeature &&
+      tentativeFeature.geometry.type === 'Polygon'
+    ) {
+      const feature: FeatureOf<Polygon> = {
+        type: 'Feature',
+        properties: {
+          shape: tentativeFeature.properties.shape,
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: tentativeFeature.geometry.coordinates,
+        },
+      };
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(feature, props);
+
+      this.resetClickSequence();
+
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const { lastPointerMoveEvent, modeConfig } = props;
+    const clickSequence = this.getClickSequence();
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    if (clickSequence.length === 0 || !lastPointerMoveEvent) {
+      // nothing to do yet
+      return guides;
+    }
+
+    const corner1 = clickSequence[0];
+    const corner2 = lastPointerMoveEvent.mapCoords;
+
+    const polygon = this.getTwoClickPolygon(corner1, corner2, modeConfig);
+    if (polygon) {
+      guides.features.push({
+        type: 'Feature',
+        properties: {
+          shape: polygon.properties && polygon.properties.shape,
+          guideType: 'tentative',
+        },
+        geometry: polygon.geometry,
+      });
+    }
+
+    return guides;
+  }
+
+  getTwoClickPolygon(
+    coord1: Position,
+    coord2: Position,
+    modeConfig: any
+  ): FeatureOf<Polygon> | null | undefined {
+    return null;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+    super.handlePointerMove(event, props);
+  }
+
+  createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
+    const { lastPointerMoveEvent } = props;
+    const clickSequence = this.getClickSequence();
+
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+
+    let tentativeFeature;
+    if (clickSequence.length === 1) {
+      tentativeFeature = this.getTwoClickPolygon(clickSequence[0], lastCoords[0], props.modeConfig);
+    }
+
+    return tentativeFeature;
+  }
+}