@deck.gl-community/experimental 9.0.3

package/src/data-driven-tile-3d-layer/data-driven-tile-3d-layer.ts

@@ -0,0 +1,260 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Tile3DLayer, Tile3DLayerProps} from '@deck.gl/geo-layers';
+import {UpdateParameters, Viewport, DefaultProps} from '@deck.gl/core';
+import {TILE_TYPE, Tile3D, Tileset3D} from '@loaders.gl/tiles';
+import {load} from '@loaders.gl/core';
+
+const defaultProps: DefaultProps<DataDrivenTile3DLayerProps> = {
+  colorsByAttribute: null,
+  filtersByAttribute: null
+};
+
+type DataDrivenTile3DLayerProps<DataT = any> = _DataDrivenTile3DLayerProps &
+  Tile3DLayerProps<DataT>;
+
+type _DataDrivenTile3DLayerProps = {
+  onTraversalComplete?: (selectedTiles: Tile3D[]) => Tile3D[];
+  colorsByAttribute?: ColorsByAttribute | null;
+  customizeColors?: (
+    tile: Tile3D,
+    colorsByAttribute: ColorsByAttribute | null
+  ) => Promise<{isColored: boolean; id: string}>;
+  filtersByAttribute?: FiltersByAttribute | null;
+  filterTile?: (
+    tile: Tile3D,
+    filtersByAttribute: FiltersByAttribute | null
+  ) => Promise<{isFiltered: boolean; id: string}>;
+};
+
+export type ColorsByAttribute = {
+  /** Feature attribute name */
+  attributeName: string;
+  /** Minimum attribute value */
+  minValue: number;
+  /** Maximum attribute value */
+  maxValue: number;
+  /** Minimum color. 3DObject will be colorized with gradient from `minColor to `maxColor` */
+  minColor: [number, number, number, number];
+  /** Maximum color. 3DObject will be colorized with gradient from `minColor to `maxColor` */
+  maxColor: [number, number, number, number];
+  /** Colorization mode. `replace` - replace vertex colors with a new colors, `multiply` - multiply vertex colors with new colors */
+  mode: string;
+};
+
+export type FiltersByAttribute = {
+  /** Feature attribute name */
+  attributeName: string;
+  /** Filter value */
+  value: number;
+};
+
+// @ts-expect-error call of private method of the base class
+export class DataDrivenTile3DLayer<
+  DataT = any,
+  ExtraProps extends Record<string, unknown> = Record<string, unknown>
+> extends Tile3DLayer<DataT, Required<_DataDrivenTile3DLayerProps> & ExtraProps> {
+  static layerName = 'DataDrivenTile3DLayer';
+  static defaultProps = defaultProps as any;
+
+  state: {
+    activeViewports: any;
+    frameNumber?: number;
+    lastUpdatedViewports: {[viewportId: string]: Viewport} | null;
+    layerMap: {[layerId: string]: any};
+    tileset3d: Tileset3D | null;
+
+    colorsByAttribute: ColorsByAttribute | null;
+    filtersByAttribute: FiltersByAttribute | null;
+    loadingCounter: number;
+  } = undefined!;
+
+  initializeState() {
+    super.initializeState();
+
+    this.setState({
+      colorsByAttribute: this.props.colorsByAttribute,
+      filtersByAttribute: this.props.filtersByAttribute,
+      loadingCounter: 0
+    });
+  }
+
+  updateState(params: UpdateParameters<this>): void {
+    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) {
+          // @ts-expect-error call of private method of the base class
+          super._updateTileset(activeViewports);
+        }
+        this.state.lastUpdatedViewports = activeViewports;
+        this.state.activeViewports = {};
+      }
+    } else {
+      super.updateState(params);
+    }
+  }
+
+  private override async _loadTileset(tilesetUrl) {
+    const {loadOptions = {}} = this.props;
+
+    // TODO: deprecate `loader` in v9.0
+    let loader: any = this.props.loader || this.props.loaders;
+    if (Array.isArray(loader)) {
+      loader = loader[0];
+    }
+
+    const options = {loadOptions: {...loadOptions}};
+    if (loader.preload) {
+      const preloadOptions = await loader.preload(tilesetUrl, loadOptions);
+
+      if (preloadOptions.headers) {
+        options.loadOptions.fetch = {
+          ...options.loadOptions.fetch,
+          headers: preloadOptions.headers
+        };
+      }
+      Object.assign(options, preloadOptions);
+    }
+    const tilesetJson = await load(tilesetUrl, loader, options.loadOptions);
+
+    const tileset3d = new Tileset3D(tilesetJson, {
+      onTileLoad: this._onTileLoad.bind(this),
+      // @ts-expect-error call of private method of the base class
+      onTileUnload: super._onTileUnload.bind(this),
+      onTileError: this.props.onTileError,
+      // New code ------------------
+      onTraversalComplete: this._onTraversalComplete.bind(this),
+      // ---------------------------
+      ...options
+    });
+
+    this.setState({
+      tileset3d,
+      layerMap: {}
+    });
+
+    // @ts-expect-error call of private method of the base class
+    super._updateTileset(this.state.activeViewports);
+    this.props.onTilesetLoad(tileset3d);
+  }
+
+  private override _onTileLoad(tileHeader: Tile3D): void {
+    const {lastUpdatedViewports} = this.state;
+    // New code ------------------
+    this._colorizeTiles([tileHeader]);
+    this._filterTiles([tileHeader]);
+    // ---------------------------
+    this.props.onTileLoad(tileHeader);
+    // New code ------------------ condition is added
+    if (!this.state.colorsByAttribute && !this.state.filtersByAttribute) {
+      // ---------------------------
+      // @ts-expect-error call of private method of the base class
+      super._updateTileset(lastUpdatedViewports);
+      this.setNeedsUpdate();
+      // New code ------------------
+    }
+    // ------------------
+  }
+
+  private _onTraversalComplete(selectedTiles: Tile3D[]): Tile3D[] {
+    this._colorizeTiles(selectedTiles);
+    this._filterTiles(selectedTiles);
+    return this.props.onTraversalComplete
+      ? this.props.onTraversalComplete(selectedTiles)
+      : selectedTiles;
+  }
+
+  private _colorizeTiles(tiles: Tile3D[]): void {
+    if (this.props.customizeColors && tiles[0]?.type === TILE_TYPE.MESH) {
+      const {layerMap, colorsByAttribute} = this.state;
+      const promises: Promise<{isColored: boolean; id: string}>[] = [];
+      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) {
+          // @ts-expect-error call of private method of the base class
+          super._updateTileset(this.state.activeViewports);
+          this.setNeedsUpdate();
+        }
+      });
+    }
+  }
+
+  private _colorizeTileset(): void {
+    const {tileset3d} = this.state;
+
+    if (tileset3d) {
+      this._colorizeTiles(tileset3d.selectedTiles);
+    }
+  }
+
+  private _filterTiles(tiles: Tile3D[]): void {
+    if (this.props.filterTile && tiles[0]?.type === TILE_TYPE.MESH) {
+      const {layerMap, filtersByAttribute} = this.state;
+      const promises: Promise<{isFiltered: boolean; id: string}>[] = [];
+      for (const tile of tiles) {
+        promises.push(this.props.filterTile(tile, filtersByAttribute));
+      }
+      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.isFiltered) {
+            isTileChanged = true;
+            delete layerMap[item.value.id];
+          }
+        }
+        if (isTileChanged && !this.state.loadingCounter) {
+          // @ts-expect-error call of private method of the base class
+          super._updateTileset(this.state.activeViewports);
+          this.setNeedsUpdate();
+        }
+      });
+    }
+  }
+
+  private _filterTileset(): void {
+    const {tileset3d} = this.state;
+
+    if (tileset3d) {
+      this._filterTiles(tileset3d.selectedTiles);
+    }
+  }
+}

package/src/data-driven-tile-3d-layer/utils/colorize-tile.ts

@@ -0,0 +1,53 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {customizeColors} from '@loaders.gl/i3s';
+import {Tile3D} from '@loaders.gl/tiles';
+import {ColorsByAttribute} from '../data-driven-tile-3d-layer';
+
+/**
+ * Update tile colors with the custom colors assigned to the I3S Loader
+ * @returns {Promise<{isColored: boolean; id: string}>} Result of the tile colorization - isColored: true/false and tile id
+ */
+export const colorizeTile = async (
+  tile: Tile3D,
+  colorsByAttribute: ColorsByAttribute | null
+): Promise<{isColored: boolean; id: string}> => {
+  const result = {isColored: false, id: tile.id};
+
+  if (tile.content.customColors !== colorsByAttribute) {
+    if (tile.content && colorsByAttribute) {
+      if (!tile.content.originalColorsAttributes) {
+        tile.content.originalColorsAttributes = {
+          ...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 = await customizeColors(
+        tile.content.attributes.colors,
+        tile.content.featureIds,
+        tile.header.attributeUrls,
+        tile.tileset.tileset.fields,
+        tile.tileset.tileset.attributeStorageInfo,
+        colorsByAttribute,
+        (tile.tileset.loadOptions as any).i3s.token
+      );
+      // Make sure custom colors is not changed during async customizeColors execution
+      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;
+    }
+  }
+  return result;
+};

package/src/data-driven-tile-3d-layer/utils/filter-tile.ts

@@ -0,0 +1,177 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Tile3D} from '@loaders.gl/tiles';
+import {FiltersByAttribute} from '../data-driven-tile-3d-layer';
+import {AttributeStorageInfo, I3SAttributeLoader} from '@loaders.gl/i3s';
+import {load} from '@loaders.gl/core';
+import {TypedArray} from '@loaders.gl/schema';
+
+type I3STileAttributes = Record<string, string[] | TypedArray | null>;
+
+/**
+ * Filter tile indices by attribute value
+ * @param tile - tile to be filtered
+ * @param filtersByAttribute - custom filters patameters
+ * @returns {Promise<{isFiltered: boolean; id: string}>} Result of the tile filtering - isFiltered: true/false and tile id
+ */
+export const filterTile = async (
+  tile: Tile3D,
+  filtersByAttribute: FiltersByAttribute | null
+): Promise<{isFiltered: boolean; id: string}> => {
+  const result = {isFiltered: false, id: tile.id};
+
+  if (tile.content.userData?.customFilters !== filtersByAttribute) {
+    if (tile.content && filtersByAttribute) {
+      if (tile.content.userData?.originalIndices === undefined) {
+        tile.content.userData = {};
+        // save original indices for filtring cancellation
+        tile.content.userData.originalIndices = tile.content.indices;
+      }
+      tile.content.indices = tile.content.userData?.originalIndices;
+      tile.content.userData.customFilters = filtersByAttribute;
+
+      const {indices} = await filterTileIndices(
+        tile,
+        filtersByAttribute,
+        (tile.tileset.loadOptions as any).i3s.token
+      );
+      // Make sure custom filters is not changed during async filtring execution
+      if (indices && tile.content.userData.customFilters === filtersByAttribute) {
+        tile.content.indices = indices;
+        result.isFiltered = true;
+      }
+    } else if (tile.content && tile.content.userData?.originalIndices !== undefined) {
+      tile.content.indices = tile.content.userData.originalIndices;
+      tile.content.userData.customFilters = null;
+      result.isFiltered = true;
+    }
+  }
+  return result;
+};
+
+// eslint-disable-next-line max-statements, complexity
+async function filterTileIndices(
+  tile: Tile3D,
+  filtersByAttribute: FiltersByAttribute,
+  token: string
+): Promise<{success: boolean; indices?: Uint32Array}> {
+  if (!filtersByAttribute.attributeName.length) {
+    return {success: false};
+  }
+
+  const filterAttributeField = tile.tileset.tileset.fields.find(
+    ({name}) => name === filtersByAttribute?.attributeName
+  );
+
+  if (
+    !filterAttributeField ||
+    !['esriFieldTypeDouble', 'esriFieldTypeInteger', 'esriFieldTypeSmallInteger'].includes(
+      filterAttributeField.type
+    )
+  ) {
+    return {success: false};
+  }
+
+  const tileFilterAttributeData = await 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 = await loadFeatureAttributeData(
+    objectIdField.name,
+    tile.header.attributeUrls,
+    tile.tileset.tileset.attributeStorageInfo,
+    token
+  );
+  if (!objectIdAttributeData) {
+    return {success: false};
+  }
+
+  const attributeValuesMap = {};
+  objectIdAttributeData[objectIdField.name]?.forEach((elem, index) => {
+    attributeValuesMap[elem] = tileFilterAttributeData[filterAttributeField.name][index];
+  });
+
+  if (!tile.content.indices) {
+    const triangles: number[] = [];
+    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 {success: true, indices};
+  }
+  const triangles: number[] = [];
+  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);
+    }
+  }
+
+  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};
+}
+
+async function loadFeatureAttributeData(
+  attributeName: string,
+  attributeUrls: string[],
+  attributesStorageInfo: AttributeStorageInfo[],
+  token?: string
+): Promise<I3STileAttributes | null> {
+  const attributeIndex = attributesStorageInfo.findIndex(({name}) => attributeName === name);
+  if (attributeIndex === -1) {
+    return null;
+  }
+  const objectIdAttributeUrl = getUrlWithToken(attributeUrls[attributeIndex], token);
+  const attributeType = getAttributeValueType(attributesStorageInfo[attributeIndex]);
+  const objectIdAttributeData = await load(objectIdAttributeUrl, I3SAttributeLoader, {
+    attributeName,
+    attributeType
+  });
+
+  return objectIdAttributeData;
+}
+
+function getUrlWithToken(url: string, token: string | null = null): string {
+  return token ? `${url}?token=${token}` : url;
+}
+
+function getAttributeValueType(attribute: AttributeStorageInfo) {
+  // eslint-disable-next-line no-prototype-builtins
+  if (attribute.hasOwnProperty('objectIds')) {
+    return 'Oid32';
+    // eslint-disable-next-line no-prototype-builtins
+  } else if (attribute.hasOwnProperty('attributeValues')) {
+    return attribute.attributeValues?.valueType;
+  }
+  return '';
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export {DataDrivenTile3DLayer} from './data-driven-tile-3d-layer/data-driven-tile-3d-layer';
+
+export {colorizeTile} from './data-driven-tile-3d-layer/utils/colorize-tile';
+export {filterTile} from './data-driven-tile-3d-layer/utils/filter-tile';