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

package/dist/layouts/experimental/force-multi-graph-layout.js

@@ -0,0 +1,226 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { GraphLayout } from "../../core/graph-layout.js";
+import { EDGE_TYPE } from "../../core/constants.js";
+import * as d3 from 'd3-force';
+export class ForceMultiGraphLayout extends GraphLayout {
+    static defaultOptions = {
+        alpha: 3,
+        nBodyStrength: -1200,
+        nBodyDistanceMin: 100,
+        nBodyDistanceMax: 1400
+    };
+    _name = 'ForceMultiGraphLayout';
+    _graph;
+    // d3 part
+    // custom graph data
+    _d3Graph = { nodes: [], edges: [] };
+    _nodeMap = {};
+    _edgeMap = {};
+    _simulator;
+    constructor(options = {}) {
+        super(options);
+        this._options = {
+            ...ForceMultiGraphLayout.defaultOptions,
+            ...options
+        };
+    }
+    initializeGraph(graph) {
+        this.updateGraph(graph);
+    }
+    _strength = (d3Edge) => {
+        if (d3Edge.isVirtual) {
+            return 1 / d3Edge.edgeCount;
+        }
+        const sourceDegree = this._graph.getDegree(d3Edge.source.id);
+        const targetDegree = this._graph.getDegree(d3Edge.target.id);
+        return 1 / Math.min(sourceDegree, targetDegree);
+    };
+    _generateSimulator() {
+        if (this._simulator) {
+            this._simulator.on('tick', null).on('end', null);
+            this._simulator = null;
+        }
+        const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax } = this._options;
+        const g = this._d3Graph;
+        this._simulator = d3
+            .forceSimulation(g.nodes)
+            .force('edge', d3
+            .forceLink(g.edges)
+            .id((n) => n.id)
+            .strength(this._strength))
+            .force('charge', d3
+            .forceManyBody()
+            .strength(nBodyStrength)
+            .distanceMin(nBodyDistanceMin)
+            .distanceMax(nBodyDistanceMax))
+            .force('center', d3.forceCenter())
+            .alpha(alpha);
+        // register event callbacks
+        this._simulator.on('tick', this._onLayoutChange).on('end', this._onLayoutDone);
+    }
+    start() {
+        this._generateSimulator();
+        this._simulator.restart();
+    }
+    resume() {
+        this._simulator.restart();
+    }
+    stop() {
+        this._simulator.stop();
+    }
+    updateGraph(graph) {
+        this._graph = graph;
+        // nodes
+        const newNodeMap = {};
+        const newD3Nodes = graph.getNodes().map((node) => {
+            const oldD3Node = this._nodeMap[node.id];
+            const newD3Node = oldD3Node ? oldD3Node : { id: node.id };
+            newNodeMap[node.id] = newD3Node;
+            return newD3Node;
+        });
+        // edges
+        // bucket edges between the same source/target node pairs.
+        const nodePairs = graph.getEdges().reduce((res, edge) => {
+            const nodes = [edge.getSourceNodeId(), edge.getTargetNodeId()];
+            // sort the node ids to count the edges with the same pair
+            // but different direction (a -> b or b -> a)
+            const pairId = nodes.sort().toString();
+            // push this edge into the bucket
+            if (!res[pairId]) {
+                res[pairId] = [edge];
+            }
+            else {
+                res[pairId].push(edge);
+            }
+            return res;
+        }, {});
+        // go through each pair of edges,
+        // if only one edge between two nodes, create a straight line
+        // otherwise, create one virtual node and two edges for each edge
+        const newD3Edges = [];
+        const newEdgeMap = {};
+        Object.keys(nodePairs).forEach((pairId) => {
+            const betweenEdges = nodePairs[pairId];
+            const firstEdge = betweenEdges[0];
+            if (betweenEdges.length === 1) {
+                // do nothing, this is a real edge
+                const newD3Edge = {
+                    type: EDGE_TYPE.LINE,
+                    id: firstEdge.getId(),
+                    source: newNodeMap[firstEdge.getSourceNodeId()],
+                    target: newNodeMap[firstEdge.getTargetNodeId()],
+                    isVirtual: false
+                };
+                newEdgeMap[firstEdge.getId()] = newD3Edge;
+                newD3Edges.push(newD3Edge);
+                return;
+            }
+            // else reduce to one virtual edge
+            const newD3Edge = {
+                type: EDGE_TYPE.LINE,
+                id: pairId,
+                source: newNodeMap[firstEdge.getSourceNodeId()],
+                target: newNodeMap[firstEdge.getTargetNodeId()],
+                isVirtual: true,
+                edgeCount: betweenEdges.length
+            };
+            newEdgeMap[pairId] = newD3Edge;
+            newD3Edges.push(newD3Edge);
+            betweenEdges.forEach((e, idx) => {
+                newEdgeMap[e.id] = {
+                    type: EDGE_TYPE.SPLINE_CURVE,
+                    id: e.id,
+                    source: newNodeMap[e.getSourceNodeId()],
+                    target: newNodeMap[e.getTargetNodeId()],
+                    virtualEdgeId: pairId,
+                    isVirtual: true,
+                    index: idx
+                };
+            });
+        });
+        this._nodeMap = newNodeMap;
+        this._d3Graph.nodes = newD3Nodes;
+        this._edgeMap = newEdgeMap;
+        this._d3Graph.edges = newD3Edges;
+    }
+    getNodePosition = (node) => {
+        const d3Node = this._nodeMap[node.id];
+        if (d3Node) {
+            return [d3Node.x, d3Node.y];
+        }
+        // default value
+        return [0, 0];
+    };
+    getEdgePosition = (edge) => {
+        const d3Edge = this._edgeMap[edge.id];
+        if (d3Edge) {
+            if (!d3Edge.isVirtual) {
+                return {
+                    type: EDGE_TYPE.LINE,
+                    sourcePosition: [d3Edge.source.x, d3Edge.source.y],
+                    targetPosition: [d3Edge.target.x, d3Edge.target.y],
+                    controlPoints: []
+                };
+            }
+            // else, check the referenced virtual edge
+            const virtualEdge = this._edgeMap[d3Edge.virtualEdgeId];
+            const edgeCount = virtualEdge.edgeCount;
+            // get the position of source and target nodes
+            const sourcePosition = [virtualEdge.source.x, virtualEdge.source.y];
+            const targetPosition = [virtualEdge.target.x, virtualEdge.target.y];
+            // calculate a symmetric curve
+            const distance = Math.hypot(sourcePosition[0] - targetPosition[0], sourcePosition[1] - targetPosition[1]);
+            const index = d3Edge.index;
+            // curve direction: inward vs. outward
+            const direction = index % 2 ? 1 : -1;
+            // if the number of the parallel edges is an even number => symmetric shape
+            // otherwise, the 0th node will be a staight line, and rest of them are symmetrical.
+            const symmetricShape = edgeCount % 2 === 0;
+            const offset = Math.max(distance / 10, 5) *
+                (symmetricShape ? Math.floor(index / 2 + 1) : Math.ceil(index / 2));
+            const controlPoint = computeControlPoint(sourcePosition, targetPosition, direction, offset);
+            return {
+                type: EDGE_TYPE.SPLINE_CURVE,
+                sourcePosition,
+                targetPosition,
+                controlPoints: [controlPoint]
+            };
+        }
+        // default value
+        return {
+            type: EDGE_TYPE.LINE,
+            sourcePosition: [0, 0],
+            targetPosition: [0, 0],
+            controlPoints: []
+        };
+    };
+    lockNodePosition = (node, x, y) => {
+        const d3Node = this._nodeMap[node.id];
+        d3Node.x = x;
+        d3Node.y = y;
+        this._onLayoutChange();
+        this._onLayoutDone();
+    };
+}
+/**
+ * A helper function to compute the control point of a curve
+ * @param  {number[]} source  - the coordinates of source point, ex: [x, y, z]
+ * @param  {number[]} target  - the coordinates of target point, ex: [x, y, z]
+ * @param  {number} direction - the direction of the curve, 1 or -1
+ * @param  {number} offset    - offset from the midpoint
+ * @return {number[]}         - the coordinates of the control point
+ */
+function computeControlPoint(source, target, direction, offset) {
+    const midPoint = [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2];
+    const dx = target[0] - source[0];
+    const dy = target[1] - source[1];
+    const normal = [dy, -dx];
+    const length = Math.sqrt(Math.pow(normal[0], 2.0) + Math.pow(normal[1], 2.0));
+    const normalized = [normal[0] / length, normal[1] / length];
+    return [
+        midPoint[0] + normalized[0] * offset * direction,
+        midPoint[1] + normalized[1] * offset * direction
+    ];
+}

package/dist/layouts/experimental/hive-plot-layout.d.ts

@@ -0,0 +1,34 @@
+import { GraphLayout, GraphLayoutOptions } from "../../core/graph-layout.js";
+import { Node } from "../../graph/node.js";
+import { Graph } from "../../graph/graph.js";
+export type HivePlotLayoutOptions = GraphLayoutOptions & {
+    innerRadius?: number;
+    outerRadius?: number;
+    getNodeAxis?: (node: Node) => any;
+};
+export declare class HivePlotLayout extends GraphLayout<HivePlotLayoutOptions> {
+    static defaultOptions: {
+        readonly innerRadius: 100;
+        readonly outerRadius: 500;
+        readonly getNodeAxis: (node: Node) => unknown;
+    };
+    _name: string;
+    _graph: Graph;
+    _totalAxis: number;
+    _axis: Record<string, any>;
+    _nodeMap: {};
+    _nodePositionMap: {};
+    constructor(options?: HivePlotLayoutOptions);
+    initializeGraph(graph: Graph): void;
+    updateGraph(graph: any): void;
+    start(): void;
+    getNodePosition: (node: any) => any;
+    getEdgePosition: (edge: any) => {
+        type: string;
+        sourcePosition: any;
+        targetPosition: any;
+        controlPoints: [number, number][];
+    };
+    lockNodePosition: (node: any, x: any, y: any) => void;
+}
+//# sourceMappingURL=hive-plot-layout.d.ts.map

package/dist/layouts/experimental/hive-plot-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hive-plot-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/experimental/hive-plot-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,mCAAgC;AACxE,OAAO,EAAC,IAAI,EAAC,4BAAyB;AAEtC,OAAO,EAAC,KAAK,EAAC,6BAA0B;AAExC,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,GAAG;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC;CACnC,CAAC;AAEF,qBAAa,cAAe,SAAQ,WAAW,CAAC,qBAAqB,CAAC;IACpE,MAAM,CAAC,cAAc;;;qCAGC,IAAI;MACqC;IAE/D,KAAK,SAAc;IACnB,MAAM,EAAE,KAAK,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,QAAQ,KAAM;IACd,gBAAgB,KAAM;gBAEV,OAAO,GAAE,qBAA0B;IAQ/C,eAAe,CAAC,KAAK,EAAE,KAAK;IAI5B,WAAW,CAAC,KAAK,KAAA;IAsDjB,KAAK;IAKL,eAAe,qBAAiD;IAEhE,eAAe;;;;;MAqCb;IAEF,gBAAgB,sCAId;CACH"}

package/dist/layouts/experimental/hive-plot-layout.js

@@ -0,0 +1,142 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { GraphLayout } from "../../core/graph-layout.js";
+import { EDGE_TYPE } from "../../core/constants.js";
+export class HivePlotLayout extends GraphLayout {
+    static defaultOptions = {
+        innerRadius: 100,
+        outerRadius: 500,
+        getNodeAxis: (node) => node.getPropertyValue('group')
+    };
+    _name = 'HivePlot';
+    _graph;
+    _totalAxis;
+    _axis;
+    _nodeMap = {};
+    _nodePositionMap = {};
+    constructor(options = {}) {
+        super(options);
+        this._options = {
+            ...HivePlotLayout.defaultOptions,
+            ...options
+        };
+    }
+    initializeGraph(graph) {
+        this.updateGraph(graph);
+    }
+    updateGraph(graph) {
+        const { getNodeAxis, innerRadius, outerRadius } = this._options;
+        this._graph = graph;
+        this._nodeMap = graph.getNodes().reduce((res, node) => {
+            res[node.getId()] = node;
+            return res;
+        }, {});
+        // bucket nodes into few axis
+        this._axis = graph.getNodes().reduce((res, node) => {
+            const axis = getNodeAxis(node);
+            if (!res[axis]) {
+                res[axis] = [];
+            }
+            res[axis].push(node);
+            return res;
+        }, {});
+        // sort nodes along the same axis by degree
+        this._axis = Object.keys(this._axis).reduce((res, axis) => {
+            const bucketedNodes = this._axis[axis];
+            const sortedNodes = bucketedNodes.sort((a, b) => {
+                if (a.getDegree() > b.getDegree()) {
+                    return 1;
+                }
+                if (a.getDegree() === b.getDegree()) {
+                    return 0;
+                }
+                return -1;
+            });
+            res[axis] = sortedNodes;
+            return res;
+        }, {});
+        this._totalAxis = Object.keys(this._axis).length;
+        const center = [0, 0];
+        const angleInterval = 360 / Object.keys(this._axis).length;
+        // calculate positions
+        this._nodePositionMap = Object.keys(this._axis).reduce((res, axis, axisIdx) => {
+            const axisAngle = angleInterval * axisIdx;
+            const bucketedNodes = this._axis[axis];
+            const interval = (outerRadius - innerRadius) / bucketedNodes.length;
+            bucketedNodes.forEach((node, idx) => {
+                const radius = innerRadius + idx * interval;
+                const x = Math.cos((axisAngle / 180) * Math.PI) * radius + center[0];
+                const y = Math.sin((axisAngle / 180) * Math.PI) * radius + center[1];
+                res[node.getId()] = [x, y];
+            });
+            return res;
+        }, {});
+    }
+    start() {
+        this._onLayoutChange();
+        this._onLayoutDone();
+    }
+    getNodePosition = (node) => this._nodePositionMap[node.getId()];
+    getEdgePosition = (edge) => {
+        const { getNodeAxis } = this._options;
+        const sourceNodeId = edge.getSourceNodeId();
+        const targetNodeId = edge.getTargetNodeId();
+        const sourcePosition = this._nodePositionMap[sourceNodeId];
+        const targetPosition = this._nodePositionMap[targetNodeId];
+        const sourceNode = this._nodeMap[sourceNodeId];
+        const targetNode = this._nodeMap[targetNodeId];
+        const sourceNodeAxis = getNodeAxis(sourceNode);
+        const targetNodeAxis = getNodeAxis(targetNode);
+        if (sourceNodeAxis === targetNodeAxis) {
+            return {
+                type: EDGE_TYPE.LINE,
+                sourcePosition,
+                targetPosition,
+                controlPoints: []
+            };
+        }
+        const controlPoint = computeControlPoint({
+            sourcePosition,
+            sourceNodeAxis,
+            targetPosition,
+            targetNodeAxis,
+            totalAxis: this._totalAxis
+        });
+        return {
+            type: EDGE_TYPE.SPLINE_CURVE,
+            sourcePosition,
+            targetPosition,
+            controlPoints: [controlPoint]
+        };
+    };
+    lockNodePosition = (node, x, y) => {
+        this._nodePositionMap[node.id] = [x, y];
+        this._onLayoutChange();
+        this._onLayoutDone();
+    };
+}
+function computeControlPoint({ sourcePosition, sourceNodeAxis, targetPosition, targetNodeAxis, totalAxis }) {
+    const halfAxis = (totalAxis - 1) / 2;
+    // check whether the source/target are at the same side.
+    const sameSide = (sourceNodeAxis <= halfAxis && targetNodeAxis <= halfAxis) ||
+        (sourceNodeAxis > halfAxis && targetNodeAxis > halfAxis);
+    // curve direction
+    const direction = sameSide && sourceNodeAxis <= halfAxis && targetNodeAxis <= halfAxis ? 1 : -1;
+    // flip the source/target to follow the clockwise diretion
+    const source = sourceNodeAxis < targetNodeAxis && sameSide ? sourcePosition : targetPosition;
+    const target = sourceNodeAxis < targetNodeAxis && sameSide ? targetPosition : sourcePosition;
+    // calculate offset
+    const distance = Math.hypot(source[0] - target[0], source[1] - target[1]);
+    const offset = distance * 0.2;
+    const midPoint = [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2];
+    const dx = target[0] - source[0];
+    const dy = target[1] - source[1];
+    const normal = [dy, -dx];
+    const length = Math.hypot(dy, -dx);
+    const normalized = [normal[0] / length, normal[1] / length];
+    return [
+        midPoint[0] + normalized[0] * offset * direction,
+        midPoint[1] + normalized[1] * offset * direction
+    ];
+}

package/dist/layouts/experimental/radial-layout.d.ts

@@ -0,0 +1,28 @@
+import { GraphLayout, GraphLayoutOptions } from "../../core/graph-layout.js";
+import { Graph } from "../../graph/graph.js";
+export type RadialLayoutOptions = GraphLayoutOptions & {
+    radius?: number;
+    tree?: any;
+};
+export declare class RadialLayout extends GraphLayout<RadialLayoutOptions> {
+    static defaultOptions: {
+        radius: number;
+    };
+    _name: string;
+    _graph: Graph;
+    _hierarchicalPoints: {};
+    nestedTree: any;
+    constructor(options?: RadialLayoutOptions);
+    initializeGraph(graph: Graph): void;
+    updateGraph(graph: Graph): void;
+    start(): void;
+    getNodePosition: (node: any) => any;
+    getEdgePosition: (edge: any) => {
+        type: string;
+        sourcePosition: any;
+        targetPosition: any;
+        controlPoints: any[];
+    };
+    lockNodePosition: (node: any, x: any, y: any) => void;
+}
+//# sourceMappingURL=radial-layout.d.ts.map

package/dist/layouts/experimental/radial-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/experimental/radial-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,mCAAgC;AAGxE,OAAO,EAAC,KAAK,EAAC,6BAA0B;AAExC,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AA2CF,qBAAa,YAAa,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAChE,MAAM,CAAC,cAAc;;MAEnB;IAEF,KAAK,SAAkB;IACvB,MAAM,EAAE,KAAK,CAAQ;IAErB,mBAAmB,KAAM;IACzB,UAAU,MAAC;gBAEC,OAAO,GAAE,mBAAwB;IAQ7C,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAInC,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAI/B,KAAK,IAAI,IAAI;IAsEb,eAAe,qBAEb;IAGF,eAAe;;;;;MAoCb;IAEF,gBAAgB,sCAId;CACH"}

package/dist/layouts/experimental/radial-layout.js

@@ -0,0 +1,164 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { GraphLayout } from "../../core/graph-layout.js";
+import { EDGE_TYPE } from "../../core/constants.js";
+const traverseTree = (nodeId, nodeMap) => {
+    const node = nodeMap[nodeId];
+    if (node.isLeaf) {
+        return node;
+    }
+    return {
+        ...node,
+        children: node.children.map((nid) => traverseTree(nid, nodeMap))
+    };
+};
+const getLeafNodeCount = (node, count) => {
+    if (!node.children || node.children.length === 0) {
+        return count + 1;
+    }
+    const sum = node.children.reduce((res, c) => {
+        return res + getLeafNodeCount(c, 0);
+    }, 0);
+    return count + sum;
+};
+const getTreeDepth = (node, depth = 0) => {
+    if (node.isLeaf) {
+        return depth;
+    }
+    return getTreeDepth(node.children[0], depth + 1);
+};
+const getPath = (node, targetId, path) => {
+    if (node.id === targetId) {
+        path.push(node.id);
+        return true;
+    }
+    const inChildren = node.children && node.children.some((c) => getPath(c, targetId, path));
+    if (inChildren) {
+        path.push(node.id);
+        return true;
+    }
+    return false;
+};
+export class RadialLayout extends GraphLayout {
+    static defaultOptions = {
+        radius: 500
+    };
+    _name = 'RadialLayout';
+    _graph = null;
+    // custom layout data structure
+    _hierarchicalPoints = {};
+    nestedTree;
+    constructor(options = {}) {
+        super(options);
+        this._options = {
+            ...RadialLayout.defaultOptions,
+            ...options
+        };
+    }
+    initializeGraph(graph) {
+        this.updateGraph(graph);
+    }
+    updateGraph(graph) {
+        this._graph = graph;
+    }
+    start() {
+        const nodeCount = this._graph.getNodes().length;
+        if (nodeCount === 0) {
+            return;
+        }
+        const { tree } = this._options;
+        if (!tree || tree.length === 0) {
+            return;
+        }
+        const { radius } = this._options;
+        const unitAngle = 360 / nodeCount;
+        // hierarchical positions
+        const rootNode = tree[0];
+        const nodeMap = tree.reduce((res, node) => {
+            res[node.id] = {
+                ...node,
+                isLeaf: !node.children || node.children.length === 0
+            };
+            return res;
+        }, {});
+        // nested structure
+        this.nestedTree = traverseTree(rootNode.id, nodeMap);
+        const totalLevels = getTreeDepth(this.nestedTree, 0);
+        const distanceBetweenLevels = radius / (totalLevels - 1);
+        const calculatePosition = (node, level, startAngle, positionMap) => {
+            const isRoot = node.id === rootNode.id;
+            if (node.children && node.children.length !== 0) {
+                const groupSize = getLeafNodeCount(node, 0);
+                // center the pos
+                positionMap[node.id] = isRoot
+                    ? [0, 0]
+                    : rotate(0, 0, 0, distanceBetweenLevels * (level + 1), startAngle + unitAngle * (groupSize / 2));
+                // calculate children position
+                let tempAngle = startAngle;
+                node.children.forEach((n) => {
+                    calculatePosition(n, level + 1, tempAngle, positionMap);
+                    tempAngle += getLeafNodeCount(n, 0) * unitAngle;
+                });
+            }
+            else {
+                positionMap[node.id] = rotate(0, 0, 0, distanceBetweenLevels * (level + 1), startAngle + unitAngle);
+            }
+        };
+        this._hierarchicalPoints = {};
+        calculatePosition(this.nestedTree, 0, 0, this._hierarchicalPoints);
+        // layout completes: notifiy component to re-render
+        this._onLayoutChange();
+        this._onLayoutDone();
+    }
+    getNodePosition = (node) => {
+        return this._hierarchicalPoints[node.id];
+    };
+    // spline curve version
+    getEdgePosition = (edge) => {
+        const sourceNodeId = edge.getSourceNodeId();
+        const targetNodeId = edge.getTargetNodeId();
+        const sourceNodePos = this._hierarchicalPoints[sourceNodeId];
+        const targetNodePos = this._hierarchicalPoints[targetNodeId];
+        const sourcePath = [];
+        getPath(this.nestedTree, sourceNodeId, sourcePath);
+        const targetPath = [];
+        getPath(this.nestedTree, targetNodeId, targetPath);
+        const totalLevels = sourcePath.length;
+        let commonAncestorLevel = totalLevels - 1; // root
+        for (let i = 0; i < totalLevels; i++) {
+            if (sourcePath[i] === targetPath[i]) {
+                commonAncestorLevel = i;
+                break;
+            }
+        }
+        const wayPoints = [];
+        for (let i = 1; i <= commonAncestorLevel; i++) {
+            const nodeId = sourcePath[i];
+            wayPoints.push(this._hierarchicalPoints[nodeId]);
+        }
+        for (let i = commonAncestorLevel - 1; i > 0; i--) {
+            const nodeId = targetPath[i];
+            wayPoints.push(this._hierarchicalPoints[nodeId]);
+        }
+        return {
+            type: EDGE_TYPE.SPLINE_CURVE,
+            sourcePosition: sourceNodePos,
+            targetPosition: targetNodePos,
+            controlPoints: wayPoints
+        };
+    };
+    lockNodePosition = (node, x, y) => {
+        this._hierarchicalPoints[node.id] = [x, y];
+        this._onLayoutChange();
+        this._onLayoutDone();
+    };
+}
+function rotate(cx, cy, x, y, angle) {
+    const radians = (Math.PI / 180) * angle;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const nx = cos * (x - cx) + sin * (y - cy) + cx;
+    const ny = cos * (y - cy) - sin * (x - cx) + cy;
+    return [nx, ny];
+}

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

@@ -1,5 +1,17 @@
-import { BaseLayout } from "../../core/base-layout.js";
-export declare class GPUForceLayout extends BaseLayout {
+import { GraphLayout, GraphLayoutOptions } from "../../core/graph-layout.js";
+export type GPUForceLayoutOptions = GraphLayoutOptions & {
+    alpha?: number;
+    resumeAlpha?: number;
+    nBodyStrength?: number;
+    nBodyDistanceMin?: number;
+    nBodyDistanceMax?: number;
+    getCollisionRadius?: number;
+};
+/**
+ * @todo this layout should be updated with the organizational and logic improvements made in d3-force
+ */
+export declare class GPUForceLayout extends GraphLayout<GPUForceLayoutOptions> {
+    static defaultOptions: Required<GPUForceLayoutOptions>;
     protected readonly _name: string;
     private _d3Graph;
     private _nodeMap;
@@ -7,7 +19,7 @@ export declare class GPUForceLayout extends BaseLayout {
     private _graph;
     private _worker;
     private _callbacks;
-    constructor(options: any);
+    constructor(options?: GPUForceLayoutOptions);
     initializeGraph(graph: any): void;
     start(): void;
     update(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"gpu-force-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/gpu-force/gpu-force-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,kCAA+B;AAclD,qBAAa,cAAe,SAAQ,UAAU;IAC5C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAS;IACzC,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAM;gBACZ,OAAO,KAAA;IAanB,eAAe,CAAC,KAAK,KAAA;IAuCrB,KAAK;IAIL,MAAM;IAIN,aAAa;IAiCb,MAAM,CAAC,IAAI,KAAA;IACX,KAAK,CAAC,IAAI,KAAA;IAMV,MAAM;IAGN,IAAI;IAKJ,WAAW,CAAC,KAAK,KAAA;IA0CjB,aAAa,CAAC,KAAK,KAAA;IA6BnB,eAAe,iBAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxC;IAEF,eAAe;;;;;MAkBb;IAEF,gBAAgB,sCAQd;IAEF,kBAAkB,sBAIhB;CACH"}
+{"version":3,"file":"gpu-force-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/gpu-force/gpu-force-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,mCAAgC;AAIxE,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,GAAG;IACvD,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;;GAEG;AACH,qBAAa,cAAe,SAAQ,WAAW,CAAC,qBAAqB,CAAC;IACpE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAOpD;IAEF,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAS;IACzC,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAM;gBAEZ,OAAO,GAAE,qBAA0B;IAgB/C,eAAe,CAAC,KAAK,KAAA;IAuCrB,KAAK;IAIL,MAAM;IAIN,aAAa;IAiCb,MAAM,CAAC,IAAI,KAAA;IACX,KAAK,CAAC,IAAI,KAAA;IAMV,MAAM;IAGN,IAAI;IAKJ,WAAW,CAAC,KAAK,KAAA;IA0CjB,aAAa,CAAC,KAAK,KAAA;IA6BnB,eAAe,iBAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxC;IAEF,eAAe;;;;;MAkBb;IAEF,gBAAgB,sCAQd;IAEF,kBAAkB,sBAIhB;CACH"}