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

package/dist/edit-modes/immutable-feature-collection.d.ts

@@ -0,0 +1,43 @@
+import { Feature, FeatureCollection, Geometry, Position } from '../geojson-types';
+export declare class ImmutableFeatureCollection {
+    featureCollection: FeatureCollection;
+    constructor(featureCollection: FeatureCollection);
+    getObject(): FeatureCollection;
+    /**
+     * Replaces the position deeply nested withing the given feature's geometry.
+     * Works with Point, MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the position to replace
+     * @param updatedPosition The updated position to place in the result (i.e. [lng, lat])
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given position replaced. Does not modify this `ImmutableFeatureCollection`.
+     */
+    replacePosition(featureIndex: number, positionIndexes: number[] | null | undefined, updatedPosition: Position): ImmutableFeatureCollection;
+    /**
+     * Removes a position deeply nested in a GeoJSON geometry coordinates array.
+     * Works with MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the postion to remove
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given coordinate removed. Does not modify this `ImmutableFeatureCollection`.
+     */
+    removePosition(featureIndex: number, positionIndexes: number[] | null | undefined): ImmutableFeatureCollection;
+    /**
+     * Adds a position deeply nested in a GeoJSON geometry coordinates array.
+     * Works with MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the position that will proceed the new position
+     * @param positionToAdd The new position to place in the result (i.e. [lng, lat])
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given coordinate removed. Does not modify this `ImmutableFeatureCollection`.
+     */
+    addPosition(featureIndex: number, positionIndexes: number[] | null | undefined, positionToAdd: Position): ImmutableFeatureCollection;
+    replaceGeometry(featureIndex: number, geometry: Geometry): ImmutableFeatureCollection;
+    addFeature(feature: Feature): ImmutableFeatureCollection;
+    addFeatures(features: Feature[]): ImmutableFeatureCollection;
+    deleteFeature(featureIndex: number): ImmutableFeatureCollection;
+    deleteFeatures(featureIndexes: number[]): ImmutableFeatureCollection;
+}

package/dist/edit-modes/immutable-feature-collection.js

@@ -0,0 +1,300 @@
+export class ImmutableFeatureCollection {
+    featureCollection;
+    constructor(featureCollection) {
+        this.featureCollection = featureCollection;
+    }
+    getObject() {
+        return this.featureCollection;
+    }
+    /**
+     * Replaces the position deeply nested withing the given feature's geometry.
+     * Works with Point, MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the position to replace
+     * @param updatedPosition The updated position to place in the result (i.e. [lng, lat])
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given position replaced. Does not modify this `ImmutableFeatureCollection`.
+     */
+    replacePosition(featureIndex, positionIndexes, updatedPosition) {
+        const geometry = this.featureCollection.features[featureIndex].geometry;
+        const isPolygonal = geometry.type === 'Polygon' || geometry.type === 'MultiPolygon';
+        const updatedGeometry = {
+            ...geometry,
+            coordinates: immutablyReplacePosition(geometry.coordinates, positionIndexes, updatedPosition, isPolygonal),
+        };
+        return this.replaceGeometry(featureIndex, updatedGeometry);
+    }
+    /**
+     * Removes a position deeply nested in a GeoJSON geometry coordinates array.
+     * Works with MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the postion to remove
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given coordinate removed. Does not modify this `ImmutableFeatureCollection`.
+     */
+    removePosition(featureIndex, positionIndexes) {
+        const geometry = this.featureCollection.features[featureIndex].geometry;
+        if (geometry.type === 'Point') {
+            throw Error('Can\'t remove a position from a Point or there\'d be nothing left');
+        }
+        if (geometry.type === 'MultiPoint' && // only 1 point left
+            geometry.coordinates.length < 2) {
+            throw Error('Can\'t remove the last point of a MultiPoint or there\'d be nothing left');
+        }
+        if (geometry.type === 'LineString' && // only 2 positions
+            geometry.coordinates.length < 3) {
+            throw Error('Can\'t remove position. LineString must have at least two positions');
+        }
+        if (geometry.type === 'Polygon' && // outer ring is a triangle
+            geometry.coordinates[0].length < 5 &&
+            Array.isArray(positionIndexes) && // trying to remove from outer ring
+            positionIndexes[0] === 0) {
+            throw Error('Can\'t remove position. Polygon\'s outer ring must have at least four positions');
+        }
+        if (geometry.type === 'MultiLineString' && // only 1 LineString left
+            geometry.coordinates.length === 1 && // only 2 positions
+            geometry.coordinates[0].length < 3) {
+            throw Error('Can\'t remove position. MultiLineString must have at least two positions');
+        }
+        if (geometry.type === 'MultiPolygon' && // only 1 polygon left
+            geometry.coordinates.length === 1 && // outer ring is a triangle
+            geometry.coordinates[0][0].length < 5 &&
+            Array.isArray(positionIndexes) && // trying to remove from first polygon
+            positionIndexes[0] === 0 && // trying to remove from outer ring
+            positionIndexes[1] === 0) {
+            throw Error('Can\'t remove position. MultiPolygon\'s outer ring must have at least four positions');
+        }
+        const isPolygonal = geometry.type === 'Polygon' || geometry.type === 'MultiPolygon';
+        const updatedGeometry = {
+            ...geometry,
+            coordinates: immutablyRemovePosition(geometry.coordinates, positionIndexes, isPolygonal),
+        };
+        // Handle cases where incomplete geometries need pruned (e.g. holes that were triangles)
+        pruneGeometryIfNecessary(updatedGeometry);
+        return this.replaceGeometry(featureIndex, updatedGeometry);
+    }
+    /**
+     * Adds a position deeply nested in a GeoJSON geometry coordinates array.
+     * Works with MultiPoint, LineString, MultiLineString, Polygon, and MultiPolygon.
+     *
+     * @param featureIndex The index of the feature to update
+     * @param positionIndexes An array containing the indexes of the position that will proceed the new position
+     * @param positionToAdd The new position to place in the result (i.e. [lng, lat])
+     *
+     * @returns A new `ImmutableFeatureCollection` with the given coordinate removed. Does not modify this `ImmutableFeatureCollection`.
+     */
+    addPosition(featureIndex, positionIndexes, positionToAdd) {
+        const geometry = this.featureCollection.features[featureIndex].geometry;
+        if (geometry.type === 'Point') {
+            throw new Error('Unable to add a position to a Point feature');
+        }
+        const isPolygonal = geometry.type === 'Polygon' || geometry.type === 'MultiPolygon';
+        const updatedGeometry = {
+            ...geometry,
+            coordinates: immutablyAddPosition(geometry.coordinates, positionIndexes, positionToAdd, isPolygonal),
+        };
+        return this.replaceGeometry(featureIndex, updatedGeometry);
+    }
+    replaceGeometry(featureIndex, geometry) {
+        const updatedFeature = {
+            ...this.featureCollection.features[featureIndex],
+            geometry,
+        };
+        const updatedFeatureCollection = {
+            ...this.featureCollection,
+            features: [
+                ...this.featureCollection.features.slice(0, featureIndex),
+                updatedFeature,
+                ...this.featureCollection.features.slice(featureIndex + 1),
+            ],
+        };
+        return new ImmutableFeatureCollection(updatedFeatureCollection);
+    }
+    addFeature(feature) {
+        return this.addFeatures([feature]);
+    }
+    addFeatures(features) {
+        const updatedFeatureCollection = {
+            ...this.featureCollection,
+            features: [...this.featureCollection.features, ...features],
+        };
+        return new ImmutableFeatureCollection(updatedFeatureCollection);
+    }
+    deleteFeature(featureIndex) {
+        return this.deleteFeatures([featureIndex]);
+    }
+    deleteFeatures(featureIndexes) {
+        const features = [...this.featureCollection.features];
+        featureIndexes.sort();
+        for (let i = featureIndexes.length - 1; i >= 0; i--) {
+            const featureIndex = featureIndexes[i];
+            if (featureIndex >= 0 && featureIndex < features.length) {
+                features.splice(featureIndex, 1);
+            }
+        }
+        const updatedFeatureCollection = {
+            ...this.featureCollection,
+            features,
+        };
+        return new ImmutableFeatureCollection(updatedFeatureCollection);
+    }
+}
+function getUpdatedPosition(updatedPosition, previousPosition) {
+    // This function checks if the updatedPosition is missing elevation
+    // and copies it from previousPosition
+    if (updatedPosition.length === 2 && previousPosition.length === 3) {
+        const elevation = previousPosition[2];
+        return [updatedPosition[0], updatedPosition[1], elevation];
+    }
+    return updatedPosition;
+}
+function immutablyReplacePosition(coordinates, positionIndexes, updatedPosition, isPolygonal) {
+    if (!positionIndexes) {
+        return coordinates;
+    }
+    if (positionIndexes.length === 0) {
+        return getUpdatedPosition(updatedPosition, coordinates);
+    }
+    if (positionIndexes.length === 1) {
+        const updated = [
+            ...coordinates.slice(0, positionIndexes[0]),
+            getUpdatedPosition(updatedPosition, coordinates[positionIndexes[0]]),
+            ...coordinates.slice(positionIndexes[0] + 1),
+        ];
+        if (isPolygonal &&
+            (positionIndexes[0] === 0 || positionIndexes[0] === coordinates.length - 1)) {
+            // for polygons, the first point is repeated at the end of the array
+            // so, update it on both ends of the array
+            updated[0] = getUpdatedPosition(updatedPosition, coordinates[0]);
+            updated[coordinates.length - 1] = getUpdatedPosition(updatedPosition, coordinates[0]);
+        }
+        return updated;
+    }
+    // recursively update inner array
+    return [
+        ...coordinates.slice(0, positionIndexes[0]),
+        immutablyReplacePosition(coordinates[positionIndexes[0]], positionIndexes.slice(1, positionIndexes.length), updatedPosition, isPolygonal),
+        ...coordinates.slice(positionIndexes[0] + 1),
+    ];
+}
+function immutablyRemovePosition(coordinates, positionIndexes, isPolygonal) {
+    if (!positionIndexes) {
+        return coordinates;
+    }
+    if (positionIndexes.length === 0) {
+        throw Error('Must specify the index of the position to remove');
+    }
+    if (positionIndexes.length === 1) {
+        const updated = [
+            ...coordinates.slice(0, positionIndexes[0]),
+            ...coordinates.slice(positionIndexes[0] + 1),
+        ];
+        if (isPolygonal &&
+            (positionIndexes[0] === 0 || positionIndexes[0] === coordinates.length - 1)) {
+            // for polygons, the first point is repeated at the end of the array
+            // so, if the first/last coordinate is to be removed, coordinates[1] will be the new first/last coordinate
+            if (positionIndexes[0] === 0) {
+                // change the last to be the same as the first
+                updated[updated.length - 1] = updated[0];
+            }
+            else if (positionIndexes[0] === coordinates.length - 1) {
+                // change the first to be the same as the last
+                updated[0] = updated[updated.length - 1];
+            }
+        }
+        return updated;
+    }
+    // recursively update inner array
+    return [
+        ...coordinates.slice(0, positionIndexes[0]),
+        immutablyRemovePosition(coordinates[positionIndexes[0]], positionIndexes.slice(1, positionIndexes.length), isPolygonal),
+        ...coordinates.slice(positionIndexes[0] + 1),
+    ];
+}
+function immutablyAddPosition(coordinates, positionIndexes, positionToAdd, isPolygonal) {
+    if (!positionIndexes) {
+        return coordinates;
+    }
+    if (positionIndexes.length === 0) {
+        throw Error('Must specify the index of the position to remove');
+    }
+    if (positionIndexes.length === 1) {
+        const updated = [
+            ...coordinates.slice(0, positionIndexes[0]),
+            positionToAdd,
+            ...coordinates.slice(positionIndexes[0]),
+        ];
+        return updated;
+    }
+    // recursively update inner array
+    return [
+        ...coordinates.slice(0, positionIndexes[0]),
+        immutablyAddPosition(coordinates[positionIndexes[0]], positionIndexes.slice(1, positionIndexes.length), positionToAdd, isPolygonal),
+        ...coordinates.slice(positionIndexes[0] + 1),
+    ];
+}
+function pruneGeometryIfNecessary(geometry) {
+    switch (geometry.type) {
+        case 'Polygon':
+            prunePolygonIfNecessary(geometry);
+            break;
+        case 'MultiLineString':
+            pruneMultiLineStringIfNecessary(geometry);
+            break;
+        case 'MultiPolygon':
+            pruneMultiPolygonIfNecessary(geometry);
+            break;
+        default:
+            // Not downgradable
+            break;
+    }
+}
+function prunePolygonIfNecessary(geometry) {
+    const polygon = geometry.coordinates;
+    // If any hole is no longer a polygon, remove the hole entirely
+    for (let holeIndex = 1; holeIndex < polygon.length; holeIndex++) {
+        if (removeHoleIfNecessary(polygon, holeIndex)) {
+            // It was removed, so keep the index the same
+            holeIndex--;
+        }
+    }
+}
+function pruneMultiLineStringIfNecessary(geometry) {
+    for (let lineStringIndex = 0; lineStringIndex < geometry.coordinates.length; lineStringIndex++) {
+        const lineString = geometry.coordinates[lineStringIndex];
+        if (lineString.length === 1) {
+            // Only a single position left on this LineString, so remove it (can't have Point in MultiLineString)
+            geometry.coordinates.splice(lineStringIndex, 1);
+            // Keep the index the same
+            lineStringIndex--;
+        }
+    }
+}
+function pruneMultiPolygonIfNecessary(geometry) {
+    for (let polygonIndex = 0; polygonIndex < geometry.coordinates.length; polygonIndex++) {
+        const polygon = geometry.coordinates[polygonIndex];
+        const outerRing = polygon[0];
+        // If the outer ring is no longer a polygon, remove the whole polygon
+        if (outerRing.length <= 3) {
+            geometry.coordinates.splice(polygonIndex, 1);
+            // It was removed, so keep the index the same
+            polygonIndex--;
+        }
+        for (let holeIndex = 1; holeIndex < polygon.length; holeIndex++) {
+            if (removeHoleIfNecessary(polygon, holeIndex)) {
+                // It was removed, so keep the index the same
+                holeIndex--;
+            }
+        }
+    }
+}
+function removeHoleIfNecessary(polygon, holeIndex) {
+    const hole = polygon[holeIndex];
+    if (hole.length <= 3) {
+        polygon.splice(holeIndex, 1);
+        return true;
+    }
+    return false;
+}

package/dist/edit-modes/measure-angle-mode.d.ts

@@ -0,0 +1,11 @@
+import { ClickEvent, PointerMoveEvent, Tooltip, ModeProps, GuideFeatureCollection } from './types';
+import { FeatureCollection, Position } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class MeasureAngleMode extends GeoJsonEditMode {
+    _getTooltips: (args: any) => any;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    getPoints(props: ModeProps<FeatureCollection>): Position[];
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    getTooltips(props: ModeProps<FeatureCollection>): Tooltip[];
+}

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

@@ -0,0 +1,99 @@
+import turfBearing from '@turf/bearing';
+import turfCenter from '@turf/center';
+import memoize from '../memoize';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+const DEFAULT_TOOLTIPS = [];
+export class MeasureAngleMode extends GeoJsonEditMode {
+    _getTooltips = memoize(({ modeConfig, vertex, point1, point2 }) => {
+        let tooltips = DEFAULT_TOOLTIPS;
+        if (vertex && point1 && point2) {
+            const { formatTooltip, measurementCallback } = modeConfig || {};
+            const units = 'deg';
+            const angle1 = turfBearing(vertex, point1);
+            const angle2 = turfBearing(vertex, point2);
+            let angle = Math.abs(angle1 - angle2);
+            if (angle > 180) {
+                angle = 360 - angle;
+            }
+            let text;
+            if (formatTooltip) {
+                text = formatTooltip(angle);
+            }
+            else {
+                // By default, round to 2 decimal places and append units
+                // @ts-expect-error angle isn't string
+                text = `${parseFloat(angle).toFixed(2)} ${units}`;
+            }
+            if (measurementCallback) {
+                measurementCallback(angle);
+            }
+            const position = turfCenter({
+                type: 'FeatureCollection',
+                features: [point1, point2].map((p) => ({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: p,
+                    },
+                    properties: {}
+                })),
+            }).geometry.coordinates;
+            tooltips = [{ position, text }];
+        }
+        return tooltips;
+    });
+    handleClick(event, props) {
+        if (this.getClickSequence().length >= 3) {
+            this.resetClickSequence();
+        }
+        this.addClickSequence(event);
+    }
+    // Called when the pointer moved, regardless of whether the pointer is down, up, and whether something was picked
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+    }
+    getPoints(props) {
+        const clickSequence = this.getClickSequence();
+        const points = [...clickSequence];
+        if (clickSequence.length < 3 && props.lastPointerMoveEvent) {
+            points.push(props.lastPointerMoveEvent.mapCoords);
+        }
+        return points;
+    }
+    // Return features that can be used as a guide for editing the data
+    getGuides(props) {
+        const guides = { type: 'FeatureCollection', features: [] };
+        const { features } = guides;
+        const points = this.getPoints(props);
+        if (points.length > 2) {
+            features.push({
+                type: 'Feature',
+                properties: { guideType: 'tentative' },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [points[1], points[0], points[2]],
+                },
+            });
+        }
+        else if (points.length > 1) {
+            features.push({
+                type: 'Feature',
+                properties: { guideType: 'tentative' },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [points[1], points[0]],
+                },
+            });
+        }
+        return guides;
+    }
+    getTooltips(props) {
+        const points = this.getPoints(props);
+        return this._getTooltips({
+            modeConfig: props.modeConfig,
+            vertex: points[0],
+            point1: points[1],
+            point2: points[2],
+        });
+    }
+}

package/dist/edit-modes/measure-area-mode.d.ts

@@ -0,0 +1,8 @@
+import { ClickEvent, Tooltip, ModeProps } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { DrawPolygonMode } from './draw-polygon-mode';
+export declare class MeasureAreaMode extends DrawPolygonMode {
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void;
+    getTooltips(props: ModeProps<FeatureCollection>): Tooltip[];
+}

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

@@ -0,0 +1,50 @@
+import turfArea from '@turf/area';
+import turfCentroid from '@turf/centroid';
+import { DrawPolygonMode } from './draw-polygon-mode';
+const DEFAULT_TOOLTIPS = [];
+export class MeasureAreaMode extends DrawPolygonMode {
+    handleClick(event, props) {
+        const propsWithoutEdit = {
+            ...props,
+            onEdit: () => { },
+        };
+        super.handleClick(event, propsWithoutEdit);
+    }
+    handleKeyUp(event, props) {
+        const propsWithoutEdit = {
+            ...props,
+            onEdit: () => { },
+        };
+        super.handleKeyUp(event, propsWithoutEdit);
+    }
+    getTooltips(props) {
+        const tentativeGuide = this.getTentativeGuide(props);
+        if (tentativeGuide && tentativeGuide.geometry.type === 'Polygon') {
+            const { modeConfig } = props;
+            const { formatTooltip, measurementCallback } = modeConfig || {};
+            const units = 'sq. m';
+            const centroid = turfCentroid(tentativeGuide);
+            const area = turfArea(tentativeGuide);
+            let text;
+            if (formatTooltip) {
+                text = formatTooltip(area);
+            }
+            else {
+                // By default, round to 2 decimal places and append units
+                // @ts-expect-error are isn't string
+                text = `${parseFloat(area).toFixed(2)} ${units}`;
+            }
+            if (measurementCallback) {
+                measurementCallback(area);
+            }
+            return [
+                {
+                    // @ts-expect-error turf types diff
+                    position: centroid.geometry.coordinates,
+                    text,
+                },
+            ];
+        }
+        return DEFAULT_TOOLTIPS;
+    }
+}

package/dist/edit-modes/measure-distance-mode.d.ts

@@ -0,0 +1,19 @@
+import { FeatureCollection } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, Tooltip } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class MeasureDistanceMode extends GeoJsonEditMode {
+    _isMeasuringSessionFinished: boolean;
+    _currentTooltips: Tooltip[];
+    _currentDistance: number;
+    _calculateDistanceForTooltip: ({ positionA, positionB, modeConfig }: {
+        positionA: any;
+        positionB: any;
+        modeConfig: any;
+    }) => number;
+    _formatTooltip(distance: any, modeConfig?: any): any;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    getTooltips(props: ModeProps<FeatureCollection>): Tooltip[];
+}