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

package/dist/edit-modes/rotate-mode.js

@@ -0,0 +1,151 @@
+import bbox from '@turf/bbox';
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import bboxPolygon from '@turf/bbox-polygon';
+import turfDistance from '@turf/distance';
+import { coordEach } from '@turf/meta';
+import { getGeom } from '@turf/invariant';
+import { point, featureCollection, lineString } from '@turf/helpers';
+import turfTransformRotate from '@turf/transform-rotate';
+import polygonToLine from '@turf/polygon-to-line';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode, getIntermediatePosition } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class RotateMode extends GeoJsonEditMode {
+    _selectedEditHandle;
+    _geometryBeingRotated;
+    _isRotating = false;
+    _isSinglePointGeometrySelected = (geometry) => {
+        const { features } = geometry || {};
+        if (Array.isArray(features) && features.length === 1) {
+            // @ts-expect-error turf type diff
+            const { type } = getGeom(features[0]);
+            return type === 'Point';
+        }
+        return false;
+    };
+    getIsRotating = () => this._isRotating;
+    getGuides(props) {
+        const selectedGeometry = this._geometryBeingRotated || this.getSelectedFeaturesAsFeatureCollection(props);
+        if (this._isSinglePointGeometrySelected(selectedGeometry)) {
+            return { type: 'FeatureCollection', features: [] };
+        }
+        if (this._isRotating) {
+            // Display rotate pivot
+            // @ts-expect-error turf types diff
+            return featureCollection([turfCentroid(selectedGeometry)]);
+        }
+        const boundingBox = bboxPolygon(bbox(selectedGeometry));
+        let previousCoord = null;
+        let topEdgeMidpointCoords = null;
+        let longestEdgeLength = 0;
+        coordEach(boundingBox, (coord) => {
+            if (previousCoord) {
+                const edgeMidpoint = getIntermediatePosition(coord, previousCoord);
+                if (!topEdgeMidpointCoords || edgeMidpoint[1] > topEdgeMidpointCoords[1]) {
+                    // Get the top edge midpoint of the enveloping box
+                    topEdgeMidpointCoords = edgeMidpoint;
+                }
+                // Get the length of the longest edge of the enveloping box
+                const edgeDistance = turfDistance(coord, previousCoord);
+                longestEdgeLength = Math.max(longestEdgeLength, edgeDistance);
+            }
+            previousCoord = coord;
+        });
+        // Scale the length of the line between the rotate handler and the enveloping box
+        // relative to the length of the longest edge of the enveloping box
+        const rotateHandleCoords = topEdgeMidpointCoords && [
+            topEdgeMidpointCoords[0],
+            topEdgeMidpointCoords[1] + longestEdgeLength / 1000,
+        ];
+        const lineFromEnvelopeToRotateHandle = lineString([topEdgeMidpointCoords, rotateHandleCoords]);
+        const rotateHandle = point(rotateHandleCoords, {
+            guideType: 'editHandle',
+            editHandleType: 'rotate',
+        });
+        const outFeatures = [polygonToLine(boundingBox), rotateHandle, lineFromEnvelopeToRotateHandle];
+        // @ts-expect-error turf type diff
+        return featureCollection(outFeatures);
+    }
+    handleDragging(event, props) {
+        if (!this._isRotating) {
+            return;
+        }
+        const rotateAction = this.getRotateAction(event.pointerDownMapCoords, event.mapCoords, 'rotating', props);
+        if (rotateAction) {
+            props.onEdit(rotateAction);
+        }
+        event.cancelPan();
+    }
+    handlePointerMove(event, props) {
+        if (!this._isRotating) {
+            const selectedEditHandle = getPickedEditHandle(event.picks);
+            this._selectedEditHandle =
+                selectedEditHandle && selectedEditHandle.properties.editHandleType === 'rotate'
+                    ? selectedEditHandle
+                    : null;
+        }
+        this.updateCursor(props);
+    }
+    handleStartDragging(event, props) {
+        if (this._selectedEditHandle) {
+            this._isRotating = true;
+            this._geometryBeingRotated = this.getSelectedFeaturesAsFeatureCollection(props);
+        }
+    }
+    handleStopDragging(event, props) {
+        if (this._isRotating) {
+            // Rotate the geometry
+            const rotateAction = this.getRotateAction(event.pointerDownMapCoords, event.mapCoords, 'rotated', props);
+            if (rotateAction) {
+                props.onEdit(rotateAction);
+            }
+            this._geometryBeingRotated = null;
+            this._selectedEditHandle = null;
+            this._isRotating = false;
+        }
+    }
+    updateCursor(props) {
+        if (this._selectedEditHandle) {
+            // TODO: look at doing SVG cursors to get a better "rotate" cursor
+            props.onUpdateCursor('crosshair');
+        }
+        else {
+            props.onUpdateCursor(null);
+        }
+    }
+    getRotateAction(startDragPoint, currentPoint, editType, props) {
+        if (!this._geometryBeingRotated) {
+            return null;
+        }
+        // @ts-expect-error turf types diff
+        const centroid = turfCentroid(this._geometryBeingRotated);
+        // @ts-expect-error turf types diff
+        const angle = getRotationAngle(centroid, startDragPoint, currentPoint);
+        // @ts-expect-error turf types too wide
+        const rotatedFeatures = turfTransformRotate(
+        // @ts-expect-error turf types too wide
+        this._geometryBeingRotated, angle, {
+            pivot: centroid,
+        });
+        let updatedData = new ImmutableFeatureCollection(props.data);
+        const selectedIndexes = props.selectedIndexes;
+        for (let i = 0; i < selectedIndexes.length; i++) {
+            const selectedIndex = selectedIndexes[i];
+            const movedFeature = rotatedFeatures.features[i];
+            updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+        }
+        return {
+            updatedData: updatedData.getObject(),
+            editType,
+            editContext: {
+                featureIndexes: selectedIndexes,
+            },
+        };
+    }
+}
+function getRotationAngle(centroid, startDragPoint, currentPoint) {
+    const bearing1 = turfBearing(centroid, startDragPoint);
+    const bearing2 = turfBearing(centroid, currentPoint);
+    return bearing2 - bearing1;
+}

package/dist/edit-modes/scale-mode.d.ts

@@ -0,0 +1,27 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { ModeProps, PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, EditHandleFeature, GuideFeatureCollection } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class ScaleMode extends GeoJsonEditMode {
+    _geometryBeingScaled: FeatureCollection | null | undefined;
+    _selectedEditHandle: EditHandleFeature | null | undefined;
+    _cornerGuidePoints: Array<EditHandleFeature>;
+    _cursor: string | null | undefined;
+    _isScaling: boolean;
+    _isSinglePointGeometrySelected: (geometry: FeatureCollection | null | undefined) => boolean;
+    _getOppositeScaleHandle: (selectedHandle: EditHandleFeature) => EditHandleFeature | null;
+    _getUpdatedData: (props: ModeProps<FeatureCollection>, editedData: FeatureCollection) => FeatureCollection;
+    isEditHandleSelected: () => boolean;
+    getScaleAction: (startDragPoint: Position, currentPoint: Position, editType: string, props: ModeProps<FeatureCollection>) => {
+        updatedData: FeatureCollection;
+        editType: string;
+        editContext: {
+            featureIndexes: number[];
+        };
+    };
+    updateCursor: (props: ModeProps<FeatureCollection>) => void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+}

package/dist/edit-modes/scale-mode.js

@@ -0,0 +1,173 @@
+import bbox from '@turf/bbox';
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import bboxPolygon from '@turf/bbox-polygon';
+import { point, featureCollection } from '@turf/helpers';
+import polygonToLine from '@turf/polygon-to-line';
+import { coordEach } from '@turf/meta';
+import turfDistance from '@turf/distance';
+import turfTransformScale from '@turf/transform-scale';
+import { getCoord, getGeom } from '@turf/invariant';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class ScaleMode extends GeoJsonEditMode {
+    _geometryBeingScaled;
+    _selectedEditHandle;
+    _cornerGuidePoints = [];
+    _cursor;
+    _isScaling = false;
+    _isSinglePointGeometrySelected = (geometry) => {
+        const { features } = geometry || {};
+        if (Array.isArray(features) && features.length === 1) {
+            // @ts-expect-error turf types diff
+            const { type } = getGeom(features[0]);
+            return type === 'Point';
+        }
+        return false;
+    };
+    _getOppositeScaleHandle = (selectedHandle) => {
+        const selectedHandleIndex = selectedHandle &&
+            selectedHandle.properties &&
+            Array.isArray(selectedHandle.properties.positionIndexes) &&
+            selectedHandle.properties.positionIndexes[0];
+        if (typeof selectedHandleIndex !== 'number') {
+            return null;
+        }
+        const guidePointCount = this._cornerGuidePoints.length;
+        const oppositeIndex = (selectedHandleIndex + guidePointCount / 2) % guidePointCount;
+        return this._cornerGuidePoints.find((p) => {
+            if (!Array.isArray(p.properties.positionIndexes)) {
+                return false;
+            }
+            return p.properties.positionIndexes[0] === oppositeIndex;
+        }) || null;
+    };
+    _getUpdatedData = (props, editedData) => {
+        let updatedData = new ImmutableFeatureCollection(props.data);
+        const selectedIndexes = props.selectedIndexes;
+        for (let i = 0; i < selectedIndexes.length; i++) {
+            const selectedIndex = selectedIndexes[i];
+            const movedFeature = editedData.features[i];
+            updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+        }
+        return updatedData.getObject();
+    };
+    isEditHandleSelected = () => Boolean(this._selectedEditHandle);
+    getScaleAction = (startDragPoint, currentPoint, editType, props) => {
+        if (!this._selectedEditHandle) {
+            return null;
+        }
+        const oppositeHandle = this._getOppositeScaleHandle(this._selectedEditHandle);
+        const origin = getCoord(oppositeHandle);
+        const scaleFactor = getScaleFactor(origin, startDragPoint, currentPoint);
+        // @ts-expect-error turf types diff
+        const scaledFeatures = turfTransformScale(
+        // @ts-expect-error turf types diff
+        this._geometryBeingScaled, scaleFactor, { origin });
+        return {
+            updatedData: this._getUpdatedData(props, scaledFeatures),
+            editType,
+            editContext: {
+                featureIndexes: props.selectedIndexes,
+            },
+        };
+    };
+    updateCursor = (props) => {
+        if (this._selectedEditHandle) {
+            if (this._cursor) {
+                props.onUpdateCursor(this._cursor);
+            }
+            const cursorGeometry = this.getSelectedFeaturesAsFeatureCollection(props);
+            // Get resize cursor direction from the hovered scale editHandle (e.g. nesw or nwse)
+            // @ts-expect-error turf types diff
+            const centroid = turfCentroid(cursorGeometry);
+            const bearing = turfBearing(centroid, this._selectedEditHandle);
+            const positiveBearing = bearing < 0 ? bearing + 180 : bearing;
+            if ((positiveBearing >= 0 && positiveBearing <= 90) ||
+                (positiveBearing >= 180 && positiveBearing <= 270)) {
+                this._cursor = 'nesw-resize';
+                props.onUpdateCursor('nesw-resize');
+            }
+            else {
+                this._cursor = 'nwse-resize';
+                props.onUpdateCursor('nwse-resize');
+            }
+        }
+        else {
+            props.onUpdateCursor(null);
+            this._cursor = null;
+        }
+    };
+    handlePointerMove(event, props) {
+        if (!this._isScaling) {
+            const selectedEditHandle = getPickedEditHandle(event.picks);
+            this._selectedEditHandle =
+                selectedEditHandle && selectedEditHandle.properties.editHandleType === 'scale'
+                    ? selectedEditHandle
+                    : null;
+            this.updateCursor(props);
+        }
+    }
+    handleStartDragging(event, props) {
+        if (this._selectedEditHandle) {
+            this._isScaling = true;
+            this._geometryBeingScaled = this.getSelectedFeaturesAsFeatureCollection(props);
+        }
+    }
+    handleDragging(event, props) {
+        if (!this._isScaling) {
+            return;
+        }
+        props.onUpdateCursor(this._cursor);
+        const scaleAction = this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaling', props);
+        if (scaleAction) {
+            props.onEdit(scaleAction);
+        }
+        event.cancelPan();
+    }
+    handleStopDragging(event, props) {
+        if (this._isScaling) {
+            // Scale the geometry
+            const scaleAction = this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaled', props);
+            if (scaleAction) {
+                props.onEdit(scaleAction);
+            }
+            props.onUpdateCursor(null);
+            this._geometryBeingScaled = null;
+            this._selectedEditHandle = null;
+            this._cursor = null;
+            this._isScaling = false;
+        }
+    }
+    getGuides(props) {
+        this._cornerGuidePoints = [];
+        const selectedGeometry = this.getSelectedFeaturesAsFeatureCollection(props);
+        // Add buffer to the enveloping box if a single Point feature is selected
+        if (this._isSinglePointGeometrySelected(selectedGeometry)) {
+            return { type: 'FeatureCollection', features: [] };
+        }
+        const boundingBox = bboxPolygon(bbox(selectedGeometry));
+        boundingBox.properties.mode = 'scale';
+        const cornerGuidePoints = [];
+        coordEach(boundingBox, (coord, coordIndex) => {
+            if (coordIndex < 4) {
+                // Get corner midpoint guides from the enveloping box
+                const cornerPoint = point(coord, {
+                    guideType: 'editHandle',
+                    editHandleType: 'scale',
+                    positionIndexes: [coordIndex],
+                });
+                cornerGuidePoints.push(cornerPoint);
+            }
+        });
+        this._cornerGuidePoints = cornerGuidePoints;
+        // @ts-expect-error turf types diff
+        return featureCollection([polygonToLine(boundingBox), ...this._cornerGuidePoints]);
+    }
+}
+function getScaleFactor(centroid, startDragPoint, currentPoint) {
+    const startDistance = turfDistance(centroid, startDragPoint);
+    const endDistance = turfDistance(centroid, currentPoint);
+    return endDistance / startDistance;
+}

package/dist/edit-modes/snappable-mode.d.ts

@@ -0,0 +1,21 @@
+import { Feature, FeatureCollection } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, ModeProps, Pick, GuideFeatureCollection, EditHandleFeature } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+type MovementTypeEvent = PointerMoveEvent | StartDraggingEvent | StopDraggingEvent | DraggingEvent;
+export declare class SnappableMode extends GeoJsonEditMode {
+    _handler: GeoJsonEditMode;
+    constructor(handler: GeoJsonEditMode);
+    _getSnappedMouseEvent<T extends MovementTypeEvent>(event: T, snapSource: EditHandleFeature, snapTarget: EditHandleFeature): T;
+    _getPickedSnapTarget(picks: Pick[]): EditHandleFeature | null | undefined;
+    _getPickedSnapSource(pointerDownPicks: Pick[] | null | undefined): EditHandleFeature | null | undefined;
+    _getUpdatedSnapSourceHandle(snapSourceHandle: EditHandleFeature, data: FeatureCollection): EditHandleFeature;
+    _getSnapTargets(props: ModeProps<FeatureCollection>): Feature[];
+    _getSnapTargetHandles(props: ModeProps<FeatureCollection>): EditHandleFeature[];
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    _getSnapAwareEvent<T extends MovementTypeEvent>(event: T, props: ModeProps<FeatureCollection>): T;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+}
+export {};

package/dist/edit-modes/snappable-mode.js

@@ -0,0 +1,109 @@
+import { getPickedSnapSourceEditHandle, getPickedEditHandles, getEditHandlesForGeometry, } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class SnappableMode extends GeoJsonEditMode {
+    _handler;
+    constructor(handler) {
+        super();
+        this._handler = handler;
+    }
+    _getSnappedMouseEvent(event, snapSource, snapTarget) {
+        return Object.assign(event, {
+            mapCoords: snapTarget.geometry.coordinates,
+            pointerDownMapCoords: snapSource && snapSource.geometry.coordinates,
+        });
+    }
+    _getPickedSnapTarget(picks) {
+        return getPickedEditHandles(picks).find((handle) => handle.properties.editHandleType === 'snap-target');
+    }
+    _getPickedSnapSource(pointerDownPicks) {
+        return getPickedSnapSourceEditHandle(pointerDownPicks);
+    }
+    _getUpdatedSnapSourceHandle(snapSourceHandle, data) {
+        const { featureIndex, positionIndexes } = snapSourceHandle.properties;
+        if (!Array.isArray(positionIndexes)) {
+            return snapSourceHandle;
+        }
+        const snapSourceFeature = data.features[featureIndex];
+        // $FlowFixMe
+        const snapSourceCoordinates = positionIndexes.reduce((a, b) => a[b], snapSourceFeature.geometry.coordinates);
+        return {
+            ...snapSourceHandle,
+            geometry: {
+                type: 'Point',
+                coordinates: snapSourceCoordinates,
+            },
+        };
+    }
+    // If additionalSnapTargets is present in modeConfig and is populated, this
+    // method will return those features along with the features
+    // that live in the current layer. Otherwise, this method will simply return the
+    // features from the current layer
+    _getSnapTargets(props) {
+        let { additionalSnapTargets } = props.modeConfig || {};
+        additionalSnapTargets = additionalSnapTargets || [];
+        const features = [...props.data.features, ...additionalSnapTargets];
+        return features;
+    }
+    _getSnapTargetHandles(props) {
+        const handles = [];
+        const features = this._getSnapTargets(props);
+        for (let i = 0; i < features.length; i++) {
+            // Filter out the currently selected feature(s)
+            const isCurrentIndexFeatureNotSelected = !props.selectedIndexes.includes(i);
+            if (isCurrentIndexFeatureNotSelected) {
+                const { geometry } = features[i];
+                handles.push(...getEditHandlesForGeometry(geometry, i, 'snap-target'));
+            }
+        }
+        return handles;
+    }
+    // If no snap handle has been picked, only display the edit handles of the
+    // selected feature. If a snap handle has been picked, display said snap handle
+    // along with all snappable points on all non-selected features.
+    getGuides(props) {
+        const { modeConfig, lastPointerMoveEvent } = props;
+        const { enableSnapping } = modeConfig || {};
+        const guides = {
+            type: 'FeatureCollection',
+            features: [...this._handler.getGuides(props).features],
+        };
+        if (!enableSnapping) {
+            return guides;
+        }
+        const snapSourceHandle = lastPointerMoveEvent && this._getPickedSnapSource(lastPointerMoveEvent.pointerDownPicks);
+        // They started dragging a handle
+        // So render the picked handle (in its updated location) and all possible snap targets
+        if (snapSourceHandle) {
+            guides.features.push(...this._getSnapTargetHandles(props), this._getUpdatedSnapSourceHandle(snapSourceHandle, props.data));
+            return guides;
+        }
+        // Render the possible snap source handles
+        const { features } = props.data;
+        for (const index of props.selectedIndexes) {
+            if (index < features.length) {
+                const { geometry } = features[index];
+                guides.features.push(...getEditHandlesForGeometry(geometry, index, 'snap-source'));
+            }
+        }
+        return guides;
+    }
+    _getSnapAwareEvent(event, props) {
+        const snapSource = this._getPickedSnapSource(props.lastPointerMoveEvent.pointerDownPicks);
+        const snapTarget = this._getPickedSnapTarget(event.picks);
+        return snapSource && snapTarget
+            ? this._getSnappedMouseEvent(event, snapSource, snapTarget)
+            : event;
+    }
+    handleStartDragging(event, props) {
+        this._handler.handleStartDragging(event, props);
+    }
+    handleStopDragging(event, props) {
+        this._handler.handleStopDragging(this._getSnapAwareEvent(event, props), props);
+    }
+    handleDragging(event, props) {
+        this._handler.handleDragging(this._getSnapAwareEvent(event, props), props);
+    }
+    handlePointerMove(event, props) {
+        this._handler.handlePointerMove(this._getSnapAwareEvent(event, props), props);
+    }
+}

package/dist/edit-modes/split-polygon-mode.d.ts

@@ -0,0 +1,10 @@
+import { FeatureCollection } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, TentativeFeature } from './types';
+import { GeoJsonEditMode, GeoJsonEditAction } from './geojson-edit-mode';
+export declare class SplitPolygonMode extends GeoJsonEditMode {
+    calculateMapCoords(clickSequence: any, mapCoords: any, props: ModeProps<FeatureCollection>): any;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    splitPolygon(tentativeFeature: TentativeFeature, props: ModeProps<FeatureCollection>): GeoJsonEditAction;
+}

package/dist/edit-modes/split-polygon-mode.js

@@ -0,0 +1,164 @@
+import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
+import turfDifference from '@turf/difference';
+import turfBuffer from '@turf/buffer';
+import lineIntersect from '@turf/line-intersect';
+import { lineString } from '@turf/helpers';
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import turfDestination from '@turf/destination';
+import turfPolygonToLine from '@turf/polygon-to-line';
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import { generatePointsParallelToLinePoints } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class SplitPolygonMode extends GeoJsonEditMode {
+    calculateMapCoords(clickSequence, mapCoords, props) {
+        const modeConfig = props.modeConfig;
+        if (!modeConfig || !modeConfig.lock90Degree || !clickSequence.length) {
+            return mapCoords;
+        }
+        if (clickSequence.length === 1) {
+            // if first point is clicked, then find closest polygon point and build ~90deg vector
+            const firstPoint = clickSequence[0];
+            const selectedGeometry = this.getSelectedGeometry(props);
+            // @ts-expect-error turf types diff
+            const feature = turfPolygonToLine(selectedGeometry);
+            const lines = feature.type === 'FeatureCollection' ? feature.features : [feature];
+            let minDistance = Number.MAX_SAFE_INTEGER;
+            let closestPoint = null;
+            // If Multipolygon, then we should find nearest polygon line and stick split to it.
+            lines.forEach((line) => {
+                const snapPoint = nearestPointOnLine(line, firstPoint);
+                const distanceFromOrigin = turfDistance(snapPoint, firstPoint);
+                if (minDistance > distanceFromOrigin) {
+                    minDistance = distanceFromOrigin;
+                    closestPoint = snapPoint;
+                }
+            });
+            if (closestPoint) {
+                // closest point is used as 90degree entry to the polygon
+                const lastBearing = turfBearing(firstPoint, closestPoint);
+                const currentDistance = turfDistance(firstPoint, mapCoords, { units: 'meters' });
+                return turfDestination(firstPoint, currentDistance, lastBearing, {
+                    units: 'meters',
+                }).geometry.coordinates;
+            }
+            return mapCoords;
+        }
+        // Allow only 90 degree turns
+        const lastPoint = clickSequence[clickSequence.length - 1];
+        const [approximatePoint] = generatePointsParallelToLinePoints(clickSequence[clickSequence.length - 2], lastPoint, mapCoords);
+        // align point with current ground
+        const nearestPt = nearestPointOnLine(lineString([lastPoint, approximatePoint]), mapCoords)
+            .geometry.coordinates;
+        return nearestPt;
+    }
+    getGuides(props) {
+        const clickSequence = this.getClickSequence();
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        if (clickSequence.length === 0 || !props.lastPointerMoveEvent) {
+            // nothing to do yet
+            return guides;
+        }
+        const { mapCoords } = props.lastPointerMoveEvent;
+        guides.features.push({
+            type: 'Feature',
+            properties: {
+                guideType: 'tentative',
+            },
+            geometry: {
+                type: 'LineString',
+                coordinates: [...clickSequence, this.calculateMapCoords(clickSequence, mapCoords, props)],
+            },
+        });
+        return guides;
+    }
+    handleClick(event, props) {
+        const tentativeFeature = this.getTentativeGuide(props);
+        const selectedGeometry = this.getSelectedGeometry(props);
+        if (!selectedGeometry) {
+            // eslint-disable-next-line no-console,no-undef
+            console.warn('A polygon must be selected for splitting');
+            return;
+        }
+        const clickSequence = this.getClickSequence();
+        if (tentativeFeature && tentativeFeature.geometry.type === 'LineString') {
+            clickSequence.push(tentativeFeature.geometry.coordinates[tentativeFeature.geometry.coordinates.length - 1]);
+        }
+        else {
+            this.addClickSequence(event);
+        }
+        const pt = {
+            type: 'Point',
+            coordinates: clickSequence[clickSequence.length - 1],
+        };
+        // @ts-expect-error turf types diff
+        const isPointInPolygon = booleanPointInPolygon(pt, selectedGeometry);
+        if (clickSequence.length > 1 && tentativeFeature && !isPointInPolygon) {
+            this.resetClickSequence();
+            // @ts-expect-error narrow type
+            const isLineInterectingWithPolygon = lineIntersect(tentativeFeature, selectedGeometry);
+            if (isLineInterectingWithPolygon.features.length === 0) {
+                return;
+            }
+            const editAction = this.splitPolygon(tentativeFeature, props);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+    }
+    splitPolygon(tentativeFeature, props) {
+        const selectedGeometry = this.getSelectedGeometry(props);
+        const featureIndex = props.selectedIndexes[0];
+        const modeConfig = props.modeConfig || {};
+        // Default gap in between the polygon
+        let { gap = 0.1, units = 'centimeters' } = modeConfig;
+        if (gap === 0) {
+            gap = 0.1;
+            units = 'centimeters';
+        }
+        const buffer = turfBuffer(tentativeFeature, gap, { units });
+        // @ts-expect-error turf types diff
+        const updatedGeometry = turfDifference(selectedGeometry, buffer);
+        if (!updatedGeometry) {
+            // eslint-disable-next-line no-console,no-undef
+            console.warn('Canceling edit. Split Polygon erased');
+            return null;
+        }
+        const { type, coordinates } = updatedGeometry.geometry;
+        let updatedCoordinates = []; // TODO
+        if (type === 'Polygon') {
+            // Update the coordinates as per Multipolygon
+            updatedCoordinates = coordinates.map((c) => [c]);
+        }
+        else {
+            // Handle Case when Multipolygon has holes
+            updatedCoordinates = coordinates.reduce((agg, prev) => {
+                prev.forEach((p) => {
+                    // @ts-expect-error revisit coordinates type here
+                    agg.push([p]);
+                });
+                return agg;
+            }, []);
+        }
+        // Update the type to Mulitpolygon
+        const updatedData = new ImmutableFeatureCollection(props.data).replaceGeometry(featureIndex, {
+            type: 'MultiPolygon',
+            coordinates: updatedCoordinates,
+        });
+        const editAction = {
+            updatedData: updatedData.getObject(),
+            editType: 'split',
+            editContext: {
+                featureIndexes: [featureIndex],
+            },
+        };
+        return editAction;
+    }
+}

package/dist/edit-modes/three-click-polygon-mode.d.ts

@@ -0,0 +1,10 @@
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, TentativeFeature } from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class ThreeClickPolygonMode extends GeoJsonEditMode {
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    getThreeClickPolygon(coord1: Position, coord2: Position, coord3: Position, modeConfig: any): FeatureOf<Polygon> | null | undefined;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature;
+}