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

package/dist/lib/layers/segments-layer.js

@@ -0,0 +1,94 @@
+import { ArrowStyles, DEFAULT_STYLE, MAX_ARROWS } from '../style';
+import NebulaLayer from '../nebula-layer';
+import { toDeckColor } from '../../utils';
+import DeckCache from '../deck-renderer/deck-cache';
+import PathMarkerLayer from '../../editable-layers/path-marker-layer/path-marker-layer';
+const NEBULA_TO_DECK_DIRECTIONS = {
+    [ArrowStyles.NONE]: { forward: false, backward: false },
+    [ArrowStyles.FORWARD]: { forward: true, backward: false },
+    [ArrowStyles.BACKWARD]: { forward: false, backward: true },
+    [ArrowStyles.BOTH]: { forward: true, backward: true },
+};
+export default class SegmentsLayer extends NebulaLayer {
+    deckCache;
+    noBlend;
+    highlightColor;
+    arrowSize;
+    jointRounded;
+    capRounded;
+    dashed;
+    markerLayerProps;
+    constructor(config) {
+        super(config);
+        this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
+        this.enableSelection = true;
+        this.enablePicking = config.enablePicking ?? true;
+        this.noBlend = config.noBlend ?? false;
+        this.jointRounded = config.jointRounded ?? true;
+        this.capRounded = config.capRounded ?? true;
+        this.dashed = config.dashed ?? false;
+        this.markerLayerProps = config.markerLayerProps ?? null;
+        this.highlightColor = [1, 1, 1, 1];
+        this.arrowSize = 1;
+    }
+    getMouseOverSegment() {
+        // TODO: remove references
+        return null;
+    }
+    _calcMarkerPercentages(nf) {
+        const { arrowPercentages } = nf.style;
+        if (arrowPercentages) {
+            return arrowPercentages;
+        }
+        const arrowStyle = nf.style.arrowStyle || DEFAULT_STYLE.arrowStyle;
+        if (arrowStyle === ArrowStyles.NONE)
+            return [];
+        const arrowCount = Math.min(nf.style.arrowCount || DEFAULT_STYLE.arrowCount, MAX_ARROWS);
+        return [[0.5], [0.33, 0.66], [0.25, 0.5, 0.75]][arrowCount - 1];
+    }
+    _getHighlightedObjectIndex({ nebula }) {
+        const { deckglMouseOverInfo } = nebula;
+        if (deckglMouseOverInfo) {
+            const { originalLayer, index } = deckglMouseOverInfo;
+            if (originalLayer === this) {
+                return index;
+            }
+        }
+        // no object
+        return -1;
+    }
+    render({ nebula }) {
+        const defaultColor = [0x0, 0x0, 0x0, 0xff];
+        const { objects, updateTrigger } = this.deckCache;
+        return new PathMarkerLayer({
+            id: `segments-${this.id}`,
+            data: objects,
+            opacity: 1,
+            fp64: false,
+            jointRounded: this.jointRounded,
+            capRounded: this.capRounded,
+            pickable: true,
+            sizeScale: this.arrowSize || 6,
+            parameters: {
+                depthCompare: 'always',
+                blendColorOperation: this.noBlend ? undefined : 'max',
+            },
+            getPath: (nf) => nf.geoJson.geometry.coordinates,
+            getColor: (nf) => toDeckColor(nf.style.lineColor, defaultColor),
+            getWidth: (nf) => nf.style.lineWidthMeters || 1,
+            getZLevel: (nf) => nf.style.zLevel * 255,
+            getDirection: (nf) => NEBULA_TO_DECK_DIRECTIONS[nf.style.arrowStyle],
+            getMarkerColor: (nf) => toDeckColor(nf.style.arrowColor, defaultColor),
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            getMarkerPercentages: this._calcMarkerPercentages,
+            updateTriggers: { all: updateTrigger },
+            highlightedObjectIndex: this._getHighlightedObjectIndex({ nebula }),
+            highlightColor: toDeckColor(this.highlightColor),
+            dashJustified: this.dashed,
+            getDashArray: this.dashed ? (nf) => nf.style.dashArray : undefined,
+            markerLayerProps: this.markerLayerProps ||
+                PathMarkerLayer.defaultProps.markerLayerProps,
+            nebulaLayer: this,
+        });
+    }
+}

package/dist/lib/layers/texts-layer.d.ts

@@ -0,0 +1,8 @@
+import { TextLayer } from '@deck.gl/layers';
+import NebulaLayer from '../nebula-layer';
+import DeckCache from '../deck-renderer/deck-cache';
+export default class TextsLayer extends NebulaLayer {
+    deckCache: DeckCache<any, any>;
+    constructor(config: Record<string, any>);
+    render({ nebula }: Record<string, any>): TextLayer;
+}

package/dist/lib/layers/texts-layer.js

@@ -0,0 +1,32 @@
+import { TextLayer } from '@deck.gl/layers';
+import NebulaLayer from '../nebula-layer';
+import { toDeckColor } from '../../utils';
+import { PROJECTED_PIXEL_SIZE_MULTIPLIER } from '../constants';
+import DeckCache from '../deck-renderer/deck-cache';
+export default class TextsLayer extends NebulaLayer {
+    deckCache;
+    constructor(config) {
+        super(config);
+        this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
+    }
+    render({ nebula }) {
+        const defaultColor = [0x0, 0x0, 0x0, 0xff];
+        const { objects, updateTrigger } = this.deckCache;
+        const { zoom } = nebula.props.viewport;
+        return new TextLayer({
+            id: `texts-${this.id}`,
+            data: objects,
+            opacity: 1,
+            fp64: false,
+            pickable: false,
+            getText: (nf) => nf.style.text,
+            getPosition: (nf) => nf.geoJson.geometry.coordinates,
+            getColor: (nf) => toDeckColor(nf.style.fillColor) || defaultColor,
+            // TODO: layer should offer option to scale with zoom
+            sizeScale: 1 / Math.pow(2, 20 - zoom),
+            getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
+            updateTriggers: { all: updateTrigger },
+            nebulaLayer: this,
+        });
+    }
+}

package/dist/lib/math.d.ts

@@ -0,0 +1,11 @@
+import { Position } from '../geojson-types';
+export declare function toDegree(radian: number): number;
+export declare function toRadian(angle: number): number;
+/**
+ * Converts an array of latitudes, longitudes in E7 format to a list of points in degrees.
+ *
+ * @param {[]} array: An E7 array [lat_e7, lng_e7, lat_e7, lng_e7, ...]
+ * @return {[]} An array of points in degrees
+ *              [ [lng_degrees, lat_degrees], [lng_degrees, lat_degrees], ...]
+ */
+export declare function convertE7Array(array: number[]): Position[];

package/dist/lib/math.js

@@ -0,0 +1,22 @@
+export function toDegree(radian) {
+    return (radian * 180) / Math.PI;
+}
+export function toRadian(angle) {
+    return (angle * Math.PI) / 180;
+}
+/**
+ * Converts an array of latitudes, longitudes in E7 format to a list of points in degrees.
+ *
+ * @param {[]} array: An E7 array [lat_e7, lng_e7, lat_e7, lng_e7, ...]
+ * @return {[]} An array of points in degrees
+ *              [ [lng_degrees, lat_degrees], [lng_degrees, lat_degrees], ...]
+ */
+export function convertE7Array(array) {
+    const points = [];
+    for (let i = 0; i < array.length; i += 2) {
+        const lat = array[i] * 1e-7;
+        const lng = array[i + 1] * 1e-7;
+        points.push([lng, lat]);
+    }
+    return points;
+}

package/dist/lib/nebula-layer.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from 'eventemitter3';
+import Feature from './feature';
+export default class NebulaLayer extends EventEmitter {
+    getData: () => Record<string, any>[];
+    toNebulaFeature: (data: Record<string, any>) => Feature;
+    id: string;
+    helperLayers: Record<string, any>[];
+    usesMapEvents: boolean;
+    enablePicking: boolean;
+    enableSelection: boolean;
+    constructor({ getData, on, toNebulaFeature }: Record<string, any>);
+    render(config: Record<string, any>): unknown;
+}

package/dist/lib/nebula-layer.js

@@ -0,0 +1,26 @@
+import { EventEmitter } from 'eventemitter3';
+import { v4 } from 'uuid';
+export default class NebulaLayer extends EventEmitter {
+    getData;
+    toNebulaFeature;
+    id;
+    helperLayers;
+    // flags
+    usesMapEvents = false;
+    enablePicking = false;
+    enableSelection = false;
+    //
+    constructor({ getData, on, toNebulaFeature }) {
+        super();
+        this.id = v4();
+        this.getData = getData;
+        this.toNebulaFeature = toNebulaFeature;
+        this.helperLayers = [];
+        if (on) {
+            Object.keys(on).forEach((key) => this.on(key, on[key]));
+        }
+    }
+    render(config) {
+        return null;
+    }
+}

package/dist/lib/nebula.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from 'eventemitter3';
+import { WebMercatorViewport } from '@deck.gl/core';
+import DeckDrawer from './deck-renderer/deck-drawer';
+export default class Nebula {
+    init(props: Record<string, any>): void;
+    detach(): void;
+    updateProps(newProps: Record<string, any>): void;
+    props: Record<string, any>;
+    deckgl: Record<string, any> | null;
+    mainContainer: Record<string, any> | null;
+    deckglMouseOverInfo: Record<string, any> | null | undefined;
+    _deckDrawer: DeckDrawer;
+    _mouseWasDown: boolean;
+    wmViewport: WebMercatorViewport;
+    queryObjectEvents: EventEmitter<string | symbol, any>;
+    forceUpdate: () => any;
+    inited: boolean;
+    log(message: string): void;
+    updateAllDeckObjects(): void;
+    updateDeckObjectsByIds(ids: string[]): void;
+    rerenderLayers(): void;
+    _isNebulaEvent({ buttons, target, type }: Record<string, any>): boolean;
+    _onMouseEvent: (event: MouseEvent) => void;
+    getMouseGroundPosition(event: Record<string, any>): [number, number];
+    unprojectMousePosition(mousePosition: [number, number]): [number, number];
+    _handleDeckGLEvent(event: Record<string, any>): void;
+    getExtraDeckLayers(): Record<string, any>[];
+    renderDeckLayers(): unknown[];
+    getAllLayers(): Record<string, any>[];
+    getRenderedLayers(): unknown[];
+    updateAndGetRenderedLayers(layers: Record<string, any>[], viewport: WebMercatorViewport, container: Record<string, any>): unknown[];
+    setDeck(deckgl: Record<string, any> | null): void;
+    setMainContainer(mainContainer: Record<string, any> | null): void;
+}

package/dist/lib/nebula.js

@@ -0,0 +1,254 @@
+import { EventEmitter } from 'eventemitter3';
+import { WebMercatorViewport } from '@deck.gl/core';
+import DeckDrawer from './deck-renderer/deck-drawer';
+import LayerMouseEvent from './layer-mouse-event';
+import NebulaLayer from './nebula-layer';
+const LOGGER_PREFIX = 'Nebula: ';
+export default class Nebula {
+    init(props) {
+        this.props = props;
+        this.wmViewport = new WebMercatorViewport(this.props.viewport);
+        // TODO: Properly use pointer events: ['click', 'pointermove', 'pointerup', 'pointerdown']
+        ['click', 'mousemove', 'mouseup', 'mousedown'].forEach((name) => document.addEventListener(name, this._onMouseEvent, true));
+    }
+    detach() {
+        // TODO: Properly use pointer events: ['click', 'pointermove', 'pointerup', 'pointerdown']
+        ['click', 'mousemove', 'mouseup', 'mousedown'].forEach((name) => document.removeEventListener(name, this._onMouseEvent, true));
+    }
+    updateProps(newProps) {
+        this.props = newProps;
+        const { viewport } = this.props;
+        this.wmViewport = new WebMercatorViewport(viewport);
+    }
+    props = null;
+    deckgl = null;
+    mainContainer = null;
+    deckglMouseOverInfo = null;
+    _deckDrawer = null;
+    _mouseWasDown = null;
+    wmViewport = null;
+    queryObjectEvents = new EventEmitter();
+    forceUpdate = null;
+    inited = null;
+    log(message) {
+        const { logger } = this.props;
+        if (logger && logger.info) {
+            logger.info(LOGGER_PREFIX + message);
+        }
+    }
+    updateAllDeckObjects() {
+        this.getAllLayers().forEach((layer) => {
+            if (layer && layer.deckCache) {
+                layer.deckCache.updateAllDeckObjects();
+            }
+        });
+        this.forceUpdate();
+    }
+    updateDeckObjectsByIds(ids) {
+        this.getAllLayers().forEach((layer) => {
+            if (layer && layer.deckCache) {
+                layer.deckCache.updateDeckObjectsByIds(ids);
+            }
+        });
+        this.forceUpdate();
+    }
+    rerenderLayers() {
+        this.updateAllDeckObjects();
+    }
+    _isNebulaEvent({ buttons, target, type }) {
+        const { viewport } = this.props;
+        // allow mouseup event aggressively to cancel drag properly
+        // TODO: use pointer capture setPointerCapture() to capture mouseup properly after deckgl
+        if (this._mouseWasDown && type === 'mouseup') {
+            this._mouseWasDown = false;
+            return true;
+        }
+        // allow mousemove event while dragging
+        if (type === 'mousemove' && buttons > 0) {
+            return true;
+        }
+        if (!target.getBoundingClientRect) {
+            return false;
+        }
+        const rect = target.getBoundingClientRect();
+        // Only listen to events coming from the basemap
+        // identified by the canvas of the same size as viewport.
+        // Need to round the rect dimension as some monitors
+        // have some sub-pixel difference with viewport.
+        return (Math.round(rect.width) === Math.round(viewport.width) &&
+            Math.round(rect.height) === Math.round(viewport.height));
+    }
+    _onMouseEvent = (event) => {
+        if (!this._isNebulaEvent(event)) {
+            return;
+        }
+        if (event.type === 'mousedown') {
+            this._mouseWasDown = true;
+        }
+        // offsetX/Y of the MouseEvent provides the offset in the X/Y coordinate
+        // of the mouse pointer between that event and the padding edge of the target node.
+        // We set our listener to document so we need to adjust offsetX/Y
+        // in case the target is not be our WebGL canvas.
+        const { top = 0, left = 0 } = this.mainContainer
+            ? this.mainContainer.getBoundingClientRect()
+            : {};
+        const proxyEvent = new Proxy(event, {
+            get: (original, propertyName) => {
+                if (propertyName === 'offsetX') {
+                    return original.pageX - left;
+                }
+                if (propertyName === 'offsetY') {
+                    return original.pageY - top;
+                }
+                // TODO: Properly use pointer events
+                if (propertyName === 'type') {
+                    return original.type.replace('pointer', 'mouse');
+                }
+                const result = original[propertyName];
+                if (typeof result === 'function') {
+                    return result.bind(original);
+                }
+                return result;
+            }
+        });
+        this._handleDeckGLEvent(proxyEvent);
+    };
+    getMouseGroundPosition(event) {
+        return this.wmViewport.unproject([event.offsetX, event.offsetY]);
+    }
+    unprojectMousePosition(mousePosition) {
+        return this.wmViewport.unproject(mousePosition);
+    }
+    // eslint-disable-next-line max-statements, complexity
+    _handleDeckGLEvent(event) {
+        const { deckgl, props: { onMapMouseEvent, selectionType, eventFilter } } = this;
+        let sendMapEvent = true;
+        let cursor = 'auto';
+        if (event && deckgl && selectionType) {
+            if (!this._deckDrawer)
+                this._deckDrawer = new DeckDrawer(this);
+            const lngLat = this.getMouseGroundPosition(event);
+            if (eventFilter && !eventFilter(lngLat, event))
+                return;
+            const drawerResult = this._deckDrawer.handleEvent(event, lngLat, selectionType);
+            if (drawerResult.redraw)
+                this.forceUpdate();
+            return;
+        }
+        if (event && deckgl && (!event.buttons || event.type !== 'mousemove')) {
+            // TODO: sort by mouse priority
+            const layerIds = deckgl.props.layers
+                .filter((l) => l && l.props && l.props.nebulaLayer && l.props.nebulaLayer.enablePicking)
+                .map((l) => l.id);
+            const pickingInfo = deckgl.pickObject({
+                x: event.offsetX,
+                y: event.offsetY,
+                radius: 5,
+                layerIds
+            });
+            this.queryObjectEvents.emit('pick', { event, pickingInfo });
+            if (pickingInfo) {
+                sendMapEvent = false;
+                const { index, lngLat } = pickingInfo;
+                if (eventFilter && !eventFilter(lngLat, event))
+                    return;
+                const { layer: deckLayer, object } = pickingInfo;
+                if (deckLayer &&
+                    deckLayer.props &&
+                    deckLayer.props.nebulaLayer &&
+                    deckLayer.props.nebulaLayer.eventHandler) {
+                    deckLayer.props.nebulaLayer.eventHandler(event, pickingInfo);
+                }
+                const original = object.original ||
+                    (deckLayer.props.nebulaLayer &&
+                        deckLayer.props.nebulaLayer.deckCache &&
+                        deckLayer.props.nebulaLayer.deckCache.originals[index]);
+                if (original) {
+                    this.deckglMouseOverInfo = { originalLayer: deckLayer.props.nebulaLayer, index };
+                    // @ts-expect-error narrow event type
+                    const nebulaMouseEvent = new LayerMouseEvent(event, {
+                        data: original,
+                        metadata: object.metadata,
+                        groundPoint: lngLat,
+                        nebula: this
+                    });
+                    deckLayer.props.nebulaLayer.emit(event.type, nebulaMouseEvent);
+                    this.forceUpdate();
+                }
+                cursor = 'pointer';
+            }
+        }
+        if (document.documentElement) {
+            document.documentElement.style.cursor = cursor;
+        }
+        if (sendMapEvent) {
+            this.deckglMouseOverInfo = null;
+            const lngLat = this.getMouseGroundPosition(event);
+            if (eventFilter && !eventFilter(lngLat, event))
+                return;
+            // send to layers first
+            // @ts-expect-error narrow event type
+            const nebulaMouseEvent = new LayerMouseEvent(event, {
+                groundPoint: lngLat,
+                nebula: this
+            });
+            this.getAllLayers()
+                .filter((layer) => layer && layer.usesMapEvents)
+                .forEach((layer) => layer.emit('mapMouseEvent', nebulaMouseEvent));
+            this.getAllLayers()
+                .filter((layer) => layer && layer.props && layer.props.nebulaLayer && layer.props.nebulaLayer.mapMouseEvent)
+                .forEach((layer) => layer.props.nebulaLayer.mapMouseEvent(nebulaMouseEvent, layer));
+            if (onMapMouseEvent) {
+                onMapMouseEvent(event, lngLat);
+            }
+        }
+    }
+    getExtraDeckLayers() {
+        const result = [];
+        if (this._deckDrawer)
+            result.push(...this._deckDrawer.render());
+        return result;
+    }
+    renderDeckLayers() {
+        return this.getAllLayers()
+            .map((layer) => (layer instanceof NebulaLayer ? layer.render({ nebula: this }) : layer))
+            .filter(Boolean);
+    }
+    getAllLayers() {
+        const result = [];
+        this.props.layers.filter(Boolean).forEach((layer) => {
+            result.push(layer);
+            // Only NebulaLayers have helpers, Deck GL layers don't.
+            if (layer instanceof NebulaLayer) {
+                result.push(...layer.helperLayers);
+            }
+        });
+        return result.filter(Boolean);
+    }
+    getRenderedLayers() {
+        return [...this.renderDeckLayers(), ...this.getExtraDeckLayers()];
+    }
+    updateAndGetRenderedLayers(layers, viewport, container) {
+        if (this.inited) {
+            this.updateProps({ layers, viewport });
+            this.forceUpdate = () => container.forceUpdate();
+        }
+        else {
+            this.inited = true;
+            this.init({ layers, viewport });
+            this.forceUpdate = () => container.forceUpdate();
+            this.updateAllDeckObjects();
+        }
+        return this.getRenderedLayers();
+    }
+    setDeck(deckgl) {
+        if (deckgl) {
+            this.deckgl = deckgl;
+        }
+    }
+    setMainContainer(mainContainer) {
+        if (mainContainer) {
+            this.mainContainer = mainContainer;
+        }
+    }
+}

package/dist/lib/style.d.ts

@@ -0,0 +1,19 @@
+export declare const ArrowStyles: {
+    NONE: number;
+    FORWARD: number;
+    BACKWARD: number;
+    BOTH: number;
+};
+export declare const DEFAULT_ARROWS = 1;
+export declare const MAX_ARROWS = 3;
+export declare const DEFAULT_STYLE: {
+    arrowColor: number[];
+    arrowCount: number;
+    arrowStyle: number;
+    fillColor: number[];
+    lineColor: number[];
+    lineWidthMeters: number;
+    outlineRadiusMeters: number;
+    opacity: number;
+    zLevel: number;
+};

package/dist/lib/style.js

@@ -0,0 +1,20 @@
+// Describes the arrow style of polylines
+export const ArrowStyles = {
+    NONE: 0,
+    FORWARD: 1,
+    BACKWARD: 2,
+    BOTH: 3,
+};
+export const DEFAULT_ARROWS = 1;
+export const MAX_ARROWS = 3;
+export const DEFAULT_STYLE = {
+    arrowColor: [0, 0, 0, 1],
+    arrowCount: DEFAULT_ARROWS,
+    arrowStyle: ArrowStyles.NONE,
+    fillColor: [0, 0, 0, 1],
+    lineColor: [0, 0, 0, 1],
+    lineWidthMeters: 5,
+    outlineRadiusMeters: 0,
+    opacity: 1,
+    zLevel: 0,
+};

package/dist/memoize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Speed up consecutive function calls by caching the result of calls with identical input
+ * https://en.wikipedia.org/wiki/Memoization
+ * @param {function} compute - the function to be memoized
+ */
+export default function memoize(compute: Function): (args: any) => any;

package/dist/memoize.js

@@ -0,0 +1,40 @@
+// port from @deck.gl/core
+function isEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (Array.isArray(a)) {
+        // Special treatment for arrays: compare 1-level deep
+        // This is to support equality of matrix/coordinate props
+        const len = a.length;
+        if (!b || b.length !== len) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (a[i] !== b[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+/**
+ * Speed up consecutive function calls by caching the result of calls with identical input
+ * https://en.wikipedia.org/wiki/Memoization
+ * @param {function} compute - the function to be memoized
+ */
+export default function memoize(compute) {
+    let cachedArgs = {};
+    let cachedResult;
+    return (args) => {
+        for (const key in args) {
+            if (!isEqual(args[key], cachedArgs[key])) {
+                cachedResult = compute(args);
+                cachedArgs = args;
+                break;
+            }
+        }
+        return cachedResult;
+    };
+}

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

@@ -0,0 +1,24 @@
+import { FeatureCollection, Feature, Position } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { ModeHandler, EditAction, EditHandle } from './mode-handler';
+export declare class CompositeModeHandler extends ModeHandler {
+    handlers: Array<ModeHandler>;
+    options: Record<string, any>;
+    constructor(handlers: Array<ModeHandler>, options?: Record<string, any>);
+    _coalesce<T>(callback: (arg0: ModeHandler) => T, resultEval?: ((arg0: T) => boolean | null | undefined) | null): T | undefined;
+    setFeatureCollection(featureCollection: FeatureCollection): void;
+    setModeConfig(modeConfig: any): void;
+    setSelectedFeatureIndexes(indexes: number[]): void;
+    handleClick(event: ClickEvent): EditAction | null | undefined;
+    handlePointerMove(event: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+    handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined;
+    handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined;
+    getTentativeFeature(): Feature | null | undefined;
+    getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[];
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): string;
+}

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

@@ -0,0 +1,55 @@
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class CompositeModeHandler extends ModeHandler {
+    handlers;
+    options;
+    constructor(handlers, options = {}) {
+        super();
+        this.handlers = handlers;
+        this.options = options;
+    }
+    _coalesce(callback, resultEval = null) {
+        let result;
+        for (let i = 0; i < this.handlers.length; i++) {
+            // eslint-disable-next-line callback-return
+            result = callback(this.handlers[i]);
+            if (resultEval ? resultEval(result) : result) {
+                break;
+            }
+        }
+        return result;
+    }
+    setFeatureCollection(featureCollection) {
+        this.handlers.forEach((handler) => handler.setFeatureCollection(featureCollection));
+    }
+    setModeConfig(modeConfig) {
+        this.handlers.forEach((handler) => handler.setModeConfig(modeConfig));
+    }
+    setSelectedFeatureIndexes(indexes) {
+        this.handlers.forEach((handler) => handler.setSelectedFeatureIndexes(indexes));
+    }
+    handleClick(event) {
+        return this._coalesce((handler) => handler.handleClick(event));
+    }
+    handlePointerMove(event) {
+        return this._coalesce((handler) => handler.handlePointerMove(event), (result) => result && Boolean(result.editAction)); // TODO
+    }
+    handleStartDragging(event) {
+        return this._coalesce((handler) => handler.handleStartDragging(event));
+    }
+    handleStopDragging(event) {
+        return this._coalesce((handler) => handler.handleStopDragging(event));
+    }
+    getTentativeFeature() {
+        return this._coalesce((handler) => handler.getTentativeFeature());
+    }
+    getEditHandles(picks, mapCoords) {
+        // TODO: Combine the handles *BUT* make sure if none of the results have
+        // changed to return the same object so that "editHandles !== this.state.editHandles"
+        // in editable-geojson-layer works.
+        return this._coalesce((handler) => handler.getEditHandles(picks, mapCoords), (handles) => Array.isArray(handles) && handles.length > 0); // TODO
+    }
+    getCursor({ isDragging }) {
+        return this._coalesce((handler) => handler.getCursor({ isDragging })); // TODO
+    }
+}