@deck.gl/aggregation-layers 8.5.5 → 8.5.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/aggregation-layers",
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
-  "version": "8.5.5",
+  "version": "8.5.9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,5 +37,5 @@
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0"
   },
-  "gitHead": "13e0ae29b8d362ee54603353ef1007c20c01483e"
+  "gitHead": "1ffc5262097af4c9ee3d316fcf5871e47b5c0755"
 }

package/src/heatmap-layer/heatmap-layer.js

@@ -29,12 +29,7 @@ import {
   getTextureParams
 } from './heatmap-layer-utils';
 import {Buffer, Texture2D, Transform, getParameters, FEATURES, hasFeatures} from '@luma.gl/core';
-import {
-  AttributeManager,
-  COORDINATE_SYSTEM,
-  log,
-  _mergeShaders as mergeShaders
-} from '@deck.gl/core';
+import {AttributeManager, COORDINATE_SYSTEM, log} from '@deck.gl/core';
 import TriangleLayer from './triangle-layer';
 import AggregationLayer from '../aggregation-layer';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
@@ -44,8 +39,6 @@ import vs_max from './max-vs.glsl';
 import fs_max from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
-const SIZE_2K = 2048;
-const ZOOM_DEBOUNCE = 500; // milliseconds
 const TEXTURE_OPTIONS = {
   mipmaps: false,
   parameters: {
@@ -71,7 +64,9 @@ const defaultProps = {
   threshold: {type: 'number', min: 0, max: 1, value: 0.05},
   colorDomain: {type: 'array', value: null, optional: true},
   // 'SUM' or 'MEAN'
-  aggregation: 'SUM'
+  aggregation: 'SUM',
+  weightsTextureSize: {type: 'number', min: 128, max: 2048, value: 2048},
+  debounceTimeout: {type: 'number', min: 0, max: 1000, value: 500}
 };
 
 const REQUIRED_FEATURES = [
@@ -112,6 +107,10 @@ export default class HeatmapLayer extends AggregationLayer {
       return;
     }
     super.updateState(opts);
+    this._updateHeatmapState(opts);
+  }
+
+  _updateHeatmapState(opts) {
     const {props, oldProps} = opts;
     const changeFlags = this._getChangeFlags(opts);
 
@@ -139,7 +138,6 @@ export default class HeatmapLayer extends AggregationLayer {
 
     this.setState({zoom: opts.context.viewport.zoom});
   }
-  /* eslint-enable max-statements,complexity */
 
   renderLayers() {
     if (!this.state.supported) {
@@ -262,7 +260,9 @@ export default class HeatmapLayer extends AggregationLayer {
 
   _setupTextureParams() {
     const {gl} = this.context;
-    const textureSize = Math.min(SIZE_2K, getParameters(gl, gl.MAX_TEXTURE_SIZE));
+    const {weightsTextureSize} = this.props;
+
+    const textureSize = Math.min(weightsTextureSize, getParameters(gl, gl.MAX_TEXTURE_SIZE));
     const floatTargetSupport = hasFeatures(gl, FEATURES.COLOR_ATTACHMENT_RGBA32F);
     const {format, type} = getTextureParams({gl, floatTargetSupport});
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
@@ -276,18 +276,25 @@ export default class HeatmapLayer extends AggregationLayer {
     }
   }
 
-  _createWeightsTransform(shaderOptions = {}) {
+  getShaders(type) {
+    return super.getShaders(
+      type === 'max-weights-transform'
+        ? {
+            vs: vs_max,
+            _fs: fs_max
+          }
+        : {
+            vs: weights_vs,
+            _fs: weights_fs
+          }
+    );
+  }
+
+  _createWeightsTransform(shaders = {}) {
     const {gl} = this.context;
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
     weightsTransform?.delete();
-    const shaders = mergeShaders(
-      {
-        vs: weights_vs,
-        _fs: weights_fs
-      },
-      shaderOptions
-    );
 
     weightsTransform = new Transform(gl, {
       id: `${this.id}-weights-transform`,
@@ -303,7 +310,11 @@ export default class HeatmapLayer extends AggregationLayer {
     const {gl} = this.context;
     this._createTextures();
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
-    this._createWeightsTransform();
+
+    const weightsTransformShaders = this.getShaders('weights-transform');
+    this._createWeightsTransform(weightsTransformShaders);
+
+    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
     const maxWeightTransform = new Transform(gl, {
       id: `${this.id}-max-weights-transform`,
       _sourceTextures: {
@@ -311,8 +322,7 @@ export default class HeatmapLayer extends AggregationLayer {
       },
       _targetTexture: maxWeightsTexture,
       _targetTextureVarying: 'outTexture',
-      vs: vs_max,
-      _fs: fs_max,
+      ...maxWeightsTransformShaders,
       elementCount: textureSize * textureSize
     });
 
@@ -496,6 +506,7 @@ export default class HeatmapLayer extends AggregationLayer {
 
   _debouncedUpdateWeightmap(fromTimer = false) {
     let {updateTimer} = this.state;
+    const {debounceTimeout} = this.props;
 
     if (fromTimer) {
       updateTimer = null;
@@ -506,7 +517,7 @@ export default class HeatmapLayer extends AggregationLayer {
     } else {
       this.setState({isWeightMapDirty: false});
       clearTimeout(updateTimer);
-      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), ZOOM_DEBOUNCE);
+      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
     }
 
     this.setState({updateTimer});