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

package/src/edit-modes/draw-circle-by-diameter-mode.ts

@@ -0,0 +1,88 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import area from '@turf/area';
+import memoize from '../memoize';
+import { ModeProps, Tooltip } from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawCircleByDiameterMode extends TwoClickPolygonMode {
+  radius: number | null | undefined = null;
+  position: Position = null!;
+  areaCircle: number | null | undefined = null;
+  diameter: number | null | undefined = null;
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    // 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 = getIntermediatePosition(coord1, coord2);
+    // setting value of radius as distance of center and other point
+    this.radius = Math.max(distance(coord1, centerCoordinates), 0.001);
+    // setting value of diameter as distance of points
+    this.diameter = Math.max(distance(coord1, coord2), 0.001);
+    // setting position tooltip as center of circle
+    this.position = centerCoordinates;
+
+    const geometry = circle(centerCoordinates, this.radius, options);
+
+    geometry.properties = geometry.properties || {};
+    geometry.properties.shape = 'Circle';
+    // calculate area of circle with turf function
+    this.areaCircle = area(geometry);
+    // @ts-expect-error turf types diff
+    return geometry;
+  }
+
+  /**
+   * define the default function to display the tooltip for
+   * nebula geometry mode type
+   * @param props properties of geometry nebula mode
+   */
+  getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] {
+    return this._getTooltips({
+      modeConfig: props.modeConfig,
+      radius: this.radius,
+      areaCircle: this.areaCircle,
+      diameter: this.diameter,
+    });
+  }
+
+  /**
+   * redefine the tooltip of geometry
+   * @param modeConfig
+   * @param radius
+   * @param areaCircle
+   * @param diameter
+   */
+  _getTooltips = memoize(({ modeConfig, radius, areaCircle, diameter }) => {
+    let tooltips: Tooltip[] = [];
+    const { formatTooltip } = modeConfig || {};
+    let text;
+    if (radius && areaCircle) {
+      if (formatTooltip) {
+        text = formatTooltip(radius);
+      } else {
+        // By default, round to 2 decimal places and append units
+        text = `Radius: ${parseFloat(radius).toFixed(2)} kilometers
+      \n Area: ${parseFloat(areaCircle).toFixed(2)}
+      \n Diameter: ${parseFloat(diameter).toFixed(2)} kilometers`;
+      }
+
+      tooltips = [
+        {
+          position: this.position,
+          text,
+        },
+      ];
+    }
+
+    return tooltips;
+  });
+}

package/src/edit-modes/draw-circle-from-center-mode.ts

@@ -0,0 +1,79 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import area from '@turf/area';
+import memoize from '../memoize';
+import { ModeProps, Tooltip } from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawCircleFromCenterMode extends TwoClickPolygonMode {
+  radius: number | null | undefined = null;
+  position: Position = null!;
+  areaCircle: number | null | undefined = null;
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    // Default turf value for circle is 64
+    const { steps = 64 } = modeConfig || {};
+    const options = { steps };
+    // setting with position of center of circle
+    this.position = coord2;
+
+    if (steps < 4) {
+      console.warn('Minimum steps to draw a circle is 4 '); // eslint-disable-line no-console,no-undef
+      options.steps = 4;
+    }
+
+    // setting value of radius as distance of center and other point
+    this.radius = Math.max(distance(coord1, coord2), 0.001);
+    const geometry = circle(coord1, this.radius, options);
+
+    geometry.properties = geometry.properties || {};
+    geometry.properties.shape = 'Circle';
+    // calculate area of circle with turf function
+    this.areaCircle = area(geometry);
+    // @ts-expect-error turf types diff
+    return geometry;
+  }
+
+  /**
+   * define the default function to display the tooltip for
+   * nebula geometry mode type
+   * @param props properties of geometry nebula mode
+   */
+  getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] {
+    return this._getTooltips({
+      modeConfig: props?.modeConfig,
+      radius: this.radius,
+      areaCircle: this.areaCircle,
+    });
+  }
+
+  /**
+   * redefine the tooltip of geometry
+   * @param modeConfig
+   * @param radius
+   * @param areaCircle
+   */
+  _getTooltips = memoize(({ modeConfig, radius, areaCircle }) => {
+    let tooltips: Tooltip[] = [];
+    const { formatTooltip } = modeConfig || {};
+    let text: string;
+    if (radius && areaCircle) {
+      if (formatTooltip) {
+        text = formatTooltip(radius);
+      } else {
+        // By default, round to 2 decimal places and append units
+        text = `Radius: ${parseFloat(radius).toFixed(2)} kilometers
+      \n Area: ${parseFloat(areaCircle).toFixed(2)}`;
+      }
+
+      tooltips = [
+        {
+          position: this.position,
+          text,
+        },
+      ];
+    }
+
+    return tooltips;
+  });
+}

package/src/edit-modes/draw-ellipse-by-bounding-box-mode.ts

@@ -0,0 +1,25 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import { point } from '@turf/helpers';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+
+export class DrawEllipseByBoundingBoxMode extends TwoClickPolygonMode {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+    const minX = Math.min(coord1[0], coord2[0]);
+    const minY = Math.min(coord1[1], coord2[1]);
+    const maxX = Math.max(coord1[0], coord2[0]);
+    const maxY = Math.max(coord1[1], coord2[1]);
+
+    const polygonPoints = bboxPolygon([minX, minY, maxX, maxY]).geometry.coordinates[0];
+    const centerCoordinates = getIntermediatePosition(coord1, coord2);
+
+    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 fix return types
+    return ellipse(centerCoordinates, xSemiAxis, ySemiAxis);
+  }
+}

package/src/edit-modes/draw-ellipse-using-three-points-mode.ts

@@ -0,0 +1,23 @@
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import bearing from '@turf/bearing';
+import { point } from '@turf/helpers';
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { ThreeClickPolygonMode } from './three-click-polygon-mode';
+
+export class DrawEllipseUsingThreePointsMode extends ThreeClickPolygonMode {
+  getThreeClickPolygon(
+    coord1: Position,
+    coord2: Position,
+    coord3: Position,
+    modeConfig: any
+  ): FeatureOf<Polygon> | null | undefined {
+    const centerCoordinates = getIntermediatePosition(coord1, coord2);
+    const xSemiAxis = Math.max(distance(centerCoordinates, point(coord3)), 0.001);
+    const ySemiAxis = Math.max(distance(coord1, coord2), 0.001) / 2;
+    const options = { angle: bearing(coord1, coord2) };
+    // @ts-expect-error fix return types
+    return ellipse(centerCoordinates, xSemiAxis, ySemiAxis, options);
+  }
+}

package/src/edit-modes/draw-line-string-mode.ts

@@ -0,0 +1,200 @@
+import distance from '@turf/distance';
+import memoize from '../memoize';
+import { LineString, FeatureCollection, Position } from '../geojson-types';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  GuideFeature,
+  Tooltip,
+} from './types';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class DrawLineStringMode extends GeoJsonEditMode {
+  // declaration of variables for the calculation of the distance of linestring
+  dist = 0;
+  position: Position = null!;
+  elems: Position[] = [];
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const { picks } = event;
+    const clickedEditHandle = getPickedEditHandle(picks);
+
+    let positionAdded = false;
+    if (!clickedEditHandle) {
+      // Don't add another point right next to an existing one
+      this.addClickSequence(event);
+      positionAdded = true;
+    }
+    const clickSequence = this.getClickSequence();
+
+    // check if the pointer is on editable state calculate the distance of new point
+    if (!clickedEditHandle) {
+      this.calculateInfoDraw(clickSequence);
+    }
+
+    if (
+      clickSequence.length > 1 &&
+      clickedEditHandle &&
+      Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+      clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1
+    ) {
+      // They clicked the last point (or double-clicked), so add the LineString
+      // reset distance to new calculate
+      this.dist = 0;
+      const lineStringToAdd: LineString = {
+        type: 'LineString',
+        coordinates: [...clickSequence],
+      };
+
+      this.resetClickSequence();
+
+      const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    } else if (positionAdded) {
+      // new tentative point
+      props.onEdit({
+        // data is the same
+        updatedData: props.data,
+        editType: 'addTentativePosition',
+        editContext: {
+          position: event.mapCoords,
+        },
+      });
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
+    const { key } = event;
+    if (key === 'Enter') {
+      const clickSequence = this.getClickSequence();
+      if (clickSequence.length > 1) {
+        const lineStringToAdd: LineString = {
+          type: 'LineString',
+          coordinates: [...clickSequence],
+        };
+        this.resetClickSequence();
+        const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+        if (editAction) {
+          props.onEdit(editAction);
+        }
+      }
+    } else if (key === 'Escape') {
+      this.resetClickSequence();
+      props.onEdit({
+        // Because the new drawing feature is dropped, so the data will keep as the same.
+        updatedData: props.data,
+        editType: 'cancelFeature',
+        editContext: {},
+      });
+    }
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const { lastPointerMoveEvent } = props;
+    const clickSequence = this.getClickSequence();
+
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    let tentativeFeature;
+    if (clickSequence.length > 0) {
+      tentativeFeature = {
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, ...lastCoords],
+        },
+      };
+    }
+
+    if (tentativeFeature) {
+      guides.features.push(tentativeFeature);
+    }
+
+    const editHandles: GuideFeature[] = clickSequence.map((clickedCoord, index) => ({
+      type: 'Feature',
+      properties: {
+        guideType: 'editHandle',
+        editHandleType: 'existing',
+        featureIndex: -1,
+        positionIndexes: [index],
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: clickedCoord,
+      },
+    }));
+
+    guides.features.push(...editHandles);
+    return guides;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+  }
+
+  /**
+   * define the default function to display the tooltip for
+   * nebula geometry mode type
+   * @param props properties of geometry nebula mode
+   */
+  getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] {
+    return this._getTooltips({
+      modeConfig: props.modeConfig,
+      dist: this.dist,
+    });
+  }
+
+  // utility function
+  calculateInfoDraw(clickSequence) {
+    // check if the selected points are at least 2
+    if (clickSequence.length > 1) {
+      // setting the last point
+      this.position = clickSequence[clickSequence.length - 1];
+      // calculate the new distance by adding the
+      // distance of the new drawn linestring
+      this.dist += distance(
+        clickSequence[clickSequence.length - 2],
+        clickSequence[clickSequence.length - 1]
+      );
+    }
+  }
+
+  /**
+   * redefine the tooltip of geometry
+   * @param modeConfig
+   * @param dist
+   */
+  _getTooltips = memoize(({ modeConfig, dist }) => {
+    let tooltips: Tooltip[] = [];
+    const { formatTooltip } = modeConfig || {};
+    let text;
+    if (dist) {
+      if (formatTooltip) {
+        text = formatTooltip(dist);
+      } else {
+        // By default, round to 2 decimal places and append units
+        text = `Distance: ${parseFloat(dist).toFixed(2)} kilometers`;
+      }
+
+      tooltips = [
+        {
+          position: this.position,
+          text,
+        },
+      ];
+    }
+    return tooltips;
+  });
+}

package/src/edit-modes/draw-point-mode.ts

@@ -0,0 +1,35 @@
+import { ClickEvent, PointerMoveEvent, ModeProps, TentativeFeature } from './types';
+import { FeatureCollection, Point } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class DrawPointMode extends GeoJsonEditMode {
+  createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
+    const { lastPointerMoveEvent } = props;
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+
+    return {
+      type: 'Feature',
+      properties: {
+        guideType: 'tentative',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: lastCoords[0],
+      },
+    };
+  }
+
+  handleClick({ mapCoords }: ClickEvent, props: ModeProps<FeatureCollection>): void {
+    const geometry: Point = {
+      type: 'Point',
+      coordinates: mapCoords,
+    };
+
+    props.onEdit(this.getAddFeatureAction(geometry, props.data));
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+    super.handlePointerMove(event, props);
+  }
+}

package/src/edit-modes/draw-polygon-by-dragging-mode.ts

@@ -0,0 +1,106 @@
+import throttle from 'lodash.throttle';
+import {
+  ClickEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  ModeProps,
+} from './types';
+import { Polygon, FeatureCollection } from '../geojson-types';
+import { getPickedEditHandle } from './utils';
+import { DrawPolygonMode } from './draw-polygon-mode';
+
+type DraggingHandler = (event: DraggingEvent, props: ModeProps<FeatureCollection>) => void;
+
+export class DrawPolygonByDraggingMode extends DrawPolygonMode {
+  handleDraggingThrottled: DraggingHandler | null | undefined = null;
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    // No-op
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+    event.cancelPan();
+    if (props.modeConfig && props.modeConfig.throttleMs) {
+      this.handleDraggingThrottled = throttle(this.handleDraggingAux, props.modeConfig.throttleMs);
+    } else {
+      this.handleDraggingThrottled = this.handleDraggingAux;
+    }
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>) {
+    this.addClickSequence(event);
+    const clickSequence = this.getClickSequence();
+    // @ts-expect-error cancel() not typed
+    if (this.handleDraggingThrottled && this.handleDraggingThrottled.cancel) {
+      // @ts-expect-error cancel() not typed
+      this.handleDraggingThrottled.cancel();
+    }
+
+    if (clickSequence.length > 2) {
+      // Complete the polygon.
+      const polygonToAdd: Polygon = {
+        type: 'Polygon',
+        coordinates: [[...clickSequence, clickSequence[0]]],
+      };
+
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+    this.resetClickSequence();
+  }
+
+  handleDraggingAux(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    const { picks } = event;
+    const clickedEditHandle = getPickedEditHandle(picks);
+
+    if (!clickedEditHandle) {
+      // Don't add another point right next to an existing one.
+      this.addClickSequence(event);
+      props.onEdit({
+        updatedData: props.data,
+        editType: 'addTentativePosition',
+        editContext: {
+          position: event.mapCoords,
+        },
+      });
+    }
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>) {
+    if (this.handleDraggingThrottled) {
+      this.handleDraggingThrottled(event, props);
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
+    if (event.key === 'Enter') {
+      const clickSequence = this.getClickSequence();
+      if (clickSequence.length > 2) {
+        const polygonToAdd: Polygon = {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, clickSequence[0]]],
+        };
+        this.resetClickSequence();
+
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+        if (editAction) {
+          props.onEdit(editAction);
+        }
+      }
+    } else if (event.key === 'Escape') {
+      this.resetClickSequence();
+      if (this.handleDraggingThrottled) {
+        this.handleDraggingThrottled = null;
+      }
+      props.onEdit({
+        // Because the new drawing feature is dropped, so the data will keep as the same.
+        updatedData: props.data,
+        editType: 'cancelFeature',
+        editContext: {},
+      });
+    }
+  }
+}