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

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

@@ -0,0 +1,208 @@
+import bbox from '@turf/bbox';
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import bboxPolygon from '@turf/bbox-polygon';
+import turfDistance from '@turf/distance';
+import { coordEach } from '@turf/meta';
+import { getGeom } from '@turf/invariant';
+import { point, featureCollection, lineString } from '@turf/helpers';
+import turfTransformRotate from '@turf/transform-rotate';
+import polygonToLine from '@turf/polygon-to-line';
+import {
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  ModeProps,
+  EditHandleFeature,
+  GuideFeatureCollection,
+} from './types';
+import { getPickedEditHandle } from './utils';
+import { FeatureCollection, Position } from '../geojson-types';
+import { GeoJsonEditMode, GeoJsonEditAction, getIntermediatePosition } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class RotateMode extends GeoJsonEditMode {
+  _selectedEditHandle: EditHandleFeature | null | undefined;
+  _geometryBeingRotated: FeatureCollection | null | undefined;
+  _isRotating = false;
+
+  _isSinglePointGeometrySelected = (geometry: FeatureCollection | null | undefined): boolean => {
+    const { features } = geometry || {};
+    if (Array.isArray(features) && features.length === 1) {
+      // @ts-expect-error turf type diff
+      const { type }: { type: string } = getGeom(features[0]);
+      return type === 'Point';
+    }
+    return false;
+  };
+
+  getIsRotating = () => this._isRotating;
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const selectedGeometry =
+      this._geometryBeingRotated || this.getSelectedFeaturesAsFeatureCollection(props);
+
+    if (this._isSinglePointGeometrySelected(selectedGeometry)) {
+      return { type: 'FeatureCollection', features: [] };
+    }
+
+    if (this._isRotating) {
+      // Display rotate pivot
+      // @ts-expect-error turf types diff
+      return featureCollection([turfCentroid(selectedGeometry)]) as GuideFeatureCollection;
+    }
+
+    const boundingBox = bboxPolygon(bbox(selectedGeometry));
+
+    let previousCoord: Position | null = null;
+    let topEdgeMidpointCoords: Position | null = null;
+    let longestEdgeLength = 0;
+
+    coordEach(boundingBox, (coord: any) => {
+      if (previousCoord) {
+        const edgeMidpoint = getIntermediatePosition(coord, previousCoord);
+        if (!topEdgeMidpointCoords || edgeMidpoint[1] > topEdgeMidpointCoords[1]) {
+          // Get the top edge midpoint of the enveloping box
+          topEdgeMidpointCoords = edgeMidpoint;
+        }
+        // Get the length of the longest edge of the enveloping box
+        const edgeDistance = turfDistance(coord, previousCoord);
+        longestEdgeLength = Math.max(longestEdgeLength, edgeDistance);
+      }
+      previousCoord = coord;
+    });
+
+    // Scale the length of the line between the rotate handler and the enveloping box
+    // relative to the length of the longest edge of the enveloping box
+    const rotateHandleCoords = topEdgeMidpointCoords && [
+      topEdgeMidpointCoords[0],
+      topEdgeMidpointCoords[1] + longestEdgeLength / 1000,
+    ];
+
+    const lineFromEnvelopeToRotateHandle = lineString([topEdgeMidpointCoords!, rotateHandleCoords!]);
+    const rotateHandle = point(rotateHandleCoords!, {
+      guideType: 'editHandle',
+      editHandleType: 'rotate',
+    });
+
+    const outFeatures = [polygonToLine(boundingBox), rotateHandle, lineFromEnvelopeToRotateHandle];
+
+    // @ts-expect-error turf type diff
+    return featureCollection(outFeatures);
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isRotating) {
+      return;
+    }
+
+    const rotateAction = this.getRotateAction(
+      event.pointerDownMapCoords,
+      event.mapCoords,
+      'rotating',
+      props
+    );
+    if (rotateAction) {
+      props.onEdit(rotateAction);
+    }
+
+    event.cancelPan();
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isRotating) {
+      const selectedEditHandle = getPickedEditHandle(event.picks);
+      this._selectedEditHandle =
+        selectedEditHandle && selectedEditHandle.properties.editHandleType === 'rotate'
+          ? selectedEditHandle
+          : null;
+    }
+
+    this.updateCursor(props);
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._selectedEditHandle) {
+      this._isRotating = true;
+      this._geometryBeingRotated = this.getSelectedFeaturesAsFeatureCollection(props);
+    }
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._isRotating) {
+      // Rotate the geometry
+      const rotateAction = this.getRotateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'rotated',
+        props
+      );
+
+      if (rotateAction) {
+        props.onEdit(rotateAction);
+      }
+
+      this._geometryBeingRotated = null;
+      this._selectedEditHandle = null;
+      this._isRotating = false;
+    }
+  }
+
+  updateCursor(props: ModeProps<FeatureCollection>) {
+    if (this._selectedEditHandle) {
+      // TODO: look at doing SVG cursors to get a better "rotate" cursor
+      props.onUpdateCursor('crosshair');
+    } else {
+      props.onUpdateCursor(null);
+    }
+  }
+
+  getRotateAction(
+    startDragPoint: Position,
+    currentPoint: Position,
+    editType: string,
+    props: ModeProps<FeatureCollection>
+  ): GeoJsonEditAction | null | undefined {
+    if (!this._geometryBeingRotated) {
+      return null;
+    }
+    // @ts-expect-error turf types diff
+    const centroid = turfCentroid(this._geometryBeingRotated);
+    // @ts-expect-error turf types diff
+    const angle = getRotationAngle(centroid, startDragPoint, currentPoint);
+
+    // @ts-expect-error turf types too wide
+    const rotatedFeatures: FeatureCollection = turfTransformRotate(
+      // @ts-expect-error turf types too wide
+      this._geometryBeingRotated,
+      angle,
+      {
+        pivot: centroid,
+      }
+    );
+
+    let updatedData = new ImmutableFeatureCollection(props.data);
+
+    const selectedIndexes = props.selectedIndexes;
+    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,
+      editContext: {
+        featureIndexes: selectedIndexes,
+      },
+    };
+  }
+}
+
+function getRotationAngle(centroid: Position, startDragPoint: Position, currentPoint: Position) {
+  const bearing1 = turfBearing(centroid, startDragPoint);
+  const bearing2 = turfBearing(centroid, currentPoint);
+  return bearing2 - bearing1;
+}

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

@@ -0,0 +1,231 @@
+import bbox from '@turf/bbox';
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import bboxPolygon from '@turf/bbox-polygon';
+import { point, featureCollection } from '@turf/helpers';
+import polygonToLine from '@turf/polygon-to-line';
+import { coordEach } from '@turf/meta';
+import turfDistance from '@turf/distance';
+import turfTransformScale from '@turf/transform-scale';
+import { getCoord, getGeom } from '@turf/invariant';
+import { FeatureCollection, Position } from '../geojson-types';
+import {
+  ModeProps,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  EditHandleFeature,
+  GuideFeatureCollection,
+} from './types';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
+export class ScaleMode extends GeoJsonEditMode {
+  _geometryBeingScaled: FeatureCollection | null | undefined;
+  _selectedEditHandle: EditHandleFeature | null | undefined;
+  _cornerGuidePoints: Array<EditHandleFeature> = [];
+  _cursor: string | null | undefined;
+  _isScaling = false;
+
+  _isSinglePointGeometrySelected = (geometry: FeatureCollection | null | undefined): boolean => {
+    const { features } = geometry || {};
+    if (Array.isArray(features) && features.length === 1) {
+      // @ts-expect-error turf types diff
+      const { type }: { type: string } = getGeom(features[0]);
+      return type === 'Point';
+    }
+    return false;
+  };
+
+  _getOppositeScaleHandle = (selectedHandle: EditHandleFeature): EditHandleFeature | null => {
+    const selectedHandleIndex =
+      selectedHandle &&
+      selectedHandle.properties &&
+      Array.isArray(selectedHandle.properties.positionIndexes) &&
+      selectedHandle.properties.positionIndexes[0];
+
+    if (typeof selectedHandleIndex !== 'number') {
+      return null;
+    }
+    const guidePointCount = this._cornerGuidePoints.length;
+    const oppositeIndex = (selectedHandleIndex + guidePointCount / 2) % guidePointCount;
+    return this._cornerGuidePoints.find((p) => {
+      if (!Array.isArray(p.properties.positionIndexes)) {
+        return false;
+      }
+      return p.properties.positionIndexes[0] === oppositeIndex;
+    }) || null;
+  };
+
+  _getUpdatedData = (props: ModeProps<FeatureCollection>, editedData: FeatureCollection) => {
+    let updatedData = new ImmutableFeatureCollection(props.data);
+    const selectedIndexes = props.selectedIndexes;
+    for (let i = 0; i < selectedIndexes.length; i++) {
+      const selectedIndex = selectedIndexes[i];
+      const movedFeature = editedData.features[i];
+      updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+    }
+    return updatedData.getObject();
+  };
+
+  isEditHandleSelected = (): boolean => Boolean(this._selectedEditHandle);
+
+  getScaleAction = (
+    startDragPoint: Position,
+    currentPoint: Position,
+    editType: string,
+    props: ModeProps<FeatureCollection>
+  ) => {
+    if (!this._selectedEditHandle) {
+      return null;
+    }
+
+    const oppositeHandle = this._getOppositeScaleHandle(this._selectedEditHandle);
+    const origin = getCoord(oppositeHandle!) as Position;
+
+    const scaleFactor = getScaleFactor(origin, startDragPoint, currentPoint);
+
+    // @ts-expect-error turf types diff
+    const scaledFeatures: FeatureCollection = turfTransformScale(
+      // @ts-expect-error turf types diff
+      this._geometryBeingScaled,
+      scaleFactor,
+      { origin }
+    );
+
+    return {
+      updatedData: this._getUpdatedData(props, scaledFeatures),
+      editType,
+      editContext: {
+        featureIndexes: props.selectedIndexes,
+      },
+    };
+  };
+
+  updateCursor = (props: ModeProps<FeatureCollection>) => {
+    if (this._selectedEditHandle) {
+      if (this._cursor) {
+        props.onUpdateCursor(this._cursor);
+      }
+      const cursorGeometry = this.getSelectedFeaturesAsFeatureCollection(props);
+
+      // Get resize cursor direction from the hovered scale editHandle (e.g. nesw or nwse)
+      // @ts-expect-error turf types diff
+      const centroid = turfCentroid(cursorGeometry);
+      const bearing = turfBearing(centroid, this._selectedEditHandle);
+      const positiveBearing = bearing < 0 ? bearing + 180 : bearing;
+      if (
+        (positiveBearing >= 0 && positiveBearing <= 90) ||
+        (positiveBearing >= 180 && positiveBearing <= 270)
+      ) {
+        this._cursor = 'nesw-resize';
+        props.onUpdateCursor('nesw-resize');
+      } else {
+        this._cursor = 'nwse-resize';
+        props.onUpdateCursor('nwse-resize');
+      }
+    } else {
+      props.onUpdateCursor(null);
+      this._cursor = null;
+    }
+  };
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isScaling) {
+      const selectedEditHandle = getPickedEditHandle(event.picks);
+      this._selectedEditHandle =
+        selectedEditHandle && selectedEditHandle.properties.editHandleType === 'scale'
+          ? selectedEditHandle
+          : null;
+
+      this.updateCursor(props);
+    }
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._selectedEditHandle) {
+      this._isScaling = true;
+      this._geometryBeingScaled = this.getSelectedFeaturesAsFeatureCollection(props);
+    }
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (!this._isScaling) {
+      return;
+    }
+
+    props.onUpdateCursor(this._cursor);
+
+    const scaleAction = this.getScaleAction(
+      event.pointerDownMapCoords,
+      event.mapCoords,
+      'scaling',
+      props
+    );
+    if (scaleAction) {
+      props.onEdit(scaleAction);
+    }
+
+    event.cancelPan();
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this._isScaling) {
+      // Scale the geometry
+      const scaleAction = this.getScaleAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'scaled',
+        props
+      );
+      if (scaleAction) {
+        props.onEdit(scaleAction);
+      }
+
+      props.onUpdateCursor(null);
+
+      this._geometryBeingScaled = null;
+      this._selectedEditHandle = null;
+      this._cursor = null;
+      this._isScaling = false;
+    }
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    this._cornerGuidePoints = [];
+    const selectedGeometry = this.getSelectedFeaturesAsFeatureCollection(props);
+
+    // Add buffer to the enveloping box if a single Point feature is selected
+    if (this._isSinglePointGeometrySelected(selectedGeometry)) {
+      return { type: 'FeatureCollection', features: [] };
+    }
+
+    const boundingBox = bboxPolygon(bbox(selectedGeometry));
+    boundingBox.properties!.mode = 'scale';
+    const cornerGuidePoints: EditHandleFeature[] = [];
+
+    coordEach(boundingBox, (coord, coordIndex) => {
+      if (coordIndex < 4) {
+        // Get corner midpoint guides from the enveloping box
+        const cornerPoint = point(coord, {
+          guideType: 'editHandle',
+          editHandleType: 'scale',
+          positionIndexes: [coordIndex],
+        });
+        cornerGuidePoints.push(cornerPoint as EditHandleFeature);
+      }
+    });
+
+    this._cornerGuidePoints = cornerGuidePoints;
+    // @ts-expect-error turf types diff
+    return featureCollection([polygonToLine(boundingBox), ...this._cornerGuidePoints]);
+  }
+}
+
+function getScaleFactor(centroid: Position, startDragPoint: Position, currentPoint: Position) {
+  const startDistance = turfDistance(centroid, startDragPoint);
+  const endDistance = turfDistance(centroid, currentPoint);
+  return endDistance / startDistance;
+}

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

@@ -0,0 +1,174 @@
+import { Position, Feature, FeatureCollection } from '../geojson-types';
+import {
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  ModeProps,
+  Pick,
+  GuideFeatureCollection,
+  EditHandleFeature,
+} from './types';
+import {
+  getPickedSnapSourceEditHandle,
+  getPickedEditHandles,
+  getEditHandlesForGeometry,
+} from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+type MovementTypeEvent = PointerMoveEvent | StartDraggingEvent | StopDraggingEvent | DraggingEvent;
+
+export class SnappableMode extends GeoJsonEditMode {
+  _handler: GeoJsonEditMode;
+
+  constructor(handler: GeoJsonEditMode) {
+    super();
+    this._handler = handler;
+  }
+
+  _getSnappedMouseEvent<T extends MovementTypeEvent>(
+    event: T,
+    snapSource: EditHandleFeature,
+    snapTarget: EditHandleFeature
+  ): T {
+    return Object.assign(event, {
+      mapCoords: snapTarget.geometry.coordinates,
+      pointerDownMapCoords: snapSource && snapSource.geometry.coordinates,
+    });
+  }
+
+  _getPickedSnapTarget(picks: Pick[]): EditHandleFeature | null | undefined {
+    return getPickedEditHandles(picks).find(
+      (handle) => handle.properties.editHandleType === 'snap-target'
+    );
+  }
+
+  _getPickedSnapSource(
+    pointerDownPicks: Pick[] | null | undefined
+  ): EditHandleFeature | null | undefined {
+    return getPickedSnapSourceEditHandle(pointerDownPicks);
+  }
+
+  _getUpdatedSnapSourceHandle(
+    snapSourceHandle: EditHandleFeature,
+    data: FeatureCollection
+  ): EditHandleFeature {
+    const { featureIndex, positionIndexes } = snapSourceHandle.properties;
+    if (!Array.isArray(positionIndexes)) {
+      return snapSourceHandle;
+    }
+    const snapSourceFeature = data.features[featureIndex];
+
+    // $FlowFixMe
+    const snapSourceCoordinates = positionIndexes.reduce(
+      (a: any[], b: number) => a[b],
+      snapSourceFeature.geometry.coordinates
+    ) as Position;
+
+    return {
+      ...snapSourceHandle,
+      geometry: {
+        type: 'Point',
+        coordinates: snapSourceCoordinates,
+      },
+    };
+  }
+
+  // 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(props: ModeProps<FeatureCollection>): Feature[] {
+    let { additionalSnapTargets } = props.modeConfig || {};
+    additionalSnapTargets = additionalSnapTargets || [];
+
+    const features = [...props.data.features, ...additionalSnapTargets];
+    return features;
+  }
+
+  _getSnapTargetHandles(props: ModeProps<FeatureCollection>): EditHandleFeature[] {
+    const handles: EditHandleFeature[] = [];
+    const features = this._getSnapTargets(props);
+
+    for (let i = 0; i < features.length; i++) {
+      // Filter out the currently selected feature(s)
+      const isCurrentIndexFeatureNotSelected = !props.selectedIndexes.includes(i);
+
+      if (isCurrentIndexFeatureNotSelected) {
+        const { geometry } = features[i];
+        handles.push(...getEditHandlesForGeometry(geometry, i, 'snap-target'));
+      }
+    }
+    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.
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const { modeConfig, lastPointerMoveEvent } = props;
+    const { enableSnapping } = modeConfig || {};
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [...this._handler.getGuides(props).features],
+    };
+
+    if (!enableSnapping) {
+      return guides;
+    }
+
+    const snapSourceHandle: EditHandleFeature | null | undefined =
+      lastPointerMoveEvent && this._getPickedSnapSource(lastPointerMoveEvent.pointerDownPicks);
+
+    // They started dragging a handle
+    // So render the picked handle (in its updated location) and all possible snap targets
+    if (snapSourceHandle) {
+      guides.features.push(
+        ...this._getSnapTargetHandles(props),
+        this._getUpdatedSnapSourceHandle(snapSourceHandle, props.data)
+      );
+
+      return guides;
+    }
+
+    // Render the possible snap source handles
+    const { features } = props.data;
+    for (const index of props.selectedIndexes) {
+      if (index < features.length) {
+        const { geometry } = features[index];
+        guides.features.push(...getEditHandlesForGeometry(geometry, index, 'snap-source'));
+      }
+    }
+
+    return guides;
+  }
+
+  _getSnapAwareEvent<T extends MovementTypeEvent>(
+    event: T,
+    props: ModeProps<FeatureCollection>
+  ): T {
+    const snapSource = this._getPickedSnapSource(props.lastPointerMoveEvent.pointerDownPicks);
+    const snapTarget = this._getPickedSnapTarget(event.picks);
+
+    return snapSource && snapTarget
+      ? this._getSnappedMouseEvent(event, snapSource, snapTarget)
+      : event;
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    this._handler.handleStartDragging(event, props);
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    this._handler.handleStopDragging(this._getSnapAwareEvent(event, props), props);
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    this._handler.handleDragging(this._getSnapAwareEvent(event, props), props);
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    this._handler.handlePointerMove(this._getSnapAwareEvent(event, props), props);
+  }
+}