@zvk/graphs 0.1.0 → 0.1.2

package/dist/layout/dag.js

@@ -1,5 +1,6 @@
 import { createGraphIndex, detectGraphCycle, topologicalSortGraph } from "../algorithms.js";
-import { defaultGraphNodeSize, edgeWithPoints } from "./types.js";
+import { validateGraphLayout } from "../diagnostics.js";
+import { defaultGraphNodeSize, edgesWithPoints, getGraphEdgeLabelOverlapDiagnostics } from "./types.js";
 function rankedPoint(rank, indexInRank, size, nodeGap, rankGap, direction) {
     if (direction === "left-right") {
         return {
@@ -12,8 +13,23 @@ function rankedPoint(rank, indexInRank, size, nodeGap, rankGap, direction) {
         y: rank * (size.height + rankGap)
     };
 }
+function hintedNumber(values, nodeId) {
+    const value = values?.[nodeId];
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+function sortRankBucket(nodeIds, inputOrderByNodeId, orderByNodeId) {
+    return [...nodeIds].sort((left, right) => {
+        const leftOrder = hintedNumber(orderByNodeId, left) ?? inputOrderByNodeId.get(left) ?? 0;
+        const rightOrder = hintedNumber(orderByNodeId, right) ?? inputOrderByNodeId.get(right) ?? 0;
+        if (leftOrder !== rightOrder) {
+            return leftOrder - rightOrder;
+        }
+        return (inputOrderByNodeId.get(left) ?? 0) - (inputOrderByNodeId.get(right) ?? 0);
+    });
+}
 export function layoutDagGraph(graph, options = {}) {
     const cycle = detectGraphCycle(graph);
+    const layoutDiagnostics = validateGraphLayout(graph, options);
     if (cycle) {
         const diagnostic = {
             code: "cycle-detected",
@@ -26,7 +42,7 @@ export function layoutDagGraph(graph, options = {}) {
                 nodes: [],
                 edges: []
             },
-            diagnostics: [diagnostic]
+            diagnostics: [diagnostic, ...layoutDiagnostics]
         };
     }
     const size = options.nodeSize ?? defaultGraphNodeSize;
@@ -36,11 +52,17 @@ export function layoutDagGraph(graph, options = {}) {
     const index = createGraphIndex(graph);
     const sorted = topologicalSortGraph(graph);
     const ranks = new Map();
+    const rankStrategy = options.rankStrategy ?? "longest-path";
+    const inputOrderByNodeId = new Map(graph.nodes.map((node, index) => [node.id, index]));
     for (const nodeId of sorted.nodeIds) {
         const incoming = index.incomingByNodeId.get(nodeId) ?? [];
-        const rank = incoming.reduce((nextRank, edge) => {
-            return Math.max(nextRank, (ranks.get(edge.source) ?? 0) + 1);
-        }, 0);
+        const incomingRanks = incoming.map((edge) => (ranks.get(edge.source) ?? 0) + 1);
+        const computedRank = incomingRanks.length === 0
+            ? 0
+            : rankStrategy === "source-depth"
+                ? Math.min(...incomingRanks)
+                : Math.max(...incomingRanks);
+        const rank = hintedNumber(options.rankByNodeId, nodeId) ?? computedRank;
         ranks.set(nodeId, rank);
     }
     const rankBuckets = new Map();
@@ -48,9 +70,10 @@ export function layoutDagGraph(graph, options = {}) {
         const rank = ranks.get(node.id) ?? 0;
         rankBuckets.set(rank, [...(rankBuckets.get(rank) ?? []), node.id]);
     }
+    const orderedRankBuckets = new Map([...rankBuckets.entries()].map(([rank, nodeIds]) => [rank, sortRankBucket(nodeIds, inputOrderByNodeId, options.orderByNodeId)]));
     const nodes = graph.nodes.map((node) => {
         const rank = ranks.get(node.id) ?? 0;
-        const indexInRank = rankBuckets.get(rank)?.indexOf(node.id) ?? 0;
+        const indexInRank = orderedRankBuckets.get(rank)?.indexOf(node.id) ?? 0;
         return {
             ...node,
             position: rankedPoint(rank, indexInRank, size, nodeGap, rankGap, direction),
@@ -58,12 +81,15 @@ export function layoutDagGraph(graph, options = {}) {
         };
     });
     const nodeById = new Map(nodes.map((node) => [node.id, node]));
+    const edges = edgesWithPoints(graph.edges, nodeById, options);
+    const positionedGraph = {
+        ...graph,
+        nodes,
+        edges
+    };
+    const edgeLabelDiagnostics = options.warnEdgeLabelOverlaps === true ? getGraphEdgeLabelOverlapDiagnostics(positionedGraph) : [];
     return {
-        graph: {
-            ...graph,
-            nodes,
-            edges: graph.edges.map((edge) => edgeWithPoints(edge, nodeById))
-        },
-        diagnostics: sorted.diagnostics
+        graph: positionedGraph,
+        diagnostics: [...sorted.diagnostics, ...layoutDiagnostics, ...edgeLabelDiagnostics]
     };
 }

package/dist/layout/manual.d.ts

@@ -1,6 +1,7 @@
+import { type ValidateGraphLayoutOptions } from "../diagnostics.js";
 import type { GraphModel, GraphSize } from "../model.js";
-import { type GraphLayoutResult } from "./types.js";
-export interface ManualLayoutOptions {
+import { type GraphEdgesWithPointsOptions, type GraphLayoutResult } from "./types.js";
+export interface ManualLayoutOptions extends ValidateGraphLayoutOptions, GraphEdgesWithPointsOptions {
     readonly defaultNodeSize?: GraphSize;
     readonly missingPosition?: "error" | "grid" | "zero";
 }

package/dist/layout/manual.js

@@ -1,4 +1,5 @@
-import { defaultGraphNodeSize, edgeWithPoints } from "./types.js";
+import { validateGraphLayout } from "../diagnostics.js";
+import { defaultGraphNodeSize, edgesWithPoints, getGraphEdgeLabelOverlapDiagnostics } from "./types.js";
 function gridPosition(index, size) {
     const columns = 4;
     return {
@@ -27,13 +28,15 @@ export function layoutManualGraph(graph, options = {}) {
         };
     });
     const nodeById = new Map(nodes.map((node) => [node.id, node]));
-    const edges = graph.edges.map((edge) => edgeWithPoints(edge, nodeById));
+    const edges = edgesWithPoints(graph.edges, nodeById, options);
+    const positionedGraph = {
+        ...graph,
+        nodes,
+        edges
+    };
+    const edgeLabelDiagnostics = options.warnEdgeLabelOverlaps === true ? getGraphEdgeLabelOverlapDiagnostics(positionedGraph) : [];
     return {
-        graph: {
-            ...graph,
-            nodes,
-            edges
-        },
-        diagnostics
+        graph: positionedGraph,
+        diagnostics: [...diagnostics, ...validateGraphLayout(graph, options), ...edgeLabelDiagnostics]
     };
 }

package/dist/layout/tree.d.ts

@@ -1,6 +1,7 @@
+import { type ValidateGraphLayoutOptions } from "../diagnostics.js";
 import type { GraphModel, GraphSize } from "../model.js";
-import { type GraphLayoutResult } from "./types.js";
-export interface TreeLayoutOptions {
+import { type GraphEdgesWithPointsOptions, type GraphLayoutResult } from "./types.js";
+export interface TreeLayoutOptions extends ValidateGraphLayoutOptions, GraphEdgesWithPointsOptions {
     readonly direction?: "top-bottom" | "left-right";
     readonly nodeSize?: GraphSize;
     readonly siblingGap?: number;

package/dist/layout/tree.js

@@ -1,5 +1,6 @@
 import { createGraphIndex, validateTreeGraph } from "../algorithms.js";
-import { defaultGraphNodeSize, edgeWithPoints } from "./types.js";
+import { validateGraphLayout } from "../diagnostics.js";
+import { defaultGraphNodeSize, edgesWithPoints, getGraphEdgeLabelOverlapDiagnostics } from "./types.js";
 function orientPoint(depth, breadth, size, levelGap, direction) {
     if (direction === "left-right") {
         return {
@@ -13,7 +14,10 @@ function orientPoint(depth, breadth, size, levelGap, direction) {
     };
 }
 export function layoutTreeGraph(graph, options = {}) {
-    const diagnostics = validateTreeGraph(graph, options.rootId ? { rootId: options.rootId } : {});
+    const diagnostics = [
+        ...validateTreeGraph(graph, options.rootId ? { rootId: options.rootId } : {}),
+        ...validateGraphLayout(graph, options)
+    ];
     const size = options.nodeSize ?? defaultGraphNodeSize;
     const siblingGap = options.siblingGap ?? 32;
     const levelGap = options.levelGap ?? 96;
@@ -57,12 +61,15 @@ export function layoutTreeGraph(graph, options = {}) {
         };
     });
     const nodeById = new Map(nodes.map((node) => [node.id, node]));
+    const edges = edgesWithPoints(graph.edges, nodeById, options);
+    const positionedGraph = {
+        ...graph,
+        nodes,
+        edges
+    };
+    const edgeLabelDiagnostics = options.warnEdgeLabelOverlaps === true ? getGraphEdgeLabelOverlapDiagnostics(positionedGraph) : [];
     return {
-        graph: {
-            ...graph,
-            nodes,
-            edges: graph.edges.map((edge) => edgeWithPoints(edge, nodeById))
-        },
-        diagnostics
+        graph: positionedGraph,
+        diagnostics: [...diagnostics, ...edgeLabelDiagnostics]
     };
 }

package/dist/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { GraphDiagnostic } from "../diagnostics.js";
-import type { GraphEdge, GraphModel, GraphNode, GraphPoint, GraphSize } from "../model.js";
+import type { GraphEdge, GraphId, GraphModel, GraphNode, GraphPoint, GraphSize } from "../model.js";
 export interface PositionedGraphNode<TData = unknown, TKind extends string = string> extends GraphNode<TData, TKind> {
     readonly position: GraphPoint;
     readonly size: GraphSize;
@@ -7,6 +7,8 @@ export interface PositionedGraphNode<TData = unknown, TKind extends string = str
 export interface PositionedGraphEdge<TData = unknown, TKind extends string = string> extends GraphEdge<TData, TKind> {
     readonly points: readonly GraphPoint[];
     readonly labelPosition?: GraphPoint;
+    readonly labelSize?: GraphSize;
+    readonly routeKind?: GraphEdgeRouteKind;
 }
 export interface PositionedGraph<TNodeData = unknown, TEdgeData = unknown, TNodeKind extends string = string, TEdgeKind extends string = string> extends Omit<GraphModel<TNodeData, TEdgeData, TNodeKind, TEdgeKind>, "nodes" | "edges"> {
     readonly nodes: readonly PositionedGraphNode<TNodeData, TNodeKind>[];
@@ -17,5 +19,77 @@ export interface GraphLayoutResult<TNodeData = unknown, TEdgeData = unknown, TNo
     readonly diagnostics: readonly GraphDiagnostic[];
 }
 export declare const defaultGraphNodeSize: GraphSize;
+export type GraphEdgeRouteKind = "straight" | "curve" | "elbow" | "self-loop";
+export interface GraphEdgeRouteOptions {
+    readonly kind?: GraphEdgeRouteKind;
+    readonly parallelIndex?: number;
+    readonly parallelCount?: number;
+    readonly parallelGap?: number;
+    readonly selfLoopRadius?: number;
+}
+export interface GraphEdgesWithPointsOptions {
+    readonly edgeRouteKind?: GraphEdgeRouteKind;
+    readonly parallelGap?: number;
+    readonly routeByEdgeId?: Readonly<Record<string, GraphEdgeRouteKind>>;
+    readonly selfLoopRadius?: number;
+}
+export interface GraphEdgeRoute {
+    readonly kind: GraphEdgeRouteKind;
+    readonly points: readonly GraphPoint[];
+    readonly labelPosition?: GraphPoint;
+}
+export type GraphEdgeLabelSide = "top" | "right" | "bottom" | "left" | "center";
+export type GraphEdgeLabelTextAnchor = "start" | "middle" | "end";
+export interface GraphEdgeLabelBounds {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface GraphEdgeLabelAnchor {
+    readonly anchor: GraphEdgeLabelTextAnchor;
+    readonly bounds: GraphEdgeLabelBounds;
+    readonly side: GraphEdgeLabelSide;
+    readonly textPosition: GraphPoint;
+}
+export interface GraphEdgeLabelAnchorOptions {
+    readonly characterWidth?: number;
+    readonly height?: number;
+    readonly minWidth?: number;
+    readonly paddingX?: number;
+    readonly textBaselineOffset?: number;
+    readonly textTopOffset?: number;
+}
+export interface GraphEdgeLabelOverlapOptions extends GraphEdgeLabelAnchorOptions {
+    readonly padding?: number;
+}
+export interface GraphBounds {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly viewBox: string;
+}
+export interface GraphBoundsOptions {
+    readonly padding?: number;
+    readonly minWidth?: number;
+    readonly minHeight?: number;
+    readonly includeEdges?: boolean;
+}
+export interface GraphGroupBoundsOptions {
+    readonly padding?: number;
+}
+export interface DerivedGraphGroupBounds {
+    readonly groupId: GraphId;
+    readonly position: GraphPoint;
+    readonly size: GraphSize;
+    readonly nodeIds: readonly GraphId[];
+}
 export declare function nodeCenter(node: PositionedGraphNode): GraphPoint;
-export declare function edgeWithPoints<TNodeData = unknown, TEdgeData = unknown, TNodeKind extends string = string, TEdgeKind extends string = string>(edge: GraphEdge<TEdgeData, TEdgeKind>, nodes: ReadonlyMap<string, PositionedGraphNode<TNodeData, TNodeKind>>): PositionedGraphEdge<TEdgeData, TEdgeKind>;
+export declare function deriveGraphEdgeLabelAnchor(edge: PositionedGraphEdge, options?: GraphEdgeLabelAnchorOptions): GraphEdgeLabelAnchor | undefined;
+export declare function getGraphEdgeLabelOverlapDiagnostics(graph: PositionedGraph, options?: GraphEdgeLabelOverlapOptions): readonly GraphDiagnostic[];
+export declare function deriveGraphGroupBounds(graph: PositionedGraph, options?: GraphGroupBoundsOptions): readonly DerivedGraphGroupBounds[];
+export declare function routeGraphEdge(source: PositionedGraphNode, target: PositionedGraphNode, options?: GraphEdgeRouteOptions): GraphEdgeRoute;
+export declare function getGraphBounds(graph: PositionedGraph, options?: GraphBoundsOptions): GraphBounds;
+export declare function edgeWithPoints<TNodeData = unknown, TEdgeData = unknown, TNodeKind extends string = string, TEdgeKind extends string = string>(edge: GraphEdge<TEdgeData, TEdgeKind>, nodes: ReadonlyMap<string, PositionedGraphNode<TNodeData, TNodeKind>>, options?: GraphEdgeRouteOptions): PositionedGraphEdge<TEdgeData, TEdgeKind>;
+export declare function edgesWithPoints<TNodeData = unknown, TEdgeData = unknown, TNodeKind extends string = string, TEdgeKind extends string = string>(edges: readonly GraphEdge<TEdgeData, TEdgeKind>[], nodes: ReadonlyMap<string, PositionedGraphNode<TNodeData, TNodeKind>>, options?: GraphEdgesWithPointsOptions): readonly PositionedGraphEdge<TEdgeData, TEdgeKind>[];

package/dist/layout/types.js

@@ -5,15 +5,342 @@ export function nodeCenter(node) {
         y: node.position.y + node.size.height / 2
     };
 }
-export function edgeWithPoints(edge, nodes) {
+function midpoint(start, end) {
+    return {
+        x: normalizeNumber((start.x + end.x) / 2),
+        y: normalizeNumber((start.y + end.y) / 2)
+    };
+}
+function normalizeNumber(value) {
+    return Object.is(value, -0) ? 0 : value;
+}
+function offsetPoint(start, end, distance) {
+    if (distance === 0) {
+        return { x: 0, y: 0 };
+    }
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy);
+    if (length === 0) {
+        return { x: distance, y: -distance };
+    }
+    return {
+        x: normalizeNumber((-dy / length) * distance),
+        y: normalizeNumber((dx / length) * distance)
+    };
+}
+function parallelOffset(options) {
+    const parallelCount = options.parallelCount ?? 1;
+    const parallelIndex = options.parallelIndex ?? 0;
+    const parallelGap = options.parallelGap ?? 14;
+    if (parallelCount <= 1) {
+        return 0;
+    }
+    return (parallelIndex - (parallelCount - 1) / 2) * parallelGap;
+}
+function labelSide(edge, labelPosition) {
+    const start = edge.points[0];
+    const end = edge.points.at(-1);
+    if (!start || !end) {
+        return "center";
+    }
+    const middle = midpoint(start, end);
+    const dx = labelPosition.x - middle.x;
+    const dy = labelPosition.y - middle.y;
+    if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
+        return "center";
+    }
+    if (Math.abs(dx) > Math.abs(dy)) {
+        return dx > 0 ? "right" : "left";
+    }
+    return dy > 0 ? "bottom" : "top";
+}
+function labelTextAnchor(side) {
+    if (side === "right") {
+        return "start";
+    }
+    if (side === "left") {
+        return "end";
+    }
+    return "middle";
+}
+export function deriveGraphEdgeLabelAnchor(edge, options = {}) {
+    if (!edge.label || !edge.labelPosition) {
+        return undefined;
+    }
+    const characterWidth = options.characterWidth ?? 7;
+    const paddingX = options.paddingX ?? 6;
+    const minWidth = options.minWidth ?? 24;
+    const height = options.height ?? 18;
+    const textBaselineOffset = options.textBaselineOffset ?? -6;
+    const textTopOffset = options.textTopOffset ?? 13;
+    const width = Math.max(minWidth, edge.label.length * characterWidth + paddingX * 2);
+    const textPosition = {
+        x: edge.labelPosition.x,
+        y: edge.labelPosition.y + textBaselineOffset
+    };
+    const side = labelSide(edge, edge.labelPosition);
+    return {
+        anchor: labelTextAnchor(side),
+        bounds: {
+            x: edge.labelPosition.x - width / 2,
+            y: textPosition.y - textTopOffset,
+            width,
+            height
+        },
+        side,
+        textPosition
+    };
+}
+function hasRoutedLabel(edge) {
+    const points = edge.points;
+    return Array.isArray(points) && points.length > 0;
+}
+function paddedLabelBounds(bounds, padding) {
+    if (padding === 0) {
+        return bounds;
+    }
+    return {
+        x: bounds.x - padding,
+        y: bounds.y - padding,
+        width: bounds.width + padding * 2,
+        height: bounds.height + padding * 2
+    };
+}
+function labelBoundsOverlap(first, second) {
+    const width = Math.min(first.x + first.width, second.x + second.width) - Math.max(first.x, second.x);
+    const height = Math.min(first.y + first.height, second.y + second.height) - Math.max(first.y, second.y);
+    if (width <= 0 || height <= 0) {
+        return undefined;
+    }
+    return {
+        width: normalizeNumber(width),
+        height: normalizeNumber(height),
+        area: normalizeNumber(width * height)
+    };
+}
+export function getGraphEdgeLabelOverlapDiagnostics(graph, options = {}) {
+    const padding = Math.max(0, options.padding ?? 0);
+    const candidates = [];
+    for (const edge of graph.edges) {
+        if (!hasRoutedLabel(edge)) {
+            continue;
+        }
+        const anchor = deriveGraphEdgeLabelAnchor(edge, options);
+        if (!anchor) {
+            continue;
+        }
+        candidates.push({
+            edge,
+            anchor,
+            bounds: paddedLabelBounds(anchor.bounds, padding)
+        });
+    }
+    const diagnostics = [];
+    for (let index = 0; index < candidates.length; index += 1) {
+        const first = candidates[index];
+        if (!first) {
+            continue;
+        }
+        for (let nextIndex = index + 1; nextIndex < candidates.length; nextIndex += 1) {
+            const second = candidates[nextIndex];
+            if (!second) {
+                continue;
+            }
+            const overlap = labelBoundsOverlap(first.bounds, second.bounds);
+            if (!overlap) {
+                continue;
+            }
+            diagnostics.push({
+                code: "edge-label-overlap-risk",
+                severity: "warning",
+                message: `Edge label "${second.edge.id}" overlaps the estimated label bounds for edge "${first.edge.id}".`,
+                edgeId: second.edge.id,
+                category: "layout",
+                details: {
+                    edgeId: second.edge.id,
+                    labelSide: second.anchor.side,
+                    overlapArea: overlap.area,
+                    overlapHeight: overlap.height,
+                    overlapWidth: overlap.width,
+                    overlappingEdgeId: first.edge.id,
+                    overlappingLabelSide: first.anchor.side
+                },
+                fix: {
+                    target: "layout",
+                    title: "Separate edge labels",
+                    description: "Adjust route hints, spacing, or label copy so estimated edge-label bounds do not overlap."
+                }
+            });
+        }
+    }
+    return diagnostics;
+}
+export function deriveGraphGroupBounds(graph, options = {}) {
+    const padding = options.padding ?? 16;
+    const groups = graph.groups ?? [];
+    return groups.flatMap((group) => {
+        const nodes = graph.nodes.filter((node) => node.groupId === group.id);
+        if (group.position && group.size) {
+            return [
+                {
+                    groupId: group.id,
+                    nodeIds: nodes.map((node) => node.id),
+                    position: group.position,
+                    size: group.size
+                }
+            ];
+        }
+        if (nodes.length === 0) {
+            return [];
+        }
+        const minX = Math.min(...nodes.map((node) => node.position.x));
+        const minY = Math.min(...nodes.map((node) => node.position.y));
+        const maxX = Math.max(...nodes.map((node) => node.position.x + node.size.width));
+        const maxY = Math.max(...nodes.map((node) => node.position.y + node.size.height));
+        return [
+            {
+                groupId: group.id,
+                nodeIds: nodes.map((node) => node.id),
+                position: { x: minX - padding, y: minY - padding },
+                size: { width: maxX - minX + padding * 2, height: maxY - minY + padding * 2 }
+            }
+        ];
+    });
+}
+export function routeGraphEdge(source, target, options = {}) {
+    const start = nodeCenter(source);
+    const end = nodeCenter(target);
+    const requestedKind = options.kind ?? "straight";
+    const kind = source.id === target.id ? "self-loop" : requestedKind;
+    const offset = offsetPoint(start, end, parallelOffset(options));
+    if (kind === "self-loop") {
+        const radius = options.selfLoopRadius ?? Math.max(24, Math.min(source.size.width, source.size.height) / 2);
+        const origin = nodeCenter(source);
+        const points = [
+            { x: origin.x, y: origin.y - source.size.height / 2 },
+            { x: origin.x + radius, y: origin.y - source.size.height / 2 - radius },
+            { x: origin.x + radius * 2, y: origin.y },
+            { x: origin.x + radius, y: origin.y + source.size.height / 2 + radius },
+            { x: origin.x, y: origin.y + source.size.height / 2 }
+        ];
+        const labelPosition = points[2];
+        return labelPosition ? { kind, points, labelPosition } : { kind, points };
+    }
+    const routedStart = { x: start.x + offset.x, y: start.y + offset.y };
+    const routedEnd = { x: end.x + offset.x, y: end.y + offset.y };
+    if (kind === "curve") {
+        const middle = midpoint(routedStart, routedEnd);
+        const controlOffset = offsetPoint(routedStart, routedEnd, options.parallelGap ?? 24);
+        const control = {
+            x: middle.x + controlOffset.x,
+            y: middle.y + controlOffset.y
+        };
+        return {
+            kind,
+            points: [routedStart, control, routedEnd],
+            labelPosition: control
+        };
+    }
+    if (kind === "elbow") {
+        const elbow = {
+            x: routedEnd.x,
+            y: routedStart.y
+        };
+        return {
+            kind,
+            points: [routedStart, elbow, routedEnd],
+            labelPosition: elbow
+        };
+    }
+    return {
+        kind: "straight",
+        points: [routedStart, routedEnd],
+        labelPosition: midpoint(routedStart, routedEnd)
+    };
+}
+export function getGraphBounds(graph, options = {}) {
+    const padding = options.padding ?? 24;
+    const minWidth = options.minWidth ?? 1;
+    const minHeight = options.minHeight ?? 1;
+    const includeEdges = options.includeEdges ?? true;
+    const nodePoints = graph.nodes.flatMap((node) => {
+        return [
+            node.position,
+            {
+                x: node.position.x + node.size.width,
+                y: node.position.y + node.size.height
+            }
+        ];
+    });
+    const edgePoints = includeEdges ? graph.edges.flatMap((edge) => edge.points) : [];
+    const groupPoints = deriveGraphGroupBounds(graph).flatMap((group) => {
+        return [
+            group.position,
+            {
+                x: group.position.x + group.size.width,
+                y: group.position.y + group.size.height
+            }
+        ];
+    });
+    const points = [...nodePoints, ...edgePoints, ...groupPoints];
+    if (points.length === 0) {
+        return {
+            x: -padding,
+            y: -padding,
+            width: Math.max(minWidth, padding * 2),
+            height: Math.max(minHeight, padding * 2),
+            viewBox: `${-padding} ${-padding} ${Math.max(minWidth, padding * 2)} ${Math.max(minHeight, padding * 2)}`
+        };
+    }
+    const minX = Math.min(...points.map((point) => point.x));
+    const minY = Math.min(...points.map((point) => point.y));
+    const maxX = Math.max(...points.map((point) => point.x));
+    const maxY = Math.max(...points.map((point) => point.y));
+    const x = minX - padding;
+    const y = minY - padding;
+    const width = Math.max(minWidth, maxX - minX + padding * 2);
+    const height = Math.max(minHeight, maxY - minY + padding * 2);
+    return {
+        x,
+        y,
+        width,
+        height,
+        viewBox: `${x} ${y} ${width} ${height}`
+    };
+}
+export function edgeWithPoints(edge, nodes, options = {}) {
     const source = nodes.get(edge.source);
     const target = nodes.get(edge.target);
-    const points = source && target ? [nodeCenter(source), nodeCenter(target)] : [];
-    const labelPosition = points.length === 2 && points[0] && points[1]
-        ? {
-            x: (points[0].x + points[1].x) / 2,
-            y: (points[0].y + points[1].y) / 2
-        }
-        : undefined;
-    return labelPosition ? { ...edge, points, labelPosition } : { ...edge, points };
+    const route = source && target ? routeGraphEdge(source, target, options) : undefined;
+    if (!route) {
+        return { ...edge, points: [] };
+    }
+    return route.labelPosition
+        ? { ...edge, points: route.points, labelPosition: route.labelPosition, routeKind: route.kind }
+        : { ...edge, points: route.points, routeKind: route.kind };
+}
+export function edgesWithPoints(edges, nodes, options = {}) {
+    const countsByPair = new Map();
+    const indexByPair = new Map();
+    for (const edge of edges) {
+        const key = `${edge.source}->${edge.target}`;
+        countsByPair.set(key, (countsByPair.get(key) ?? 0) + 1);
+    }
+    return edges.map((edge) => {
+        const key = `${edge.source}->${edge.target}`;
+        const parallelIndex = indexByPair.get(key) ?? 0;
+        indexByPair.set(key, parallelIndex + 1);
+        const routeOptions = {
+            parallelCount: countsByPair.get(key) ?? 1,
+            parallelIndex
+        };
+        const routeKind = options.routeByEdgeId?.[edge.id] ?? options.edgeRouteKind;
+        return edgeWithPoints(edge, nodes, {
+            ...routeOptions,
+            ...(routeKind ? { kind: routeKind } : {}),
+            ...(options.parallelGap !== undefined ? { parallelGap: options.parallelGap } : {}),
+            ...(options.selfLoopRadius !== undefined ? { selfLoopRadius: options.selfLoopRadius } : {})
+        });
+    });
 }