@deck.gl-community/editable-layers 9.3.1-alpha.0 → 9.3.1

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

@@ -2,10 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import turfBearing from '@turf/bearing';
-import turfDistance from '@turf/distance';
 import clone from '@turf/clone';
-import {point} from '@turf/helpers';
 import {WebMercatorViewport} from '@math.gl/web-mercator';
 import {
   FeatureCollection,
@@ -24,6 +21,7 @@ import {mapCoords} from './utils';
 import {translateFromCenter} from '../utils/translate-from-center';
 import {GeoJsonEditMode, GeoJsonEditAction} from './geojson-edit-mode';
 import {ImmutableFeatureCollection} from './immutable-feature-collection';
+import {getEditModeCoordinateSystem} from './coordinate-system';
 
 export class TranslateMode extends GeoJsonEditMode {
   _geometryBeforeTranslate: SimpleFeatureCollection | null | undefined;
@@ -142,14 +140,13 @@ export class TranslateMode extends GeoJsonEditMode {
         }
       }
     } else {
-      const p1 = point(startDragPoint);
-      const p2 = point(currentPoint);
+      const coordinateSystem = getEditModeCoordinateSystem(props.coordinateSystem);
 
-      const distanceMoved = turfDistance(p1, p2);
-      const direction = turfBearing(p1, p2);
+      const distanceMoved = coordinateSystem.distance(startDragPoint, currentPoint);
+      const direction = coordinateSystem.bearing(startDragPoint, currentPoint);
 
       const movedFeatures = this._geometryBeforeTranslate.features.map((feature) =>
-        translateFromCenter(clone(feature), distanceMoved, direction)
+        translateFromCenter(clone(feature), distanceMoved, direction, coordinateSystem)
       );
 
       for (let i = 0; i < selectedIndexes.length; i++) {

package/src/edit-modes/types.ts

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {Position, Point, SimpleGeometry, Feature} from '../utils/geojson-types';
+import type {EditModeCoordinateSystem} from './coordinate-system';
 
 export type ScreenCoordinates = [number, number];
 
@@ -135,9 +136,18 @@ export type ModeProps<TData> = {
   // The last pointer move event that occurred
   lastPointerMoveEvent: PointerMoveEvent;
 
+  // Coordinate system to use for geometric calculations (defaults to GeoCoordinateSystem)
+  coordinateSystem?: EditModeCoordinateSystem;
+
   // Callback used to notify applications of an edit action
   onEdit: (editAction: EditAction<TData>) => void;
 
   // Callback used to update cursor
   onUpdateCursor: (cursor: string | null | undefined) => void;
 };
+
+export type PointWithIndex = {
+  index: number;
+  x0: number;
+  y0: number;
+};

package/src/edit-modes/utils.ts

@@ -4,14 +4,21 @@
 
 /* eslint-disable no-shadow */
 
-import destination from '@turf/destination';
-import bearing from '@turf/bearing';
-import pointToLineDistance from '@turf/point-to-line-distance';
+import {destination} from '@turf/destination';
+import {bearing} from '@turf/bearing';
+import {pointToLineDistance} from '@turf/point-to-line-distance';
 import {flattenEach} from '@turf/meta';
 import {point} from '@turf/helpers';
 import {getCoords} from '@turf/invariant';
 import {WebMercatorViewport} from '@math.gl/web-mercator';
-import {Viewport, Pick, EditHandleFeature, EditHandleType, StartDraggingEvent} from './types';
+import {
+  Viewport,
+  Pick,
+  EditHandleFeature,
+  EditHandleType,
+  StartDraggingEvent,
+  PointWithIndex
+} from './types';
 import {
   SimpleGeometry,
   Position,
@@ -21,6 +28,7 @@ import {
   Feature,
   SimpleGeometryCoordinates
 } from '../utils/geojson-types';
+import {CartesianCoordinateSystem, EditModeCoordinateSystem} from './coordinate-system';
 
 export type NearestPointType = Feature<Point, {dist: number; index: number}>;
 
@@ -116,20 +124,49 @@ export function mix(a: number, b: number, ratio: number): number {
   return b * ratio + a * (1 - ratio);
 }
 
+export function projectOrUnprojectPoints(
+  inputPoints: Position,
+  coordinateSystem: EditModeCoordinateSystem,
+  project: 'PROJECT' | 'UNPROJECT',
+  wmViewport?: WebMercatorViewport
+): Position {
+  if (coordinateSystem === undefined || wmViewport === undefined) return [...inputPoints];
+  else if (coordinateSystem instanceof CartesianCoordinateSystem) return [...inputPoints];
+  return project === 'PROJECT'
+    ? wmViewport.project([...inputPoints])
+    : wmViewport.unproject([...inputPoints]);
+}
+
 export function nearestPointOnProjectedLine(
   line: Feature<LineString>,
   inPoint: Feature<Point>,
-  viewport: Viewport
+  viewport: Viewport,
+  coordinateSystem?: EditModeCoordinateSystem
 ): NearestPointType {
-  const wmViewport = new WebMercatorViewport(viewport);
+  // return sentinel value if no coordinates key
+  let minDistance = Infinity;
+  const coordinates = line?.geometry?.coordinates;
+  if (!coordinates)
+    return {
+      type: 'Feature',
+      geometry: {type: 'Point', coordinates: [0, 0, 0]},
+      properties: {dist: minDistance, index: -1}
+    };
+
   // Project the line to viewport, then find the nearest point
-  const coordinates: Array<Array<number>> = line.geometry.coordinates as any;
-  const projectedCoords = coordinates.map(([x, y, z = 0]) => wmViewport.project([x, y, z]));
-  const [x, y] = wmViewport.project(inPoint.geometry.coordinates);
-  // console.log('projectedCoords', JSON.stringify(projectedCoords));
+  const wmViewport = new WebMercatorViewport(viewport);
 
-  let minDistance = Infinity;
-  let minPointInfo = {};
+  const [x, y] = projectOrUnprojectPoints(
+    inPoint.geometry.coordinates,
+    coordinateSystem,
+    'PROJECT',
+    wmViewport
+  );
+  const projectedCoords = coordinates.map(([px, py, pz = 0]) =>
+    projectOrUnprojectPoints([px, py, pz], coordinateSystem, 'PROJECT', wmViewport)
+  );
+
+  let minPointInfo: PointWithIndex = {index: 0, x0: 0, y0: 0};
 
   projectedCoords.forEach(([x2, y2], index) => {
     if (index === 0) {
@@ -159,7 +196,7 @@ export function nearestPointOnProjectedLine(
       };
     }
   });
-  // @ts-expect-error TODO
+
   const {index, x0, y0} = minPointInfo;
   const [x1, y1, z1 = 0] = projectedCoords[index - 1];
   const [x2, y2, z2 = 0] = projectedCoords[index];
@@ -174,7 +211,7 @@ export function nearestPointOnProjectedLine(
     type: 'Feature',
     geometry: {
       type: 'Point',
-      coordinates: wmViewport.unproject([x0, y0, z0])
+      coordinates: projectOrUnprojectPoints([x0, y0, z0], coordinateSystem, 'UNPROJECT', wmViewport)
     },
     properties: {
       // TODO: calculate the distance in proper units
@@ -184,19 +221,15 @@ export function nearestPointOnProjectedLine(
   };
 }
 
-export function nearestPointOnLine( // <G extends LineString | MultiLineString>(
+export function nearestPointOnLine(
   lines: Feature<LineString>,
   inPoint: Feature<Point>,
-  viewport?: Viewport
+  viewport?: Viewport,
+  coordinateSystem?: EditModeCoordinateSystem
 ): NearestPointType {
-  let mercator;
+  const wmViewport = viewport ? new WebMercatorViewport(viewport) : undefined;
 
-  if (viewport) {
-    mercator = new WebMercatorViewport(viewport);
-  }
-  let closestPoint: any = point([Infinity, Infinity], {
-    dist: Infinity
-  });
+  let closestPoint: any = point([Infinity, Infinity], {dist: Infinity});
 
   if (!lines.geometry?.coordinates.length || lines.geometry?.coordinates.length < 2) {
     return closestPoint;
@@ -207,26 +240,24 @@ export function nearestPointOnLine( // <G extends LineString | MultiLineString>(
     const coords: any = getCoords(line);
     const pointCoords: any = getCoords(inPoint);
 
-    let minDist;
-    let to;
-    let from;
-    let x;
-    let y;
-    let segmentIdx;
-    let dist;
+    let minDist: null | undefined | number;
+    let to: null | undefined | number;
+    let from: null | undefined | number;
+    let x: null | undefined | number;
+    let y: null | undefined | number;
+    let segmentIdx: null | undefined | number;
+    let dist: null | undefined | number;
 
     if (coords.length > 1 && pointCoords.length) {
-      let lineCoordinates;
-      let pointCoordinate;
-
-      // If viewport is given, then translate these coordinates to pixels to increase precision
-      if (mercator) {
-        lineCoordinates = coords.map((lineCoordinate) => mercator.project(lineCoordinate));
-        pointCoordinate = mercator.project(pointCoords);
-      } else {
-        lineCoordinates = coords;
-        pointCoordinate = pointCoords;
-      }
+      const pointCoordinate = projectOrUnprojectPoints(
+        pointCoords,
+        coordinateSystem,
+        'PROJECT',
+        wmViewport
+      );
+      const lineCoordinates = coords.map(([px, py, pz = 0]) =>
+        projectOrUnprojectPoints([px, py, pz], coordinateSystem, 'PROJECT', wmViewport)
+      );
 
       for (let n = 1; n < lineCoordinates.length; n++) {
         if (lineCoordinates[n][0] !== lineCoordinates[n - 1][0]) {
@@ -297,16 +328,19 @@ export function nearestPointOnLine( // <G extends LineString | MultiLineString>(
     // index needs to be -1 because we have to account for the shift from initial backscan
     let snapPoint = {x, y, idx: segmentIdx - 1, to, from};
 
-    if (mercator) {
-      const pixelToLatLong = mercator.unproject([snapPoint.x, snapPoint.y]);
-      snapPoint = {
-        x: pixelToLatLong[0],
-        y: pixelToLatLong[1],
-        idx: segmentIdx - 1,
-        to,
-        from
-      };
-    }
+    const pixelToLatLong = projectOrUnprojectPoints(
+      [snapPoint.x, snapPoint.y],
+      coordinateSystem,
+      'UNPROJECT',
+      wmViewport
+    );
+    snapPoint = {
+      x: pixelToLatLong[0],
+      y: pixelToLatLong[1],
+      idx: segmentIdx - 1,
+      to,
+      from
+    };
 
     closestPoint = point([snapPoint.x, snapPoint.y], {
       dist: Math.abs(snapPoint.from - snapPoint.to),

package/src/editable-layers/editable-geojson-layer.ts

@@ -16,6 +16,7 @@ import {
   DoubleClickEvent,
   ModeProps
 } from '../edit-modes/types';
+import {fromDeckCoordinateSystem} from '../edit-modes/coordinate-system';
 
 import {ViewMode} from '../edit-modes/view-mode';
 import {TranslateMode} from '../edit-modes/translate-mode';
@@ -438,6 +439,10 @@ export class EditableGeoJsonLayer extends EditableLayer<
       selectedIndexes: props.selectedFeatureIndexes,
       lastPointerMoveEvent: this.state.lastPointerMoveEvent,
       cursor: this.state.cursor,
+      // Derive edit-mode math from deck.gl's coordinateSystem layer prop.
+      // This ensures that when the layer is configured for Cartesian or other
+      // non-geographic rendering, edit modes automatically use the correct geometry math.
+      coordinateSystem: fromDeckCoordinateSystem(this.props.coordinateSystem),
       onEdit: (editAction) => {
         // Force a re-render
         // This supports double-click where we need to ensure that there's a re-render between the two clicks

package/src/index.ts

@@ -40,6 +40,15 @@ export type {EditMode} from './edit-modes/edit-mode';
 export type {GeoJsonEditModeType} from './edit-modes/geojson-edit-mode';
 export type {GeoJsonEditModeConstructor} from './edit-modes/geojson-edit-mode';
 
+export type {EditModeCoordinateSystem} from './edit-modes/coordinate-system';
+export {GeoCoordinateSystem, CartesianCoordinateSystem} from './edit-modes/coordinate-system';
+export {
+  geoCoordinateSystem,
+  cartesianCoordinateSystem,
+  getEditModeCoordinateSystem,
+  fromDeckCoordinateSystem
+} from './edit-modes/coordinate-system';
+
 export type {EditableGeoJsonLayerProps} from './editable-layers/editable-geojson-layer';
 export type {SelectionLayerProps} from './editable-layers/selection-layer';
 

package/src/utils/memoize.ts

@@ -30,11 +30,17 @@ function isEqual(a: any, b: any) {
  * https://en.wikipedia.org/wiki/Memoization
  * @param {function} compute - the function to be memoized
  */
-export function memoize(compute: Function) {
-  let cachedArgs = {};
-  let cachedResult;
+export function memoize<T, R>(compute: (args: T) => R): (args: T) => R {
+  let cachedArgs: T | null = null;
+  let cachedResult: R | null = null;
 
-  return (args: any) => {
+  return (args: T) => {
+    //  check for null args on first run
+    if (!cachedArgs) {
+      cachedResult = compute(args);
+      cachedArgs = args;
+      return cachedResult;
+    }
     for (const key in args) {
       if (!isEqual(args[key], cachedArgs[key])) {
         cachedResult = compute(args);

package/src/utils/translate-from-center.ts

@@ -3,29 +3,27 @@
 // Copyright (c) vis.gl contributors
 
 import turfCenter from '@turf/center';
-import turfRhumbBearing from '@turf/rhumb-bearing';
-import turfRhumbDistance from '@turf/rhumb-distance';
-import turfRhumbDestination from '@turf/rhumb-destination';
 import {mapCoords} from '../edit-modes/utils';
+import {geoCoordinateSystem} from '../edit-modes/coordinate-system';
+import type {EditModeCoordinateSystem} from '../edit-modes/coordinate-system';
 import type {SimpleFeature} from './geojson-types';
 
 // This function takes feature's center, moves it,
 // and builds new feature around it keeping the proportions
-export function translateFromCenter(feature: SimpleFeature, distance: number, direction: number) {
-  const initialCenterPoint = turfCenter(feature);
+export function translateFromCenter(
+  feature: SimpleFeature,
+  distance: number,
+  direction: number,
+  coordinateSystem: EditModeCoordinateSystem = geoCoordinateSystem
+) {
+  const initialCenter = turfCenter(feature).geometry.coordinates;
 
-  const movedCenterPoint = turfRhumbDestination(initialCenterPoint, distance, direction);
+  const movedCenter = coordinateSystem.destination(initialCenter, distance, direction);
 
   const movedCoordinates = mapCoords(feature.geometry.coordinates, (coordinate) => {
-    const rhumbDistance = turfRhumbDistance(initialCenterPoint.geometry.coordinates, coordinate);
-    const rhumbDirection = turfRhumbBearing(initialCenterPoint.geometry.coordinates, coordinate);
-
-    const movedPosition = turfRhumbDestination(
-      movedCenterPoint.geometry.coordinates,
-      rhumbDistance,
-      rhumbDirection
-    ).geometry.coordinates;
-    return movedPosition;
+    const dist = coordinateSystem.distance(initialCenter, coordinate);
+    const dir = coordinateSystem.bearing(initialCenter, coordinate);
+    return coordinateSystem.destination(movedCenter, dist, dir);
   });
 
   feature.geometry.coordinates = movedCoordinates;