@deck.gl/aggregation-layers 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/esm/heatmap-layer/heatmap-layer.js

@@ -1,638 +0,0 @@
-import { getBounds, boundsContain, packVertices, scaleToAspectRatio, getTextureCoordinates } from './heatmap-layer-utils';
-import { GL } from '@luma.gl/constants';
-import { TextureTransform } from '@luma.gl/engine';
-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';
-import weightsVs from './weights-vs.glsl';
-import weightsFs from './weights-fs.glsl';
-import maxVs from './max-vs.glsl';
-import maxFs from './max-fs.glsl';
-const RESOLUTION = 2;
-const TEXTURE_PROPS = {
-  format: 'rgba8unorm',
-  mipmaps: false,
-  sampler: {
-    minFilter: 'linear',
-    magFilter: 'linear',
-    addressModeU: 'clamp-to-edge',
-    addressModeV: 'clamp-to-edge'
-  }
-};
-const DEFAULT_COLOR_DOMAIN = [0, 0];
-const AGGREGATION_MODE = {
-  SUM: 0,
-  MEAN: 1
-};
-const defaultProps = {
-  getPosition: {
-    type: 'accessor',
-    value: x => x.position
-  },
-  getWeight: {
-    type: 'accessor',
-    value: 1
-  },
-  intensity: {
-    type: 'number',
-    min: 0,
-    value: 1
-  },
-  radiusPixels: {
-    type: 'number',
-    min: 1,
-    max: 100,
-    value: 50
-  },
-  colorRange: defaultColorRange,
-  threshold: {
-    type: 'number',
-    min: 0,
-    max: 1,
-    value: 0.05
-  },
-  colorDomain: {
-    type: 'array',
-    value: null,
-    optional: true
-  },
-  aggregation: 'SUM',
-  weightsTextureSize: {
-    type: 'number',
-    min: 128,
-    max: 2048,
-    value: 2048
-  },
-  debounceTimeout: {
-    type: 'number',
-    min: 0,
-    max: 1000,
-    value: 500
-  }
-};
-const REQUIRED_FEATURES = ['blend-minmax-webgl1', 'texture-formats-float32-webgl1'];
-const FLOAT_TARGET_FEATURES = ['texture-renderable-float32-webgl', 'texture-blend-float-webgl1'];
-const DIMENSIONS = {
-  data: {
-    props: ['radiusPixels']
-  }
-};
-export default class HeatmapLayer extends AggregationLayer {
-  constructor(...args) {
-    super(...args);
-    this.state = void 0;
-  }
-
-  initializeState() {
-    if (!REQUIRED_FEATURES.every(feature => this.context.device.features.has(feature))) {
-      this.setState({
-        supported: false
-      });
-      log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
-      return;
-    }
-
-    super.initializeAggregationLayer(DIMENSIONS);
-    this.setState({
-      supported: true,
-      colorDomain: DEFAULT_COLOR_DOMAIN
-    });
-
-    this._setupTextureParams();
-
-    this._setupAttributes();
-
-    this._setupResources();
-  }
-
-  shouldUpdateState({
-    changeFlags
-  }) {
-    return changeFlags.somethingChanged;
-  }
-
-  updateState(opts) {
-    if (!this.state.supported) {
-      return;
-    }
-
-    super.updateState(opts);
-
-    this._updateHeatmapState(opts);
-  }
-
-  _updateHeatmapState(opts) {
-    const {
-      props,
-      oldProps
-    } = opts;
-
-    const changeFlags = this._getChangeFlags(opts);
-
-    if (changeFlags.dataChanged || changeFlags.viewportChanged) {
-      changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
-
-      this._updateTextureRenderingBounds();
-    }
-
-    if (changeFlags.dataChanged || changeFlags.boundsChanged) {
-      clearTimeout(this.state.updateTimer);
-      this.setState({
-        isWeightMapDirty: true
-      });
-    } else if (changeFlags.viewportZoomChanged) {
-      this._debouncedUpdateWeightmap();
-    }
-
-    if (props.colorRange !== oldProps.colorRange) {
-      this._updateColorTexture(opts);
-    }
-
-    if (this.state.isWeightMapDirty) {
-      this._updateWeightmap();
-    }
-
-    this.setState({
-      zoom: opts.context.viewport.zoom
-    });
-  }
-
-  renderLayers() {
-    if (!this.state.supported) {
-      return [];
-    }
-
-    const {
-      weightsTexture,
-      triPositionBuffer,
-      triTexCoordBuffer,
-      maxWeightsTexture,
-      colorTexture,
-      colorDomain
-    } = this.state;
-    const {
-      updateTriggers,
-      intensity,
-      threshold,
-      aggregation
-    } = this.props;
-    const TriangleLayerClass = this.getSubLayerClass('triangle', TriangleLayer);
-    return new TriangleLayerClass(this.getSubLayerProps({
-      id: 'triangle-layer',
-      updateTriggers
-    }), {
-      coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
-      data: {
-        attributes: {
-          positions: triPositionBuffer,
-          texCoords: triTexCoordBuffer
-        }
-      },
-      vertexCount: 4,
-      maxTexture: maxWeightsTexture,
-      colorTexture,
-      aggregationMode: AGGREGATION_MODE[aggregation] || 0,
-      weightsTexture,
-      intensity,
-      threshold,
-      colorDomain
-    });
-  }
-
-  finalizeState(context) {
-    super.finalizeState(context);
-    const {
-      weightsTransform,
-      weightsTexture,
-      maxWeightTransform,
-      maxWeightsTexture,
-      triPositionBuffer,
-      triTexCoordBuffer,
-      colorTexture,
-      updateTimer
-    } = this.state;
-    weightsTransform === null || weightsTransform === void 0 ? void 0 : weightsTransform.destroy();
-    weightsTexture === null || weightsTexture === void 0 ? void 0 : weightsTexture.destroy();
-    maxWeightTransform === null || maxWeightTransform === void 0 ? void 0 : maxWeightTransform.destroy();
-    maxWeightsTexture === null || maxWeightsTexture === void 0 ? void 0 : maxWeightsTexture.destroy();
-    triPositionBuffer === null || triPositionBuffer === void 0 ? void 0 : triPositionBuffer.destroy();
-    triTexCoordBuffer === null || triTexCoordBuffer === void 0 ? void 0 : triTexCoordBuffer.destroy();
-    colorTexture === null || colorTexture === void 0 ? void 0 : colorTexture.destroy();
-
-    if (updateTimer) {
-      clearTimeout(updateTimer);
-    }
-  }
-
-  _getAttributeManager() {
-    return new AttributeManager(this.context.device, {
-      id: this.props.id,
-      stats: this.context.stats
-    });
-  }
-
-  _getChangeFlags(opts) {
-    const changeFlags = {};
-    const {
-      dimensions
-    } = this.state;
-    changeFlags.dataChanged = this.isAttributeChanged() && 'attribute changed' || this.isAggregationDirty(opts, {
-      compareAll: true,
-      dimension: dimensions.data
-    }) && 'aggregation is dirty';
-    changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
-    const {
-      zoom
-    } = this.state;
-
-    if (!opts.context.viewport || opts.context.viewport.zoom !== zoom) {
-      changeFlags.viewportZoomChanged = true;
-    }
-
-    return changeFlags;
-  }
-
-  _createTextures() {
-    const {
-      textureSize,
-      format
-    } = this.state;
-    this.setState({
-      weightsTexture: this.context.device.createTexture({ ...TEXTURE_PROPS,
-        width: textureSize,
-        height: textureSize,
-        format
-      }),
-      maxWeightsTexture: this.context.device.createTexture({ ...TEXTURE_PROPS,
-        width: 1,
-        height: 1,
-        format
-      })
-    });
-  }
-
-  _setupAttributes() {
-    const attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      positions: {
-        size: 3,
-        type: 5130,
-        accessor: 'getPosition'
-      },
-      weights: {
-        size: 1,
-        accessor: 'getWeight'
-      }
-    });
-    this.setState({
-      positionAttributeName: 'positions'
-    });
-  }
-
-  _setupTextureParams() {
-    const {
-      device
-    } = this.context;
-    const {
-      weightsTextureSize
-    } = this.props;
-    const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
-    const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
-    const format = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
-    const weightsScale = floatTargetSupport ? 1 : 1 / 255;
-    this.setState({
-      textureSize,
-      format,
-      weightsScale
-    });
-
-    if (!floatTargetSupport) {
-      log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)();
-    }
-  }
-
-  _createWeightsTransform(shaders) {
-    var _weightsTransform;
-
-    let {
-      weightsTransform
-    } = this.state;
-    const {
-      weightsTexture
-    } = this.state;
-    const attributeManager = this.getAttributeManager();
-    (_weightsTransform = weightsTransform) === null || _weightsTransform === void 0 ? void 0 : _weightsTransform.destroy();
-    weightsTransform = new TextureTransform(this.context.device, {
-      id: `${this.id}-weights-transform`,
-      bufferLayout: attributeManager.getBufferLayouts(),
-      vertexCount: 1,
-      targetTexture: weightsTexture,
-      parameters: {
-        depthWriteEnabled: false,
-        blendColorOperation: 'add',
-        blendColorSrcFactor: 'one',
-        blendColorDstFactor: 'one',
-        blendAlphaSrcFactor: 'one',
-        blendAlphaDstFactor: 'one'
-      },
-      topology: 'point-list',
-      ...shaders
-    });
-    this.setState({
-      weightsTransform
-    });
-  }
-
-  _setupResources() {
-    this._createTextures();
-
-    const {
-      device
-    } = this.context;
-    const {
-      textureSize,
-      weightsTexture,
-      maxWeightsTexture
-    } = this.state;
-    const weightsTransformShaders = this.getShaders({
-      vs: weightsVs,
-      fs: weightsFs
-    });
-
-    this._createWeightsTransform(weightsTransformShaders);
-
-    const maxWeightsTransformShaders = this.getShaders({
-      vs: maxVs,
-      fs: maxFs
-    });
-    const maxWeightTransform = new TextureTransform(device, {
-      id: `${this.id}-max-weights-transform`,
-      bindings: {
-        inTexture: weightsTexture
-      },
-      uniforms: {
-        textureSize
-      },
-      targetTexture: maxWeightsTexture,
-      ...maxWeightsTransformShaders,
-      vertexCount: textureSize * textureSize,
-      topology: 'point-list',
-      parameters: {
-        depthWriteEnabled: false,
-        blendColorOperation: 'max',
-        blendAlphaOperation: 'max',
-        blendColorSrcFactor: 'one',
-        blendColorDstFactor: 'one',
-        blendAlphaSrcFactor: 'one',
-        blendAlphaDstFactor: 'one'
-      }
-    });
-    this.setState({
-      weightsTexture,
-      maxWeightsTexture,
-      maxWeightTransform,
-      zoom: null,
-      triPositionBuffer: device.createBuffer({
-        byteLength: 48
-      }),
-      triTexCoordBuffer: device.createBuffer({
-        byteLength: 48
-      })
-    });
-  }
-
-  updateShaders(shaderOptions) {
-    this._createWeightsTransform({
-      vs: weightsVs,
-      fs: weightsFs,
-      ...shaderOptions
-    });
-  }
-
-  _updateMaxWeightValue() {
-    const {
-      maxWeightTransform,
-      textureSize
-    } = this.state;
-    maxWeightTransform.run({
-      parameters: {
-        viewport: [0, 0, 1, 1]
-      },
-      clearColor: [0, 0, 0, 0]
-    });
-  }
-
-  _updateBounds(forceUpdate = false) {
-    const {
-      viewport
-    } = this.context;
-    const viewportCorners = [viewport.unproject([0, 0]), viewport.unproject([viewport.width, 0]), viewport.unproject([viewport.width, viewport.height]), viewport.unproject([0, viewport.height])].map(p => p.map(Math.fround));
-    const visibleWorldBounds = getBounds(viewportCorners);
-    const newState = {
-      visibleWorldBounds,
-      viewportCorners
-    };
-    let boundsChanged = false;
-
-    if (forceUpdate || !this.state.worldBounds || !boundsContain(this.state.worldBounds, visibleWorldBounds)) {
-      const scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
-
-      const worldBounds = this._commonToWorldBounds(scaledCommonBounds);
-
-      if (this.props.coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
-        worldBounds[1] = Math.max(worldBounds[1], -85.051129);
-        worldBounds[3] = Math.min(worldBounds[3], 85.051129);
-        worldBounds[0] = Math.max(worldBounds[0], -360);
-        worldBounds[2] = Math.min(worldBounds[2], 360);
-      }
-
-      const normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
-
-      newState.worldBounds = worldBounds;
-      newState.normalizedCommonBounds = normalizedCommonBounds;
-      boundsChanged = true;
-    }
-
-    this.setState(newState);
-    return boundsChanged;
-  }
-
-  _updateTextureRenderingBounds() {
-    const {
-      triPositionBuffer,
-      triTexCoordBuffer,
-      normalizedCommonBounds,
-      viewportCorners
-    } = this.state;
-    const {
-      viewport
-    } = this.context;
-    triPositionBuffer.write(packVertices(viewportCorners, 3));
-    const textureBounds = viewportCorners.map(p => getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds));
-    triTexCoordBuffer.write(packVertices(textureBounds, 2));
-  }
-
-  _updateColorTexture(opts) {
-    var _colorTexture;
-
-    const {
-      colorRange
-    } = opts.props;
-    let {
-      colorTexture
-    } = this.state;
-    const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
-
-    if (colorTexture && ((_colorTexture = colorTexture) === null || _colorTexture === void 0 ? void 0 : _colorTexture.width) === colorRange.length) {
-      colorTexture.setSubImageData({
-        data: colors
-      });
-    } else {
-      var _colorTexture2;
-
-      (_colorTexture2 = colorTexture) === null || _colorTexture2 === void 0 ? void 0 : _colorTexture2.destroy();
-      colorTexture = this.context.device.createTexture({ ...TEXTURE_PROPS,
-        data: colors,
-        width: colorRange.length,
-        height: 1
-      });
-    }
-
-    this.setState({
-      colorTexture
-    });
-  }
-
-  _updateWeightmap() {
-    const {
-      radiusPixels,
-      colorDomain,
-      aggregation
-    } = this.props;
-    const {
-      worldBounds,
-      textureSize,
-      weightsScale
-    } = this.state;
-    const weightsTransform = this.state.weightsTransform;
-    this.state.isWeightMapDirty = false;
-
-    const commonBounds = this._worldToCommonBounds(worldBounds, {
-      useLayerCoordinateSystem: true
-    });
-
-    if (colorDomain && aggregation === 'SUM') {
-      const {
-        viewport
-      } = this.context;
-      const metersPerPixel = viewport.distanceScales.metersPerUnit[2] * (commonBounds[2] - commonBounds[0]) / textureSize;
-      this.state.colorDomain = colorDomain.map(x => x * metersPerPixel * weightsScale);
-    } else {
-      this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
-    }
-
-    const attributeManager = this.getAttributeManager();
-    const attributes = attributeManager.getAttributes();
-    const moduleSettings = this.getModuleSettings();
-    const positions = attributes.positions.buffer;
-    const uniforms = {
-      radiusPixels,
-      commonBounds,
-      textureWidth: textureSize,
-      weightsScale
-    };
-    const weights = attributes.weights.buffer;
-    weightsTransform.model.setAttributes({
-      positions,
-      weights
-    });
-    weightsTransform.model.setVertexCount(this.getNumInstances());
-    weightsTransform.model.setUniforms(uniforms);
-    weightsTransform.model.updateModuleSettings(moduleSettings);
-    weightsTransform.run({
-      parameters: {
-        viewport: [0, 0, textureSize, textureSize]
-      },
-      clearColor: [0, 0, 0, 0]
-    });
-
-    this._updateMaxWeightValue();
-  }
-
-  _debouncedUpdateWeightmap(fromTimer = false) {
-    let {
-      updateTimer
-    } = this.state;
-    const {
-      debounceTimeout
-    } = this.props;
-
-    if (fromTimer) {
-      updateTimer = null;
-
-      this._updateBounds(true);
-
-      this._updateTextureRenderingBounds();
-
-      this.setState({
-        isWeightMapDirty: true
-      });
-    } else {
-      this.setState({
-        isWeightMapDirty: false
-      });
-      clearTimeout(updateTimer);
-      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
-    }
-
-    this.setState({
-      updateTimer
-    });
-  }
-
-  _worldToCommonBounds(worldBounds, opts = {}) {
-    const {
-      useLayerCoordinateSystem = false
-    } = opts;
-    const [minLong, minLat, maxLong, maxLat] = worldBounds;
-    const {
-      viewport
-    } = this.context;
-    const {
-      textureSize
-    } = this.state;
-    const {
-      coordinateSystem
-    } = this.props;
-    const offsetMode = useLayerCoordinateSystem && (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS || coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS);
-    const offsetOriginCommon = offsetMode ? viewport.projectPosition(this.props.coordinateOrigin) : [0, 0];
-    const size = textureSize * RESOLUTION / viewport.scale;
-    let bottomLeftCommon;
-    let topRightCommon;
-
-    if (useLayerCoordinateSystem && !offsetMode) {
-      bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
-      topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
-    } else {
-      bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
-      topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
-    }
-
-    return scaleToAspectRatio([bottomLeftCommon[0] - offsetOriginCommon[0], bottomLeftCommon[1] - offsetOriginCommon[1], topRightCommon[0] - offsetOriginCommon[0], topRightCommon[1] - offsetOriginCommon[1]], size, size);
-  }
-
-  _commonToWorldBounds(commonBounds) {
-    const [xMin, yMin, xMax, yMax] = commonBounds;
-    const {
-      viewport
-    } = this.context;
-    const bottomLeftWorld = viewport.unprojectPosition([xMin, yMin]);
-    const topRightWorld = viewport.unprojectPosition([xMax, yMax]);
-    return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
-  }
-
-}
-HeatmapLayer.layerName = 'HeatmapLayer';
-HeatmapLayer.defaultProps = defaultProps;
-//# sourceMappingURL=heatmap-layer.js.map