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

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

@@ -0,0 +1,121 @@
+import { CompositeLayer, COORDINATE_SYSTEM } from '@deck.gl/core';
+import { ScatterplotLayer } from '@deck.gl/layers';
+import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
+import PathOutlineLayer from '../path-outline-layer/path-outline-layer';
+import Arrow2DGeometry from './arrow-2d-geometry';
+import createPathMarkers from './create-path-markers';
+import { getClosestPointOnPolyline } from './polyline';
+const DISTANCE_FOR_MULTI_ARROWS = 0.1;
+const ARROW_HEAD_SIZE = 0.2;
+const ARROW_TAIL_WIDTH = 0.05;
+// const ARROW_CENTER_ADJUST = -0.8;
+const DEFAULT_MARKER_LAYER = SimpleMeshLayer;
+const DEFAULT_MARKER_LAYER_PROPS = {
+    mesh: new Arrow2DGeometry({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH })
+};
+const defaultProps = Object.assign({}, PathOutlineLayer.defaultProps, {
+    MarkerLayer: DEFAULT_MARKER_LAYER,
+    markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,
+    sizeScale: 100,
+    fp64: false,
+    highlightIndex: -1,
+    highlightPoint: null,
+    getPath: (x) => x.path,
+    getColor: (x) => x.color,
+    getMarkerColor: (x) => [0, 0, 0, 255],
+    getDirection: (x) => x.direction,
+    getMarkerPercentages: (object, { lineLength }) => lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]
+});
+export default class PathMarkerLayer extends CompositeLayer {
+    static layerName = 'PathMarkerLayer';
+    static defaultProps = defaultProps;
+    state = undefined;
+    initializeState() {
+        this.state = {
+            markers: [],
+            mesh: new Arrow2DGeometry({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH }),
+            closestPoint: null,
+            closestPoints: []
+        };
+    }
+    projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {
+        if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
+            const [dx, dy] = viewport.metersToLngLatDelta(xyz);
+            const [x, y] = coordinateOrigin;
+            return viewport.projectFlat([x + dx, dy + y]);
+        }
+        else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
+            const [dx, dy] = xyz;
+            const [x, y] = coordinateOrigin;
+            return viewport.projectFlat([x + dx, dy + y]);
+        }
+        return viewport.projectFlat(xyz);
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {
+            const { data, getPath, getDirection, getMarkerColor, getMarkerPercentages, coordinateSystem, coordinateOrigin } = this.props;
+            const { viewport } = this.context;
+            const projectFlat = (o) => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);
+            this.state.markers = createPathMarkers({
+                data,
+                getPath,
+                getDirection,
+                getColor: getMarkerColor,
+                getMarkerPercentages,
+                projectFlat
+            });
+            this._recalculateClosestPoint();
+        }
+        if (changeFlags.propsChanged) {
+            if (props.point !== oldProps.point) {
+                this._recalculateClosestPoint();
+            }
+        }
+    }
+    _recalculateClosestPoint() {
+        const { highlightPoint, highlightIndex } = this.props;
+        if (highlightPoint && highlightIndex >= 0) {
+            const object = this.props.data[highlightIndex];
+            const points = this.props.getPath(object, null);
+            const { point } = getClosestPointOnPolyline({ points, p: highlightPoint });
+            this.state.closestPoints = [{ position: point }];
+        }
+        else {
+            this.state.closestPoints = [];
+        }
+    }
+    getPickingInfo({ info }) {
+        return Object.assign(info, {
+            // override object with picked feature
+            object: (info.object && info.object.path) || info.object
+        });
+    }
+    renderLayers() {
+        return [
+            new PathOutlineLayer(this.props, this.getSubLayerProps({
+                id: 'paths',
+                // Note: data has to be passed explicitly like this to avoid being empty
+                data: this.props.data
+            })),
+            new this.props.MarkerLayer(this.getSubLayerProps(Object.assign({}, this.props.markerLayerProps, {
+                id: 'markers',
+                data: this.state.markers,
+                getOrientation: (x) => [0, -x.angle, 0],
+                getColor: (x) => x.color,
+                sizeScale: this.props.sizeScale,
+                fp64: this.props.fp64,
+                pickable: false,
+                parameters: {
+                    blend: false,
+                    depthTest: false
+                }
+            }))),
+            this.state.closestPoints &&
+                new ScatterplotLayer({
+                    id: `${this.props.id}-highlight`,
+                    data: this.state.closestPoints,
+                    fp64: this.props.fp64
+                })
+        ];
+    }
+}

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

@@ -0,0 +1,18 @@
+import { Vector3 } from '@math.gl/core';
+export declare function getClosestPointOnLine({ p, p1, p2, clampToLine }: {
+    p: any;
+    p1: any;
+    p2: any;
+    clampToLine?: boolean;
+}): Vector3;
+export declare function getClosestPointOnPolyline({ p, points }: {
+    p: any;
+    points: any;
+}): {
+    point: Vector3;
+    index: number;
+    p1: any;
+    p2: any;
+    distanceSquared: number;
+    distance: number;
+};

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

@@ -0,0 +1,37 @@
+import { Vector3, clamp } from '@math.gl/core';
+// Return the closest point on a line segment
+export function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
+    const lineVector = new Vector3(p2).subtract(p1);
+    const pointVector = new Vector3(p).subtract(p1);
+    let dotProduct = lineVector.dot(pointVector);
+    if (clampToLine) {
+        dotProduct = clamp(dotProduct, 0, 1);
+    }
+    return lineVector.lerp(p1, p2, dotProduct);
+}
+// Return the closest point on a line segment
+export function getClosestPointOnPolyline({ p, points }) {
+    p = new Vector3(p);
+    let pClosest = null;
+    let distanceSquared = Infinity;
+    let index = -1;
+    for (let i = 0; i < points.length - 1; ++i) {
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const pClosestOnLine = getClosestPointOnLine({ p, p1, p2 });
+        const distanceToLineSquared = p.distanceSquared(pClosestOnLine);
+        if (distanceToLineSquared < distanceSquared) {
+            distanceSquared = distanceToLineSquared;
+            pClosest = pClosestOnLine;
+            index = i;
+        }
+    }
+    return {
+        point: pClosest,
+        index,
+        p1: points[index],
+        p2: points[index + 1],
+        distanceSquared,
+        distance: Math.sqrt(distanceSquared),
+    };
+}

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

@@ -0,0 +1,26 @@
+import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+import type { DefaultProps, LayerContext } from '@deck.gl/core';
+import { Framebuffer, Texture } from '@luma.gl/core';
+export type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {
+    dashJustified?: boolean;
+    getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);
+    getZLevel?: (d: DataT, index: number) => number;
+};
+export default class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends PathLayer<DataT, ExtraPropsT & Required<PathOutlineLayerProps<DataT>>> {
+    static layerName: string;
+    static defaultProps: DefaultProps<PathOutlineLayerProps<any>>;
+    state: {
+        model?: any;
+        pathTesselator: any;
+        outlineFramebuffer: Framebuffer;
+        dummyTexture: Texture;
+    };
+    getShaders(): any;
+    initializeState(context: LayerContext): void;
+    draw({ moduleParameters, parameters, uniforms, context }: {
+        moduleParameters?: {};
+        parameters: any;
+        uniforms: any;
+        context: any;
+    }): void;
+}

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

@@ -0,0 +1,106 @@
+import { PathLayer } from '@deck.gl/layers';
+import { GL } from '@luma.gl/constants';
+import outline from '../../shaderlib/outline/outline';
+import { UNIT } from '../../constants';
+// TODO - this should be built into assembleShaders
+function injectShaderCode({ source, code = '' }) {
+    const INJECT_CODE = /}[^{}]*$/;
+    return source.replace(INJECT_CODE, code.concat('\n}\n'));
+}
+const VS_CODE = `\
+  outline_setUV(gl_Position);
+  outline_setZLevel(instanceZLevel);
+`;
+const FS_CODE = `\
+  fragColor = outline_filterColor(fragColor);
+`;
+const defaultProps = {
+    getZLevel: () => 0,
+};
+export default class PathOutlineLayer extends PathLayer {
+    static layerName = 'PathOutlineLayer';
+    static defaultProps = defaultProps;
+    state = undefined;
+    // Override getShaders to inject the outline module
+    getShaders() {
+        const shaders = super.getShaders();
+        return Object.assign({}, shaders, {
+            modules: shaders.modules.concat([outline]),
+            vs: injectShaderCode({ source: shaders.vs, code: VS_CODE }),
+            fs: injectShaderCode({ source: shaders.fs, code: FS_CODE }),
+        });
+    }
+    // @ts-expect-error PathLayer is missing LayerContext arg
+    initializeState(context) {
+        super.initializeState();
+        // Create an outline "shadow" map
+        // TODO - we should create a single outlineMap for all layers
+        this.setState({
+            outlineFramebuffer: context.device.createFramebuffer({}),
+            dummyTexture: context.device.createTexture({}),
+        });
+        // Create an attribute manager
+        // @ts-expect-error check whether this.getAttributeManager works here
+        this.state.attributeManager.addInstanced({
+            instanceZLevel: {
+                size: 1,
+                type: GL.UNSIGNED_BYTE,
+                accessor: 'getZLevel',
+            },
+        });
+    }
+    // Override draw to add render module
+    draw({ moduleParameters = {}, parameters, uniforms, context }) {
+        // Need to calculate same uniforms as base layer
+        const { jointRounded, capRounded, billboard, miterLimit, widthUnits, widthScale, widthMinPixels, widthMaxPixels, } = this.props;
+        uniforms = Object.assign({}, uniforms, {
+            jointType: Number(jointRounded),
+            capType: Number(capRounded),
+            billboard,
+            widthUnits: UNIT[widthUnits],
+            widthScale,
+            miterLimit,
+            widthMinPixels,
+            widthMaxPixels,
+        });
+        // Render the outline shadowmap (based on segment z orders)
+        const { outlineFramebuffer, dummyTexture } = this.state;
+        // TODO(v9): resize, see 'sf' example.
+        // outlineFramebuffer.resize();
+        // TODO(v9) clear FBO
+        // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });
+        this.state.model.updateModuleSettings({
+            outlineEnabled: true,
+            outlineRenderShadowmap: true,
+            outlineShadowmap: dummyTexture,
+        });
+        this.state.model.draw({
+            uniforms: Object.assign({}, uniforms, {
+                jointType: 0,
+                widthScale: this.props.widthScale * 1.3,
+            }),
+            parameters: {
+                depthTest: false,
+                // Biggest value needs to go into buffer
+                blendEquation: GL.MAX,
+            },
+            framebuffer: outlineFramebuffer,
+        });
+        // Now use the outline shadowmap to render the lines (with outlines)
+        this.state.model.updateModuleSettings({
+            outlineEnabled: true,
+            outlineRenderShadowmap: false,
+            outlineShadowmap: outlineFramebuffer,
+        });
+        this.state.model.draw({
+            uniforms: Object.assign({}, uniforms, {
+                jointType: Number(jointRounded),
+                capType: Number(capRounded),
+                widthScale: this.props.widthScale,
+            }),
+            parameters: {
+                depthTest: false,
+            },
+        });
+    }
+}

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

@@ -0,0 +1,26 @@
+import { CompositeLayer, CompositeLayerProps, DefaultProps } from '@deck.gl/core';
+import turfDifference from '@turf/difference';
+export declare const SELECTION_TYPE: {
+    NONE: any;
+    RECTANGLE: string;
+    POLYGON: string;
+};
+interface SelectionLayerProps<DataT> extends CompositeLayerProps {
+    layerIds: any[];
+    onSelect: (info: any) => any;
+    selectionType: string | null;
+}
+export default class SelectionLayer<DataT, ExtraPropsT> extends CompositeLayer<ExtraPropsT & Required<SelectionLayerProps<DataT>>> {
+    static layerName: string;
+    static defaultProps: DefaultProps<SelectionLayerProps<any>>;
+    state: {
+        pendingPolygonSelection: {
+            bigPolygon: ReturnType<typeof turfDifference>;
+        };
+    };
+    _selectRectangleObjects(coordinates: any): void;
+    _selectPolygonObjects(coordinates: any): void;
+    renderLayers(): any[];
+    shouldUpdateState({ changeFlags: { stateChanged, propsOrDataChanged } }: Record<string, any>): any;
+}
+export {};

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

@@ -0,0 +1,167 @@
+/* eslint-env browser */
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+import { polygon } from '@turf/helpers';
+import turfBuffer from '@turf/buffer';
+import turfDifference from '@turf/difference';
+import EditableGeoJsonLayer from './editable-geojson-layer';
+import { DrawRectangleMode } from '../edit-modes/draw-rectangle-mode';
+import { DrawPolygonMode } from '../edit-modes/draw-polygon-mode';
+import { ViewMode } from '../edit-modes/view-mode';
+export const SELECTION_TYPE = {
+    NONE: null,
+    RECTANGLE: 'rectangle',
+    POLYGON: 'polygon'
+};
+const MODE_MAP = {
+    [SELECTION_TYPE.RECTANGLE]: DrawRectangleMode,
+    [SELECTION_TYPE.POLYGON]: DrawPolygonMode
+};
+const MODE_CONFIG_MAP = {
+    [SELECTION_TYPE.RECTANGLE]: { dragToDraw: true }
+};
+const defaultProps = {
+    selectionType: SELECTION_TYPE.RECTANGLE,
+    layerIds: [],
+    onSelect: () => { }
+};
+const EMPTY_DATA = {
+    type: 'FeatureCollection',
+    features: []
+};
+const EXPANSION_KM = 50;
+const LAYER_ID_GEOJSON = 'selection-geojson';
+const LAYER_ID_BLOCKER = 'selection-blocker';
+const PASS_THROUGH_PROPS = [
+    'lineWidthScale',
+    'lineWidthMinPixels',
+    'lineWidthMaxPixels',
+    'lineWidthUnits',
+    'lineJointRounded',
+    'lineCapRounded',
+    'lineMiterLimit',
+    'pointRadiusScale',
+    'pointRadiusMinPixels',
+    'pointRadiusMaxPixels',
+    'lineDashJustified',
+    'getLineColor',
+    'getFillColor',
+    'getRadius',
+    'getLineWidth',
+    'getLineDashArray',
+    'getTentativeLineDashArray',
+    'getTentativeLineColor',
+    'getTentativeFillColor',
+    'getTentativeLineWidth'
+];
+export default class SelectionLayer extends CompositeLayer {
+    static layerName = 'SelectionLayer';
+    static defaultProps = defaultProps;
+    state = undefined;
+    _selectRectangleObjects(coordinates) {
+        const { layerIds, onSelect } = this.props;
+        const [x1, y1] = this.context.viewport.project(coordinates[0][0]);
+        const [x2, y2] = this.context.viewport.project(coordinates[0][2]);
+        const pickingInfos = this.context.deck.pickObjects({
+            x: Math.min(x1, x2),
+            y: Math.min(y1, y2),
+            width: Math.abs(x2 - x1),
+            height: Math.abs(y2 - y1),
+            layerIds
+        });
+        onSelect({ pickingInfos });
+    }
+    _selectPolygonObjects(coordinates) {
+        const { layerIds, onSelect } = this.props;
+        const mousePoints = coordinates[0].map((c) => this.context.viewport.project(c));
+        const allX = mousePoints.map((mousePoint) => mousePoint[0]);
+        const allY = mousePoints.map((mousePoint) => mousePoint[1]);
+        const x = Math.min(...allX);
+        const y = Math.min(...allY);
+        const maxX = Math.max(...allX);
+        const maxY = Math.max(...allY);
+        // Use a polygon to hide the outside, because pickObjects()
+        // does not support polygons
+        const landPointsPoly = polygon(coordinates);
+        const bigBuffer = turfBuffer(landPointsPoly, EXPANSION_KM);
+        let bigPolygon;
+        try {
+            // turfDifference throws an exception if the polygon
+            // intersects with itself (TODO: check if true in all versions)
+            bigPolygon = turfDifference(bigBuffer, landPointsPoly);
+        }
+        catch (e) {
+            // invalid selection polygon
+            console.log('turfDifference() error', e); // eslint-disable-line
+            return;
+        }
+        this.setState({
+            pendingPolygonSelection: {
+                bigPolygon
+            }
+        });
+        const blockerId = `${this.props.id}-${LAYER_ID_BLOCKER}`;
+        // HACK, find a better way
+        setTimeout(() => {
+            const pickingInfos = this.context.deck.pickObjects({
+                x,
+                y,
+                width: maxX - x,
+                height: maxY - y,
+                layerIds: [blockerId, ...layerIds]
+            });
+            onSelect({
+                pickingInfos: pickingInfos.filter((item) => item.layer.id !== this.props.id)
+            });
+        }, 250);
+    }
+    renderLayers() {
+        const { pendingPolygonSelection } = this.state;
+        const mode = MODE_MAP[this.props.selectionType] || ViewMode;
+        const modeConfig = MODE_CONFIG_MAP[this.props.selectionType];
+        const inheritedProps = {};
+        PASS_THROUGH_PROPS.forEach((p) => {
+            if (this.props[p] !== undefined)
+                inheritedProps[p] = this.props[p];
+        });
+        const layers = [
+            new EditableGeoJsonLayer(this.getSubLayerProps({
+                id: LAYER_ID_GEOJSON,
+                pickable: true,
+                mode,
+                modeConfig,
+                selectedFeatureIndexes: [],
+                data: EMPTY_DATA,
+                onEdit: ({ updatedData, editType }) => {
+                    if (editType === 'addFeature') {
+                        const { coordinates } = updatedData.features[0].geometry;
+                        if (this.props.selectionType === SELECTION_TYPE.RECTANGLE) {
+                            this._selectRectangleObjects(coordinates);
+                        }
+                        else if (this.props.selectionType === SELECTION_TYPE.POLYGON) {
+                            this._selectPolygonObjects(coordinates);
+                        }
+                    }
+                },
+                ...inheritedProps
+            }))
+        ];
+        if (pendingPolygonSelection) {
+            const { bigPolygon } = pendingPolygonSelection;
+            layers.push(new PolygonLayer(this.getSubLayerProps({
+                id: LAYER_ID_BLOCKER,
+                pickable: true,
+                stroked: false,
+                opacity: 1.0,
+                data: [bigPolygon],
+                getLineColor: (obj) => [0, 0, 0, 1],
+                getFillColor: (obj) => [0, 0, 0, 1],
+                getPolygon: (o) => o.geometry.coordinates
+            })));
+        }
+        return layers;
+    }
+    shouldUpdateState({ changeFlags: { stateChanged, propsOrDataChanged } }) {
+        return stateChanged || propsOrDataChanged;
+    }
+}

package/dist/geojson-types.d.ts

@@ -0,0 +1,58 @@
+export type Position = [number, number] | [number, number, number];
+export type PointCoordinates = Position;
+export type LineStringCoordinates = Position[];
+export type PolygonCoordinates = Position[][];
+export type MultiPointCoordinates = Position[];
+export type MultiLineStringCoordinates = Position[][];
+export type MultiPolygonCoordinates = Position[][][];
+export type AnyCoordinates = PointCoordinates | LineStringCoordinates | PolygonCoordinates | MultiPointCoordinates | MultiLineStringCoordinates | MultiPolygonCoordinates;
+export type Point = {
+    type: 'Point';
+    coordinates: PointCoordinates;
+};
+export type LineString = {
+    type: 'LineString';
+    coordinates: LineStringCoordinates;
+};
+export type Polygon = {
+    type: 'Polygon';
+    coordinates: PolygonCoordinates;
+};
+export type MultiPoint = {
+    type: 'MultiPoint';
+    coordinates: MultiPointCoordinates;
+};
+export type MultiLineString = {
+    type: 'MultiLineString';
+    coordinates: MultiLineStringCoordinates;
+};
+export type MultiPolygon = {
+    type: 'MultiPolygon';
+    coordinates: MultiPolygonCoordinates;
+};
+export type Geometry = Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon;
+export type Polygonal = Polygon | MultiPolygon;
+export type BoundingBoxArray = [number, number, number, number];
+export type FeatureOf<T extends Geometry> = {
+    type: 'Feature';
+    geometry: T;
+    properties?: {
+        [key: string]: any;
+    };
+    id?: string | number;
+    bbox?: BoundingBoxArray;
+};
+export type FeatureWithProps<T extends Geometry, P> = {
+    type: 'Feature';
+    geometry: T;
+    properties: P;
+};
+export type Feature = FeatureOf<Point> | FeatureOf<LineString> | FeatureOf<Polygon> | FeatureOf<MultiPoint> | FeatureOf<MultiLineString> | FeatureOf<MultiPolygon>;
+export type FeatureCollection = {
+    type: 'FeatureCollection';
+    features: Feature[];
+    properties?: {};
+    id?: string | number;
+    bbox?: BoundingBoxArray;
+};
+export type AnyGeoJson = Feature | FeatureCollection;

package/dist/geojson-types.js

@@ -0,0 +1,2 @@
+// Geometry types
+export {};