@deck.gl-community/editable-layers 9.3.0-beta.2 → 9.3.1

package/dist/index.cjs

@@ -34,6 +34,7 @@ var __publicField = (obj, key, value) => {
 // dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
+  CartesianCoordinateSystem: () => CartesianCoordinateSystem,
   CompositeMode: () => CompositeMode,
   DeleteMode: () => DeleteMode,
   Draw90DegreePolygonMode: () => Draw90DegreePolygonMode,
@@ -59,6 +60,7 @@ __export(dist_exports, {
   ElevationMode: () => ElevationMode,
   ExtendLineStringMode: () => ExtendLineStringMode,
   ExtrudeMode: () => ExtrudeMode,
+  GeoCoordinateSystem: () => GeoCoordinateSystem,
   GeoJsonEditMode: () => GeoJsonEditMode,
   ImmutableFeatureCollection: () => ImmutableFeatureCollection,
   JunctionScatterplotLayer: () => JunctionScatterplotLayer,
@@ -76,7 +78,11 @@ __export(dist_exports, {
   TranslateMode: () => TranslateMode,
   ViewMode: () => ViewMode,
   _memoize: () => memoize,
+  cartesianCoordinateSystem: () => cartesianCoordinateSystem,
+  fromDeckCoordinateSystem: () => fromDeckCoordinateSystem,
+  geoCoordinateSystem: () => geoCoordinateSystem,
   getEditHandlesForGeometry: () => getEditHandlesForGeometry,
+  getEditModeCoordinateSystem: () => getEditModeCoordinateSystem,
   getPickedEditHandle: () => getPickedEditHandle,
   toDeckColor: () => toDeckColor,
   utils: () => utils_exports
@@ -155,9 +161,9 @@ function nearestPointOnProjectedLine(line, inPoint, viewport) {
     const B = x22 - x12;
     const C = x12 * y22 - x22 * y12;
     const div = A * A + B * B;
-    const distance7 = Math.abs(A * x + B * y + C) / Math.sqrt(div);
-    if (distance7 < minDistance) {
-      minDistance = distance7;
+    const distance6 = Math.abs(A * x + B * y + C) / Math.sqrt(div);
+    if (distance6 < minDistance) {
+      minDistance = distance6;
       minPointInfo = {
         index: index2,
         x0: (B * (B * x - A * y) - A * C) / div,
@@ -196,19 +202,81 @@ function insertBefore(base, insertBeforeText, toInsert) {
 // dist/editable-layers/editable-geojson-layer.js
 var import_layers2 = require("@deck.gl/layers");
 
+// dist/edit-modes/coordinate-system.js
+var import_bearing2 = __toESM(require("@turf/bearing"), 1);
+var import_distance = __toESM(require("@turf/distance"), 1);
+var import_destination2 = __toESM(require("@turf/destination"), 1);
+var import_midpoint = __toESM(require("@turf/midpoint"), 1);
+var import_helpers2 = require("@turf/helpers");
+var import_core = require("@deck.gl/core");
+var GeoCoordinateSystem = class {
+  distance(a, b) {
+    return (0, import_distance.default)((0, import_helpers2.point)(a), (0, import_helpers2.point)(b));
+  }
+  bearing(a, b) {
+    return (0, import_bearing2.default)((0, import_helpers2.point)(a), (0, import_helpers2.point)(b));
+  }
+  destination(origin, distance6, bearing6) {
+    return (0, import_destination2.default)((0, import_helpers2.point)(origin), distance6, bearing6).geometry.coordinates;
+  }
+  midpoint(a, b) {
+    return (0, import_midpoint.default)((0, import_helpers2.point)(a), (0, import_helpers2.point)(b)).geometry.coordinates;
+  }
+};
+var CartesianCoordinateSystem = class {
+  distance(a, b) {
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  bearing(a, b) {
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    const angle = Math.atan2(dx, dy) * (180 / Math.PI);
+    return angle > 180 ? angle - 360 : angle <= -180 ? angle + 360 : angle;
+  }
+  destination(origin, distance6, bearing6) {
+    const bearingRad = bearing6 * (Math.PI / 180);
+    return [
+      origin[0] + distance6 * Math.sin(bearingRad),
+      origin[1] + distance6 * Math.cos(bearingRad)
+    ];
+  }
+  midpoint(a, b) {
+    return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  }
+};
+var geoCoordinateSystem = new GeoCoordinateSystem();
+var cartesianCoordinateSystem = new CartesianCoordinateSystem();
+function getEditModeCoordinateSystem(coordinateSystem) {
+  return coordinateSystem ?? geoCoordinateSystem;
+}
+function fromDeckCoordinateSystem(deckCoordSystem) {
+  switch (deckCoordSystem) {
+    case import_core.COORDINATE_SYSTEM.CARTESIAN:
+    case import_core.COORDINATE_SYSTEM.METER_OFFSETS:
+      return cartesianCoordinateSystem;
+    case import_core.COORDINATE_SYSTEM.LNGLAT:
+    case import_core.COORDINATE_SYSTEM.LNGLAT_OFFSETS:
+    case import_core.COORDINATE_SYSTEM.DEFAULT:
+    default:
+      return geoCoordinateSystem;
+  }
+}
+
 // dist/edit-modes/geojson-edit-mode.js
-var import_helpers3 = require("@turf/helpers");
+var import_helpers4 = require("@turf/helpers");
 var import_union = __toESM(require("@turf/union"), 1);
 var import_difference = __toESM(require("@turf/difference"), 1);
 var import_intersect = __toESM(require("@turf/intersect"), 1);
 var import_rewind = __toESM(require("@turf/rewind"), 1);
 
 // dist/edit-modes/utils.js
-var import_destination2 = __toESM(require("@turf/destination"), 1);
-var import_bearing2 = __toESM(require("@turf/bearing"), 1);
-var import_point_to_line_distance2 = __toESM(require("@turf/point-to-line-distance"), 1);
+var import_destination3 = require("@turf/destination");
+var import_bearing3 = require("@turf/bearing");
+var import_point_to_line_distance2 = require("@turf/point-to-line-distance");
 var import_meta = require("@turf/meta");
-var import_helpers2 = require("@turf/helpers");
+var import_helpers3 = require("@turf/helpers");
 var import_invariant = require("@turf/invariant");
 var import_web_mercator2 = require("@math.gl/web-mercator");
 function recursivelyTraverseNestedArrays2(array, prefix, fn) {
@@ -228,13 +296,13 @@ function generatePointsParallelToLinePoints2(p1, p2, coords) {
     type: "LineString",
     coordinates: [p1, p2]
   };
-  const pt = (0, import_helpers2.point)(coords);
-  const ddistance = (0, import_point_to_line_distance2.default)(pt, lineString3);
-  const lineBearing = (0, import_bearing2.default)(p1, p2);
+  const pt = (0, import_helpers3.point)(coords);
+  const ddistance = (0, import_point_to_line_distance2.pointToLineDistance)(pt, lineString3);
+  const lineBearing = (0, import_bearing3.bearing)(p1, p2);
   const isPointToLeftOfLine = (coords[0] - p1[0]) * (p2[1] - p1[1]) - (coords[1] - p1[1]) * (p2[0] - p1[0]);
   const orthogonalBearing = isPointToLeftOfLine < 0 ? lineBearing - 90 : lineBearing - 270;
-  const p3 = (0, import_destination2.default)(p2, ddistance, orthogonalBearing);
-  const p4 = (0, import_destination2.default)(p1, ddistance, orthogonalBearing);
+  const p3 = (0, import_destination3.destination)(p2, ddistance, orthogonalBearing);
+  const p4 = (0, import_destination3.destination)(p1, ddistance, orthogonalBearing);
   return [p3.geometry.coordinates, p4.geometry.coordinates];
 }
 function distance2d2(x1, y1, x2, y2) {
@@ -245,13 +313,27 @@ function distance2d2(x1, y1, x2, y2) {
 function mix2(a, b, ratio) {
   return b * ratio + a * (1 - ratio);
 }
-function nearestPointOnProjectedLine2(line, inPoint, viewport) {
-  const wmViewport = new import_web_mercator2.WebMercatorViewport(viewport);
-  const coordinates = line.geometry.coordinates;
-  const projectedCoords = coordinates.map(([x3, y3, z = 0]) => wmViewport.project([x3, y3, z]));
-  const [x, y] = wmViewport.project(inPoint.geometry.coordinates);
+function projectOrUnprojectPoints(inputPoints, coordinateSystem, project, wmViewport) {
+  if (coordinateSystem === void 0 || wmViewport === void 0)
+    return [...inputPoints];
+  else if (coordinateSystem instanceof CartesianCoordinateSystem)
+    return [...inputPoints];
+  return project === "PROJECT" ? wmViewport.project([...inputPoints]) : wmViewport.unproject([...inputPoints]);
+}
+function nearestPointOnProjectedLine2(line, inPoint, viewport, coordinateSystem) {
+  var _a;
   let minDistance = Infinity;
-  let minPointInfo = {};
+  const coordinates = (_a = line == null ? void 0 : line.geometry) == null ? void 0 : _a.coordinates;
+  if (!coordinates)
+    return {
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [0, 0, 0] },
+      properties: { dist: minDistance, index: -1 }
+    };
+  const wmViewport = new import_web_mercator2.WebMercatorViewport(viewport);
+  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 = { index: 0, x0: 0, y0: 0 };
   projectedCoords.forEach(([x22, y22], index2) => {
     if (index2 === 0) {
       return;
@@ -261,9 +343,9 @@ function nearestPointOnProjectedLine2(line, inPoint, viewport) {
     const B = x22 - x12;
     const C = x12 * y22 - x22 * y12;
     const div = A * A + B * B;
-    const distance7 = Math.abs(A * x + B * y + C) / Math.sqrt(div);
-    if (distance7 < minDistance) {
-      minDistance = distance7;
+    const distance6 = Math.abs(A * x + B * y + C) / Math.sqrt(div);
+    if (distance6 < minDistance) {
+      minDistance = distance6;
       minPointInfo = {
         index: index2,
         x0: (B * (B * x - A * y) - A * C) / div,
@@ -282,7 +364,7 @@ function nearestPointOnProjectedLine2(line, inPoint, viewport) {
     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
@@ -291,15 +373,10 @@ function nearestPointOnProjectedLine2(line, inPoint, viewport) {
     }
   };
 }
-function nearestPointOnLine(lines, inPoint, viewport) {
+function nearestPointOnLine(lines, inPoint, viewport, coordinateSystem) {
   var _a, _b;
-  let mercator;
-  if (viewport) {
-    mercator = new import_web_mercator2.WebMercatorViewport(viewport);
-  }
-  let closestPoint = (0, import_helpers2.point)([Infinity, Infinity], {
-    dist: Infinity
-  });
+  const wmViewport = viewport ? new import_web_mercator2.WebMercatorViewport(viewport) : void 0;
+  let closestPoint = (0, import_helpers3.point)([Infinity, Infinity], { dist: Infinity });
   if (!((_a = lines.geometry) == null ? void 0 : _a.coordinates.length) || ((_b = lines.geometry) == null ? void 0 : _b.coordinates.length) < 2) {
     return closestPoint;
   }
@@ -314,15 +391,8 @@ function nearestPointOnLine(lines, inPoint, viewport) {
     let segmentIdx;
     let dist;
     if (coords.length > 1 && pointCoords.length) {
-      let lineCoordinates;
-      let pointCoordinate;
-      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]) {
           const slope = (lineCoordinates[n][1] - lineCoordinates[n - 1][1]) / (lineCoordinates[n][0] - lineCoordinates[n - 1][0]);
@@ -361,17 +431,15 @@ function nearestPointOnLine(lines, inPoint, viewport) {
       y = lineCoordinates[segmentIdx - 1][1] - dy * to;
     }
     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
-      };
-    }
-    closestPoint = (0, import_helpers2.point)([snapPoint.x, snapPoint.y], {
+    const pixelToLatLong = projectOrUnprojectPoints([snapPoint.x, snapPoint.y], coordinateSystem, "UNPROJECT", wmViewport);
+    snapPoint = {
+      x: pixelToLatLong[0],
+      y: pixelToLatLong[1],
+      idx: segmentIdx - 1,
+      to,
+      from
+    };
+    closestPoint = (0, import_helpers3.point)([snapPoint.x, snapPoint.y], {
       dist: Math.abs(snapPoint.from - snapPoint.to),
       index: snapPoint.idx
     });
@@ -782,10 +850,10 @@ var DEFAULT_GUIDES = {
 var DEFAULT_TOOLTIPS = [];
 var GeoJsonEditMode = class {
   _clickSequence = [];
-  getGuides(props) {
+  getGuides(_props) {
     return DEFAULT_GUIDES;
   }
-  getTooltips(props) {
+  getTooltips(_props) {
     return DEFAULT_TOOLTIPS;
   }
   getSelectedFeature(props) {
@@ -895,11 +963,11 @@ var GeoJsonEditMode = class {
       };
       let updatedGeometry;
       if (modeConfig.booleanOperation === "union") {
-        updatedGeometry = (0, import_union.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
+        updatedGeometry = (0, import_union.default)((0, import_helpers4.featureCollection)([selectedFeature, feature]));
       } else if (modeConfig.booleanOperation === "difference") {
-        updatedGeometry = (0, import_difference.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
+        updatedGeometry = (0, import_difference.default)((0, import_helpers4.featureCollection)([selectedFeature, feature]));
       } else if (modeConfig.booleanOperation === "intersection") {
-        updatedGeometry = (0, import_intersect.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
+        updatedGeometry = (0, import_intersect.default)((0, import_helpers4.featureCollection)([selectedFeature, feature]));
       } else {
         console.warn(`Invalid booleanOperation ${modeConfig.booleanOperation}`);
         return null;
@@ -921,14 +989,14 @@ var GeoJsonEditMode = class {
     }
     return this.getAddFeatureAction(featureOrGeometry, props.data, featureProperties);
   }
-  createTentativeFeature(props) {
+  createTentativeFeature(_props) {
     return null;
   }
-  handleClick(event, props) {
+  handleClick(_event, _props) {
   }
-  handleDoubleClick(event, props) {
+  handleDoubleClick(_event, _props) {
   }
-  handlePointerMove(event, props) {
+  handlePointerMove(_event, props) {
     const tentativeFeature = this.createTentativeFeature(props);
     if (tentativeFeature) {
       props.onEdit({
@@ -940,11 +1008,11 @@ var GeoJsonEditMode = class {
       });
     }
   }
-  handleStartDragging(event, props) {
+  handleStartDragging(_event, _props) {
   }
-  handleStopDragging(event, props) {
+  handleStopDragging(_event, _props) {
   }
-  handleDragging(event, props) {
+  handleDragging(_event, _props) {
   }
   handleKeyUp(event, props) {
     if (event.key === "Escape") {
@@ -971,25 +1039,18 @@ var ViewMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/translate-mode.js
-var import_bearing3 = __toESM(require("@turf/bearing"), 1);
-var import_distance = __toESM(require("@turf/distance"), 1);
 var import_clone = __toESM(require("@turf/clone"), 1);
-var import_helpers4 = require("@turf/helpers");
 var import_web_mercator3 = require("@math.gl/web-mercator");
 
 // dist/utils/translate-from-center.js
 var import_center = __toESM(require("@turf/center"), 1);
-var import_rhumb_bearing = __toESM(require("@turf/rhumb-bearing"), 1);
-var import_rhumb_distance = __toESM(require("@turf/rhumb-distance"), 1);
-var import_rhumb_destination = __toESM(require("@turf/rhumb-destination"), 1);
-function translateFromCenter(feature, distance7, direction) {
-  const initialCenterPoint = (0, import_center.default)(feature);
-  const movedCenterPoint = (0, import_rhumb_destination.default)(initialCenterPoint, distance7, direction);
+function translateFromCenter(feature, distance6, direction, coordinateSystem = geoCoordinateSystem) {
+  const initialCenter = (0, import_center.default)(feature).geometry.coordinates;
+  const movedCenter = coordinateSystem.destination(initialCenter, distance6, direction);
   const movedCoordinates = mapCoords(feature.geometry.coordinates, (coordinate) => {
-    const rhumbDistance = (0, import_rhumb_distance.default)(initialCenterPoint.geometry.coordinates, coordinate);
-    const rhumbDirection = (0, import_rhumb_bearing.default)(initialCenterPoint.geometry.coordinates, coordinate);
-    const movedPosition = (0, import_rhumb_destination.default)(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;
   return feature;
@@ -1073,11 +1134,10 @@ var TranslateMode = class extends GeoJsonEditMode {
         }
       }
     } else {
-      const p1 = (0, import_helpers4.point)(startDragPoint);
-      const p2 = (0, import_helpers4.point)(currentPoint);
-      const distanceMoved = (0, import_distance.default)(p1, p2);
-      const direction = (0, import_bearing3.default)(p1, p2);
-      const movedFeatures = this._geometryBeforeTranslate.features.map((feature) => translateFromCenter((0, import_clone.default)(feature), distanceMoved, direction));
+      const coordinateSystem = getEditModeCoordinateSystem(props.coordinateSystem);
+      const distanceMoved = coordinateSystem.distance(startDragPoint, currentPoint);
+      const direction = coordinateSystem.bearing(startDragPoint, currentPoint);
+      const movedFeatures = this._geometryBeforeTranslate.features.map((feature) => translateFromCenter((0, import_clone.default)(feature), distanceMoved, direction, coordinateSystem));
       for (let i = 0; i < selectedIndexes.length; i++) {
         const selectedIndex = selectedIndexes[i];
         const movedFeature = movedFeatures[i];
@@ -1122,7 +1182,7 @@ var ModifyMode = class extends GeoJsonEditMode {
         const referencePoint = (0, import_helpers5.point)(mapCoords2);
         recursivelyTraverseNestedArrays2(featureAsPick.object.geometry.coordinates, [], (lineString3, prefix) => {
           const lineStringFeature = (0, import_helpers5.lineString)(lineString3);
-          const candidateIntermediatePoint = this.getNearestPoint(lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport);
+          const candidateIntermediatePoint = this.getNearestPoint(lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport, props.coordinateSystem);
           if (!intermediatePoint || candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist) {
             intermediatePoint = candidateIntermediatePoint;
             positionIndexPrefix = prefix;
@@ -1152,15 +1212,15 @@ var ModifyMode = class extends GeoJsonEditMode {
     };
   }
   // turf.js does not support elevation for nearestPointOnLine
-  getNearestPoint(line, inPoint, viewport) {
+  getNearestPoint(line, inPoint, viewport, coordinateSystem) {
     const { coordinates } = line.geometry;
     if (coordinates.some((coord) => coord.length > 2)) {
       if (viewport) {
-        return nearestPointOnProjectedLine2(line, inPoint, viewport);
+        return nearestPointOnProjectedLine2(line, inPoint, viewport, coordinateSystem);
       }
       console.log("Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.");
     }
-    return nearestPointOnLine(line, inPoint, viewport);
+    return nearestPointOnLine(line, inPoint, viewport, coordinateSystem);
   }
   handleClick(event, props) {
     var _a, _b;
@@ -1588,7 +1648,7 @@ var import_line_intersect = __toESM(require("@turf/line-intersect"), 1);
 var import_helpers8 = require("@turf/helpers");
 var import_bearing6 = __toESM(require("@turf/bearing"), 1);
 var import_distance4 = __toESM(require("@turf/distance"), 1);
-var import_destination3 = __toESM(require("@turf/destination"), 1);
+var import_destination4 = __toESM(require("@turf/destination"), 1);
 var import_polygon_to_line3 = __toESM(require("@turf/polygon-to-line"), 1);
 var import_nearest_point_on_line = __toESM(require("@turf/nearest-point-on-line"), 1);
 var SplitPolygonMode = class extends GeoJsonEditMode {
@@ -1615,7 +1675,7 @@ var SplitPolygonMode = class extends GeoJsonEditMode {
       if (closestPoint) {
         const lastBearing = (0, import_bearing6.default)(firstPoint, closestPoint);
         const currentDistance = (0, import_distance4.default)(firstPoint, mapCoords2, { units: "meters" });
-        return (0, import_destination3.default)(firstPoint, currentDistance, lastBearing, {
+        return (0, import_destination4.default)(firstPoint, currentDistance, lastBearing, {
           units: "meters"
         }).geometry.coordinates;
       }
@@ -1965,9 +2025,6 @@ var DrawPointMode = class extends GeoJsonEditMode {
   }
 };
 
-// dist/edit-modes/draw-line-string-mode.js
-var import_distance5 = __toESM(require("@turf/distance"), 1);
-
 // dist/utils/memoize.js
 function isEqual(a, b) {
   if (a === b) {
@@ -1988,9 +2045,14 @@ function isEqual(a, b) {
   return false;
 }
 function memoize(compute) {
-  let cachedArgs = {};
-  let cachedResult;
+  let cachedArgs = null;
+  let cachedResult = null;
   return (args) => {
+    if (!cachedArgs) {
+      cachedResult = compute(args);
+      cachedArgs = args;
+      return cachedResult;
+    }
     for (const key in args) {
       if (!isEqual(args[key], cachedArgs[key])) {
         cachedResult = compute(args);
@@ -2018,7 +2080,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
     }
     const clickSequence = this.getClickSequence();
     if (!clickedEditHandle) {
-      this.calculateInfoDraw(clickSequence);
+      this.calculateInfoDraw(clickSequence, props == null ? void 0 : props.coordinateSystem);
     }
     if (clickSequence.length > 1 && clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1) {
       this.dist = 0;
@@ -2034,7 +2096,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
       });
     }
   }
-  handleDoubleClick(event, props) {
+  handleDoubleClick(_event, props) {
     this.finishDrawing(props);
   }
   finishDrawing(props) {
@@ -2105,7 +2167,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
     guides.features.push(...editHandles);
     return guides;
   }
-  handlePointerMove(event, props) {
+  handlePointerMove(_event, props) {
     props.onUpdateCursor("cell");
   }
   /**
@@ -2116,14 +2178,16 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
   getTooltips(props) {
     return this._getTooltips({
       modeConfig: props.modeConfig,
-      dist: this.dist
+      dist: this.dist,
+      coordinateSystem: props == null ? void 0 : props.coordinateSystem
     });
   }
   // utility function
-  calculateInfoDraw(clickSequence) {
+  calculateInfoDraw(clickSequence, coordinateSystem = new GeoCoordinateSystem()) {
     if (clickSequence.length > 1) {
       this.position = clickSequence[clickSequence.length - 1];
-      this.dist += (0, import_distance5.default)(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]);
+      const coordSys = getEditModeCoordinateSystem(coordinateSystem);
+      this.dist += coordSys.distance(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]);
     }
   }
   /**
@@ -2131,7 +2195,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
    * @param modeConfig
    * @param dist
    */
-  _getTooltips = memoize(({ modeConfig, dist }) => {
+  _getTooltips = memoize(({ modeConfig, dist, coordinateSystem }) => {
     let tooltips = [];
     const { formatTooltip } = modeConfig || {};
     let text;
@@ -2139,7 +2203,9 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
       if (formatTooltip) {
         text = formatTooltip(dist);
       } else {
-        text = `Distance: ${parseFloat(dist).toFixed(2)} kilometers`;
+        const coordSys = coordinateSystem ? getEditModeCoordinateSystem(coordinateSystem) : new GeoCoordinateSystem();
+        const labelUnits = coordSys instanceof GeoCoordinateSystem ? "kilometers" : "pixels";
+        text = `Distance: ${parseFloat(dist).toFixed(2)} ${labelUnits}`;
       }
       tooltips = [
         {
@@ -2509,15 +2575,15 @@ var DrawRectangleMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-square-mode.js
 var import_bbox_polygon4 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance6 = __toESM(require("@turf/distance"), 1);
+var import_distance5 = __toESM(require("@turf/distance"), 1);
 var import_along = __toESM(require("@turf/along"), 1);
 var import_helpers10 = require("@turf/helpers");
 var DrawSquareMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
-    const distance1 = (0, import_distance6.default)((0, import_helpers10.point)(coord3), (0, import_helpers10.point)(coord1));
-    const distance22 = (0, import_distance6.default)((0, import_helpers10.point)(coord4), (0, import_helpers10.point)(coord1));
+    const distance1 = (0, import_distance5.default)((0, import_helpers10.point)(coord3), (0, import_helpers10.point)(coord1));
+    const distance22 = (0, import_distance5.default)((0, import_helpers10.point)(coord4), (0, import_helpers10.point)(coord1));
     const shortestDistance = distance1 <= distance22 ? distance1 : distance22;
     const closestPoint = distance1 <= distance22 ? coord3 : coord4;
     const line = (0, import_helpers10.lineString)([closestPoint, coord2]);
@@ -2545,15 +2611,15 @@ var DrawRectangleFromCenterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-square-from-center-mode.js
 var import_bbox_polygon6 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance7 = __toESM(require("@turf/distance"), 1);
+var import_distance6 = __toESM(require("@turf/distance"), 1);
 var import_along2 = __toESM(require("@turf/along"), 1);
 var import_helpers11 = require("@turf/helpers");
 var DrawSquareFromCenterMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
-    const distance1 = (0, import_distance7.default)((0, import_helpers11.point)(coord3), (0, import_helpers11.point)(coord1));
-    const distance22 = (0, import_distance7.default)((0, import_helpers11.point)(coord4), (0, import_helpers11.point)(coord1));
+    const distance1 = (0, import_distance6.default)((0, import_helpers11.point)(coord3), (0, import_helpers11.point)(coord1));
+    const distance22 = (0, import_distance6.default)((0, import_helpers11.point)(coord4), (0, import_helpers11.point)(coord1));
     const shortestDistance = distance1 <= distance22 ? distance1 : distance22;
     const closestPoint = distance1 <= distance22 ? coord3 : coord4;
     const line = (0, import_helpers11.lineString)([closestPoint, coord2]);
@@ -2570,7 +2636,7 @@ var DrawSquareFromCenterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-circle-from-center-mode.js
 var import_circle = __toESM(require("@turf/circle"), 1);
-var import_distance8 = __toESM(require("@turf/distance"), 1);
+var import_distance7 = __toESM(require("@turf/distance"), 1);
 var import_area = __toESM(require("@turf/area"), 1);
 var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
   radius = null;
@@ -2584,7 +2650,7 @@ var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
       console.warn("Minimum steps to draw a circle is 4 ");
       options.steps = 4;
     }
-    this.radius = Math.max((0, import_distance8.default)(coord1, coord2), 1e-3);
+    this.radius = Math.max((0, import_distance7.default)(coord1, coord2), 1e-3);
     const geometry = (0, import_circle.default)(coord1, this.radius, options);
     geometry.properties = geometry.properties || {};
     geometry.properties.shape = "Circle";
@@ -2638,7 +2704,7 @@ var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-circle-by-diameter-mode.js
 var import_circle2 = __toESM(require("@turf/circle"), 1);
-var import_distance9 = __toESM(require("@turf/distance"), 1);
+var import_distance8 = __toESM(require("@turf/distance"), 1);
 var import_area2 = __toESM(require("@turf/area"), 1);
 var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
   radius = null;
@@ -2653,8 +2719,8 @@ var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
       options.steps = 4;
     }
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    this.radius = Math.max((0, import_distance9.default)(coord1, centerCoordinates), 1e-3);
-    this.diameter = Math.max((0, import_distance9.default)(coord1, coord2), 1e-3);
+    this.radius = Math.max((0, import_distance8.default)(coord1, centerCoordinates), 1e-3);
+    this.diameter = Math.max((0, import_distance8.default)(coord1, coord2), 1e-3);
     this.position = centerCoordinates;
     const geometry = (0, import_circle2.default)(centerCoordinates, this.radius, options);
     geometry.properties = geometry.properties || {};
@@ -2713,7 +2779,7 @@ var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-ellipse-by-bounding-box-mode.js
 var import_bbox_polygon7 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance10 = __toESM(require("@turf/distance"), 1);
+var import_distance9 = __toESM(require("@turf/distance"), 1);
 var import_ellipse = __toESM(require("@turf/ellipse"), 1);
 var import_helpers12 = require("@turf/helpers");
 var DrawEllipseByBoundingBoxMode = class extends TwoClickPolygonMode {
@@ -2724,8 +2790,8 @@ var DrawEllipseByBoundingBoxMode = class extends TwoClickPolygonMode {
     const maxY = Math.max(coord1[1], coord2[1]);
     const polygonPoints = (0, import_bbox_polygon7.default)([minX, minY, maxX, maxY]).geometry.coordinates[0];
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    const xSemiAxis = Math.max((0, import_distance10.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[1])), 1e-3);
-    const ySemiAxis = Math.max((0, import_distance10.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[3])), 1e-3);
+    const xSemiAxis = Math.max((0, import_distance9.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[1])), 1e-3);
+    const ySemiAxis = Math.max((0, import_distance9.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[3])), 1e-3);
     const geometry = (0, import_ellipse.default)(centerCoordinates, xSemiAxis, ySemiAxis, {});
     geometry.properties = geometry.properties || {};
     geometry.properties.editProperties = geometry.properties.editProperties || {};
@@ -2837,15 +2903,15 @@ var DrawRectangleUsingThreePointsMode = class extends ThreeClickPolygonMode {
 };
 
 // dist/edit-modes/draw-ellipse-using-three-points-mode.js
-var import_distance11 = __toESM(require("@turf/distance"), 1);
+var import_distance10 = __toESM(require("@turf/distance"), 1);
 var import_ellipse2 = __toESM(require("@turf/ellipse"), 1);
 var import_bearing8 = __toESM(require("@turf/bearing"), 1);
 var import_helpers13 = require("@turf/helpers");
 var DrawEllipseUsingThreePointsMode = class extends ThreeClickPolygonMode {
   getThreeClickPolygon(coord1, coord2, coord3, modeConfig) {
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    const xSemiAxis = Math.max((0, import_distance11.default)(centerCoordinates, (0, import_helpers13.point)(coord3)), 1e-3);
-    const ySemiAxis = Math.max((0, import_distance11.default)(coord1, coord2), 1e-3) / 2;
+    const xSemiAxis = Math.max((0, import_distance10.default)(centerCoordinates, (0, import_helpers13.point)(coord3)), 1e-3);
+    const ySemiAxis = Math.max((0, import_distance10.default)(coord1, coord2), 1e-3) / 2;
     const options = { angle: (0, import_bearing8.default)(coord1, coord2) };
     const geometry = (0, import_ellipse2.default)(centerCoordinates, xSemiAxis, ySemiAxis, options);
     geometry.properties = geometry.properties || {};
@@ -2860,10 +2926,10 @@ var DrawEllipseUsingThreePointsMode = class extends ThreeClickPolygonMode {
 };
 
 // dist/edit-modes/draw-90degree-polygon-mode.js
-var import_destination4 = __toESM(require("@turf/destination"), 1);
+var import_destination5 = __toESM(require("@turf/destination"), 1);
 var import_bearing9 = __toESM(require("@turf/bearing"), 1);
 var import_line_intersect3 = __toESM(require("@turf/line-intersect"), 1);
-var import_distance12 = __toESM(require("@turf/distance"), 1);
+var import_distance11 = __toESM(require("@turf/distance"), 1);
 var import_helpers14 = require("@turf/helpers");
 var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
   createTentativeFeature(props) {
@@ -2993,16 +3059,16 @@ var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
         const newAngle2 = angle2 + factor * 90;
         angles.second.push(newAngle2 > 180 ? newAngle2 - 360 : newAngle2);
       });
-      const distance7 = (0, import_distance12.default)((0, import_helpers14.point)(p1), (0, import_helpers14.point)(p3));
+      const distance6 = (0, import_distance11.default)((0, import_helpers14.point)(p1), (0, import_helpers14.point)(p3));
       [0, 1, 2].forEach((indexFirst) => {
         const line1 = (0, import_helpers14.lineString)([
           p1,
-          (0, import_destination4.default)(p1, distance7, angles.first[indexFirst]).geometry.coordinates
+          (0, import_destination5.default)(p1, distance6, angles.first[indexFirst]).geometry.coordinates
         ]);
         [0, 1, 2].forEach((indexSecond) => {
           const line2 = (0, import_helpers14.lineString)([
             p3,
-            (0, import_destination4.default)(p3, distance7, angles.second[indexSecond]).geometry.coordinates
+            (0, import_destination5.default)(p3, distance6, angles.second[indexSecond]).geometry.coordinates
           ]);
           const fc = (0, import_line_intersect3.default)(line1, line2);
           if (fc && fc.features.length) {
@@ -3326,7 +3392,7 @@ var DeleteMode = class extends GeoJsonEditMode {
 var PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
 
 // dist/editable-layers/editable-layer.js
-var import_core = require("@deck.gl/core");
+var import_core2 = require("@deck.gl/core");
 var EVENT_TYPES = [
   "click",
   "pointermove",
@@ -3336,7 +3402,7 @@ var EVENT_TYPES = [
   "keyup",
   "dblclick"
 ];
-var EditableLayer = class extends import_core.CompositeLayer {
+var EditableLayer = class extends import_core2.CompositeLayer {
   state = void 0;
   // Overridable interaction event handlers
   onLayerClick(event) {
@@ -3823,6 +3889,10 @@ var EditableGeoJsonLayer = class 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) => {
         this.setNeedsUpdate();
         props.onEdit(editAction);
@@ -4142,7 +4212,7 @@ __publicField(EditableH3ClusterLayer, "layerName", "EditableH3ClusterLayer");
 __publicField(EditableH3ClusterLayer, "defaultProps", defaultProps3);
 
 // dist/editable-layers/selection-layer.js
-var import_core2 = require("@deck.gl/core");
+var import_core3 = require("@deck.gl/core");
 var import_layers3 = require("@deck.gl/layers");
 var import_helpers16 = require("@turf/helpers");
 var import_buffer2 = __toESM(require("@turf/buffer"), 1);
@@ -4194,7 +4264,7 @@ var PASS_THROUGH_PROPS = [
   "getTentativeFillColor",
   "getTentativeLineWidth"
 ];
-var SelectionLayer = class extends import_core2.CompositeLayer {
+var SelectionLayer = class extends import_core3.CompositeLayer {
   state = void 0;
   _selectRectangleObjects(coordinates) {
     const { layerIds, onSelect } = this.props;
@@ -4299,10 +4369,10 @@ __publicField(SelectionLayer, "layerName", "SelectionLayer");
 __publicField(SelectionLayer, "defaultProps", defaultProps4);
 
 // dist/editable-layers/elevated-edit-handle-layer.js
-var import_core3 = require("@deck.gl/core");
+var import_core4 = require("@deck.gl/core");
 var import_layers4 = require("@deck.gl/layers");
 var defaultProps5 = {};
-var ElevatedEditHandleLayer = class extends import_core3.CompositeLayer {
+var ElevatedEditHandleLayer = class extends import_core4.CompositeLayer {
   renderLayers() {
     const handles = new import_layers4.ScatterplotLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-ScatterplotLayer`,
@@ -4326,7 +4396,7 @@ __publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps5);
 // dist/widgets/edit-mode-tray-widget.js
 var import_jsx_runtime = require("preact/jsx-runtime");
 var import_preact = require("preact");
-var import_core4 = require("@deck.gl/core");
+var import_core5 = require("@deck.gl/core");
 var ROOT_STYLE = {
   position: "absolute",
   display: "flex",
@@ -4370,7 +4440,7 @@ var BUTTON_LABEL_STYLE = {
   marginTop: "2px",
   lineHeight: "12px"
 };
-var _EditModeTrayWidget = class extends import_core4.Widget {
+var _EditModeTrayWidget = class extends import_core5.Widget {
   placement = "top-left";
   className = "deck-widget-edit-mode-tray";
   layout = "vertical";
@@ -4545,7 +4615,7 @@ __publicField(EditModeTrayWidget, "defaultProps", {
 // dist/widgets/editor-toolbar-widget.js
 var import_jsx_runtime2 = require("preact/jsx-runtime");
 var import_preact2 = require("preact");
-var import_core5 = require("@deck.gl/core");
+var import_core6 = require("@deck.gl/core");
 var ROOT_STYLE2 = {
   position: "absolute",
   display: "flex",
@@ -4627,7 +4697,7 @@ var BOOLEAN_OPS = [
   { op: "union", icon: UnionIcon, label: "Union", title: "Union with selection" },
   { op: "intersection", icon: IntersectIcon, label: "Sect", title: "Intersect with selection" }
 ];
-var _EditorToolbarWidget = class extends import_core5.Widget {
+var _EditorToolbarWidget = class extends import_core6.Widget {
   placement = "bottom-left";
   className = "deck-widget-editor-toolbar";
   deck = null;
@@ -4712,9 +4782,9 @@ __publicField(EditorToolbarWidget, "defaultProps", {
 });
 
 // dist/editable-layers/junction-scatterplot-layer.js
-var import_core6 = require("@deck.gl/core");
+var import_core7 = require("@deck.gl/core");
 var import_layers5 = require("@deck.gl/layers");
-var JunctionScatterplotLayer = class extends import_core6.CompositeLayer {
+var JunctionScatterplotLayer = class extends import_core7.CompositeLayer {
   renderLayers() {
     const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
     return [
@@ -4758,7 +4828,7 @@ __publicField(JunctionScatterplotLayer, "defaultProps", {
 var import_nearest_point_on_line2 = __toESM(require("@turf/nearest-point-on-line"), 1);
 var import_helpers17 = require("@turf/helpers");
 var import_circle3 = __toESM(require("@turf/circle"), 1);
-var import_distance13 = __toESM(require("@turf/distance"), 1);
+var import_distance12 = __toESM(require("@turf/distance"), 1);
 var import_center2 = __toESM(require("@turf/center"), 1);
 var ResizeCircleMode = class extends GeoJsonEditMode {
   _selectedEditHandle;
@@ -4826,7 +4896,7 @@ var ResizeCircleMode = class extends GeoJsonEditMode {
       const feature = this.getSelectedFeature(props);
       const center = (0, import_center2.default)(feature).geometry.coordinates;
       const numberOfSteps = Object.entries(feature.geometry.coordinates[0]).length - 1;
-      const radius = Math.max((0, import_distance13.default)(center, event.mapCoords), 1e-3);
+      const radius = Math.max((0, import_distance12.default)(center, event.mapCoords), 1e-3);
       const { steps = numberOfSteps } = {};
       const options = { steps };
       const updatedFeature = (0, import_circle3.default)(center, radius, options);
@@ -4942,34 +5012,33 @@ var ExtendLineStringMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/measure-distance-mode.js
-var import_distance14 = __toESM(require("@turf/distance"), 1);
-var import_midpoint = __toESM(require("@turf/midpoint"), 1);
 var MeasureDistanceMode = class extends GeoJsonEditMode {
   _isMeasuringSessionFinished = false;
   _currentTooltips = [];
   _currentDistance = 0;
-  _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig }) => {
-    const { turfOptions, measurementCallback } = modeConfig || {};
-    const distance7 = (0, import_distance14.default)(positionA, positionB, turfOptions);
+  _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig, coordinateSystem }) => {
+    const { measurementCallback } = modeConfig || {};
+    const distance6 = getEditModeCoordinateSystem(coordinateSystem).distance(positionA, positionB);
     if (measurementCallback) {
-      measurementCallback(distance7);
+      measurementCallback(distance6);
     }
-    return distance7;
+    return distance6;
   };
-  _formatTooltip(distance7, modeConfig) {
+  _formatTooltip(distance6, modeConfig) {
     const { formatTooltip, turfOptions } = modeConfig || {};
     const units = turfOptions && turfOptions.units || "kilometers";
     let text;
     if (formatTooltip) {
-      text = formatTooltip(distance7);
+      text = formatTooltip(distance6);
     } else {
-      text = `${parseFloat(distance7).toFixed(2)} ${units}`;
+      text = `${parseFloat(distance6).toFixed(2)} ${units}`;
     }
     return text;
   }
   handleClick(event, props) {
     const { modeConfig, data, onEdit } = props;
     const { centerTooltipsOnLine = false } = modeConfig || {};
+    const coordSys = getEditModeCoordinateSystem(props.coordinateSystem);
     if (this._isMeasuringSessionFinished) {
       this._isMeasuringSessionFinished = false;
       this.resetClickSequence();
@@ -4991,9 +5060,10 @@ var MeasureDistanceMode = class extends GeoJsonEditMode {
         this._currentDistance += this._calculateDistanceForTooltip({
           positionA: clickSequence[clickSequence.length - 2],
           positionB: clickSequence[clickSequence.length - 1],
-          modeConfig
+          modeConfig,
+          coordinateSystem: coordSys
         });
-        const tooltipPosition = centerTooltipsOnLine ? (0, import_midpoint.default)(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]).geometry.coordinates : event.mapCoords;
+        const tooltipPosition = centerTooltipsOnLine ? coordSys.midpoint(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]) : event.mapCoords;
         this._currentTooltips.push({
           position: tooltipPosition,
           text: this._formatTooltip(this._currentDistance, modeConfig)
@@ -5075,18 +5145,20 @@ var MeasureDistanceMode = class extends GeoJsonEditMode {
     const { lastPointerMoveEvent, modeConfig } = props;
     const { centerTooltipsOnLine = false } = modeConfig || {};
     const positions = this.getClickSequence();
+    const coordSys = getEditModeCoordinateSystem(props.coordinateSystem);
     if (positions.length > 0 && lastPointerMoveEvent && !this._isMeasuringSessionFinished) {
-      const distance7 = this._calculateDistanceForTooltip({
+      const distance6 = this._calculateDistanceForTooltip({
         positionA: positions[positions.length - 1],
         positionB: lastPointerMoveEvent.mapCoords,
-        modeConfig: props.modeConfig
+        modeConfig: props.modeConfig,
+        coordinateSystem: coordSys
       });
-      const tooltipPosition = centerTooltipsOnLine ? (0, import_midpoint.default)(positions[positions.length - 1], lastPointerMoveEvent.mapCoords).geometry.coordinates : lastPointerMoveEvent.mapCoords;
+      const tooltipPosition = centerTooltipsOnLine ? coordSys.midpoint(positions[positions.length - 1], lastPointerMoveEvent.mapCoords) : lastPointerMoveEvent.mapCoords;
       return [
         ...this._currentTooltips,
         {
           position: tooltipPosition,
-          text: this._formatTooltip(this._currentDistance + distance7, modeConfig)
+          text: this._formatTooltip(this._currentDistance + distance6, modeConfig)
         }
       ];
     }