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

package/dist/mode-handlers/modify-handler.js

@@ -0,0 +1,193 @@
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import { point, lineString as toLineString } from '@turf/helpers';
+import { recursivelyTraverseNestedArrays, nearestPointOnProjectedLine, } from '../utils';
+import { ModeHandler, getPickedEditHandle, getEditHandlesForGeometry, } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ModifyHandler extends ModeHandler {
+    _lastPointerMovePicks;
+    getEditHandles(picks, mapCoords) {
+        let handles = [];
+        const { features } = this.featureCollection.getObject();
+        for (const index of this.getSelectedFeatureIndexes()) {
+            if (index < features.length) {
+                const { geometry } = features[index];
+                handles.push(...getEditHandlesForGeometry(geometry, index));
+            }
+            else {
+                console.warn(`selectedFeatureIndexes out of range ${index}`); // eslint-disable-line no-console,no-undef
+            }
+        }
+        // intermediate edit handle
+        if (picks && picks.length && mapCoords) {
+            const existingEditHandle = picks.find((pick) => pick.isEditingHandle && pick.object && pick.object.type === 'existing');
+            // don't show intermediate point when too close to an existing edit handle
+            const featureAsPick = !existingEditHandle && picks.find((pick) => !pick.isEditingHandle);
+            // is the feature in the pick selected
+            if (featureAsPick &&
+                !featureAsPick.object.geometry.type.includes('Point') &&
+                this.getSelectedFeatureIndexes().includes(featureAsPick.index)) {
+                let intermediatePoint = null;
+                let positionIndexPrefix = [];
+                const referencePoint = point(mapCoords);
+                // process all lines of the (single) feature
+                recursivelyTraverseNestedArrays(featureAsPick.object.geometry.coordinates, [], (lineString, prefix) => {
+                    const lineStringFeature = toLineString(lineString);
+                    const candidateIntermediatePoint = this.nearestPointOnLine(
+                    // @ts-expect-error turf type diff
+                    lineStringFeature, referencePoint);
+                    if (!intermediatePoint ||
+                        candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist) {
+                        intermediatePoint = candidateIntermediatePoint;
+                        positionIndexPrefix = prefix;
+                    }
+                });
+                // tack on the lone intermediate point to the set of handles
+                if (intermediatePoint) {
+                    const { geometry: { coordinates: position }, properties: { index }, } = intermediatePoint;
+                    handles = [
+                        ...handles,
+                        {
+                            position,
+                            positionIndexes: [...positionIndexPrefix, index + 1],
+                            featureIndex: featureAsPick.index,
+                            type: 'intermediate',
+                        },
+                    ];
+                }
+            }
+        }
+        return handles;
+    }
+    // turf.js does not support elevation for nearestPointOnLine
+    nearestPointOnLine(line, inPoint) {
+        const { coordinates } = line.geometry;
+        if (coordinates.some((coord) => coord.length > 2)) {
+            const modeConfig = this.getModeConfig();
+            if (modeConfig && modeConfig.viewport) {
+                // This line has elevation, we need to use alternative algorithm
+                return nearestPointOnProjectedLine(line, inPoint, modeConfig.viewport);
+            }
+            // eslint-disable-next-line no-console,no-undef
+            console.log('Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.');
+        }
+        // @ts-expect-error geojson types diff
+        return nearestPointOnLine(line, inPoint);
+    }
+    handleClick(event) {
+        let editAction = null;
+        const clickedEditHandle = getPickedEditHandle(event.picks);
+        if (clickedEditHandle && clickedEditHandle.featureIndex >= 0) {
+            if (clickedEditHandle.type === 'existing') {
+                let updatedData;
+                try {
+                    updatedData = this.getImmutableFeatureCollection()
+                        .removePosition(clickedEditHandle.featureIndex, clickedEditHandle.positionIndexes)
+                        .getObject();
+                }
+                catch (ignored) {
+                    // This happens if user attempts to remove the last point
+                }
+                if (updatedData) {
+                    editAction = {
+                        updatedData,
+                        editType: 'removePosition',
+                        featureIndexes: [clickedEditHandle.featureIndex],
+                        editContext: {
+                            positionIndexes: clickedEditHandle.positionIndexes,
+                            position: clickedEditHandle.position,
+                        },
+                    };
+                }
+            }
+            else if (clickedEditHandle.type === 'intermediate') {
+                const updatedData = this.getImmutableFeatureCollection()
+                    .addPosition(clickedEditHandle.featureIndex, clickedEditHandle.positionIndexes, clickedEditHandle.position)
+                    .getObject();
+                if (updatedData) {
+                    editAction = {
+                        updatedData,
+                        editType: 'addPosition',
+                        featureIndexes: [clickedEditHandle.featureIndex],
+                        editContext: {
+                            positionIndexes: clickedEditHandle.positionIndexes,
+                            position: clickedEditHandle.position,
+                        },
+                    };
+                }
+            }
+        }
+        return editAction;
+    }
+    handlePointerMove(event) {
+        this._lastPointerMovePicks = event.picks;
+        let editAction = null;
+        const editHandle = getPickedEditHandle(event.pointerDownPicks);
+        if (event.isDragging && editHandle) {
+            const updatedData = this.getImmutableFeatureCollection()
+                .replacePosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+                .getObject();
+            editAction = {
+                updatedData,
+                editType: 'movePosition',
+                featureIndexes: [editHandle.featureIndex],
+                editContext: {
+                    positionIndexes: editHandle.positionIndexes,
+                    position: event.mapCoords,
+                },
+            };
+        }
+        // Cancel map panning if pointer went down on an edit handle
+        const cancelMapPan = Boolean(editHandle);
+        return { editAction, cancelMapPan };
+    }
+    handleStartDragging(event) {
+        let editAction = null;
+        const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+        const editHandle = getPickedEditHandle(event.picks);
+        if (selectedFeatureIndexes.length && editHandle && editHandle.type === 'intermediate') {
+            const updatedData = this.getImmutableFeatureCollection()
+                .addPosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+                .getObject();
+            editAction = {
+                updatedData,
+                editType: 'addPosition',
+                featureIndexes: [editHandle.featureIndex],
+                editContext: {
+                    positionIndexes: editHandle.positionIndexes,
+                    position: event.mapCoords,
+                },
+            };
+        }
+        return editAction;
+    }
+    handleStopDragging(event) {
+        let editAction = null;
+        const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+        const editHandle = getPickedEditHandle(event.picks);
+        if (selectedFeatureIndexes.length && editHandle) {
+            const updatedData = this.getImmutableFeatureCollection()
+                .replacePosition(editHandle.featureIndex, editHandle.positionIndexes, event.mapCoords)
+                .getObject();
+            editAction = {
+                updatedData,
+                editType: 'finishMovePosition',
+                featureIndexes: [editHandle.featureIndex],
+                editContext: {
+                    positionIndexes: editHandle.positionIndexes,
+                    position: event.mapCoords,
+                },
+            };
+        }
+        return editAction;
+    }
+    getCursor({ isDragging }) {
+        const picks = this._lastPointerMovePicks;
+        if (picks && picks.length > 0) {
+            const handlePicked = picks.some((pick) => pick.isEditingHandle);
+            if (handlePicked) {
+                return 'cell';
+            }
+        }
+        return isDragging ? 'grabbing' : 'grab';
+    }
+}

package/dist/mode-handlers/rotate-handler.d.ts

@@ -0,0 +1,17 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+export declare class RotateHandler extends ModeHandler {
+    _isRotatable: boolean;
+    _geometryBeingRotated: FeatureCollection | null | undefined;
+    handlePointerMove(event: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+    handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined;
+    handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined;
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): string;
+    getRotateAction(startDragPoint: Position, currentPoint: Position, editType: string): EditAction;
+}

package/dist/mode-handlers/rotate-handler.js

@@ -0,0 +1,74 @@
+import turfCentroid from '@turf/centroid';
+import turfBearing from '@turf/bearing';
+import turfTransformRotate from '@turf/transform-rotate';
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class RotateHandler extends ModeHandler {
+    _isRotatable = undefined;
+    _geometryBeingRotated;
+    handlePointerMove(event) {
+        let editAction = null;
+        this._isRotatable = Boolean(this._geometryBeingRotated) || this.isSelectionPicked(event.picks);
+        if (!this._isRotatable || !event.pointerDownMapCoords) {
+            // Nothing to do
+            return { editAction: null, cancelMapPan: false };
+        }
+        if (event.isDragging && this._geometryBeingRotated) {
+            // Rotate the geometry
+            editAction = this.getRotateAction(event.pointerDownMapCoords, event.mapCoords, 'rotating');
+        }
+        return { editAction, cancelMapPan: true };
+    }
+    handleStartDragging(event) {
+        if (!this._isRotatable) {
+            return null;
+        }
+        this._geometryBeingRotated = this.getSelectedFeaturesAsFeatureCollection();
+        return null;
+    }
+    handleStopDragging(event) {
+        let editAction = null;
+        if (this._geometryBeingRotated) {
+            // Rotate the geometry
+            editAction = this.getRotateAction(event.pointerDownMapCoords, event.mapCoords, 'rotated');
+            this._geometryBeingRotated = null;
+        }
+        return editAction;
+    }
+    getCursor({ isDragging }) {
+        if (this._isRotatable) {
+            // TODO: look at doing SVG cursors to get a better "rotate" cursor
+            return 'move';
+        }
+        return isDragging ? 'grabbing' : 'grab';
+    }
+    getRotateAction(startDragPoint, currentPoint, editType) {
+        const startPosition = startDragPoint;
+        // @ts-expect-error turf types diff
+        const centroid = turfCentroid(this._geometryBeingRotated);
+        // @ts-expect-error turf types diff
+        const angle = getRotationAngle(centroid, startPosition, currentPoint);
+        // @ts-expect-error turf type diff
+        const rotatedFeatures = turfTransformRotate(
+        // @ts-expect-error turf type diff
+        this._geometryBeingRotated, angle);
+        let updatedData = this.getImmutableFeatureCollection();
+        const selectedIndexes = this.getSelectedFeatureIndexes();
+        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,
+            featureIndexes: selectedIndexes,
+            editContext: null,
+        };
+    }
+}
+function getRotationAngle(centroid, startDragPoint, currentPoint) {
+    const bearing1 = turfBearing(centroid, startDragPoint);
+    const bearing2 = turfBearing(centroid, currentPoint);
+    return bearing2 - bearing1;
+}

package/dist/mode-handlers/scale-handler.d.ts

@@ -0,0 +1,17 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+export declare class ScaleHandler extends ModeHandler {
+    _isScalable: boolean;
+    _geometryBeingScaled: FeatureCollection | null | undefined;
+    handlePointerMove(event: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+    handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined;
+    handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined;
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): string;
+    getScaleAction(startDragPoint: Position, currentPoint: Position, editType: string): EditAction;
+}

package/dist/mode-handlers/scale-handler.js

@@ -0,0 +1,76 @@
+import turfCentroid from '@turf/centroid';
+import turfDistance from '@turf/distance';
+import turfTransformScale from '@turf/transform-scale';
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ScaleHandler extends ModeHandler {
+    _isScalable = undefined;
+    _geometryBeingScaled;
+    handlePointerMove(event) {
+        let editAction = null;
+        this._isScalable = Boolean(this._geometryBeingScaled) || this.isSelectionPicked(event.picks);
+        if (!this._isScalable || !event.pointerDownMapCoords) {
+            // Nothing to do
+            return { editAction: null, cancelMapPan: false };
+        }
+        if (event.isDragging && this._geometryBeingScaled) {
+            // Scale the geometry
+            editAction = this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaling');
+        }
+        return { editAction, cancelMapPan: true };
+    }
+    handleStartDragging(event) {
+        if (!this._isScalable) {
+            return null;
+        }
+        this._geometryBeingScaled = this.getSelectedFeaturesAsFeatureCollection();
+        return null;
+    }
+    handleStopDragging(event) {
+        let editAction = null;
+        if (this._geometryBeingScaled) {
+            // Scale the geometry
+            editAction = this.getScaleAction(event.pointerDownMapCoords, event.mapCoords, 'scaled');
+            this._geometryBeingScaled = null;
+        }
+        return editAction;
+    }
+    getCursor({ isDragging }) {
+        if (this._isScalable) {
+            // TODO: look at doing SVG cursors to get a better "scale" cursor
+            return 'move';
+        }
+        return isDragging ? 'grabbing' : 'grab';
+    }
+    getScaleAction(startDragPoint, currentPoint, editType) {
+        const startPosition = startDragPoint;
+        // @ts-expect-error turf types diff
+        const centroid = turfCentroid(this._geometryBeingScaled);
+        // @ts-expect-error turf types diff
+        const factor = getScaleFactor(centroid, startPosition, currentPoint);
+        // @ts-expect-error turf type diff
+        const scaledFeatures = turfTransformScale(
+        // @ts-expect-error turf type diff
+        this._geometryBeingScaled, factor, {
+            origin: centroid,
+        });
+        let updatedData = this.getImmutableFeatureCollection();
+        const selectedIndexes = this.getSelectedFeatureIndexes();
+        for (let i = 0; i < selectedIndexes.length; i++) {
+            const selectedIndex = selectedIndexes[i];
+            const movedFeature = scaledFeatures.features[i];
+            updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+        }
+        return {
+            updatedData: updatedData.getObject(),
+            editType,
+            featureIndexes: selectedIndexes,
+            editContext: null,
+        };
+    }
+}
+function getScaleFactor(centroid, startDragPoint, currentPoint) {
+    const startDistance = turfDistance(centroid, startDragPoint);
+    const endDistance = turfDistance(centroid, currentPoint);
+    return endDistance / startDistance;
+}

package/dist/mode-handlers/snappable-handler.d.ts

@@ -0,0 +1,33 @@
+import { Feature, FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditHandle, EditAction, ModeHandler } from './mode-handler';
+type HandlePicks = {
+    pickedHandle?: EditHandle;
+    potentialSnapHandle?: EditHandle;
+};
+export declare class SnappableHandler extends ModeHandler {
+    _handler: ModeHandler;
+    _editHandlePicks: HandlePicks | null | undefined;
+    _startDragSnapHandlePosition: Position;
+    constructor(handler: ModeHandler);
+    setFeatureCollection(featureCollection: FeatureCollection): void;
+    setModeConfig(modeConfig: any): void;
+    setSelectedFeatureIndexes(indexes: number[]): void;
+    _getSnappedMouseEvent(event: Record<string, any>, snapPoint: Position): PointerMoveEvent;
+    _getEditHandlePicks(event: PointerMoveEvent): HandlePicks;
+    _updatePickedHandlePosition(editAction: EditAction): void;
+    _getSnapTargets(): Feature[];
+    _getNonPickedIntermediateHandles(): EditHandle[];
+    getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): any[];
+    _getSnapAwareEvent(event: Record<string, any>): Record<string, any>;
+    handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined;
+    handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined;
+    getCursor(event: {
+        isDragging: boolean;
+    }): string;
+    handlePointerMove(event: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+}
+export {};

package/dist/mode-handlers/snappable-handler.js

@@ -0,0 +1,133 @@
+import { ModeHandler, getPickedEditHandle, getEditHandlesForGeometry, } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class SnappableHandler extends ModeHandler {
+    _handler;
+    _editHandlePicks;
+    _startDragSnapHandlePosition = undefined;
+    constructor(handler) {
+        super();
+        this._handler = handler;
+    }
+    setFeatureCollection(featureCollection) {
+        this._handler.setFeatureCollection(featureCollection);
+    }
+    setModeConfig(modeConfig) {
+        this._modeConfig = modeConfig;
+        this._handler.setModeConfig(modeConfig);
+    }
+    setSelectedFeatureIndexes(indexes) {
+        this._handler.setSelectedFeatureIndexes(indexes);
+    }
+    _getSnappedMouseEvent(event, snapPoint) {
+        // @ts-expect-error narrow event type
+        return Object.assign({}, event, {
+            mapCoords: snapPoint,
+            pointerDownMapCoords: this._startDragSnapHandlePosition,
+        });
+    }
+    _getEditHandlePicks(event) {
+        const { picks } = event;
+        const potentialSnapHandle = picks.find((pick) => pick.object && pick.object.type === 'intermediate');
+        const handles = { potentialSnapHandle: potentialSnapHandle && potentialSnapHandle.object };
+        const pickedHandle = getPickedEditHandle(event.pointerDownPicks);
+        if (pickedHandle) {
+            return { ...handles, pickedHandle };
+        }
+        return handles;
+    }
+    _updatePickedHandlePosition(editAction) {
+        const { pickedHandle = {} } = this._editHandlePicks || {};
+        if (pickedHandle && editAction) {
+            const { featureIndexes, updatedData } = editAction;
+            for (let i = 0; i < featureIndexes.length; i++) {
+                const selectedIndex = featureIndexes[i];
+                const updatedFeature = updatedData.features[selectedIndex];
+                const { positionIndexes, featureIndex } = pickedHandle;
+                if (selectedIndex >= 0 && featureIndex === selectedIndex) {
+                    const { coordinates } = updatedFeature.geometry;
+                    pickedHandle.position = positionIndexes.reduce((a, b) => a[b], coordinates);
+                }
+            }
+        }
+    }
+    // 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() {
+        let { additionalSnapTargets } = this.getModeConfig() || {};
+        additionalSnapTargets = additionalSnapTargets || [];
+        const features = [
+            ...this._handler.featureCollection.getObject().features,
+            ...additionalSnapTargets,
+        ];
+        return features;
+    }
+    _getNonPickedIntermediateHandles() {
+        const handles = [];
+        const features = this._getSnapTargets();
+        for (let i = 0; i < features.length; i++) {
+            // Filter out the currently selected feature(s)
+            const isCurrentIndexFeatureNotSelected = i < features.length && !this._handler.getSelectedFeatureIndexes().includes(i);
+            if (isCurrentIndexFeatureNotSelected) {
+                const { geometry } = features[i];
+                handles.push(...getEditHandlesForGeometry(geometry, i, 'intermediate'));
+            }
+        }
+        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.
+    getEditHandles(picks, mapCoords) {
+        const { enableSnapping } = this._modeConfig || {};
+        const handles = this._handler.getEditHandles(picks, mapCoords);
+        if (!enableSnapping)
+            return handles;
+        const { pickedHandle } = this._editHandlePicks || {};
+        if (pickedHandle) {
+            handles.push(...this._getNonPickedIntermediateHandles(), pickedHandle);
+            return handles;
+        }
+        const { features } = this._handler.featureCollection.getObject();
+        for (const index of this._handler.getSelectedFeatureIndexes()) {
+            if (index < features.length) {
+                const { geometry } = features[index];
+                handles.push(...getEditHandlesForGeometry(geometry, index, 'snap'));
+            }
+        }
+        return handles.filter(Boolean);
+    }
+    _getSnapAwareEvent(event) {
+        const { potentialSnapHandle } = this._editHandlePicks || {};
+        return potentialSnapHandle && potentialSnapHandle.position
+            ? this._getSnappedMouseEvent(event, potentialSnapHandle.position)
+            : event;
+    }
+    handleStartDragging(event) {
+        this._startDragSnapHandlePosition = (getPickedEditHandle(event.picks) || {}).position;
+        return this._handler.handleStartDragging(event);
+    }
+    handleStopDragging(event) {
+        // @ts-expect-error narrow event type
+        const modeActionSummary = this._handler.handleStopDragging(this._getSnapAwareEvent(event));
+        this._editHandlePicks = null;
+        return modeActionSummary;
+    }
+    getCursor(event) {
+        return this._handler.getCursor(event);
+    }
+    handlePointerMove(event) {
+        const { enableSnapping } = this._handler.getModeConfig() || {};
+        if (enableSnapping) {
+            this._editHandlePicks = this._getEditHandlePicks(event);
+        }
+        // @ts-expect-error narrow event type
+        const modeActionSummary = this._handler.handlePointerMove(this._getSnapAwareEvent(event));
+        const { editAction } = modeActionSummary;
+        if (editAction) {
+            this._updatePickedHandlePosition(editAction);
+        }
+        return modeActionSummary;
+    }
+}

package/dist/mode-handlers/split-polygon-handler.d.ts

@@ -0,0 +1,11 @@
+import { EditAction, ModeHandler } from './mode-handler';
+import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+export declare class SplitPolygonHandler extends ModeHandler {
+    calculateMapCoords(clickSequence: any, mapCoords: any): any;
+    handleClick(event: ClickEvent): EditAction | null | undefined;
+    handlePointerMove({ mapCoords }: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+    splitPolygon(): EditAction;
+}