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

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.js";
+/**
+ * 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: 5121,
+                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: 32776
+            },
+            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/tile-source-layer/tile-source-layer.d.ts

@@ -0,0 +1,44 @@
+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;
+    }>[];
+}
+//# sourceMappingURL=tile-source-layer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-source-layer.d.ts","sourceRoot":"","sources":["../../src/tile-source-layer/tile-source-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAQ,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAE9D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAKzD,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG;IAClD,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACvE,MAAM,CAAC,SAAS,SAAqB;IACrC,MAAM,CAAC,YAAY;;MAGjB;IAEF,KAAK,EAAE;QACL,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;KACpC,CAAc;IAEf,eAAe;IAMf,WAAW,CAAC,EAAC,KAAK,EAAE,WAAW,EAAC;;;KAAA;IAMhC,YAAY;;;;;;;;;;;;yBAsB8B,GAAG;;;;CAQ9C"}

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.3",
+  "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": "8955b0da47771f3524b65360243ee246abeb3660"
 }

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};
+}