@deck.gl-community/graph-layers 9.0.0

package/dist/layers/edge-layers/curved-edge-layer.js

@@ -0,0 +1,69 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer, LineLayer } from '@deck.gl/layers';
+import { SplineLayer } from '../common-layers/spline-layer/spline-layer';
+const DEBUG = false;
+export class CurvedEdgeLayer extends CompositeLayer {
+    static layerName = 'CurvedEdgeLayer';
+    // @ts-expect-error TODO
+    renderLayers() {
+        const { data, getLayoutInfo, positionUpdateTrigger = 0, colorUpdateTrigger = 0, widthUpdateTrigger = 0, ...otherProps } = this.props;
+        return [
+            DEBUG &&
+                new ScatterplotLayer(this.getSubLayerProps({
+                    id: '__control-points',
+                    data,
+                    getPosition: (e) => getLayoutInfo(e).controlPoints[0],
+                    getColor: (d) => [190, 190, 190, 150],
+                    getRadius: (d) => 5,
+                    updateTriggers: {
+                        getPosition: positionUpdateTrigger
+                    },
+                    ...otherProps
+                })),
+            DEBUG &&
+                new LineLayer(this.getSubLayerProps({
+                    id: '__first_segment',
+                    data,
+                    getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+                    getTargetPosition: (e) => getLayoutInfo(e).controlPoints[0],
+                    getColor: (e) => [210, 210, 210, 150],
+                    updateTriggers: {
+                        getSourcePosition: positionUpdateTrigger,
+                        getTargetPosition: positionUpdateTrigger
+                    },
+                    ...otherProps
+                })),
+            DEBUG &&
+                new LineLayer(this.getSubLayerProps({
+                    id: '__last_segment',
+                    data,
+                    getSourcePosition: (e) => getLayoutInfo(e).controlPoints[0],
+                    getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+                    getColor: (e) => [210, 210, 210, 150],
+                    updateTriggers: {
+                        getSourcePosition: positionUpdateTrigger,
+                        getTargetPosition: positionUpdateTrigger
+                    },
+                    ...otherProps
+                })),
+            new SplineLayer(this.getSubLayerProps({
+                id: '__spline_layer',
+                data,
+                getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+                getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+                getControlPoints: (e) => getLayoutInfo(e).controlPoints,
+                updateTriggers: {
+                    getSourcePosition: positionUpdateTrigger,
+                    getTargetPosition: positionUpdateTrigger,
+                    getControlPoints: positionUpdateTrigger,
+                    getColor: colorUpdateTrigger,
+                    getWidth: widthUpdateTrigger
+                },
+                ...otherProps
+            }))
+        ];
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ZoomableTextLayer } from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+export declare class EdgeLabelLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): ZoomableTextLayer[];
+}

package/dist/layers/edge-layers/edge-label-layer.js

@@ -0,0 +1,42 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { ZoomableTextLayer } from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+export class EdgeLabelLayer extends CompositeLayer {
+    static layerName = 'EdgeLabelLayer';
+    renderLayers() {
+        const { data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet } = this.props;
+        return [
+            new ZoomableTextLayer(this.getSubLayerProps({
+                id: 'edge-label-layer',
+                data,
+                getPosition: (e) => {
+                    const { sourcePosition, targetPosition, controlPoints = [] } = getLayoutInfo(e);
+                    // consider all the points on this edge
+                    const allPoints = [sourcePosition, targetPosition, ...controlPoints];
+                    const sumX = allPoints.reduce((res, p) => res + p[0], 0);
+                    const sumY = allPoints.reduce((res, p) => res + p[1], 0);
+                    // find the centroid of those points
+                    return [sumX / allPoints.length, sumY / allPoints.length];
+                },
+                getAngle: (e) => {
+                    const { sourcePosition, targetPosition } = getLayoutInfo(e);
+                    // sort the nodes from left to right
+                    const [newSourcePosition, newTargetPosition] = sourcePosition[0] < targetPosition[0]
+                        ? [sourcePosition, targetPosition]
+                        : [targetPosition, sourcePosition];
+                    // angle in degrees
+                    const deltaX = newTargetPosition[0] - newSourcePosition[0];
+                    const deltaY = newTargetPosition[1] - newSourcePosition[1];
+                    return (Math.atan2(deltaY, deltaX) * -180) / Math.PI;
+                },
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    ...stylesheet.getDeckGLUpdateTriggers(),
+                    getPosition: positionUpdateTrigger
+                }
+            }))
+        ];
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { FlowPathLayer } from '../common-layers/flow-path-layer/flow-path-layer';
+export declare class FlowLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): FlowPathLayer[];
+}

package/dist/layers/edge-layers/flow-layer.js

@@ -0,0 +1,28 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { FlowPathLayer } from '../common-layers/flow-path-layer/flow-path-layer';
+export class FlowLayer extends CompositeLayer {
+    static layerName = 'FlowLayer';
+    renderLayers() {
+        const { data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet } = this.props;
+        return [
+            new FlowPathLayer(this.getSubLayerProps({
+                id: '__flow-layer',
+                data,
+                ...stylesheet.getDeckGLAccessors(),
+                getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+                getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+                parameters: {
+                    depthTest: false
+                },
+                updateTriggers: {
+                    ...stylesheet.getDeckGLUpdateTriggers(),
+                    getSourcePosition: positionUpdateTrigger,
+                    getTargetPosition: positionUpdateTrigger
+                }
+            }))
+        ];
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PathLayer } from '@deck.gl/layers';
+export declare class PathEdgeLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): PathLayer<any, {}>[];
+}

package/dist/layers/edge-layers/path-edge-layer.js

@@ -0,0 +1,27 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { PathLayer } from '@deck.gl/layers';
+export class PathEdgeLayer extends CompositeLayer {
+    static layerName = 'PathEdgeLayer';
+    renderLayers() {
+        const { data, getLayoutInfo, positionUpdateTrigger = 0, colorUpdateTrigger = 0, widthUpdateTrigger = 0, ...otherProps } = this.props;
+        return [
+            new PathLayer(this.getSubLayerProps({
+                id: '__line-layer',
+                data,
+                getPath: (e) => {
+                    const { sourcePosition, targetPosition, controlPoints } = getLayoutInfo(e);
+                    return [sourcePosition, ...controlPoints, targetPosition];
+                },
+                updateTriggers: {
+                    getColor: colorUpdateTrigger,
+                    getPath: positionUpdateTrigger,
+                    getWidth: widthUpdateTrigger
+                },
+                ...otherProps
+            }))
+        ];
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+export declare class StraightLineEdgeLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): LineLayer<any, {}>[];
+}

package/dist/layers/edge-layers/straight-line-edge-layer.js

@@ -0,0 +1,26 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+export class StraightLineEdgeLayer extends CompositeLayer {
+    static layerName = 'StraightLineEdgeLayer';
+    renderLayers() {
+        const { data, getLayoutInfo, positionUpdateTrigger = 0, colorUpdateTrigger = 0, widthUpdateTrigger = 0, ...otherProps } = this.props;
+        return [
+            new LineLayer(this.getSubLayerProps({
+                id: '__line-layer',
+                data,
+                getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+                getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+                updateTriggers: {
+                    getColor: colorUpdateTrigger,
+                    getSourcePosition: positionUpdateTrigger,
+                    getTargetPosition: positionUpdateTrigger,
+                    getWidth: widthUpdateTrigger
+                },
+                ...otherProps
+            }))
+        ];
+    }
+}

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

@@ -0,0 +1,32 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { CircleLayer } from './node-layers/circle-layer';
+import { ImageLayer } from './node-layers/image-layer';
+import { LabelLayer } from './node-layers/label-layer';
+import { RectangleLayer } from './node-layers/rectangle-layer';
+import { ZoomableMarkerLayer } from './node-layers/zoomable-marker-layer';
+import { EdgeLayer } from './edge-layer';
+import { EdgeLabelLayer } from './edge-layers/edge-label-layer';
+import { FlowLayer } from './edge-layers/flow-layer';
+export declare class GraphLayer extends CompositeLayer {
+    static defaultProps: {
+        pickable: boolean;
+    };
+    forceUpdate: () => void;
+    constructor(props: any);
+    initializeState(): void;
+    shouldUpdateState({ changeFlags }: {
+        changeFlags: any;
+    }): any;
+    updateState({ props }: {
+        props: any;
+    }): void;
+    finalize(): void;
+    createNodeLayers(): (CircleLayer | ImageLayer | LabelLayer | RectangleLayer | ZoomableMarkerLayer)[];
+    createEdgeLayers(): (EdgeLayer | (EdgeLabelLayer | FlowLayer)[])[];
+    onClick(info: any, event: any): boolean;
+    onHover(info: any, event: any): boolean;
+    onDragStart(info: any, event: any): void;
+    onDrag(info: any, event: any): void;
+    onDragEnd(info: any, event: any): void;
+    renderLayers(): ((EdgeLayer | (EdgeLabelLayer | FlowLayer)[])[] | (CircleLayer | ImageLayer | LabelLayer | RectangleLayer | ZoomableMarkerLayer)[])[];
+}

package/dist/layers/graph-layer.js

@@ -0,0 +1,193 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
+import { Stylesheet } from '../style/style-sheet';
+import { NODE_TYPE, EDGE_DECORATOR_TYPE } from '../core/constants';
+import { mixedGetPosition } from '../utils/layer-utils';
+import { InteractionManager } from '../core/interaction-manager';
+import { log } from '../utils/log';
+// node layers
+import { CircleLayer } from './node-layers/circle-layer';
+import { ImageLayer } from './node-layers/image-layer';
+import { LabelLayer } from './node-layers/label-layer';
+import { RectangleLayer } from './node-layers/rectangle-layer';
+import { RoundedRectangleLayer } from './node-layers/rounded-rectangle-layer';
+import { PathBasedRoundedRectangleLayer } from './node-layers/path-rounded-rectange-layer';
+import { ZoomableMarkerLayer } from './node-layers/zoomable-marker-layer';
+// edge layers
+import { EdgeLayer } from './edge-layer';
+import { EdgeLabelLayer } from './edge-layers/edge-label-layer';
+import { FlowLayer } from './edge-layers/flow-layer';
+const NODE_LAYER_MAP = {
+    [NODE_TYPE.RECTANGLE]: RectangleLayer,
+    [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
+    [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: PathBasedRoundedRectangleLayer,
+    [NODE_TYPE.ICON]: ImageLayer,
+    [NODE_TYPE.CIRCLE]: CircleLayer,
+    [NODE_TYPE.LABEL]: LabelLayer,
+    [NODE_TYPE.MARKER]: ZoomableMarkerLayer
+};
+const EDGE_DECORATOR_LAYER_MAP = {
+    [EDGE_DECORATOR_TYPE.LABEL]: EdgeLabelLayer,
+    [EDGE_DECORATOR_TYPE.FLOW]: FlowLayer
+};
+const SHARED_LAYER_PROPS = {
+    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+    parameters: {
+        depthTest: false
+    }
+};
+const defaultProps = {
+    // an array of styles for layers
+    nodeStyle: [],
+    nodeEvents: {
+        onMouseLeave: () => { },
+        onHover: () => { },
+        onMouseEnter: () => { },
+        onClick: () => { },
+        onDrag: () => { }
+    },
+    edgeStyle: {
+        color: 'black',
+        strokeWidth: 1,
+        // an array of styles for layers
+        decorators: []
+    },
+    edgeEvents: {
+        onClick: () => { },
+        onHover: () => { }
+    },
+    enableDragging: false
+};
+export class GraphLayer extends CompositeLayer {
+    static defaultProps = {
+        pickable: true
+    };
+    forceUpdate = () => {
+        if (this.context && this.context.layerManager) {
+            this.setNeedsUpdate();
+            this.setChangeFlags({ dataChanged: true }); // TODO
+        }
+    };
+    constructor(props) {
+        super(props);
+        // added or removed a node, or in general something layout related changed
+        props.engine.addEventListener('onLayoutChange', this.forceUpdate);
+    }
+    initializeState() {
+        const interactionManager = new InteractionManager(this.props, () => this.forceUpdate());
+        this.state = { interactionManager };
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.dataChanged || changeFlags.propsChanged;
+    }
+    updateState({ props }) {
+        this.state.interactionManager.updateProps(props);
+    }
+    finalize() {
+        this.props.engine.removeEventListener('onLayoutChange', this.forceUpdate);
+    }
+    createNodeLayers() {
+        const { engine, nodeStyle } = this.props;
+        if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+            return [];
+        }
+        return nodeStyle.filter(Boolean).map((style, idx) => {
+            const { pickable = true, visible = true, data = (nodes) => nodes, ...restStyle } = style;
+            const LayerType = NODE_LAYER_MAP[style.type];
+            if (!LayerType) {
+                log.error(`Invalid node type: ${style.type}`)();
+                throw new Error(`Invalid node type: ${style.type}`);
+            }
+            const stylesheet = new Stylesheet(restStyle, {
+                stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+            });
+            const getOffset = stylesheet.getDeckGLAccessor('getOffset');
+            return new LayerType({
+                ...SHARED_LAYER_PROPS,
+                id: `node-rule-${idx}`,
+                data: data(engine.getNodes()),
+                getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+                pickable,
+                positionUpdateTrigger: [
+                    engine.getLayoutLastUpdate(),
+                    engine.getLayoutState(),
+                    stylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+                ].join(),
+                stylesheet,
+                visible
+            });
+        });
+    }
+    createEdgeLayers() {
+        const { edgeStyle, engine } = this.props;
+        if (!edgeStyle) {
+            return [];
+        }
+        return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle])
+            .filter(Boolean)
+            .flatMap((style, idx) => {
+            const { decorators, data = (edges) => edges, visible = true, ...restEdgeStyle } = style;
+            const stylesheet = new Stylesheet({
+                type: 'Edge',
+                ...restEdgeStyle
+            }, {
+                stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+            });
+            const edgeLayer = new EdgeLayer({
+                ...SHARED_LAYER_PROPS,
+                id: `edge-layer-${idx}`,
+                data: data(engine.getEdges()),
+                getLayoutInfo: engine.getEdgePosition,
+                pickable: true,
+                positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+                stylesheet,
+                visible
+            });
+            if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
+                return edgeLayer;
+            }
+            const decoratorLayers = decorators.filter(Boolean).flatMap((decoratorStyle, idx2) => {
+                const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
+                if (!DecoratorLayer) {
+                    log.error(`Invalid edge decorator type: ${decoratorStyle.type}`)();
+                    throw new Error(`Invalid edge decorator type: ${decoratorStyle.type}`);
+                }
+                const decoratorStylesheet = new Stylesheet(decoratorStyle, {
+                    stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+                });
+                return new DecoratorLayer({
+                    ...SHARED_LAYER_PROPS,
+                    id: `edge-decorator-${idx2}`,
+                    data: data(engine.getEdges()),
+                    getLayoutInfo: engine.getEdgePosition,
+                    pickable: true,
+                    positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+                    stylesheet: decoratorStylesheet
+                });
+            });
+            return [edgeLayer, decoratorLayers];
+        });
+    }
+    onClick(info, event) {
+        return this.state.interactionManager.onClick(info, event) || false;
+    }
+    onHover(info, event) {
+        return this.state.interactionManager.onHover(info, event) || false;
+    }
+    onDragStart(info, event) {
+        this.state.interactionManager.onDragStart(info, event);
+    }
+    onDrag(info, event) {
+        this.state.interactionManager.onDrag(info, event);
+    }
+    onDragEnd(info, event) {
+        this.state.interactionManager.onDragEnd(info, event);
+    }
+    renderLayers() {
+        return [this.createEdgeLayers(), this.createNodeLayers()];
+    }
+}
+GraphLayer.layerName = 'GraphLayer';
+GraphLayer.defaultProps = defaultProps;

package/dist/layers/node-layers/circle-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer } from '@deck.gl/layers';
+export declare class CircleLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): ScatterplotLayer<any, {}>[];
+}

package/dist/layers/node-layers/circle-layer.js

@@ -0,0 +1,23 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer } from '@deck.gl/layers';
+export class CircleLayer extends CompositeLayer {
+    static layerName = 'CircleLayer';
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        return [
+            new ScatterplotLayer(this.getSubLayerProps({
+                id: '__scatterplot-layer',
+                data,
+                getPosition,
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    getPosition: positionUpdateTrigger,
+                    ...stylesheet.getDeckGLUpdateTriggers()
+                }
+            }))
+        ];
+    }
+}

package/dist/layers/node-layers/image-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { IconLayer } from '@deck.gl/layers';
+export declare class ImageLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): IconLayer<any, {}>[];
+}

package/dist/layers/node-layers/image-layer.js

@@ -0,0 +1,23 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { IconLayer } from '@deck.gl/layers';
+export class ImageLayer extends CompositeLayer {
+    static layerName = 'ImageLayer';
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        return [
+            new IconLayer(this.getSubLayerProps({
+                id: '__icon-layer',
+                data,
+                getPosition,
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    getPosition: positionUpdateTrigger,
+                    ...stylesheet.getDeckGLUpdateTriggers()
+                }
+            }))
+        ];
+    }
+}

package/dist/layers/node-layers/label-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ZoomableTextLayer } from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+export declare class LabelLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): ZoomableTextLayer[];
+}

package/dist/layers/node-layers/label-layer.js

@@ -0,0 +1,23 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { ZoomableTextLayer } from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+export class LabelLayer extends CompositeLayer {
+    static layerName = 'LabelLayer';
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        return [
+            new ZoomableTextLayer(this.getSubLayerProps({
+                id: '__text-layer',
+                data,
+                getPosition,
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    ...stylesheet.getDeckGLUpdateTriggers(),
+                    getPosition: positionUpdateTrigger
+                }
+            }))
+        ];
+    }
+}

package/dist/layers/node-layers/path-rounded-rectange-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+export declare class PathBasedRoundedRectangleLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): PolygonLayer<any, {}>[];
+}

package/dist/layers/node-layers/path-rounded-rectange-layer.js

@@ -0,0 +1,46 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+import { generateRoundedCorners } from '../../utils/polygon-calculations';
+const generateRoundedRectangle = (node, { getWidth, getHeight, getPosition, getCornerRadius }) => {
+    const pos = getPosition(node);
+    const width = typeof getWidth === 'function' ? getWidth(node) : getWidth;
+    const height = typeof getWidth === 'function' ? getHeight(node) : getHeight;
+    const cornerRadius = typeof getCornerRadius === 'function' ? getCornerRadius(node) : getCornerRadius;
+    const factor = 20;
+    return generateRoundedCorners(pos, width, height, cornerRadius, factor);
+};
+export class PathBasedRoundedRectangleLayer extends CompositeLayer {
+    static layerName = 'PathBasedRoundedRectangleLayer';
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        const getFillColor = stylesheet.getDeckGLAccessor('getFillColor');
+        const getLineWidth = stylesheet.getDeckGLAccessor('getLineWidth');
+        return [
+            new PolygonLayer(this.getSubLayerProps({
+                id: '__polygon-layer',
+                data,
+                getPolygon: (node) => generateRoundedRectangle(node, {
+                    getPosition,
+                    getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+                    getHeight: stylesheet.getDeckGLAccessor('getHeight'),
+                    getCornerRadius: stylesheet.getDeckGLAccessor('getCornerRadius')
+                }),
+                filled: Boolean(getFillColor),
+                stroked: Boolean(getLineWidth),
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    getPolygon: [
+                        positionUpdateTrigger,
+                        stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+                        stylesheet.getDeckGLAccessorUpdateTrigger('getHeight'),
+                        stylesheet.getDeckGLAccessorUpdateTrigger('getCornerRadius')
+                    ],
+                    ...stylesheet.getDeckGLUpdateTriggers()
+                }
+            }))
+        ];
+    }
+}

package/dist/layers/node-layers/rectangle-layer.d.ts

@@ -0,0 +1,6 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+export declare class RectangleLayer extends CompositeLayer {
+    static layerName: string;
+    renderLayers(): PolygonLayer<any, {}>[];
+}

package/dist/layers/node-layers/rectangle-layer.js

@@ -0,0 +1,49 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+const generateRectangle = (node, { getWidth, getHeight, getPosition }) => {
+    const pos = getPosition(node);
+    const width = typeof getWidth === 'function' ? getWidth(node._data.label.length * 12) : getWidth;
+    const height = typeof getWidth === 'function' ? getHeight(node) : getHeight;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    return [
+        [pos[0] - halfWidth, pos[1] - halfHeight],
+        [pos[0] - halfWidth, pos[1] + halfHeight],
+        [pos[0] + halfWidth, pos[1] + halfHeight],
+        [pos[0] + halfWidth, pos[1] - halfHeight]
+    ];
+};
+export class RectangleLayer extends CompositeLayer {
+    static layerName = 'RectangleLayer';
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        const getFillColor = stylesheet.getDeckGLAccessor('getFillColor');
+        const getLineWidth = stylesheet.getDeckGLAccessor('getLineWidth');
+        return [
+            new PolygonLayer(this.getSubLayerProps({
+                id: '__polygon-layer',
+                data,
+                getPolygon: (node) => generateRectangle(node, {
+                    getPosition,
+                    getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+                    getHeight: stylesheet.getDeckGLAccessor('getHeight')
+                }),
+                filled: Boolean(getFillColor),
+                jointRounded: true,
+                stroked: Boolean(getLineWidth),
+                ...stylesheet.getDeckGLAccessors(),
+                updateTriggers: {
+                    getPolygon: [
+                        positionUpdateTrigger,
+                        stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+                        stylesheet.getDeckGLAccessorUpdateTrigger('getHeight')
+                    ],
+                    ...stylesheet.getDeckGLUpdateTriggers()
+                }
+            }))
+        ];
+    }
+}