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

package/dist/edit-modes/three-click-polygon-mode.js

@@ -0,0 +1,72 @@
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class ThreeClickPolygonMode extends GeoJsonEditMode {
+    handleClick(event, props) {
+        this.addClickSequence(event);
+        const clickSequence = this.getClickSequence();
+        const tentativeFeature = this.getTentativeGuide(props);
+        if (clickSequence.length > 2 &&
+            tentativeFeature &&
+            tentativeFeature.geometry.type === 'Polygon') {
+            const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry, props);
+            this.resetClickSequence();
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+    }
+    getGuides(props) {
+        const { lastPointerMoveEvent, modeConfig } = props;
+        const clickSequence = this.getClickSequence();
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        if (clickSequence.length === 0) {
+            // nothing to do yet
+            return guides;
+        }
+        const hoveredCoord = lastPointerMoveEvent.mapCoords;
+        if (clickSequence.length === 1) {
+            guides.features.push({
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [clickSequence[0], hoveredCoord],
+                },
+            });
+        }
+        else {
+            const polygon = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], hoveredCoord, modeConfig);
+            if (polygon) {
+                guides.features.push({
+                    type: 'Feature',
+                    properties: {
+                        guideType: 'tentative',
+                    },
+                    geometry: polygon.geometry,
+                });
+            }
+        }
+        return guides;
+    }
+    getThreeClickPolygon(coord1, coord2, coord3, modeConfig) {
+        return null;
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+        super.handlePointerMove(event, props);
+    }
+    createTentativeFeature(props) {
+        const { lastPointerMoveEvent } = props;
+        const clickSequence = this.getClickSequence();
+        const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+        let tentativeFeature;
+        if (clickSequence.length === 2) {
+            tentativeFeature = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], lastCoords[0], props.modeConfig);
+        }
+        return tentativeFeature;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { PointerMoveEvent, ModeProps, StartDraggingEvent } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { CompositeMode } from './composite-mode';
+export declare class TransformMode extends CompositeMode {
+    constructor();
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): import("./types").GuideFeatureCollection;
+}

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

@@ -0,0 +1,63 @@
+import { featureCollection } from '@turf/helpers';
+import { TranslateMode } from './translate-mode';
+import { ScaleMode } from './scale-mode';
+import { RotateMode } from './rotate-mode';
+import { CompositeMode } from './composite-mode';
+export class TransformMode extends CompositeMode {
+    constructor() {
+        super([new TranslateMode(), new ScaleMode(), new RotateMode()]);
+    }
+    handlePointerMove(event, props) {
+        let updatedCursor = null;
+        super.handlePointerMove(event, {
+            ...props,
+            onUpdateCursor: (cursor) => {
+                updatedCursor = cursor || updatedCursor;
+            },
+        });
+        props.onUpdateCursor(updatedCursor);
+    }
+    handleStartDragging(event, props) {
+        let scaleMode = null;
+        let translateMode = null;
+        const filteredModes = [];
+        // If the user selects a scaling edit handle that overlaps with part of the selected feature,
+        // it is possible for both scale and translate actions to be triggered. This logic prevents
+        // this simultaneous action trigger from happening by putting a higher priority on scaling
+        // since the user needs to be more precise to hover over a scaling edit handle.
+        this._modes.forEach((mode) => {
+            if (mode instanceof TranslateMode) {
+                translateMode = mode;
+            }
+            else {
+                if (mode instanceof ScaleMode) {
+                    scaleMode = mode;
+                }
+                filteredModes.push(mode);
+            }
+        });
+        if (scaleMode instanceof ScaleMode && !scaleMode.isEditHandleSelected()) {
+            filteredModes.push(translateMode);
+        }
+        filteredModes.filter(Boolean).forEach((mode) => mode.handleStartDragging(event, props));
+    }
+    getGuides(props) {
+        let compositeGuides = super.getGuides(props);
+        const rotateMode = (this._modes || []).find((mode) => mode instanceof RotateMode);
+        if (rotateMode instanceof RotateMode) {
+            const nonEnvelopeGuides = compositeGuides.features.filter((guide) => {
+                const { editHandleType, mode } = guide.properties || {};
+                // Both scale and rotate modes have the same enveloping box as a guide - only need one
+                const guidesToFilterOut = [mode];
+                // Do not render scaling edit handles if rotating
+                if (rotateMode.getIsRotating()) {
+                    guidesToFilterOut.push(editHandleType);
+                }
+                return !guidesToFilterOut.includes('scale');
+            });
+            // @ts-expect-error turf types
+            compositeGuides = featureCollection(nonEnvelopeGuides);
+        }
+        return compositeGuides;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, ModeProps } from './types';
+import { GeoJsonEditMode, GeoJsonEditAction } from './geojson-edit-mode';
+export declare class TranslateMode extends GeoJsonEditMode {
+    _geometryBeforeTranslate: FeatureCollection | null | undefined;
+    _isTranslatable: boolean;
+    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;
+    getTranslateAction(startDragPoint: Position, currentPoint: Position, editType: string, props: ModeProps<FeatureCollection>): GeoJsonEditAction | null | undefined;
+}

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

@@ -0,0 +1,113 @@
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import clone from '@turf/clone';
+import { point } from '@turf/helpers';
+import WebMercatorViewport from 'viewport-mercator-project';
+import { mapCoords } from './utils';
+import { translateFromCenter } from '../translateFromCenter';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+import { ImmutableFeatureCollection } from './immutable-feature-collection';
+export class TranslateMode extends GeoJsonEditMode {
+    _geometryBeforeTranslate;
+    _isTranslatable = undefined;
+    handleDragging(event, props) {
+        if (!this._isTranslatable) {
+            // Nothing to do
+            return;
+        }
+        if (this._geometryBeforeTranslate) {
+            // Translate the geometry
+            const editAction = this.getTranslateAction(event.pointerDownMapCoords, event.mapCoords, 'translating', props);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+        // cancel map panning
+        event.cancelPan();
+    }
+    handlePointerMove(event, props) {
+        this._isTranslatable = this.isSelectionPicked(event.pointerDownPicks || event.picks, props);
+        this.updateCursor(props);
+    }
+    handleStartDragging(event, props) {
+        if (!this._isTranslatable) {
+            return;
+        }
+        this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection(props);
+    }
+    handleStopDragging(event, props) {
+        if (this._geometryBeforeTranslate) {
+            // Translate the geometry
+            const editAction = this.getTranslateAction(event.pointerDownMapCoords, event.mapCoords, 'translated', props);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+            this._geometryBeforeTranslate = null;
+        }
+    }
+    updateCursor(props) {
+        if (this._isTranslatable) {
+            props.onUpdateCursor('move');
+        }
+        else {
+            props.onUpdateCursor(null);
+        }
+    }
+    // eslint-disable-next-line max-statements
+    getTranslateAction(startDragPoint, currentPoint, editType, props) {
+        if (!this._geometryBeforeTranslate) {
+            return null;
+        }
+        let updatedData = new ImmutableFeatureCollection(props.data);
+        const selectedIndexes = props.selectedIndexes;
+        const { viewport: viewportDesc, screenSpace } = props.modeConfig || {};
+        // move features without adapting to mercator projection
+        if (viewportDesc && screenSpace) {
+            const viewport = viewportDesc.project ? viewportDesc : new WebMercatorViewport(viewportDesc);
+            const from = viewport.project(startDragPoint);
+            const to = viewport.project(currentPoint);
+            const dx = to[0] - from[0];
+            const dy = to[1] - from[1];
+            for (let i = 0; i < selectedIndexes.length; i++) {
+                const selectedIndex = selectedIndexes[i];
+                const feature = this._geometryBeforeTranslate.features[i];
+                let coordinates = feature.geometry.coordinates;
+                if (coordinates) {
+                    coordinates = mapCoords(coordinates, (coord) => {
+                        const pixels = viewport.project(coord);
+                        if (pixels) {
+                            pixels[0] += dx;
+                            pixels[1] += dy;
+                            return viewport.unproject(pixels);
+                        }
+                        return null;
+                    });
+                    // @ts-expect-error turf types
+                    updatedData = updatedData.replaceGeometry(selectedIndex, {
+                        type: feature.geometry.type,
+                        coordinates,
+                    });
+                }
+            }
+        }
+        else {
+            const p1 = point(startDragPoint);
+            const p2 = point(currentPoint);
+            const distanceMoved = turfDistance(p1, p2);
+            const direction = turfBearing(p1, p2);
+            const movedFeatures = this._geometryBeforeTranslate.features.map((feature) => translateFromCenter(clone(feature), distanceMoved, direction));
+            for (let i = 0; i < selectedIndexes.length; i++) {
+                const selectedIndex = selectedIndexes[i];
+                const movedFeature = movedFeatures[i];
+                updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+            }
+        }
+        return {
+            updatedData: updatedData.getObject(),
+            editType,
+            editContext: {
+                featureIndexes: selectedIndexes,
+            },
+        };
+    }
+}

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

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

package/dist/edit-modes/two-click-polygon-mode.js

@@ -0,0 +1,93 @@
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class TwoClickPolygonMode extends GeoJsonEditMode {
+    handleClick(event, props) {
+        if (props.modeConfig && props.modeConfig.dragToDraw) {
+            // handled in drag handlers
+            return;
+        }
+        this.addClickSequence(event);
+        this.checkAndFinishPolygon(props);
+    }
+    handleStartDragging(event, props) {
+        if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+            // handled in click handlers
+            return;
+        }
+        this.addClickSequence(event);
+        event.cancelPan();
+    }
+    handleStopDragging(event, props) {
+        if (!props.modeConfig || !props.modeConfig.dragToDraw) {
+            // handled in click handlers
+            return;
+        }
+        this.addClickSequence(event);
+        this.checkAndFinishPolygon(props);
+    }
+    checkAndFinishPolygon(props) {
+        const clickSequence = this.getClickSequence();
+        const tentativeFeature = this.getTentativeGuide(props);
+        if (clickSequence.length > 1 &&
+            tentativeFeature &&
+            tentativeFeature.geometry.type === 'Polygon') {
+            const feature = {
+                type: 'Feature',
+                properties: {
+                    shape: tentativeFeature.properties.shape,
+                },
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: tentativeFeature.geometry.coordinates,
+                },
+            };
+            const editAction = this.getAddFeatureOrBooleanPolygonAction(feature, props);
+            this.resetClickSequence();
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+    }
+    getGuides(props) {
+        const { lastPointerMoveEvent, modeConfig } = props;
+        const clickSequence = this.getClickSequence();
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        if (clickSequence.length === 0 || !lastPointerMoveEvent) {
+            // nothing to do yet
+            return guides;
+        }
+        const corner1 = clickSequence[0];
+        const corner2 = lastPointerMoveEvent.mapCoords;
+        const polygon = this.getTwoClickPolygon(corner1, corner2, modeConfig);
+        if (polygon) {
+            guides.features.push({
+                type: 'Feature',
+                properties: {
+                    shape: polygon.properties && polygon.properties.shape,
+                    guideType: 'tentative',
+                },
+                geometry: polygon.geometry,
+            });
+        }
+        return guides;
+    }
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        return null;
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+        super.handlePointerMove(event, props);
+    }
+    createTentativeFeature(props) {
+        const { lastPointerMoveEvent } = props;
+        const clickSequence = this.getClickSequence();
+        const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+        let tentativeFeature;
+        if (clickSequence.length === 1) {
+            tentativeFeature = this.getTwoClickPolygon(clickSequence[0], lastCoords[0], props.modeConfig);
+        }
+        return tentativeFeature;
+    }
+}

package/dist/edit-modes/types.d.ts

@@ -0,0 +1,86 @@
+import { Position, Point, Geometry, FeatureWithProps } from '../geojson-types';
+export type ScreenCoordinates = [number, number];
+export type EditAction<TData> = {
+    updatedData: TData;
+    editType: string;
+    editContext: any;
+};
+export type Pick = {
+    index: number;
+    object?: any;
+    isGuide?: boolean;
+    featureIndex?: number;
+    type?: string;
+    isEditingHandle?: boolean | null;
+};
+export type Viewport = {
+    width: number;
+    height: number;
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    bearing?: number;
+    pitch?: number;
+};
+export type BasePointerEvent = {
+    picks: Pick[];
+    screenCoords: ScreenCoordinates;
+    mapCoords: Position;
+    sourceEvent: any;
+};
+export type ClickEvent = BasePointerEvent;
+export type StartDraggingEvent = BasePointerEvent & {
+    pointerDownPicks?: Pick[] | null;
+    pointerDownScreenCoords: ScreenCoordinates;
+    pointerDownMapCoords: Position;
+    cancelPan: () => void;
+};
+export type StopDraggingEvent = BasePointerEvent & {
+    pointerDownPicks?: Pick[] | null;
+    pointerDownScreenCoords: ScreenCoordinates;
+    pointerDownMapCoords: Position;
+};
+export type DraggingEvent = BasePointerEvent & {
+    pointerDownPicks?: Pick[] | null;
+    pointerDownScreenCoords: ScreenCoordinates;
+    pointerDownMapCoords: Position;
+    cancelPan: () => void;
+};
+export type PointerMoveEvent = BasePointerEvent & {
+    pointerDownPicks?: Pick[] | null;
+    pointerDownScreenCoords?: ScreenCoordinates | null;
+    pointerDownMapCoords?: Position | null;
+    cancelPan: () => void;
+    isDragging?: boolean;
+};
+export type Tooltip = {
+    position: Position;
+    text: string;
+};
+export type EditHandleType = 'existing' | 'intermediate' | 'snap-source' | 'snap-target' | 'scale' | 'rotate';
+export type EditHandleFeature = FeatureWithProps<Point, {
+    guideType: 'editHandle';
+    editHandleType: EditHandleType;
+    featureIndex: number;
+    positionIndexes?: number[];
+    shape?: string;
+}>;
+export type TentativeFeature = FeatureWithProps<Geometry, {
+    guideType: 'tentative';
+    shape?: string;
+}>;
+export type GuideFeature = EditHandleFeature | TentativeFeature;
+export type GuideFeatureCollection = {
+    type: 'FeatureCollection';
+    features: Readonly<GuideFeature>[];
+    properties?: {};
+};
+export type ModeProps<TData> = {
+    data: TData;
+    modeConfig: any;
+    selectedIndexes: number[];
+    cursor: string | null | undefined;
+    lastPointerMoveEvent: PointerMoveEvent;
+    onEdit: (editAction: EditAction<TData>) => void;
+    onUpdateCursor: (cursor: string | null | undefined) => void;
+};

package/dist/edit-modes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/edit-modes/utils.d.ts

@@ -0,0 +1,36 @@
+import { MultiLineString } from '@turf/helpers';
+import { Viewport, Pick, EditHandleFeature, EditHandleType } from './types';
+import { Geometry, Position, Point, LineString, Polygon, FeatureOf, FeatureWithProps, AnyCoordinates } from '../geojson-types';
+export type NearestPointType = FeatureWithProps<Point, {
+    dist: number;
+    index: number;
+}>;
+export declare function toDeckColor(color?: [number, number, number, number] | number, defaultColor?: [number, number, number, number]): [number, number, number, number];
+export declare function recursivelyTraverseNestedArrays(array: Array<any>, prefix: Array<number>, fn: (array: Array<any>, prefix: number[]) => void): boolean;
+export declare function generatePointsParallelToLinePoints(p1: Position, p2: Position, mapCoords: Position): Position[];
+export declare function distance2d(x1: number, y1: number, x2: number, y2: number): number;
+export declare function mix(a: number, b: number, ratio: number): number;
+export declare function nearestPointOnProjectedLine(line: FeatureOf<LineString>, inPoint: FeatureOf<Point>, viewport: Viewport): NearestPointType;
+export declare function nearestPointOnLine<G extends LineString | MultiLineString>(lines: FeatureOf<LineString>, inPoint: FeatureOf<Point>, viewport?: Viewport): NearestPointType;
+export declare function getPickedEditHandle(picks: Pick[] | null | undefined): EditHandleFeature | null | undefined;
+export declare function getPickedSnapSourceEditHandle(picks: Pick[] | null | undefined): EditHandleFeature | null | undefined;
+export declare function getNonGuidePicks(picks: Pick[]): Pick[];
+export declare function getPickedExistingEditHandle(picks: Pick[] | null | undefined): EditHandleFeature | null | undefined;
+export declare function getPickedIntermediateEditHandle(picks: Pick[] | null | undefined): EditHandleFeature | null | undefined;
+export declare function getPickedEditHandles(picks: Pick[] | null | undefined): EditHandleFeature[];
+export declare function getEditHandlesForGeometry(geometry: Geometry, featureIndex: number, editHandleType?: EditHandleType): EditHandleFeature[];
+/**
+ * Calculates coordinates for a feature preserving rectangular shape.
+ * @param feature Feature before modification.
+ * @param editHandleIndex Index of the point to modify.
+ * @param mapCoords New position for the point.
+ * @returns Updated coordinates.
+ */
+export declare function updateRectanglePosition(feature: FeatureOf<Polygon>, editHandleIndex: number, mapCoords: Position): Position[][] | null;
+/** Creates a copy of feature's coordinates.
+ * Each position in coordinates is transformed by calling the provided function.
+ * @param coords Coordinates of a feature.
+ * @param callback A function to transform each coordinate.
+ * @retuns Transformed coordinates.
+ */
+export declare function mapCoords(coords: AnyCoordinates, callback: (coords: Position) => Position): AnyCoordinates;