@deck.gl/aggregation-layers 8.6.2 → 8.7.0-alpha.2

package/dist/es5/gpu-grid-layer/gpu-grid-layer.js

@@ -7,20 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _core = require("@luma.gl/core");
 
 var _core2 = require("@deck.gl/core");
@@ -39,15 +25,7 @@ var _gridAggregationLayer = _interopRequireDefault(require("../grid-aggregation-
 
 var _gridAggregationUtils = require("../utils/grid-aggregation-utils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var defaultProps = {
+const defaultProps = {
   colorDomain: null,
   colorRange: _colorUtils.defaultColorRange,
   getColorWeight: {
@@ -81,343 +59,362 @@ var defaultProps = {
   },
   getPosition: {
     type: 'accessor',
-    value: function value(x) {
-      return x.position;
-    }
+    value: x => x.position
   },
   extruded: false,
   material: true
 };
-var DIMENSIONS = {
+const DIMENSIONS = {
   data: {
     props: ['cellSize', 'colorAggregation', 'elevationAggregation']
   }
 };
-var POSITION_ATTRIBUTE_NAME = 'positions';
-
-var GPUGridLayer = function (_GridAggregationLayer) {
-  (0, _inherits2.default)(GPUGridLayer, _GridAggregationLayer);
-
-  var _super = _createSuper(GPUGridLayer);
-
-  function GPUGridLayer() {
-    (0, _classCallCheck2.default)(this, GPUGridLayer);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(GPUGridLayer, [{
-    key: "initializeState",
-    value: function initializeState() {
-      var _attributeManager$add;
+const POSITION_ATTRIBUTE_NAME = 'positions';
 
-      var gl = this.context.gl;
+class GPUGridLayer extends _gridAggregationLayer.default {
+  initializeState() {
+    const {
+      gl
+    } = this.context;
 
-      var isSupported = _gpuGridAggregator.default.isSupported(gl);
+    const isSupported = _gpuGridAggregator.default.isSupported(gl);
 
-      if (!isSupported) {
-        _core2.log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
-      }
+    if (!isSupported) {
+      _core2.log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
+    }
 
-      (0, _get2.default)((0, _getPrototypeOf2.default)(GPUGridLayer.prototype), "initializeState", this).call(this, {
-        dimensions: DIMENSIONS
-      });
-      this.setState({
-        gpuAggregation: true,
-        projectPoints: false,
-        isSupported: isSupported,
-        weights: {
-          color: {
-            needMin: true,
-            needMax: true,
-            combineMaxMin: true,
-            maxMinBuffer: new _core.Buffer(gl, {
-              byteLength: 4 * 4,
-              accessor: {
-                size: 4,
-                type: 5126,
-                divisor: 1
-              }
-            })
-          },
-          elevation: {
-            needMin: true,
-            needMax: true,
-            combineMaxMin: true,
-            maxMinBuffer: new _core.Buffer(gl, {
-              byteLength: 4 * 4,
-              accessor: {
-                size: 4,
-                type: 5126,
-                divisor: 1
-              }
-            })
-          }
+    super.initializeState({
+      dimensions: DIMENSIONS
+    });
+    this.setState({
+      gpuAggregation: true,
+      projectPoints: false,
+      isSupported,
+      weights: {
+        color: {
+          needMin: true,
+          needMax: true,
+          combineMaxMin: true,
+          maxMinBuffer: new _core.Buffer(gl, {
+            byteLength: 4 * 4,
+            accessor: {
+              size: 4,
+              type: 5126,
+              divisor: 1
+            }
+          })
         },
-        positionAttributeName: 'positions'
-      });
-      var attributeManager = this.getAttributeManager();
-      attributeManager.add((_attributeManager$add = {}, (0, _defineProperty2.default)(_attributeManager$add, POSITION_ATTRIBUTE_NAME, {
+        elevation: {
+          needMin: true,
+          needMax: true,
+          combineMaxMin: true,
+          maxMinBuffer: new _core.Buffer(gl, {
+            byteLength: 4 * 4,
+            accessor: {
+              size: 4,
+              type: 5126,
+              divisor: 1
+            }
+          })
+        }
+      },
+      positionAttributeName: 'positions'
+    });
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      [POSITION_ATTRIBUTE_NAME]: {
         size: 3,
         accessor: 'getPosition',
         type: 5130,
         fp64: this.use64bitPositions()
-      }), (0, _defineProperty2.default)(_attributeManager$add, "color", {
+      },
+      color: {
         size: 3,
         accessor: 'getColorWeight'
-      }), (0, _defineProperty2.default)(_attributeManager$add, "elevation", {
+      },
+      elevation: {
         size: 3,
         accessor: 'getElevationWeight'
-      }), _attributeManager$add));
-    }
-  }, {
-    key: "updateState",
-    value: function updateState(opts) {
-      if (this.state.isSupported === false) {
-        return;
       }
+    });
+  }
 
-      (0, _get2.default)((0, _getPrototypeOf2.default)(GPUGridLayer.prototype), "updateState", this).call(this, opts);
-      var aggregationDirty = this.state.aggregationDirty;
-
-      if (aggregationDirty) {
-        this.setState({
-          gridHash: null
-        });
-      }
-    }
-  }, {
-    key: "getHashKeyForIndex",
-    value: function getHashKeyForIndex(index) {
-      var _this$state = this.state,
-          numRow = _this$state.numRow,
-          numCol = _this$state.numCol,
-          boundingBox = _this$state.boundingBox,
-          gridOffset = _this$state.gridOffset;
-      var gridSize = [numCol, numRow];
-      var gridOrigin = [boundingBox.xMin, boundingBox.yMin];
-      var cellSize = [gridOffset.xOffset, gridOffset.yOffset];
-      var yIndex = Math.floor(index / gridSize[0]);
-      var xIndex = index - yIndex * gridSize[0];
-      var latIdx = Math.floor((yIndex * cellSize[1] + gridOrigin[1] + 90 + cellSize[1] / 2) / cellSize[1]);
-      var lonIdx = Math.floor((xIndex * cellSize[0] + gridOrigin[0] + 180 + cellSize[0] / 2) / cellSize[0]);
-      return "".concat(latIdx, "-").concat(lonIdx);
+  updateState(opts) {
+    if (this.state.isSupported === false) {
+      return;
     }
-  }, {
-    key: "getPositionForIndex",
-    value: function getPositionForIndex(index) {
-      var _this$state2 = this.state,
-          numRow = _this$state2.numRow,
-          numCol = _this$state2.numCol,
-          boundingBox = _this$state2.boundingBox,
-          gridOffset = _this$state2.gridOffset;
-      var gridSize = [numCol, numRow];
-      var gridOrigin = [boundingBox.xMin, boundingBox.yMin];
-      var cellSize = [gridOffset.xOffset, gridOffset.yOffset];
-      var yIndex = Math.floor(index / gridSize[0]);
-      var xIndex = index - yIndex * gridSize[0];
-      var yPos = yIndex * cellSize[1] + gridOrigin[1];
-      var xPos = xIndex * cellSize[0] + gridOrigin[0];
-      return [xPos, yPos];
-    }
-  }, {
-    key: "getPickingInfo",
-    value: function getPickingInfo(_ref) {
-      var info = _ref.info,
-          mode = _ref.mode;
-      var index = info.index;
-      var object = null;
-
-      if (index >= 0) {
-        var gpuGridAggregator = this.state.gpuGridAggregator;
-        var position = this.getPositionForIndex(index);
-
-        var colorInfo = _gpuGridAggregator.default.getAggregationData(_objectSpread({
-          pixelIndex: index
-        }, gpuGridAggregator.getData('color')));
-
-        var elevationInfo = _gpuGridAggregator.default.getAggregationData(_objectSpread({
-          pixelIndex: index
-        }, gpuGridAggregator.getData('elevation')));
-
-        object = {
-          colorValue: colorInfo.cellWeight,
-          elevationValue: elevationInfo.cellWeight,
-          count: colorInfo.cellCount || elevationInfo.cellCount,
-          position: position,
-          totalCount: colorInfo.totalCount || elevationInfo.totalCount
-        };
-
-        if (mode !== 'hover') {
-          var props = this.props;
-          var gridHash = this.state.gridHash;
-
-          if (!gridHash) {
-            var _this$state3 = this.state,
-                gridOffset = _this$state3.gridOffset,
-                translation = _this$state3.translation,
-                boundingBox = _this$state3.boundingBox;
-            var viewport = this.context.viewport;
-            var attributes = this.getAttributes();
-            var cpuAggregation = (0, _gridAggregator.pointToDensityGridDataCPU)(props, {
-              gridOffset: gridOffset,
-              attributes: attributes,
-              viewport: viewport,
-              translation: translation,
-              boundingBox: boundingBox
-            });
-            gridHash = cpuAggregation.gridHash;
-            this.setState({
-              gridHash: gridHash
-            });
-          }
-
-          var key = this.getHashKeyForIndex(index);
-          var cpuAggregationData = gridHash[key];
-          Object.assign(object, cpuAggregationData);
-        }
-      }
 
-      info.picked = Boolean(object);
-      info.object = object;
-      return info;
-    }
-  }, {
-    key: "renderLayers",
-    value: function renderLayers() {
-      if (!this.state.isSupported) {
-        return null;
-      }
+    super.updateState(opts);
+    const {
+      aggregationDirty
+    } = this.state;
 
-      var _this$props = this.props,
-          elevationScale = _this$props.elevationScale,
-          extruded = _this$props.extruded,
-          cellSizeMeters = _this$props.cellSize,
-          coverage = _this$props.coverage,
-          material = _this$props.material,
-          elevationRange = _this$props.elevationRange,
-          colorDomain = _this$props.colorDomain,
-          elevationDomain = _this$props.elevationDomain;
-      var _this$state4 = this.state,
-          weights = _this$state4.weights,
-          numRow = _this$state4.numRow,
-          numCol = _this$state4.numCol,
-          gridOrigin = _this$state4.gridOrigin,
-          gridOffset = _this$state4.gridOffset;
-      var color = weights.color,
-          elevation = weights.elevation;
-      var colorRange = (0, _colorUtils.colorRangeToFlatArray)(this.props.colorRange);
-      var SubLayerClass = this.getSubLayerClass('gpu-grid-cell', _gpuGridCellLayer.default);
-      return new SubLayerClass({
-        gridSize: [numCol, numRow],
-        gridOrigin: gridOrigin,
-        gridOffset: [gridOffset.xOffset, gridOffset.yOffset],
-        colorRange: colorRange,
-        elevationRange: elevationRange,
-        colorDomain: colorDomain,
-        elevationDomain: elevationDomain,
-        cellSize: cellSizeMeters,
-        coverage: coverage,
-        material: material,
-        elevationScale: elevationScale,
-        extruded: extruded
-      }, this.getSubLayerProps({
-        id: 'gpu-grid-cell'
-      }), {
-        data: {
-          attributes: {
-            colors: color.aggregationBuffer,
-            elevations: elevation.aggregationBuffer
-          }
-        },
-        colorMaxMinBuffer: color.maxMinBuffer,
-        elevationMaxMinBuffer: elevation.maxMinBuffer,
-        numInstances: numCol * numRow
-      });
-    }
-  }, {
-    key: "finalizeState",
-    value: function finalizeState() {
-      var _this$state$weights = this.state.weights,
-          color = _this$state$weights.color,
-          elevation = _this$state$weights.elevation;
-      [color, elevation].forEach(function (weight) {
-        var aggregationBuffer = weight.aggregationBuffer,
-            maxMinBuffer = weight.maxMinBuffer;
-        maxMinBuffer.delete();
-        aggregationBuffer === null || aggregationBuffer === void 0 ? void 0 : aggregationBuffer.delete();
+    if (aggregationDirty) {
+      this.setState({
+        gridHash: null
       });
-      (0, _get2.default)((0, _getPrototypeOf2.default)(GPUGridLayer.prototype), "finalizeState", this).call(this);
     }
-  }, {
-    key: "updateAggregationState",
-    value: function updateAggregationState(opts) {
-      var props = opts.props,
-          oldProps = opts.oldProps;
-      var cellSize = props.cellSize,
-          coordinateSystem = props.coordinateSystem;
-      var viewport = this.context.viewport;
-      var cellSizeChanged = oldProps.cellSize !== cellSize;
-      var dimensions = this.state.dimensions;
-      var positionsChanged = this.isAttributeChanged(POSITION_ATTRIBUTE_NAME);
-      var attributesChanged = positionsChanged || this.isAttributeChanged();
-      var boundingBox = this.state.boundingBox;
-
-      if (positionsChanged) {
-        boundingBox = (0, _gridAggregationUtils.getBoundingBox)(this.getAttributes(), this.getNumInstances());
-        this.setState({
-          boundingBox: boundingBox
-        });
-      }
+  }
 
-      if (positionsChanged || cellSizeChanged) {
-        var _getGridParams = (0, _gridAggregationUtils.getGridParams)(boundingBox, cellSize, viewport, coordinateSystem),
-            gridOffset = _getGridParams.gridOffset,
-            translation = _getGridParams.translation,
-            width = _getGridParams.width,
-            height = _getGridParams.height,
-            numCol = _getGridParams.numCol,
-            numRow = _getGridParams.numRow;
-
-        this.allocateResources(numRow, numCol);
-        this.setState({
-          gridOffset: gridOffset,
-          translation: translation,
-          gridOrigin: [-1 * translation[0], -1 * translation[1]],
-          width: width,
-          height: height,
-          numCol: numCol,
-          numRow: numRow
-        });
-      }
+  getHashKeyForIndex(index) {
+    const {
+      numRow,
+      numCol,
+      boundingBox,
+      gridOffset
+    } = this.state;
+    const gridSize = [numCol, numRow];
+    const gridOrigin = [boundingBox.xMin, boundingBox.yMin];
+    const cellSize = [gridOffset.xOffset, gridOffset.yOffset];
+    const yIndex = Math.floor(index / gridSize[0]);
+    const xIndex = index - yIndex * gridSize[0];
+    const latIdx = Math.floor((yIndex * cellSize[1] + gridOrigin[1] + 90 + cellSize[1] / 2) / cellSize[1]);
+    const lonIdx = Math.floor((xIndex * cellSize[0] + gridOrigin[0] + 180 + cellSize[0] / 2) / cellSize[0]);
+    return "".concat(latIdx, "-").concat(lonIdx);
+  }
+
+  getPositionForIndex(index) {
+    const {
+      numRow,
+      numCol,
+      boundingBox,
+      gridOffset
+    } = this.state;
+    const gridSize = [numCol, numRow];
+    const gridOrigin = [boundingBox.xMin, boundingBox.yMin];
+    const cellSize = [gridOffset.xOffset, gridOffset.yOffset];
+    const yIndex = Math.floor(index / gridSize[0]);
+    const xIndex = index - yIndex * gridSize[0];
+    const yPos = yIndex * cellSize[1] + gridOrigin[1];
+    const xPos = xIndex * cellSize[0] + gridOrigin[0];
+    return [xPos, yPos];
+  }
 
-      var aggregationDataDirty = attributesChanged || this.isAggregationDirty(opts, {
-        dimension: dimensions.data,
-        compareAll: true
+  getPickingInfo({
+    info,
+    mode
+  }) {
+    const {
+      index
+    } = info;
+    let object = null;
+
+    if (index >= 0) {
+      const {
+        gpuGridAggregator
+      } = this.state;
+      const position = this.getPositionForIndex(index);
+
+      const colorInfo = _gpuGridAggregator.default.getAggregationData({
+        pixelIndex: index,
+        ...gpuGridAggregator.getData('color')
       });
 
-      if (aggregationDataDirty) {
-        this._updateAccessors(opts);
+      const elevationInfo = _gpuGridAggregator.default.getAggregationData({
+        pixelIndex: index,
+        ...gpuGridAggregator.getData('elevation')
+      });
+
+      object = {
+        colorValue: colorInfo.cellWeight,
+        elevationValue: elevationInfo.cellWeight,
+        count: colorInfo.cellCount || elevationInfo.cellCount,
+        position,
+        totalCount: colorInfo.totalCount || elevationInfo.totalCount
+      };
+
+      if (mode !== 'hover') {
+        const {
+          props
+        } = this;
+        let {
+          gridHash
+        } = this.state;
+
+        if (!gridHash) {
+          const {
+            gridOffset,
+            translation,
+            boundingBox
+          } = this.state;
+          const {
+            viewport
+          } = this.context;
+          const attributes = this.getAttributes();
+          const cpuAggregation = (0, _gridAggregator.pointToDensityGridDataCPU)(props, {
+            gridOffset,
+            attributes,
+            viewport,
+            translation,
+            boundingBox
+          });
+          gridHash = cpuAggregation.gridHash;
+          this.setState({
+            gridHash
+          });
+        }
+
+        const key = this.getHashKeyForIndex(index);
+        const cpuAggregationData = gridHash[key];
+        Object.assign(object, cpuAggregationData);
       }
+    }
+
+    info.picked = Boolean(object);
+    info.object = object;
+    return info;
+  }
+
+  renderLayers() {
+    if (!this.state.isSupported) {
+      return null;
+    }
 
+    const {
+      elevationScale,
+      extruded,
+      cellSize: cellSizeMeters,
+      coverage,
+      material,
+      elevationRange,
+      colorDomain,
+      elevationDomain
+    } = this.props;
+    const {
+      weights,
+      numRow,
+      numCol,
+      gridOrigin,
+      gridOffset
+    } = this.state;
+    const {
+      color,
+      elevation
+    } = weights;
+    const colorRange = (0, _colorUtils.colorRangeToFlatArray)(this.props.colorRange);
+    const SubLayerClass = this.getSubLayerClass('gpu-grid-cell', _gpuGridCellLayer.default);
+    return new SubLayerClass({
+      gridSize: [numCol, numRow],
+      gridOrigin,
+      gridOffset: [gridOffset.xOffset, gridOffset.yOffset],
+      colorRange,
+      elevationRange,
+      colorDomain,
+      elevationDomain,
+      cellSize: cellSizeMeters,
+      coverage,
+      material,
+      elevationScale,
+      extruded
+    }, this.getSubLayerProps({
+      id: 'gpu-grid-cell'
+    }), {
+      data: {
+        attributes: {
+          colors: color.aggregationBuffer,
+          elevations: elevation.aggregationBuffer
+        }
+      },
+      colorMaxMinBuffer: color.maxMinBuffer,
+      elevationMaxMinBuffer: elevation.maxMinBuffer,
+      numInstances: numCol * numRow
+    });
+  }
+
+  finalizeState() {
+    const {
+      color,
+      elevation
+    } = this.state.weights;
+    [color, elevation].forEach(weight => {
+      const {
+        aggregationBuffer,
+        maxMinBuffer
+      } = weight;
+      maxMinBuffer.delete();
+      aggregationBuffer === null || aggregationBuffer === void 0 ? void 0 : aggregationBuffer.delete();
+    });
+    super.finalizeState();
+  }
+
+  updateAggregationState(opts) {
+    const {
+      props,
+      oldProps
+    } = opts;
+    const {
+      cellSize,
+      coordinateSystem
+    } = props;
+    const {
+      viewport
+    } = this.context;
+    const cellSizeChanged = oldProps.cellSize !== cellSize;
+    const {
+      dimensions
+    } = this.state;
+    const positionsChanged = this.isAttributeChanged(POSITION_ATTRIBUTE_NAME);
+    const attributesChanged = positionsChanged || this.isAttributeChanged();
+    let {
+      boundingBox
+    } = this.state;
+
+    if (positionsChanged) {
+      boundingBox = (0, _gridAggregationUtils.getBoundingBox)(this.getAttributes(), this.getNumInstances());
       this.setState({
-        aggregationDataDirty: aggregationDataDirty
+        boundingBox
       });
     }
-  }, {
-    key: "_updateAccessors",
-    value: function _updateAccessors(opts) {
-      var _opts$props = opts.props,
-          colorAggregation = _opts$props.colorAggregation,
-          elevationAggregation = _opts$props.elevationAggregation;
-      var _this$state$weights2 = this.state.weights,
-          color = _this$state$weights2.color,
-          elevation = _this$state$weights2.elevation;
-      color.operation = _aggregationOperationUtils.AGGREGATION_OPERATION[colorAggregation];
-      elevation.operation = _aggregationOperationUtils.AGGREGATION_OPERATION[elevationAggregation];
+
+    if (positionsChanged || cellSizeChanged) {
+      const {
+        gridOffset,
+        translation,
+        width,
+        height,
+        numCol,
+        numRow
+      } = (0, _gridAggregationUtils.getGridParams)(boundingBox, cellSize, viewport, coordinateSystem);
+      this.allocateResources(numRow, numCol);
+      this.setState({
+        gridOffset,
+        translation,
+        gridOrigin: [-1 * translation[0], -1 * translation[1]],
+        width,
+        height,
+        numCol,
+        numRow
+      });
     }
-  }]);
-  return GPUGridLayer;
-}(_gridAggregationLayer.default);
+
+    const aggregationDataDirty = attributesChanged || this.isAggregationDirty(opts, {
+      dimension: dimensions.data,
+      compareAll: true
+    });
+
+    if (aggregationDataDirty) {
+      this._updateAccessors(opts);
+    }
+
+    this.setState({
+      aggregationDataDirty
+    });
+  }
+
+  _updateAccessors(opts) {
+    const {
+      colorAggregation,
+      elevationAggregation
+    } = opts.props;
+    const {
+      color,
+      elevation
+    } = this.state.weights;
+    color.operation = _aggregationOperationUtils.AGGREGATION_OPERATION[colorAggregation];
+    elevation.operation = _aggregationOperationUtils.AGGREGATION_OPERATION[elevationAggregation];
+  }
+
+}
 
 exports.default = GPUGridLayer;
 GPUGridLayer.layerName = 'GPUGridLayer';