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

package/dist/edit-modes/measure-distance-mode.js

@@ -0,0 +1,171 @@
+import turfDistance from '@turf/distance';
+import turfMidpoint from '@turf/midpoint';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class MeasureDistanceMode extends GeoJsonEditMode {
+    _isMeasuringSessionFinished = false;
+    _currentTooltips = [];
+    _currentDistance = 0;
+    _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig }) => {
+        const { turfOptions, measurementCallback } = modeConfig || {};
+        const distance = turfDistance(positionA, positionB, turfOptions);
+        if (measurementCallback) {
+            measurementCallback(distance);
+        }
+        return distance;
+    };
+    _formatTooltip(distance, modeConfig) {
+        const { formatTooltip, turfOptions } = modeConfig || {};
+        const units = (turfOptions && turfOptions.units) || 'kilometers';
+        let text;
+        if (formatTooltip) {
+            text = formatTooltip(distance);
+        }
+        else {
+            // By default, round to 2 decimal places and append units
+            text = `${parseFloat(distance).toFixed(2)} ${units}`;
+        }
+        return text;
+    }
+    handleClick(event, props) {
+        const { modeConfig, data, onEdit } = props;
+        const { centerTooltipsOnLine = false } = modeConfig || {};
+        // restart measuring session
+        if (this._isMeasuringSessionFinished) {
+            this._isMeasuringSessionFinished = false;
+            this.resetClickSequence();
+            this._currentTooltips = [];
+            this._currentDistance = 0;
+        }
+        const { picks } = event;
+        const clickedEditHandle = getPickedEditHandle(picks);
+        let positionAdded = false;
+        if (!clickedEditHandle) {
+            // Don't add another point right next to an existing one
+            this.addClickSequence(event);
+            positionAdded = true;
+        }
+        const clickSequence = this.getClickSequence();
+        if (clickSequence.length > 1 &&
+            clickedEditHandle &&
+            Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+            clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1) {
+            // They clicked the last point (or double-clicked), so add the LineString
+            this._isMeasuringSessionFinished = true;
+        }
+        else if (positionAdded) {
+            if (clickSequence.length > 1) {
+                this._currentDistance += this._calculateDistanceForTooltip({
+                    positionA: clickSequence[clickSequence.length - 2],
+                    positionB: clickSequence[clickSequence.length - 1],
+                    modeConfig,
+                });
+                const tooltipPosition = centerTooltipsOnLine
+                    ? turfMidpoint(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]).geometry.coordinates
+                    : event.mapCoords;
+                this._currentTooltips.push({
+                    position: tooltipPosition,
+                    text: this._formatTooltip(this._currentDistance, modeConfig),
+                });
+            }
+            // new tentative point
+            onEdit({
+                // data is the same
+                updatedData: data,
+                editType: 'addTentativePosition',
+                editContext: {
+                    position: event.mapCoords,
+                },
+            });
+        }
+    }
+    handleKeyUp(event, props) {
+        if (this._isMeasuringSessionFinished)
+            return;
+        event.stopPropagation();
+        const { key } = event;
+        const clickSequenceLength = this.getClickSequence().length;
+        switch (key) {
+            case 'Escape':
+                this._isMeasuringSessionFinished = true;
+                if (clickSequenceLength === 1) {
+                    this.resetClickSequence();
+                    this._currentTooltips = [];
+                }
+                // force update drawings
+                props.onUpdateCursor('cell');
+                break;
+            case 'Enter':
+                this.handleClick(props.lastPointerMoveEvent, props);
+                this._isMeasuringSessionFinished = true;
+                break;
+            default:
+                break;
+        }
+    }
+    getGuides(props) {
+        const { lastPointerMoveEvent } = props;
+        const clickSequence = this.getClickSequence();
+        const lastCoords = lastPointerMoveEvent && !this._isMeasuringSessionFinished
+            ? [lastPointerMoveEvent.mapCoords]
+            : [];
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        if (clickSequence.length > 0) {
+            guides.features.push({
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [...clickSequence, ...lastCoords],
+                },
+            });
+        }
+        const editHandles = 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;
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+    }
+    getTooltips(props) {
+        const { lastPointerMoveEvent, modeConfig } = props;
+        const { centerTooltipsOnLine = false } = modeConfig || {};
+        const positions = this.getClickSequence();
+        if (positions.length > 0 && lastPointerMoveEvent && !this._isMeasuringSessionFinished) {
+            const distance = this._calculateDistanceForTooltip({
+                positionA: positions[positions.length - 1],
+                positionB: lastPointerMoveEvent.mapCoords,
+                modeConfig: props.modeConfig,
+            });
+            const tooltipPosition = centerTooltipsOnLine
+                ? turfMidpoint(positions[positions.length - 1], lastPointerMoveEvent.mapCoords).geometry
+                    .coordinates
+                : lastPointerMoveEvent.mapCoords;
+            return [
+                ...this._currentTooltips,
+                {
+                    position: tooltipPosition,
+                    text: this._formatTooltip(this._currentDistance + distance, modeConfig),
+                },
+            ];
+        }
+        return this._currentTooltips;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { NearestPointType } from './utils';
+import { LineString, Point, FeatureCollection, FeatureOf } from '../geojson-types';
+import { ModeProps, ClickEvent, PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, Viewport, GuideFeatureCollection, EditHandleFeature } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class ModifyMode extends GeoJsonEditMode {
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    getNearestPoint(line: FeatureOf<LineString>, inPoint: FeatureOf<Point>, viewport: Viewport | null | undefined): NearestPointType;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    _dragEditHandle(editType: string, props: ModeProps<FeatureCollection>, editHandle: EditHandleFeature, event: StopDraggingEvent | DraggingEvent): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    getCursor(event: PointerMoveEvent): string | null | undefined;
+}

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

@@ -0,0 +1,203 @@
+import { point, lineString as toLineString } from '@turf/helpers';
+import { recursivelyTraverseNestedArrays, nearestPointOnProjectedLine, nearestPointOnLine, getEditHandlesForGeometry, getPickedEditHandles, getPickedEditHandle, getPickedExistingEditHandle, getPickedIntermediateEditHandle, updateRectanglePosition, } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class ModifyMode extends GeoJsonEditMode {
+    // eslint-disable-next-line complexity
+    getGuides(props) {
+        const handles = [];
+        const { data, lastPointerMoveEvent } = props;
+        const { features } = data;
+        const picks = lastPointerMoveEvent && lastPointerMoveEvent.picks;
+        const mapCoords = lastPointerMoveEvent && lastPointerMoveEvent.mapCoords;
+        for (const index of props.selectedIndexes) {
+            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 = getPickedExistingEditHandle(picks);
+            // don't show intermediate point when too close to an existing edit handle
+            const featureAsPick = !existingEditHandle && picks.find((pick) => !pick.isGuide);
+            // is the feature in the pick selected
+            if (featureAsPick &&
+                !featureAsPick.object.geometry.type.includes('Point') &&
+                !(props.modeConfig?.lockRectangles && featureAsPick.object.properties.shape === 'Rectangle') &&
+                props.selectedIndexes.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.getNearestPoint(
+                    // @ts-expect-error turf types too wide
+                    lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport);
+                    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.push({
+                        type: 'Feature',
+                        properties: {
+                            guideType: 'editHandle',
+                            editHandleType: 'intermediate',
+                            featureIndex: featureAsPick.index,
+                            positionIndexes: [...positionIndexPrefix, index + 1],
+                        },
+                        geometry: {
+                            type: 'Point',
+                            coordinates: position,
+                        },
+                    });
+                }
+            }
+        }
+        return {
+            type: 'FeatureCollection',
+            features: handles,
+        };
+    }
+    // turf.js does not support elevation for nearestPointOnLine
+    getNearestPoint(line, inPoint, viewport) {
+        const { coordinates } = line.geometry;
+        if (coordinates.some((coord) => coord.length > 2)) {
+            if (viewport) {
+                // This line has elevation, we need to use alternative algorithm
+                return nearestPointOnProjectedLine(line, inPoint, viewport);
+            }
+            // eslint-disable-next-line no-console,no-undef
+            console.log('Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.');
+        }
+        return nearestPointOnLine(line, inPoint, viewport);
+    }
+    handleClick(event, props) {
+        const pickedExistingHandle = getPickedExistingEditHandle(event.picks);
+        const pickedIntermediateHandle = getPickedIntermediateEditHandle(event.picks);
+        if (pickedExistingHandle) {
+            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
+            }
+            if (updatedData) {
+                props.onEdit({
+                    updatedData,
+                    editType: 'removePosition',
+                    editContext: {
+                        featureIndexes: [featureIndex],
+                        positionIndexes,
+                        position: pickedExistingHandle.geometry.coordinates,
+                    },
+                });
+            }
+        }
+        else if (pickedIntermediateHandle) {
+            const { featureIndex, positionIndexes } = pickedIntermediateHandle.properties;
+            const feature = props.data.features[featureIndex];
+            const canAddPosition = !(props.modeConfig?.lockRectangles && feature?.properties.shape === 'Rectangle');
+            if (canAddPosition) {
+                const updatedData = new ImmutableFeatureCollection(props.data)
+                    .addPosition(featureIndex, positionIndexes, pickedIntermediateHandle.geometry.coordinates)
+                    .getObject();
+                if (updatedData) {
+                    props.onEdit({
+                        updatedData,
+                        editType: 'addPosition',
+                        editContext: {
+                            featureIndexes: [featureIndex],
+                            positionIndexes,
+                            position: pickedIntermediateHandle.geometry.coordinates,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    handleDragging(event, props) {
+        const editHandle = getPickedEditHandle(event.pointerDownPicks);
+        if (editHandle) {
+            // Cancel map panning if pointer went down on an edit handle
+            event.cancelPan();
+            this._dragEditHandle('movePosition', props, editHandle, event);
+        }
+    }
+    _dragEditHandle(editType, props, editHandle, event) {
+        const editHandleProperties = editHandle.properties;
+        const editedFeature = props.data.features[editHandleProperties.featureIndex];
+        let updatedData;
+        if (props.modeConfig?.lockRectangles && editedFeature.properties.shape === 'Rectangle') {
+            const coordinates = updateRectanglePosition(editedFeature, editHandleProperties.positionIndexes[1], event.mapCoords); // TODO
+            updatedData = new ImmutableFeatureCollection(props.data)
+                .replaceGeometry(editHandleProperties.featureIndex, { coordinates, type: 'Polygon' })
+                .getObject();
+        }
+        else {
+            updatedData = new ImmutableFeatureCollection(props.data)
+                .replacePosition(editHandleProperties.featureIndex, editHandleProperties.positionIndexes, event.mapCoords)
+                .getObject();
+        }
+        props.onEdit({
+            updatedData,
+            editType,
+            editContext: {
+                featureIndexes: [editHandleProperties.featureIndex],
+                positionIndexes: editHandleProperties.positionIndexes,
+                position: event.mapCoords,
+            },
+        });
+    }
+    handlePointerMove(event, props) {
+        const cursor = this.getCursor(event);
+        props.onUpdateCursor(cursor);
+    }
+    handleStartDragging(event, props) {
+        const selectedFeatureIndexes = props.selectedIndexes;
+        const editHandle = getPickedIntermediateEditHandle(event.picks);
+        if (selectedFeatureIndexes.length && editHandle) {
+            const editHandleProperties = editHandle.properties;
+            const updatedData = new ImmutableFeatureCollection(props.data)
+                .addPosition(editHandleProperties.featureIndex, editHandleProperties.positionIndexes, event.mapCoords)
+                .getObject();
+            props.onEdit({
+                updatedData,
+                editType: 'addPosition',
+                editContext: {
+                    featureIndexes: [editHandleProperties.featureIndex],
+                    positionIndexes: editHandleProperties.positionIndexes,
+                    position: event.mapCoords,
+                },
+            });
+        }
+    }
+    handleStopDragging(event, props) {
+        const selectedFeatureIndexes = props.selectedIndexes;
+        const editHandle = getPickedEditHandle(event.picks);
+        if (selectedFeatureIndexes.length && editHandle) {
+            this._dragEditHandle('finishMovePosition', props, editHandle, event);
+        }
+    }
+    getCursor(event) {
+        const picks = (event && event.picks) || [];
+        const handlesPicked = getPickedEditHandles(picks);
+        if (handlesPicked.length) {
+            return 'cell';
+        }
+        return null;
+    }
+}

package/dist/edit-modes/resize-circle-mode.d.ts

@@ -0,0 +1,16 @@
+import { NearestPointType } from './utils';
+import { LineString, Point, FeatureCollection, FeatureOf } from '../geojson-types';
+import { Viewport } from '../types';
+import { ModeProps, PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, EditHandleFeature, GuideFeatureCollection } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class ResizeCircleMode extends GeoJsonEditMode {
+    _selectedEditHandle: EditHandleFeature | null | undefined;
+    _isResizing: boolean;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    getNearestPoint(line: FeatureOf<LineString>, inPoint: FeatureOf<Point>, viewport: Viewport | null | undefined): NearestPointType;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    getCursor(event: PointerMoveEvent): string | null | undefined;
+}

package/dist/edit-modes/resize-circle-mode.js

@@ -0,0 +1,142 @@
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import { point, lineString as toLineString } from '@turf/helpers';
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import turfCenter from '@turf/center';
+import { recursivelyTraverseNestedArrays, nearestPointOnProjectedLine, getPickedEditHandles, getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class ResizeCircleMode extends GeoJsonEditMode {
+    _selectedEditHandle;
+    _isResizing = false;
+    // eslint-disable-next-line complexity
+    getGuides(props) {
+        const handles = [];
+        const selectedFeatureIndexes = props.selectedIndexes;
+        const { lastPointerMoveEvent } = props;
+        const picks = lastPointerMoveEvent && lastPointerMoveEvent.picks;
+        const mapCoords = lastPointerMoveEvent && lastPointerMoveEvent.mapCoords;
+        // intermediate edit handle
+        if (picks &&
+            picks.length &&
+            mapCoords &&
+            selectedFeatureIndexes.length === 1 &&
+            !this._isResizing) {
+            const featureAsPick = picks.find((pick) => !pick.isGuide);
+            // is the feature in the pick selected
+            if (featureAsPick &&
+                featureAsPick.object.properties.shape &&
+                featureAsPick.object.properties.shape.includes('Circle') &&
+                props.selectedIndexes.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.getNearestPoint(
+                    // @ts-expect-error turf types too wide
+                    lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport);
+                    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.push({
+                        type: 'Feature',
+                        properties: {
+                            guideType: 'editHandle',
+                            editHandleType: 'intermediate',
+                            featureIndex: featureAsPick.index,
+                            positionIndexes: [...positionIndexPrefix, index + 1]
+                        },
+                        geometry: {
+                            type: 'Point',
+                            coordinates: position
+                        }
+                    });
+                }
+            }
+        }
+        return {
+            type: 'FeatureCollection',
+            features: handles
+        };
+    }
+    // turf.js does not support elevation for nearestPointOnLine
+    getNearestPoint(line, inPoint, viewport) {
+        const { coordinates } = line.geometry;
+        if (coordinates.some((coord) => coord.length > 2)) {
+            if (viewport) {
+                // This line has elevation, we need to use alternative algorithm
+                return nearestPointOnProjectedLine(line, inPoint, 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 turf types diff
+        return nearestPointOnLine(line, inPoint);
+    }
+    handleDragging(event, props) {
+        const editHandle = getPickedEditHandle(event.pointerDownPicks);
+        if (editHandle) {
+            // Cancel map panning if pointer went down on an edit handle
+            event.cancelPan();
+            const editHandleProperties = editHandle.properties;
+            const feature = this.getSelectedFeature(props);
+            // @ts-expect-error turf types diff
+            const center = turfCenter(feature).geometry.coordinates;
+            const numberOfSteps = Object.entries(feature.geometry.coordinates[0]).length - 1;
+            const radius = Math.max(distance(center, event.mapCoords), 0.001);
+            const { steps = numberOfSteps } = {};
+            const options = { steps };
+            const updatedFeature = circle(center, radius, options);
+            const geometry = updatedFeature.geometry;
+            const updatedData = new ImmutableFeatureCollection(props.data)
+                // @ts-expect-error turf types diff
+                .replaceGeometry(editHandleProperties.featureIndex, geometry)
+                .getObject();
+            props.onEdit({
+                updatedData,
+                editType: 'unionGeometry',
+                editContext: {
+                    featureIndexes: [editHandleProperties.featureIndex]
+                }
+            });
+        }
+    }
+    handlePointerMove(event, props) {
+        if (!this._isResizing) {
+            const selectedEditHandle = getPickedEditHandle(event.picks);
+            this._selectedEditHandle =
+                selectedEditHandle && selectedEditHandle.properties.editHandleType === 'intermediate'
+                    ? selectedEditHandle
+                    : null;
+        }
+        const cursor = this.getCursor(event);
+        props.onUpdateCursor(cursor);
+    }
+    handleStartDragging(event, props) {
+        if (this._selectedEditHandle) {
+            this._isResizing = true;
+        }
+    }
+    handleStopDragging(event, props) {
+        if (this._isResizing) {
+            this._selectedEditHandle = null;
+            this._isResizing = false;
+        }
+    }
+    getCursor(event) {
+        const picks = (event && event.picks) || [];
+        const handlesPicked = getPickedEditHandles(picks);
+        if (handlesPicked.length) {
+            return 'cell';
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, ModeProps, EditHandleFeature, GuideFeatureCollection } from './types';
+import { FeatureCollection, Position } from '../geojson-types';
+import { GeoJsonEditMode, GeoJsonEditAction } from './geojson-edit-mode';
+export declare class RotateMode extends GeoJsonEditMode {
+    _selectedEditHandle: EditHandleFeature | null | undefined;
+    _geometryBeingRotated: FeatureCollection | null | undefined;
+    _isRotating: boolean;
+    _isSinglePointGeometrySelected: (geometry: FeatureCollection | null | undefined) => boolean;
+    getIsRotating: () => boolean;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    updateCursor(props: ModeProps<FeatureCollection>): void;
+    getRotateAction(startDragPoint: Position, currentPoint: Position, editType: string, props: ModeProps<FeatureCollection>): GeoJsonEditAction | null | undefined;
+}