@deck.gl-community/layers 9.0.0-alpha.1 → 9.0.2

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export type { TileSourceLayerProps } from './tile-source-layer/tile-source-layer';
+export { TileSourceLayer } from './tile-source-layer/tile-source-layer';
+export type { PathOutlineLayerProps } from './path-outline-layer/path-outline-layer';
+export { PathOutlineLayer } from './path-outline-layer/path-outline-layer';
+export type { PathMarkerLayerProps } from './path-marker-layer/path-marker-layer';
+export { PathMarkerLayer } from './path-marker-layer/path-marker-layer';

package/dist/index.js

@@ -1,5 +1,6 @@
-export { TileSourceLayer } from "./tile-source-layer.js";
-export { DataDrivenTile3DLayer } from "./data-driven-tile-3d-layer/data-driven-tile-3d-layer.js";
-export { colorizeTile } from "./data-driven-tile-3d-layer/utils/colorize-tile.js";
-export { filterTile } from "./data-driven-tile-3d-layer/utils/filter-tile.js";
-//# sourceMappingURL=index.js.map
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export { TileSourceLayer } from './tile-source-layer/tile-source-layer';
+export { PathOutlineLayer } from './path-outline-layer/path-outline-layer';
+export { PathMarkerLayer } from './path-marker-layer/path-marker-layer';

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

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

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

@@ -0,0 +1,58 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Geometry } from '@luma.gl/engine';
+export 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/path-marker-layer/create-path-markers.d.ts

@@ -0,0 +1,18 @@
+/** GeoJSON style position coordinate vector */
+export type Position = [number, number] | [number, number, number];
+/** [red, green, blue, alpha] in premultiplied alpha format */
+export type Color = [number, number, number, number];
+export interface PathMarker {
+    position: Position;
+    angle: number;
+    color: Color;
+    object: unknown;
+}
+export declare 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/path-marker-layer/create-path-markers.js

@@ -0,0 +1,78 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+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 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/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 declare 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[];
+}

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

@@ -0,0 +1,124 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+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 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/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/path-marker-layer/polyline.js

@@ -0,0 +1,40 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+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/path-outline-layer/outline.d.ts

@@ -0,0 +1,8 @@
+declare function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap }?: Record<string, any>): Record<string, any>;
+export declare const outline: {
+    readonly name: "outline";
+    readonly vs: "#version 300 es\nin float instanceZLevel;\nout float outline_vzLevel;\nout vec4 outline_vPosition;\n\n// Set the z level for the outline shadowmap rendering\nvoid outline_setZLevel(float zLevel) {\n  outline_vzLevel = zLevel;\n}\n\n// Store an adjusted position for texture2DProj\nvoid outline_setUV(vec4 position) {\n  // mat4(\n  //   0.5, 0.0, 0.0, 0.0,\n  //   0.0, 0.5, 0.0, 0.0,\n  //   0.0, 0.0, 0.5, 0.0,\n  //   0.5, 0.5, 0.5, 1.0\n  // ) * position;\n  outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);\n}\n";
+    readonly fs: "uniform bool outline_uEnabled;\nuniform bool outline_uRenderOutlines;\nuniform sampler2D outline_uShadowmap;\n\nin float outline_vzLevel;\n// in vec2 outline_vUV;\nin vec4 outline_vPosition;\n\nout vec4 fragColor;\n\nconst float OUTLINE_Z_LEVEL_ERROR = 0.01;\n\n// Return a darker color in shadowmap\nvec4 outline_filterShadowColor(vec4 color) {\n  return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);\n}\n\n// Return a darker color if in shadowmap\nvec4 outline_filterDarkenColor(vec4 color) {\n  if (outline_uEnabled) {\n    float maxZLevel;\n    if (outline_vPosition.q > 0.0) {\n      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;\n    } else {\n      discard;\n    }\n    if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {\n      vec4(color.rgb * 0.5, color.a);\n    } else {\n      discard;\n    }\n  }\n  return color;\n}\n\n// if enabled and rendering outlines - Render depth to shadowmap\n// if enabled and rendering colors - Return a darker color if in shadowmap\n// if disabled, just return color\nvec4 outline_filterColor(vec4 color) {\n  if (outline_uEnabled) {\n    return outline_uRenderOutlines ?\n      outline_filterShadowColor(color) :\n      outline_filterDarkenColor(color);\n  }\n  return color;\n}\n";
+    readonly getUniforms: typeof getUniforms;
+};
+export {};

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

@@ -0,0 +1,100 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/* eslint-disable camelcase */
+const INITIAL_STATE = {
+    outlineEnabled: false,
+    outlineRenderShadowmap: false,
+    outlineShadowmap: null
+};
+function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
+    const uniforms = {};
+    if (outlineEnabled !== undefined) {
+        // ? 1.0 : 0.0;
+        uniforms.outline_uEnabled = outlineEnabled;
+    }
+    if (outlineRenderShadowmap !== undefined) {
+        // ? 1.0 : 0.0;
+        uniforms.outline_uRenderOutlines = outlineRenderShadowmap;
+    }
+    if (outlineShadowmap !== undefined) {
+        uniforms.outline_uShadowmap = outlineShadowmap;
+    }
+    return uniforms;
+}
+const vs = `\
+#version 300 es
+in float instanceZLevel;
+out float outline_vzLevel;
+out vec4 outline_vPosition;
+
+// Set the z level for the outline shadowmap rendering
+void outline_setZLevel(float zLevel) {
+  outline_vzLevel = zLevel;
+}
+
+// Store an adjusted position for texture2DProj
+void outline_setUV(vec4 position) {
+  // mat4(
+  //   0.5, 0.0, 0.0, 0.0,
+  //   0.0, 0.5, 0.0, 0.0,
+  //   0.0, 0.0, 0.5, 0.0,
+  //   0.5, 0.5, 0.5, 1.0
+  // ) * position;
+  outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);
+}
+`;
+const fs = `\
+uniform bool outline_uEnabled;
+uniform bool outline_uRenderOutlines;
+uniform sampler2D outline_uShadowmap;
+
+in float outline_vzLevel;
+// in vec2 outline_vUV;
+in vec4 outline_vPosition;
+
+out vec4 fragColor;
+
+const float OUTLINE_Z_LEVEL_ERROR = 0.01;
+
+// Return a darker color in shadowmap
+vec4 outline_filterShadowColor(vec4 color) {
+  return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);
+}
+
+// Return a darker color if in shadowmap
+vec4 outline_filterDarkenColor(vec4 color) {
+  if (outline_uEnabled) {
+    float maxZLevel;
+    if (outline_vPosition.q > 0.0) {
+      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;
+    } else {
+      discard;
+    }
+    if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {
+      vec4(color.rgb * 0.5, color.a);
+    } else {
+      discard;
+    }
+  }
+  return color;
+}
+
+// if enabled and rendering outlines - Render depth to shadowmap
+// if enabled and rendering colors - Return a darker color if in shadowmap
+// if disabled, just return color
+vec4 outline_filterColor(vec4 color) {
+  if (outline_uEnabled) {
+    return outline_uRenderOutlines ?
+      outline_filterShadowColor(color) :
+      outline_filterDarkenColor(color);
+  }
+  return color;
+}
+`;
+export const outline = {
+    name: 'outline',
+    vs,
+    fs,
+    getUniforms
+};

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

@@ -0,0 +1,34 @@
+import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+import type { DefaultProps, LayerContext } from '@deck.gl/core';
+import { Framebuffer, Texture } from '@luma.gl/core';
+/**
+ * Unit literal to shader unit number conversion.
+ */
+export declare const UNIT: {
+    common: number;
+    meters: number;
+    pixels: number;
+};
+export type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {
+    dashJustified?: boolean;
+    getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);
+    getZLevel?: (d: DataT, index: number) => number;
+};
+export declare 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/path-outline-layer/path-outline-layer.js

@@ -0,0 +1,116 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { PathLayer } from '@deck.gl/layers';
+import { GL } from '@luma.gl/constants';
+import { outline } from './outline';
+/**
+ * Unit literal to shader unit number conversion.
+ */
+export const UNIT = {
+    common: 0,
+    meters: 1,
+    pixels: 2
+};
+// 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 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
+            }
+        });
+    }
+}