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

package/dist/aggregation-layer.js

@@ -0,0 +1,153 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { CompositeLayer, AttributeManager, _compareProps as compareProps } from '@deck.gl/core';
+import { filterProps } from "./utils/prop-utils.js";
+export default class AggregationLayer extends CompositeLayer {
+    static { this.layerName = 'AggregationLayer'; }
+    initializeAggregationLayer(dimensions) {
+        super.initializeState(this.context);
+        this.setState({
+            // Layer props , when changed doesn't require updating aggregation
+            ignoreProps: filterProps(this.constructor._propTypes, dimensions.data.props),
+            dimensions
+        });
+    }
+    updateState(opts) {
+        super.updateState(opts);
+        const { changeFlags } = opts;
+        if (changeFlags.extensionsChanged) {
+            const shaders = this.getShaders({});
+            if (shaders && shaders.defines) {
+                shaders.defines.NON_INSTANCED_MODEL = 1;
+            }
+            this.updateShaders(shaders);
+        }
+        // Explictly call to update attributes as 'CompositeLayer' doesn't call this
+        this._updateAttributes();
+    }
+    updateAttributes(changedAttributes) {
+        // Super classes, can refer to state.changedAttributes to determine what
+        // attributes changed
+        this.setState({ changedAttributes });
+    }
+    getAttributes() {
+        return this.getAttributeManager().getAttributes();
+    }
+    getModuleSettings() {
+        // For regular layer draw this happens during draw cycle (_drawLayersInViewport) not during update cycle
+        // For aggregation layers this is called during updateState to update aggregation data
+        // NOTE: it is similar to LayerPass._getModuleParameters() but doesn't inlcude `effects` it is not needed for aggregation
+        const { viewport, mousePosition, device } = this.context;
+        const moduleSettings = Object.assign(Object.create(this.props), {
+            viewport,
+            mousePosition,
+            picking: {
+                isActive: 0
+            },
+            // @ts-expect-error TODO - assuming WebGL context
+            devicePixelRatio: device.canvasContext.cssToDeviceRatio()
+        });
+        return moduleSettings;
+    }
+    updateShaders(shaders) {
+        // Default implemention is empty, subclasses can update their Model objects if needed
+    }
+    /**
+     * Checks if aggregation is dirty
+     * @param {Object} updateOpts - object {props, oldProps, changeFlags}
+     * @param {Object} params - object {dimension, compareAll}
+     * @param {Object} params.dimension - {props, accessors} array of props and/or accessors
+     * @param {Boolean} params.compareAll - when `true` it will include non layer props for comparision
+     * @returns {Boolean} - returns true if dimensions' prop or accessor is changed
+     **/
+    isAggregationDirty(updateOpts, params = {}) {
+        const { props, oldProps, changeFlags } = updateOpts;
+        const { compareAll = false, dimension } = params;
+        const { ignoreProps } = this.state;
+        const { props: dataProps, accessors = [] } = dimension;
+        const { updateTriggersChanged } = changeFlags;
+        if (changeFlags.dataChanged) {
+            return true;
+        }
+        if (updateTriggersChanged) {
+            if (updateTriggersChanged.all) {
+                return true;
+            }
+            for (const accessor of accessors) {
+                if (updateTriggersChanged[accessor]) {
+                    return true;
+                }
+            }
+        }
+        if (compareAll) {
+            if (changeFlags.extensionsChanged) {
+                return true;
+            }
+            // Compare non layer props too (like extension props)
+            // ignoreprops refers to all Layer props other than aggregation props that need to be comapred
+            return compareProps({
+                oldProps,
+                newProps: props,
+                ignoreProps,
+                propTypes: this.constructor._propTypes
+            });
+        }
+        // Compare props of the dimension
+        for (const name of dataProps) {
+            if (props[name] !== oldProps[name]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Checks if an attribute is changed
+     * @param {String} name - name of the attribute
+     * @returns {Boolean} - `true` if attribute `name` is changed, `false` otherwise,
+     *                       If `name` is not passed or `undefiend`, `true` if any attribute is changed, `false` otherwise
+     **/
+    isAttributeChanged(name) {
+        const { changedAttributes } = this.state;
+        if (!name) {
+            // if name not specified return true if any attribute is changed
+            return !isObjectEmpty(changedAttributes);
+        }
+        return changedAttributes && changedAttributes[name] !== undefined;
+    }
+    // Private
+    // override Composite layer private method to create AttributeManager instance
+    _getAttributeManager() {
+        return new AttributeManager(this.context.device, {
+            id: this.props.id,
+            stats: this.context.stats
+        });
+    }
+}
+// Helper methods
+// Returns true if given object is empty, false otherwise.
+function isObjectEmpty(obj) {
+    let isEmpty = true;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const key in obj) {
+        isEmpty = false;
+        break;
+    }
+    return isEmpty;
+}

package/dist/contour-layer/contour-layer.js

@@ -0,0 +1,241 @@
+// Copyright (c) 2015 - 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { GL } from '@luma.gl/constants';
+import { LineLayer, SolidPolygonLayer } from '@deck.gl/layers';
+import { generateContours } from "./contour-utils.js";
+import { log } from '@deck.gl/core';
+import GPUGridAggregator from "../utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import { AGGREGATION_OPERATION, getValueFunc } from "../utils/aggregation-operation-utils.js";
+import { getBoundingBox, getGridParams } from "../utils/grid-aggregation-utils.js";
+import GridAggregationLayer from "../grid-aggregation-layer.js";
+const DEFAULT_COLOR = [255, 255, 255, 255];
+const DEFAULT_STROKE_WIDTH = 1;
+const DEFAULT_THRESHOLD = 1;
+const defaultProps = {
+    // grid aggregation
+    cellSize: { type: 'number', min: 1, max: 1000, value: 1000 },
+    getPosition: { type: 'accessor', value: (x) => x.position },
+    getWeight: { type: 'accessor', value: 1 },
+    gpuAggregation: false, // TODO(v9): Re-enable GPU aggregation.
+    aggregation: 'SUM',
+    // contour lines
+    contours: {
+        type: 'object',
+        value: [{ threshold: DEFAULT_THRESHOLD }],
+        optional: true,
+        compare: 3
+    },
+    zOffset: 0.005
+};
+const POSITION_ATTRIBUTE_NAME = 'positions';
+const DIMENSIONS = {
+    data: {
+        props: ['cellSize']
+    },
+    weights: {
+        props: ['aggregation'],
+        accessors: ['getWeight']
+    }
+};
+/** Aggregate data into iso-lines or iso-bands for a given threshold and cell size. */
+export default class ContourLayer extends GridAggregationLayer {
+    static { this.layerName = 'ContourLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        super.initializeAggregationLayer({
+            dimensions: DIMENSIONS
+        });
+        this.setState({
+            contourData: {},
+            projectPoints: false,
+            weights: {
+                count: {
+                    size: 1,
+                    operation: AGGREGATION_OPERATION.SUM
+                }
+            }
+        });
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            [POSITION_ATTRIBUTE_NAME]: {
+                size: 3,
+                accessor: 'getPosition',
+                type: GL.DOUBLE,
+                fp64: this.use64bitPositions()
+            },
+            // this attribute is used in gpu aggregation path only
+            count: { size: 3, accessor: 'getWeight' }
+        });
+    }
+    updateState(opts) {
+        super.updateState(opts);
+        let contoursChanged = false;
+        const { oldProps, props } = opts;
+        const { aggregationDirty } = this.state;
+        if (oldProps.contours !== props.contours || oldProps.zOffset !== props.zOffset) {
+            contoursChanged = true;
+            this._updateThresholdData(opts.props);
+        }
+        if (this.getNumInstances() > 0 && (aggregationDirty || contoursChanged)) {
+            this._generateContours();
+        }
+    }
+    renderLayers() {
+        const { contourSegments, contourPolygons } = this.state.contourData;
+        const LinesSubLayerClass = this.getSubLayerClass('lines', LineLayer);
+        const BandsSubLayerClass = this.getSubLayerClass('bands', SolidPolygonLayer);
+        // Contour lines layer
+        const lineLayer = contourSegments &&
+            contourSegments.length > 0 &&
+            new LinesSubLayerClass(this.getSubLayerProps({
+                id: 'lines'
+            }), {
+                data: this.state.contourData.contourSegments,
+                getSourcePosition: d => d.start,
+                getTargetPosition: d => d.end,
+                getColor: d => d.contour.color || DEFAULT_COLOR,
+                getWidth: d => d.contour.strokeWidth || DEFAULT_STROKE_WIDTH
+            });
+        // Contour bands layer
+        const bandsLayer = contourPolygons &&
+            contourPolygons.length > 0 &&
+            new BandsSubLayerClass(this.getSubLayerProps({
+                id: 'bands'
+            }), {
+                data: this.state.contourData.contourPolygons,
+                getPolygon: d => d.vertices,
+                getFillColor: d => d.contour.color || DEFAULT_COLOR
+            });
+        return [lineLayer, bandsLayer];
+    }
+    // Aggregation Overrides
+    /* eslint-disable max-statements, complexity */
+    updateAggregationState(opts) {
+        const { props, oldProps } = opts;
+        const { cellSize, coordinateSystem } = props;
+        const { viewport } = this.context;
+        const cellSizeChanged = oldProps.cellSize !== cellSize;
+        let gpuAggregation = props.gpuAggregation;
+        if (this.state.gpuAggregation !== props.gpuAggregation) {
+            if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.device)) {
+                log.warn('GPU Grid Aggregation not supported, falling back to CPU')();
+                gpuAggregation = false;
+            }
+        }
+        const gpuAggregationChanged = gpuAggregation !== this.state.gpuAggregation;
+        this.setState({
+            gpuAggregation
+        });
+        const { dimensions } = this.state;
+        const positionsChanged = this.isAttributeChanged(POSITION_ATTRIBUTE_NAME);
+        const { data, weights } = dimensions;
+        let { boundingBox } = this.state;
+        if (positionsChanged) {
+            boundingBox = getBoundingBox(this.getAttributes(), this.getNumInstances());
+            this.setState({ boundingBox });
+        }
+        if (positionsChanged || cellSizeChanged) {
+            const { gridOffset, translation, width, height, numCol, numRow } = getGridParams(boundingBox, cellSize, viewport, coordinateSystem);
+            this.allocateResources(numRow, numCol);
+            this.setState({
+                gridOffset,
+                boundingBox,
+                translation,
+                posOffset: translation.slice(), // Used for CPU aggregation, to offset points
+                gridOrigin: [-1 * translation[0], -1 * translation[1]],
+                width,
+                height,
+                numCol,
+                numRow
+            });
+        }
+        const aggregationDataDirty = positionsChanged ||
+            gpuAggregationChanged ||
+            this.isAggregationDirty(opts, {
+                dimension: data,
+                compareAll: gpuAggregation // check for all (including extentions props) when using gpu aggregation
+            });
+        const aggregationWeightsDirty = this.isAggregationDirty(opts, {
+            dimension: weights
+        });
+        if (aggregationWeightsDirty) {
+            this._updateAccessors(opts);
+        }
+        if (aggregationDataDirty || aggregationWeightsDirty) {
+            this._resetResults();
+        }
+        this.setState({
+            aggregationDataDirty,
+            aggregationWeightsDirty
+        });
+    }
+    /* eslint-enable max-statements, complexity */
+    // Private (Aggregation)
+    _updateAccessors(opts) {
+        const { getWeight, aggregation, data } = opts.props;
+        const { count } = this.state.weights;
+        if (count) {
+            count.getWeight = getWeight;
+            count.operation = AGGREGATION_OPERATION[aggregation];
+        }
+        this.setState({ getValue: getValueFunc(aggregation, getWeight, { data }) });
+    }
+    _resetResults() {
+        const { count } = this.state.weights;
+        if (count) {
+            count.aggregationData = null;
+        }
+    }
+    // Private (Contours)
+    _generateContours() {
+        const { numCol, numRow, gridOrigin, gridOffset, thresholdData } = this.state;
+        const { count } = this.state.weights;
+        let { aggregationData } = count;
+        if (!aggregationData) {
+            // @ts-ignore
+            aggregationData = count.aggregationBuffer.readSyncWebGL2();
+            count.aggregationData = aggregationData;
+        }
+        const { cellWeights } = GPUGridAggregator.getCellData({ countsData: aggregationData });
+        const contourData = generateContours({
+            thresholdData,
+            cellWeights,
+            gridSize: [numCol, numRow],
+            gridOrigin,
+            cellSize: [gridOffset.xOffset, gridOffset.yOffset]
+        });
+        // contourData contains both iso-lines and iso-bands if requested.
+        this.setState({ contourData });
+    }
+    _updateThresholdData(props) {
+        const { contours, zOffset } = props;
+        const count = contours.length;
+        const thresholdData = new Array(count);
+        for (let i = 0; i < count; i++) {
+            const contour = contours[i];
+            thresholdData[i] = {
+                contour,
+                zIndex: contour.zIndex || i,
+                zOffset
+            };
+        }
+        this.setState({ thresholdData });
+    }
+}

package/dist/contour-layer/contour-utils.js

@@ -0,0 +1,64 @@
+import { getCode, getVertices, CONTOUR_TYPE } from "./marching-squares.js";
+// Given all the cell weights, generates contours for each threshold.
+/* eslint-disable max-depth */
+export function generateContours({ thresholdData, cellWeights, gridSize, gridOrigin, cellSize }) {
+    const contourSegments = [];
+    const contourPolygons = [];
+    const width = gridSize[0];
+    const height = gridSize[1];
+    let segmentIndex = 0;
+    let polygonIndex = 0;
+    for (const data of thresholdData) {
+        const { contour } = data;
+        const { threshold } = contour;
+        for (let x = -1; x < width; x++) {
+            for (let y = -1; y < height; y++) {
+                // Get the MarchingSquares code based on neighbor cell weights.
+                const { code, meanCode } = getCode({
+                    cellWeights,
+                    threshold,
+                    x,
+                    y,
+                    width,
+                    height
+                });
+                const opts = {
+                    type: CONTOUR_TYPE.ISO_BANDS,
+                    gridOrigin,
+                    cellSize,
+                    x,
+                    y,
+                    width,
+                    height,
+                    code,
+                    meanCode,
+                    thresholdData: data
+                };
+                if (Array.isArray(threshold)) {
+                    opts.type = CONTOUR_TYPE.ISO_BANDS;
+                    const polygons = getVertices(opts);
+                    for (const polygon of polygons) {
+                        contourPolygons[polygonIndex++] = {
+                            vertices: polygon,
+                            contour
+                        };
+                    }
+                }
+                else {
+                    // Get the intersection vertices based on MarchingSquares code.
+                    opts.type = CONTOUR_TYPE.ISO_LINES;
+                    const vertices = getVertices(opts);
+                    for (let i = 0; i < vertices.length; i += 2) {
+                        contourSegments[segmentIndex++] = {
+                            start: vertices[i],
+                            end: vertices[i + 1],
+                            contour
+                        };
+                    }
+                }
+            }
+        }
+    }
+    return { contourSegments, contourPolygons };
+}
+/* eslint-enable max-depth */