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

package/src/mode-handlers/draw-90degree-polygon-handler.ts

@@ -0,0 +1,201 @@
+import destination from '@turf/destination';
+import bearing from '@turf/bearing';
+import lineIntersect from '@turf/line-intersect';
+import turfDistance from '@turf/distance';
+import { point, lineString } from '@turf/helpers';
+import { Polygon, Position } from '../geojson-types';
+import { generatePointsParallelToLinePoints } from '../utils';
+import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+import {
+  EditAction,
+  EditHandle,
+  ModeHandler,
+  getPickedEditHandle,
+  getEditHandlesForGeometry,
+} from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class Draw90DegreePolygonHandler extends ModeHandler {
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    let handles = super.getEditHandles(picks, mapCoords);
+
+    const tentativeFeature = this.getTentativeFeature();
+    if (tentativeFeature) {
+      handles = handles.concat(getEditHandlesForGeometry(tentativeFeature.geometry, -1));
+      // Slice off the handles that are are next to the pointer
+      if (tentativeFeature && tentativeFeature.geometry.type === 'LineString') {
+        // Remove the last existing handle
+        handles = handles.slice(0, -1);
+      } else if (tentativeFeature && tentativeFeature.geometry.type === 'Polygon') {
+        // Remove the last existing handle
+        handles = handles.slice(0, -1);
+      }
+    }
+
+    return handles;
+  }
+
+  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;
+    }
+
+    const tentativeFeature = this.getTentativeFeature();
+    if (tentativeFeature && tentativeFeature.geometry.type === 'Polygon') {
+      clickSequence[clickSequence.length - 1] =
+        tentativeFeature.geometry.coordinates[0][clickSequence.length - 1];
+    } else if (tentativeFeature && tentativeFeature.geometry.type === 'LineString') {
+      clickSequence[clickSequence.length - 1] =
+        tentativeFeature.geometry.coordinates[clickSequence.length - 1];
+    }
+
+    let p3;
+    if (clickSequence.length === 1) {
+      p3 = mapCoords;
+    } else {
+      const p1 = clickSequence[clickSequence.length - 2];
+      const p2 = clickSequence[clickSequence.length - 1];
+      [p3] = generatePointsParallelToLinePoints(p1, p2, mapCoords);
+    }
+
+    if (clickSequence.length < 3) {
+      // Draw a LineString connecting all the clicked points with the hovered point
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, p3],
+        },
+      });
+    } else {
+      // Draw a Polygon connecting all the clicked points with the hovered point
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, p3, clickSequence[0]]],
+        },
+      });
+    }
+
+    return result;
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick(event);
+
+    const { picks } = event;
+    const tentativeFeature = this.getTentativeFeature();
+
+    let editAction: EditAction | null | undefined = null;
+    const clickedEditHandle = getPickedEditHandle(picks);
+
+    if (tentativeFeature && tentativeFeature.geometry.type === 'Polygon') {
+      const polygon: Polygon = tentativeFeature.geometry;
+
+      if (
+        clickedEditHandle &&
+        clickedEditHandle.featureIndex === -1 &&
+        (clickedEditHandle.positionIndexes[1] === 0 ||
+          clickedEditHandle.positionIndexes[1] === polygon.coordinates[0].length - 3)
+      ) {
+        // They clicked the first or last point (or double-clicked), so complete the polygon
+        const polygonToAdd: Polygon = {
+          type: 'Polygon',
+          coordinates: this.finalizedCoordinates([...polygon.coordinates[0]]),
+        };
+
+        this.resetClickSequence();
+        this._setTentativeFeature(null);
+        editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd);
+      }
+    }
+
+    // Trigger pointer move right away in order for it to update edit handles (to support double-click)
+    const fakePointerMoveEvent = {
+      screenCoords: [-1, -1] as Position,
+      mapCoords: event.mapCoords,
+      picks: [],
+      isDragging: false,
+      pointerDownPicks: null,
+      pointerDownScreenCoords: null,
+      pointerDownMapCoords: null,
+      sourceEvent: null,
+    } as unknown as PointerMoveEvent;
+
+    this.handlePointerMove(fakePointerMoveEvent);
+
+    return editAction;
+  }
+
+  finalizedCoordinates(coords: Position[]) {
+    // Remove the hovered position
+    let coordinates = [[...coords.slice(0, -2), coords[0]]];
+    let pt = this.getIntermediatePoint([...coords]);
+    if (!pt) {
+      // if intermediate point with 90 degree not available
+      // try remove the last clicked point and get the intermediate point.
+      const tc = [...coords];
+      tc.splice(-3, 1);
+      pt = this.getIntermediatePoint([...tc]);
+      if (pt) {
+        coordinates = [[...coords.slice(0, -3), pt, coords[0]]];
+      }
+    } else {
+      coordinates = [[...coords.slice(0, -2), pt, coords[0]]];
+    }
+    return coordinates;
+  }
+
+  getIntermediatePoint(coordinates: Position[]): Position | null {
+    let pt: Position | null = null;
+
+    if (coordinates.length > 4) {
+      const [p1, p2] = [...coordinates];
+      const angle1 = bearing(p1, p2);
+      const p3 = coordinates[coordinates.length - 3];
+      const p4 = coordinates[coordinates.length - 4];
+      const angle2 = bearing(p3, p4);
+
+      const angles = { first: [] as number[], second: [] as number[] };
+      // calculate 3 right angle points for first and last points in lineString
+      [1, 2, 3].forEach((factor) => {
+        const newAngle1 = angle1 + factor * 90;
+        // convert angles to 0 to -180 for anti-clock and 0 to 180 for clock wise
+        angles.first.push(newAngle1 > 180 ? newAngle1 - 360 : newAngle1);
+        const newAngle2 = angle2 + factor * 90;
+        angles.second.push(newAngle2 > 180 ? newAngle2 - 360 : newAngle2);
+      });
+
+      const distance = turfDistance(point(p1), point(p3));
+      // Draw imaginary right angle lines for both first and last points in lineString
+      // If there is intersection point for any 2 lines, will be the 90 degree point.
+      [0, 1, 2].forEach((indexFirst) => {
+        const line1 = lineString([
+          p1,
+          destination(p1, distance, angles.first[indexFirst]).geometry.coordinates,
+        ]);
+        [0, 1, 2].forEach((indexSecond) => {
+          const line2 = lineString([
+            p3,
+            destination(p3, distance, angles.second[indexSecond]).geometry.coordinates,
+          ]);
+          const fc = lineIntersect(line1, line2);
+          if (fc && fc.features.length) {
+            // found the intersect point
+            pt = fc.features[0].geometry.coordinates as Position;
+          }
+        });
+      });
+    }
+
+    return pt;
+  }
+}

package/src/mode-handlers/draw-circle-by-bounding-box-handler.ts

@@ -0,0 +1,39 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction, getIntermediatePosition } from './mode-handler';
+import { TwoClickPolygonHandler } from './two-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawCircleByBoundingBoxHandler extends TwoClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const modeConfig = this.getModeConfig() || {};
+    // Default turf value for circle is 64
+    const { steps = 64 } = modeConfig;
+    const options = { steps };
+
+    if (steps < 4) {
+      console.warn('Minimum steps to draw a circle is 4 '); // eslint-disable-line no-console,no-undef
+      options.steps = 4;
+    }
+
+    const firstClickedPoint = clickSequence[0];
+    const centerCoordinates = getIntermediatePosition(firstClickedPoint, event.mapCoords);
+    const radius = Math.max(distance(firstClickedPoint, centerCoordinates), 0.001);
+    // @ts-expect-error turf types diff
+    this._setTentativeFeature(circle(centerCoordinates, radius, options));
+
+    return result;
+  }
+}

package/src/mode-handlers/draw-circle-from-center-handler.ts

@@ -0,0 +1,38 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction } from './mode-handler';
+import { TwoClickPolygonHandler } from './two-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawCircleFromCenterHandler extends TwoClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const modeConfig = this.getModeConfig() || {};
+    // Default turf value for circle is 64
+    const { steps = 64 } = modeConfig;
+    const options = { steps };
+
+    if (steps < 4) {
+      console.warn('Minimum steps to draw a circle is 4 '); // eslint-disable-line no-console,no-undef
+      options.steps = 4;
+    }
+
+    const centerCoordinates = clickSequence[0];
+    const radius = Math.max(distance(centerCoordinates, event.mapCoords), 0.001);
+    // @ts-expect-error turf types diff
+    this._setTentativeFeature(circle(centerCoordinates, radius, options));
+
+    return result;
+  }
+}

package/src/mode-handlers/draw-ellipse-by-bounding-box-handler.ts

@@ -0,0 +1,41 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import { point } from '@turf/helpers';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction, getIntermediatePosition } from './mode-handler';
+import { TwoClickPolygonHandler } from './two-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawEllipseByBoundingBoxHandler extends TwoClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const corner1 = clickSequence[0];
+    const corner2 = event.mapCoords;
+
+    const minX = Math.min(corner1[0], corner2[0]);
+    const minY = Math.min(corner1[1], corner2[1]);
+    const maxX = Math.max(corner1[0], corner2[0]);
+    const maxY = Math.max(corner1[1], corner2[1]);
+
+    const polygonPoints = bboxPolygon([minX, minY, maxX, maxY]).geometry.coordinates[0];
+    const centerCoordinates = getIntermediatePosition(corner1, corner2);
+
+    const xSemiAxis = Math.max(distance(point(polygonPoints[0]), point(polygonPoints[1])), 0.001);
+    const ySemiAxis = Math.max(distance(point(polygonPoints[0]), point(polygonPoints[3])), 0.001);
+    // @ts-expect-error turf types diff
+    this._setTentativeFeature(ellipse(centerCoordinates, xSemiAxis, ySemiAxis));
+
+    return result;
+  }
+}

package/src/mode-handlers/draw-ellipse-using-three-points-handler.ts

@@ -0,0 +1,46 @@
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import bearing from '@turf/bearing';
+import { point } from '@turf/helpers';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction, getIntermediatePosition } from './mode-handler';
+import { ThreeClickPolygonHandler } from './three-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawEllipseUsingThreePointsHandler extends ThreeClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const mapCoords = event.mapCoords;
+
+    if (clickSequence.length === 1) {
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [clickSequence[0], mapCoords],
+        },
+      });
+    } else if (clickSequence.length === 2) {
+      const [p1, p2] = clickSequence;
+
+      const centerCoordinates = getIntermediatePosition(p1, p2);
+      const xSemiAxis = Math.max(distance(centerCoordinates, point(mapCoords)), 0.001);
+      const ySemiAxis = Math.max(distance(p1, p2), 0.001) / 2;
+      const options = { angle: bearing(p1, p2) };
+      // @ts-expect-error turf types diff
+      this._setTentativeFeature(ellipse(centerCoordinates, xSemiAxis, ySemiAxis, options));
+    }
+
+    return result;
+  }
+}

package/src/mode-handlers/draw-line-string-handler.ts

@@ -0,0 +1,108 @@
+import { Position, LineString } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawLineStringHandler extends ModeHandler {
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick(event);
+
+    let editAction: EditAction | null | undefined = null;
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+    const selectedGeometry = this.getSelectedGeometry();
+    const tentativeFeature = this.getTentativeFeature();
+    const clickSequence = this.getClickSequence();
+
+    if (
+      selectedFeatureIndexes.length > 1 ||
+      (selectedGeometry && selectedGeometry.type !== 'LineString')
+    ) {
+      console.warn(`drawLineString mode only supported for single LineString selection`); // eslint-disable-line
+      this.resetClickSequence();
+      return null;
+    }
+
+    if (selectedGeometry && selectedGeometry.type === 'LineString') {
+      // Extend the LineString
+      const lineString: LineString = selectedGeometry;
+
+      let positionIndexes = [lineString.coordinates.length];
+
+      const modeConfig = this.getModeConfig();
+      if (modeConfig && modeConfig.drawAtFront) {
+        positionIndexes = [0];
+      }
+      const featureIndex = selectedFeatureIndexes[0];
+      const updatedData = this.getImmutableFeatureCollection()
+        .addPosition(featureIndex, positionIndexes, event.mapCoords)
+        .getObject();
+
+      editAction = {
+        updatedData,
+        editType: 'addPosition',
+        featureIndexes: [featureIndex],
+        editContext: {
+          positionIndexes,
+          position: event.mapCoords,
+        },
+      };
+
+      this.resetClickSequence();
+    } else if (clickSequence.length === 2 && tentativeFeature) {
+      // Add a new LineString
+      const geometry: any = tentativeFeature.geometry;
+      editAction = this.getAddFeatureAction(geometry);
+
+      this.resetClickSequence();
+    }
+
+    return editAction;
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+
+    const clickSequence = this.getClickSequence();
+    const mapCoords = event.mapCoords;
+
+    let startPosition: Position | null | undefined = null;
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+    const selectedGeometry = this.getSelectedGeometry();
+
+    if (
+      selectedFeatureIndexes.length > 1 ||
+      (selectedGeometry && selectedGeometry.type !== 'LineString')
+    ) {
+      // unsupported
+      return result;
+    }
+
+    if (selectedGeometry && selectedGeometry.type === 'LineString') {
+      // Draw an extension line starting from one end of the selected LineString
+      startPosition = selectedGeometry.coordinates[selectedGeometry.coordinates.length - 1];
+
+      const modeConfig = this.getModeConfig();
+      if (modeConfig && modeConfig.drawAtFront) {
+        startPosition = selectedGeometry.coordinates[0];
+      }
+    } else if (clickSequence.length === 1) {
+      startPosition = clickSequence[0];
+    }
+
+    if (startPosition) {
+      this._setTentativeFeature({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [startPosition, mapCoords],
+        },
+      });
+    }
+
+    return result;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Geometry } from '../geojson-types';
+import { ClickEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawPointHandler extends ModeHandler {
+  handleClick({ mapCoords }: ClickEvent): EditAction | null | undefined {
+    const geometry: Geometry = {
+      type: 'Point',
+      coordinates: mapCoords,
+    };
+
+    return this.getAddFeatureAction(geometry);
+  }
+}

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

@@ -0,0 +1,121 @@
+import { Polygon, Position } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+import {
+  EditAction,
+  EditHandle,
+  ModeHandler,
+  getPickedEditHandle,
+  getEditHandlesForGeometry,
+} from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawPolygonHandler extends ModeHandler {
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    let handles = super.getEditHandles(picks, mapCoords);
+
+    if (this._tentativeFeature) {
+      handles = handles.concat(getEditHandlesForGeometry(this._tentativeFeature.geometry, -1));
+      // Slice off the handles that are are next to the pointer
+      if (this._tentativeFeature && this._tentativeFeature.geometry.type === 'LineString') {
+        // Remove the last existing handle
+        handles = handles.slice(0, -1);
+      } else if (this._tentativeFeature && this._tentativeFeature.geometry.type === 'Polygon') {
+        // Remove the last existing handle
+        handles = handles.slice(0, -1);
+      }
+    }
+
+    return handles;
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick(event);
+
+    const { picks } = event;
+    const tentativeFeature = this.getTentativeFeature();
+
+    let editAction: EditAction | null | undefined = null;
+    const clickedEditHandle = getPickedEditHandle(picks);
+
+    if (clickedEditHandle) {
+      // User clicked an edit handle.
+      // Remove it from the click sequence, so it isn't added as a new point.
+      const clickSequence = this.getClickSequence();
+      clickSequence.splice(clickSequence.length - 1, 1);
+    }
+
+    if (tentativeFeature && tentativeFeature.geometry.type === 'Polygon') {
+      const polygon: Polygon = tentativeFeature.geometry;
+
+      if (
+        clickedEditHandle &&
+        clickedEditHandle.featureIndex === -1 &&
+        (clickedEditHandle.positionIndexes[1] === 0 ||
+          clickedEditHandle.positionIndexes[1] === polygon.coordinates[0].length - 3)
+      ) {
+        // They clicked the first or last point (or double-clicked), so complete the polygon
+
+        // Remove the hovered position
+        const polygonToAdd: Polygon = {
+          type: 'Polygon',
+          coordinates: [[...polygon.coordinates[0].slice(0, -2), polygon.coordinates[0][0]]],
+        };
+
+        this.resetClickSequence();
+        this._setTentativeFeature(null);
+        editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd);
+      }
+    }
+
+    // Trigger pointer move right away in order for it to update edit handles (to support double-click)
+    const fakePointerMoveEvent = {
+      screenCoords: [-1, -1] as Position,
+      mapCoords: event.mapCoords,
+      picks: [],
+      isDragging: false,
+      pointerDownPicks: null,
+      pointerDownScreenCoords: null,
+      pointerDownMapCoords: null,
+      sourceEvent: null,
+    } as unknown as PointerMoveEvent;
+
+    this.handlePointerMove(fakePointerMoveEvent);
+
+    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;
+    }
+
+    if (clickSequence.length < 3) {
+      // Draw a LineString connecting all the clicked points with the hovered point
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, mapCoords],
+        },
+      });
+    } else {
+      // Draw a Polygon connecting all the clicked points with the hovered point
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, mapCoords, clickSequence[0]]],
+        },
+      });
+    }
+
+    return result;
+  }
+}

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

@@ -0,0 +1,28 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction } from './mode-handler';
+import { TwoClickPolygonHandler } from './two-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawRectangleHandler extends TwoClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const corner1 = clickSequence[0];
+    const corner2 = event.mapCoords;
+
+    // @ts-expect-error turf type diff
+    this._setTentativeFeature(bboxPolygon([corner1[0], corner1[1], corner2[0], corner2[1]]));
+
+    return result;
+  }
+}