@deck.gl-community/editable-layers 9.2.0-beta.8 → 9.2.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl-community/editable-layers",
   "description": "A suite of 3D-enabled data editing overlays, suitable for deck.gl",
   "license": "MIT",
-  "version": "9.2.0-beta.8",
+  "version": "9.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -36,6 +36,7 @@
     "src"
   ],
   "dependencies": {
+    "@math.gl/web-mercator": ">=4.0.1",
     "@turf/along": "^7.2.0",
     "@turf/area": "^7.2.0",
     "@turf/bbox": "^7.2.0",
@@ -55,6 +56,7 @@
     "@turf/helpers": "^7.2.0",
     "@turf/intersect": "^7.2.0",
     "@turf/invariant": "^7.2.0",
+    "@turf/kinks": "^7.2.0",
     "@turf/line-intersect": "^7.2.0",
     "@turf/meta": "^7.2.0",
     "@turf/midpoint": "^7.2.0",
@@ -62,6 +64,9 @@
     "@turf/point-to-line-distance": "^7.2.0",
     "@turf/polygon-to-line": "^7.2.0",
     "@turf/rewind": "^7.2.0",
+    "@turf/rhumb-bearing": "^7.2.0",
+    "@turf/rhumb-destination": "^7.2.0",
+    "@turf/rhumb-distance": "^7.2.0",
     "@turf/transform-rotate": "^7.2.0",
     "@turf/transform-scale": "^7.2.0",
     "@turf/transform-translate": "^7.2.0",
@@ -71,20 +76,19 @@
     "lodash.omit": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "preact": "^10.17.0",
-    "uuid": "9.0.0",
-    "viewport-mercator-project": ">=6.2.3"
+    "uuid": "9.0.0"
   },
   "peerDependencies": {
     "@deck.gl-community/layers": "^9.2.0-beta",
-    "@deck.gl/core": "~9.2.1",
-    "@deck.gl/extensions": "~9.2.1",
-    "@deck.gl/geo-layers": "~9.2.1",
-    "@deck.gl/layers": "~9.2.1",
-    "@deck.gl/mesh-layers": "~9.2.1",
-    "@luma.gl/constants": "~9.2.0",
-    "@luma.gl/core": "~9.2.0",
-    "@luma.gl/engine": "~9.2.0",
+    "@deck.gl/core": "~9.2.8",
+    "@deck.gl/extensions": "~9.2.8",
+    "@deck.gl/geo-layers": "~9.2.8",
+    "@deck.gl/layers": "~9.2.8",
+    "@deck.gl/mesh-layers": "~9.2.8",
+    "@luma.gl/constants": "~9.2.6",
+    "@luma.gl/core": "~9.2.6",
+    "@luma.gl/engine": "~9.2.6",
     "@math.gl/core": ">=4.0.1"
   },
-  "gitHead": "cc866d0fda6b21627421d6168d2f0abec86ab425"
+  "gitHead": "9cb179aa3d1707f32116034150ab7130ce88b18c"
 }

package/src/edit-modes/draw-90degree-polygon-mode.ts

@@ -19,7 +19,13 @@ import {
   GuideFeatureCollection,
   TentativeFeature
 } from './types';
-import {Polygon, LineString, Position, FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  Polygon,
+  LineString,
+  Position,
+  FeatureCollection,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
 
 export class Draw90DegreePolygonMode extends GeoJsonEditMode {

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

@@ -4,7 +4,12 @@
 
 import distance from '@turf/distance';
 import {memoize} from '../utils/memoize';
-import {LineString, FeatureCollection, Position, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  LineString,
+  FeatureCollection,
+  Position,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {
   ClickEvent,
   PointerMoveEvent,

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

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import lineIntersect from '@turf/line-intersect';
-import { polygon as turfPolygon} from '@turf/helpers';
-import booleanWithin from "@turf/boolean-within";
-import type {Geometry} from 'geojson'
+import {lineIntersect} from '@turf/line-intersect';
+import {polygon as turfPolygon} from '@turf/helpers';
+import {booleanWithin} from '@turf/boolean-within';
+import type {Geometry} from 'geojson';
+import {kinks} from '@turf/kinks';
 
 import {
   ClickEvent,
@@ -19,82 +20,76 @@ import {
 import {Position, FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
 import {getPickedEditHandle} from './utils';
 import {GeoJsonEditMode} from './geojson-edit-mode';
-import { ImmutableFeatureCollection } from './immutable-feature-collection';
-
+import {ImmutableFeatureCollection} from './immutable-feature-collection';
 
 export class DrawPolygonMode extends GeoJsonEditMode {
-
-  holeSequence: Position[] = [];  
+  holeSequence: Position[] = [];
   isDrawingHole = false;
 
   createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
-    const { lastPointerMoveEvent } = props;
+    const {lastPointerMoveEvent} = props;
     const clickSequence = this.getClickSequence();
     const holeSequence = this.holeSequence;
-    const lastCoords = lastPointerMoveEvent
-      ? [lastPointerMoveEvent.mapCoords]
-      : [];
+    const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
 
     let geometry: Geometry;
 
     if (this.isDrawingHole && holeSequence.length > 1) {
       geometry = {
-        type: "Polygon",
+        type: 'Polygon',
         coordinates: [
           [...clickSequence, clickSequence[0]],
-          [...holeSequence, ...lastCoords, holeSequence[0]],
-        ],
+          [...holeSequence, ...lastCoords, holeSequence[0]]
+        ]
       };
     } else if (clickSequence.length > 2) {
       geometry = {
-        type: "Polygon",
-        coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]],
+        type: 'Polygon',
+        coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]]
       };
     } else {
       geometry = {
-        type: "LineString",
-        coordinates: [...clickSequence, ...lastCoords],
+        type: 'LineString',
+        coordinates: [...clickSequence, ...lastCoords]
       };
     }
 
     return {
-      type: "Feature",
+      type: 'Feature',
       properties: {
-        guideType: "tentative",
+        guideType: 'tentative'
       },
-      geometry,
+      geometry
     };
   }
 
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
     const guides: GuideFeatureCollection = {
-          type: "FeatureCollection",
-          features: [],
-        };
-    
-        const tentative = this.createTentativeFeature(props);
-        if (tentative) guides.features.push(tentative);
-    
-        const sequence = this.isDrawingHole
-          ? this.holeSequence
-          : this.getClickSequence();
-    
-        const handles: GuideFeature[] = sequence.map((coord, index) => ({
-          type: "Feature",
-          properties: {
-            guideType: "editHandle",
-            editHandleType: "existing",
-            featureIndex: -1,
-            positionIndexes: [index],
-          },
-          geometry: {
-            type: "Point",
-            coordinates: coord,
-          },
-        }));
-    
-        guides.features.push(...handles);
-        return guides;
+      type: 'FeatureCollection',
+      features: []
+    };
+
+    const tentative = this.createTentativeFeature(props);
+    if (tentative) guides.features.push(tentative);
+
+    const sequence = this.isDrawingHole ? this.holeSequence : this.getClickSequence();
+
+    const handles: GuideFeature[] = sequence.map((coord, index) => ({
+      type: 'Feature',
+      properties: {
+        guideType: 'editHandle',
+        editHandleType: 'existing',
+        featureIndex: -1,
+        positionIndexes: [index]
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: coord
+      }
+    }));
+
+    guides.features.push(...handles);
+    return guides;
   }
 
   // eslint-disable-next-line complexity, max-statements
@@ -103,7 +98,7 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     const clickedEditHandle = getPickedEditHandle(picks);
     const clickSequence = this.getClickSequence();
     const coords = event.mapCoords;
-    
+
     // Check if they clicked on an edit handle to complete the polygon
     if (
       !this.isDrawingHole &&
@@ -117,7 +112,7 @@ export class DrawPolygonMode extends GeoJsonEditMode {
       this.finishDrawing(props);
       return;
     }
-    
+
     // Check if they clicked near the first point to complete the polygon
     if (!this.isDrawingHole && clickSequence.length > 2) {
       if (isNearFirstPoint(coords, clickSequence[0])) {
@@ -126,28 +121,25 @@ export class DrawPolygonMode extends GeoJsonEditMode {
         return;
       }
     }
-    
+
     if (this.isDrawingHole) {
       const current = this.holeSequence;
       current.push(coords);
 
       if (current.length > 2) {
         const poly: Geometry = {
-          type: "Polygon",
+          type: 'Polygon',
           coordinates: [
             [...clickSequence, clickSequence[0]],
-            [...current, current[0]],
-          ],
+            [...current, current[0]]
+          ]
         };
 
         this.resetClickSequence();
         this.holeSequence = [];
         this.isDrawingHole = false;
 
-        const editAction = this.getAddFeatureOrBooleanPolygonAction(
-          poly,
-          props,
-        );
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(poly, props);
         if (editAction) props.onEdit(editAction);
       }
       return;
@@ -179,18 +171,18 @@ export class DrawPolygonMode extends GeoJsonEditMode {
   }
 
   handleKeyUp(event: KeyboardEvent, props: ModeProps<SimpleFeatureCollection>) {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       this.finishDrawing(props);
       this.resetClickSequence();
-    } else if (event.key === "Escape") {
+    } else if (event.key === 'Escape') {
       this.resetClickSequence();
       this.holeSequence = [];
       this.isDrawingHole = false;
 
       props.onEdit({
         updatedData: props.data,
-        editType: "cancelFeature",
-        editContext: {},
+        editType: 'cancelFeature',
+        editContext: {}
       });
     }
   }
@@ -210,27 +202,16 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     const canAddHole = canAddHoleToPolygon(props);
     const canOverlap = canPolygonOverlap(props);
 
-
     // Check if the polygon intersects itself (excluding shared start/end point)
     if (!canOverlap) {
-      const overlapping = lineIntersect(
-        newPolygon,
-        newPolygon,
-      ).features.filter(
-        (intersection) =>
-          !newPolygon.geometry.coordinates[0].some(
-            (coord) =>
-              coord[0] === intersection.geometry.coordinates[0] &&
-              coord[1] === intersection.geometry.coordinates[1],
-          ),
-      );
-  
+      const overlapping = kinks(newPolygon).features;
+
       if (overlapping.length > 0) {
         // ❌ Invalid polygon: overlaps
         props.onEdit({
           updatedData: props.data,
-          editType: "invalidPolygon",
-          editContext: { reason: "overlaps" },
+          editType: 'invalidPolygon',
+          editContext: {reason: 'overlaps'}
         });
         this.resetClickSequence();
         return;
@@ -244,14 +225,14 @@ export class DrawPolygonMode extends GeoJsonEditMode {
         return;
       }
     }
-    
+
     // If no valid hole was found, add the polygon as a new feature
     const editAction = this.getAddFeatureOrBooleanPolygonAction(
       {
-        type: "Polygon",
-        coordinates: [[...this.getClickSequence(), this.getClickSequence()[0]]],
+        type: 'Polygon',
+        coordinates: [[...this.getClickSequence(), this.getClickSequence()[0]]]
       },
-      props,
+      props
     );
     if (editAction) props.onEdit(editAction);
     this.resetClickSequence();
@@ -262,17 +243,23 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     newPolygon: any,
     polygon: Position[],
     props: ModeProps<SimpleFeatureCollection>
-  ): { handled: boolean } {
+  ): {handled: boolean} {
     for (const [featureIndex, feature] of props.data.features.entries()) {
-      if (feature.geometry.type === "Polygon") {
-        const result = this.validateAndCreateHole(feature, featureIndex, newPolygon, polygon, props);
+      if (feature.geometry.type === 'Polygon') {
+        const result = this.validateAndCreateHole(
+          feature,
+          featureIndex,
+          newPolygon,
+          polygon,
+          props
+        );
         if (result.handled) {
           return result;
         }
       }
     }
-    
-    return { handled: false };
+
+    return {handled: false};
   }
 
   private validateAndCreateHole(
@@ -281,30 +268,30 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     newPolygon: any,
     polygon: Position[],
     props: ModeProps<SimpleFeatureCollection>
-  ): { handled: boolean } {
+  ): {handled: boolean} {
     const outer = turfPolygon(feature.geometry.coordinates);
 
     // Check existing holes for conflicts
     for (let i = 1; i < feature.geometry.coordinates.length; i++) {
       const hole = turfPolygon([feature.geometry.coordinates[i]]);
       const intersection = lineIntersect(hole, newPolygon);
-      
+
       if (intersection.features.length > 0) {
         props.onEdit({
           updatedData: props.data,
-          editType: "invalidHole",
-          editContext: { reason: "intersects-existing-hole" },
+          editType: 'invalidHole',
+          editContext: {reason: 'intersects-existing-hole'}
         });
-        return { handled: true };
+        return {handled: true};
       }
 
       if (booleanWithin(hole, newPolygon) || booleanWithin(newPolygon, hole)) {
         props.onEdit({
           updatedData: props.data,
-          editType: "invalidHole",
-          editContext: { reason: "contains-or-contained-by-existing-hole" },
+          editType: 'invalidHole',
+          editContext: {reason: 'contains-or-contained-by-existing-hole'}
         });
-        return { handled: true };
+        return {handled: true};
       }
     }
 
@@ -313,19 +300,19 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     if (intersectionWithOuter.features.length > 0) {
       props.onEdit({
         updatedData: props.data,
-        editType: "invalidPolygon",
-        editContext: { reason: "intersects-existing-polygon" },
+        editType: 'invalidPolygon',
+        editContext: {reason: 'intersects-existing-polygon'}
       });
-      return { handled: true };
+      return {handled: true};
     }
 
     if (booleanWithin(outer, newPolygon)) {
       props.onEdit({
         updatedData: props.data,
-        editType: "invalidPolygon",
-        editContext: { reason: "contains-existing-polygon" },
+        editType: 'invalidPolygon',
+        editContext: {reason: 'contains-existing-polygon'}
       });
-      return { handled: true };
+      return {handled: true};
     }
 
     // Check if new polygon is within outer polygon (valid hole)
@@ -333,45 +320,37 @@ export class DrawPolygonMode extends GeoJsonEditMode {
       const updatedData = new ImmutableFeatureCollection(props.data)
         .replaceGeometry(featureIndex, {
           ...feature.geometry,
-          coordinates: [...feature.geometry.coordinates, polygon],
+          coordinates: [...feature.geometry.coordinates, polygon]
         })
         .getObject();
 
       props.onEdit({
         updatedData,
-        editType: "addHole",
-        editContext: { hole: newPolygon.geometry },
+        editType: 'addHole',
+        editContext: {hole: newPolygon.geometry}
       });
-      return { handled: true };
+      return {handled: true};
     }
-    return { handled: false };
+    return {handled: false};
   }
 }
 
 // Helper function to check if a point is near the first point in the sequence
-function isNearFirstPoint(
-  click: Position,
-  first: Position,
-  threshold = 1e-4,
-): boolean {
+function isNearFirstPoint(click: Position, first: Position, threshold = 1e-4): boolean {
   const dx = click[0] - first[0];
   const dy = click[1] - first[1];
   return dx * dx + dy * dy < threshold * threshold;
 }
 
 // Helper function to determine if a hole can be added to a polygon
-function canAddHoleToPolygon(
-  props: ModeProps<FeatureCollection>
-): boolean {
+function canAddHoleToPolygon(props: ModeProps<FeatureCollection>): boolean {
   // For simplicity, always return true in this example.
   // Implement your own logic based on application requirements.
   return props.modeConfig?.allowHoles ?? false;
 }
 
 // Helper function to determine if a polygon can intersect itself
-function canPolygonOverlap(
-  props: ModeProps<FeatureCollection>
-): boolean {
+function canPolygonOverlap(props: ModeProps<FeatureCollection>): boolean {
   // Return the value of allowSelfIntersection (defaults to false for safety)
   return props.modeConfig?.allowSelfIntersection ?? false;
 }

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

@@ -34,7 +34,6 @@ export class DrawSquareMode extends TwoClickPolygonMode {
     square.properties = square.properties || {};
     square.properties.shape = 'Square';
 
-
     return square;
   }
 }

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

@@ -2,13 +2,20 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Position, LineString, FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  Position,
+  LineString,
+  FeatureCollection,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection} from './types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
 import {ImmutableFeatureCollection} from './immutable-feature-collection';
 
 export class ExtendLineStringMode extends GeoJsonEditMode {
-  getSingleSelectedLineString(props: ModeProps<SimpleFeatureCollection>): LineString | null | undefined {
+  getSingleSelectedLineString(
+    props: ModeProps<SimpleFeatureCollection>
+  ): LineString | null | undefined {
     const selectedGeometry = this.getSelectedGeometry(props);
 
     if (selectedGeometry && selectedGeometry.type === 'LineString') {

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

@@ -21,7 +21,15 @@ import {
   GuideFeatureCollection,
   TentativeFeature
 } from './types';
-import {FeatureCollection, Feature, Polygon, SimpleGeometry, Position, SimpleFeatureCollection, SimpleFeature} from '../utils/geojson-types';
+import {
+  FeatureCollection,
+  Feature,
+  Polygon,
+  SimpleGeometry,
+  Position,
+  SimpleFeatureCollection,
+  SimpleFeature
+} from '../utils/geojson-types';
 import {getPickedEditHandles, getNonGuidePicks} from './utils';
 import {EditMode} from './edit-mode';
 import {ImmutableFeatureCollection} from './immutable-feature-collection';
@@ -59,7 +67,9 @@ export class GeoJsonEditMode implements EditMode<FeatureCollection, GuideFeature
     return null;
   }
 
-  getSelectedGeometry(props: ModeProps<SimpleFeatureCollection>): SimpleGeometry | null | undefined {
+  getSelectedGeometry(
+    props: ModeProps<SimpleFeatureCollection>
+  ): SimpleGeometry | null | undefined {
     const feature = this.getSelectedFeature(props);
     if (feature) {
       return feature.geometry;
@@ -67,7 +77,9 @@ export class GeoJsonEditMode implements EditMode<FeatureCollection, GuideFeature
     return null;
   }
 
-  getSelectedFeaturesAsFeatureCollection(props: ModeProps<SimpleFeatureCollection>): SimpleFeatureCollection {
+  getSelectedFeaturesAsFeatureCollection(
+    props: ModeProps<SimpleFeatureCollection>
+  ): SimpleFeatureCollection {
     const {features} = props.data;
     const selectedFeatures = props.selectedIndexes.map((selectedIndex) => features[selectedIndex]);
     return {

package/src/edit-modes/immutable-feature-collection.ts

@@ -9,7 +9,7 @@ import {
   MultiLineString,
   MultiPolygon,
   Position,
-  SimpleFeature,
+  SimpleFeature
 } from '../utils/geojson-types';
 
 export class ImmutableFeatureCollection {

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

@@ -16,7 +16,14 @@ import {
   NearestPointType,
   shouldCancelPan
 } from './utils';
-import {LineString, Point, Polygon, FeatureCollection, Feature, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  LineString,
+  Point,
+  Polygon,
+  FeatureCollection,
+  Feature,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {
   ModeProps,
   ClickEvent,
@@ -76,7 +83,6 @@ export class ModifyMode extends GeoJsonEditMode {
           (lineString, prefix) => {
             const lineStringFeature = toLineString(lineString);
             const candidateIntermediatePoint = this.getNearestPoint(
-
               lineStringFeature,
               referencePoint,
               props.modeConfig && props.modeConfig.viewport
@@ -144,27 +150,33 @@ export class ModifyMode extends GeoJsonEditMode {
     const pickedIntermediateHandle = getPickedIntermediateEditHandle(event.picks);
 
     if (pickedExistingHandle) {
-      const { featureIndex, positionIndexes } = pickedExistingHandle.properties;
+      const {featureIndex, positionIndexes} = pickedExistingHandle.properties;
 
-      let updatedData;
-      try {
-        updatedData = new ImmutableFeatureCollection(props.data)
-          .removePosition(featureIndex, positionIndexes)
-          .getObject();
-      } catch (ignored) {
-        // This happens if user attempts to remove the last point
-      }
+      const feature = props.data.features[featureIndex];
+      const canRemovePosition = !(
+        props.modeConfig?.lockRectangles && feature?.properties.shape === 'Rectangle'
+      );
+      if (canRemovePosition) {
+        let updatedData;
+        try {
+          updatedData = new ImmutableFeatureCollection(props.data)
+            .removePosition(featureIndex, positionIndexes)
+            .getObject();
+        } catch (ignored) {
+          // This happens if user attempts to remove the last point
+        }
 
-      if (updatedData) {
-        props.onEdit({
-          updatedData,
-          editType: 'removePosition',
-          editContext: {
-            featureIndexes: [featureIndex],
-            positionIndexes,
-            position: pickedExistingHandle.geometry.coordinates
-          }
-        });
+        if (updatedData) {
+          props.onEdit({
+            updatedData,
+            editType: 'removePosition',
+            editContext: {
+              featureIndexes: [featureIndex],
+              positionIndexes,
+              position: pickedExistingHandle.geometry.coordinates
+            }
+          });
+        }
       }
     } else if (pickedIntermediateHandle) {
       const {featureIndex, positionIndexes} = pickedIntermediateHandle.properties;