@deck.gl-community/layers 0.0.0 → 9.0.2

package/src/path-marker-layer/path-marker-layer.ts

@@ -0,0 +1,183 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer, COORDINATE_SYSTEM, DefaultProps} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
+import {PathOutlineLayer, PathOutlineLayerProps} from '../path-outline-layer/path-outline-layer';
+import {Arrow2DGeometry} from './arrow-2d-geometry';
+
+import {createPathMarkers} from './create-path-markers';
+import {getClosestPointOnPolyline} from './polyline';
+import {Vector3} from '@math.gl/core';
+
+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;
+
+export type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {
+  getDirection?: (x) => any;
+  getMarkerColor?: (x) => number[];
+  getMarkerPercentages?: (x: any, info: any) => number[];
+  highlightPoint?: any;
+  highlightIndex?: number;
+  MarkerLayer?: any;
+  markerLayerProps?: any;
+  sizeScale?: number;
+  fp64?: boolean;
+  nebulaLayer?: any;
+};
+
+const DEFAULT_MARKER_LAYER_PROPS = {
+  mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH})
+};
+
+const defaultProps: DefaultProps<PathMarkerLayerProps<any>> = 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<
+  DataT = any,
+  ExtraPropsT = Record<string, unknown>
+> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {
+  static layerName = 'PathMarkerLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    closestPoint: Vector3 | null;
+    closestPoints?: {position: Vector3}[];
+    markers: any[];
+    mesh: Arrow2DGeometry;
+  } = 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 as any);
+      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/src/path-marker-layer/polyline.ts

@@ -0,0 +1,44 @@
+// 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: Vector3 | null = 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/src/path-outline-layer/outline.ts

@@ -0,0 +1,107 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+/* eslint-disable camelcase */
+const INITIAL_STATE: Record<string, any> = {
+  outlineEnabled: false,
+  outlineRenderShadowmap: false,
+  outlineShadowmap: null
+};
+
+function getUniforms({outlineEnabled, outlineRenderShadowmap, outlineShadowmap} = INITIAL_STATE) {
+  const uniforms: Record<string, any> = {};
+  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
+} as const satisfies ShaderModule;

package/src/path-outline-layer/path-outline-layer.ts

@@ -0,0 +1,159 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {PathLayer, PathLayerProps} from '@deck.gl/layers';
+import type {DefaultProps, LayerContext} from '@deck.gl/core';
+import {GL} from '@luma.gl/constants';
+import {Framebuffer, Texture} from '@luma.gl/core';
+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);
+`;
+
+export type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {
+  dashJustified?: boolean;
+  getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);
+  getZLevel?: (d: DataT, index: number) => number;
+};
+
+const defaultProps: DefaultProps<PathOutlineLayerProps<any>> = {
+  getZLevel: () => 0
+};
+
+export class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends PathLayer<
+  DataT,
+  ExtraPropsT & Required<PathOutlineLayerProps<DataT>>
+> {
+  static layerName = 'PathOutlineLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    model?: any;
+    pathTesselator: any;
+    outlineFramebuffer: Framebuffer;
+    dummyTexture: Texture;
+  } = 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: LayerContext) {
+    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/src/{tile-source-layer.ts → tile-source-layer/tile-source-layer.ts}

@@ -1,17 +1,17 @@
-// 
+// deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, Layer} from '@deck.gl/core/typed';
-import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers/typed';
-import {BitmapLayer, GeoJsonLayer, PathLayer} from '@deck.gl/layers/typed';
+import {CompositeLayer, Layer} from '@deck.gl/core';
+import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers';
+import {BitmapLayer, GeoJsonLayer, PathLayer} from '@deck.gl/layers';
 import type {TileSource} from '@loaders.gl/loader-utils';
 
 /* global window */
 const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
 
 export type TileSourceLayerProps = TileLayerProps & {
-  tileSource: TileSource;
+  tileSource: TileSource<any>;
   showTileBorders?: boolean;
 };
 
@@ -29,8 +29,8 @@ export class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
   };
 
   state: {
-    tileSource: TileSource | null;
-  };
+    tileSource: TileSource<any> | null;
+  } = undefined!;
 
   initializeState() {
     this.setState({
@@ -45,7 +45,7 @@ export class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
   }
 
   renderLayers() {
-    const {tileSource, showTileBorders, metadata, onTilesLoad} = this.props;
+    const {tileSource, showTileBorders, metadata, onTilesLoad} = this.props as any;
     const minZoom = metadata?.minZoom || 0;
     const maxZoom = metadata?.maxZoom || 30;
 
@@ -56,7 +56,7 @@ export class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
         getTileData: tileSource.getTileData,
         // Assume the pmtiles file support HTTP/2, so we aren't limited by the browser to a certain number per domain.
         maxRequests: 20,
-    
+
         pickable: true,
         onViewportLoad: onTilesLoad,
         autoHighlight: showTileBorders,
@@ -66,25 +66,29 @@ export class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
         tileSize: 256,
         // TOOD - why is this needed?
         zoomOffset: devicePixelRatio === 1 ? -1 : 0,
-        renderSubLayers,
-    
+        renderSubLayers: renderSubLayers as any,
+
         // Custom prop
         tileSource,
         showTileBorders
       })
     ];
-  }  
+  }
 }
 
-function renderSubLayers(props: TileSourceLayerProps & {tile: {index, bbox: {west, south, east, north}}}) {
+function renderSubLayers(
+  props: TileSourceLayerProps & {tile: {index; bbox: {west; south; east; north}}}
+) {
   const {
-    tileSource, 
-    showTileBorders, 
+    tileSource,
+    showTileBorders,
     minZoom,
     maxZoom,
-    tile: {index: {z: zoom}, 
-    bbox: {west, south, east, north}}
-  } = props;
+    tile: {
+      index: {z: zoom},
+      bbox: {west, south, east, north}
+    }
+  } = props as any;
 
   const layers: Layer[] = [];
 
@@ -95,7 +99,7 @@ function renderSubLayers(props: TileSourceLayerProps & {tile: {index, bbox: {wes
       layers.push(
         new GeoJsonLayer({
           id: `${props.id}-geojson`,
-          data: props.data,
+          data: props.data as any,
           pickable: true,
           getFillColor: [0, 190, 80, 255],
           lineWidthScale: 500,
@@ -109,16 +113,20 @@ function renderSubLayers(props: TileSourceLayerProps & {tile: {index, bbox: {wes
     case 'image/webp':
     case 'image/avif':
       layers.push(
-        new BitmapLayer(props, {
-          data: null,
-          image: props.data,
-          bounds: [west, south, east, north],
-          pickable: true
-        })
+        new BitmapLayer(
+          props as any,
+          {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north],
+            pickable: true
+          } as any
+        )
       );
       break;
 
     default:
+      // eslint-disable-next-line no-console
       console.error('Unknown tile mimeType', tileSource?.mimeType);
   }
 
@@ -137,7 +145,7 @@ function renderSubLayers(props: TileSourceLayerProps & {tile: {index, bbox: {wes
           ]
         ],
         getPath: (d) => d,
-        getColor: borderColor,
+        getColor: borderColor as any,
         widthMinPixels: 4
       })
     );