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

package/dist/editable-layers/editable-layer.d.ts

@@ -0,0 +1,49 @@
+import { CompositeLayer, CompositeLayerProps } from '@deck.gl/core';
+import { DraggingEvent, ClickEvent, StartDraggingEvent, StopDraggingEvent, PointerMoveEvent } from '../edit-modes/types';
+import { Position } from '../geojson-types';
+export type EditableLayerProps<DataType = any> = CompositeLayerProps & {
+    pickingRadius?: number;
+    pickingDepth?: number;
+};
+export default abstract class EditableLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends CompositeLayer<ExtraPropsT & Required<EditableLayerProps<DataT>>> {
+    static layerName: string;
+    state: {
+        _editableLayerState: any;
+    };
+    onLayerClick(event: ClickEvent): void;
+    onStartDragging(event: StartDraggingEvent): void;
+    onStopDragging(event: StopDraggingEvent): void;
+    onDragging(event: DraggingEvent): void;
+    onPointerMove(event: PointerMoveEvent): void;
+    onLayerKeyUp(event: KeyboardEvent): void;
+    initializeState(): void;
+    finalizeState(): void;
+    _addEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _forwardEventToCurrentLayer(event: any): void;
+    _onanyclick({ srcEvent }: any): void;
+    _onkeyup({ srcEvent }: {
+        srcEvent: KeyboardEvent;
+    }): void;
+    _onpanstart(event: any): void;
+    _onpanmove(event: any): void;
+    _onpanend({ srcEvent }: any): void;
+    _onpointermove(event: any): void;
+    getPicks(screenCoords: [number, number]): {
+        color: Uint8Array;
+        layer: import("@deck.gl/core").Layer<{}>;
+        sourceLayer?: import("@deck.gl/core").Layer<{}>;
+        viewport?: import("@deck.gl/core").Viewport;
+        index: number;
+        picked: boolean;
+        object?: any;
+        x: number;
+        y: number;
+        pixel?: [number, number];
+        coordinate?: number[];
+        devicePixel?: [number, number];
+        pixelRatio: number;
+    }[];
+    getScreenCoords(pointerEvent: any): Position;
+    getMapCoords(screenCoords: Position): Position;
+}

package/dist/editable-layers/editable-layer.js

@@ -0,0 +1,195 @@
+/* eslint-env browser */
+import { CompositeLayer } from '@deck.gl/core';
+const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
+export default class EditableLayer extends CompositeLayer {
+    static layerName = 'EditableLayer';
+    state = undefined;
+    // Overridable interaction event handlers
+    onLayerClick(event) {
+        // default implementation - do nothing
+    }
+    onStartDragging(event) {
+        // default implementation - do nothing
+    }
+    onStopDragging(event) {
+        // default implementation - do nothing
+    }
+    onDragging(event) {
+        // default implementation - do nothing
+    }
+    onPointerMove(event) {
+        // default implementation - do nothing
+    }
+    onLayerKeyUp(event) {
+        // default implementation - do nothing;
+    }
+    // TODO: implement onCancelDragging (e.g. drag off screen)
+    initializeState() {
+        this.setState({
+            _editableLayerState: {
+                // Picked objects at the time the pointer went down
+                pointerDownPicks: null,
+                // Screen coordinates where the pointer went down
+                pointerDownScreenCoords: null,
+                // Ground coordinates where the pointer went down
+                pointerDownMapCoords: null,
+                // Keep track of the mjolnir.js event handler so it can be deregistered
+                eventHandler: this._forwardEventToCurrentLayer.bind(this),
+            },
+        });
+        this._addEventHandlers();
+    }
+    finalizeState() {
+        this._removeEventHandlers();
+    }
+    _addEventHandlers() {
+        // @ts-expect-error accessing protected props
+        const { eventManager } = this.context.deck;
+        const { eventHandler } = this.state._editableLayerState;
+        for (const eventType of EVENT_TYPES) {
+            eventManager.on(eventType, eventHandler, {
+                // give nebula a higher priority so that it can stop propagation to deck.gl's map panning handlers
+                priority: 100,
+            });
+        }
+    }
+    _removeEventHandlers() {
+        // @ts-expect-error accessing protected props
+        const { eventManager } = this.context.deck;
+        const { eventHandler } = this.state._editableLayerState;
+        for (const eventType of EVENT_TYPES) {
+            eventManager.off(eventType, eventHandler);
+        }
+    }
+    // A new layer instance is created on every render, so forward the event to the current layer
+    // This means that the first layer instance will stick around to be the event listener, but will forward the event
+    // to the latest layer instance.
+    _forwardEventToCurrentLayer(event) {
+        const currentLayer = this.getCurrentLayer();
+        // Use a naming convention to find the event handling function for this event type
+        const func = currentLayer[`_on${event.type}`].bind(currentLayer);
+        if (!func) {
+            console.warn(`no handler for mjolnir.js event ${event.type}`); // eslint-disable-line
+            return;
+        }
+        func(event);
+    }
+    _onanyclick({ srcEvent }) {
+        const screenCoords = this.getScreenCoords(srcEvent);
+        const mapCoords = this.getMapCoords(screenCoords);
+        const picks = this.getPicks(screenCoords);
+        this.onLayerClick({
+            mapCoords,
+            screenCoords,
+            picks,
+            sourceEvent: srcEvent,
+        });
+    }
+    _onkeyup({ srcEvent }) {
+        this.onLayerKeyUp(srcEvent);
+    }
+    _onpanstart(event) {
+        const screenCoords = this.getScreenCoords(event.srcEvent);
+        const mapCoords = this.getMapCoords(screenCoords);
+        const picks = this.getPicks(screenCoords);
+        this.setState({
+            _editableLayerState: {
+                ...this.state._editableLayerState,
+                pointerDownScreenCoords: screenCoords,
+                pointerDownMapCoords: mapCoords,
+                pointerDownPicks: picks,
+            },
+        });
+        this.onStartDragging({
+            picks,
+            screenCoords,
+            mapCoords,
+            pointerDownScreenCoords: screenCoords,
+            pointerDownMapCoords: mapCoords,
+            cancelPan: event.stopImmediatePropagation,
+            sourceEvent: event.srcEvent,
+        });
+    }
+    _onpanmove(event) {
+        const { srcEvent } = event;
+        const screenCoords = this.getScreenCoords(srcEvent);
+        const mapCoords = this.getMapCoords(screenCoords);
+        const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
+        const picks = this.getPicks(screenCoords);
+        this.onDragging({
+            screenCoords,
+            mapCoords,
+            picks,
+            pointerDownPicks,
+            pointerDownScreenCoords,
+            pointerDownMapCoords,
+            sourceEvent: srcEvent,
+            cancelPan: event.stopImmediatePropagation,
+            // another (hacky) approach for cancelling map panning
+            // const controller = this.context.deck.viewManager.controllers[
+            //   Object.keys(this.context.deck.viewManager.controllers)[0]
+            // ];
+            // controller._state.isDragging = false;
+        });
+    }
+    _onpanend({ srcEvent }) {
+        const screenCoords = this.getScreenCoords(srcEvent);
+        const mapCoords = this.getMapCoords(screenCoords);
+        const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
+        const picks = this.getPicks(screenCoords);
+        this.onStopDragging({
+            picks,
+            screenCoords,
+            mapCoords,
+            pointerDownPicks,
+            pointerDownScreenCoords,
+            pointerDownMapCoords,
+            sourceEvent: srcEvent,
+        });
+        this.setState({
+            _editableLayerState: {
+                ...this.state._editableLayerState,
+                pointerDownScreenCoords: null,
+                pointerDownMapCoords: null,
+                pointerDownPicks: null,
+            },
+        });
+    }
+    _onpointermove(event) {
+        const { srcEvent } = event;
+        const screenCoords = this.getScreenCoords(srcEvent);
+        const mapCoords = this.getMapCoords(screenCoords);
+        const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
+        const picks = this.getPicks(screenCoords);
+        this.onPointerMove({
+            screenCoords,
+            mapCoords,
+            picks,
+            pointerDownPicks,
+            pointerDownScreenCoords,
+            pointerDownMapCoords,
+            sourceEvent: srcEvent,
+            cancelPan: event.stopImmediatePropagation,
+        });
+    }
+    getPicks(screenCoords) {
+        return this.context.deck.pickMultipleObjects({
+            x: screenCoords[0],
+            y: screenCoords[1],
+            layerIds: [this.props.id],
+            radius: this.props.pickingRadius,
+            depth: this.props.pickingDepth,
+        });
+    }
+    getScreenCoords(pointerEvent) {
+        return [
+            pointerEvent.clientX -
+                this.context.gl.canvas.getBoundingClientRect().left,
+            pointerEvent.clientY -
+                this.context.gl.canvas.getBoundingClientRect().top,
+        ];
+    }
+    getMapCoords(screenCoords) {
+        return this.context.viewport.unproject([screenCoords[0], screenCoords[1]]);
+    }
+}

package/dist/editable-layers/editable-path-layer.d.ts

@@ -0,0 +1,9 @@
+import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+interface EditablePathLayerProps extends PathLayerProps<any> {
+    pickingLineWidthExtraPixels?: number;
+}
+export default class EditablePathLayer extends PathLayer<any, EditablePathLayerProps> {
+    getShaders(): any;
+    draw(props: any): void;
+}
+export {};

package/dist/editable-layers/editable-path-layer.js

@@ -0,0 +1,34 @@
+import { PathLayer } from '@deck.gl/layers';
+import { insertBefore } from '../utils';
+const defaultProps = {
+    ...PathLayer.defaultProps,
+    pickingLineWidthExtraPixels: { type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER },
+};
+export default class EditablePathLayer extends PathLayer {
+    getShaders() {
+        const shaders = super.getShaders();
+        shaders.vs = insertBefore(shaders.vs, 'vec3 width;', `
+       if(bool(picking.isActive)){
+        widthPixels.xy += pickingLineWidthExtraPixels;
+       }
+      `);
+        return {
+            ...shaders,
+            inject: {
+                ...(shaders.inject || {}),
+                'vs:#decl': (shaders.inject?.['vs:#decl'] || '').concat('uniform float pickingLineWidthExtraPixels;'),
+            },
+        };
+    }
+    draw(props) {
+        super.draw({
+            ...props,
+            uniforms: {
+                ...props.uniforms,
+                pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels,
+            },
+        });
+    }
+}
+EditablePathLayer.defaultProps = defaultProps;
+EditablePathLayer.layerName = 'EditablePathLayer';

package/dist/editable-layers/elevated-edit-handle-layer.d.ts

@@ -0,0 +1,7 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer, LineLayer } from '@deck.gl/layers';
+export default class ElevatedEditHandleLayer extends CompositeLayer<any> {
+    static layerName: string;
+    static defaultProps: {};
+    renderLayers(): (ScatterplotLayer<any, {}> | LineLayer<any, {}>)[];
+}

package/dist/editable-layers/elevated-edit-handle-layer.js

@@ -0,0 +1,24 @@
+/* eslint-env browser */
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer, LineLayer } from '@deck.gl/layers';
+const defaultProps = {};
+export default class ElevatedEditHandleLayer extends CompositeLayer {
+    static layerName = 'ElevatedEditHandleLayer';
+    static defaultProps = defaultProps;
+    renderLayers() {
+        const handles = new ScatterplotLayer(Object.assign({}, this.props, {
+            id: `${this.props.id}-ScatterplotLayer`,
+            data: this.props.data,
+        }));
+        const lines = new LineLayer(Object.assign({}, this.props, {
+            id: `${this.props.id}-LineLayer`,
+            data: this.props.data,
+            pickable: false,
+            getSourcePosition: ({ position }) => [position[0], position[1], 0],
+            getTargetPosition: ({ position }) => [position[0], position[1], position[2] || 0],
+            getColor: [150, 150, 150, 200],
+            getStrokeWidth: 3,
+        }));
+        return [handles, lines];
+    }
+}

package/dist/editable-layers/junction-scatterplot-layer.d.ts

@@ -0,0 +1,14 @@
+import { CompositeLayer, CompositeLayerProps, DefaultProps } from '@deck.gl/core';
+import { ScatterplotLayer, ScatterplotLayerProps } from '@deck.gl/layers';
+import { Color } from '../types';
+type JunctionScatterplotLayerProps = CompositeLayerProps & Omit<ScatterplotLayerProps, 'getFillColor'> & {
+    getFillColor?: Color | ((d: any) => Color);
+    getStrokeColor?: Color | ((d: any) => Color);
+    getInnerRadius?: number | ((d: any) => number);
+};
+export default class JunctionScatterplotLayer extends CompositeLayer<JunctionScatterplotLayerProps> {
+    static layerName: string;
+    static defaultProps: DefaultProps<JunctionScatterplotLayerProps>;
+    renderLayers(): ScatterplotLayer<any, {}>[];
+}
+export {};

package/dist/editable-layers/junction-scatterplot-layer.js

@@ -0,0 +1,41 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer } from '@deck.gl/layers';
+export default class JunctionScatterplotLayer extends CompositeLayer {
+    static layerName = 'JunctionScatterplotLayer';
+    static defaultProps = {
+        ...ScatterplotLayer.defaultProps,
+        getFillColor: (d) => [0, 0, 0, 255],
+        getStrokeColor: (d) => [255, 255, 255, 255],
+        getInnerRadius: (d) => 1,
+    };
+    renderLayers() {
+        const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
+        // data needs to be passed explicitly after deck.gl 5.3
+        return [
+            // the full circles
+            new ScatterplotLayer({
+                ...this.props,
+                id: `${id}-full`,
+                data: this.props.data,
+                getLineColor: getStrokeColor,
+                updateTriggers: {
+                    ...updateTriggers,
+                    getStrokeColor: updateTriggers.getStrokeColor,
+                },
+            }), // the inner part
+            new ScatterplotLayer({
+                ...this.props,
+                id: `${id}-inner`,
+                data: this.props.data,
+                getFillColor,
+                getRadius: getInnerRadius,
+                pickable: false,
+                updateTriggers: {
+                    ...updateTriggers,
+                    getFillColor: updateTriggers.getFillColor,
+                    getRadius: updateTriggers.getInnerRadius,
+                },
+            }),
+        ];
+    }
+}

package/dist/editable-layers/path-marker-layer/arrow-2d-geometry.d.ts

@@ -0,0 +1,4 @@
+import { Geometry } from '@luma.gl/engine';
+export default class Arrow2DGeometry extends Geometry {
+    constructor(opts?: {});
+}

package/dist/editable-layers/path-marker-layer/arrow-2d-geometry.js

@@ -0,0 +1,55 @@
+import { Geometry } from '@luma.gl/engine';
+export default class Arrow2DGeometry extends Geometry {
+    constructor(opts = {}) {
+        super(Object.assign({}, opts, {
+            attributes: getArrowAttributes(opts),
+            topology: 'triangle-list'
+        }));
+    }
+}
+function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05 }) {
+    const texCoords = [
+        // HEAD
+        0.5,
+        1.0,
+        0,
+        0.5 - headSize / 2,
+        1.0 - headSize,
+        0,
+        0.5 + headSize / 2,
+        1.0 - headSize,
+        0,
+        0.5 - tailWidth / 2,
+        tailStart,
+        0,
+        0.5 + tailWidth / 2,
+        1.0 - headSize,
+        0,
+        0.5 + tailWidth / 2,
+        tailStart,
+        0,
+        0.5 - tailWidth / 2,
+        tailStart,
+        0,
+        0.5 - tailWidth / 2,
+        1.0 - headSize,
+        0,
+        0.5 + tailWidth / 2,
+        1.0 - headSize,
+        0,
+    ];
+    const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];
+    // Center and scale
+    const positions = new Array(texCoords.length);
+    for (let i = 0; i < texCoords.length / 3; i++) {
+        const i3 = i * 3;
+        positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;
+        positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;
+        positions[i3 + 2] = 0;
+    }
+    return {
+        positions: { size: 3, value: new Float32Array(positions) },
+        normals: { size: 3, value: new Float32Array(normals) },
+        texCoords: { size: 2, value: new Float32Array(texCoords) },
+    };
+}

package/dist/editable-layers/path-marker-layer/create-path-markers.d.ts

@@ -0,0 +1,16 @@
+import { Position } from '../../geojson-types';
+import { Color } from '../../types';
+export interface PathMarker {
+    position: Position;
+    angle: number;
+    color: Color;
+    object: unknown;
+}
+export default function createPathMarkers({ data, getPath, getDirection, getColor, getMarkerPercentages, projectFlat, }: {
+    data: any;
+    getPath?: (x: any, context: any) => any;
+    getDirection?: (x: any) => any;
+    getColor?: (x: any) => number[];
+    getMarkerPercentages?: (x: any, info: any) => number[];
+    projectFlat: any;
+}): PathMarker[];

package/dist/editable-layers/path-marker-layer/create-path-markers.js

@@ -0,0 +1,75 @@
+import { Vector2 } from '@math.gl/core';
+function getLineLength(vPoints) {
+    // calculate total length
+    let lineLength = 0;
+    for (let i = 0; i < vPoints.length - 1; i++) {
+        lineLength += vPoints[i].distance(vPoints[i + 1]);
+    }
+    return lineLength;
+}
+const DEFAULT_COLOR = [0, 0, 0, 255];
+const DEFAULT_DIRECTION = { forward: true, backward: false };
+export default function createPathMarkers({ data, getPath = (x, context) => x.path, getDirection = (x) => x.direction, getColor = (x) => DEFAULT_COLOR, getMarkerPercentages = (x, info) => [0.5], projectFlat, }) {
+    const markers = [];
+    for (const object of data) {
+        const path = getPath(object, null);
+        const direction = getDirection(object) || DEFAULT_DIRECTION;
+        const color = getColor(object);
+        const vPoints = path.map((p) => new Vector2(p));
+        const vPointsReverse = vPoints.slice(0).reverse();
+        // calculate total length
+        const lineLength = getLineLength(vPoints);
+        // Ask for where to put markers
+        const percentages = getMarkerPercentages(object, { lineLength });
+        // Create the markers
+        for (const percentage of percentages) {
+            if (direction.forward) {
+                const marker = createMarkerAlongPath({
+                    path: vPoints,
+                    percentage,
+                    lineLength,
+                    color,
+                    object,
+                    projectFlat,
+                });
+                markers.push(marker);
+            }
+            if (direction.backward) {
+                const marker = createMarkerAlongPath({
+                    path: vPointsReverse,
+                    percentage,
+                    lineLength,
+                    color,
+                    object,
+                    projectFlat,
+                });
+                markers.push(marker);
+            }
+        }
+    }
+    return markers;
+}
+function createMarkerAlongPath({ path, percentage, lineLength, color, object, projectFlat }) {
+    const distanceAlong = lineLength * percentage;
+    let currentDistance = 0;
+    let previousDistance = 0;
+    let i = 0;
+    for (i = 0; i < path.length - 1; i++) {
+        currentDistance += path[i].distance(path[i + 1]);
+        if (currentDistance > distanceAlong) {
+            break;
+        }
+        previousDistance = currentDistance;
+    }
+    // If reached the end of the loop without exiting early,
+    // undo the final increment to avoid a null-pointer exception
+    if (i === path.length - 1) {
+        i -= 1;
+    }
+    const vDirection = path[i + 1].clone().subtract(path[i]).normalize();
+    const along = distanceAlong - previousDistance;
+    const vCenter = vDirection.clone().multiply(new Vector2(along, along)).add(path[i]);
+    const vDirection2 = new Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));
+    const angle = (vDirection2.verticalAngle() * 180) / Math.PI;
+    return { position: [vCenter.x, vCenter.y, 0], angle, color, object };
+}

package/dist/editable-layers/path-marker-layer/path-marker-layer.d.ts

@@ -0,0 +1,40 @@
+import { CompositeLayer, DefaultProps } from '@deck.gl/core';
+import { PathOutlineLayerProps } from '../path-outline-layer/path-outline-layer';
+import Arrow2DGeometry from './arrow-2d-geometry';
+import { Vector3 } from '@math.gl/core';
+export type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {
+    getDirection?: (x: any) => any;
+    getMarkerColor?: (x: any) => number[];
+    getMarkerPercentages?: (x: any, info: any) => number[];
+    highlightPoint?: any;
+    highlightIndex?: number;
+    MarkerLayer?: any;
+    markerLayerProps?: any;
+    sizeScale?: number;
+    fp64?: boolean;
+    nebulaLayer?: any;
+};
+export default class PathMarkerLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {
+    static layerName: string;
+    static defaultProps: DefaultProps<PathMarkerLayerProps<any>>;
+    state: {
+        closestPoint: Vector3 | null;
+        closestPoints?: {
+            position: Vector3;
+        }[];
+        markers: any[];
+        mesh: Arrow2DGeometry;
+    };
+    initializeState(): void;
+    projectFlat(xyz: any, viewport: any, coordinateSystem: any, coordinateOrigin: any): any;
+    updateState({ props, oldProps, changeFlags }: {
+        props: any;
+        oldProps: any;
+        changeFlags: any;
+    }): void;
+    _recalculateClosestPoint(): void;
+    getPickingInfo({ info }: {
+        info: any;
+    }): any;
+    renderLayers(): any[];
+}