react-html-graph 1.2.2 → 1.2.3

package/dist/behaviour/move-behaviour.d.ts

@@ -0,0 +1,50 @@
+import { GraphMode, NodeEventEmitter, Point3D } from "../types";
+type MoveState = {
+    moving: boolean;
+    movePointStart: {
+        x: number;
+        y: number;
+    };
+    startPos: {
+        x: number;
+        y: number;
+    };
+    currentPos: {
+        x: number;
+        y: number;
+    };
+};
+/** Opções para o hook useMoveBehaviour. */
+export interface UseMoveBehaviourOptions {
+    /** Ref do elemento DOM do nó. */
+    elementRef: React.RefObject<HTMLElement | null>;
+    /** Getter estável para o zoom atual. */
+    getZoom: () => number;
+    /** Modo do grafo (readonly não permite drag). */
+    mode: GraphMode;
+    /** Posição efetiva atual do nó. */
+    position: Point3D;
+    /** Callback chamado ao finalizar o movimento. */
+    onMoveEnd?: (newPosition: Point3D) => void;
+    /** Callback chamado durante o arraste para reportar estado. */
+    onMoving?: (currentPosition: Point3D) => void;
+    /** Emitter de eventos do nó. */
+    eventEmitter?: NodeEventEmitter | null;
+}
+/** Retorno do hook useMoveBehaviour. */
+export interface UseMoveBehaviourReturn {
+    /** Handler de mouseDown para iniciar o arraste. */
+    handleMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Handler de mouseUp para finalizar o arraste. */
+    handleMouseUp: (e: MouseEvent | React.MouseEvent) => void;
+    /** Posição corrente durante o arraste (via ref). */
+    moveRef: React.RefObject<MoveState>;
+}
+/**
+ * Hook que encapsula a lógica de drag/move de um nó do grafo.
+ * Atualiza o DOM diretamente durante o arraste (sem setState)
+ * e registra listeners globais de mousemove/mouseup no document.
+ */
+export declare function useMoveBehaviour({ elementRef, getZoom, mode, position, onMoveEnd, onMoving, eventEmitter, }: UseMoveBehaviourOptions): UseMoveBehaviourReturn;
+export {};
+//# sourceMappingURL=move-behaviour.d.ts.map

package/dist/behaviour/move-behaviour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-behaviour.d.ts","sourceRoot":"","sources":["../../src/behaviour/move-behaviour.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEhE,KAAK,SAAS,GAAG;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,2CAA2C;AAC3C,MAAM,WAAW,uBAAuB;IACpC,iCAAiC;IACjC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,wCAAwC;IACxC,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,iDAAiD;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,gCAAgC;IAChC,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1C;AAED,wCAAwC;AACxC,MAAM,WAAW,sBAAsB;IACnC,mDAAmD;IACnD,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,mDAAmD;IACnD,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1D,oDAAoD;IACpD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,UAAU,EACV,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAY,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAoElD"}

package/dist/behaviour/move-behaviour.js

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * Hook que encapsula a lógica de drag/move de um nó do grafo.
+ * Atualiza o DOM diretamente durante o arraste (sem setState)
+ * e registra listeners globais de mousemove/mouseup no document.
+ */
+export function useMoveBehaviour({ elementRef, getZoom, mode, position, onMoveEnd, onMoving, eventEmitter, }) {
+    const moveRef = useRef({
+        moving: false,
+        movePointStart: { x: 0, y: 0 },
+        startPos: { x: 0, y: 0 },
+        currentPos: { x: 0, y: 0 },
+    });
+    const handleMouseDown = useCallback((e) => {
+        if (e.button !== 0 || mode === "readonly")
+            return;
+        e.preventDefault();
+        moveRef.current.moving = true;
+        moveRef.current.movePointStart.x = e.clientX;
+        moveRef.current.movePointStart.y = e.clientY;
+        moveRef.current.startPos = { x: position.x, y: position.y };
+        moveRef.current.currentPos = { x: position.x, y: position.y };
+    }, [position.x, position.y, mode]);
+    const handleMouseUp = useCallback((e) => {
+        if (e.button === 0 && moveRef.current.moving) {
+            moveRef.current.moving = false;
+            const nextPosition = {
+                x: moveRef.current.currentPos.x,
+                y: moveRef.current.currentPos.y,
+                z: position.z,
+            };
+            onMoveEnd?.(nextPosition);
+            eventEmitter?.("move", { position: nextPosition });
+        }
+    }, [position.z, onMoveEnd, eventEmitter]);
+    const handleMouseMove = useCallback((e) => {
+        if (!elementRef.current || !moveRef.current.moving)
+            return;
+        const zoom = getZoom();
+        const dx = (e.clientX - moveRef.current.movePointStart.x) / zoom;
+        const dy = (e.clientY - moveRef.current.movePointStart.y) / zoom;
+        const newX = moveRef.current.startPos.x + dx;
+        const newY = moveRef.current.startPos.y + dy;
+        const nextPosition = {
+            x: newX,
+            y: newY,
+            z: position.z,
+        };
+        moveRef.current.currentPos.x = newX;
+        moveRef.current.currentPos.y = newY;
+        elementRef.current.style.left = `${newX.toFixed(0)}px`;
+        elementRef.current.style.top = `${newY.toFixed(0)}px`;
+        onMoving?.(nextPosition);
+        eventEmitter?.("move", { position: nextPosition });
+    }, [position.z, getZoom, elementRef, onMoving, eventEmitter]);
+    // Registra listeners globais de mousemove e mouseup
+    useEffect(() => {
+        if (mode === "readonly")
+            return;
+        const onUp = (e) => handleMouseUp(e);
+        const onMove = (e) => handleMouseMove(e);
+        document.addEventListener("mouseup", onUp);
+        document.addEventListener("mousemove", onMove);
+        return () => {
+            document.removeEventListener("mouseup", onUp);
+            document.removeEventListener("mousemove", onMove);
+        };
+    }, [handleMouseUp, handleMouseMove, mode]);
+    return { handleMouseDown, handleMouseUp, moveRef };
+}
+//# sourceMappingURL=move-behaviour.js.map

package/dist/behaviour/move-behaviour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-behaviour.js","sourceRoot":"","sources":["../../src/behaviour/move-behaviour.ts"],"names":[],"mappings":"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"}

package/dist/calculations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calculations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,EAChB,MAAM,SAAS,CAAC;AAkhCjB;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,QAK/C;AAqCD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAEnE;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC;IAAE,SAAS,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC,CAEzF;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAEzE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC,CAE5E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calculations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,EAChB,MAAM,SAAS,CAAC;AAw/CjB;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,QAK/C;AAqCD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAEnE;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC;IAAE,SAAS,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC,CAEzF;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAEzE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC,CAE5E"}

package/dist/calculations/index.js

@@ -344,15 +344,80 @@ function workerSource() {
             scaleY: Math.min(viewportHeight / viewportWidth, 1.8),
         };
     }
-    function getPreferredDirection(options = {}, fallback) {
+    function getLayoutDirection(options = {}, fallback, respectViewport = true) {
         if (options.direction)
             return options.direction;
+        if (!respectViewport)
+            return fallback;
         const viewportWidth = options.viewport?.width ?? 0;
         const viewportHeight = options.viewport?.height ?? 0;
         if (viewportWidth <= 0 || viewportHeight <= 0)
             return fallback;
         return viewportWidth >= viewportHeight ? "LR" : "TB";
     }
+    function buildLayerOrderIndex(layers) {
+        const layerOrderIndex = new Map();
+        for (const ids of layers.values()) {
+            ids.forEach((id, index) => {
+                layerOrderIndex.set(id, index);
+            });
+        }
+        return layerOrderIndex;
+    }
+    function getNeighborBarycenter(nodeId, depths, neighbors, layerOrderIndex, currentDepth, relation) {
+        const positions = (neighbors.get(nodeId) ?? [])
+            .filter(neighborId => {
+            const neighborDepth = depths.get(neighborId);
+            if (neighborDepth === undefined)
+                return false;
+            return relation === "before"
+                ? neighborDepth < currentDepth
+                : neighborDepth > currentDepth;
+        })
+            .map(neighborId => layerOrderIndex.get(neighborId))
+            .filter((value) => value !== undefined);
+        if (positions.length === 0)
+            return null;
+        return positions.reduce((sum, value) => sum + value, 0) / positions.length;
+    }
+    function reorderLayerByBarycenter(ids, depths, neighbors, layerOrderIndex, fallbackOrderIndex, currentDepth, relation) {
+        return [...ids].sort((leftId, rightId) => {
+            const leftBarycenter = getNeighborBarycenter(leftId, depths, neighbors, layerOrderIndex, currentDepth, relation);
+            const rightBarycenter = getNeighborBarycenter(rightId, depths, neighbors, layerOrderIndex, currentDepth, relation);
+            if (leftBarycenter !== null
+                && rightBarycenter !== null
+                && leftBarycenter !== rightBarycenter) {
+                return leftBarycenter - rightBarycenter;
+            }
+            if (leftBarycenter !== null)
+                return -1;
+            if (rightBarycenter !== null)
+                return 1;
+            return (fallbackOrderIndex.get(leftId) ?? 0) - (fallbackOrderIndex.get(rightId) ?? 0);
+        });
+    }
+    function optimizeHierarchicalLayerOrder(layers, depths, incoming, outgoing, fallbackOrderIndex) {
+        const layerKeys = [...layers.keys()].sort((a, b) => a - b);
+        if (layerKeys.length <= 1)
+            return layers;
+        for (let sweep = 0; sweep < 4; sweep++) {
+            let layerOrderIndex = buildLayerOrderIndex(layers);
+            for (let index = 1; index < layerKeys.length; index++) {
+                const depth = layerKeys[index];
+                const ids = layers.get(depth) ?? [];
+                layers.set(depth, reorderLayerByBarycenter(ids, depths, incoming, layerOrderIndex, fallbackOrderIndex, depth, "before"));
+                layerOrderIndex = buildLayerOrderIndex(layers);
+            }
+            layerOrderIndex = buildLayerOrderIndex(layers);
+            for (let index = layerKeys.length - 2; index >= 0; index--) {
+                const depth = layerKeys[index];
+                const ids = layers.get(depth) ?? [];
+                layers.set(depth, reorderLayerByBarycenter(ids, depths, outgoing, layerOrderIndex, fallbackOrderIndex, depth, "after"));
+                layerOrderIndex = buildLayerOrderIndex(layers);
+            }
+        }
+        return layers;
+    }
     function layoutSequential(nodes, links, options = {}) {
         const gapX = options.gapX ?? 80;
         const gapY = options.gapY ?? 80;
@@ -387,12 +452,14 @@ function workerSource() {
         }
         return normalizeLayout(nodes, packDisconnectedComponents(nodes, links, positions, options), options);
     }
-    function layoutHierarchical(nodes, links, options = {}, treeMode = false) {
+    function layoutHierarchical(nodes, links, options = {}, treeMode = false, respectViewport = false) {
+        const { outgoing, incoming } = buildGraphIndex(nodes, links);
         const gapX = options.gapX ?? 100;
         const gapY = options.gapY ?? 80;
-        const direction = getPreferredDirection(options, treeMode ? "TB" : "LR");
+        const direction = getLayoutDirection(options, treeMode ? "TB" : "LR", respectViewport);
         const depths = getHierarchicalDepths(nodes, links, treeMode);
         const order = sortNodeIds(nodes);
+        const fallbackOrderIndex = new Map(order.map((id, index) => [id, index]));
         const nodeMap = new Map(nodes.map(node => [node.id, node]));
         const layers = new Map();
         for (const id of order) {
@@ -401,6 +468,7 @@ function workerSource() {
             group.push(id);
             layers.set(depth, group);
         }
+        optimizeHierarchicalLayerOrder(layers, depths, incoming, outgoing, fallbackOrderIndex);
         const layerKeys = [...layers.keys()].sort((a, b) => a - b);
         const positions = [];
         let primaryCursor = 0;
@@ -432,6 +500,130 @@ function workerSource() {
             adjusted = flipLayout(nodes, adjusted, "y");
         return normalizeLayout(nodes, packDisconnectedComponents(nodes, links, adjusted, options), options);
     }
+    function layoutTree(nodes, links, options = {}) {
+        const { outgoing, incoming, indegree } = buildGraphIndex(nodes, links);
+        const gapX = options.gapX ?? 100;
+        const gapY = options.gapY ?? 80;
+        const direction = getLayoutDirection(options, "TB", false);
+        const depths = getHierarchicalDepths(nodes, links, true);
+        const order = sortNodeIds(nodes);
+        const fallbackOrderIndex = new Map(order.map((id, index) => [id, index]));
+        const nodeMap = new Map(nodes.map(node => [node.id, node]));
+        const layers = new Map();
+        for (const id of order) {
+            const depth = depths.get(id) ?? 0;
+            const group = layers.get(depth) ?? [];
+            group.push(id);
+            layers.set(depth, group);
+        }
+        optimizeHierarchicalLayerOrder(layers, depths, incoming, outgoing, fallbackOrderIndex);
+        const layerOrderIndex = buildLayerOrderIndex(layers);
+        const roots = order.filter(id => (indegree.get(id) ?? 0) === 0);
+        const rootSet = new Set(roots);
+        const forestRoots = [];
+        const assigned = new Set();
+        const children = new Map();
+        const sortByTreeOrder = (leftId, rightId) => {
+            const leftDepth = depths.get(leftId) ?? 0;
+            const rightDepth = depths.get(rightId) ?? 0;
+            if (leftDepth !== rightDepth)
+                return leftDepth - rightDepth;
+            return (layerOrderIndex.get(leftId) ?? fallbackOrderIndex.get(leftId) ?? 0)
+                - (layerOrderIndex.get(rightId) ?? fallbackOrderIndex.get(rightId) ?? 0);
+        };
+        const buildTree = (nodeId) => {
+            const currentDepth = depths.get(nodeId) ?? 0;
+            const childIds = (outgoing.get(nodeId) ?? [])
+                .filter(childId => childId !== nodeId && (depths.get(childId) ?? currentDepth) > currentDepth && !assigned.has(childId))
+                .sort(sortByTreeOrder);
+            children.set(nodeId, childIds);
+            for (const childId of childIds) {
+                assigned.add(childId);
+                buildTree(childId);
+            }
+        };
+        for (const rootId of [...roots, ...order.filter(id => !rootSet.has(id))]) {
+            if (assigned.has(rootId))
+                continue;
+            assigned.add(rootId);
+            forestRoots.push(rootId);
+            buildTree(rootId);
+        }
+        const layerKeys = [...layers.keys()].sort((a, b) => a - b);
+        const primaryOffsetByDepth = new Map();
+        let primaryCursor = 0;
+        for (const layerKey of layerKeys) {
+            const ids = layers.get(layerKey) ?? [];
+            const primarySize = ids.reduce((max, id) => {
+                const node = nodeMap.get(id);
+                if (!node)
+                    return max;
+                return Math.max(max, direction === "LR" || direction === "RL" ? node.width : node.height);
+            }, 0);
+            primaryOffsetByDepth.set(layerKey, primaryCursor);
+            primaryCursor += primarySize + (direction === "LR" || direction === "RL" ? gapX : gapY);
+        }
+        const secondaryGap = direction === "LR" || direction === "RL" ? gapY : gapX;
+        const secondarySize = (nodeId) => {
+            const node = nodeMap.get(nodeId);
+            if (!node)
+                return 0;
+            return direction === "LR" || direction === "RL" ? node.height : node.width;
+        };
+        const secondaryPositionById = new Map();
+        let secondaryCursor = 0;
+        const placeSubtree = (nodeId) => {
+            const node = nodeMap.get(nodeId);
+            if (!node) {
+                return { start: secondaryCursor, end: secondaryCursor };
+            }
+            const nodeSecondarySize = secondarySize(nodeId);
+            const childIds = children.get(nodeId) ?? [];
+            if (childIds.length === 0) {
+                const start = secondaryCursor;
+                secondaryPositionById.set(nodeId, start);
+                secondaryCursor += nodeSecondarySize + secondaryGap;
+                return { start, end: start + nodeSecondarySize };
+            }
+            let start = Infinity;
+            let end = -Infinity;
+            for (const childId of childIds) {
+                const bounds = placeSubtree(childId);
+                start = Math.min(start, bounds.start);
+                end = Math.max(end, bounds.end);
+            }
+            const centeredStart = start + (end - start - nodeSecondarySize) / 2;
+            secondaryPositionById.set(nodeId, centeredStart);
+            return {
+                start: Math.min(start, centeredStart),
+                end: Math.max(end, centeredStart + nodeSecondarySize),
+            };
+        };
+        for (const rootId of forestRoots) {
+            placeSubtree(rootId);
+            secondaryCursor += secondaryGap;
+        }
+        const positions = order
+            .map(id => {
+            const node = nodeMap.get(id);
+            if (!node)
+                return null;
+            const depth = depths.get(id) ?? 0;
+            const primary = primaryOffsetByDepth.get(depth) ?? 0;
+            const secondary = secondaryPositionById.get(id) ?? 0;
+            if (direction === "LR" || direction === "RL") {
+                return { id, x: primary, y: secondary, z: node.z };
+            }
+            return { id, x: secondary, y: primary, z: node.z };
+        })
+            .filter((position) => Boolean(position));
+        let adjusted = positions;
+        if (direction === "RL")
+            adjusted = flipLayout(nodes, adjusted, "x");
+        if (direction === "BT")
+            adjusted = flipLayout(nodes, adjusted, "y");
+        return normalizeLayout(nodes, packDisconnectedComponents(nodes, links, adjusted, options), options);
+    }
     function layoutRadial(nodes, links, options = {}) {
         const { outgoing, incoming, indegree, undirected } = buildGraphIndex(nodes, links);
         const order = sortNodeIds(nodes);
@@ -596,13 +788,135 @@ function workerSource() {
             }
         }
     }
+    function getMidpoint(from, to) {
+        return {
+            x: (from.x + to.x) / 2,
+            y: (from.y + to.y) / 2,
+        };
+    }
+    function getNormalizedVector(x, y) {
+        const length = Math.sqrt(x * x + y * y) || 1;
+        return { x: x / length, y: y / length };
+    }
+    function segmentsIntersect(leftFrom, leftTo, rightFrom, rightTo) {
+        const epsilon = 0.001;
+        const leftToRightFrom = (leftTo.x - leftFrom.x) * (rightFrom.y - leftFrom.y) - (leftTo.y - leftFrom.y) * (rightFrom.x - leftFrom.x);
+        const leftToRightTo = (leftTo.x - leftFrom.x) * (rightTo.y - leftFrom.y) - (leftTo.y - leftFrom.y) * (rightTo.x - leftFrom.x);
+        const rightToLeftFrom = (rightTo.x - rightFrom.x) * (leftFrom.y - rightFrom.y) - (rightTo.y - rightFrom.y) * (leftFrom.x - rightFrom.x);
+        const rightToLeftTo = (rightTo.x - rightFrom.x) * (leftTo.y - rightFrom.y) - (rightTo.y - rightFrom.y) * (leftTo.x - rightFrom.x);
+        return (((leftToRightFrom > epsilon && leftToRightTo < -epsilon) || (leftToRightFrom < -epsilon && leftToRightTo > epsilon))
+            && ((rightToLeftFrom > epsilon && rightToLeftTo < -epsilon) || (rightToLeftFrom < -epsilon && rightToLeftTo > epsilon)));
+    }
+    function applyLinkCrossingForces(edges, centers, displacement, strength, seedCenters) {
+        if (strength <= 0 || edges.length < 2)
+            return 0;
+        let crossingCount = 0;
+        for (let leftIndex = 0; leftIndex < edges.length; leftIndex++) {
+            const leftEdge = edges[leftIndex];
+            const leftFrom = centers[leftEdge.fromIndex];
+            const leftTo = centers[leftEdge.toIndex];
+            for (let rightIndex = leftIndex + 1; rightIndex < edges.length; rightIndex++) {
+                const rightEdge = edges[rightIndex];
+                if (leftEdge.fromIndex === rightEdge.fromIndex
+                    || leftEdge.fromIndex === rightEdge.toIndex
+                    || leftEdge.toIndex === rightEdge.fromIndex
+                    || leftEdge.toIndex === rightEdge.toIndex) {
+                    continue;
+                }
+                const rightFrom = centers[rightEdge.fromIndex];
+                const rightTo = centers[rightEdge.toIndex];
+                if (!segmentsIntersect(leftFrom, leftTo, rightFrom, rightTo))
+                    continue;
+                crossingCount += 1;
+                const leftMid = getMidpoint(leftFrom, leftTo);
+                const rightMid = getMidpoint(rightFrom, rightTo);
+                let separationX = leftMid.x - rightMid.x;
+                let separationY = leftMid.y - rightMid.y;
+                const leftSeedFrom = seedCenters?.[leftEdge.fromIndex];
+                const leftSeedTo = seedCenters?.[leftEdge.toIndex];
+                const rightSeedFrom = seedCenters?.[rightEdge.fromIndex];
+                const rightSeedTo = seedCenters?.[rightEdge.toIndex];
+                if (leftSeedFrom && leftSeedTo && rightSeedFrom && rightSeedTo) {
+                    const leftSeedMid = getMidpoint(leftSeedFrom, leftSeedTo);
+                    const rightSeedMid = getMidpoint(rightSeedFrom, rightSeedTo);
+                    separationX = leftSeedMid.x - rightSeedMid.x;
+                    separationY = leftSeedMid.y - rightSeedMid.y;
+                }
+                if (Math.abs(separationX) < 0.001 && Math.abs(separationY) < 0.001) {
+                    separationX = (leftFrom.x + leftTo.x) - (rightFrom.x + rightTo.x);
+                    separationY = (leftFrom.y + leftTo.y) - (rightFrom.y + rightTo.y);
+                }
+                const direction = getNormalizedVector(separationX, separationY);
+                const pushX = direction.x * strength;
+                const pushY = direction.y * strength;
+                displacement[leftEdge.fromIndex].x += pushX * 0.5;
+                displacement[leftEdge.fromIndex].y += pushY * 0.5;
+                displacement[leftEdge.toIndex].x += pushX * 0.5;
+                displacement[leftEdge.toIndex].y += pushY * 0.5;
+                displacement[rightEdge.fromIndex].x -= pushX * 0.5;
+                displacement[rightEdge.fromIndex].y -= pushY * 0.5;
+                displacement[rightEdge.toIndex].x -= pushX * 0.5;
+                displacement[rightEdge.toIndex].y -= pushY * 0.5;
+            }
+        }
+        return crossingCount;
+    }
+    function resolveLinkCrossings(nodes, edges, centers, spacing, gapX, gapY, seedCenters) {
+        if (edges.length < 2)
+            return;
+        for (let iteration = 0; iteration < 20; iteration++) {
+            const displacement = nodes.map(() => ({ x: 0, y: 0 }));
+            const crossingCount = applyLinkCrossingForces(edges, centers, displacement, Math.max(spacing * 0.12, 6), seedCenters);
+            if (crossingCount === 0) {
+                return;
+            }
+            for (let index = 0; index < centers.length; index++) {
+                centers[index].x += displacement[index].x;
+                centers[index].y += displacement[index].y;
+            }
+            separateOverlappingNodes(nodes, centers, gapX, gapY);
+        }
+    }
     function runForceLayout(nodes, links, options = {}, directedBias = 0, gravity = 0.015, seedPositions) {
         const gapX = options.gapX ?? 140;
         const gapY = options.gapY ?? 100;
+        const averageNodeSize = nodes.reduce((sum, node) => sum + Math.max(node.width, node.height), 0) / Math.max(nodes.length, 1);
+        const baseSpacing = Math.max(gapX, gapY, averageNodeSize * 0.85, 48);
+        const overlapGapX = gapX > 0 ? gapX : Math.min(baseSpacing * 0.25, 24);
+        const overlapGapY = gapY > 0 ? gapY : Math.min(baseSpacing * 0.25, 24);
         const iterations = Math.max(1, Math.floor(options.iterations ?? 220));
         const nodeMap = new Map(nodes.map((node, index) => [node.id, { node, index }]));
+        const { outgoing, incoming } = buildGraphIndex(nodes, links);
+        const nodeDegrees = nodes.map(node => {
+            const degree = new Set([
+                ...(outgoing.get(node.id) ?? []),
+                ...(incoming.get(node.id) ?? []),
+            ]);
+            return degree.size;
+        });
+        const edges = links
+            .map(link => {
+            const fromEntry = nodeMap.get(link.from);
+            const toEntry = nodeMap.get(link.to);
+            if (!fromEntry || !toEntry)
+                return null;
+            return {
+                fromIndex: fromEntry.index,
+                toIndex: toEntry.index,
+            };
+        })
+            .filter((edge) => Boolean(edge));
         const nodeRadii = nodes.map(node => Math.sqrt(node.width * node.width + node.height * node.height) / 2);
         const seedPositionMap = new Map((seedPositions ?? []).map(position => [position.id, position]));
+        const seedCenters = nodes.map(node => {
+            const seed = seedPositionMap.get(node.id);
+            if (!seed)
+                return null;
+            return {
+                x: seed.x + node.width / 2,
+                y: seed.y + node.height / 2,
+            };
+        });
         const rawPositions = nodes.map(node => {
             const seed = seedPositionMap.get(node.id);
             return {
@@ -616,16 +930,17 @@ function workerSource() {
         const rawCenterX = rawBounds.left + rawBounds.width / 2;
         const rawCenterY = rawBounds.top + rawBounds.height / 2;
         const { scaleX, scaleY } = getViewportScales(options);
-        const desiredSpanX = Math.max(gapX, gapY) * Math.max(2, Math.sqrt(Math.max(1, nodes.length))) * scaleX;
-        const desiredSpanY = Math.max(gapX, gapY) * Math.max(2, Math.sqrt(Math.max(1, nodes.length))) * scaleY;
+        const desiredSpanX = baseSpacing * Math.max(2, Math.sqrt(Math.max(1, nodes.length))) * scaleX;
+        const desiredSpanY = baseSpacing * Math.max(2, Math.sqrt(Math.max(1, nodes.length))) * scaleY;
         const currentSpanX = Math.max(rawBounds.width, 1);
         const currentSpanY = Math.max(rawBounds.height, 1);
         const compactScaleX = Math.min(1, desiredSpanX / currentSpanX);
         const compactScaleY = Math.min(1, desiredSpanY / currentSpanY);
         const useCircularSeed = rawBounds.width < 4 && rawBounds.height < 4;
         const centers = nodes.map((node, index) => {
+            const rawPosition = rawPositions[index] ?? { x: node.x, y: node.y };
             if (useCircularSeed) {
-                const seedRadius = Math.max(gapX, gapY) * 0.8;
+                const seedRadius = baseSpacing * 0.8;
                 const angle = (Math.PI * 2 * index) / Math.max(1, nodes.length);
                 return {
                     x: Math.cos(angle) * seedRadius * scaleX,
@@ -633,14 +948,14 @@ function workerSource() {
                 };
             }
             return {
-                x: (node.x + node.width / 2 - rawCenterX) * compactScaleX,
-                y: (node.y + node.height / 2 - rawCenterY) * compactScaleY,
+                x: (rawPosition.x + node.width / 2 - rawCenterX) * compactScaleX,
+                y: (rawPosition.y + node.height / 2 - rawCenterY) * compactScaleY,
             };
         });
         const totalNodeArea = nodes.reduce((sum, node) => sum + node.width * node.height, 0);
-        const area = Math.max(totalNodeArea + gapX * gapY * Math.max(1, nodes.length) * 0.35, 1);
+        const area = Math.max(totalNodeArea + baseSpacing * baseSpacing * Math.max(1, nodes.length) * 0.35, 1);
         const k = Math.sqrt(area / Math.max(1, nodes.length));
-        let temperature = Math.max(gapX, gapY, 60);
+        let temperature = Math.max(baseSpacing, 60);
         for (let iteration = 0; iteration < iterations; iteration++) {
             const displacement = nodes.map(() => ({ x: 0, y: 0 }));
             for (let i = 0; i < nodes.length; i++) {
@@ -653,7 +968,7 @@ function workerSource() {
                         dy = (Math.random() - 0.5) * 0.01;
                         distance = Math.sqrt(dx * dx + dy * dy);
                     }
-                    const minimumDistance = nodeRadii[i] + nodeRadii[j] + Math.max(gapX, gapY) * 0.18;
+                    const minimumDistance = nodeRadii[i] + nodeRadii[j] + baseSpacing * 0.18;
                     const safeDistance = Math.max(distance - nodeRadii[i] - nodeRadii[j], 1);
                     const force = (k * k) / (safeDistance * 1.5);
                     const fx = (dx / distance) * force;
@@ -681,7 +996,7 @@ function workerSource() {
                 let dx = centers[i].x - centers[j].x;
                 let dy = centers[i].y - centers[j].y;
                 let distance = Math.sqrt(dx * dx + dy * dy) || 1;
-                const springLength = nodeRadii[i] + nodeRadii[j] + Math.max(gapX, gapY) * 0.28;
+                const springLength = nodeRadii[i] + nodeRadii[j] + baseSpacing * 0.28;
                 const force = (distance - springLength) * 0.2;
                 const fx = (dx / distance) * force;
                 const fy = (dy / distance) * force;
@@ -694,6 +1009,19 @@ function workerSource() {
                     displacement[j].x += directedBias;
                 }
             }
+            if (seedCenters.some(center => center !== null)) {
+                const settlingFactor = 0.35 + (iteration / Math.max(iterations - 1, 1)) * 0.85;
+                for (let i = 0; i < nodes.length; i++) {
+                    const seedCenter = seedCenters[i];
+                    if (!seedCenter)
+                        continue;
+                    const degree = nodeDegrees[i];
+                    const leafBias = degree <= 1 ? 1.6 : degree === 2 ? 1.15 : 0.9;
+                    const seedStrength = 0.04 * leafBias * settlingFactor;
+                    displacement[i].x += (seedCenter.x - centers[i].x) * seedStrength;
+                    displacement[i].y += (seedCenter.y - centers[i].y) * seedStrength;
+                }
+            }
             for (let i = 0; i < nodes.length; i++) {
                 displacement[i].x -= centers[i].x * gravity;
                 displacement[i].y -= centers[i].y * gravity;
@@ -704,7 +1032,9 @@ function workerSource() {
             }
             temperature *= 0.96;
         }
-        separateOverlappingNodes(nodes, centers, gapX, gapY);
+        separateOverlappingNodes(nodes, centers, overlapGapX, overlapGapY);
+        resolveLinkCrossings(nodes, edges, centers, baseSpacing, overlapGapX, overlapGapY, seedCenters);
+        separateOverlappingNodes(nodes, centers, overlapGapX, overlapGapY);
         const positions = nodes.map((node, index) => ({
             id: node.id,
             x: centers[index].x - node.width / 2,
@@ -723,7 +1053,7 @@ function workerSource() {
             case "radial":
                 return layoutRadial(nodes, links, options);
             case "tree":
-                return layoutHierarchical(nodes, links, options, true);
+                return layoutTree(nodes, links, options);
             case "structural":
                 return layoutHierarchical(nodes, links, options, false);
             case "organic": {