@deck.gl-community/layers 0.0.0 → 9.0.2

package/dist/index.cjs

@@ -1,26 +1,8 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __reflectGet = Reflect.get;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,44 +16,27 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  DataDrivenTile3DLayer: () => DataDrivenTile3DLayer,
-  TileSourceLayer: () => TileSourceLayer,
-  colorizeTile: () => colorizeTile,
-  filterTile: () => filterTile
+// dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  PathMarkerLayer: () => PathMarkerLayer,
+  PathOutlineLayer: () => PathOutlineLayer,
+  TileSourceLayer: () => TileSourceLayer
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(dist_exports);
 
-// src/tile-source-layer.ts
-var import_typed = require("@deck.gl/core/typed");
-var import_typed2 = require("@deck.gl/geo-layers/typed");
-var import_typed3 = require("@deck.gl/layers/typed");
+// dist/tile-source-layer/tile-source-layer.js
+var import_core = require("@deck.gl/core");
+var import_geo_layers = require("@deck.gl/geo-layers");
+var import_layers = require("@deck.gl/layers");
 var devicePixelRatio = typeof window !== "undefined" && window.devicePixelRatio || 1;
-var TileSourceLayer = class extends import_typed.CompositeLayer {
+var TileSourceLayer = class extends import_core.CompositeLayer {
+  state = void 0;
   initializeState() {
     this.setState({
       tileSource: null
@@ -87,7 +52,7 @@ var TileSourceLayer = class extends import_typed.CompositeLayer {
     const minZoom = (metadata == null ? void 0 : metadata.minZoom) || 0;
     const maxZoom = (metadata == null ? void 0 : metadata.maxZoom) || 30;
     return [
-      new import_typed2.TileLayer({
+      new import_geo_layers.TileLayer({
         // HACK: Trigger new layer via id prop to force clear tile cache
         id: String(tileSource.url),
         getTileData: tileSource.getTileData,
@@ -110,406 +75,531 @@ var TileSourceLayer = class extends import_typed.CompositeLayer {
     ];
   }
 };
-TileSourceLayer.layerName = "TileSourceLayer";
-TileSourceLayer.defaultProps = __spreadProps(__spreadValues({}, import_typed2.TileLayer.defaultProps), {
+__publicField(TileSourceLayer, "layerName", "TileSourceLayer");
+__publicField(TileSourceLayer, "defaultProps", {
+  ...import_geo_layers.TileLayer.defaultProps,
   showTileBorders: true
 });
 function renderSubLayers(props) {
-  const {
-    tileSource,
-    showTileBorders,
-    minZoom,
-    maxZoom,
-    tile: {
-      index: { z: zoom },
-      bbox: { west, south, east, north }
-    }
-  } = 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 import_typed3.GeoJsonLayer({
-          id: `${props.id}-geojson`,
-          data: props.data,
-          pickable: true,
-          getFillColor: [0, 190, 80, 255],
-          lineWidthScale: 500,
-          lineWidthMinPixels: 0.5
-        })
-      );
+      layers.push(new import_layers.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 import_typed3.BitmapLayer(props, {
-          data: null,
-          image: props.data,
-          bounds: [west, south, east, north],
-          pickable: true
-        })
-      );
+      layers.push(new import_layers.BitmapLayer(props, {
+        data: null,
+        image: props.data,
+        bounds: [west, south, east, north],
+        pickable: true
+      }));
       break;
     default:
       console.error("Unknown tile mimeType", tileSource == null ? void 0 : tileSource.mimeType);
   }
   if (showTileBorders) {
-    layers.push(
-      new import_typed3.PathLayer({
-        id: `${props.id}-border`,
-        data: [
-          [
-            [west, north],
-            [west, south],
-            [east, south],
-            [east, north],
-            [west, north]
-          ]
-        ],
-        getPath: (d) => d,
-        getColor: borderColor,
-        widthMinPixels: 4
-      })
-    );
+    layers.push(new import_layers.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;
 }
 
-// src/data-driven-tile-3d-layer/data-driven-tile-3d-layer.ts
-var import_typed4 = require("@deck.gl/geo-layers/typed");
-var import_tiles = require("@loaders.gl/tiles");
-var import_core = require("@loaders.gl/core");
+// dist/path-outline-layer/path-outline-layer.js
+var import_layers2 = require("@deck.gl/layers");
+var import_constants = require("@luma.gl/constants");
+
+// dist/path-outline-layer/outline.js
+var INITIAL_STATE = {
+  outlineEnabled: false,
+  outlineRenderShadowmap: false,
+  outlineShadowmap: null
+};
+function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
+  const uniforms = {};
+  if (outlineEnabled !== void 0) {
+    uniforms.outline_uEnabled = outlineEnabled;
+  }
+  if (outlineRenderShadowmap !== void 0) {
+    uniforms.outline_uRenderOutlines = outlineRenderShadowmap;
+  }
+  if (outlineShadowmap !== void 0) {
+    uniforms.outline_uShadowmap = outlineShadowmap;
+  }
+  return uniforms;
+}
+var 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);
+}
+`;
+var 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;
+}
+`;
+var outline = {
+  name: "outline",
+  vs,
+  fs,
+  getUniforms
+};
+
+// dist/path-outline-layer/path-outline-layer.js
+var UNIT = {
+  common: 0,
+  meters: 1,
+  pixels: 2
+};
+function injectShaderCode({ source, code = "" }) {
+  const INJECT_CODE = /}[^{}]*$/;
+  return source.replace(INJECT_CODE, code.concat("\n}\n"));
+}
+var VS_CODE = `  outline_setUV(gl_Position);
+  outline_setZLevel(instanceZLevel);
+`;
+var FS_CODE = `  fragColor = outline_filterColor(fragColor);
+`;
 var defaultProps = {
-  colorsByAttribute: null,
-  filtersByAttribute: null
+  getZLevel: () => 0
 };
-var _DataDrivenTile3DLayer = class extends import_typed4.Tile3DLayer {
-  initializeState() {
+var PathOutlineLayer = class extends import_layers2.PathLayer {
+  state = void 0;
+  // 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();
     this.setState({
-      colorsByAttribute: this.props.colorsByAttribute,
-      filtersByAttribute: this.props.filtersByAttribute,
-      loadingCounter: 0
+      outlineFramebuffer: context.device.createFramebuffer({}),
+      dummyTexture: context.device.createTexture({})
     });
-  }
-  updateState(params) {
-    const { props, oldProps, changeFlags } = params;
-    if (props.data && props.data !== oldProps.data) {
-      this._loadTileset(props.data);
-    } else if (props.colorsByAttribute !== oldProps.colorsByAttribute) {
-      this.setState({
-        colorsByAttribute: props.colorsByAttribute
-      });
-      this._colorizeTileset();
-    } else if (props.filtersByAttribute !== oldProps.filtersByAttribute) {
-      this.setState({
-        filtersByAttribute: props.filtersByAttribute
-      });
-      this._filterTileset();
-    } else if (changeFlags.viewportChanged) {
-      const { activeViewports } = this.state;
-      const viewportsNumber = Object.keys(activeViewports).length;
-      if (viewportsNumber) {
-        if (!this.state.loadingCounter) {
-          super._updateTileset(activeViewports);
-        }
-        this.state.lastUpdatedViewports = activeViewports;
-        this.state.activeViewports = {};
+    this.state.attributeManager.addInstanced({
+      instanceZLevel: {
+        size: 1,
+        type: import_constants.GL.UNSIGNED_BYTE,
+        accessor: "getZLevel"
       }
-    } else {
-      super.updateState(params);
-    }
+    });
   }
-  _loadTileset(tilesetUrl) {
-    return __async(this, null, function* () {
-      const { loadOptions = {} } = this.props;
-      let loader = this.props.loader || this.props.loaders;
-      if (Array.isArray(loader)) {
-        loader = loader[0];
-      }
-      const options = { loadOptions: __spreadValues({}, loadOptions) };
-      if (loader.preload) {
-        const preloadOptions = yield loader.preload(tilesetUrl, loadOptions);
-        if (preloadOptions.headers) {
-          options.loadOptions.fetch = __spreadProps(__spreadValues({}, options.loadOptions.fetch), {
-            headers: preloadOptions.headers
-          });
-        }
-        Object.assign(options, preloadOptions);
+  // Override draw to add render module
+  draw({ moduleParameters = {}, parameters, uniforms, context }) {
+    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
+    });
+    const { outlineFramebuffer, dummyTexture } = this.state;
+    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: import_constants.GL.MAX
+      },
+      framebuffer: outlineFramebuffer
+    });
+    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
       }
-      const tilesetJson = yield (0, import_core.load)(tilesetUrl, loader, options.loadOptions);
-      const tileset3d = new import_tiles.Tileset3D(tilesetJson, __spreadValues({
-        onTileLoad: this._onTileLoad.bind(this),
-        //@ts-expect-error call of private method of the base class
-        onTileUnload: __superGet(_DataDrivenTile3DLayer.prototype, this, "_onTileUnload").bind(this),
-        onTileError: this.props.onTileError,
-        // New code ------------------
-        onTraversalComplete: this._onTraversalComplete.bind(this)
-      }, options));
-      this.setState({
-        tileset3d,
-        layerMap: {}
-      });
-      __superGet(_DataDrivenTile3DLayer.prototype, this, "_updateTileset").call(this, this.state.activeViewports);
-      this.props.onTilesetLoad(tileset3d);
     });
   }
-  _onTileLoad(tileHeader) {
-    const { lastUpdatedViewports } = this.state;
-    this._colorizeTiles([tileHeader]);
-    this._filterTiles([tileHeader]);
-    this.props.onTileLoad(tileHeader);
-    if (!this.state.colorsByAttribute && !this.state.filtersByAttribute) {
-      super._updateTileset(lastUpdatedViewports);
-      this.setNeedsUpdate();
-    }
-  }
-  _onTraversalComplete(selectedTiles) {
-    this._colorizeTiles(selectedTiles);
-    this._filterTiles(selectedTiles);
-    return this.props.onTraversalComplete ? this.props.onTraversalComplete(selectedTiles) : selectedTiles;
+};
+__publicField(PathOutlineLayer, "layerName", "PathOutlineLayer");
+__publicField(PathOutlineLayer, "defaultProps", defaultProps);
+
+// dist/path-marker-layer/path-marker-layer.js
+var import_core4 = require("@deck.gl/core");
+var import_layers3 = require("@deck.gl/layers");
+var import_mesh_layers = require("@deck.gl/mesh-layers");
+
+// dist/path-marker-layer/arrow-2d-geometry.js
+var import_engine = require("@luma.gl/engine");
+var Arrow2DGeometry = class extends import_engine.Geometry {
+  constructor(opts = {}) {
+    super(Object.assign({}, opts, {
+      attributes: getArrowAttributes(opts),
+      topology: "triangle-list"
+    }));
   }
-  _colorizeTiles(tiles) {
-    var _a;
-    if (this.props.customizeColors && ((_a = tiles[0]) == null ? void 0 : _a.type) === import_tiles.TILE_TYPE.MESH) {
-      const { layerMap, colorsByAttribute } = this.state;
-      const promises = [];
-      for (const tile of tiles) {
-        promises.push(this.props.customizeColors(tile, colorsByAttribute));
-      }
-      this.setState({
-        loadingCounter: this.state.loadingCounter + 1
-      });
-      Promise.allSettled(promises).then((result) => {
-        this.setState({
-          loadingCounter: this.state.loadingCounter - 1
-        });
-        let isTileChanged = false;
-        for (const item of result) {
-          if (item.status === "fulfilled" && item.value.isColored) {
-            isTileChanged = true;
-            delete layerMap[item.value.id];
-          }
-        }
-        if (isTileChanged && !this.state.loadingCounter) {
-          super._updateTileset(this.state.activeViewports);
-          this.setNeedsUpdate();
-        }
-      });
-    }
+};
+function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05 }) {
+  const texCoords = [
+    // HEAD
+    0.5,
+    1,
+    0,
+    0.5 - headSize / 2,
+    1 - headSize,
+    0,
+    0.5 + headSize / 2,
+    1 - headSize,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 + tailWidth / 2,
+    1 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    1 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    1 - 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];
+  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;
   }
-  _colorizeTileset() {
-    const { tileset3d } = this.state;
-    if (tileset3d) {
-      this._colorizeTiles(tileset3d.selectedTiles);
-    }
+  return {
+    positions: { size: 3, value: new Float32Array(positions) },
+    normals: { size: 3, value: new Float32Array(normals) },
+    texCoords: { size: 2, value: new Float32Array(texCoords) }
+  };
+}
+
+// dist/path-marker-layer/create-path-markers.js
+var import_core2 = require("@math.gl/core");
+function getLineLength(vPoints) {
+  let lineLength = 0;
+  for (let i = 0; i < vPoints.length - 1; i++) {
+    lineLength += vPoints[i].distance(vPoints[i + 1]);
   }
-  _filterTiles(tiles) {
-    var _a;
-    if (this.props.filterTile && ((_a = tiles[0]) == null ? void 0 : _a.type) === import_tiles.TILE_TYPE.MESH) {
-      const { layerMap, filtersByAttribute } = this.state;
-      const promises = [];
-      for (const tile of tiles) {
-        promises.push(this.props.filterTile(tile, filtersByAttribute));
+  return lineLength;
+}
+var DEFAULT_COLOR = [0, 0, 0, 255];
+var DEFAULT_DIRECTION = { forward: true, backward: false };
+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 import_core2.Vector2(p));
+    const vPointsReverse = vPoints.slice(0).reverse();
+    const lineLength = getLineLength(vPoints);
+    const percentages = getMarkerPercentages(object, { lineLength });
+    for (const percentage of percentages) {
+      if (direction.forward) {
+        const marker = createMarkerAlongPath({
+          path: vPoints,
+          percentage,
+          lineLength,
+          color,
+          object,
+          projectFlat
+        });
+        markers.push(marker);
       }
-      this.setState({
-        loadingCounter: this.state.loadingCounter + 1
-      });
-      Promise.allSettled(promises).then((result) => {
-        this.setState({
-          loadingCounter: this.state.loadingCounter - 1
+      if (direction.backward) {
+        const marker = createMarkerAlongPath({
+          path: vPointsReverse,
+          percentage,
+          lineLength,
+          color,
+          object,
+          projectFlat
         });
-        let isTileChanged = false;
-        for (const item of result) {
-          if (item.status === "fulfilled" && item.value.isFiltered) {
-            isTileChanged = true;
-            delete layerMap[item.value.id];
-          }
-        }
-        if (isTileChanged && !this.state.loadingCounter) {
-          super._updateTileset(this.state.activeViewports);
-          this.setNeedsUpdate();
-        }
-      });
+        markers.push(marker);
+      }
     }
   }
-  _filterTileset() {
-    const { tileset3d } = this.state;
-    if (tileset3d) {
-      this._filterTiles(tileset3d.selectedTiles);
+  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;
   }
-};
-var DataDrivenTile3DLayer = _DataDrivenTile3DLayer;
-DataDrivenTile3DLayer.layerName = "DataDrivenTile3DLayer";
-DataDrivenTile3DLayer.defaultProps = defaultProps;
-
-// src/data-driven-tile-3d-layer/utils/colorize-tile.ts
-var import_i3s = require("@loaders.gl/i3s");
-var colorizeTile = (tile, colorsByAttribute) => __async(void 0, null, function* () {
-  const result = { isColored: false, id: tile.id };
-  if (tile.content.customColors !== colorsByAttribute) {
-    if (tile.content && colorsByAttribute) {
-      if (!tile.content.originalColorsAttributes) {
-        tile.content.originalColorsAttributes = __spreadProps(__spreadValues({}, tile.content.attributes.colors), {
-          value: new Uint8Array(tile.content.attributes.colors.value)
-        });
-      } else if (colorsByAttribute.mode === "multiply") {
-        tile.content.attributes.colors.value.set(tile.content.originalColorsAttributes.value);
-      }
-      tile.content.customColors = colorsByAttribute;
-      const newColors = yield (0, import_i3s.customizeColors)(
-        tile.content.attributes.colors,
-        tile.content.featureIds,
-        tile.header.attributeUrls,
-        tile.tileset.tileset.fields,
-        tile.tileset.tileset.attributeStorageInfo,
-        colorsByAttribute,
-        tile.tileset.loadOptions.i3s.token
-      );
-      if (tile.content.customColors === colorsByAttribute) {
-        tile.content.attributes.colors = newColors;
-        result.isColored = true;
-      }
-    } else if (tile.content && tile.content.originalColorsAttributes) {
-      tile.content.attributes.colors.value = tile.content.originalColorsAttributes.value;
-      tile.content.customColors = null;
-      result.isColored = true;
-    }
+  if (i === path.length - 1) {
+    i -= 1;
   }
-  return result;
-});
+  const vDirection = path[i + 1].clone().subtract(path[i]).normalize();
+  const along = distanceAlong - previousDistance;
+  const vCenter = vDirection.clone().multiply(new import_core2.Vector2(along, along)).add(path[i]);
+  const vDirection2 = new import_core2.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 };
+}
 
-// src/data-driven-tile-3d-layer/utils/filter-tile.ts
-var import_i3s2 = require("@loaders.gl/i3s");
-var import_core2 = require("@loaders.gl/core");
-var filterTile = (tile, filtersByAttribute) => __async(void 0, null, function* () {
-  var _a, _b, _c, _d;
-  const result = { isFiltered: false, id: tile.id };
-  if (((_a = tile.content.userData) == null ? void 0 : _a.customFilters) !== filtersByAttribute) {
-    if (tile.content && filtersByAttribute) {
-      if (((_b = tile.content.userData) == null ? void 0 : _b.originalIndices) === void 0) {
-        tile.content.userData = {};
-        tile.content.userData.originalIndices = tile.content.indices;
-      }
-      tile.content.indices = (_c = tile.content.userData) == null ? void 0 : _c.originalIndices;
-      tile.content.userData.customFilters = filtersByAttribute;
-      const { indices } = yield filterTileIndices(
-        tile,
-        filtersByAttribute,
-        tile.tileset.loadOptions.i3s.token
-      );
-      if (indices && tile.content.userData.customFilters === filtersByAttribute) {
-        tile.content.indices = indices;
-        result.isFiltered = true;
-      }
-    } else if (tile.content && ((_d = tile.content.userData) == null ? void 0 : _d.originalIndices) !== void 0) {
-      tile.content.indices = tile.content.userData.originalIndices;
-      tile.content.userData.customFilters = null;
-      result.isFiltered = true;
+// dist/path-marker-layer/polyline.js
+var import_core3 = require("@math.gl/core");
+function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
+  const lineVector = new import_core3.Vector3(p2).subtract(p1);
+  const pointVector = new import_core3.Vector3(p).subtract(p1);
+  let dotProduct = lineVector.dot(pointVector);
+  if (clampToLine) {
+    dotProduct = (0, import_core3.clamp)(dotProduct, 0, 1);
+  }
+  return lineVector.lerp(p1, p2, dotProduct);
+}
+function getClosestPointOnPolyline({ p, points }) {
+  p = new import_core3.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 result;
+  return {
+    point: pClosest,
+    index,
+    p1: points[index],
+    p2: points[index + 1],
+    distanceSquared,
+    distance: Math.sqrt(distanceSquared)
+  };
+}
+
+// dist/path-marker-layer/path-marker-layer.js
+var DISTANCE_FOR_MULTI_ARROWS = 0.1;
+var ARROW_HEAD_SIZE = 0.2;
+var ARROW_TAIL_WIDTH = 0.05;
+var DEFAULT_MARKER_LAYER = import_mesh_layers.SimpleMeshLayer;
+var DEFAULT_MARKER_LAYER_PROPS = {
+  mesh: new Arrow2DGeometry({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH })
+};
+var defaultProps2 = 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]
 });
-function filterTileIndices(tile, filtersByAttribute, token) {
-  return __async(this, null, function* () {
-    var _a;
-    if (!filtersByAttribute.attributeName.length) {
-      return { success: false };
-    }
-    const filterAttributeField = tile.tileset.tileset.fields.find(
-      ({ name }) => name === (filtersByAttribute == null ? void 0 : filtersByAttribute.attributeName)
-    );
-    if (!filterAttributeField || !["esriFieldTypeDouble", "esriFieldTypeInteger", "esriFieldTypeSmallInteger"].includes(
-      filterAttributeField.type
-    )) {
-      return { success: false };
-    }
-    const tileFilterAttributeData = yield loadFeatureAttributeData(
-      filterAttributeField.name,
-      tile.header.attributeUrls,
-      tile.tileset.tileset.attributeStorageInfo,
-      token
-    );
-    if (!tileFilterAttributeData) {
-      return { success: false };
-    }
-    const objectIdField = tile.tileset.tileset.fields.find(({ type }) => type === "esriFieldTypeOID");
-    if (!objectIdField) {
-      return { success: false };
-    }
-    const objectIdAttributeData = yield loadFeatureAttributeData(
-      objectIdField.name,
-      tile.header.attributeUrls,
-      tile.tileset.tileset.attributeStorageInfo,
-      token
-    );
-    if (!objectIdAttributeData) {
-      return { success: false };
+var PathMarkerLayer = class extends import_core4.CompositeLayer {
+  state = void 0;
+  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 === import_core4.COORDINATE_SYSTEM.METER_OFFSETS) {
+      const [dx, dy] = viewport.metersToLngLatDelta(xyz);
+      const [x, y] = coordinateOrigin;
+      return viewport.projectFlat([x + dx, dy + y]);
+    } else if (coordinateSystem === import_core4.COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
+      const [dx, dy] = xyz;
+      const [x, y] = coordinateOrigin;
+      return viewport.projectFlat([x + dx, dy + y]);
     }
-    const attributeValuesMap = {};
-    (_a = objectIdAttributeData[objectIdField.name]) == null ? void 0 : _a.forEach((elem, index) => {
-      attributeValuesMap[elem] = //@ts-expect-error possible null
-      tileFilterAttributeData[filterAttributeField.name][index];
-    });
-    if (!tile.content.indices) {
-      const triangles = [];
-      for (let i = 0; i < tile.content.featureIds.length; i += 3) {
-        if (attributeValuesMap[tile.content.featureIds[i]] === filtersByAttribute.value) {
-          triangles.push(i);
-        }
-      }
-      const indices = new Uint32Array(3 * triangles.length);
-      triangles.forEach((vertex, index) => {
-        indices[index * 3] = vertex;
-        indices[index * 3 + 1] = vertex + 1;
-        indices[index * 3 + 2] = vertex + 2;
+    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
       });
-      return { success: true, indices };
-    } else {
-      const triangles = [];
-      for (let i = 0; i < tile.content.indices.length; i += 3) {
-        if (attributeValuesMap[tile.content.featureIds[tile.content.indices[i]]] === filtersByAttribute.value) {
-          triangles.push(i);
-        }
+      this._recalculateClosestPoint();
+    }
+    if (changeFlags.propsChanged) {
+      if (props.point !== oldProps.point) {
+        this._recalculateClosestPoint();
       }
-      const indices = new Uint32Array(3 * triangles.length);
-      triangles.forEach((vertex, index) => {
-        indices[index * 3] = tile.content.indices[vertex];
-        indices[index * 3 + 1] = tile.content.indices[vertex + 1];
-        indices[index * 3 + 2] = tile.content.indices[vertex + 2];
-      });
-      return { success: true, indices };
     }
-  });
-}
-function loadFeatureAttributeData(attributeName, attributeUrls, attributesStorageInfo, token) {
-  return __async(this, null, function* () {
-    const attributeIndex = attributesStorageInfo.findIndex(({ name }) => attributeName === name);
-    if (attributeIndex === -1) {
-      return null;
+  }
+  _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 = [];
     }
-    const objectIdAttributeUrl = getUrlWithToken(attributeUrls[attributeIndex], token);
-    const attributeType = getAttributeValueType(attributesStorageInfo[attributeIndex]);
-    const objectIdAttributeData = yield (0, import_core2.load)(objectIdAttributeUrl, import_i3s2.I3SAttributeLoader, {
-      attributeName,
-      attributeType
+  }
+  getPickingInfo({ info }) {
+    return Object.assign(info, {
+      // override object with picked feature
+      object: info.object && info.object.path || info.object
     });
-    return objectIdAttributeData;
-  });
-}
-function getUrlWithToken(url, token = null) {
-  return token ? `${url}?token=${token}` : url;
-}
-function getAttributeValueType(attribute) {
-  var _a;
-  if (attribute.hasOwnProperty("objectIds")) {
-    return "Oid32";
-  } else if (attribute.hasOwnProperty("attributeValues")) {
-    return (_a = attribute.attributeValues) == null ? void 0 : _a.valueType;
   }
-  return "";
-}
+  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 import_layers3.ScatterplotLayer({
+        id: `${this.props.id}-highlight`,
+        data: this.state.closestPoints,
+        fp64: this.props.fp64
+      })
+    ];
+  }
+};
+__publicField(PathMarkerLayer, "layerName", "PathMarkerLayer");
+__publicField(PathMarkerLayer, "defaultProps", defaultProps2);
+//# sourceMappingURL=index.cjs.map