@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.3

package/dist/index.d.ts

@@ -1,20 +1,22 @@
+export { Graph } from "./graph/graph.js";
+export { Node } from "./graph/node.js";
+export { Edge } from "./graph/edge.js";
 export { GraphEngine } from "./core/graph-engine.js";
-export { Graph } from "./core/graph.js";
-export { Node } from "./core/node.js";
-export { Edge } from "./core/edge.js";
-export { NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, LAYOUT_STATE, MARKER_TYPE } from "./core/constants.js";
-export { BaseLayout } from "./core/base-layout.js";
+export type { GraphLayoutState } from "./core/graph-layout.js";
+export { GraphLayout } from "./core/graph-layout.js";
+export { SimpleLayout } from "./layouts//simple-layout.js";
 export { D3ForceLayout } from "./layouts/d3-force/d3-force-layout.js";
 export { GPUForceLayout } from "./layouts/gpu-force/gpu-force-layout.js";
-export { SimpleLayout } from "./layouts/simple-layout/simple-layout.js";
-export { JSONLoader } from "./loaders/json-loader.js";
-export { basicNodeParser } from "./loaders/node-parsers.js";
-export { basicEdgeParser } from "./loaders/edge-parsers.js";
-export { createGraph } from "./utils/create-graph.js";
-export * from "./utils/layer-utils.js";
-export * from "./utils/log.js";
+export { RadialLayout as _RadialLayout } from "./layouts/experimental/radial-layout.js";
+export { ForceMultiGraphLayout as _MultigraphLayout } from "./layouts/experimental/force-multi-graph-layout.js";
+export { HivePlotLayout as _HivePlotLayout } from "./layouts/experimental/hive-plot-layout.js";
+export { NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, MARKER_TYPE } from "./core/constants.js";
 export { GraphLayer } from "./layers/graph-layer.js";
 export { EdgeLayer } from "./layers/edge-layer.js";
-/** @deprecated Use EdgeLayer */
-export { EdgeLayer as CompositeEdgeLayer } from "./layers/edge-layer.js";
+export { ViewControlWidget } from "./widgets/view-control-widget.js";
+export { loadSimpleJSONGraph } from "./loaders/simple-json-graph-loader.js";
+export { mixedGetPosition } from "./utils/layer-utils.js";
+export { log } from "./utils/log.js";
+export { createGraph } from "./loaders/create-graph.js";
+export { JSONLoader } from "./loaders/simple-json-graph-loader.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAC,+BAA4B;AAChD,OAAO,EAAC,KAAK,EAAC,wBAAqB;AACnC,OAAO,EAAC,IAAI,EAAC,uBAAoB;AACjC,OAAO,EAAC,IAAI,EAAC,uBAAoB;AACjC,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,WAAW,EACZ,4BAAyB;AAG1B,OAAO,EAAC,UAAU,EAAC,8BAA2B;AAC9C,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,cAAc,EAAC,gDAA6C;AACpE,OAAO,EAAC,YAAY,EAAC,iDAA8C;AAGnE,OAAO,EAAC,UAAU,EAAC,iCAA8B;AACjD,OAAO,EAAC,eAAe,EAAC,kCAA+B;AACvD,OAAO,EAAC,eAAe,EAAC,kCAA+B;AAGvD,OAAO,EAAC,WAAW,EAAC,gCAA6B;AACjD,uCAAoC;AACpC,+BAA4B;AAG5B,OAAO,EAAC,UAAU,EAAC,gCAA6B;AAChD,OAAO,EAAC,SAAS,EAAC,+BAA4B;AAI9C,gCAAgC;AAChC,OAAO,EAAC,SAAS,IAAI,kBAAkB,EAAC,+BAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,KAAK,EAAC,yBAAsB;AACpC,OAAO,EAAC,IAAI,EAAC,wBAAqB;AAClC,OAAO,EAAC,IAAI,EAAC,wBAAqB;AAElC,OAAO,EAAC,WAAW,EAAC,+BAA4B;AAGhD,YAAY,EAAC,gBAAgB,EAAC,+BAA4B;AAC1D,OAAO,EAAC,WAAW,EAAC,+BAA4B;AAEhD,OAAO,EAAC,YAAY,EAAC,oCAAiC;AACtD,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,cAAc,EAAC,gDAA6C;AACpE,OAAO,EAAC,YAAY,IAAI,aAAa,EAAC,gDAA6C;AACnF,OAAO,EAAC,qBAAqB,IAAI,iBAAiB,EAAC,2DAAwD;AAC3G,OAAO,EAAC,cAAc,IAAI,eAAe,EAAC,mDAAgD;AAE1F,OAAO,EAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,WAAW,EAAC,4BAAyB;AAGpG,OAAO,EAAC,UAAU,EAAC,gCAA6B;AAChD,OAAO,EAAC,SAAS,EAAC,+BAA4B;AAI9C,OAAO,EAAC,iBAAiB,EAAC,yCAAsC;AAGhE,OAAO,EAAC,mBAAmB,EAAC,8CAA2C;AAGvE,OAAO,EAAC,gBAAgB,EAAC,+BAA4B;AACrD,OAAO,EAAC,GAAG,EAAC,uBAAoB;AAGhC,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,UAAU,EAAC,8CAA2C"}

package/dist/index.js

@@ -1,28 +1,29 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-// react-graph-layers core
+// core - Graph representation and layout
+export { Graph } from "./graph/graph.js";
+export { Node } from "./graph/node.js";
+export { Edge } from "./graph/edge.js";
 export { GraphEngine } from "./core/graph-engine.js";
-export { Graph } from "./core/graph.js";
-export { Node } from "./core/node.js";
-export { Edge } from "./core/edge.js";
-export { NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, LAYOUT_STATE, MARKER_TYPE } from "./core/constants.js";
-// react-graph-layers layouts
-export { BaseLayout } from "./core/base-layout.js";
+export { GraphLayout } from "./core/graph-layout.js";
+export { SimpleLayout } from "./layouts//simple-layout.js";
 export { D3ForceLayout } from "./layouts/d3-force/d3-force-layout.js";
 export { GPUForceLayout } from "./layouts/gpu-force/gpu-force-layout.js";
-export { SimpleLayout } from "./layouts/simple-layout/simple-layout.js";
-// react-graph-layers loaders
-export { JSONLoader } from "./loaders/json-loader.js";
-export { basicNodeParser } from "./loaders/node-parsers.js";
-export { basicEdgeParser } from "./loaders/edge-parsers.js";
-// react-graph-layers utils
-export { createGraph } from "./utils/create-graph.js";
-export * from "./utils/layer-utils.js";
-export * from "./utils/log.js";
+export { RadialLayout as _RadialLayout } from "./layouts/experimental/radial-layout.js";
+export { ForceMultiGraphLayout as _MultigraphLayout } from "./layouts/experimental/force-multi-graph-layout.js";
+export { HivePlotLayout as _HivePlotLayout } from "./layouts/experimental/hive-plot-layout.js";
+export { NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, MARKER_TYPE } from "./core/constants.js";
 // deck.gl components
 export { GraphLayer } from "./layers/graph-layer.js";
 export { EdgeLayer } from "./layers/edge-layer.js";
+// Widgets
+export { ViewControlWidget } from "./widgets/view-control-widget.js";
+// graph format loaders
+export { loadSimpleJSONGraph } from "./loaders/simple-json-graph-loader.js";
+// utils
+export { mixedGetPosition } from "./utils/layer-utils.js";
+export { log } from "./utils/log.js";
 // DEPRECATED
-/** @deprecated Use EdgeLayer */
-export { EdgeLayer as CompositeEdgeLayer } from "./layers/edge-layer.js";
+export { createGraph } from "./loaders/create-graph.js";
+export { JSONLoader } from "./loaders/simple-json-graph-loader.js";

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

@@ -1,4 +1,9 @@
+import type { CompositeLayerProps } from '@deck.gl/core';
 import { CompositeLayer } from '@deck.gl/core';
+import { Graph } from "../graph/graph.js";
+import { GraphLayout } from "../core/graph-layout.js";
+import { GraphEngine } from "../core/graph-engine.js";
+import { InteractionManager } from "../core/interaction-manager.js";
 import { CircleLayer } from "./node-layers/circle-layer.js";
 import { ImageLayer } from "./node-layers/image-layer.js";
 import { LabelLayer } from "./node-layers/label-layer.js";
@@ -7,20 +12,55 @@ import { ZoomableMarkerLayer } from "./node-layers/zoomable-marker-layer.js";
 import { EdgeLayer } from "./edge-layer.js";
 import { EdgeLabelLayer } from "./edge-layers/edge-label-layer.js";
 import { FlowLayer } from "./edge-layers/flow-layer.js";
-export declare class GraphLayer extends CompositeLayer {
-    static defaultProps: {
-        pickable: boolean;
+export type GraphLayerProps = CompositeLayerProps & _GraphLayerProps;
+export type _GraphLayerProps = {
+    graph?: Graph;
+    layout?: GraphLayout;
+    graphLoader?: (opts: {
+        json: any;
+    }) => Graph;
+    engine?: GraphEngine;
+    nodeStyle?: any[];
+    edgeStyle?: {
+        stroke?: string;
+        strokeWidth?: number;
+        /** an array of styles for layers */
+        decorators?: any[];
+    };
+    nodeEvents?: {
+        onMouseLeave?: () => void;
+        onHover?: () => void;
+        onMouseEnter?: () => void;
+        onClick?: () => void;
+        onDrag?: () => void;
+    };
+    edgeEvents?: {
+        onClick: () => void;
+        onHover: () => void;
+    };
+    enableDragging?: boolean;
+};
+export declare class GraphLayer extends CompositeLayer<GraphLayerProps> {
+    static layerName: string;
+    static defaultProps: Required<_GraphLayerProps>;
+    state: CompositeLayer<GraphLayerProps>['state'] & {
+        interactionManager: InteractionManager;
+        graphEngine?: GraphEngine;
     };
     forceUpdate: () => void;
-    constructor(props: any);
+    constructor(props: GraphLayerProps & CompositeLayerProps);
     initializeState(): void;
     shouldUpdateState({ changeFlags }: {
         changeFlags: any;
     }): any;
-    updateState({ props }: {
+    updateState({ props, oldProps, changeFlags }: {
         props: any;
+        oldProps: any;
+        changeFlags: any;
     }): void;
     finalize(): void;
+    _setGraphEngine(graphEngine: GraphEngine): void;
+    _removeGraphEngine(): void;
     createNodeLayers(): (CircleLayer | ImageLayer | LabelLayer | RectangleLayer | ZoomableMarkerLayer)[];
     createEdgeLayers(): (EdgeLayer | (EdgeLabelLayer | FlowLayer)[])[];
     onClick(info: any, event: any): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"graph-layer.d.ts","sourceRoot":"","sources":["../../src/layers/graph-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,cAAc,EAAC,MAAM,eAAe,CAAC;AAUhE,OAAO,EAAC,WAAW,EAAC,sCAAmC;AACvD,OAAO,EAAC,UAAU,EAAC,qCAAkC;AACrD,OAAO,EAAC,UAAU,EAAC,qCAAkC;AACrD,OAAO,EAAC,cAAc,EAAC,yCAAsC;AAG7D,OAAO,EAAC,mBAAmB,EAAC,+CAA4C;AAGxE,OAAO,EAAC,SAAS,EAAC,wBAAqB;AACvC,OAAO,EAAC,cAAc,EAAC,0CAAuC;AAC9D,OAAO,EAAC,SAAS,EAAC,oCAAiC;AA8CnD,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,YAAY;;MAEjB;IAEF,WAAW,aAKT;gBAEU,KAAK,KAAA;IAOjB,eAAe;IAKf,iBAAiB,CAAC,EAAC,WAAW,EAAC;;KAAA;IAI/B,WAAW,CAAC,EAAC,KAAK,EAAC;;KAAA;IAInB,QAAQ;IAIR,gBAAgB;IAiChB,gBAAgB;IA0DhB,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,OAAO;IAI7B,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,OAAO;IAI7B,WAAW,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIvB,MAAM,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIlB,SAAS,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIrB,YAAY;CAGb"}
+{"version":3,"file":"graph-layer.d.ts","sourceRoot":"","sources":["../../src/layers/graph-layer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAoB,cAAc,EAAC,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,gCAA6B;AACjD,OAAO,EAAC,WAAW,EAAC,gCAA6B;AAIjD,OAAO,EAAC,kBAAkB,EAAC,uCAAoC;AAK/D,OAAO,EAAC,WAAW,EAAC,sCAAmC;AACvD,OAAO,EAAC,UAAU,EAAC,qCAAkC;AACrD,OAAO,EAAC,UAAU,EAAC,qCAAkC;AACrD,OAAO,EAAC,cAAc,EAAC,yCAAsC;AAG7D,OAAO,EAAC,mBAAmB,EAAC,+CAA4C;AAGxE,OAAO,EAAC,SAAS,EAAC,wBAAqB;AACvC,OAAO,EAAC,cAAc,EAAC,0CAAuC;AAC9D,OAAO,EAAC,SAAS,EAAC,oCAAiC;AA0BnD,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,gBAAgB,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,GAAG,CAAA;KAAC,KAAK,KAAK,CAAC;IAC3C,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,oCAAoC;QACpC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,qBAAa,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC7D,MAAM,CAAC,SAAS,SAAgB;IAEhC,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CA2B7C;IAGF,KAAK,EAAG,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG;QACjD,kBAAkB,EAAE,kBAAkB,CAAC;QACvC,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;IAEF,WAAW,aAKT;gBAEU,KAAK,EAAE,eAAe,GAAG,mBAAmB;IAIxD,eAAe;IAQf,iBAAiB,CAAC,EAAC,WAAW,EAAC;;KAAA;IAI/B,WAAW,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAC;;;;KAAA;IAqB1C,QAAQ;IAIR,eAAe,CAAC,WAAW,EAAE,WAAW;IAcxC,kBAAkB;IAQlB,gBAAgB;IAmChB,gBAAgB;IA2DhB,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,OAAO;IAI7B,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,OAAO;IAI7B,WAAW,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIvB,MAAM,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIlB,SAAS,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAIrB,YAAY;CAGb"}

package/dist/layers/graph-layer.js

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
-import { Stylesheet } from "../style/style-sheet.js";
 import { NODE_TYPE, EDGE_DECORATOR_TYPE } from "../core/constants.js";
+import { GraphEngine } from "../core/graph-engine.js";
+import { Stylesheet } from "../style/style-sheet.js";
 import { mixedGetPosition } from "../utils/layer-utils.js";
 import { InteractionManager } from "../core/interaction-manager.js";
 import { log } from "../utils/log.js";
@@ -13,12 +14,13 @@ import { ImageLayer } from "./node-layers/image-layer.js";
 import { LabelLayer } from "./node-layers/label-layer.js";
 import { RectangleLayer } from "./node-layers/rectangle-layer.js";
 import { RoundedRectangleLayer } from "./node-layers/rounded-rectangle-layer.js";
-import { PathBasedRoundedRectangleLayer } from "./node-layers/path-rounded-rectange-layer.js";
+import { PathBasedRoundedRectangleLayer } from "./node-layers/path-rounded-rectangle-layer.js";
 import { ZoomableMarkerLayer } from "./node-layers/zoomable-marker-layer.js";
 // edge layers
 import { EdgeLayer } from "./edge-layer.js";
 import { EdgeLabelLayer } from "./edge-layers/edge-label-layer.js";
 import { FlowLayer } from "./edge-layers/flow-layer.js";
+import { JSONLoader } from "../loaders/json-loader.js";
 const NODE_LAYER_MAP = {
     [NODE_TYPE.RECTANGLE]: RectangleLayer,
     [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
@@ -38,32 +40,36 @@ const SHARED_LAYER_PROPS = {
         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 layerName = 'GraphLayer';
     static defaultProps = {
-        pickable: true
+        // Composite layer props
+        // @ts-expect-error composite layer props
+        pickable: true,
+        // Graph props
+        graphLoader: JSONLoader,
+        nodeStyle: [],
+        nodeEvents: {
+            onMouseLeave: () => { },
+            onHover: () => { },
+            onMouseEnter: () => { },
+            onClick: () => { },
+            onDrag: () => { }
+        },
+        edgeStyle: {
+            stroke: 'black',
+            strokeWidth: 1,
+            // an array of styles for layers
+            decorators: []
+        },
+        edgeEvents: {
+            onClick: () => { },
+            onHover: () => { }
+        },
+        enableDragging: false
     };
+    // @ts-expect-error Some typescript confusion due to override of base class state
+    state;
     forceUpdate = () => {
         if (this.context && this.context.layerManager) {
             this.setNeedsUpdate();
@@ -72,25 +78,62 @@ export class GraphLayer extends CompositeLayer {
     };
     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 };
+        this.state = {
+            interactionManager: new InteractionManager(this.props, () => this.forceUpdate())
+        };
+        const engine = this.props.engine;
+        this._setGraphEngine(engine);
     }
     shouldUpdateState({ changeFlags }) {
         return changeFlags.dataChanged || changeFlags.propsChanged;
     }
-    updateState({ props }) {
-        this.state.interactionManager.updateProps(props);
+    updateState({ props, oldProps, changeFlags }) {
+        if (changeFlags.dataChanged &&
+            props.data &&
+            !(Array.isArray(props.data) && props.data.length === 0)) {
+            // console.log(props.data);
+            const graph = this.props.graphLoader({ json: props.data });
+            const layout = this.props.layout;
+            const graphEngine = new GraphEngine({ graph, layout });
+            this._setGraphEngine(graphEngine);
+            this.state.interactionManager.updateProps(props);
+            this.forceUpdate();
+        }
+        else if (changeFlags.propsChanged && props.graph !== oldProps.graph) {
+            const graphEngine = new GraphEngine({ graph: props.graph, layout: props.layout });
+            this._setGraphEngine(graphEngine);
+            this.state.interactionManager.updateProps(props);
+            this.forceUpdate();
+        }
     }
     finalize() {
-        this.props.engine.removeEventListener('onLayoutChange', this.forceUpdate);
+        this._removeGraphEngine();
+    }
+    _setGraphEngine(graphEngine) {
+        if (graphEngine === this.state.graphEngine) {
+            return;
+        }
+        this._removeGraphEngine();
+        if (graphEngine) {
+            this.state.graphEngine = graphEngine;
+            this.state.graphEngine.run();
+            // added or removed a node, or in general something layout related changed
+            this.state.graphEngine.addEventListener('onLayoutChange', this.forceUpdate);
+        }
+    }
+    _removeGraphEngine() {
+        if (this.state.graphEngine) {
+            this.state.graphEngine.removeEventListener('onLayoutChange', this.forceUpdate);
+            this.state.graphEngine.clear();
+            this.state.graphEngine = null;
+        }
     }
     createNodeLayers() {
-        const { engine, nodeStyle } = this.props;
-        if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+        const engine = this.state.graphEngine;
+        const { nodeStyle } = this.props;
+        if (!engine || !nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
             return [];
         }
         return nodeStyle.filter(Boolean).map((style, idx) => {
@@ -121,8 +164,9 @@ export class GraphLayer extends CompositeLayer {
         });
     }
     createEdgeLayers() {
-        const { edgeStyle, engine } = this.props;
-        if (!edgeStyle) {
+        const engine = this.state.graphEngine;
+        const { edgeStyle } = this.props;
+        if (!engine || !edgeStyle) {
             return [];
         }
         return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle])
@@ -189,5 +233,3 @@ export class GraphLayer extends CompositeLayer {
         return [this.createEdgeLayers(), this.createNodeLayers()];
     }
 }
-GraphLayer.layerName = 'GraphLayer';
-GraphLayer.defaultProps = defaultProps;

package/dist/layers/node-layers/{path-rounded-rectange-layer.d.ts → path-rounded-rectangle-layer.d.ts}

@@ -4,4 +4,4 @@ export declare class PathBasedRoundedRectangleLayer extends CompositeLayer {
     static layerName: string;
     renderLayers(): PolygonLayer<any, {}>[];
 }
-//# sourceMappingURL=path-rounded-rectange-layer.d.ts.map
+//# sourceMappingURL=path-rounded-rectangle-layer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path-rounded-rectangle-layer.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/path-rounded-rectangle-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAa7C,qBAAa,8BAA+B,SAAQ,cAAc;IAChE,MAAM,CAAC,SAAS,SAAoC;IAEpD,YAAY;CAkCb"}

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

@@ -1,2 +1,2 @@
-export declare const fs = "#define SHADER_NAME rounded-rectangle-layer-fragment-shader\n\nprecision highp float;\n\nuniform float cornerRadius;\n\nvarying vec4 vFillColor;\nvarying vec2 unitPosition;\n\nvoid main(void) {\n\n  float distToCenter = length(unitPosition);\n\n  /* Calculate the cutoff radius for the rounded corners */\n  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;\n  if (distToCenter <= threshold) {\n    gl_FragColor = vFillColor;\n  } else {\n    discard;\n  }\n\n  gl_FragColor = picking_filterHighlightColor(gl_FragColor);\n\n  gl_FragColor = picking_filterPickingColor(gl_FragColor);\n}\n";
+export declare const fs = "#define SHADER_NAME rounded-rectangle-layer-fragment-shader\n\nprecision highp float;\n\nvarying vec4 vFillColor;\nvarying vec2 unitPosition;\n\nvoid main(void) {\n\n  float distToCenter = length(unitPosition);\n\n  /* Calculate the cutoff radius for the rounded corners */\n  float threshold = sqrt(2.0) * (1.0 - roundedRectangle.cornerRadius) + 1.0 * roundedRectangle.cornerRadius;\n  if (distToCenter <= threshold) {\n    gl_FragColor = vFillColor;\n  } else {\n    discard;\n  }\n\n  gl_FragColor = picking_filterHighlightColor(gl_FragColor);\n\n  gl_FragColor = picking_filterPickingColor(gl_FragColor);\n}\n";
 //# sourceMappingURL=rounded-rectangle-layer-fragment.d.ts.map

package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rounded-rectangle-layer-fragment.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/rounded-rectangle-layer-fragment.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE,umBA0Bd,CAAC"}
+{"version":3,"file":"rounded-rectangle-layer-fragment.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/rounded-rectangle-layer-fragment.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE,0mBAwBd,CAAC"}

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

@@ -6,8 +6,6 @@ export const fs = /* glsl */ `\
 
 precision highp float;
 
-uniform float cornerRadius;
-
 varying vec4 vFillColor;
 varying vec2 unitPosition;
 
@@ -16,7 +14,7 @@ void main(void) {
   float distToCenter = length(unitPosition);
 
   /* Calculate the cutoff radius for the rounded corners */
-  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;
+  float threshold = sqrt(2.0) * (1.0 - roundedRectangle.cornerRadius) + 1.0 * roundedRectangle.cornerRadius;
   if (distToCenter <= threshold) {
     gl_FragColor = vFillColor;
   } else {

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

@@ -1,9 +1,18 @@
 import { RectangleLayer } from "./rectangle-layer.js";
+export type RoundedRectangleProps = {
+    cornerRadius: number;
+};
+export declare const roundedRectangleUniforms: {
+    readonly name: "roundedRectangle";
+    readonly vs: "uniform roundedRectangleUniforms {\n  float cornerRadius;\n} roundedRectangle;\n";
+    readonly fs: "uniform roundedRectangleUniforms {\n  float cornerRadius;\n} roundedRectangle;\n";
+    readonly uniformTypes: {
+        readonly cornerRadius: "f32";
+    };
+};
 export declare class RoundedRectangleLayer extends RectangleLayer {
     static layerName: string;
-    draw({ uniforms }: {
-        uniforms: any;
-    }): void;
+    draw(props: any): void;
     getShaders(): any;
 }
 //# sourceMappingURL=rounded-rectangle-layer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rounded-rectangle-layer.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/rounded-rectangle-layer.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAC,6BAA0B;AAEjD,qBAAa,qBAAsB,SAAQ,cAAc;IACvD,MAAM,CAAC,SAAS,SAA2B;IAC3C,IAAI,CAAC,EAAC,QAAQ,EAAC;;KAAA;IASf,UAAU;CAMX"}
+{"version":3,"file":"rounded-rectangle-layer.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/rounded-rectangle-layer.ts"],"names":[],"mappings":"AAQA,OAAO,EAAC,cAAc,EAAC,6BAA0B;AAQjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;CAOmB,CAAC;AAEzD,qBAAa,qBAAsB,SAAQ,cAAc;IACvD,MAAM,CAAC,SAAS,SAA2B;IAE3C,IAAI,CAAC,KAAK,KAAA;IAQV,UAAU;CASX"}

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

@@ -1,24 +1,38 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-// import {ScatterplotLayer} from '@deck.gl/layers';
 import { fs } from "./rounded-rectangle-layer-fragment.js";
 import { RectangleLayer } from "./rectangle-layer.js";
+const uniformBlock = `\
+uniform roundedRectangleUniforms {
+  float cornerRadius;
+} roundedRectangle;
+`;
+export const roundedRectangleUniforms = {
+    name: 'roundedRectangle',
+    vs: uniformBlock,
+    fs: uniformBlock,
+    uniformTypes: {
+        cornerRadius: 'f32'
+    }
+};
 export class RoundedRectangleLayer extends RectangleLayer {
     static layerName = 'RoundedRectangleLayer';
-    draw({ uniforms }) {
-        super.draw({
-            uniforms: {
-                ...uniforms,
-                cornerRadius: this.props.cornerRadius
-            }
-        });
+    draw(props) {
+        const { cornerRadius } = this.props;
+        const roundedRectangleProps = { cornerRadius };
+        const model = this.state.model;
+        model.shaderInputs.setProps({ roundedRectangle: roundedRectangleProps });
+        super.draw(props);
     }
     getShaders() {
         // use object.assign to make sure we don't overwrite existing fields like `vs`, `modules`...
-        return Object.assign({}, super.getShaders(undefined), {
-            fs
-        });
+        const shaders = super.getShaders(undefined);
+        return {
+            ...shaders,
+            fs,
+            modules: [...shaders.modules, roundedRectangleUniforms]
+        };
     }
 }
 RoundedRectangleLayer.defaultProps = {

package/dist/layouts/d3-force/d3-force-layout.d.ts

@@ -1,10 +1,19 @@
-import { BaseLayout } from "../../core/base-layout.js";
-export declare class D3ForceLayout extends BaseLayout {
+import { GraphLayout, GraphLayoutOptions } from "../../core/graph-layout.js";
+export type D3ForceLayoutOptions = GraphLayoutOptions & {
+    alpha?: number;
+    resumeAlpha?: number;
+    nBodyStrength?: number;
+    nBodyDistanceMin?: number;
+    nBodyDistanceMax?: number;
+    getCollisionRadius?: number;
+};
+export declare class D3ForceLayout extends GraphLayout<D3ForceLayoutOptions> {
+    static defaultOptions: Required<D3ForceLayoutOptions>;
     protected readonly _name = "D3";
     private _positionsByNodeId;
     private _graph;
     private _worker;
-    constructor(options: any);
+    constructor(options?: D3ForceLayoutOptions);
     initializeGraph(graph: any): void;
     updateGraph(graph: any): void;
     start(): void;

package/dist/layouts/d3-force/d3-force-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"d3-force-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/d3-force/d3-force-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,kCAA+B;AAalD,qBAAa,aAAc,SAAQ,UAAU;IAC3C,SAAS,CAAC,QAAQ,CAAC,KAAK,QAAQ;IAChC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,OAAO,CAAM;gBACT,OAAO,KAAA;IASnB,eAAe,CAAC,KAAK,KAAA;IAKrB,WAAW,CAAC,KAAK,KAAA;IAQjB,KAAK;IAML,MAAM;IAIN,aAAa;IAuCb,MAAM;IAIN,IAAI;IAIJ,eAAe;;;;;MAab;IAEF,eAAe,qBAOb;IAEF,gBAAgB,sCAYd;IAEF,kBAAkB,sBAIhB;CACH"}
+{"version":3,"file":"d3-force-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/d3-force/d3-force-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,mCAAgC;AAIxE,MAAM,MAAM,oBAAoB,GAAG,kBAAkB,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,qBAAa,aAAc,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IAClE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAOnD;IAEF,SAAS,CAAC,QAAQ,CAAC,KAAK,QAAQ;IAChC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,OAAO,CAAM;gBAET,OAAO,CAAC,EAAE,oBAAoB;IAS1C,eAAe,CAAC,KAAK,KAAA;IAKrB,WAAW,CAAC,KAAK,KAAA;IAQjB,KAAK;IAML,MAAM;IAIN,aAAa;IAuCb,MAAM;IAIN,IAAI;IAIJ,eAAe;;;;;MAab;IAEF,eAAe,qBAOb;IAEF,gBAAgB,sCAYd;IAEF,kBAAkB,sBAIhB;CACH"}

package/dist/layouts/d3-force/d3-force-layout.js

@@ -1,17 +1,17 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { BaseLayout } from "../../core/base-layout.js";
+import { GraphLayout } from "../../core/graph-layout.js";
 import { EDGE_TYPE } from "../../core/constants.js";
-const defaultOptions = {
-    alpha: 0.3,
-    resumeAlpha: 0.1,
-    nBodyStrength: -900,
-    nBodyDistanceMin: 100,
-    nBodyDistanceMax: 400,
-    getCollisionRadius: 0
-};
-export class D3ForceLayout extends BaseLayout {
+export class D3ForceLayout extends GraphLayout {
+    static defaultOptions = {
+        alpha: 0.3,
+        resumeAlpha: 0.1,
+        nBodyStrength: -900,
+        nBodyDistanceMin: 100,
+        nBodyDistanceMax: 400,
+        getCollisionRadius: 0
+    };
     _name = 'D3';
     _positionsByNodeId = new Map();
     _graph;
@@ -19,7 +19,7 @@ export class D3ForceLayout extends BaseLayout {
     constructor(options) {
         super(options);
         this._options = {
-            ...defaultOptions,
+            ...D3ForceLayout.defaultOptions,
             ...options
         };
     }

package/dist/layouts/d3-force/worker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../../src/layouts/d3-force/worker.ts"],"names":[],"mappings":""}
+{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../../src/layouts/d3-force/worker.js"],"names":[],"mappings":""}

package/dist/layouts/experimental/force-multi-graph-layout.d.ts

@@ -0,0 +1,43 @@
+import { GraphLayout, GraphLayoutOptions } from "../../core/graph-layout.js";
+import { Node } from "../../graph/node.js";
+import { Graph } from "../../graph/graph.js";
+export type ForceMultiGraphLayoutOptions = GraphLayoutOptions & {
+    alpha?: number;
+    nBodyStrength?: number;
+    nBodyDistanceMin?: number;
+    nBodyDistanceMax?: number;
+};
+export declare class ForceMultiGraphLayout extends GraphLayout<ForceMultiGraphLayoutOptions> {
+    static defaultOptions: {
+        alpha: number;
+        nBodyStrength: number;
+        nBodyDistanceMin: number;
+        nBodyDistanceMax: number;
+    };
+    _name: string;
+    _graph: Graph;
+    _d3Graph: {
+        nodes: any[];
+        edges: any[];
+    };
+    _nodeMap: {};
+    _edgeMap: {};
+    _simulator: any;
+    constructor(options?: ForceMultiGraphLayoutOptions);
+    initializeGraph(graph: Graph): void;
+    _strength: (d3Edge: any) => number;
+    _generateSimulator(): void;
+    start(): void;
+    resume(): void;
+    stop(): void;
+    updateGraph(graph: any): void;
+    getNodePosition: (node: Node) => [number, number];
+    getEdgePosition: (edge: any) => {
+        type: string;
+        sourcePosition: any[];
+        targetPosition: any[];
+        controlPoints: number[][];
+    };
+    lockNodePosition: (node: any, x: any, y: any) => void;
+}
+//# sourceMappingURL=force-multi-graph-layout.d.ts.map

package/dist/layouts/experimental/force-multi-graph-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"force-multi-graph-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/experimental/force-multi-graph-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,mCAAgC;AACxE,OAAO,EAAC,IAAI,EAAC,4BAAyB;AAEtC,OAAO,EAAC,KAAK,EAAC,6BAA0B;AAGxC,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,qBAAa,qBAAsB,SAAQ,WAAW,CAAC,4BAA4B,CAAC;IAClF,MAAM,CAAC,cAAc;;;;;MAKnB;IAEF,KAAK,SAA2B;IAChC,MAAM,EAAE,KAAK,CAAC;IAId,QAAQ;;;MAA0B;IAClC,QAAQ,KAAM;IACd,QAAQ,KAAM;IACd,UAAU,MAAC;gBAEC,OAAO,GAAE,4BAAiC;IAQtD,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,0BAOP;IAEF,kBAAkB;IA+BlB,KAAK;IAKL,MAAM;IAIN,IAAI;IAIJ,WAAW,CAAC,KAAK,KAAA;IAkFjB,eAAe,SAAU,IAAI,KAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAO9C;IAEF,eAAe;;;;;MA8Cb;IAEF,gBAAgB,sCAMd;CACH"}