@deck.gl/aggregation-layers 8.8.0-alpha.4 → 8.8.0-beta.1

package/src/grid-layer/{grid-layer.js → grid-layer.ts}

@@ -1,7 +1,7 @@
-import {CompositeLayer} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, Layer, UpdateParameters} from '@deck.gl/core';
 import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator';
-import GPUGridLayer from '../gpu-grid-layer/gpu-grid-layer';
-import CPUGridLayer from '../cpu-grid-layer/cpu-grid-layer';
+import GPUGridLayer, {_GPUGridLayerProps} from '../gpu-grid-layer/gpu-grid-layer';
+import CPUGridLayer, {_CPUGridLayerProps} from '../cpu-grid-layer/cpu-grid-layer';
 
 const defaultProps = {
   ...GPUGridLayer.defaultProps,
@@ -9,20 +9,48 @@ const defaultProps = {
   gpuAggregation: false
 };
 
-export default class GridLayer extends CompositeLayer {
+/** All properties supported by GridLayer. */
+export type GridLayerProps<DataT = any> = _GridLayerProps<DataT> & CompositeLayerProps<DataT>;
+
+/** Properties added by GridLayer. */
+type _GridLayerProps<DataT = any> = _CPUGridLayerProps<DataT> &
+  _GPUGridLayerProps<DataT> & {
+    /**
+     * Whether the aggregation should be performed in high-precision 64-bit mode.
+     * @default false
+     */
+    fp64?: boolean;
+
+    /**
+     * When set to true, aggregation is performed on GPU, provided other conditions are met.
+     * @default false
+     */
+    gpuAggregation?: boolean;
+  };
+
+export default class GridLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_GridLayerProps<DataT>>
+> {
+  static layerName = 'GridLayer';
+  static defaultProps = defaultProps;
+
+  state!: CompositeLayer['state'] & {
+    useGPUAggregation: boolean;
+  };
+
   initializeState() {
     this.state = {
       useGPUAggregation: true
     };
   }
 
-  updateState({oldProps, props, changeFlags}) {
-    const newState = {};
-    newState.useGPUAggregation = this.canUseGPUAggregation(props);
-    this.setState(newState);
+  updateState({props}: UpdateParameters<this>) {
+    this.setState({
+      useGPUAggregation: this.canUseGPUAggregation(props)
+    });
   }
 
-  renderLayers() {
+  renderLayers(): Layer {
     const {data, updateTriggers} = this.props;
     const id = this.state.useGPUAggregation ? 'GPU' : 'CPU';
     const LayerType = this.state.useGPUAggregation
@@ -42,7 +70,7 @@ export default class GridLayer extends CompositeLayer {
 
   // Private methods
 
-  canUseGPUAggregation(props) {
+  canUseGPUAggregation(props: GridLayer['props']) {
     const {
       gpuAggregation,
       lowerPercentile,
@@ -73,6 +101,3 @@ export default class GridLayer extends CompositeLayer {
     return true;
   }
 }
-
-GridLayer.layerName = 'GridLayer';
-GridLayer.defaultProps = defaultProps;

package/src/heatmap-layer/{heatmap-layer-utils.js → heatmap-layer-utils.ts}

@@ -1,7 +1,7 @@
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '@luma.gl/core';
 
-export function getBounds(points) {
+export function getBounds(points: number[][]): number[] {
   // Now build bounding box in world space (aligned to world coordiante system)
   const x = points.map(p => p[0]);
   const y = points.map(p => p[1]);
@@ -15,7 +15,7 @@ export function getBounds(points) {
 }
 
 // true if currentBounds contains targetBounds, false otherwise
-export function boundsContain(currentBounds, targetBounds) {
+export function boundsContain(currentBounds: number[], targetBounds: number[]): boolean {
   if (
     targetBounds[0] >= currentBounds[0] &&
     targetBounds[2] <= currentBounds[2] &&
@@ -30,7 +30,7 @@ export function boundsContain(currentBounds, targetBounds) {
 const scratchArray = new Float32Array(12);
 
 // For given rectangle bounds generates two triangles vertices that coverit completely
-export function packVertices(points, dimensions = 2) {
+export function packVertices(points: number[][], dimensions: number = 2): Float32Array {
   let index = 0;
   for (const point of points) {
     for (let i = 0; i < dimensions; i++) {
@@ -41,7 +41,7 @@ export function packVertices(points, dimensions = 2) {
 }
 
 // Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height
-export function scaleToAspectRatio(boundingBox, width, height) {
+export function scaleToAspectRatio(boundingBox: number[], width: number, height: number): number[] {
   const [xMin, yMin, xMax, yMax] = boundingBox;
 
   const currentWidth = xMax - xMin;
@@ -73,16 +73,21 @@ export function scaleToAspectRatio(boundingBox, width, height) {
 }
 
 // Get texture coordiante of point inside a bounding box
-export function getTextureCoordinates(point, bounds) {
+export function getTextureCoordinates(point: number[], bounds: number[]) {
   const [xMin, yMin, xMax, yMax] = bounds;
   return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
 }
 
 // Returns format and type for creating texture objects
 export function getTextureParams({gl, floatTargetSupport}) {
-  return {
-    // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
-    format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
-    type: floatTargetSupport ? GL.FLOAT : GL.UNSIGNED_BYTE
-  };
+  return floatTargetSupport
+    ? {
+        // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
+        format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+        type: GL.FLOAT
+      }
+    : {
+        format: GL.RGBA,
+        type: GL.UNSIGNED_BYTE
+      };
 }

package/src/heatmap-layer/{heatmap-layer.js → heatmap-layer.ts}

@@ -29,14 +29,27 @@ import {
   getTextureParams
 } from './heatmap-layer-utils';
 import {Buffer, Texture2D, Transform, getParameters, FEATURES, hasFeatures} from '@luma.gl/core';
-import {AttributeManager, COORDINATE_SYSTEM, log} from '@deck.gl/core';
+import {
+  Accessor,
+  AccessorFunction,
+  AttributeManager,
+  ChangeFlags,
+  Color,
+  COORDINATE_SYSTEM,
+  Layer,
+  LayerContext,
+  LayersList,
+  log,
+  Position,
+  UpdateParameters
+} from '@deck.gl/core';
 import TriangleLayer from './triangle-layer';
-import AggregationLayer from '../aggregation-layer';
+import AggregationLayer, {AggregationLayerProps} from '../aggregation-layer';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
-import weights_vs from './weights-vs.glsl';
-import weights_fs from './weights-fs.glsl';
-import vs_max from './max-vs.glsl';
-import fs_max from './max-fs.glsl';
+import weightsVs from './weights-vs.glsl';
+import weightsFs from './weights-fs.glsl';
+import vsMax from './max-vs.glsl';
+import fsMax from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
 const TEXTURE_OPTIONS = {
@@ -72,7 +85,11 @@ const defaultProps = {
 const REQUIRED_FEATURES = [
   FEATURES.BLEND_EQUATION_MINMAX, // max weight calculation
   FEATURES.TEXTURE_FLOAT // weight-map as texture
-  // FEATURES.FLOAT_BLEND, // implictly supported when TEXTURE_FLOAT is supported
+];
+
+const FLOAT_TARGET_FEATURES = [
+  FEATURES.COLOR_ATTACHMENT_RGBA32F, // ability to render to float texture
+  FEATURES.FLOAT_BLEND // ability to blend when rendering to float texture
 ];
 
 const DIMENSIONS = {
@@ -81,7 +98,103 @@ const DIMENSIONS = {
   }
 };
 
-export default class HeatmapLayer extends AggregationLayer {
+export type HeatmapLayerProps<DataT> = _HeatmapLayerProps<DataT> & AggregationLayerProps<DataT>;
+
+type _HeatmapLayerProps<DataT = any> = {
+  /**
+   * Radius of the circle in pixels, to which the weight of an object is distributed.
+   *
+   * @default 30
+   */
+  radiusPixels?: number;
+
+  /**
+   * Specified as an array of colors [color1, color2, ...].
+   *
+   * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
+   */
+  colorRange?: Color[];
+
+  /**
+   * Value that is multiplied with the total weight at a pixel to obtain the final weight.
+   *
+   * @default 1
+   */
+  intensity?: number;
+
+  /**
+   * Ratio of the fading weight to the max weight, between `0` and `1`.
+   *
+   * For example, `0.1` affects all pixels with weight under 10% of the max.
+   *
+   * Ignored when `colorDomain` is specified.
+   * @default 0.05
+   */
+  threshold?: number;
+
+  /**
+   * Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
+   *
+   * @default null
+   */
+  colorDomain?: [number, number] | null;
+
+  /**
+   * Defines the type of aggregation operation
+   *
+   * V valid values are 'SUM', 'MEAN'.
+   *
+   * @default 'SUM'
+   */
+  aggregation?: 'SUM' | 'MEAN';
+
+  /**
+   * Specifies the size of weight texture.
+   * @default 2048
+   */
+  weightsTextureSize?: number;
+
+  /**
+   * Interval in milliseconds during which changes to the viewport don't trigger aggregation.
+   *
+   * @default 500
+   */
+  debounceTimeout?: number;
+
+  /**
+   * Method called to retrieve the position of each object.
+   *
+   * @default d => d.position
+   */
+  getPosition?: AccessorFunction<DataT, Position>;
+
+  /**
+   * The weight of each object.
+   *
+   * @default 1
+   */
+  getWeight?: Accessor<DataT, number>;
+};
+
+export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends AggregationLayer<
+  ExtraPropsT & Required<_HeatmapLayerProps<DataT>>
+> {
+  static layerName = 'HeatmapLayer';
+  static defaultProps = defaultProps;
+
+  state!: AggregationLayer['state'] & {
+    supported: boolean;
+    colorDomain?: number[];
+    isWeightMapDirty?: boolean;
+    weightsTexture?: Texture2D;
+    zoom?: number;
+    worldBounds?: number[];
+    normalizedCommonBounds?: number[];
+    updateTimer?: any;
+    triPositionBuffer?: Buffer;
+    triTexCoordBuffer?: Buffer;
+  };
+
   initializeState() {
     const {gl} = this.context;
     if (!hasFeatures(gl, REQUIRED_FEATURES)) {
@@ -89,20 +202,20 @@ export default class HeatmapLayer extends AggregationLayer {
       log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
       return;
     }
-    super.initializeState(DIMENSIONS);
+    super.initializeAggregationLayer(DIMENSIONS);
     this.setState({supported: true, colorDomain: DEFAULT_COLOR_DOMAIN});
     this._setupTextureParams();
     this._setupAttributes();
     this._setupResources();
   }
 
-  shouldUpdateState({changeFlags}) {
+  shouldUpdateState({changeFlags}: UpdateParameters<this>) {
     // Need to be updated when viewport changes
     return changeFlags.somethingChanged;
   }
 
   /* eslint-disable max-statements,complexity */
-  updateState(opts) {
+  updateState(opts: UpdateParameters<this>) {
     if (!this.state.supported) {
       return;
     }
@@ -110,7 +223,7 @@ export default class HeatmapLayer extends AggregationLayer {
     this._updateHeatmapState(opts);
   }
 
-  _updateHeatmapState(opts) {
+  _updateHeatmapState(opts: UpdateParameters<this>) {
     const {props, oldProps} = opts;
     const changeFlags = this._getChangeFlags(opts);
 
@@ -140,7 +253,7 @@ export default class HeatmapLayer extends AggregationLayer {
     this.setState({zoom: opts.context.viewport.zoom});
   }
 
-  renderLayers() {
+  renderLayers(): LayersList | Layer {
     if (!this.state.supported) {
       return [];
     }
@@ -183,8 +296,8 @@ export default class HeatmapLayer extends AggregationLayer {
     );
   }
 
-  finalizeState() {
-    super.finalizeState();
+  finalizeState(context: LayerContext) {
+    super.finalizeState(context);
     const {
       weightsTransform,
       weightsTexture,
@@ -217,8 +330,11 @@ export default class HeatmapLayer extends AggregationLayer {
     });
   }
 
-  _getChangeFlags(opts) {
-    const changeFlags = {};
+  _getChangeFlags(opts: UpdateParameters<this>) {
+    const changeFlags: Partial<ChangeFlags> & {
+      boundsChanged?: boolean;
+      viewportZoomChanged?: boolean;
+    } = {};
     const {dimensions} = this.state;
     changeFlags.dataChanged =
       this.isAttributeChanged() || // if any attribute is changed
@@ -253,7 +369,7 @@ export default class HeatmapLayer extends AggregationLayer {
   }
 
   _setupAttributes() {
-    const attributeManager = this.getAttributeManager();
+    const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
       positions: {size: 3, type: GL.DOUBLE, accessor: 'getPosition'},
       weights: {size: 1, accessor: 'getWeight'}
@@ -266,7 +382,7 @@ export default class HeatmapLayer extends AggregationLayer {
     const {weightsTextureSize} = this.props;
 
     const textureSize = Math.min(weightsTextureSize, getParameters(gl, gl.MAX_TEXTURE_SIZE));
-    const floatTargetSupport = hasFeatures(gl, FEATURES.COLOR_ATTACHMENT_RGBA32F);
+    const floatTargetSupport = hasFeatures(gl, FLOAT_TARGET_FEATURES);
     const {format, type} = getTextureParams({gl, floatTargetSupport});
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({textureSize, format, type, weightsScale});
@@ -281,12 +397,12 @@ export default class HeatmapLayer extends AggregationLayer {
     return super.getShaders(
       type === 'max-weights-transform'
         ? {
-            vs: vs_max,
-            _fs: fs_max
+            vs: vsMax,
+            _fs: fsMax
           }
         : {
-            vs: weights_vs,
-            _fs: weights_fs
+            vs: weightsVs,
+            _fs: weightsFs
           }
     );
   }
@@ -362,7 +478,7 @@ export default class HeatmapLayer extends AggregationLayer {
   }
 
   // Computes world bounds area that needs to be processed for generate heatmap
-  _updateBounds(forceUpdate = false) {
+  _updateBounds(forceUpdate: any = false): boolean {
     const {viewport} = this.context;
 
     // Unproject all 4 corners of the current screen coordinates into world coordinates (lng/lat)
@@ -377,7 +493,7 @@ export default class HeatmapLayer extends AggregationLayer {
     // #1: get world bounds for current viewport extends
     const visibleWorldBounds = getBounds(viewportCorners); // TODO: Change to visible bounds
 
-    const newState = {visibleWorldBounds, viewportCorners};
+    const newState: Partial<HeatmapLayer['state']> = {visibleWorldBounds, viewportCorners};
     let boundsChanged = false;
 
     if (
@@ -422,7 +538,7 @@ export default class HeatmapLayer extends AggregationLayer {
     triPositionBuffer.subData(packVertices(viewportCorners, 3));
 
     const textureBounds = viewportCorners.map(p =>
-      getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds)
+      getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds!)
     );
     triTexCoordBuffer.subData(packVertices(textureBounds, 2));
   }
@@ -430,7 +546,7 @@ export default class HeatmapLayer extends AggregationLayer {
   _updateColorTexture(opts) {
     const {colorRange} = opts.props;
     let {colorTexture} = this.state;
-    const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
+    const colors = colorRangeToFlatArray(colorRange, false, Uint8Array as any);
 
     if (colorTexture) {
       colorTexture.setImageData({
@@ -523,7 +639,7 @@ export default class HeatmapLayer extends AggregationLayer {
   // input: worldBounds: [minLong, minLat, maxLong, maxLat]
   // input: opts.useLayerCoordinateSystem : layers coordiante system is used
   // optput: commonBounds: [minX, minY, maxX, maxY] scaled to fit the current texture
-  _worldToCommonBounds(worldBounds, opts = {}) {
+  _worldToCommonBounds(worldBounds, opts: {useLayerCoordinateSystem?: boolean} = {}) {
     const {useLayerCoordinateSystem = false} = opts;
     const [minLong, minLat, maxLong, maxLat] = worldBounds;
     const {viewport} = this.context;
@@ -574,6 +690,3 @@ export default class HeatmapLayer extends AggregationLayer {
     return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
   }
 }
-
-HeatmapLayer.layerName = 'HeatmapLayer';
-HeatmapLayer.defaultProps = defaultProps;

package/src/heatmap-layer/{triangle-layer.js → triangle-layer.ts}

@@ -19,19 +19,31 @@
 // THE SOFTWARE.
 
 import GL from '@luma.gl/constants';
-import {Model, Geometry} from '@luma.gl/core';
-import {Layer, project32} from '@deck.gl/core';
+import {Model, Geometry, Texture2D} from '@luma.gl/core';
+import {Layer, LayerContext, project32} from '@deck.gl/core';
 import vs from './triangle-layer-vertex.glsl';
 import fs from './triangle-layer-fragment.glsl';
 
-export default class TriangleLayer extends Layer {
+type _TriangleLayerProps = {
+  colorDomain: number[];
+  aggregationMode: string;
+  threshold: number;
+  intensity: number;
+  vertexCount: number;
+  colorTexture: Texture2D;
+  maxTexture: Texture2D;
+  texture: Texture2D;
+};
+
+export default class TriangleLayer extends Layer<_TriangleLayerProps> {
+  static layerName = 'TriangleLayer';
+
   getShaders() {
     return {vs, fs, modules: [project32]};
   }
 
-  initializeState() {
-    const {gl} = this.context;
-    const attributeManager = this.getAttributeManager();
+  initializeState({gl}: LayerContext): void {
+    const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
       positions: {size: 3, noAlloc: true},
       texCoords: {size: 2, noAlloc: true}
@@ -41,7 +53,7 @@ export default class TriangleLayer extends Layer {
     });
   }
 
-  _getModel(gl) {
+  _getModel(gl: WebGLRenderingContext): Model {
     const {vertexCount} = this.props;
 
     return new Model(gl, {
@@ -54,7 +66,7 @@ export default class TriangleLayer extends Layer {
     });
   }
 
-  draw({uniforms}) {
+  draw({uniforms}): void {
     const {model} = this.state;
 
     const {texture, maxTexture, colorTexture, intensity, threshold, aggregationMode, colorDomain} =
@@ -74,5 +86,3 @@ export default class TriangleLayer extends Layer {
       .draw();
   }
 }
-
-TriangleLayer.layerName = 'TriangleLayer';