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

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

@@ -3,7 +3,10 @@
 // Copyright (c) vis.gl contributors
 
 import lineIntersect from '@turf/line-intersect';
-import {lineString as turfLineString} from '@turf/helpers';
+import { polygon as turfPolygon} from '@turf/helpers';
+import booleanWithin from "@turf/boolean-within";
+import type {Geometry} from 'geojson'
+
 import {
   ClickEvent,
   PointerMoveEvent,
@@ -13,129 +16,151 @@ import {
   GuideFeature,
   DoubleClickEvent
 } from './types';
-import {Polygon, FeatureCollection} from '../utils/geojson-types';
+import {Position, FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
 import {getPickedEditHandle} from './utils';
 import {GeoJsonEditMode} from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+
 
 export class DrawPolygonMode extends GeoJsonEditMode {
+
+  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 tentativeFeature;
-    if (clickSequence.length === 1 || clickSequence.length === 2) {
-      tentativeFeature = {
-        type: 'Feature',
-        properties: {
-          guideType: 'tentative'
-        },
-        geometry: {
-          type: 'LineString',
-          coordinates: [...clickSequence, ...lastCoords]
-        }
+    let geometry: Geometry;
+
+    if (this.isDrawingHole && holeSequence.length > 1) {
+      geometry = {
+        type: "Polygon",
+        coordinates: [
+          [...clickSequence, clickSequence[0]],
+          [...holeSequence, ...lastCoords, holeSequence[0]],
+        ],
       };
     } else if (clickSequence.length > 2) {
-      tentativeFeature = {
-        type: 'Feature',
-        properties: {
-          guideType: 'tentative'
-        },
-        geometry: {
-          type: 'Polygon',
-          coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]]
-        }
+      geometry = {
+        type: "Polygon",
+        coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]],
+      };
+    } else {
+      geometry = {
+        type: "LineString",
+        coordinates: [...clickSequence, ...lastCoords],
       };
     }
 
-    return tentativeFeature;
+    return {
+      type: "Feature",
+      properties: {
+        guideType: "tentative",
+      },
+      geometry,
+    };
   }
 
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
-    const clickSequence = this.getClickSequence();
-
     const guides: GuideFeatureCollection = {
-      type: 'FeatureCollection',
-      features: []
-    };
-
-    const tentativeFeature = this.createTentativeFeature(props);
-    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;
+          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;
   }
 
-  finishDrawing(props: ModeProps<FeatureCollection>) {
+  // eslint-disable-next-line complexity, max-statements
+  handleClick(event: ClickEvent, props: ModeProps<SimpleFeatureCollection>) {
+    const {picks} = event;
+    const clickedEditHandle = getPickedEditHandle(picks);
     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);
+    const coords = event.mapCoords;
+    
+    // Check if they clicked on an edit handle to complete the polygon
+    if (
+      !this.isDrawingHole &&
+      clickSequence.length > 2 &&
+      clickedEditHandle &&
+      Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+      (clickedEditHandle.properties.positionIndexes[0] === 0 ||
+        clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)
+    ) {
+      // They clicked the first or last point, so complete the polygon
+      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])) {
+        this.finishDrawing(props);
+        this.resetClickSequence();
+        return;
       }
     }
-  }
+    
+    if (this.isDrawingHole) {
+      const current = this.holeSequence;
+      current.push(coords);
 
-  // eslint-disable-next-line complexity
-  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
-    const {picks} = event;
-    const clickedEditHandle = getPickedEditHandle(picks);
-    const clickSequence = this.getClickSequence();
+      if (current.length > 2) {
+        const poly: Geometry = {
+          type: "Polygon",
+          coordinates: [
+            [...clickSequence, clickSequence[0]],
+            [...current, current[0]],
+          ],
+        };
 
-    let overlappingLines = false;
-    if (clickSequence.length > 2 && props.modeConfig && props.modeConfig.preventOverlappingLines) {
-      const currentLine = turfLineString([
-        clickSequence[clickSequence.length - 1],
-        event.mapCoords
-      ]);
-      const otherLines = turfLineString([...clickSequence.slice(0, clickSequence.length - 1)]);
-      const intersectingPoints = lineIntersect(currentLine, otherLines);
-      if (intersectingPoints.features.length > 0) {
-        overlappingLines = true;
+        this.resetClickSequence();
+        this.holeSequence = [];
+        this.isDrawingHole = false;
+
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(
+          poly,
+          props,
+        );
+        if (editAction) props.onEdit(editAction);
       }
+      return;
     }
 
+    // Add the click if we didn't click on a handle
     let positionAdded = false;
-    if (!clickedEditHandle && !overlappingLines) {
-      // Don't add another point right next to an existing one
+    if (!clickedEditHandle) {
       this.addClickSequence(event);
       positionAdded = true;
     }
 
-    if (
-      clickSequence.length > 2 &&
-      clickedEditHandle &&
-      Array.isArray(clickedEditHandle.properties.positionIndexes) &&
-      (clickedEditHandle.properties.positionIndexes[0] === 0 ||
-        clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)
-    ) {
-      // They clicked the first or last point (or double-clicked), so complete the polygon
-      this.finishDrawing(props);
-    } else if (positionAdded) {
+    if (positionAdded) {
       // new tentative point
       props.onEdit({
         // data is the same
@@ -148,20 +173,24 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     }
   }
 
-  handleDoubleClick(event: DoubleClickEvent, props: ModeProps<FeatureCollection>) {
+  handleDoubleClick(_event: DoubleClickEvent, props: ModeProps<SimpleFeatureCollection>) {
     this.finishDrawing(props);
+    this.resetClickSequence();
   }
 
-  handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>) {
-    if (event.key === 'Enter') {
+  handleKeyUp(event: KeyboardEvent, props: ModeProps<SimpleFeatureCollection>) {
+    if (event.key === "Enter") {
       this.finishDrawing(props);
-    } else if (event.key === 'Escape') {
       this.resetClickSequence();
+    } else if (event.key === "Escape") {
+      this.resetClickSequence();
+      this.holeSequence = [];
+      this.isDrawingHole = false;
+
       props.onEdit({
-        // Because the new drawing feature is dropped, so the data will keep as the same.
         updatedData: props.data,
-        editType: 'cancelFeature',
-        editContext: {}
+        editType: "cancelFeature",
+        editContext: {},
       });
     }
   }
@@ -170,4 +199,179 @@ export class DrawPolygonMode extends GeoJsonEditMode {
     props.onUpdateCursor('cell');
     super.handlePointerMove(event, props);
   }
+
+  // eslint-disable-next-line max-statements, complexity
+  finishDrawing(props: ModeProps<SimpleFeatureCollection>) {
+    const clickSequence = this.getClickSequence();
+    const polygon = [...clickSequence, clickSequence[0]];
+
+    const newPolygon = turfPolygon([polygon]);
+
+    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],
+          ),
+      );
+  
+      if (overlapping.length > 0) {
+        // ❌ Invalid polygon: overlaps
+        props.onEdit({
+          updatedData: props.data,
+          editType: "invalidPolygon",
+          editContext: { reason: "overlaps" },
+        });
+        this.resetClickSequence();
+        return;
+      }
+    }
+
+    if (canAddHole) {
+      const holeResult = this.tryAddHoleToExistingPolygon(newPolygon, polygon, props);
+      if (holeResult.handled) {
+        this.resetClickSequence();
+        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]]],
+      },
+      props,
+    );
+    if (editAction) props.onEdit(editAction);
+    this.resetClickSequence();
+    return;
+  }
+
+  private tryAddHoleToExistingPolygon(
+    newPolygon: any,
+    polygon: Position[],
+    props: ModeProps<SimpleFeatureCollection>
+  ): { 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 (result.handled) {
+          return result;
+        }
+      }
+    }
+    
+    return { handled: false };
+  }
+
+  private validateAndCreateHole(
+    feature: any,
+    featureIndex: number,
+    newPolygon: any,
+    polygon: Position[],
+    props: ModeProps<SimpleFeatureCollection>
+  ): { 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" },
+        });
+        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" },
+        });
+        return { handled: true };
+      }
+    }
+
+    // Check outer polygon conflicts
+    const intersectionWithOuter = lineIntersect(outer, newPolygon);
+    if (intersectionWithOuter.features.length > 0) {
+      props.onEdit({
+        updatedData: props.data,
+        editType: "invalidPolygon",
+        editContext: { reason: "intersects-existing-polygon" },
+      });
+      return { handled: true };
+    }
+
+    if (booleanWithin(outer, newPolygon)) {
+      props.onEdit({
+        updatedData: props.data,
+        editType: "invalidPolygon",
+        editContext: { reason: "contains-existing-polygon" },
+      });
+      return { handled: true };
+    }
+
+    // Check if new polygon is within outer polygon (valid hole)
+    if (booleanWithin(newPolygon, outer)) {
+      const updatedData = new ImmutableFeatureCollection(props.data)
+        .replaceGeometry(featureIndex, {
+          ...feature.geometry,
+          coordinates: [...feature.geometry.coordinates, polygon],
+        })
+        .getObject();
+
+      props.onEdit({
+        updatedData,
+        editType: "addHole",
+        editContext: { hole: newPolygon.geometry },
+      });
+      return { handled: true };
+    }
+    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 {
+  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 {
+  // 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 {
+  // Return the value of allowSelfIntersection (defaults to false for safety)
+  return props.modeConfig?.allowSelfIntersection ?? false;
 }

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

@@ -3,11 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 import bboxPolygon from '@turf/bbox-polygon';
-import {Position, Polygon, FeatureOf} from '../utils/geojson-types';
+import {Position, Polygon, Feature} from '../utils/geojson-types';
 import {TwoClickPolygonMode} from './two-click-polygon-mode';
 
 export class DrawRectangleFromCenterMode extends TwoClickPolygonMode {
-  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): Feature<Polygon> {
     const longitude =
       coord1[0] > coord2[0]
         ? coord1[0] + Math.abs(coord1[0] - coord2[0])
@@ -21,7 +21,6 @@ export class DrawRectangleFromCenterMode extends TwoClickPolygonMode {
     rectangle.properties = rectangle.properties || {};
     rectangle.properties.shape = 'Rectangle';
 
-    // @ts-expect-error turf typing too wide
     return rectangle;
   }
 }

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

@@ -3,16 +3,15 @@
 // Copyright (c) vis.gl contributors
 
 import bboxPolygon from '@turf/bbox-polygon';
-import {Position, Polygon, FeatureOf} from '../utils/geojson-types';
+import {Position, Polygon, Feature} from '../utils/geojson-types';
 import {TwoClickPolygonMode} from './two-click-polygon-mode';
 
 export class DrawRectangleMode extends TwoClickPolygonMode {
-  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): Feature<Polygon> {
     const rectangle = bboxPolygon([coord1[0], coord1[1], coord2[0], coord2[1]]);
     rectangle.properties = rectangle.properties || {};
     rectangle.properties.shape = 'Rectangle';
 
-    // @ts-expect-error turf typing too wide
     return rectangle;
   }
 }

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

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {generatePointsParallelToLinePoints} from './utils';
-import {Position, Polygon, FeatureOf} from '../utils/geojson-types';
+import {Position, Polygon, Feature} from '../utils/geojson-types';
 import {ThreeClickPolygonMode} from './three-click-polygon-mode';
 
 export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
@@ -12,7 +12,7 @@ export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
     coord2: Position,
     coord3: Position,
     modeConfig: any
-  ): FeatureOf<Polygon> | null | undefined {
+  ): Feature<Polygon> | null | undefined {
     const [p3, p4] = generatePointsParallelToLinePoints(coord1, coord2, coord3);
 
     return {

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

@@ -6,11 +6,11 @@ import bboxPolygon from '@turf/bbox-polygon';
 import turfDistance from '@turf/distance';
 import turfAlong from '@turf/along';
 import {point, lineString as turfLineString} from '@turf/helpers';
-import {Position, Polygon, FeatureOf} from '../utils/geojson-types';
+import {Position, Polygon, Feature} from '../utils/geojson-types';
 import {TwoClickPolygonMode} from './two-click-polygon-mode';
 
 export class DrawSquareFromCenterMode extends TwoClickPolygonMode {
-  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): Feature<Polygon> {
     // get the coordinates of the other two rectangle vertices
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
@@ -44,7 +44,6 @@ export class DrawSquareFromCenterMode extends TwoClickPolygonMode {
     square.properties = square.properties || {};
     square.properties.shape = 'Square';
 
-    // @ts-expect-error turf typing too wide
     return square;
   }
 }

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

@@ -6,11 +6,11 @@ import bboxPolygon from '@turf/bbox-polygon';
 import turfDistance from '@turf/distance';
 import turfAlong from '@turf/along';
 import {point, lineString as turfLineString} from '@turf/helpers';
-import {Position, Polygon, FeatureOf} from '../utils/geojson-types';
+import {Position, Polygon, Feature} from '../utils/geojson-types';
 import {TwoClickPolygonMode} from './two-click-polygon-mode';
 
 export class DrawSquareMode extends TwoClickPolygonMode {
-  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
+  getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): Feature<Polygon> {
     // get the coordinates of the other two rectangle vertices
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
@@ -34,7 +34,7 @@ export class DrawSquareMode extends TwoClickPolygonMode {
     square.properties = square.properties || {};
     square.properties.shape = 'Square';
 
-    // @ts-expect-error turf types too wide
+
     return square;
   }
 }

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

@@ -3,11 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 import {StartDraggingEvent, ModeProps} from './types';
-import {FeatureCollection} from '../utils/geojson-types';
+import {FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
 import {TranslateMode} from './translate-mode';
 
 export class DuplicateMode extends TranslateMode {
-  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>) {
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<SimpleFeatureCollection>) {
     super.handleStartDragging(event, props);
 
     if (this._geometryBeforeTranslate) {

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

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Position, LineString, FeatureCollection} 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<FeatureCollection>): LineString | null | undefined {
+  getSingleSelectedLineString(props: ModeProps<SimpleFeatureCollection>): LineString | null | undefined {
     const selectedGeometry = this.getSelectedGeometry(props);
 
     if (selectedGeometry && selectedGeometry.type === 'LineString') {
@@ -17,7 +17,7 @@ export class ExtendLineStringMode extends GeoJsonEditMode {
     return null;
   }
 
-  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+  handleClick(event: ClickEvent, props: ModeProps<SimpleFeatureCollection>) {
     const {selectedIndexes} = props;
     const selectedLineString = this.getSingleSelectedLineString(props);
 
@@ -49,7 +49,7 @@ export class ExtendLineStringMode extends GeoJsonEditMode {
     });
   }
 
-  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+  getGuides(props: ModeProps<SimpleFeatureCollection>): GuideFeatureCollection {
     const guides: GuideFeatureCollection = {
       type: 'FeatureCollection',
       features: []