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

package/dist/tile-source-layer/tile-source-layer.d.ts

@@ -0,0 +1,43 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer, TileLayerProps } from '@deck.gl/geo-layers';
+import type { TileSource } from '@loaders.gl/loader-utils';
+export type TileSourceLayerProps = TileLayerProps & {
+    tileSource: TileSource<any>;
+    showTileBorders?: boolean;
+};
+/**
+ * A Deck.gl layer that renders a tile source
+ * Autodiscovers type of content (vector tile, bitmap, ...)
+ * Can render debug borders around tiles
+ * TODO - Change debug border color based on zoom level
+ */
+export declare class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
+    static layerName: string;
+    static defaultProps: {
+        showTileBorders: boolean;
+    };
+    state: {
+        tileSource: TileSource<any> | null;
+    };
+    initializeState(): void;
+    updateState({ props, changeFlags }: {
+        props: any;
+        changeFlags: any;
+    }): void;
+    renderLayers(): TileLayer<any, {
+        id: string;
+        getTileData: any;
+        maxRequests: 20;
+        pickable: true;
+        onViewportLoad: any;
+        autoHighlight: any;
+        highlightColor: number[];
+        minZoom: any;
+        maxZoom: any;
+        tileSize: 256;
+        zoomOffset: 0 | -1;
+        renderSubLayers: any;
+        tileSource: any;
+        showTileBorders: any;
+    }>[];
+}

package/dist/tile-source-layer/tile-source-layer.js

@@ -0,0 +1,109 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer } from '@deck.gl/geo-layers';
+import { BitmapLayer, GeoJsonLayer, PathLayer } from '@deck.gl/layers';
+/* global window */
+const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+/**
+ * A Deck.gl layer that renders a tile source
+ * Autodiscovers type of content (vector tile, bitmap, ...)
+ * Can render debug borders around tiles
+ * TODO - Change debug border color based on zoom level
+ */
+export class TileSourceLayer extends CompositeLayer {
+    static layerName = 'TileSourceLayer';
+    static defaultProps = {
+        ...TileLayer.defaultProps,
+        showTileBorders: true
+    };
+    state = undefined;
+    initializeState() {
+        this.setState({
+            tileSource: null
+        });
+    }
+    updateState({ props, changeFlags }) {
+        this.setState({
+            tileSource: props.tileSource
+        });
+    }
+    renderLayers() {
+        const { tileSource, showTileBorders, metadata, onTilesLoad } = this.props;
+        const minZoom = metadata?.minZoom || 0;
+        const maxZoom = metadata?.maxZoom || 30;
+        return [
+            new TileLayer({
+                // HACK: Trigger new layer via id prop to force clear tile cache
+                id: String(tileSource.url),
+                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,
+                highlightColor: [60, 60, 60, 40],
+                minZoom,
+                maxZoom,
+                tileSize: 256,
+                // TOOD - why is this needed?
+                zoomOffset: devicePixelRatio === 1 ? -1 : 0,
+                renderSubLayers: renderSubLayers,
+                // Custom prop
+                tileSource,
+                showTileBorders
+            })
+        ];
+    }
+}
+function renderSubLayers(props) {
+    const { tileSource, showTileBorders, minZoom, maxZoom, tile: { index: { z: zoom }, bbox: { west, south, east, north } } } = props;
+    const layers = [];
+    const borderColor = zoom <= minZoom || zoom >= maxZoom ? [255, 0, 0, 255] : [0, 0, 255, 255];
+    switch (tileSource.mimeType) {
+        case 'application/vnd.mapbox-vector-tile':
+            layers.push(new GeoJsonLayer({
+                id: `${props.id}-geojson`,
+                data: props.data,
+                pickable: true,
+                getFillColor: [0, 190, 80, 255],
+                lineWidthScale: 500,
+                lineWidthMinPixels: 0.5
+            }));
+            break;
+        case 'image/png':
+        case 'image/jpeg':
+        case 'image/webp':
+        case 'image/avif':
+            layers.push(new BitmapLayer(props, {
+                data: null,
+                image: props.data,
+                bounds: [west, south, east, north],
+                pickable: true
+            }));
+            break;
+        default:
+            // eslint-disable-next-line no-console
+            console.error('Unknown tile mimeType', tileSource?.mimeType);
+    }
+    // Debug tile borders
+    if (showTileBorders) {
+        layers.push(new PathLayer({
+            id: `${props.id}-border`,
+            data: [
+                [
+                    [west, north],
+                    [west, south],
+                    [east, south],
+                    [east, north],
+                    [west, north]
+                ]
+            ],
+            getPath: (d) => d,
+            getColor: borderColor,
+            widthMinPixels: 4
+        }));
+    }
+    return layers;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deck.gl-community/layers",
-  "version": "9.0.0-alpha.1",
-  "description": "Experimental layers for deck.gl",
+  "version": "9.0.2",
+  "description": "Addon layers for deck.gl",
   "license": "MIT",
   "keywords": [
     "layers",
@@ -11,26 +11,40 @@
   ],
   "type": "module",
   "sideEffects": false,
+  "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "exports": {
     ".": {
-      "main": "./dist/index.cjs",
-      "module": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     }
   },
   "files": [
     "dist",
     "src"
   ],
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
   "dependencies": {
-    "@deck.gl/core": "^9.0.0-beta.5",
-    "@deck.gl/extensions": "9.0.0-beta.5",
-    "@deck.gl/geo-layers": "^9.0.0-beta.5",
-    "@deck.gl/layers": "^9.0.0-beta.5",
-    "@deck.gl/mesh-layers": "^9.0.0-beta.5",
-    "@deck.gl/react": "^9.0.0-beta.5",
-    "@loaders.gl/core": "^4.1.0",
-    "@loaders.gl/loader-utils": "^4.1.0"
-  }
+    "@deck.gl/core": "^9.0.12",
+    "@deck.gl/extensions": "^9.0.12",
+    "@deck.gl/geo-layers": "^9.0.12",
+    "@deck.gl/layers": "^9.0.12",
+    "@deck.gl/mesh-layers": "^9.0.12",
+    "@deck.gl/react": "^9.0.12",
+    "@loaders.gl/core": "^4.2.0",
+    "@loaders.gl/i3s": "^4.2.0",
+    "@loaders.gl/loader-utils": "^4.2.0",
+    "@loaders.gl/schema": "^4.2.0",
+    "@loaders.gl/tiles": "^4.2.0",
+    "@luma.gl/constants": "^9.0.11",
+    "@luma.gl/core": "^9.0.11",
+    "@luma.gl/engine": "^9.0.11",
+    "@math.gl/core": "^4.0.0"
+  },
+  "gitHead": "646f8328d27d67d596f05c9154072051ec5cf4f0"
 }

package/src/index.ts

@@ -2,8 +2,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-export {TileSourceLayer} from './tile-source-layer';
-export {DataDrivenTile3DLayer} from './data-driven-tile-3d-layer/data-driven-tile-3d-layer';
+export type {TileSourceLayerProps} from './tile-source-layer/tile-source-layer';
+export {TileSourceLayer} from './tile-source-layer/tile-source-layer';
 
-export {colorizeTile} from './data-driven-tile-3d-layer/utils/colorize-tile';
-export {filterTile} from './data-driven-tile-3d-layer/utils/filter-tile';
+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/src/path-marker-layer/arrow-2d-geometry.ts

@@ -0,0 +1,65 @@
+// 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' as const
+      })
+    );
+  }
+}
+
+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/src/path-marker-layer/create-path-markers.ts

@@ -0,0 +1,122 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Vector2} from '@math.gl/core';
+
+/** 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;
+}
+
+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
+}): PathMarker[] {
+  const markers: PathMarker[] = [];
+
+  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
+}): PathMarker {
+  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/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)
+  };
+}