@deck.gl-community/graph-layers 9.0.0

package/dist/layers/common-layers/marker-layer/marker-mapping.js

@@ -0,0 +1,427 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/* eslint-disable */
+export const MarkerMapping = {
+    'bell-filled': {
+        x: 0,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    bell: {
+        x: 32,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'bookmark-filled': {
+        x: 0,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    bookmark: {
+        x: 32,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'cd-filled': {
+        x: 64,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    cd: {
+        x: 64,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    checkmark: {
+        x: 0,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-check-filled': {
+        x: 32,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-check': {
+        x: 64,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-filled': {
+        x: 96,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-i-filled': {
+        x: 96,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-i': {
+        x: 96,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-minus-filled': {
+        x: 0,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-minus': {
+        x: 32,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-plus-filled': {
+        x: 64,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-plus': {
+        x: 96,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-questionmark-filled': {
+        x: 128,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-questionmark': {
+        x: 128,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-slash-filled': {
+        x: 128,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-slash': {
+        x: 128,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-x-filled': {
+        x: 0,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'circle-x': {
+        x: 32,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    circle: {
+        x: 64,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'diamond-filled': {
+        x: 96,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    diamond: {
+        x: 128,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'flag-filled': {
+        x: 160,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    flag: {
+        x: 160,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    gear: {
+        x: 160,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'heart-filled': {
+        x: 160,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    heart: {
+        x: 160,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'location-marker-filled': {
+        x: 0,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'location-marker': {
+        x: 32,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'octagonal-star-filled': {
+        x: 64,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'octagonal-star': {
+        x: 96,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'person-filled': {
+        x: 128,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    person: {
+        x: 160,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'pin-filled': {
+        x: 192,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    pin: {
+        x: 192,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'plus-small': {
+        x: 192,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    plus: {
+        x: 192,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'rectangle-filled': {
+        x: 192,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    rectangle: {
+        x: 192,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'star-filled': {
+        x: 0,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    star: {
+        x: 32,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'tag-filled': {
+        x: 64,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    tag: {
+        x: 96,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'thumb-down-filled': {
+        x: 128,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'thumb-down': {
+        x: 160,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'thumb-up': {
+        x: 192,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'thumb_up-filled': {
+        x: 224,
+        y: 0,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-down-filled': {
+        x: 224,
+        y: 32,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-down': {
+        x: 224,
+        y: 64,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-left-filled': {
+        x: 224,
+        y: 96,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-left': {
+        x: 224,
+        y: 128,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-right-filled': {
+        x: 224,
+        y: 160,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-right': {
+        x: 224,
+        y: 192,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-up-filled': {
+        x: 0,
+        y: 224,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'triangle-up': {
+        x: 32,
+        y: 224,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    'x-small': {
+        x: 64,
+        y: 224,
+        width: 32,
+        height: 32,
+        mask: true
+    },
+    x: {
+        x: 96,
+        y: 224,
+        width: 32,
+        height: 32,
+        mask: true
+    }
+};
+/* eslint-enable */

package/dist/layers/common-layers/spline-layer/spline-layer.d.ts

@@ -0,0 +1,24 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PathLayer } from '@deck.gl/layers';
+export declare class SplineLayer extends CompositeLayer {
+    static layerName: string;
+    initializeState(): void;
+    shouldUpdateState({ changeFlags }: {
+        changeFlags: any;
+    }): any;
+    updateState({ props, oldProps, changeFlags }: {
+        props: any;
+        oldProps: any;
+        changeFlags: any;
+    }): void;
+    updateSplineData(): void;
+    renderLayers(): PathLayer<any, {
+        id: `${any}-splines`;
+        data: any;
+        getPath: (d: any) => any;
+        getColor: any;
+        getWidth: any;
+        coordinateSystem: any;
+        updateTriggers: any;
+    }>;
+}

package/dist/layers/common-layers/spline-layer/spline-layer.js

@@ -0,0 +1,68 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
+import { PathLayer } from '@deck.gl/layers';
+import { getCurvePoints } from 'cardinal-spline-js';
+// const getCurvePoints = () => {};
+/* Constants */
+const defaultProps = {
+    id: 'spline-layer',
+    getData: (d) => d.points,
+    getAngle: (x) => 0,
+    fontSize: 24,
+    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+    fp64: false
+};
+export class SplineLayer extends CompositeLayer {
+    static layerName = 'SplineLayer';
+    initializeState() {
+        this.state = { typedEdgeData: [] };
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.dataChanged || changeFlags.propsChanged;
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        super.updateState({ props, oldProps, changeFlags });
+        if (changeFlags.dataChanged || changeFlags.propsChanged) {
+            this.updateSplineData();
+        }
+    }
+    updateSplineData() {
+        const { data } = this.props;
+        const paths = data.reduce((res, d) => {
+            const sourcePosition = this.props.getSourcePosition(d);
+            const targetPosition = this.props.getTargetPosition(d);
+            const controlPoints = this.props.getControlPoints(d);
+            // Catmull-Rom curve
+            const serializedControlPoints = controlPoints.toString().split(',');
+            // NOTE: we might change the number of points according to the length.
+            // so we can render less segements.
+            // points = [x1, y1, x2, y2, ...];
+            const points = getCurvePoints([...sourcePosition, ...serializedControlPoints, ...targetPosition], 0.5, 10);
+            // convert points to [[x1, y1], [x2, y2], ...]
+            const path = [];
+            for (let idx = 0; idx < points.length; idx += 2) {
+                path.push([points[idx], points[idx + 1]]);
+            }
+            res.push(path);
+            return res;
+        }, []);
+        this.setState({ paths });
+    }
+    renderLayers() {
+        const { coordinateSystem, getColor, getWidth, id, updateTriggers } = this.props;
+        const { paths } = this.state;
+        return new PathLayer({
+            id: `${id}-splines`,
+            data: paths,
+            getPath: (d) => d,
+            getColor,
+            getWidth,
+            coordinateSystem,
+            updateTriggers
+        });
+    }
+}
+SplineLayer.layerName = 'SplineLayer';
+SplineLayer.defaultProps = defaultProps;

package/dist/layers/common-layers/zoomable-text-layer/zoomable-text-layer.d.ts

@@ -0,0 +1,16 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TextLayer } from '@deck.gl/layers';
+export declare class ZoomableTextLayer extends CompositeLayer {
+    static layerName: string;
+    initializeState(): void;
+    shouldUpdateState({ props, changeFlags }: {
+        props: any;
+        changeFlags: any;
+    }): any;
+    updateState({ props, oldProps, changeFlags }: {
+        props: any;
+        oldProps: any;
+        changeFlags: any;
+    }): void;
+    renderLayers(): TextLayer<any, {}>[];
+}

package/dist/layers/common-layers/zoomable-text-layer/zoomable-text-layer.js

@@ -0,0 +1,65 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { TextLayer } from '@deck.gl/layers';
+export class ZoomableTextLayer extends CompositeLayer {
+    static layerName = 'ZoomableTextLayer';
+    initializeState() {
+        this.state = { characterSet: [] };
+    }
+    shouldUpdateState({ props, changeFlags }) {
+        const { scaleWithZoom } = this.props;
+        if (!scaleWithZoom) {
+            return changeFlags.dataChanged || changeFlags.propsChanged;
+        }
+        return changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged;
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        super.updateState({ props, oldProps, changeFlags });
+        if (changeFlags.propsOrDataChanged) {
+            const { getText } = props;
+            let textLabels = [];
+            if (typeof getText === 'function') {
+                textLabels = props.data.map(getText);
+            }
+            else {
+                textLabels = [getText];
+            }
+            const characterSet = new Set(textLabels.join(''));
+            const uniqueCharacters = Array.from(characterSet);
+            this.setState({ characterSet: uniqueCharacters });
+        }
+    }
+    renderLayers() {
+        const { data, getPosition, getColor, getText, getSize, getTextAnchor, getAlignmentBaseline, getAngle, scaleWithZoom, updateTriggers, fontFamily, textWordUnits, textWordBreak, textMaxWidth, textSizeMinPixels } = this.props;
+        const sizeUpdateTrigger = scaleWithZoom ? [getSize, this.context.viewport.zoom] : false;
+        // getText only expects function not plain value (string)
+        const newGetText = typeof getText === 'function' ? getText : () => getText;
+        return [
+            new TextLayer(this.getSubLayerProps({
+                id: '__text-layer',
+                data,
+                sizeScale: scaleWithZoom ? Math.pow(2, this.context.viewport.zoom - 1) : 1,
+                characterSet: this.state.characterSet,
+                getPosition,
+                getColor,
+                getSize,
+                getTextAnchor,
+                getAlignmentBaseline,
+                getAngle,
+                getText: newGetText,
+                maxWidth: textMaxWidth ?? 12,
+                wordBreak: textWordBreak ?? 'break-all',
+                fontFamily: fontFamily ?? 'Red Hat Text',
+                wordUnits: textWordUnits ?? 'pixels',
+                sizeMinPixels: textSizeMinPixels ?? 9,
+                updateTriggers: {
+                    getSize: sizeUpdateTrigger,
+                    getAngle: [sizeUpdateTrigger, updateTriggers.getPosition],
+                    ...updateTriggers
+                }
+            }))
+        ];
+    }
+}

package/dist/layers/edge-layer.d.ts

@@ -0,0 +1,25 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { StraightLineEdgeLayer } from '../layers/edge-layers/straight-line-edge-layer';
+import { PathEdgeLayer } from './edge-layers/path-edge-layer';
+import { CurvedEdgeLayer } from './edge-layers/curved-edge-layer';
+export declare class EdgeLayer extends CompositeLayer {
+    static layerName: string;
+    static defaultProps: {
+        data: any[];
+        pickable: boolean;
+        getLayoutInfo: (d: any) => {
+            type: any;
+            sourcePosition: any;
+            targetPosition: any;
+            controlPoints: any[];
+        };
+        positionUpdateTrigger: number;
+    };
+    updateState({ props, oldProps, changeFlags }: {
+        props: any;
+        oldProps: any;
+        changeFlags: any;
+    }): void;
+    updateStateData(): void;
+    renderLayers(): (StraightLineEdgeLayer | PathEdgeLayer | CurvedEdgeLayer)[];
+}

package/dist/layers/edge-layer.js

@@ -0,0 +1,75 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
+import { EDGE_TYPE } from '../core/constants';
+import { StraightLineEdgeLayer } from '../layers/edge-layers/straight-line-edge-layer';
+import { PathEdgeLayer } from './edge-layers/path-edge-layer';
+import { CurvedEdgeLayer } from './edge-layers/curved-edge-layer';
+const EDGE_LAYER_MAP = {
+    [EDGE_TYPE.LINE]: StraightLineEdgeLayer,
+    [EDGE_TYPE.PATH]: PathEdgeLayer,
+    [EDGE_TYPE.SPLINE_CURVE]: CurvedEdgeLayer
+};
+export class EdgeLayer extends CompositeLayer {
+    static layerName = 'EdgeLayer';
+    static defaultProps = {
+        data: [],
+        pickable: true,
+        getLayoutInfo: (d) => ({
+            type: d.type,
+            sourcePosition: d.sourcePosition,
+            targetPosition: d.targetPosition,
+            controlPoints: []
+        }),
+        positionUpdateTrigger: 0
+    };
+    updateState({ props, oldProps, changeFlags }) {
+        super.updateState({ props, oldProps, changeFlags });
+        if (changeFlags.dataChanged) {
+            this.updateStateData();
+        }
+    }
+    updateStateData() {
+        const { data, getLayoutInfo } = this.props;
+        // bucket edges by types
+        const typedEdgeData = data.reduce((res, d) => {
+            const { type } = getLayoutInfo(d);
+            res[type].push(d);
+            return res;
+        }, {
+            [EDGE_TYPE.LINE]: [],
+            [EDGE_TYPE.PATH]: [],
+            [EDGE_TYPE.SPLINE_CURVE]: []
+        });
+        this.setState({ typedEdgeData });
+    }
+    renderLayers() {
+        const { getLayoutInfo, pickable, positionUpdateTrigger, stylesheet, id } = this.props;
+        const { typedEdgeData } = this.state;
+        // render lines by types (straight line, path, curves)
+        return Object.entries(typedEdgeData).map((e, idx) => {
+            const [type, edgeData] = e;
+            const Layer = EDGE_LAYER_MAP[type];
+            // invalid edge layer type
+            if (!Layer) {
+                return null;
+            }
+            return new Layer({
+                id: `${id}-${idx}`,
+                data: edgeData,
+                getLayoutInfo,
+                getColor: stylesheet.getDeckGLAccessor('getColor'),
+                getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+                colorUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getColor'),
+                widthUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+                positionUpdateTrigger,
+                pickable,
+                coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+                parameters: {
+                    depthCompare: 'always'
+                }
+            });
+        });
+    }
+}

package/dist/layers/edge-layers/curved-edge-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { SplineLayer } from '../common-layers/spline-layer/spline-layer';
+export declare class CurvedEdgeLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): (boolean | SplineLayer)[];
+}