@graph-artifact/core 0.1.0

package/dist/layout/intersect/rectRounded.js

@@ -0,0 +1,48 @@
+/**
+ * rectRounded.ts — Rectangle intersection with border-radius compensation.
+ *
+ * The standard intersectRect returns the point where a line from center
+ * hits the sharp rectangle boundary. But when the rendered node has
+ * rounded corners (border-radius), the actual visual boundary at diagonal
+ * angles is INSIDE that sharp corner — creating a gap.
+ *
+ * This function pushes the intersection point outward along the line
+ * from center → point, proportional to how close the intersection is
+ * to a corner. At a flat edge (top/bottom/side center), compensation
+ * is zero. At a 45° corner, it's maximal.
+ *
+ * The compensation formula: at corners, the rounded boundary is inset
+ * by r - r*cos(θ) where θ is the angle from the corner axis. We
+ * approximate this by measuring how "cornery" the intersection is
+ * (both x and y are close to their maximums) and pushing outward.
+ */
+import { intersectRect } from './rect.js';
+export function intersectRectRounded(node, point, borderRadius) {
+    // Start with the sharp intersection
+    const sharp = intersectRect(node, point);
+    if (borderRadius <= 0)
+        return sharp;
+    const w = node.width / 2;
+    const h = node.height / 2;
+    // How far from center is the intersection, as a ratio of half-width/height
+    const rx = Math.abs(sharp.x - node.x) / w; // 0..1
+    const ry = Math.abs(sharp.y - node.y) / h; // 0..1
+    // "Cornerness": both rx and ry near 1.0 means we're at a corner
+    // At flat edges, one of these will be ~1.0 and the other ~0.0
+    const cornerness = rx * ry; // 0 at edges, ~1 at corners
+    if (cornerness < 0.01)
+        return sharp; // flat edge, no compensation needed
+    // Push the intersection outward along the center→point direction
+    // Maximum compensation at 45° corners: r * (1 - cos(45°)) ≈ 0.293 * r
+    const maxCompensation = borderRadius * 0.293;
+    const compensation = maxCompensation * cornerness;
+    const dx = point.x - node.x;
+    const dy = point.y - node.y;
+    const dist = Math.hypot(dx, dy);
+    if (dist < 1e-6)
+        return sharp;
+    return {
+        x: sharp.x + (dx / dist) * compensation,
+        y: sharp.y + (dy / dist) * compensation,
+    };
+}

package/dist/layout/mindmapLayout.d.ts

@@ -0,0 +1,13 @@
+import type { Node } from '@xyflow/react';
+import type { ParsedGraph, NodeMetadata } from '../types.js';
+import type { Theme } from '../ThemeContext.js';
+import type { NodePosition, EdgeWaypoints, HandlePositions } from './types.js';
+interface MindmapLayoutResult {
+    nodes: Node[];
+    positions: Map<string, NodePosition>;
+    edgeWaypoints: EdgeWaypoints[];
+    handles: HandlePositions;
+    diamondEdgeHandles: Map<number, string>;
+}
+export declare function layoutMindmapGraph(parsed: ParsedGraph, theme: Theme, metadata?: Record<string, NodeMetadata>): MindmapLayoutResult;
+export {};

package/dist/layout/mindmapLayout.js

@@ -0,0 +1,299 @@
+import { getConfig, getLayoutMapping } from '../config.js';
+import { nodeSize } from './dagre/nodeSizing.js';
+import { directionToHandles } from './dagre/index.js';
+import { computeForwardEdgeCounts, computeDiamondAssignments } from './edges/index.js';
+function clamp255(v) {
+    return Math.max(0, Math.min(255, Math.round(v)));
+}
+function shadeHex(hex, factor) {
+    const clean = hex.replace('#', '');
+    if (!/^[0-9a-fA-F]{6}$/.test(clean))
+        return hex;
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    const rr = clamp255(r * (1 + factor));
+    const gg = clamp255(g * (1 + factor));
+    const bb = clamp255(b * (1 + factor));
+    return `#${rr.toString(16).padStart(2, '0')}${gg.toString(16).padStart(2, '0')}${bb.toString(16).padStart(2, '0')}`;
+}
+function buildBranchPalette(base, orange2, orange3) {
+    // Intentionally stronger but still orange-family variants so branches are
+    // visibly distinct while preserving the product's orange visual language.
+    return [
+        shadeHex(base, -0.22),
+        shadeHex(base, -0.12),
+        base,
+        orange2,
+        orange3,
+        shadeHex(base, 0.14),
+    ];
+}
+function centerOf(pos) {
+    return { x: pos.x + pos.width / 2, y: pos.y + pos.height / 2 };
+}
+function rootsOf(nodes, edges) {
+    const incoming = new Map();
+    for (const n of nodes)
+        incoming.set(n.id, 0);
+    for (const e of edges)
+        incoming.set(e.target, (incoming.get(e.target) ?? 0) + 1);
+    return nodes.map((n) => n.id).filter((id) => (incoming.get(id) ?? 0) === 0);
+}
+function buildChildren(edges) {
+    const out = new Map();
+    for (const e of edges) {
+        const list = out.get(e.source) ?? [];
+        list.push(e.target);
+        out.set(e.source, list);
+    }
+    return out;
+}
+function subtreeLeafCount(id, children) {
+    const kids = children.get(id) ?? [];
+    if (kids.length === 0)
+        return 1;
+    return kids.reduce((sum, kid) => sum + subtreeLeafCount(kid, children), 0);
+}
+function normalizeDeg(d) {
+    let out = d;
+    while (out < -180)
+        out += 360;
+    while (out > 180)
+        out -= 360;
+    return out;
+}
+function resolveMindmapOverlaps(centers, sizes, rootId, rootCenter) {
+    const ids = Array.from(centers.keys()).filter((id) => id !== rootId);
+    const GAP = 10;
+    const MAX_ITERS = 16;
+    function overlapAmount(a, b) {
+        const ca = centers.get(a);
+        const cb = centers.get(b);
+        const sa = sizes.get(a);
+        const sb = sizes.get(b);
+        const dx = Math.abs(ca.x - cb.x);
+        const dy = Math.abs(ca.y - cb.y);
+        const ox = sa.width / 2 + sb.width / 2 + GAP - dx;
+        const oy = sa.height / 2 + sb.height / 2 + GAP - dy;
+        return { x: ox, y: oy };
+    }
+    function pushOutward(id, amount) {
+        const c = centers.get(id);
+        let vx = c.x - rootCenter.x;
+        let vy = c.y - rootCenter.y;
+        const len = Math.hypot(vx, vy);
+        if (len < 1e-6) {
+            vx = 1;
+            vy = 0;
+        }
+        else {
+            vx /= len;
+            vy /= len;
+        }
+        centers.set(id, { x: c.x + vx * amount, y: c.y + vy * amount });
+    }
+    for (let iter = 0; iter < MAX_ITERS; iter++) {
+        let moved = false;
+        for (let i = 0; i < ids.length; i++) {
+            for (let j = i + 1; j < ids.length; j++) {
+                const a = ids[i];
+                const b = ids[j];
+                const ov = overlapAmount(a, b);
+                if (ov.x > 0 && ov.y > 0) {
+                    const push = Math.min(24, Math.max(6, Math.min(ov.x, ov.y) * 0.55));
+                    pushOutward(a, push * 0.5);
+                    pushOutward(b, push * 0.5);
+                    moved = true;
+                }
+            }
+        }
+        if (!moved)
+            break;
+    }
+}
+export function layoutMindmapGraph(parsed, theme, metadata) {
+    const { layout } = getConfig();
+    const rfNodeType = getLayoutMapping(parsed.diagramType);
+    const sizes = new Map();
+    for (const node of parsed.nodes) {
+        sizes.set(node.id, nodeSize(node, 'mindmap', layout.nodeSizing));
+    }
+    const roots = rootsOf(parsed.nodes, parsed.edges);
+    const rootId = roots[0] ?? parsed.nodes[0]?.id;
+    if (!rootId) {
+        return {
+            nodes: [],
+            positions: new Map(),
+            edgeWaypoints: [],
+            handles: directionToHandles('LR'),
+            diamondEdgeHandles: new Map(),
+        };
+    }
+    // Keep root sizing stable between layout and render so edge intersections
+    // use the same geometry the DOM actually renders.
+    const rootSize = sizes.get(rootId);
+    if (rootSize) {
+        sizes.set(rootId, {
+            width: Math.max(rootSize.width, 130),
+            height: Math.max(rootSize.height, 130),
+        });
+    }
+    const children = buildChildren(parsed.edges);
+    const centers = new Map();
+    const nodeBranch = new Map();
+    const branchPalette = buildBranchPalette(theme.color.orange1, theme.color.orange2, theme.color.orange3);
+    const rootCenter = { x: 560, y: 380 };
+    centers.set(rootId, rootCenter);
+    nodeBranch.set(rootId, -1);
+    const level1 = children.get(rootId) ?? [];
+    const r1 = 180;
+    // Keep first-level branches evenly spaced around the root so trunk lines
+    // have balanced separation at the center. Descendants still fan out within
+    // each branch wedge based on subtree shape.
+    const n1 = Math.max(1, level1.length);
+    const baseStart = -150; // deterministic orientation similar to Mermaid
+    const step = 360 / n1;
+    const branchWedges = new Map();
+    for (let i = 0; i < level1.length; i++) {
+        const id = level1[i];
+        const center = normalizeDeg(baseStart + i * step);
+        // Wider wedges when there are fewer top-level branches.
+        const span = Math.max(42, Math.min(84, step * 0.78));
+        branchWedges.set(id, { center, span });
+    }
+    function placeSubtree(parentId, centerDeg, spanDeg, depth) {
+        const kids = children.get(parentId) ?? [];
+        if (kids.length === 0)
+            return;
+        const parent = centers.get(parentId);
+        const r = r1 + (depth - 1) * 140;
+        const leafWeights = kids.map((kid) => subtreeLeafCount(kid, children));
+        const leafSum = Math.max(1, leafWeights.reduce((a, b) => a + b, 0));
+        const minAngles = kids.map((kid) => {
+            const size = sizes.get(kid);
+            const desiredArc = Math.max(size.width + 40, 90);
+            const rad = 2 * Math.atan(desiredArc / (2 * r));
+            const deg = (rad * 180) / Math.PI;
+            return Math.max(10, Math.min(36, deg));
+        });
+        const minTotal = minAngles.reduce((a, b) => a + b, 0) + Math.max(0, kids.length - 1) * 4;
+        const effectiveSpan = Math.max(spanDeg, minTotal);
+        const extra = Math.max(0, effectiveSpan - minTotal);
+        let c = centerDeg - effectiveSpan / 2;
+        for (let i = 0; i < kids.length; i++) {
+            const weightedExtra = extra * (leafWeights[i] / leafSum);
+            const childSpan = minAngles[i] + weightedExtra;
+            const childCenter = c + childSpan / 2;
+            const rr = (Math.PI / 180) * childCenter;
+            const p = {
+                x: parent.x + Math.cos(rr) * r,
+                y: parent.y + Math.sin(rr) * r,
+            };
+            centers.set(kids[i], p);
+            nodeBranch.set(kids[i], nodeBranch.get(parentId) ?? 0);
+            // Taper span deeper in the tree so leaves fan outward but stay grouped.
+            placeSubtree(kids[i], childCenter, Math.max(18, childSpan * 0.72), depth + 1);
+            c += childSpan + 4;
+        }
+    }
+    level1.forEach((child, i) => {
+        const wedge = branchWedges.get(child) ?? { center: -150 + i * 40, span: 30 };
+        const rr = (Math.PI / 180) * wedge.center;
+        centers.set(child, {
+            x: rootCenter.x + Math.cos(rr) * r1,
+            y: rootCenter.y + Math.sin(rr) * r1,
+        });
+        nodeBranch.set(child, i % branchPalette.length);
+        placeSubtree(child, wedge.center, Math.max(28, wedge.span * 0.9), 1);
+    });
+    if (roots.length > 1) {
+        roots.slice(1).forEach((rid, i) => {
+            if (centers.has(rid))
+                return;
+            centers.set(rid, { x: rootCenter.x + (i + 1) * 180, y: rootCenter.y + 240 });
+            nodeBranch.set(rid, i % branchPalette.length);
+            placeSubtree(rid, normalizeDeg(35 + i * 20), 26, 1);
+        });
+    }
+    parsed.nodes.forEach((node, i) => {
+        if (!centers.has(node.id)) {
+            centers.set(node.id, {
+                x: rootCenter.x + ((i % 4) - 1.5) * 210,
+                y: rootCenter.y + 340 + Math.floor(i / 4) * 130,
+            });
+            nodeBranch.set(node.id, i % branchPalette.length);
+        }
+    });
+    // Final pass: prevent leaf/card overlaps while preserving branch directions.
+    resolveMindmapOverlaps(centers, sizes, rootId, rootCenter);
+    const positions = new Map();
+    parsed.nodes.forEach((node) => {
+        const c = centers.get(node.id);
+        const s = sizes.get(node.id);
+        positions.set(node.id, {
+            x: c.x - s.width / 2,
+            y: c.y - s.height / 2,
+            width: s.width,
+            height: s.height,
+        });
+    });
+    const handles = directionToHandles('LR');
+    const fwCounts = computeForwardEdgeCounts(parsed.edges, positions, 'LR');
+    const diamondAssignments = computeDiamondAssignments(parsed.nodes, parsed.edges, positions, 'LR');
+    const nodes = parsed.nodes.map((node) => {
+        const pos = positions.get(node.id);
+        const isRoot = node.id === rootId;
+        const branch = Math.max(0, nodeBranch.get(node.id) ?? 0);
+        const bg = isRoot ? theme.color.orange1 : branchPalette[branch % branchPalette.length];
+        return {
+            id: node.id,
+            position: { x: pos.x, y: pos.y },
+            data: {
+                label: node.label,
+                shape: isRoot ? 'circle' : 'round',
+                attributes: node.attributes,
+                properties: node.properties,
+                methods: node.methods,
+                meta: metadata?.[node.id],
+                handles,
+                fwIn: fwCounts.incoming.get(node.id) ?? 0,
+                fwOut: fwCounts.outgoing.get(node.id) ?? 0,
+                diamondHandleConfig: diamondAssignments.handleConfigs.get(node.id),
+                layoutWidth: pos.width,
+                layoutHeight: pos.height,
+                nodeBgColor: bg,
+                nodeTextColor: theme.color.white,
+            },
+            type: rfNodeType,
+        };
+    });
+    const edgeWaypoints = parsed.edges.map((edge) => {
+        const src = positions.get(edge.source);
+        const tgt = positions.get(edge.target);
+        if (!src || !tgt)
+            return { source: edge.source, target: edge.target, points: [] };
+        const s = centerOf(src);
+        const t = centerOf(tgt);
+        const mid = { x: (s.x + t.x) / 2, y: (s.y + t.y) / 2 };
+        const out = { x: mid.x - rootCenter.x, y: mid.y - rootCenter.y };
+        const len = Math.hypot(out.x, out.y) || 1;
+        const bend = Math.max(22, Math.min(38, len * 0.08));
+        const control = {
+            x: mid.x + (out.x / len) * bend,
+            y: mid.y + (out.y / len) * bend,
+        };
+        return {
+            source: edge.source,
+            target: edge.target,
+            points: [s, control, t],
+        };
+    });
+    return {
+        nodes,
+        positions,
+        edgeWaypoints,
+        handles,
+        diamondEdgeHandles: diamondAssignments.edgeHandles,
+    };
+}

package/dist/layout/sequenceLayout.d.ts

@@ -0,0 +1,24 @@
+/**
+ * sequenceLayout.ts — Grid-based layout for sequence diagrams.
+ *
+ * Sequence diagrams don't use dagre. Instead we lay out participants
+ * in a fixed horizontal row and create invisible anchor nodes along
+ * each lifeline at each message row. Edges connect anchor-to-anchor.
+ *
+ * Message labels are rendered as positioned node components (above the line),
+ * not as React Flow edge labels. Autonumber indicators appear as numbered
+ * circles on the source lifeline.
+ *
+ * Row heights are computed dynamically based on content — multi-line labels
+ * and notes get more vertical space so nothing overlaps.
+ *
+ * Notes span the full width between the participants they're attached to,
+ * matching standard sequence diagram rendering.
+ */
+import type { Node, Edge } from '@xyflow/react';
+import type { SequenceData, NodeMetadata } from '../types.js';
+import type { Theme } from '../ThemeContext.js';
+export declare function layoutSequenceDiagram(sequence: SequenceData, theme: Theme, metadata?: Record<string, NodeMetadata>): {
+    nodes: Node[];
+    edges: Edge[];
+};