@deck.gl/aggregation-layers 8.7.0-alpha.3 → 8.7.0-alpha.7

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

@@ -7,6 +7,20 @@ 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");
@@ -25,7 +39,15 @@ var _gridAggregationLayer = _interopRequireDefault(require("../grid-aggregation-
 
 var _gridAggregationUtils = require("../utils/grid-aggregation-utils");
 
-const defaultProps = {
+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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var defaultProps = {
   colorDomain: null,
   colorRange: _colorUtils.defaultColorRange,
   getColorWeight: {
@@ -59,362 +81,343 @@ const defaultProps = {
   },
   getPosition: {
     type: 'accessor',
-    value: x => x.position
+    value: function value(x) {
+      return x.position;
+    }
   },
   extruded: false,
   material: true
 };
-const DIMENSIONS = {
+var DIMENSIONS = {
   data: {
     props: ['cellSize', 'colorAggregation', 'elevationAggregation']
   }
 };
-const POSITION_ATTRIBUTE_NAME = 'positions';
+var POSITION_ATTRIBUTE_NAME = 'positions';
 
-class GPUGridLayer extends _gridAggregationLayer.default {
-  initializeState() {
-    const {
-      gl
-    } = this.context;
+var GPUGridLayer = function (_GridAggregationLayer) {
+  (0, _inherits2.default)(GPUGridLayer, _GridAggregationLayer);
 
-    const isSupported = _gpuGridAggregator.default.isSupported(gl);
+  var _super = _createSuper(GPUGridLayer);
 
-    if (!isSupported) {
-      _core2.log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
-    }
+  function GPUGridLayer() {
+    (0, _classCallCheck2.default)(this, GPUGridLayer);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(GPUGridLayer, [{
+    key: "initializeState",
+    value: function initializeState() {
+      var _attributeManager$add;
+
+      var gl = this.context.gl;
+
+      var isSupported = _gpuGridAggregator.default.isSupported(gl);
 
-    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
-            }
-          })
+      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
+              }
+            })
+          }
         },
-        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]: {
+        positionAttributeName: 'positions'
+      });
+      var attributeManager = this.getAttributeManager();
+      attributeManager.add((_attributeManager$add = {}, (0, _defineProperty2.default)(_attributeManager$add, POSITION_ATTRIBUTE_NAME, {
         size: 3,
         accessor: 'getPosition',
         type: 5130,
         fp64: this.use64bitPositions()
-      },
-      color: {
+      }), (0, _defineProperty2.default)(_attributeManager$add, "color", {
         size: 3,
         accessor: 'getColorWeight'
-      },
-      elevation: {
+      }), (0, _defineProperty2.default)(_attributeManager$add, "elevation", {
         size: 3,
         accessor: 'getElevationWeight'
-      }
-    });
-  }
-
-  updateState(opts) {
-    if (this.state.isSupported === false) {
-      return;
+      }), _attributeManager$add));
     }
+  }, {
+    key: "updateState",
+    value: function updateState(opts) {
+      if (this.state.isSupported === false) {
+        return;
+      }
 
-    super.updateState(opts);
-    const {
-      aggregationDirty
-    } = this.state;
-
-    if (aggregationDirty) {
-      this.setState({
-        gridHash: null
-      });
-    }
-  }
-
-  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];
-  }
-
-  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')
-      });
-
-      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
-          });
-        }
+      (0, _get2.default)((0, _getPrototypeOf2.default)(GPUGridLayer.prototype), "updateState", this).call(this, opts);
+      var aggregationDirty = this.state.aggregationDirty;
 
-        const key = this.getHashKeyForIndex(index);
-        const cpuAggregationData = gridHash[key];
-        Object.assign(object, cpuAggregationData);
+      if (aggregationDirty) {
+        this.setState({
+          gridHash: null
+        });
       }
     }
-
-    info.picked = Boolean(object);
-    info.object = object;
-    return info;
-  }
-
-  renderLayers() {
-    if (!this.state.isSupported) {
-      return 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);
     }
-
-    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
+  }, {
+    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);
         }
-      },
-      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();
-  }
+      info.picked = Boolean(object);
+      info.object = object;
+      return info;
+    }
+  }, {
+    key: "renderLayers",
+    value: function renderLayers() {
+      if (!this.state.isSupported) {
+        return null;
+      }
 
-  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({
-        boundingBox
+      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
       });
     }
-
-    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
+  }, {
+    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();
       });
+      (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
+        });
+      }
 
-    const aggregationDataDirty = attributesChanged || this.isAggregationDirty(opts, {
-      dimension: dimensions.data,
-      compareAll: true
-    });
-
-    if (aggregationDataDirty) {
-      this._updateAccessors(opts);
-    }
+      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
+        });
+      }
 
-    this.setState({
-      aggregationDataDirty
-    });
-  }
+      var aggregationDataDirty = attributesChanged || this.isAggregationDirty(opts, {
+        dimension: dimensions.data,
+        compareAll: true
+      });
 
-  _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];
-  }
+      if (aggregationDataDirty) {
+        this._updateAccessors(opts);
+      }
 
-}
+      this.setState({
+        aggregationDataDirty: aggregationDataDirty
+      });
+    }
+  }, {
+    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];
+    }
+  }]);
+  return GPUGridLayer;
+}(_gridAggregationLayer.default);
 
 exports.default = GPUGridLayer;
 GPUGridLayer.layerName = 'GPUGridLayer';