@zerodep-dev/vue-tsx-pro-ui 0.3.3 → 0.4.1

package/dist/charts/GraphChart.js

@@ -1,83 +1,115 @@
+import { svgNumber } from "../utils/data/number.js";
 import { toNumber } from "../utils/data/numeric.js";
-import { colors, fontSizes, opacities } from "../config/theme/tokens.js";
+import { colors, t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
 import { useFormat } from "../config/lang/format.js";
 import { Skeleton } from "../feedback/Skeleton.js";
+import { usePanZoom } from "../utils/dom/pan-zoom.js";
+import { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea } from "./plot.js";
 import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
 import { resolveColor } from "./series.js";
-import { useSingleChart } from "./single.js";
-import { computed, createVNode, shallowRef } from "vue";
-import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { estimateTextWidth, truncateText } from "./text-size.js";
+import { graphLayout } from "./layout/graph.js";
+import { computed, createVNode, ref, shallowRef } from "vue";
+import { _component, bindable, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
-import { Graph, GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeSelectionHighlightMode, GraphNodeShape } from "@unovis/ts";
 //#region src/charts/GraphChart.tsx
-/**
-* 网络图：节点与连线，看谁和谁有关系、关系有多强（案例与触发事件的匹配、团队与供应商的协作、依赖关系）。
-*
-*   <GraphChart aria-label="协作关系" nodes={nodes} links={links} layout="dagre" groups={teams} />
-*
-* 节点是 { id, label?, sublabel?, group?, color?, shape?, size? }，连线是 { source, target, value?, label?, dashed? }。
-* 布局交给 Unovis 的 Graph：force（默认，力导向）、dagre（分层，direction 定方向）、circular、concentric、parallel
-* （按 group 分列）、elk（分层且支持分组框，较大，用到时才加载）。布局异步算好再画，第一帧是空的。
-* 写了 groups 时同组的节点框在一起（dagre、elk、parallel 布局；力导向、环形布局里组只决定颜色，框会互相盖住）；
-* 节点的颜色默认按组取色板，没有组时都是 chart1。
-* 连线写了 value 时按大小加粗（1–6px），悬停看“起点 → 终点”与数值。点节点选中它（selected 双向绑定），
-* 与它不相连的节点、连线变淡；点空白处取消。能缩放、拖动画布（zoom={false} 关掉），双击回到全图。
-* 给读屏的数据表每条连线一行；单位、加载与空状态同其他图表（见 ChartFrame）。
-*/
 /** 节点的形状 */
 /** 布局 */
 /** 一个节点 */
 /** 一条连线 */
 /** 一组节点 */
 /** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
-/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */
+/** GraphChart 的样式 */
 var graphChartStyles = css.create({
-	root: {
-		"--vis-graph-node-stroke-color": colors.surface,
-		"--vis-graph-node-label-text-color": colors.text,
-		"--vis-graph-node-label-font-size": fontSizes.xs,
-		"--vis-graph-node-label-background": colors.surface,
-		"--vis-graph-node-sublabel-text-color": colors.textMuted,
-		"--vis-graph-node-sublabel-font-size": fontSizes.xs,
-		"--vis-graph-node-selection-color": colors.accent,
-		"--vis-graph-node-greyout-color": colors.surfaceMuted,
-		"--vis-graph-node-greyout-opacity": opacities.disabled,
-		"--vis-graph-link-stroke-color": colors.borderStrong,
-		"--vis-graph-link-greyout-opacity": "0.25",
-		"--vis-graph-link-label-background": colors.fill,
-		"--vis-graph-link-label-text-color-dark": colors.text,
-		"--vis-graph-link-label-font-size": fontSizes.xs,
-		"--vis-graph-panel-fill-color": colors.surfaceMuted,
-		"--vis-graph-panel-border-color": colors.borderMuted,
-		"--vis-graph-panel-label-color": colors.textMuted,
-		"--vis-graph-panel-label-background": colors.surface,
-		"--vis-graph-panel-label-font-size": fontSizes.xs,
-		"--vis-graph-panel-label-font-weight": "500"
-	},
 	skeleton: {
 		display: "block",
 		width: "100%",
 		height: "100%"
+	},
+	viewport: {
+		position: "absolute",
+		inset: 0
+	},
+	background: { fill: "transparent" },
+	panel: {
+		fill: "_surfaceMuted",
+		strokeWidth: 1
+	},
+	panelLabel: {
+		fill: "_textMuted",
+		fontSize: "_xs",
+		fontWeight: "_medium"
+	},
+	link: {
+		fill: "none",
+		transition: `opacity ${t.durations.sm} ${t.easings.standard}`
+	},
+	linkDashed: { strokeDasharray: "5 4" },
+	linkLabelBox: { fill: "_fill" },
+	linkLabel: {
+		fill: "_text",
+		fontSize: "_xs"
+	},
+	node: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },
+	nodeShape: {
+		stroke: "_surface",
+		strokeWidth: 2
+	},
+	nodeSelected: {
+		stroke: "_accent",
+		strokeWidth: 3
+	},
+	nodeLabel: {
+		fill: "_text",
+		fontSize: "_xs",
+		fontWeight: "_medium"
+	},
+	nodeSublabel: {
+		fill: "_textMuted",
+		fontSize: "_xs"
+	},
+	clickable: { cursor: "pointer" },
+	wheelHint: {
+		position: "absolute",
+		top: "_sm",
+		insetInlineEnd: "_sm",
+		paddingBlock: "_xs",
+		paddingInline: "_sm",
+		borderRadius: "_md",
+		backgroundColor: "_surfaceRaised",
+		boxShadow: "_sm",
+		color: "_textMuted",
+		fontSize: "_xs",
+		pointerEvents: "none"
 	}
 });
-var LAYOUTS = {
-	force: GraphLayoutType.Force,
-	dagre: GraphLayoutType.Dagre,
-	circular: GraphLayoutType.Circular,
-	concentric: GraphLayoutType.Concentric,
-	parallel: GraphLayoutType.Parallel,
-	elk: GraphLayoutType.Elk
-};
-var SHAPES = {
-	circle: GraphNodeShape.Circle,
-	square: GraphNodeShape.Square,
-	hexagon: GraphNodeShape.Hexagon,
-	triangle: GraphNodeShape.Triangle
-};
-/** 交给 Unovis 的节点：带上名称与颜色；Unovis 会往上写布局用的字段，每次都复制一份 */
-/** 交给 Unovis 的连线：数值转成 number 算粗细 */
-/** Unovis 布局后：连线的起点、终点换成了节点对象 */
+/** 节点的默认大小、名字的行高、名字最多几个字宽（px） */
+var NODE_SIZE = 28;
+var LINE = 16;
+var LABEL_MAX = 120;
+/** 分组框四周、顶上（写组名）留的空 */
+var PANEL_PAD = 16;
+var PANEL_TITLE = 22;
+/** 箭头的长与宽 */
+var ARROW = 8;
+/** 节点的形状：中心在原点、外接圆直径 size 的 SVG 路径 */
+function shapePath(shape, size) {
+	const r = size / 2;
+	const polygon = (count, rotate, radius) => `${Array.from({ length: count }, (_, i) => {
+		const angle = rotate + i / count * Math.PI * 2;
+		return `${i ? "L" : "M"}${svgNumber(radius * Math.cos(angle))},${svgNumber(radius * Math.sin(angle))}`;
+	}).join("")}Z`;
+	if (shape === "square") {
+		const half = r * .86;
+		return `M${-half},${-half}H${half}V${half}H${-half}Z`;
+	}
+	if (shape === "hexagon") return polygon(6, 0, r);
+	if (shape === "triangle") return polygon(3, -Math.PI / 2, r * 1.1);
+	return `M${-r},0A${r},${r},0,1,1,${r},0A${r},${r},0,1,1,${-r},0Z`;
+}
+/** 画图用的节点：带上名称、颜色与位置 */
+/** 悬停的节点或连线 */
 /** 网络图 */
 var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -96,7 +128,6 @@ var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const loading = readonlyProp(_props, "loading", false);
 	const empty = readonlyProp(_props, "empty");
 	const onItemClick = readonlyProp(_props, "onItemClick");
-	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	const format = useFormat();
@@ -104,20 +135,33 @@ var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		valueFormat: valueFormat.value,
 		unit: unit.value
 	}));
+	const area = usePlotArea();
+	const viewport = shallowRef(null);
+	let hovered = shallowRef(null);
+	let wheelHint = ref(false);
+	let hintTimer;
+	effect(() => () => clearTimeout(hintTimer));
+	const view = usePanZoom({
+		viewport: () => viewport.value,
+		min: .3,
+		max: 4,
+		disabled: () => !zoom.value,
+		filter: (event) => {
+			if (event instanceof WheelEvent && !event.ctrlKey && !event.metaKey) {
+				wheelHint.value = true;
+				clearTimeout(hintTimer);
+				hintTimer = setTimeout(() => wheelHint.value = false, 1500);
+				return false;
+			}
+			return !(event.type === "dblclick" && event.target.closest?.("[data-node]"));
+		}
+	});
 	const groupColors = computed(() => new Map((groups.value ?? []).map((group, position) => [group.id, resolveColor(group.color, position)])));
-	const resolved = computed(() => nodes.value.map((node, index) => ({
-		...node,
-		label: node.label ?? node.id,
-		fill: node.color ? resolveColor(node.color, 0) : (node.group && groupColors.value.get(node.group)) ?? resolveColor("chart1", 0),
-		index
-	})));
-	const byId = computed(() => new Map(resolved.value.map((node) => [node.id, node])));
+	const byId = computed(() => new Map(nodes.value.map((node) => [node.id, node])));
 	const labelOf = (id) => byId.value.get(id)?.label ?? id;
-	const shownLinks = computed(() => links.value.filter((link) => byId.value.has(link.source) && byId.value.has(link.target)).map((link) => ({
-		...link,
-		amount: link.value === void 0 ? void 0 : toNumber(link.value)
-	})));
-	const maxAmount = computed(() => Math.max(0, ...shownLinks.value.map((link) => link.amount ?? 0)));
+	const shownLinks = computed(() => links.value.filter((link) => byId.value.has(link.source) && byId.value.has(link.target)));
+	const amounts = computed(() => shownLinks.value.map((link) => link.value === void 0 ? void 0 : toNumber(link.value)));
+	const maxAmount = computed(() => Math.max(0, ...amounts.value.map((amount) => amount ?? 0)));
 	const degree = computed(() => {
 		const counts = /* @__PURE__ */ new Map();
 		for (const link of shownLinks.value) {
@@ -126,112 +170,308 @@ var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		}
 		return counts;
 	});
-	let plot = shallowRef(null);
-	const chart = useSingleChart(() => ({
-		element: plot.value,
-		ready: !loading.value && nodes.value.length > 0,
-		tooltip: tooltip.value,
-		build: (instance) => {
-			const graph = instance("graph", () => new Graph({}));
-			const layered = layout.value === "dagre" || layout.value === "elk";
-			const framed = layered || layout.value === "parallel";
-			graph.setConfig({
-				layoutType: LAYOUTS[layout.value],
-				layoutNodeGroup: (node) => node.group ?? "",
-				layoutGroupOrder: groups.value?.map((group) => group.id),
-				dagreLayoutSettings: {
-					rankdir: direction.value,
-					nodesep: groups.value?.length ? 48 : 36,
-					ranksep: groups.value?.length ? 150 : 96
-				},
-				layoutElkSettings: {
-					"elk.direction": direction.value === "LR" ? "RIGHT" : "DOWN",
-					"elk.spacing.nodeNode": "36",
-					"elk.layered.spacing.nodeNodeBetweenLayers": "96"
-				},
-				layoutElkNodeGroups: groups.value?.length ? [(node) => node.group ?? ""] : void 0,
-				forceLayoutSettings: {
-					linkDistance: 90,
-					charge: -600
-				},
-				nodeSize: (node) => node.size ?? 28,
-				nodeShape: (node) => SHAPES[node.shape ?? "circle"],
-				nodeFill: (node) => node.fill,
-				nodeStrokeWidth: 2,
-				nodeLabel: (node) => node.label,
-				nodeSubLabel: (node) => node.sublabel ?? "",
-				nodeLabelTrimLength: 16,
-				nodeIcon: () => "",
-				linkWidth: (link) => link.amount === void 0 || maxAmount.value === 0 ? 1.5 : 1 + 5 * link.amount / maxAmount.value,
-				linkStroke: (link) => link.color ? resolveColor(link.color, 0) : void 0,
-				linkStyle: (link) => link.dashed ? GraphLinkStyle.Dashed : GraphLinkStyle.Solid,
-				linkArrow: arrows.value ?? layered ? GraphLinkArrowStyle.Single : void 0,
-				linkLabel: (link) => link.label ? { text: link.label } : void 0,
-				linkCurvature: layered ? 0 : .2,
-				panels: (framed ? groups.value ?? [] : []).filter((group) => resolved.value.some((node) => node.group === group.id)).map((group) => ({
-					nodes: resolved.value.filter((node) => node.group === group.id).map((node) => node.id),
-					label: group.label,
-					padding: 16,
-					borderColor: groupColors.value.get(group.id)
-				})),
-				selectedNodeId: selected.value ?? void 0,
-				nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,
-				disableZoom: !zoom.value,
-				disableDrag: !zoom.value,
-				disableBrush: true,
-				fitViewPadding: {
-					top: 48,
-					right: 32,
-					bottom: 32,
-					left: 32
-				},
-				events: {
-					[Graph.selectors.node]: { click: (node) => {
-						selected.value = node.id;
-						onItemClick.value?.(nodes.value[node.index], node.index);
-					} },
-					[Graph.selectors.background]: {
-						click: () => selected.value = null,
-						dblclick: () => graph.fitView()
-					}
-				}
-			});
+	const layered = () => layout.value === "layered";
+	const framed = () => layered() || layout.value === "parallel";
+	/** 布局：节点的位置（未缩放，单位 px） */
+	const positions = computed(() => {
+		const inputs = nodes.value.map((node) => {
+			const size = node.size ?? NODE_SIZE;
+			const label = node.label ?? node.id;
+			const textWidth = Math.min(LABEL_MAX, Math.max(estimateTextWidth(label), estimateTextWidth(node.sublabel ?? "")));
+			return {
+				id: node.id,
+				group: node.group,
+				width: Math.max(size, textWidth) + 8,
+				height: size + 6 + LINE * (node.sublabel ? 2 : 1)
+			};
+		});
+		return graphLayout(inputs, shownLinks.value, {
+			layout: layout.value,
+			direction: direction.value,
+			groups: groups.value?.map((group) => group.id)
+		});
+	});
+	/** 放进绘图区：位置按绘图区缩放、居中（节点与文字不缩放），最多放大到 1.2 倍 */
+	const placed = computed(() => {
+		const items = nodes.value.map((node, index) => {
+			const position = positions.value.get(node.id) ?? {
+				x: 0,
+				y: 0
+			};
+			return {
+				...node,
+				label: node.label ?? node.id,
+				fill: node.color ? resolveColor(node.color, 0) : (node.group && groupColors.value.get(node.group)) ?? resolveColor("chart1", 0),
+				index,
+				size: node.size ?? NODE_SIZE,
+				x: position.x,
+				y: position.y
+			};
+		});
+		if (!items.length) return items;
+		const xs = items.map((item) => item.x);
+		const ys = items.map((item) => item.y);
+		const [minX, maxX, minY, maxY] = [
+			Math.min(...xs),
+			Math.max(...xs),
+			Math.min(...ys),
+			Math.max(...ys)
+		];
+		const frame = framed() && groups.value?.length ? PANEL_PAD : 0;
+		const room = {
+			x: LABEL_MAX / 2 + frame + 8,
+			top: NODE_SIZE / 2 + frame + (frame ? PANEL_TITLE : 0) + 8,
+			bottom: 46 + frame + 8
+		};
+		const width = area.width - room.x * 2;
+		const height = area.height - room.top - room.bottom;
+		const scale = Math.min(1.2, maxX > minX ? width / (maxX - minX) : 1.2, maxY > minY ? height / (maxY - minY) : 1.2);
+		const offsetX = room.x + (width - (maxX - minX) * scale) / 2 - minX * scale;
+		const offsetY = room.top + (height - (maxY - minY) * scale) / 2 - minY * scale;
+		return items.map((item) => ({
+			...item,
+			x: item.x * scale + offsetX,
+			y: item.y * scale + offsetY
+		}));
+	});
+	const placedById = computed(() => new Map(placed.value.map((node) => [node.id, node])));
+	/** 选中节点时它与相连的节点、连线保持原样，其余变淡 */
+	const connected = computed(() => {
+		if (selected.value === null) return null;
+		const ids = /* @__PURE__ */ new Set([selected.value]);
+		for (const link of shownLinks.value) {
+			if (link.source === selected.value) ids.add(link.target);
+			if (link.target === selected.value) ids.add(link.source);
+		}
+		return ids;
+	});
+	/** 一条连线的路径、终点处的方向（画箭头）与中点（写标签） */
+	function linkGeometry(source, target, arrow) {
+		const tail = arrow ? ARROW : 0;
+		if (layered()) {
+			const horizontal = direction.value === "LR";
+			const [sx, sy] = horizontal ? [source.x + source.size / 2, source.y] : [source.x, source.y + source.size / 2];
+			const [tx, ty] = horizontal ? [target.x - target.size / 2 - tail, target.y] : [target.x, target.y - target.size / 2 - tail];
 			return {
-				component: graph,
-				data: {
-					nodes: resolved.value.map((node) => ({ ...node })),
-					links: shownLinks.value.map((link) => ({ ...link }))
-				},
-				triggers: {
-					[Graph.selectors.node]: (node) => chart.tooltip(chartTooltip(node.label, [...node.sublabel ? [{
-						label: node.sublabel,
-						color: "transparent",
-						value: ""
-					}] : [], {
-						label: lang.chartDegree(degree.value.get(node.id) ?? 0),
-						color: node.fill,
-						value: ""
-					}])),
-					[Graph.selectors.link]: (link) => chart.tooltip(chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [...link.value === void 0 ? [] : [{
-						label: lang.chartValue,
-						color: link.source.fill,
-						value: valueText(link.value)
-					}], ...link.label ? [{
-						label: link.label,
-						color: "transparent",
-						value: ""
-					}] : []]))
-				}
+				d: horizontal ? `M${svgNumber(sx)},${svgNumber(sy)}C${svgNumber((sx + tx) / 2)},${svgNumber(sy)},${svgNumber((sx + tx) / 2)},${svgNumber(ty)},${svgNumber(tx)},${svgNumber(ty)}` : `M${svgNumber(sx)},${svgNumber(sy)}C${svgNumber(sx)},${svgNumber((sy + ty) / 2)},${svgNumber(tx)},${svgNumber((sy + ty) / 2)},${svgNumber(tx)},${svgNumber(ty)}`,
+				end: [tx, ty],
+				angle: horizontal ? 0 : Math.PI / 2,
+				middle: [(sx + tx) / 2, (sy + ty) / 2]
 			};
 		}
-	}));
+		const dx = target.x - source.x;
+		const dy = target.y - source.y;
+		const length = Math.hypot(dx, dy) || 1;
+		const control = [(source.x + target.x) / 2 - dy / length * length * .12, (source.y + target.y) / 2 + dx / length * length * .12];
+		const toward = (from, to, distance) => {
+			const ux = to[0] - from[0];
+			const uy = to[1] - from[1];
+			const norm = Math.hypot(ux, uy) || 1;
+			return [from[0] + ux / norm * distance, from[1] + uy / norm * distance];
+		};
+		const start = toward([source.x, source.y], control, source.size / 2);
+		const end = toward([target.x, target.y], control, target.size / 2 + tail);
+		return {
+			d: `M${svgNumber(start[0])},${svgNumber(start[1])}Q${svgNumber(control[0])},${svgNumber(control[1])},${svgNumber(end[0])},${svgNumber(end[1])}`,
+			end,
+			angle: Math.atan2(target.y - control[1], target.x - control[0]),
+			middle: [(start[0] + 2 * control[0] + end[0]) / 4, (start[1] + 2 * control[1] + end[1]) / 4]
+		};
+	}
+	function onPointermove(event) {
+		const target = event.target.closest?.("[data-node],[data-link]");
+		if (!target) {
+			hovered.value = null;
+			return;
+		}
+		const { x, y } = pointerIn(event, viewport.value ?? event.currentTarget);
+		const node = target.getAttribute("data-node");
+		hovered.value = node === null ? {
+			kind: "link",
+			index: Number(target.getAttribute("data-link")),
+			x,
+			y
+		} : {
+			kind: "node",
+			index: Number(node),
+			x,
+			y
+		};
+	}
+	function onClick(event) {
+		const target = event.target.closest?.("[data-node]");
+		if (!target) {
+			selected.value = null;
+			return;
+		}
+		const node = placed.value[Number(target.getAttribute("data-node"))];
+		if (!node) return;
+		selected.value = node.id;
+		onItemClick.value?.(nodes.value[node.index], node.index);
+	}
+	function renderPanels() {
+		if (!framed()) return null;
+		return (groups.value ?? []).map((group) => {
+			const members = placed.value.filter((node) => node.group === group.id);
+			if (!members.length) return null;
+			const half = (node) => Math.max(node.size / 2, Math.min(LABEL_MAX, estimateTextWidth(node.label)) / 2);
+			const x0 = Math.min(...members.map((node) => node.x - half(node))) - PANEL_PAD;
+			const x1 = Math.max(...members.map((node) => node.x + half(node))) + PANEL_PAD;
+			const y0 = Math.min(...members.map((node) => node.y - node.size / 2)) - PANEL_PAD - PANEL_TITLE;
+			const y1 = Math.max(...members.map((node) => node.y + node.size / 2 + LINE * (node.sublabel ? 2 : 1) + 4)) + PANEL_PAD;
+			return createVNode("g", {
+				"key": group.id,
+				"data-part": "panel"
+			}, [createVNode("rect", mergeJsxProps({
+				"x": svgNumber(x0),
+				"y": svgNumber(y0),
+				"width": svgNumber(x1 - x0),
+				"height": svgNumber(y1 - y0),
+				"rx": 8
+			}, css.attrs(graphChartStyles.panel, chartSvgStyles.stroke(groupColors.value.get(group.id) ?? colors.borderMuted))), null), createVNode("text", mergeJsxProps({
+				"x": svgNumber(x0 + 10),
+				"y": svgNumber(y0 + PANEL_TITLE / 2 + 2),
+				"dominant-baseline": "central"
+			}, css.attrs(graphChartStyles.panelLabel)), [truncateText(group.label, x1 - x0 - 20)])]);
+		});
+	}
+	function renderLinks() {
+		const withArrows = arrows.value ?? layered();
+		return shownLinks.value.map((link, index) => {
+			const source = placedById.value.get(link.source);
+			const target = placedById.value.get(link.target);
+			if (source === target) return null;
+			const amount = amounts.value[index];
+			const width = amount === void 0 || maxAmount.value === 0 ? 1.5 : 1 + 5 * amount / maxAmount.value;
+			const color = link.color ? resolveColor(link.color, 0) : colors.borderStrong;
+			const { d, end, angle, middle } = linkGeometry(source, target, withArrows);
+			const faded = connected.value !== null && link.source !== selected.value && link.target !== selected.value;
+			const arrowSize = ARROW + width;
+			const arrowPath = () => {
+				const [ex, ey] = end;
+				const tipX = ex + Math.cos(angle) * arrowSize;
+				const tipY = ey + Math.sin(angle) * arrowSize;
+				const side = arrowSize * .55;
+				const nx = -Math.sin(angle) * side;
+				const ny = Math.cos(angle) * side;
+				return `M${svgNumber(tipX)},${svgNumber(tipY)}L${svgNumber(ex + nx)},${svgNumber(ey + ny)}L${svgNumber(ex - nx)},${svgNumber(ey - ny)}Z`;
+			};
+			return createVNode("g", mergeJsxProps({ "key": `${link.source}->${link.target}:${index}` }, css.attrs(graphChartStyles.node, faded && chartSvgStyles.dimmed)), [
+				createVNode("path", mergeJsxProps({
+					"data-part": "link",
+					"data-link": index,
+					"d": d,
+					"stroke-width": svgNumber(width)
+				}, css.attrs(graphChartStyles.link, chartSvgStyles.stroke(color), link.dashed && graphChartStyles.linkDashed)), null),
+				withArrows && createVNode("path", mergeJsxProps({ "d": arrowPath() }, css.attrs(chartSvgStyles.fill(color))), null),
+				link.label && createVNode("g", mergeJsxProps({ "transform": `translate(${svgNumber(middle[0])},${svgNumber(middle[1])})` }, css.attrs(chartSvgStyles.noPointer)), [createVNode("rect", mergeJsxProps({
+					"x": -estimateTextWidth(link.label) / 2 - 4,
+					"y": -9,
+					"width": estimateTextWidth(link.label) + 8,
+					"height": 18,
+					"rx": 4
+				}, css.attrs(graphChartStyles.linkLabelBox)), null), createVNode("text", mergeJsxProps({
+					"text-anchor": "middle",
+					"dominant-baseline": "central"
+				}, css.attrs(graphChartStyles.linkLabel)), [link.label])])
+			]);
+		});
+	}
+	function renderNodes() {
+		return placed.value.map((node, index) => {
+			const faded = connected.value !== null && !connected.value.has(node.id);
+			const shape = node.shape ?? "circle";
+			return createVNode("g", mergeJsxProps({
+				"key": node.id,
+				"data-part": "node",
+				"data-node": index,
+				"transform": `translate(${svgNumber(node.x)},${svgNumber(node.y)})`
+			}, css.attrs(graphChartStyles.node, onItemClick.value && graphChartStyles.clickable, faded && chartSvgStyles.dimmed)), [
+				createVNode("path", mergeJsxProps({ "d": shapePath(shape, node.size) }, css.attrs(graphChartStyles.nodeShape, chartSvgStyles.fill(node.fill), selected.value === node.id && graphChartStyles.nodeSelected)), null),
+				createVNode("text", mergeJsxProps({
+					"y": node.size / 2 + 4,
+					"text-anchor": "middle",
+					"dominant-baseline": "hanging"
+				}, css.attrs(graphChartStyles.nodeLabel, chartSvgStyles.halo)), [truncateText(node.label, LABEL_MAX)]),
+				node.sublabel && createVNode("text", mergeJsxProps({
+					"y": node.size / 2 + 4 + LINE,
+					"text-anchor": "middle",
+					"dominant-baseline": "hanging"
+				}, css.attrs(graphChartStyles.nodeSublabel, chartSvgStyles.halo)), [truncateText(node.sublabel, LABEL_MAX)])
+			]);
+		});
+	}
+	const tip = () => {
+		const current = hovered.value;
+		if (!tooltip.value || !current) return null;
+		if (current.kind === "node") {
+			const node = placed.value[current.index];
+			if (!node) return null;
+			return {
+				x: current.x,
+				y: current.y,
+				content: chartTooltip(node.label, [...node.sublabel ? [{
+					label: node.sublabel,
+					color: "transparent",
+					value: ""
+				}] : [], {
+					label: lang.chartDegree(degree.value.get(node.id) ?? 0),
+					color: node.fill,
+					value: ""
+				}])
+			};
+		}
+		const link = shownLinks.value[current.index];
+		if (!link) return null;
+		const source = placedById.value.get(link.source);
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(lang.chartFlowLabel(source.label, placedById.value.get(link.target).label), [...link.value === void 0 ? [] : [{
+				label: lang.chartValue,
+				color: source.fill,
+				value: valueText(link.value)
+			}], ...link.label ? [{
+				label: link.label,
+				color: "transparent",
+				value: ""
+			}] : []])
+		};
+	};
+	function renderPlot() {
+		return createVNode("div", mergeJsxProps(css.attrs(graphChartStyles.viewport), zoom.value ? view.viewportProps : {}, {
+			"ref": _cache[0] || (_cache[0] = (element) => viewport.value = element),
+			"onPointermove": _cache[1] || (_cache[1] = (event) => {
+				if (zoom.value) view.viewportProps.onPointermove(event);
+				onPointermove(event);
+			}),
+			"onPointerleave": _cache[2] || (_cache[2] = () => hovered.value = null)
+		}), [
+			createVNode("svg", mergeJsxProps({
+				"width": area.width,
+				"height": area.height
+			}, css.attrs(chartSvgStyles.svg), { "onClick": onClick }), [createVNode("rect", mergeJsxProps({
+				"data-part": "background",
+				"width": area.width,
+				"height": area.height
+			}, css.attrs(graphChartStyles.background)), null), createVNode("g", { "transform": `translate(${svgNumber(view.x)} ${svgNumber(view.y)}) scale(${svgNumber(view.scale)})` }, [createVNode("g", css.attrs(chartSvgStyles.fadeIn), [
+				renderPanels(),
+				renderLinks(),
+				renderNodes()
+			])])]),
+			createVNode(ChartTooltipBox, {
+				"tip": tip(),
+				"width": area.width
+			}, null),
+			wheelHint.value && createVNode("span", css.attrs(graphChartStyles.wheelHint), [lang.chartZoomWheelHint])
+		]);
+	}
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
-		"sx": [graphChartStyles.root, sx.value],
 		"unit": unit.value,
 		"height": height.value,
-		"legend": _cache[0] || (_cache[0] = []),
-		"hiddenKeys": _cache[1] || (_cache[1] = []),
-		"onLegendToggle": _cache[2] || (_cache[2] = () => {}),
+		"legend": _cache[3] || (_cache[3] = []),
+		"hiddenKeys": _cache[4] || (_cache[4] = []),
+		"onLegendToggle": _cache[5] || (_cache[5] = () => {}),
 		"loading": loading.value,
 		"skeleton": createVNode(Skeleton, { "sx": graphChartStyles.skeleton }, null),
 		"isEmpty": nodes.value.length === 0,
@@ -244,7 +484,8 @@ var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				cells: [[link.value === void 0 ? "" : format.number(link.value, valueFormat.value), link.label ?? ""].filter(Boolean).join(" · ") || lang.emptyValue]
 			}))
 		},
-		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element)
+		"plotRef": area.ref,
+		"plot": area.ready ? renderPlot() : null
 	}), null);
 }, {
 	name: "GraphChart",
@@ -264,8 +505,7 @@ var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"onUpdate:_selected",
 		"loading",
 		"empty",
-		"onItemClick",
-		"sx"
+		"onItemClick"
 	]
 });
 //#endregion