@world-engines/authoring-ui 0.1.0-alpha.0

package/dist/ladybug/GraphCanvas.js

@@ -0,0 +1,1439 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, memo, useMemo, useRef, useState } from "react";
+import ReactFlow, { Background, Handle, Position, ReactFlowProvider, useReactFlow, useUpdateNodeInternals } from "reactflow";
+import { GraphEdge } from "./GraphEdge.js";
+import { computeGraphEdgeGeometry } from "./graph-edge-geometry.js";
+import { GRAPH_EDGE_OCCLUSION_HALO, buildGraphEdgeOcclusionIndex } from "./graph-edge-mask.js";
+import { clampGraphGroupTranslation, GRAPH_GROUP_LABEL_MAX_LENGTH, graphGroupBoundsFromPoints, graphGroupColor, isGraphGroupBoundsValid, nodesInsideGraphGroup, normalizeGraphGroupLabel, resizeGraphGroupSide } from "./graph-groups.js";
+import { constrainGraphNodeMetrics, graphNodeMetrics } from "./graph-node-metrics.js";
+import { PHYSICS_GRID_SIZE, PHYSICS_SLEEP_SPEED, initBodies, snapToGrid, stepPhysics, tryFindGridSlot } from "./graph-physics.js";
+import { createGraphLayoutSolver } from "./graph-layout-solver.js";
+import { NODE_DIAMETER, requiredNodeCenterDistance, resolveOverlaps } from "./graph-placement.js";
+const CANONICAL_NODE_ANCHOR_RADIUS = NODE_DIAMETER / 2;
+const NODE_DRAG_THRESHOLD_PX = 4;
+const POSITION_NOOP_EPSILON_PX = 0.5;
+const DISTANT_LABEL_ZOOM_THRESHOLD = 0.28;
+const CENTER_HANDLE_STYLE = Object.freeze({
+    // ReactFlow 11 的 Position.Top 使用 Handle 上边中点；+0.5px 抵消 1px 高度。
+    top: "calc(50% + 0.5px)",
+    right: "auto",
+    bottom: "auto",
+    left: "50%",
+    width: "1px",
+    height: "1px",
+    minWidth: 0,
+    minHeight: 0,
+    border: 0,
+    opacity: 0,
+    pointerEvents: "none",
+    transform: "translate(-50%, -50%)"
+});
+const emptyMetrics = Object.freeze({
+    contentLength: 0,
+    diameter: NODE_DIAMETER,
+    radius: NODE_DIAMETER / 2,
+    truncated: false,
+    saturated: false
+});
+const metricsForNode = (node, isNameAttrKey) => {
+    if (node.metrics !== undefined)
+        return constrainGraphNodeMetrics(node.metrics);
+    if (node.content === undefined)
+        return emptyMetrics;
+    return graphNodeMetrics(node.content, isNameAttrKey);
+};
+export const graphNodeContentTitle = (label, metrics) => `${label} · ${metrics.truncated ? "至少 " : ""}${metrics.contentLength} 字符${metrics.saturated ? " · 尺寸已达上限" : ""}`;
+export const graphGlyphKind = (kind) => {
+    switch (kind.trim().toLocaleLowerCase()) {
+        case "character":
+        case "person":
+        case "npc":
+            return "person";
+        case "location":
+        case "place":
+            return "place";
+        case "faction":
+            return "faction";
+        case "item":
+            return "item";
+        case "event":
+            return "event";
+        default:
+            return "neutral";
+    }
+};
+function KindGlyph({ kind }) {
+    const glyph = graphGlyphKind(kind);
+    return _jsxs("svg", { "aria-hidden": "true", className: "shared-graph-node__glyph", "data-graph-glyph": glyph, viewBox: "0 0 24 24", children: [glyph === "person" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "8", r: "3" }), _jsx("path", { d: "M5.5 20c.7-4 3-6 6.5-6s5.8 2 6.5 6" })] }) : null, glyph === "place" ? _jsxs(_Fragment, { children: [_jsx("path", { d: "M12 21s6-5.3 6-11a6 6 0 1 0-12 0c0 5.7 6 11 6 11Z" }), _jsx("circle", { cx: "12", cy: "10", r: "2" })] }) : null, glyph === "faction" ? _jsxs(_Fragment, { children: [_jsx("path", { d: "M12 3 19 6v5c0 4.6-2.7 7.8-7 10-4.3-2.2-7-5.4-7-10V6l7-3Z" }), _jsx("path", { d: "M9 12h6M12 9v6" })] }) : null, glyph === "item" ? _jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 7 4-7 4-7-4 7-4Z" }), _jsx("path", { d: "m5 7v9l7 5 7-5V7M12 11v10" })] }) : null, glyph === "event" ? _jsx("path", { d: "m13.5 2-7 11H12l-1.5 9 7-12H12l1.5-8Z" }) : null, glyph === "neutral" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "7" }), _jsx("path", { d: "M8.5 12h7M12 8.5v7" })] }) : null] });
+}
+const CanvasNode = memo(function CanvasNode({ data, selected }) {
+    const isSelected = selected || data.selected;
+    const classes = [
+        "shared-graph-node",
+        `shared-graph-node--kind-${data.kind}`,
+        data.vector === undefined ? "" : `shared-graph-node--vec-${data.vector}`,
+        isSelected ? "is-selected" : "",
+        data.adjacent ? "is-adjacent" : "",
+        data.muted ? "is-muted" : "",
+        data.searchMatch ? "is-search-match" : "",
+        data.highlighted ? "is-highlighted" : "",
+        data.remoteHighlighted ? "is-remote-highlighted" : "",
+        data.disabled ? "is-disabled" : "",
+        data.pending ? "is-pending" : ""
+    ].filter(Boolean).join(" ");
+    const metrics = data.resolvedMetrics;
+    return _jsxs("div", { "aria-disabled": data.disabled, "aria-label": `${data.label} · ${data.kind}`, className: classes, "data-graph-node-id": data.id, onClick: () => { if (!data.interactionDisabled)
+            data.onSelect(); }, onContextMenu: (event) => {
+            event.preventDefault();
+            if (!data.interactionDisabled)
+                data.onContextMenu?.(event);
+        }, onKeyDown: (event) => {
+            if (!data.interactionDisabled && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                data.onSelect();
+            }
+        }, onPointerDown: (event) => {
+            if (event.button === 2 && !data.interactionDisabled)
+                data.onRightPointerDown?.(event);
+        }, role: "button", style: {
+            "--we-graph-node-size": `${metrics.diameter}px`,
+            "--we-graph-node-radius": `${metrics.radius}px`
+        }, tabIndex: data.interactionDisabled ? -1 : 0, title: graphNodeContentTitle(data.label, metrics), children: [_jsx(Handle, { className: "shared-graph-node__handle", isConnectable: false, position: Position.Top, style: CENTER_HANDLE_STYLE, type: "target" }), _jsx("span", { className: "shared-graph-node__circle", children: _jsx(KindGlyph, { kind: data.kind }) }), _jsx("span", { className: "shared-graph-node__label", children: data.label }), _jsx(Handle, { className: "shared-graph-node__handle", isConnectable: false, position: Position.Top, style: CENTER_HANDLE_STYLE, type: "source" })] });
+}, (previous, next) => {
+    const left = previous.data;
+    const right = next.data;
+    return previous.selected === next.selected
+        && left.id === right.id
+        && left.label === right.label
+        && left.kind === right.kind
+        && left.disabled === right.disabled
+        && left.interactionDisabled === right.interactionDisabled
+        && left.pending === right.pending
+        && left.vector === right.vector
+        && left.selected === right.selected
+        && left.adjacent === right.adjacent
+        && left.muted === right.muted
+        && left.searchMatch === right.searchMatch
+        && left.highlighted === right.highlighted
+        && left.remoteHighlighted === right.remoteHighlighted
+        && left.resolvedMetrics.contentLength === right.resolvedMetrics.contentLength
+        && left.resolvedMetrics.diameter === right.resolvedMetrics.diameter
+        && left.resolvedMetrics.truncated === right.resolvedMetrics.truncated
+        && left.resolvedMetrics.saturated === right.resolvedMetrics.saturated
+        && (left.onContextMenu === undefined) === (right.onContextMenu === undefined)
+        && (left.onRightPointerDown === undefined) === (right.onRightPointerDown === undefined);
+});
+const edgeTypes = { sharedGraphEdge: GraphEdge };
+const GROUP_NODE_PREFIX = "__we_graph_group__:";
+const CanvasGroup = memo(function CanvasGroup({ data }) {
+    const label = data.group.label?.trim() || data.group.id;
+    const [renaming, setRenaming] = useState(false);
+    const [draftLabel, setDraftLabel] = useState(label);
+    const renameInputRef = useRef(null);
+    const renamingRef = useRef(false);
+    useEffect(() => {
+        if (!renamingRef.current)
+            setDraftLabel(label);
+    }, [label]);
+    useEffect(() => {
+        if (!renaming)
+            return;
+        renameInputRef.current?.focus();
+        renameInputRef.current?.select();
+    }, [renaming]);
+    useEffect(() => {
+        if (data.renameRequest === undefined)
+            return;
+        beginRename();
+        // renameRequest 是一次性外部意图；相同值不重复消费。
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data.renameRequest]);
+    const beginRename = () => {
+        if (data.onRename === undefined || data.draft)
+            return;
+        renamingRef.current = true;
+        setDraftLabel(label);
+        setRenaming(true);
+    };
+    const finishRename = (save) => {
+        if (!renamingRef.current)
+            return;
+        renamingRef.current = false;
+        setRenaming(false);
+        if (!save) {
+            setDraftLabel(label);
+            return;
+        }
+        const normalized = normalizeGraphGroupLabel(draftLabel);
+        if (normalized === null || normalized === label) {
+            setDraftLabel(label);
+            return;
+        }
+        data.onRename?.(normalized);
+    };
+    const classes = [
+        "shared-graph-group",
+        data.selected ? "is-selected" : "",
+        data.draft ? "is-draft" : "",
+        data.blocked ? "is-blocked" : "",
+        data.dropTarget ? "is-drop-target" : "",
+        renaming ? "is-renaming" : ""
+    ].filter(Boolean).join(" ");
+    return _jsxs("div", { "aria-label": `分组：${label}`, "aria-pressed": data.selected, className: classes, "data-graph-group-height": data.group.height, "data-graph-group-id": data.group.id, "data-graph-group-width": data.group.width, "data-graph-group-x": data.group.x, "data-graph-group-y": data.group.y, onClick: (event) => {
+            event.stopPropagation();
+            data.onSelect?.();
+        }, onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                data.onSelect?.();
+            }
+        }, onContextMenu: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            data.onContextMenu?.(event);
+        }, role: "button", style: { "--we-graph-group-color": data.color }, tabIndex: data.draft ? -1 : 0, children: [renaming ? _jsx("input", { "aria-label": `重命名分组${label}`, className: "shared-graph-group__name-input nodrag nopan", maxLength: GRAPH_GROUP_LABEL_MAX_LENGTH, onBlur: () => finishRename(true), onChange: (event) => setDraftLabel(event.currentTarget.value), onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        finishRename(true);
+                    }
+                    else if (event.key === "Escape") {
+                        event.preventDefault();
+                        finishRename(false);
+                    }
+                }, onPointerDown: (event) => event.stopPropagation(), ref: renameInputRef, value: draftLabel }) : _jsx("span", { className: "shared-graph-group__label nodrag nopan", onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    beginRename();
+                }, children: label }), data.selected && !data.draft ? ["top", "right", "bottom", "left"].map((side) => _jsx("span", { "aria-label": `调整分组${label}${side === "top" ? "上边" : side === "right" ? "右边" : side === "bottom" ? "下边" : "左边"}`, className: `shared-graph-group__resize shared-graph-group__resize--${side} nodrag nopan`, onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    data.onResizePointerDown?.(side, event);
+                }, role: "separator" }, side)) : null] });
+});
+const graphNodeTypes = { sharedGraphNode: CanvasNode, sharedGraphGroup: CanvasGroup };
+const gridPosition = (index) => ({
+    x: 72 + (index % 5) * 168,
+    y: 64 + Math.floor(index / 5) * 144
+});
+const normalizeQuery = (query) => query.trim().toLocaleLowerCase();
+const canonicalCenter = (position) => ({
+    x: position.x + CANONICAL_NODE_ANCHOR_RADIUS,
+    y: position.y + CANONICAL_NODE_ANCHOR_RADIUS
+});
+const canonicalTopLeft = (center) => ({
+    x: center.x - CANONICAL_NODE_ANCHOR_RADIUS,
+    y: center.y - CANONICAL_NODE_ANCHOR_RADIUS
+});
+const graphGroupNodeId = (id) => `${GROUP_NODE_PREFIX}${id}`;
+const graphGroupIdFromNodeId = (id) => id.startsWith(GROUP_NODE_PREFIX) ? id.slice(GROUP_NODE_PREFIX.length) : null;
+const samePosition = (left, right) => Math.abs(left.x - right.x) < POSITION_NOOP_EPSILON_PX
+    && Math.abs(left.y - right.y) < POSITION_NOOP_EPSILON_PX;
+const nextGraphGroupId = (groups) => {
+    const used = new Set(groups.map((group) => group.id));
+    let suffix = groups.length + 1;
+    while (used.has(`group-${suffix}`))
+        suffix += 1;
+    return `group-${suffix}`;
+};
+const clampGroupMemberTranslation = (requested, memberIds, positions, metricsById) => {
+    if (memberIds.length === 0)
+        return requested;
+    const members = new Set(memberIds);
+    const steps = Math.max(1, Math.ceil(Math.max(Math.abs(requested.x), Math.abs(requested.y)) / PHYSICS_GRID_SIZE));
+    let lastSafe = { x: 0, y: 0 };
+    for (let step = 1; step <= steps; step += 1) {
+        const raw = {
+            x: requested.x * step / steps,
+            y: requested.y * step / steps
+        };
+        const candidate = snapToGrid(raw.x, raw.y);
+        let safe = true;
+        for (const memberId of memberIds) {
+            const memberPosition = positions[memberId];
+            if (memberPosition === undefined)
+                continue;
+            const memberCenter = canonicalCenter(memberPosition);
+            const memberRadius = metricsById.get(memberId)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+            for (const [otherId, otherPosition] of Object.entries(positions)) {
+                if (members.has(otherId))
+                    continue;
+                const otherCenter = canonicalCenter(otherPosition);
+                const otherRadius = metricsById.get(otherId)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+                const minimum = requiredNodeCenterDistance(memberRadius, otherRadius);
+                if (Math.hypot(memberCenter.x + candidate.x - otherCenter.x, memberCenter.y + candidate.y - otherCenter.y) < minimum) {
+                    safe = false;
+                    break;
+                }
+            }
+            if (!safe)
+                break;
+        }
+        if (!safe)
+            return lastSafe;
+        lastSafe = candidate;
+    }
+    return lastSafe;
+};
+export function groupGraphRelations(relations) {
+    const groups = new Map();
+    for (const relation of relations) {
+        const source = relation.source <= relation.target ? relation.source : relation.target;
+        const target = relation.source <= relation.target ? relation.target : relation.source;
+        const pairId = `pair:${JSON.stringify([source, target])}`;
+        const existing = groups.get(pairId);
+        if (existing === undefined) {
+            groups.set(pairId, { pairId, source, target, relations: [relation] });
+        }
+        else {
+            existing.relations.push(relation);
+        }
+    }
+    return [...groups.values()].map((group) => ({
+        pairId: group.pairId,
+        source: group.source,
+        target: group.target,
+        relationIds: group.relations.map((relation) => relation.id),
+        relations: group.relations
+    }));
+}
+const sameViewport = (left, right) => left !== null
+    && left.x === right.x
+    && left.y === right.y
+    && left.zoom === right.zoom;
+function GraphContextMenu({ actions, clientX, clientY, onClose }) {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        menuRef.current?.querySelector("[role='menuitem']")?.focus();
+        const closeOutside = (event) => {
+            if (menuRef.current?.contains(event.target))
+                return;
+            onClose();
+        };
+        const closeOnEscape = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("pointerdown", closeOutside, true);
+        window.addEventListener("keydown", closeOnEscape);
+        window.addEventListener("resize", onClose);
+        return () => {
+            window.removeEventListener("pointerdown", closeOutside, true);
+            window.removeEventListener("keydown", closeOnEscape);
+            window.removeEventListener("resize", onClose);
+        };
+    }, [onClose]);
+    if (actions.length === 0)
+        return null;
+    const width = 184;
+    const height = actions.length * 34 + 12;
+    const left = Math.max(8, Math.min(clientX, window.innerWidth - width - 8));
+    const top = Math.max(8, Math.min(clientY, window.innerHeight - height - 8));
+    return _jsx("div", { "aria-label": "\u56FE\u8C31\u64CD\u4F5C\u83DC\u5355", className: "shared-graph-context-menu", "data-graph-context-menu": "true", onContextMenu: (event) => event.preventDefault(), onKeyDown: (event) => {
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "Home" && event.key !== "End")
+                return;
+            event.preventDefault();
+            const items = [...event.currentTarget.querySelectorAll("[role='menuitem']")];
+            if (items.length === 0)
+                return;
+            const current = items.indexOf(document.activeElement);
+            const next = event.key === "Home"
+                ? 0
+                : event.key === "End"
+                    ? items.length - 1
+                    : event.key === "ArrowDown"
+                        ? (current + 1 + items.length) % items.length
+                        : (current - 1 + items.length) % items.length;
+            items[next]?.focus();
+        }, ref: menuRef, role: "menu", style: { left, top }, children: actions.map((action) => _jsx("button", { className: action.danger ? "is-danger" : undefined, onClick: () => {
+                onClose();
+                action.run();
+            }, role: "menuitem", type: "button", children: action.label }, action.id)) });
+}
+/**
+ * 同步执行 editor 成熟 physics tick；坐标输入输出均为 canonical 48px node 左上角。
+ * 只返回最终投影，调用方可在一次交互结束后单次持久化。
+ */
+export function forceLayout(nodes, current, relations = [], isNameAttrKey) {
+    const metrics = new Map(nodes.map((node) => [node.id, metricsForNode(node, isNameAttrKey)]));
+    const physicsEdges = relations.map((relation) => ({
+        from: relation.source,
+        to: relation.target
+    }));
+    const bodies = initBodies(nodes.map((node, index) => {
+        const nodeMetrics = metrics.get(node.id) ?? emptyMetrics;
+        const position = current[node.id] ?? gridPosition(index);
+        return {
+            id: node.id,
+            x: position.x + CANONICAL_NODE_ANCHOR_RADIUS,
+            y: position.y + CANONICAL_NODE_ANCHOR_RADIUS,
+            radius: nodeMetrics.radius
+        };
+    }), physicsEdges);
+    let settledTicks = 0;
+    for (let tick = 0; tick < 240 && settledTicks < 12; tick += 1) {
+        stepPhysics(bodies, physicsEdges, 0.032);
+        const moving = bodies.some((body) => Math.hypot(body.vx, body.vy) >= PHYSICS_SLEEP_SPEED);
+        settledTicks = moving ? 0 : settledTicks + 1;
+    }
+    const spaced = resolveOverlaps(bodies.map((body) => ({
+        id: body.id,
+        position: {
+            x: Math.round(body.x - CANONICAL_NODE_ANCHOR_RADIUS),
+            y: Math.round(body.y - CANONICAL_NODE_ANCHOR_RADIUS)
+        },
+        ...(body.radius === undefined ? {} : { radius: body.radius })
+    })));
+    return Object.fromEntries(spaced.map((node) => [node.id, node.position]));
+}
+function LineIcon({ kind }) {
+    const path = kind === "plus"
+        ? "M12 5v14M5 12h14"
+        : kind === "minus"
+            ? "M5 12h14"
+            : kind === "fit"
+                ? "M9 5H5v4M15 5h4v4M9 19H5v-4M15 19h4v-4"
+                : kind === "force"
+                    ? "M6 7l6-3 6 3v10l-6 3-6-3V7Zm0 0 6 3 6-3M12 10v10"
+                    : "M5 7V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4";
+    return _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: _jsx("path", { d: path, fill: "none" }) });
+}
+function CanvasControls({ canCommit, canCreateGroup, drawingGroup, onForce, onToggleGroup }) {
+    const flow = useReactFlow();
+    return _jsxs("div", { "aria-label": "\u56FE\u8C31\u89C6\u56FE\u63A7\u5236", className: "shared-graph-controls", children: [_jsx("button", { "aria-label": "\u653E\u5927", onClick: () => { void flow.zoomIn({ duration: 160 }); }, type: "button", children: _jsx(LineIcon, { kind: "plus" }) }), _jsx("button", { "aria-label": "\u7F29\u5C0F", onClick: () => { void flow.zoomOut({ duration: 160 }); }, type: "button", children: _jsx(LineIcon, { kind: "minus" }) }), _jsx("button", { "aria-label": "\u9002\u5408\u89C6\u56FE", onClick: () => { void flow.fitView({ padding: 0.16, duration: 200 }); }, type: "button", children: _jsx(LineIcon, { kind: "fit" }) }), _jsx("button", { "aria-label": "\u81EA\u52A8\u5E03\u5C40", disabled: !canCommit, onClick: onForce, type: "button", children: _jsx(LineIcon, { kind: "force" }) }), _jsx("button", { "aria-label": drawingGroup ? "取消新建分组" : "新建分组", "aria-pressed": drawingGroup, disabled: !canCreateGroup, onClick: onToggleGroup, type: "button", children: _jsx(LineIcon, { kind: "group" }) })] });
+}
+function GraphCanvasInner(props) {
+    const flow = useReactFlow();
+    const updateNodeInternals = useUpdateNodeInternals();
+    const edgeMaskId = `we-graph-edge-mask-${useId().replaceAll(":", "")}`;
+    const maskCircleByNodeIdRef = useRef(new Map());
+    const canvasRef = useRef(null);
+    const initialLabelZoom = props.viewport?.zoom !== undefined
+        && Number.isFinite(props.viewport.zoom)
+        && props.viewport.zoom > 0
+        ? props.viewport.zoom
+        : 1;
+    const labelZoomRef = useRef(initialLabelZoom);
+    const [edgeOcclusionZoom, setEdgeOcclusionZoom] = useState(initialLabelZoom);
+    const updateLabelZoom = useCallback((zoom) => {
+        if (!Number.isFinite(zoom) || zoom <= 0 || canvasRef.current === null)
+            return;
+        labelZoomRef.current = zoom;
+        canvasRef.current.style.setProperty("--we-graph-zoom", String(zoom));
+        canvasRef.current.style.setProperty("--we-graph-inverse-zoom", String(1 / zoom));
+        canvasRef.current.dataset.weGraphDistant = String(zoom < DISTANT_LABEL_ZOOM_THRESHOLD);
+    }, []);
+    useEffect(() => updateLabelZoom(initialLabelZoom), [initialLabelZoom, updateLabelZoom]);
+    useEffect(() => setEdgeOcclusionZoom(initialLabelZoom), [initialLabelZoom]);
+    const onSelectNodeRef = useRef(props.onSelectNode);
+    onSelectNodeRef.current = props.onSelectNode;
+    const onNodeContextMenuRef = useRef(props.onNodeContextMenu);
+    onNodeContextMenuRef.current = props.onNodeContextMenu;
+    const onLayoutErrorRef = useRef(props.onLayoutError);
+    onLayoutErrorRef.current = props.onLayoutError;
+    const [layoutError, setLayoutError] = useState(null);
+    const reportLayoutError = useCallback((error) => {
+        const normalized = error instanceof Error ? error : new Error(String(error));
+        setLayoutError(normalized.message || "图布局失败");
+        onLayoutErrorRef.current?.(normalized);
+    }, []);
+    const layoutSolverRef = useRef(null);
+    const layoutSolverFactoryRef = useRef(props.createLayoutSolver ?? createGraphLayoutSolver);
+    layoutSolverFactoryRef.current = props.createLayoutSolver ?? createGraphLayoutSolver;
+    const getLayoutSolver = useCallback(() => {
+        if (layoutSolverRef.current !== null)
+            return layoutSolverRef.current;
+        if (typeof Worker === "undefined" && props.createLayoutSolver === undefined) {
+            if (typeof window !== "undefined") {
+                throw new Error("当前浏览器不支持 GraphLayout Worker，已拒绝主线程布局 fallback");
+            }
+            return null;
+        }
+        layoutSolverRef.current = layoutSolverFactoryRef.current();
+        return layoutSolverRef.current;
+    }, [props.createLayoutSolver]);
+    const [flowInstance, setFlowInstance] = useState(null);
+    const [viewportReady, setViewportReady] = useState(false);
+    useEffect(() => {
+        if (flowInstance === null)
+            return;
+        let frame = 0;
+        const check = () => {
+            if (flowInstance.viewportInitialized) {
+                setViewportReady(true);
+                return;
+            }
+            frame = window.requestAnimationFrame(check);
+        };
+        check();
+        return () => {
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [flowInstance]);
+    const [localPositions, setLocalPositions] = useState(() => ({ ...props.positions }));
+    useEffect(() => setLocalPositions({ ...props.positions }), [props.positions]);
+    const [localGroups, setLocalGroups] = useState(() => [...(props.groups ?? [])]);
+    const localGroupsRef = useRef(localGroups);
+    localGroupsRef.current = localGroups;
+    useEffect(() => {
+        const next = [...(props.groups ?? [])];
+        localGroupsRef.current = next;
+        setLocalGroups(next);
+    }, [props.groups]);
+    const [selectedGroupId, setSelectedGroupId] = useState(null);
+    const [dropTargetGroupId, setDropTargetGroupId] = useState(null);
+    const [blockedGroupId, setBlockedGroupId] = useState(null);
+    const [drawingGroup, setDrawingGroup] = useState(false);
+    const [draftGroup, setDraftGroup] = useState(null);
+    const draftGroupRef = useRef(draftGroup);
+    draftGroupRef.current = draftGroup;
+    const groupDrawSessionRef = useRef(null);
+    const groupDragSessionRef = useRef(null);
+    const groupResizeSessionRef = useRef(null);
+    useEffect(() => {
+        if (props.disabled)
+            setDropTargetGroupId(null);
+    }, [props.disabled]);
+    const metricsById = useMemo(() => new Map(props.nodes.map((node) => [
+        node.id,
+        metricsForNode(node, props.isNameAttrKey)
+    ])), [props.isNameAttrKey, props.nodes]);
+    const rawPositions = useMemo(() => props.nodes.reduce((all, node, index) => {
+        all[node.id] = localPositions[node.id] ?? gridPosition(index);
+        return all;
+    }, {}), [localPositions, props.nodes]);
+    const positions = useMemo(() => Object.fromEntries(resolveOverlaps(props.nodes.map((node) => ({
+        id: node.id,
+        position: rawPositions[node.id],
+        radius: metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS
+    }))).map((node) => [node.id, node.position])), [metricsById, props.nodes, rawPositions]);
+    const positionsRef = useRef(positions);
+    positionsRef.current = positions;
+    const nodesRef = useRef(props.nodes);
+    nodesRef.current = props.nodes;
+    const metricsByIdRef = useRef(metricsById);
+    metricsByIdRef.current = metricsById;
+    const relationsRef = useRef(props.relations);
+    relationsRef.current = props.relations;
+    const layoutGenerationRef = useRef(0);
+    const dragLayoutFrameRef = useRef(0);
+    const pendingDragRef = useRef(null);
+    const graphIdentity = useMemo(() => props.graphIdentity
+        ?? props.nodes.map((node) => node.id).join("\u0000"), [props.graphIdentity, props.nodes]);
+    const activeGraphIdentityRef = useRef(graphIdentity);
+    useEffect(() => {
+        if (activeGraphIdentityRef.current === graphIdentity)
+            return;
+        activeGraphIdentityRef.current = graphIdentity;
+        layoutGenerationRef.current += 1;
+        pendingDragRef.current = null;
+        if (dragLayoutFrameRef.current !== 0) {
+            window.cancelAnimationFrame(dragLayoutFrameRef.current);
+            dragLayoutFrameRef.current = 0;
+        }
+        layoutSolverRef.current?.dispose();
+        layoutSolverRef.current = null;
+    }, [graphIdentity]);
+    useEffect(() => () => {
+        layoutGenerationRef.current += 1;
+        pendingDragRef.current = null;
+        if (dragLayoutFrameRef.current !== 0)
+            window.cancelAnimationFrame(dragLayoutFrameRef.current);
+        layoutSolverRef.current?.dispose();
+        layoutSolverRef.current = null;
+    }, []);
+    const commitLayout = useCallback((nextPositions, nextGroups = localGroupsRef.current) => {
+        const positionsCopy = { ...nextPositions };
+        const groupsCopy = [...nextGroups];
+        setLocalPositions(positionsCopy);
+        localGroupsRef.current = groupsCopy;
+        setLocalGroups(groupsCopy);
+        if (props.onCommitLayout !== undefined) {
+            props.onCommitLayout({ positions: positionsCopy, groups: groupsCopy });
+        }
+        else {
+            props.onCommitPositions?.(positionsCopy);
+        }
+    }, [props.onCommitLayout, props.onCommitPositions]);
+    const solveDraggedLayout = useCallback((commitResult) => {
+        const dragged = pendingDragRef.current;
+        let solver;
+        try {
+            solver = getLayoutSolver();
+        }
+        catch (error) {
+            reportLayoutError(error);
+            return;
+        }
+        if (dragged === null || solver === null)
+            return;
+        setLayoutError(null);
+        const generation = ++layoutGenerationRef.current;
+        const layoutPositions = {
+            ...positionsRef.current,
+            [dragged.id]: { x: dragged.x, y: dragged.y }
+        };
+        void solver({
+            nodes: nodesRef.current.map((node) => {
+                const position = layoutPositions[node.id] ?? { x: 0, y: 0 };
+                return {
+                    id: node.id,
+                    x: position.x + CANONICAL_NODE_ANCHOR_RADIUS,
+                    y: position.y + CANONICAL_NODE_ANCHOR_RADIUS,
+                    radius: metricsByIdRef.current.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS
+                };
+            }),
+            edges: relationsRef.current.map((relation) => ({ from: relation.source, to: relation.target })),
+            fixedNodeId: dragged.id
+        }).then((centers) => {
+            if (generation !== layoutGenerationRef.current)
+                return;
+            const canonical = Object.fromEntries(Object.entries(centers).map(([id, center]) => [id, {
+                    x: center.x - CANONICAL_NODE_ANCHOR_RADIUS,
+                    y: center.y - CANONICAL_NODE_ANCHOR_RADIUS
+                }]));
+            setLocalPositions(canonical);
+            setLayoutError(null);
+            if (commitResult)
+                commitLayout(canonical);
+        }).catch((error) => {
+            if (generation === layoutGenerationRef.current
+                && error?.name !== "AbortError") {
+                // Worker 错误不允许用主线程同步 force 或未验证 position 掩盖。
+                reportLayoutError(error);
+            }
+        });
+    }, [commitLayout, getLayoutSolver, reportLayoutError]);
+    const previousDiameterByIdRef = useRef(null);
+    useEffect(() => {
+        const next = new Map();
+        const resized = [];
+        for (const node of props.nodes) {
+            const diameter = metricsById.get(node.id)?.diameter ?? NODE_DIAMETER;
+            next.set(node.id, diameter);
+            const previous = previousDiameterByIdRef.current?.get(node.id);
+            if (previous !== undefined && previous !== diameter)
+                resized.push(node.id);
+        }
+        previousDiameterByIdRef.current = next;
+        if (resized.length === 0)
+            return;
+        const frame = window.requestAnimationFrame(() => {
+            for (const id of resized)
+                updateNodeInternals(id);
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [metricsById, props.nodes, updateNodeInternals]);
+    const handledFocusRequestIdRef = useRef(null);
+    const appliedViewportPropRef = useRef(null);
+    useEffect(() => {
+        if (!viewportReady || !flow.viewportInitialized)
+            return;
+        const request = props.focusRequest;
+        if (request != null && handledFocusRequestIdRef.current !== request.requestId) {
+            // controlled readback 可能与 local mirror 同一 commit 到达；聚焦优先消费最新 source position。
+            const position = props.positions?.[request.nodeId] ?? positions[request.nodeId];
+            if (position !== undefined) {
+                handledFocusRequestIdRef.current = request.requestId;
+                // 同批 viewport prop 是发起 focus 前的旧值；标记已消费，避免紧接着把 focus 覆盖回去。
+                appliedViewportPropRef.current = props.viewport ?? null;
+                void flow.setCenter(position.x + CANONICAL_NODE_ANCHOR_RADIUS, position.y + CANONICAL_NODE_ANCHOR_RADIUS, {
+                    zoom: request.zoom ?? flow.getZoom(),
+                    duration: request.durationMs ?? 220
+                });
+                return;
+            }
+        }
+        const requestedViewport = props.viewport;
+        if (requestedViewport === undefined || sameViewport(appliedViewportPropRef.current, requestedViewport))
+            return;
+        appliedViewportPropRef.current = requestedViewport;
+        if (!sameViewport(flow.getViewport(), requestedViewport)) {
+            void flow.setViewport(requestedViewport);
+        }
+    }, [flow, positions, props.focusRequest, props.positions, props.viewport, viewportReady]);
+    const lastViewportRef = useRef(props.viewport ?? null);
+    useEffect(() => {
+        if (props.viewport !== undefined)
+            lastViewportRef.current = props.viewport;
+    }, [props.viewport]);
+    const notifyViewportChange = useCallback((viewport) => {
+        if (sameViewport(lastViewportRef.current, viewport))
+            return;
+        lastViewportRef.current = viewport;
+        props.onViewportChange?.(viewport);
+    }, [props.onViewportChange]);
+    const canCommitPositions = !props.disabled
+        && (props.onCommitLayout !== undefined || props.onCommitPositions !== undefined);
+    const canEditGroups = !props.disabled && props.onCommitLayout !== undefined;
+    const canCreateRelation = !props.disabled && props.onRelationDragIntent !== undefined;
+    const canCreateRelationRef = useRef(canCreateRelation);
+    canCreateRelationRef.current = canCreateRelation;
+    const [rightRelationDrag, setRightRelationDrag] = useState(null);
+    const rightRelationDragRef = useRef(null);
+    const suppressContextMenuUntilRef = useRef(0);
+    const [contextMenu, setContextMenu] = useState(null);
+    const pendingNodeContextMenuRef = useRef(null);
+    const [groupRenameRequest, setGroupRenameRequest] = useState(null);
+    const closeContextMenu = useCallback(() => setContextMenu(null), []);
+    const openContextMenu = useCallback((event, target) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenu({ clientX: event.clientX, clientY: event.clientY, target });
+    }, []);
+    const interactionDisabledById = useMemo(() => new Map(props.nodes.map((node) => [
+        node.id,
+        props.disabled || (node.interactionDisabled ?? node.disabled ?? false)
+    ])), [props.disabled, props.nodes]);
+    const interactionDisabledByIdRef = useRef(interactionDisabledById);
+    interactionDisabledByIdRef.current = interactionDisabledById;
+    const startRightRelationDrag = useCallback((sourceId, event) => {
+        if (!canCreateRelation || interactionDisabledByIdRef.current.get(sourceId) === true)
+            return;
+        pendingNodeContextMenuRef.current = null;
+        setContextMenu(null);
+        event.stopPropagation();
+        const next = {
+            sourceId,
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            moved: false
+        };
+        rightRelationDragRef.current = next;
+        setRightRelationDrag(next);
+    }, [canCreateRelation]);
+    useEffect(() => {
+        const move = (event) => {
+            const current = rightRelationDragRef.current;
+            if (current === null)
+                return;
+            const moved = current.moved
+                || Math.hypot(event.clientX - current.startClientX, event.clientY - current.startClientY) >= 4;
+            if (moved)
+                event.preventDefault();
+            const next = { ...current, clientX: event.clientX, clientY: event.clientY, moved };
+            rightRelationDragRef.current = next;
+            setRightRelationDrag(next);
+        };
+        const finish = (event) => {
+            const current = rightRelationDragRef.current;
+            if (current === null || event.button !== 2)
+                return;
+            rightRelationDragRef.current = null;
+            setRightRelationDrag(null);
+            if (!current.moved) {
+                const pendingMenu = pendingNodeContextMenuRef.current;
+                pendingNodeContextMenuRef.current = null;
+                if (pendingMenu?.nodeId === current.sourceId
+                    && interactionDisabledByIdRef.current.get(current.sourceId) === false) {
+                    setContextMenu({
+                        clientX: pendingMenu.clientX,
+                        clientY: pendingMenu.clientY,
+                        target: { kind: "node", nodeId: current.sourceId }
+                    });
+                }
+                return;
+            }
+            pendingNodeContextMenuRef.current = null;
+            suppressContextMenuUntilRef.current = Date.now() + 500;
+            if (!canCreateRelationRef.current
+                || interactionDisabledByIdRef.current.get(current.sourceId) !== false)
+                return;
+            const hit = typeof document.elementFromPoint === "function"
+                ? document.elementFromPoint(event.clientX, event.clientY)
+                : null;
+            const targetElement = hit?.closest("[data-graph-node-id]");
+            const targetId = targetElement?.dataset.graphNodeId;
+            if (targetId === undefined
+                || targetId === current.sourceId
+                || interactionDisabledByIdRef.current.get(targetId) !== false)
+                return;
+            props.onRelationDragIntent?.(current.sourceId, targetId);
+        };
+        window.addEventListener("pointermove", move, { passive: false });
+        window.addEventListener("pointerup", finish);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", finish);
+        };
+    }, [props.onRelationDragIntent]);
+    const relationDragGeometry = useMemo(() => {
+        if (rightRelationDrag === null || !rightRelationDrag.moved || !flow.viewportInitialized)
+            return null;
+        const sourcePosition = positions[rightRelationDrag.sourceId];
+        if (sourcePosition === undefined)
+            return null;
+        const sourceCenter = flow.flowToScreenPosition({
+            x: sourcePosition.x + CANONICAL_NODE_ANCHOR_RADIUS,
+            y: sourcePosition.y + CANONICAL_NODE_ANCHOR_RADIUS
+        });
+        const zoom = flow.getZoom();
+        return computeGraphEdgeGeometry({
+            sourceX: sourceCenter.x,
+            sourceY: sourceCenter.y,
+            targetX: rightRelationDrag.clientX,
+            targetY: rightRelationDrag.clientY,
+            sourceRadius: (metricsById.get(rightRelationDrag.sourceId)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS) * zoom,
+            targetRadius: 1,
+            fallbackRadius: 1
+        });
+    }, [flow, metricsById, positions, rightRelationDrag]);
+    const showToolbar = props.showToolbar ?? true;
+    const normalizedQuery = normalizeQuery(props.searchQuery);
+    const adjacentNodeIds = useMemo(() => {
+        const result = new Set();
+        if (props.selectedNodeId === null)
+            return result;
+        for (const relation of props.relations) {
+            if (relation.source === props.selectedNodeId)
+                result.add(relation.target);
+            if (relation.target === props.selectedNodeId)
+                result.add(relation.source);
+        }
+        return result;
+    }, [props.relations, props.selectedNodeId]);
+    const edgeOccluders = useMemo(() => props.nodes.map((node) => ({
+        id: node.id,
+        x: (positions[node.id]?.x ?? 0) + CANONICAL_NODE_ANCHOR_RADIUS,
+        y: (positions[node.id]?.y ?? 0) + CANONICAL_NODE_ANCHOR_RADIUS,
+        radius: metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS
+    })), [metricsById, positions, props.nodes]);
+    const edgeOcclusionIndex = useMemo(() => buildGraphEdgeOcclusionIndex(edgeOccluders), [edgeOccluders]);
+    const edgeMaskBounds = useMemo(() => {
+        if (edgeOccluders.length === 0)
+            return { x: -1, y: -1, width: 2, height: 2 };
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (const occluder of edgeOccluders) {
+            const radius = occluder.radius + GRAPH_EDGE_OCCLUSION_HALO;
+            minX = Math.min(minX, occluder.x - radius);
+            minY = Math.min(minY, occluder.y - radius);
+            maxX = Math.max(maxX, occluder.x + radius);
+            maxY = Math.max(maxY, occluder.y + radius);
+        }
+        const margin = 256;
+        return {
+            x: minX - margin,
+            y: minY - margin,
+            width: maxX - minX + margin * 2,
+            height: maxY - minY + margin * 2
+        };
+    }, [edgeOccluders]);
+    const startGroupResize = useCallback((group, side, event) => {
+        if (!canEditGroups)
+            return;
+        groupResizeSessionRef.current = {
+            groupId: group.id,
+            side,
+            source: group,
+            groups: localGroupsRef.current,
+            changed: false
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+    }, [canEditGroups]);
+    const renameGroup = useCallback((groupId, label) => {
+        if (!canEditGroups)
+            return;
+        const normalized = normalizeGraphGroupLabel(label);
+        if (normalized === null)
+            return;
+        const current = localGroupsRef.current;
+        const group = current.find((candidate) => candidate.id === groupId);
+        if (group === undefined || group.label === normalized)
+            return;
+        const nextGroups = current.map((candidate) => candidate.id === groupId
+            ? { ...candidate, label: normalized }
+            : candidate);
+        commitLayout(positionsRef.current, nextGroups);
+    }, [canEditGroups, commitLayout]);
+    const graphEntityNodes = useMemo(() => props.nodes.map((node, index) => {
+        const resolvedMetrics = metricsById.get(node.id) ?? emptyMetrics;
+        const selected = node.id === props.selectedNodeId;
+        const adjacent = adjacentNodeIds.has(node.id);
+        const searchMatch = node.searchMatch
+            ?? (normalizedQuery !== "" && `${node.label} ${node.kind}`.toLocaleLowerCase().includes(normalizedQuery));
+        const interactionDisabled = props.disabled
+            || (node.interactionDisabled ?? node.disabled ?? false);
+        return {
+            id: node.id,
+            type: "sharedGraphNode",
+            position: {
+                x: (positions[node.id] ?? gridPosition(index)).x + CANONICAL_NODE_ANCHOR_RADIUS - resolvedMetrics.radius,
+                y: (positions[node.id] ?? gridPosition(index)).y + CANONICAL_NODE_ANCHOR_RADIUS - resolvedMetrics.radius
+            },
+            data: {
+                ...node,
+                disabled: Boolean(props.disabled || node.disabled),
+                interactionDisabled,
+                selected,
+                adjacent,
+                muted: props.selectedNodeId !== null && !selected && !adjacent,
+                searchMatch,
+                remoteHighlighted: node.id === props.highlightNodeId,
+                resolvedMetrics,
+                onSelect: () => {
+                    if (!interactionDisabled)
+                        onSelectNodeRef.current(node.id);
+                },
+                onContextMenu: (event) => {
+                    if (Date.now() <= suppressContextMenuUntilRef.current
+                        || rightRelationDragRef.current?.moved === true) {
+                        suppressContextMenuUntilRef.current = 0;
+                        return;
+                    }
+                    if (interactionDisabled)
+                        return;
+                    onNodeContextMenuRef.current?.(node.id, event);
+                    if (rightRelationDragRef.current !== null) {
+                        pendingNodeContextMenuRef.current = {
+                            nodeId: node.id,
+                            clientX: event.clientX,
+                            clientY: event.clientY
+                        };
+                        return;
+                    }
+                    openContextMenu(event, { kind: "node", nodeId: node.id });
+                },
+                ...(canCreateRelation && !interactionDisabled ? {
+                    onRightPointerDown: (event) => {
+                        startRightRelationDrag(node.id, event);
+                    }
+                } : {})
+            },
+            draggable: canCommitPositions && !interactionDisabled,
+            style: { width: resolvedMetrics.diameter, height: resolvedMetrics.diameter }
+        };
+    }), [adjacentNodeIds, canCommitPositions, canCreateRelation, metricsById, normalizedQuery, openContextMenu, positions, props.disabled, props.highlightNodeId, props.nodes, props.onNodeContextMenu, props.onSelectNode, props.selectedNodeId, startRightRelationDrag]);
+    const graphGroupNodes = useMemo(() => [...localGroups, ...(draftGroup === null ? [] : [draftGroup])].map((group) => ({
+        id: graphGroupNodeId(group.id),
+        type: "sharedGraphGroup",
+        position: { x: group.x, y: group.y },
+        data: {
+            group,
+            color: graphGroupColor(group.id),
+            selected: !group.id.startsWith("__draft__") && group.id === selectedGroupId,
+            draft: group.id.startsWith("__draft__"),
+            blocked: group.id === blockedGroupId || ("blocked" in group && group.blocked === true),
+            dropTarget: !group.id.startsWith("__draft__") && group.id === dropTargetGroupId,
+            ...(groupRenameRequest?.groupId === group.id ? { renameRequest: groupRenameRequest.serial } : {}),
+            ...(!group.id.startsWith("__draft__") ? {
+                onSelect: () => setSelectedGroupId(group.id),
+                onRename: (label) => renameGroup(group.id, label),
+                onContextMenu: (event) => {
+                    if (canEditGroups || props.onRequestUngroup !== undefined) {
+                        openContextMenu(event, { kind: "group", groupId: group.id });
+                    }
+                },
+                onResizePointerDown: (side, event) => {
+                    startGroupResize(group, side, event);
+                }
+            } : {})
+        },
+        draggable: canEditGroups && !group.id.startsWith("__draft__"),
+        selectable: false,
+        zIndex: -1,
+        style: { width: group.width, height: group.height }
+    })), [blockedGroupId, canEditGroups, draftGroup, dropTargetGroupId, groupRenameRequest, localGroups, openContextMenu, props.onRequestUngroup, renameGroup, selectedGroupId, startGroupResize]);
+    const flowNodes = useMemo(() => [...graphGroupNodes, ...graphEntityNodes], [graphEntityNodes, graphGroupNodes]);
+    const flowEdges = useMemo(() => {
+        return groupGraphRelations(props.relations).map((group) => {
+            const relationIds = group.relationIds;
+            const selected = props.selectedRelationId !== undefined
+                && props.selectedRelationId !== null
+                && relationIds.includes(props.selectedRelationId);
+            const touchesSelected = props.selectedNodeId !== null
+                && (group.source === props.selectedNodeId || group.target === props.selectedNodeId);
+            const emphasized = selected || touchesSelected;
+            const searchMatch = group.relations.some((relation) => relation.searchMatch
+                ?? (normalizedQuery !== ""
+                    && `${relation.label} ${relation.id}`.toLocaleLowerCase().includes(normalizedQuery)));
+            const allDisabled = group.relations.every((relation) => relation.disabled === true);
+            const pending = group.relations.some((relation) => relation.pending === true);
+            const first = group.relations[0];
+            const unanimousDirection = group.relations.every((relation) => relation.source === first.source && relation.target === first.target);
+            const edgeSource = unanimousDirection ? first.source : group.source;
+            const edgeTarget = unanimousDirection ? first.target : group.target;
+            const canSelectGroup = props.onSelectRelationGroup !== undefined
+                || props.onSelectRelation !== undefined;
+            return {
+                id: group.pairId,
+                source: edgeSource,
+                target: edgeTarget,
+                type: "sharedGraphEdge",
+                selected: emphasized,
+                zIndex: emphasized ? 1000 : 0,
+                data: {
+                    label: String(relationIds.length),
+                    relationIds,
+                    state: allDisabled ? "disabled" : pending ? "pending" : searchMatch ? "search" : "committed",
+                    sourceRadius: metricsById.get(edgeSource)?.radius ?? NODE_DIAMETER / 2,
+                    targetRadius: metricsById.get(edgeTarget)?.radius ?? NODE_DIAMETER / 2,
+                    emphasized,
+                    maskId: edgeMaskId,
+                    occlusionIndex: edgeOcclusionIndex,
+                    occlusionZoom: edgeOcclusionZoom,
+                    muted: (props.selectedNodeId !== null || props.selectedRelationId != null) && !emphasized,
+                    onContextMenu: (event) => {
+                        if (!props.disabled && (canSelectGroup
+                            || props.onEditRelationGroup !== undefined
+                            || props.onRequestDeleteRelationGroup !== undefined)) {
+                            openContextMenu(event, { kind: "relation", selection: group });
+                        }
+                    },
+                    ...(!canSelectGroup ? {} : {
+                        onSelect: () => {
+                            if (props.disabled || allDisabled)
+                                return;
+                            if (props.onSelectRelationGroup !== undefined) {
+                                props.onSelectRelationGroup(group);
+                                return;
+                            }
+                            props.onSelectRelation?.(relationIds[0]);
+                        }
+                    })
+                }
+            };
+        });
+    }, [edgeMaskId, edgeOcclusionIndex, edgeOcclusionZoom, metricsById, normalizedQuery, openContextMenu, props.disabled, props.onEditRelationGroup, props.onRequestDeleteRelationGroup, props.onSelectRelation, props.onSelectRelationGroup, props.relations, props.selectedNodeId, props.selectedRelationId]);
+    const commit = useCallback((next) => {
+        commitLayout(next);
+    }, [commitLayout]);
+    const force = useCallback(() => {
+        if (!canCommitPositions)
+            return;
+        let solver;
+        try {
+            solver = getLayoutSolver();
+        }
+        catch (error) {
+            reportLayoutError(error);
+            return;
+        }
+        if (solver === null) {
+            commit(forceLayout(props.nodes, positions, props.relations, props.isNameAttrKey));
+            return;
+        }
+        setLayoutError(null);
+        const generation = ++layoutGenerationRef.current;
+        void solver({
+            nodes: props.nodes.map((node) => {
+                const position = positions[node.id] ?? { x: 0, y: 0 };
+                return {
+                    id: node.id,
+                    x: position.x + CANONICAL_NODE_ANCHOR_RADIUS,
+                    y: position.y + CANONICAL_NODE_ANCHOR_RADIUS,
+                    radius: metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS
+                };
+            }),
+            edges: props.relations.map((relation) => ({ from: relation.source, to: relation.target }))
+        }).then((centers) => {
+            if (generation !== layoutGenerationRef.current)
+                return;
+            setLayoutError(null);
+            commit(Object.fromEntries(Object.entries(centers).map(([id, center]) => [id, {
+                    x: center.x - CANONICAL_NODE_ANCHOR_RADIUS,
+                    y: center.y - CANONICAL_NODE_ANCHOR_RADIUS
+                }])));
+        }).catch((error) => {
+            if (error?.name !== "AbortError") {
+                reportLayoutError(error);
+            }
+        });
+    }, [canCommitPositions, commit, getLayoutSolver, metricsById, positions, props.isNameAttrKey, props.nodes, props.relations, reportLayoutError]);
+    const beginGroupDrag = useCallback((node) => {
+        const groupId = graphGroupIdFromNodeId(node.id);
+        if (groupId === null || !canEditGroups)
+            return;
+        const source = localGroupsRef.current.find((group) => group.id === groupId);
+        if (source === undefined)
+            return;
+        const sourcePositions = positionsRef.current;
+        groupDragSessionRef.current = {
+            groupId,
+            source,
+            groups: localGroupsRef.current,
+            positions: sourcePositions,
+            memberIds: nodesInsideGraphGroup(source, Object.fromEntries(Object.entries(sourcePositions).map(([id, position]) => [id, canonicalCenter(position)]))),
+            changed: false
+        };
+        setSelectedGroupId(groupId);
+        setBlockedGroupId(null);
+    }, [canEditGroups]);
+    const moveGroup = useCallback((node) => {
+        const groupId = graphGroupIdFromNodeId(node.id);
+        if (groupId === null)
+            return;
+        if (groupDragSessionRef.current === null)
+            beginGroupDrag(node);
+        const session = groupDragSessionRef.current;
+        if (session === null || session.groupId !== groupId)
+            return;
+        const requested = {
+            x: node.position.x - session.source.x,
+            y: node.position.y - session.source.y
+        };
+        const groupSafe = clampGraphGroupTranslation(session.source, requested, session.groups, groupId);
+        const nodeSafe = clampGroupMemberTranslation(groupSafe.delta, session.memberIds, session.positions, metricsByIdRef.current);
+        const nextGroup = {
+            ...session.source,
+            x: session.source.x + nodeSafe.x,
+            y: session.source.y + nodeSafe.y
+        };
+        const nextGroups = session.groups.map((group) => group.id === groupId ? nextGroup : group);
+        const memberSet = new Set(session.memberIds);
+        const nextPositions = Object.fromEntries(Object.entries(session.positions).map(([id, position]) => [
+            id,
+            memberSet.has(id)
+                ? { x: position.x + nodeSafe.x, y: position.y + nodeSafe.y }
+                : position
+        ]));
+        session.changed = !samePosition(nodeSafe, { x: 0, y: 0 });
+        localGroupsRef.current = nextGroups;
+        positionsRef.current = nextPositions;
+        setLocalGroups(nextGroups);
+        setLocalPositions(nextPositions);
+        setBlockedGroupId(samePosition(nodeSafe, requested) ? null : groupId);
+    }, [beginGroupDrag]);
+    const finishGroupDrag = useCallback((node) => {
+        const groupId = graphGroupIdFromNodeId(node.id);
+        if (groupId === null)
+            return;
+        moveGroup(node);
+        const session = groupDragSessionRef.current;
+        groupDragSessionRef.current = null;
+        setBlockedGroupId(null);
+        if (session?.groupId === groupId && session.changed) {
+            commitLayout(positionsRef.current, localGroupsRef.current);
+        }
+    }, [commitLayout, moveGroup]);
+    useEffect(() => {
+        const move = (event) => {
+            const draw = groupDrawSessionRef.current;
+            if (draw !== null && event.pointerId === draw.pointerId) {
+                event.preventDefault();
+                const end = flow.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+                const bounds = graphGroupBoundsFromPoints(draw.start, end);
+                const blocked = !isGraphGroupBoundsValid(bounds, localGroupsRef.current);
+                const nextDraft = {
+                    id: "__draft__group",
+                    label: "新分组",
+                    ...bounds,
+                    blocked
+                };
+                draftGroupRef.current = nextDraft;
+                setDraftGroup(nextDraft);
+            }
+            const resize = groupResizeSessionRef.current;
+            if (resize === null)
+                return;
+            event.preventDefault();
+            const point = flow.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+            const coordinate = resize.side === "left" || resize.side === "right" ? point.x : point.y;
+            const unconstrained = resizeGraphGroupSide(resize.source, resize.side, coordinate, [], resize.groupId);
+            const nextBounds = resizeGraphGroupSide(resize.source, resize.side, coordinate, resize.groups, resize.groupId);
+            const nextGroup = { ...resize.source, ...nextBounds };
+            const nextGroups = resize.groups.map((group) => group.id === resize.groupId ? nextGroup : group);
+            resize.changed = nextBounds.x !== resize.source.x
+                || nextBounds.y !== resize.source.y
+                || nextBounds.width !== resize.source.width
+                || nextBounds.height !== resize.source.height;
+            localGroupsRef.current = nextGroups;
+            setLocalGroups(nextGroups);
+            setBlockedGroupId(nextBounds.x === unconstrained.x
+                && nextBounds.y === unconstrained.y
+                && nextBounds.width === unconstrained.width
+                && nextBounds.height === unconstrained.height
+                ? null
+                : resize.groupId);
+        };
+        const finish = (event) => {
+            const draw = groupDrawSessionRef.current;
+            if (draw !== null && event.pointerId === draw.pointerId) {
+                groupDrawSessionRef.current = null;
+                const candidate = draftGroupRef.current;
+                draftGroupRef.current = null;
+                setDraftGroup(null);
+                setDrawingGroup(false);
+                if (candidate !== null && !candidate.blocked
+                    && isGraphGroupBoundsValid(candidate, localGroupsRef.current)) {
+                    const created = {
+                        id: nextGraphGroupId(localGroupsRef.current),
+                        label: `组 ${localGroupsRef.current.length + 1}`,
+                        x: candidate.x,
+                        y: candidate.y,
+                        width: candidate.width,
+                        height: candidate.height
+                    };
+                    const nextGroups = [...localGroupsRef.current, created];
+                    localGroupsRef.current = nextGroups;
+                    setLocalGroups(nextGroups);
+                    setSelectedGroupId(created.id);
+                    commitLayout(positionsRef.current, nextGroups);
+                }
+            }
+            const resize = groupResizeSessionRef.current;
+            if (resize === null)
+                return;
+            groupResizeSessionRef.current = null;
+            setBlockedGroupId(null);
+            if (resize.changed)
+                commitLayout(positionsRef.current, localGroupsRef.current);
+        };
+        window.addEventListener("pointermove", move, { passive: false });
+        window.addEventListener("pointerup", finish);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", finish);
+        };
+    }, [commitLayout, flow]);
+    const startGroupDrawing = useCallback((event) => {
+        if (!drawingGroup || !canEditGroups || event.button !== 0)
+            return;
+        const target = event.target;
+        if (target.closest(".react-flow__pane") === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const start = flow.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+        groupDrawSessionRef.current = { pointerId: event.pointerId, start };
+        const nextDraft = {
+            id: "__draft__group",
+            label: "新分组",
+            x: start.x,
+            y: start.y,
+            width: 0,
+            height: 0,
+            blocked: true
+        };
+        draftGroupRef.current = nextDraft;
+        setDraftGroup(nextDraft);
+    }, [canEditGroups, drawingGroup, flow]);
+    const updateNodeDropTarget = useCallback((node) => {
+        const source = nodesRef.current.find((candidate) => candidate.id === node.id);
+        if (props.disabled || source?.disabled === true
+            || interactionDisabledByIdRef.current.get(node.id) !== false) {
+            setDropTargetGroupId(null);
+            return;
+        }
+        const radius = metricsByIdRef.current.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+        const center = { x: node.position.x + radius, y: node.position.y + radius };
+        const target = localGroupsRef.current.find((group) => center.x >= group.x
+            && center.x < group.x + group.width
+            && center.y >= group.y
+            && center.y < group.y + group.height);
+        setDropTargetGroupId((current) => current === target?.id ? current : target?.id ?? null);
+    }, [props.disabled]);
+    const contextMenuActions = useMemo(() => {
+        if (contextMenu === null)
+            return [];
+        const target = contextMenu.target;
+        if (target.kind === "pane") {
+            return [
+                ...(!props.disabled && props.onCreateNodeAt !== undefined ? [{
+                        id: "create-node",
+                        label: "新建节点",
+                        run: () => props.onCreateNodeAt?.(target.position)
+                    }] : []),
+                {
+                    id: "fit-view",
+                    label: "适合视图",
+                    run: () => { void flow.fitView({ padding: 0.16, duration: 200 }); }
+                },
+                ...(canCommitPositions ? [{ id: "force-layout", label: "自动布局", run: force }] : [])
+            ];
+        }
+        if (props.disabled)
+            return [];
+        if (target.kind === "node") {
+            return [
+                { id: "view-node", label: "查看节点", run: () => props.onSelectNode(target.nodeId) },
+                ...(props.onEditNode === undefined ? [] : [{ id: "edit-node", label: "编辑节点", run: () => props.onEditNode?.(target.nodeId) }]),
+                ...(props.onCreateRelationFromNode === undefined ? [] : [{ id: "create-relation", label: "新建关系", run: () => props.onCreateRelationFromNode?.(target.nodeId) }]),
+                ...(props.onRequestDeleteNode === undefined ? [] : [{
+                        id: "delete-node",
+                        label: "删除节点",
+                        danger: true,
+                        run: () => props.onRequestDeleteNode?.(target.nodeId)
+                    }])
+            ];
+        }
+        if (target.kind === "relation") {
+            const view = props.onSelectRelationGroup !== undefined
+                ? () => props.onSelectRelationGroup?.(target.selection)
+                : props.onSelectRelation !== undefined
+                    ? () => props.onSelectRelation?.(target.selection.relationIds[0])
+                    : null;
+            return [
+                ...(view === null ? [] : [{ id: "view-relation", label: "查看关系", run: view }]),
+                ...(props.onEditRelationGroup === undefined ? [] : [{ id: "edit-relation", label: "编辑关系", run: () => props.onEditRelationGroup?.(target.selection) }]),
+                ...(props.onRequestDeleteRelationGroup === undefined ? [] : [{
+                        id: "delete-relation",
+                        label: "删除关系",
+                        danger: true,
+                        run: () => props.onRequestDeleteRelationGroup?.(target.selection)
+                    }])
+            ];
+        }
+        const group = localGroups.find((candidate) => candidate.id === target.groupId);
+        if (group === undefined)
+            return [];
+        return [
+            ...(canEditGroups ? [{
+                    id: "rename-group",
+                    label: "重命名分组",
+                    run: () => {
+                        setGroupRenameRequest((current) => ({
+                            groupId: group.id,
+                            serial: (current?.serial ?? 0) + 1
+                        }));
+                    }
+                }] : []),
+            ...(props.onRequestUngroup === undefined ? [] : [{
+                    id: "ungroup",
+                    label: "解除分组",
+                    danger: true,
+                    run: () => props.onRequestUngroup?.(group)
+                }])
+        ];
+    }, [canCommitPositions, canEditGroups, contextMenu, flow, force, localGroups, props.disabled, props.onCreateNodeAt, props.onCreateRelationFromNode, props.onEditNode, props.onEditRelationGroup, props.onRequestDeleteNode, props.onRequestDeleteRelationGroup, props.onRequestUngroup, props.onSelectNode, props.onSelectRelation, props.onSelectRelationGroup]);
+    return _jsxs("section", { "aria-label": "\u5171\u4EAB GraphCanvas", className: "shared-graph-canvas", "data-testid": "shared-graph-canvas", "data-we-graph-group-drawing": String(drawingGroup), "data-we-graph-distant": String(labelZoomRef.current < DISTANT_LABEL_ZOOM_THRESHOLD), ref: canvasRef, onPointerDownCapture: startGroupDrawing, style: {
+            "--we-graph-zoom": labelZoomRef.current,
+            "--we-graph-inverse-zoom": 1 / labelZoomRef.current
+        }, children: [showToolbar ? _jsxs("div", { className: "shared-graph-canvas__toolbar", children: [_jsx("span", { children: props.searchQuery ? `搜索：${props.searchQuery}` : `${props.nodes.length} 节点 · ${props.relations.length} 关系` }), _jsx("span", { "aria-live": "polite", "data-relation-capability": canCreateRelation ? "enabled" : "unavailable", children: canCreateRelation ? "关系拖拽已启用" : "关系编辑未配置" })] }) : null, layoutError === null ? null : _jsxs("div", { className: "shared-graph-canvas__error", role: "alert", children: ["\u56FE\u5E03\u5C40\u5931\u8D25\uFF1A", layoutError] }), _jsx("div", { className: "shared-graph-canvas__flow", children: _jsxs(ReactFlow, { edges: flowEdges, edgeTypes: edgeTypes, elevateEdgesOnSelect: true, fitView: props.viewport === undefined, maxZoom: 4, minZoom: 0.15, nodes: flowNodes, nodeDragThreshold: NODE_DRAG_THRESHOLD_PX, nodeTypes: graphNodeTypes, onInit: setFlowInstance, onlyRenderVisibleElements: props.onlyRenderVisibleElements ?? false, onConnect: (connection) => {
+                        if (canCreateRelation && connection.source && connection.target) {
+                            props.onRelationDragIntent?.(connection.source, connection.target);
+                        }
+                    }, onNodeDragStart: (_, node) => {
+                        closeContextMenu();
+                        if (graphGroupIdFromNodeId(node.id) !== null)
+                            beginGroupDrag(node);
+                    }, onNodeDrag: (_, node) => {
+                        if (graphGroupIdFromNodeId(node.id) !== null) {
+                            setDropTargetGroupId(null);
+                            moveGroup(node);
+                            return;
+                        }
+                        updateNodeDropTarget(node);
+                        const radius = metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+                        const maskCircle = maskCircleByNodeIdRef.current.get(node.id);
+                        if (maskCircle !== undefined) {
+                            maskCircle.setAttribute("cx", String(node.position.x + radius));
+                            maskCircle.setAttribute("cy", String(node.position.y + radius));
+                        }
+                        pendingDragRef.current = {
+                            id: node.id,
+                            ...canonicalTopLeft(snapToGrid(node.position.x + radius, node.position.y + radius))
+                        };
+                        if (dragLayoutFrameRef.current !== 0)
+                            return;
+                        dragLayoutFrameRef.current = window.requestAnimationFrame(() => {
+                            dragLayoutFrameRef.current = 0;
+                            solveDraggedLayout(false);
+                        });
+                    }, onNodeDragStop: (_, node) => {
+                        setDropTargetGroupId(null);
+                        if (graphGroupIdFromNodeId(node.id) !== null) {
+                            finishGroupDrag(node);
+                            return;
+                        }
+                        if (!canCommitPositions)
+                            return;
+                        if (dragLayoutFrameRef.current !== 0) {
+                            window.cancelAnimationFrame(dragLayoutFrameRef.current);
+                            dragLayoutFrameRef.current = 0;
+                        }
+                        const radius = metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+                        const previous = positions[node.id];
+                        const rawCanonical = {
+                            x: node.position.x + radius - CANONICAL_NODE_ANCHOR_RADIUS,
+                            y: node.position.y + radius - CANONICAL_NODE_ANCHOR_RADIUS
+                        };
+                        if (previous !== undefined && samePosition(rawCanonical, previous)) {
+                            pendingDragRef.current = null;
+                            layoutGenerationRef.current += 1;
+                            return;
+                        }
+                        const snappedCenter = snapToGrid(node.position.x + radius, node.position.y + radius);
+                        const otherFootprints = props.nodes.flatMap((candidate) => {
+                            if (candidate.id === node.id)
+                                return [];
+                            const position = positions[candidate.id];
+                            if (position === undefined)
+                                return [];
+                            return [{
+                                    ...canonicalCenter(position),
+                                    radius: metricsById.get(candidate.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS
+                                }];
+                        });
+                        const safeCenter = tryFindGridSlot({ ...snappedCenter, radius }, otherFootprints) ?? snappedCenter;
+                        const safePosition = canonicalTopLeft(safeCenter);
+                        if (previous !== undefined
+                            && Math.abs(safePosition.x - previous.x) < POSITION_NOOP_EPSILON_PX
+                            && Math.abs(safePosition.y - previous.y) < POSITION_NOOP_EPSILON_PX) {
+                            pendingDragRef.current = null;
+                            layoutGenerationRef.current += 1;
+                            return;
+                        }
+                        const immediate = {
+                            ...positions,
+                            [node.id]: {
+                                x: Math.round(safePosition.x),
+                                y: Math.round(safePosition.y)
+                            }
+                        };
+                        setLocalPositions(immediate);
+                        pendingDragRef.current = {
+                            id: node.id,
+                            x: immediate[node.id].x,
+                            y: immediate[node.id].y
+                        };
+                        let solverAvailable;
+                        try {
+                            solverAvailable = getLayoutSolver();
+                        }
+                        catch (error) {
+                            reportLayoutError(error);
+                            return;
+                        }
+                        if (solverAvailable === null) {
+                            commitLayout(immediate);
+                            return;
+                        }
+                        solveDraggedLayout(true);
+                    }, onNodeDoubleClick: (_, node) => {
+                        const radius = metricsById.get(node.id)?.radius ?? CANONICAL_NODE_ANCHOR_RADIUS;
+                        void flow.setCenter(node.position.x + radius, node.position.y + radius, { zoom: Math.max(flow.getZoom(), 1), duration: 220 });
+                        props.onNodeDoubleClick?.(node.id);
+                    }, onMove: (_, viewport) => updateLabelZoom(viewport.zoom), onMoveEnd: (_, viewport) => {
+                        updateLabelZoom(viewport.zoom);
+                        setEdgeOcclusionZoom((current) => current === viewport.zoom ? current : viewport.zoom);
+                        notifyViewportChange(viewport);
+                    }, onPaneClick: () => {
+                        closeContextMenu();
+                        if (!props.disabled)
+                            props.onClearSelection?.();
+                    }, onPaneContextMenu: (event) => {
+                        openContextMenu(event, {
+                            kind: "pane",
+                            position: flow.screenToFlowPosition({ x: event.clientX, y: event.clientY })
+                        });
+                    }, nodesConnectable: canCreateRelation, nodesDraggable: canCommitPositions, panOnDrag: !drawingGroup, ...(props.viewport === undefined ? {} : { defaultViewport: props.viewport }), children: [_jsx("svg", { "aria-hidden": "true", className: "shared-graph-mask-defs", children: _jsx("defs", { children: _jsxs("mask", { id: edgeMaskId, maskUnits: "userSpaceOnUse", ...edgeMaskBounds, children: [_jsx("rect", { ...edgeMaskBounds, fill: "white" }), edgeOccluders.map((occluder) => _jsx("circle", { cx: occluder.x, cy: occluder.y, fill: "black", r: occluder.radius + GRAPH_EDGE_OCCLUSION_HALO, ref: (element) => {
+                                                if (element === null)
+                                                    maskCircleByNodeIdRef.current.delete(occluder.id);
+                                                else
+                                                    maskCircleByNodeIdRef.current.set(occluder.id, element);
+                                            } }, occluder.id))] }) }) }), _jsx(Background, { gap: 18, size: 1 }), _jsx(CanvasControls, { canCommit: canCommitPositions, canCreateGroup: canEditGroups, drawingGroup: drawingGroup, onForce: force, onToggleGroup: () => {
+                                groupDrawSessionRef.current = null;
+                                draftGroupRef.current = null;
+                                setDraftGroup(null);
+                                setDrawingGroup((current) => !current);
+                            } })] }) }), relationDragGeometry === null ? null : _jsx("svg", { "aria-hidden": "true", className: "shared-graph-relation-drag", children: _jsx("path", { d: relationDragGeometry.path, fill: "none" }) }), contextMenu === null ? null : _jsx(GraphContextMenu, { actions: contextMenuActions, clientX: contextMenu.clientX, clientY: contextMenu.clientY, onClose: closeContextMenu })] });
+}
+export function SharedGraphCanvas(props) {
+    return _jsx(ReactFlowProvider, { children: _jsx(GraphCanvasInner, { ...props }) });
+}