@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/diagram/Diagram.js

@@ -0,0 +1,1121 @@
+import { t } from "../config/theme/tokens.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { startMove } from "../utils/dom/move.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { useMessages } from "../config/lang/messages.js";
+import { diagramInternals, useDiagram } from "./controller.js";
+import { DiagramNode } from "./DiagramNode.js";
+import { alignToGuides, arrowHead, boundsOf, polylineMidpoint, polylinePath, rectAt, rectContains, rectFromCorners, rectsIntersect, trimEnd } from "./geometry.js";
+import { diagramMessages } from "./messages.js";
+import { nearestSide, routeEdges, sidePoint, straightRoute } from "./route.js";
+import { computed, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, childrenProp, createContext, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/diagram/Diagram.tsx
+/** 画布上的一个节点：位置与大小（画布坐标），其余字段使用方自己用 */
+/** 画布上的一条连线 */
+/** 选中的节点与连线（标识） */
+/** 节点、连线渲染时的状态 */
+/** 拖动结束后一个节点的新位置 */
+/** 从端口拖出的一条新连线 */
+/** 拖动连线的一端改接到别的节点 */
+/** 拖动空白处做什么 */
+/** 框选时怎样算选中 */
+/** 背景的网格 */
+/** 没给折线的连线怎样画 */
+/** 未声明的属性落到视口（Root）上：aria-label 写画布画的是什么 */
+/** 画布里的部件（DiagramControls、DiagramMinimap）取控制器 */
+var DiagramContext = createContext("Diagram");
+/** 箭头的长度（画布坐标） */
+var ARROW = 9;
+/** 网格的间距在屏幕上小于这么多 px 时放大四倍，缩得很小时不糊成一片 */
+var MIN_GRID = 8;
+/** 对齐线吸附的距离（屏幕 px） */
+var GUIDE_TOLERANCE = 6;
+/** 拖到离视口边多近开始自动平移（px） */
+var EDGE_PAN = 32;
+/** 没吸附网格时方向键一次挪多少（画布坐标） */
+var NUDGE = 8;
+var NO_SELECTION = {
+	nodes: [],
+	edges: []
+};
+var SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/** Diagram 的样式 */
+var diagramStyles = css.create({
+	root: {
+		position: "relative",
+		overflow: "hidden",
+		backgroundColor: "_surface",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_md",
+		fontSize: "_sm",
+		color: "_text",
+		userSelect: "none",
+		cursor: {
+			default: "grab",
+			":active": "grabbing"
+		},
+		outlineStyle: {
+			default: "none",
+			":focus-visible": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_borderWidths.sm"
+	},
+	rootSelect: { cursor: "default" },
+	world: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0,
+		transformOrigin: "0 0",
+		direction: "ltr"
+	},
+	edges: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 1,
+		overflow: "visible",
+		pointerEvents: "none"
+	},
+	above: { zIndex: 3 },
+	edge: {
+		color: {
+			default: "_borderStrong",
+			_pressed: "_accent",
+			":focus-visible": "_accent"
+		},
+		strokeWidth: {
+			default: 1.5,
+			_pressed: 2.5,
+			":focus-visible": 2.5
+		},
+		outlineStyle: "none"
+	},
+	edgeSelectable: {
+		cursor: "pointer",
+		color: {
+			default: "_borderStrong",
+			":hover": {
+				default: "_textMuted",
+				_pressed: "_accent"
+			},
+			_pressed: "_accent",
+			":focus-visible": "_accent"
+		}
+	},
+	edgeDashed: { strokeDasharray: "6 4" },
+	edgeLine: {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	},
+	edgeArrow: {
+		fill: "currentColor",
+		stroke: "none"
+	},
+	edgeHit: {
+		fill: "none",
+		stroke: "transparent",
+		strokeWidth: 14,
+		pointerEvents: "stroke"
+	},
+	edgeEnd: {
+		fill: "_surface",
+		stroke: "_accent",
+		strokeWidth: 2,
+		cursor: "crosshair",
+		pointerEvents: "all"
+	},
+	preview: {
+		color: "_accent",
+		strokeWidth: 2,
+		strokeDasharray: "6 4"
+	},
+	guide: {
+		stroke: "_accent",
+		strokeWidth: 1,
+		strokeDasharray: "4 3"
+	},
+	edgeText: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 1,
+		paddingInline: "4px",
+		borderRadius: "_sm",
+		fontSize: "0.85em",
+		lineHeight: "_tight",
+		whiteSpace: "nowrap",
+		color: "_textMuted",
+		backgroundColor: "_surface",
+		pointerEvents: "none"
+	},
+	node: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 2,
+		display: "grid",
+		boxSizing: "border-box",
+		borderRadius: {
+			default: "_md",
+			":has(> [data-diagram-shape=\"pill\"])": "_full"
+		},
+		outlineStyle: {
+			default: "none",
+			_pressed: "solid",
+			":focus-visible": "solid",
+			"[data-link-target]": "dashed"
+		},
+		outlineWidth: "2px",
+		outlineColor: {
+			default: "_accent",
+			":focus-visible": "_focusRing"
+		},
+		outlineOffset: "3px"
+	},
+	nodeSelectable: { cursor: "pointer" },
+	nodeDraggable: { cursor: {
+		default: "grab",
+		":active": "grabbing"
+	} },
+	nodeDragging: {
+		cursor: "grabbing",
+		opacity: .9
+	},
+	port: {
+		position: "absolute",
+		width: "10px",
+		height: "10px",
+		boxSizing: "border-box",
+		borderRadius: "_full",
+		borderWidth: "2px",
+		borderStyle: "solid",
+		borderColor: "_accent",
+		backgroundColor: "_surface",
+		cursor: "crosshair",
+		transform: {
+			default: "translate(-50%, -50%)",
+			":hover": "translate(-50%, -50%) scale(1.3)"
+		},
+		transition: `transform ${t.durations.sm} ${t.easings.standard}`
+	},
+	portTop: {
+		left: "50%",
+		top: 0
+	},
+	portRight: {
+		left: "100%",
+		top: "50%"
+	},
+	portBottom: {
+		left: "50%",
+		top: "100%"
+	},
+	portLeft: {
+		left: 0,
+		top: "50%"
+	},
+	marquee: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 3,
+		pointerEvents: "none",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_accent",
+		borderRadius: "_xs",
+		backgroundColor: `color-mix(in srgb, ${t.colors.accent} 10%, transparent)`
+	},
+	overlay: {
+		position: "absolute",
+		inset: 0,
+		zIndex: 4,
+		pointerEvents: "none"
+	}
+});
+/** 有色调的连线：选中、焦点时照样是强调色 */
+var toned = (color) => ({ color: {
+	default: color,
+	_pressed: "_accent",
+	":focus-visible": "_accent"
+} });
+/** 连线的色调（neutral 用默认的灰） */
+var edgeToneStyles = css.create({
+	neutral: {},
+	accent: toned("_accent"),
+	info: toned("_infoText"),
+	success: toned("_successText"),
+	warning: toned("_warningText"),
+	danger: toned("_dangerText")
+});
+/** 连线文字的色调 */
+var edgeTextToneStyles = css.create({
+	neutral: {},
+	accent: { color: "_accentText" },
+	info: { color: "_infoText" },
+	success: { color: "_successText" },
+	warning: { color: "_warningText" },
+	danger: { color: "_dangerText" }
+});
+var portStyles = {
+	top: diagramStyles.portTop,
+	right: diagramStyles.portRight,
+	bottom: diagramStyles.portBottom,
+	left: diagramStyles.portLeft
+};
+/** 网格的图案：点阵、线格 */
+var gridImages = {
+	none: "none",
+	dots: `radial-gradient(circle, ${t.colors.borderStrong} 1px, transparent 1.5px)`,
+	lines: `linear-gradient(${t.colors.borderMuted} 1px, transparent 1px), linear-gradient(90deg, ${t.colors.borderMuted} 1px, transparent 1px)`
+};
+/** 随视口变的样式：平移缩放、网格、节点与文字的位置（值变化只改元素上的变量，画布不重新渲染） */
+var diagramDynamicStyles = css.create({
+	world: (x, y, scale) => ({ transform: `translate(${x}px, ${y}px) scale(${scale})` }),
+	grid: (kind, x, y, scale, gridSize) => {
+		const step = gridSize * scale < MIN_GRID ? gridSize * scale * 4 : gridSize * scale;
+		return {
+			backgroundImage: gridImages[kind],
+			backgroundSize: `${step}px ${step}px`,
+			backgroundPosition: `${x}px ${y}px`
+		};
+	},
+	box: (x, y, width, height) => ({
+		transform: `translate(${x}px, ${y}px)`,
+		width,
+		height
+	}),
+	at: (x, y) => ({ transform: `translate(${x}px, ${y}px) translate(-50%, -50%)` }),
+	height: (height) => ({ height })
+});
+/** 部件属性可以是对象，也可以按节点、连线计算 */
+function partOf(part, ...args) {
+	return typeof part === "function" ? part(...args) : part;
+}
+/** 按着加选键：Shift、Ctrl、⌘ */
+var toggles = (event) => event.shiftKey || event.ctrlKey || event.metaKey;
+/** 方向键 → 挪动的方向 */
+var ARROWS = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1]
+};
+/** 一条连线画出来的折线 */
+/** 拖动中的节点：哪些在动、挪了多少、要画的对齐线 */
+/** 正在拖的连线：从哪一点到哪一点，指针下能连的节点 */
+/**
+* 节点、连线视图收到的事件处理：画布在 setup 里建一次，传给每个视图的都是同一个对象，
+* 视图的 props 不因事件处理重新生成而变化（拖动、悬停时只有变了的节点与连线重新渲染）
+*/
+/** 节点视图的属性：位置单独给（拖动中只有动着的节点位置变），状态都是原始值，比较时不会每次都“变了” */
+/** 一个节点：节点框（定位、选中、焦点、拖动）、使用方画的内容、端口 */
+var NodeView = /*#__PURE__*/ _component((_props, _ctx) => {
+	const item = readonlyProp(_props, "item");
+	const x = readonlyProp(_props, "x");
+	const y = readonlyProp(_props, "y");
+	const label = readonlyProp(_props, "label");
+	const roleDescription = readonlyProp(_props, "roleDescription");
+	const selected = readonlyProp(_props, "selected");
+	const selectable = readonlyProp(_props, "selectable");
+	const focusable = readonlyProp(_props, "focusable");
+	const movable = readonlyProp(_props, "movable");
+	const dragging = readonlyProp(_props, "dragging");
+	const ports = readonlyProp(_props, "ports");
+	const linkTarget = readonlyProp(_props, "linkTarget");
+	const render = readonlyProp(_props, "render");
+	const part = readonlyProp(_props, "part");
+	const portPart = readonlyProp(_props, "portPart");
+	const actions = readonlyProp(_props, "actions");
+	return () => {
+		const state = { selected: selected.value };
+		const id = item.value.id;
+		return createVNode("div", mergeAttrs({ sx: [
+			diagramStyles.node,
+			selectable.value && diagramStyles.nodeSelectable,
+			selectable.value && interactionTransitions.colors,
+			movable.value && diagramStyles.nodeDraggable,
+			dragging.value && diagramStyles.nodeDragging,
+			css.bind(diagramDynamicStyles.box, () => [
+				x.value,
+				y.value,
+				item.value.width,
+				item.value.height
+			], true)
+		] }, partOf(part.value, item.value, state), {
+			...dataAttrs({
+				"data-diagram-item": "node",
+				"data-node": id,
+				"data-link-target": linkTarget.value || void 0
+			}),
+			"aria-roledescription": roleDescription.value,
+			"aria-label": label.value,
+			onPointerdown: (event) => actions.value.nodeDown(id, event),
+			onPointerenter: () => actions.value.nodeEnter(id),
+			onPointerleave: () => actions.value.nodeLeave(id),
+			...focusable.value ? {
+				role: "button",
+				tabindex: 0,
+				"aria-pressed": selectable.value ? selected.value : void 0,
+				onClick: (event) => actions.value.nodeClick(id, event),
+				onKeydown: (event) => actions.value.nodeKey(id, event),
+				onFocus: (event) => actions.value.focus({
+					x: x.value,
+					y: y.value,
+					width: item.value.width,
+					height: item.value.height
+				}, event)
+			} : { role: "img" }
+		}), [render.value(item.value, state), ports.value && SIDES.map((side) => createVNode("span", mergeProps({ "key": side }, mergeAttrs({ sx: [diagramStyles.port, portStyles[side]] }, portPart.value, {
+			...dataAttrs({ "data-diagram-port": side }),
+			"aria-hidden": "true",
+			onPointerdown: (event) => actions.value.portDown(id, side, event)
+		})), null))]);
+	};
+}, {
+	name: "NodeView",
+	props: [
+		"item",
+		"x",
+		"y",
+		"label",
+		"roleDescription",
+		"selected",
+		"selectable",
+		"focusable",
+		"movable",
+		"dragging",
+		"ports",
+		"linkTarget",
+		"render",
+		"part",
+		"portPart",
+		"actions"
+	]
+});
+/** 连线视图的属性：折线的数组只在这条线真的变了时才换（不动的线一直是同一个数组） */
+/** 一条连线：加粗的透明命中区域、线、箭头（改接的把手画在节点上面那层，见 Diagram） */
+var EdgeView = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const item = readonlyProp(_props2, "item");
+	const points = readonlyProp(_props2, "points");
+	const label = readonlyProp(_props2, "label");
+	const roleDescription = readonlyProp(_props2, "roleDescription");
+	const radius = readonlyProp(_props2, "radius");
+	const selected = readonlyProp(_props2, "selected");
+	const selectable = readonlyProp(_props2, "selectable");
+	const part = readonlyProp(_props2, "part");
+	const actions = readonlyProp(_props2, "actions");
+	return () => {
+		const state = { selected: selected.value };
+		const path = polylinePath(trimEnd(points.value, ARROW * .7), radius.value);
+		return createVNode("g", mergeAttrs({ sx: [
+			diagramStyles.edge,
+			selectable.value && diagramStyles.edgeSelectable,
+			css.select(() => item.value.tone && edgeToneStyles[item.value.tone], true),
+			css.select(() => item.value.dashed && diagramStyles.edgeDashed, true)
+		] }, partOf(part.value, item.value, state), {
+			...dataAttrs({
+				"data-diagram-item": "edge",
+				"data-edge": item.value.id
+			}),
+			...selectable.value ? {
+				role: "button",
+				tabindex: 0,
+				"aria-roledescription": roleDescription.value,
+				"aria-label": label.value,
+				"aria-pressed": selected.value,
+				onClick: (event) => actions.value.edgeClick(item.value.id, event),
+				onKeydown: (event) => actions.value.edgeKey(item.value.id, event),
+				onFocus: (event) => actions.value.focus(boundsOf([], points.value), event)
+			} : {}
+		}), [
+			selectable.value && createVNode("path", mergeProps({ "d": path }, css.attrs(diagramStyles.edgeHit)), null),
+			createVNode("path", mergeProps({ "d": path }, css.attrs(diagramStyles.edgeLine)), null),
+			createVNode("polygon", mergeProps({ "points": arrowHead(points.value, ARROW) }, css.attrs(diagramStyles.edgeArrow)), null)
+		]);
+	};
+}, {
+	name: "EdgeView",
+	props: [
+		"item",
+		"points",
+		"label",
+		"roleDescription",
+		"radius",
+		"selected",
+		"selectable",
+		"part",
+		"actions"
+	]
+});
+/** 连线文字视图的属性 */
+/** 连线上的文字（HTML，画在连线上面）；渲染函数返回空时不画 */
+var EdgeTextView = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const item = readonlyProp(_props3, "item");
+	const x = readonlyProp(_props3, "x");
+	const y = readonlyProp(_props3, "y");
+	const selected = readonlyProp(_props3, "selected");
+	const render = readonlyProp(_props3, "render");
+	const part = readonlyProp(_props3, "part");
+	return () => {
+		const state = { selected: selected.value };
+		const text = render.value(item.value, state);
+		if (text == null || text === false || text === "") return null;
+		return createVNode("div", mergeAttrs({ sx: [
+			diagramStyles.edgeText,
+			css.select(() => item.value.tone && edgeTextToneStyles[item.value.tone], true),
+			css.bind(diagramDynamicStyles.at, () => [x.value, y.value], true)
+		] }, partOf(part.value, item.value, state), { "aria-hidden": "true" }), [text]);
+	};
+}, {
+	name: "EdgeTextView",
+	props: [
+		"item",
+		"x",
+		"y",
+		"selected",
+		"render",
+		"part"
+	]
+});
+/** 画布 */
+var Diagram = /*#__PURE__*/ _component((_props4, _ctx4) => {
+	const nodes = readonlyProp(_props4, "nodes");
+	const edges = readonlyProp(_props4, "edges", () => []);
+	const children = childrenProp(_props4);
+	const getNodeLabel = readonlyProp(_props4, "getNodeLabel");
+	const getEdgeLabel = readonlyProp(_props4, "getEdgeLabel");
+	const edgeText = readonlyProp(_props4, "edgeText");
+	const height = readonlyProp(_props4, "height", 360);
+	const controller = readonlyProp(_props4, "controller");
+	const selectable = readonlyProp(_props4, "selectable", false);
+	const selected = bindable(_props4, "_selected", () => NO_SELECTION, _ctx4.emit);
+	const dragMode = readonlyProp(_props4, "dragMode", "pan");
+	const selectionMode = readonlyProp(_props4, "selectionMode", "full");
+	const grid = readonlyProp(_props4, "grid", "none");
+	const gridSize = readonlyProp(_props4, "gridSize", 20);
+	const fitView = readonlyProp(_props4, "fitView", false);
+	const extent = readonlyProp(_props4, "extent");
+	const routing = readonlyProp(_props4, "routing", "straight");
+	const edgeRadius = readonlyProp(_props4, "edgeRadius", 6);
+	const draggable = readonlyProp(_props4, "draggable", false);
+	const snapToGrid = readonlyProp(_props4, "snapToGrid", false);
+	const guides = readonlyProp(_props4, "guides", true);
+	const onNodesMove = readonlyProp(_props4, "onNodesMove");
+	const connectable = readonlyProp(_props4, "connectable", false);
+	const canConnect = readonlyProp(_props4, "canConnect");
+	const onConnect = readonlyProp(_props4, "onConnect");
+	const onReconnect = readonlyProp(_props4, "onReconnect");
+	const backdrop = readonlyProp(_props4, "backdrop");
+	const overlay = readonlyProp(_props4, "overlay");
+	const propsWorld = readonlyProp(_props4, "propsWorld");
+	const propsNode = readonlyProp(_props4, "propsNode");
+	const propsPort = readonlyProp(_props4, "propsPort");
+	const propsEdge = readonlyProp(_props4, "propsEdge");
+	const propsEdgeText = readonlyProp(_props4, "propsEdgeText");
+	const propsMarquee = readonlyProp(_props4, "propsMarquee");
+	const propsGuide = readonlyProp(_props4, "propsGuide");
+	const rest = restProps(_props4, _ctx4, false);
+	const messages = useMessages("diagram", diagramMessages);
+	const diagram = untrack(() => controller.value) ?? useDiagram();
+	const internal = diagramInternals(diagram);
+	DiagramContext.provide(diagram);
+	let marquee = shallowRef(null);
+	let drag = shallowRef(null);
+	let link = shallowRef(null);
+	let hovered = shallowRef(null);
+	let space = false;
+	let moved = false;
+	/** 没给 children 时的节点：标题是无障碍名称的 DiagramNode */
+	const defaultNode = (node) => createVNode(DiagramNode, { "title": getNodeLabel.value(node) }, null);
+	const nodeById = computed(() => new Map(nodes.value.map((node) => [node.id, node])));
+	const draggableOf = (node) => typeof draggable.value === "function" ? draggable.value(node) : draggable.value;
+	/** 节点现在的位置：拖动中的按拖到的位置 */
+	const placed = (node) => drag.value?.ids.has(node.id) ? {
+		...node,
+		x: node.x + drag.value.dx,
+		y: node.y + drag.value.dy
+	} : node;
+	/** 不拖动时每条连线的折线：给了 points 用它，没给时按 routing 画；两端的节点缺了不画 */
+	const restingRoutes = computed(() => {
+		const automatic = edges.value.filter((edge) => !hasPoints(edge));
+		const routed = routing.value === "orthogonal" ? routeEdges(nodes.value, automatic) : void 0;
+		return edges.value.flatMap((edge) => {
+			if (hasPoints(edge)) return [{
+				edge,
+				points: edge.points
+			}];
+			const from = nodeById.value.get(edge.from);
+			const to = nodeById.value.get(edge.to);
+			if (!from || !to) return [];
+			return [{
+				edge,
+				points: routed?.get(edge.id) ?? straightRoute(from, to)
+			}];
+		});
+	});
+	/** 拖动中：与动着的节点相连的线按 routing 实时重画，别的线不动 */
+	const routes = computed(() => {
+		if (!drag.value) return restingRoutes.value;
+		const moving = drag.value.ids;
+		const touches = (edge) => moving.has(edge.from) || moving.has(edge.to);
+		const list = nodes.value.map(placed);
+		const byId = new Map(list.map((node) => [node.id, node]));
+		const touched = edges.value.filter(touches);
+		const routed = routing.value === "orthogonal" ? routeEdges(list, touched) : void 0;
+		return restingRoutes.value.map((route) => {
+			if (!touches(route.edge)) return route;
+			const from = byId.get(route.edge.from);
+			const to = byId.get(route.edge.to);
+			if (!from || !to) return route;
+			return {
+				edge: route.edge,
+				points: routed?.get(route.edge.id) ?? straightRoute(from, to)
+			};
+		});
+	});
+	const bounds = computed(() => boundsOf(nodes.value, restingRoutes.value.flatMap((route) => route.points)));
+	const selectedNodes = computed(() => new Set(selected.value.nodes));
+	const selectedEdges = computed(() => new Set(selected.value.edges));
+	internal.content = () => extent.value ?? bounds.value;
+	internal.nodes = () => nodes.value.map(placed);
+	const root = () => internal.element.value;
+	const inOverlay = (target) => target instanceof Element && target.closest("[data-diagram-overlay]") !== null;
+	/** 事件发生在空白处：不在节点、连线、浮层里 */
+	const onBackground = (target) => target instanceof Element && !target.closest("[data-diagram-item],[data-diagram-overlay]");
+	/** 这次按下要框选：可选择、在空白处、按的是主键，拖动方式是框选或按着 Shift */
+	const startsMarquee = (event) => selectable.value && !space && event.button === 0 && onBackground(event.target) && (dragMode.value === "select" || event.shiftKey);
+	/** 视口（平移缩放）要不要处理这个事件；处理了就算用户动过视口 */
+	function handlesViewport(event) {
+		if (inOverlay(event.target)) return false;
+		const handles = event.type === "wheel" ? true : event.type === "keydown" ? event.target === root() : space || onBackground(event.target) && !(event.type === "pointerdown" && (dragMode.value === "select" || event.shiftKey));
+		if (handles) moved = true;
+		return handles;
+	}
+	internal.filter = handlesViewport;
+	useResizeObserver(root, () => {
+		const element = root();
+		if (!element) return;
+		internal.size.value = {
+			width: element.clientWidth,
+			height: element.clientHeight
+		};
+		if (fitView.value && !moved && element.clientWidth > 0) diagram.fit();
+	});
+	/** 点了一项：加选键按着时切换它，否则只选它 */
+	function choose(kind, id, toggle) {
+		if (!selectable.value) return;
+		if (!toggle) {
+			selected.value = {
+				nodes: kind === "nodes" ? [id] : [],
+				edges: kind === "edges" ? [id] : []
+			};
+			return;
+		}
+		const list = selected.value[kind];
+		selected.value = {
+			...selected.value,
+			[kind]: list.includes(id) ? list.filter((item) => item !== id) : [...list, id]
+		};
+	}
+	const clear = () => {
+		if (selected.value.nodes.length || selected.value.edges.length) selected.value = NO_SELECTION;
+	};
+	const selectAll = () => {
+		selected.value = {
+			nodes: nodes.value.map((node) => node.id),
+			edges: routes.value.map((route) => route.edge.id)
+		};
+	};
+	/**
+	* 拖到视口边上时自动平移：指针停着不动也继续移，每移一帧调 onPan 让拖着的东西跟上指针
+	* （拖动按指针的画布坐标算，视口挪了画布坐标就变了）
+	*/
+	function edgePan(onPan) {
+		let frame = 0;
+		let speed = {
+			x: 0,
+			y: 0
+		};
+		const tick = () => {
+			frame = 0;
+			if (!speed.x && !speed.y) return;
+			internal.view.panTo(diagram.x + speed.x, diagram.y + speed.y);
+			onPan();
+			frame = requestAnimationFrame(tick);
+		};
+		return {
+			follow(point) {
+				const box = root()?.getBoundingClientRect();
+				if (!box) return;
+				const near = (distance) => distance < EDGE_PAN ? Math.ceil((EDGE_PAN - distance) / 3) : 0;
+				speed = {
+					x: near(point.clientX - box.left) - near(box.right - point.clientX),
+					y: near(point.clientY - box.top) - near(box.bottom - point.clientY)
+				};
+				if ((speed.x || speed.y) && !frame) frame = requestAnimationFrame(tick);
+			},
+			stop() {
+				speed = {
+					x: 0,
+					y: 0
+				};
+				if (frame) cancelAnimationFrame(frame);
+				frame = 0;
+			}
+		};
+	}
+	/** 拖动期间按 Esc 取消：在捕获阶段拦下，不让它再去清空选择 */
+	function cancelOnEscape(cancel) {
+		const onKey = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			cancel();
+		};
+		window.addEventListener("keydown", onKey, true);
+		return () => window.removeEventListener("keydown", onKey, true);
+	}
+	function startMarquee(event) {
+		const element = root();
+		if (!element || !startsMarquee(event)) return;
+		const box = element.getBoundingClientRect();
+		const origin = {
+			x: event.clientX - box.left,
+			y: event.clientY - box.top
+		};
+		const base = event.ctrlKey || event.metaKey || dragMode.value === "select" && event.shiftKey ? selected.value : NO_SELECTION;
+		const covers = (area, rect) => selectionMode.value === "partial" ? rectsIntersect(area, rect) : rectContains(area, rect);
+		startMove(event, {
+			threshold: 3,
+			onMove: (point) => {
+				const screen = rectFromCorners(origin, {
+					x: point.clientX - box.left,
+					y: point.clientY - box.top
+				});
+				marquee.value = screen;
+				const { x, y, scale } = diagram;
+				const area = {
+					x: (screen.x - x) / scale,
+					y: (screen.y - y) / scale,
+					width: screen.width / scale,
+					height: screen.height / scale
+				};
+				const next = {
+					nodes: union(base.nodes, nodes.value.filter((node) => covers(area, node)).map((node) => node.id)),
+					edges: union(base.edges, routes.value.filter((route) => covers(area, boundsOf([], route.points))).map((route) => route.edge.id))
+				};
+				if (!sameIds(next.nodes, selected.value.nodes) || !sameIds(next.edges, selected.value.edges)) selected.value = next;
+			},
+			onEnd: () => marquee.value = null
+		});
+	}
+	/** 按在节点上：拖动它（选中的一起拖）；按在节点里的输入框、按钮、端口上时不拖 */
+	function startDrag(node, event) {
+		if (event.button !== 0 || space || !draggableOf(node)) return;
+		if (event.target.closest("[data-diagram-port],input,textarea,select,button,a,[contenteditable=\"true\"]")) return;
+		const additive = toggles(event);
+		const ids = selectedNodes.value.has(node.id) ? selected.value.nodes : additive ? [...selected.value.nodes, node.id] : [node.id];
+		const moving = ids.flatMap((id) => {
+			const item = nodeById.value.get(id);
+			return item && draggableOf(item) ? [item] : [];
+		});
+		const others = nodes.value.filter((item) => !ids.includes(item.id));
+		const start = diagram.toDiagram(event.clientX, event.clientY);
+		let pointer = {
+			clientX: event.clientX,
+			clientY: event.clientY
+		};
+		let begun = false;
+		let release = () => {};
+		const update = () => {
+			const now = diagram.toDiagram(pointer.clientX, pointer.clientY);
+			let x = node.x + now.x - start.x;
+			let y = node.y + now.y - start.y;
+			if (snapToGrid.value) {
+				x = Math.round(x / gridSize.value) * gridSize.value;
+				y = Math.round(y / gridSize.value) * gridSize.value;
+			}
+			let lines = [];
+			if (guides.value) {
+				const aligned = alignToGuides({
+					...node,
+					x,
+					y
+				}, others, GUIDE_TOLERANCE / diagram.scale);
+				({x, y} = aligned);
+				lines = aligned.guides;
+			}
+			drag.value = {
+				ids: new Set(moving.map((item) => item.id)),
+				dx: x - node.x,
+				dy: y - node.y,
+				guides: lines
+			};
+		};
+		const pan = edgePan(update);
+		const cancel = startMove(event, {
+			threshold: 3,
+			onMove: (point) => {
+				pointer = point;
+				if (!begun) {
+					begun = true;
+					if (selectable.value && !selectedNodes.value.has(node.id)) selected.value = {
+						nodes: ids,
+						edges: additive ? selected.value.edges : []
+					};
+					release = cancelOnEscape(() => cancel());
+				}
+				update();
+				pan.follow(point);
+			},
+			onEnd: ({ moved: dragged, cancelled }) => {
+				pan.stop();
+				release();
+				const result = drag.value;
+				drag.value = null;
+				if (!dragged || cancelled || !result || result.dx === 0 && result.dy === 0) return;
+				onNodesMove.value?.(moving.map((item) => ({
+					id: item.id,
+					x: item.x + result.dx,
+					y: item.y + result.dy
+				})));
+			}
+		});
+	}
+	/**
+	* 拖一条连线：从 anchor 拉出来，松开在能连的节点上时 done(节点, 离指针最近的边)。
+	* fixed 是不动的那一端的节点（连到它自己不算）；fixedIsSource 时它是起点、箭头在指针一端
+	*/
+	function startLink(event, anchor, fixed, fixedIsSource, done) {
+		if (event.button !== 0) return;
+		event.stopPropagation();
+		event.preventDefault();
+		let pointer = {
+			clientX: event.clientX,
+			clientY: event.clientY
+		};
+		let release = () => {};
+		let landing = null;
+		const allowed = (candidate) => candidate.id !== fixed.id && (canConnect.value?.(fixedIsSource ? fixed : candidate, fixedIsSource ? candidate : fixed) ?? true);
+		const update = () => {
+			const point = diagram.toDiagram(pointer.clientX, pointer.clientY);
+			const hit = rectAt(nodes.value, point);
+			landing = hit && allowed(hit) ? {
+				node: hit,
+				side: nearestSide(hit, point)
+			} : null;
+			const end = landing ? sidePoint(landing.node, landing.side) : point;
+			link.value = {
+				from: fixedIsSource ? anchor : end,
+				to: fixedIsSource ? end : anchor,
+				target: landing?.node.id ?? null
+			};
+		};
+		const pan = edgePan(update);
+		update();
+		const cancel = startMove(event, {
+			captureTarget: root() ?? void 0,
+			swallowClick: true,
+			onMove: (point) => {
+				pointer = point;
+				update();
+				pan.follow(point);
+			},
+			onEnd: ({ cancelled }) => {
+				pan.stop();
+				release();
+				link.value = null;
+				if (!cancelled && landing) done(landing.node, landing.side);
+			}
+		});
+		release = cancelOnEscape(() => cancel());
+	}
+	function onKeydown(event) {
+		if (event.key === " " && event.target === root()) space = true;
+		if (!selectable.value) return;
+		if (event.key === "Escape") clear();
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+			event.preventDefault();
+			selectAll();
+		}
+	}
+	/** 节点上的方向键：挪动（选中的一起挪，Shift 五步） */
+	function nudge(node, event) {
+		const arrow = ARROWS[event.key];
+		if (!arrow || !onNodesMove.value || !draggableOf(node)) return;
+		event.preventDefault();
+		const step = (snapToGrid.value ? gridSize.value : NUDGE) * (event.shiftKey ? 5 : 1);
+		const ids = selectedNodes.value.has(node.id) ? selected.value.nodes : [node.id];
+		onNodesMove.value(ids.flatMap((id) => {
+			const item = nodeById.value.get(id);
+			return item && draggableOf(item) ? [{
+				id,
+				x: item.x + arrow[0] * step,
+				y: item.y + arrow[1] * step
+			}] : [];
+		}));
+	}
+	/** Enter / 空格：选中（同点击） */
+	function activates(event) {
+		if (event.key !== "Enter" && event.key !== " ") return false;
+		event.preventDefault();
+		return true;
+	}
+	const actions = {
+		nodeDown(id, event) {
+			const node = nodeById.value.get(id);
+			if (node) startDrag(node, event);
+		},
+		nodeClick: (id, event) => choose("nodes", id, toggles(event)),
+		nodeKey(id, event) {
+			const node = nodeById.value.get(id);
+			if (!node) return;
+			if (activates(event)) choose("nodes", id, toggles(event));
+			else nudge(node, event);
+		},
+		nodeEnter: (id) => hovered.value = id,
+		nodeLeave(id) {
+			if (hovered.value === id) hovered.value = null;
+		},
+		portDown(id, side, event) {
+			const node = nodeById.value.get(id);
+			if (!node) return;
+			startLink(event, sidePoint(node, side), node, true, (target, toSide) => onConnect.value?.({
+				from: id,
+				to: target.id,
+				fromSide: side,
+				toSide
+			}));
+		},
+		edgeClick: (id, event) => choose("edges", id, toggles(event)),
+		edgeKey(id, event) {
+			if (activates(event)) choose("edges", id, toggles(event));
+		},
+		endDown(id, end, event) {
+			const route = routes.value.find((item) => item.edge.id === id);
+			const from = route && nodeById.value.get(route.edge.from);
+			const to = route && nodeById.value.get(route.edge.to);
+			if (!route || !from || !to || !onReconnect.value) return;
+			const { points } = route;
+			startLink(event, end === "to" ? points[0] : points[points.length - 1], end === "to" ? from : to, end === "to", (target, side) => onReconnect.value({
+				edge: id,
+				end,
+				node: target.id,
+				side
+			}));
+		},
+		focus(rect, event) {
+			if (event.target instanceof Element && event.target.matches(":focus-visible")) diagram.reveal(rect);
+		}
+	};
+	return () => {
+		const { view } = internal;
+		const focusable = selectable.value || !!onNodesMove.value;
+		const ends = connectable.value && onReconnect.value && !drag.value && !link.value ? routes.value.filter(({ edge }) => selectedEdges.value.has(edge.id) && nodeById.value.has(edge.from) && nodeById.value.has(edge.to)) : [];
+		return createVNode("div", mergeAttrs({ sx: [
+			diagramStyles.root,
+			css.bind(diagramDynamicStyles.height, () => [height.value], true),
+			dragMode.value === "select" && diagramStyles.rootSelect,
+			css.bind(diagramDynamicStyles.grid, () => [
+				grid.value,
+				diagram.x,
+				diagram.y,
+				diagram.scale,
+				gridSize.value
+			], true)
+		] }, rest, {
+			...view.viewportProps,
+			ref: (element) => internal.element.value = element,
+			role: "group",
+			tabindex: 0,
+			"aria-roledescription": messages.canvas,
+			onPointerdown: (event) => {
+				startMarquee(event);
+				view.viewportProps.onPointerdown(event);
+			},
+			onClick: (event) => {
+				if (selectable.value && onBackground(event.target)) clear();
+			},
+			onKeydown: (event) => {
+				onKeydown(event);
+				view.viewportProps.onKeydown(event);
+			},
+			onKeyup: (event) => {
+				if (event.key === " ") space = false;
+			},
+			onBlur: () => space = false,
+			onScroll: (event) => {
+				const element = event.currentTarget;
+				element.scrollTop = 0;
+				element.scrollLeft = 0;
+			}
+		}), [
+			createVNode("div", mergeAttrs({ sx: [diagramStyles.world, css.bind(diagramDynamicStyles.world, () => [
+				diagram.x,
+				diagram.y,
+				diagram.scale
+			], true)] }, propsWorld.value, dataAttrs({ "data-diagram-world": true })), [
+				backdrop.value,
+				nodes.value.map((node) => {
+					const at = placed(node);
+					const isSelected = selectedNodes.value.has(node.id);
+					return createVNode(NodeView, {
+						"key": node.id,
+						"item": node,
+						"x": at.x,
+						"y": at.y,
+						"label": getNodeLabel.value(node),
+						"roleDescription": messages.node,
+						"selected": isSelected,
+						"selectable": selectable.value,
+						"focusable": focusable,
+						"movable": draggableOf(node),
+						"dragging": drag.value?.ids.has(node.id) ?? false,
+						"ports": connectable.value && !drag.value && (hovered.value === node.id || isSelected || link.value?.target === node.id),
+						"linkTarget": link.value?.target === node.id,
+						"render": children.value ?? defaultNode,
+						"part": propsNode.value,
+						"portPart": propsPort.value,
+						"actions": actions
+					}, null);
+				}),
+				createVNode("svg", mergeProps(css.attrs(diagramStyles.edges), {
+					"width": "1",
+					"height": "1",
+					"aria-hidden": selectable.value ? void 0 : "true"
+				}), [routes.value.map(({ edge, points }) => {
+					const from = nodeById.value.get(edge.from);
+					const to = nodeById.value.get(edge.to);
+					const isSelected = selectedEdges.value.has(edge.id);
+					return createVNode(EdgeView, {
+						"key": edge.id,
+						"item": edge,
+						"points": points,
+						"label": getEdgeLabel.value?.(edge) ?? messages.edgeBetween(from ? getNodeLabel.value(from) : edge.from, to ? getNodeLabel.value(to) : edge.to),
+						"roleDescription": messages.edge,
+						"radius": edgeRadius.value,
+						"selected": isSelected,
+						"selectable": selectable.value,
+						"part": propsEdge.value,
+						"actions": actions
+					}, null);
+				})]),
+				edgeText.value && routes.value.map(({ edge, points }) => {
+					const at = drag.value || !edge.labelAt ? polylineMidpoint(points) : edge.labelAt;
+					return createVNode(EdgeTextView, {
+						"key": edge.id,
+						"item": edge,
+						"x": at.x,
+						"y": at.y,
+						"selected": selectedEdges.value.has(edge.id),
+						"render": edgeText.value,
+						"part": propsEdgeText.value
+					}, null);
+				}),
+				(!!drag.value?.guides.length || !!link.value || ends.length > 0) && createVNode("svg", mergeProps(css.attrs(diagramStyles.edges, diagramStyles.above), {
+					"width": "1",
+					"height": "1",
+					"aria-hidden": "true",
+					"data-diagram-transient": ""
+				}), [
+					drag.value?.guides.map((guide, index) => createVNode("line", mergeProps({ "key": index }, mergeAttrs({ sx: diagramStyles.guide }, propsGuide.value, {
+						x1: guide.from.x,
+						y1: guide.from.y,
+						x2: guide.to.x,
+						y2: guide.to.y
+					})), null)),
+					ends.flatMap(({ edge, points }) => ["from", "to"].map((end) => {
+						const at = end === "from" ? points[0] : points[points.length - 1];
+						return createVNode("circle", mergeProps({
+							"key": `${edge.id}:${end}`,
+							"cx": at.x,
+							"cy": at.y,
+							"r": 5
+						}, css.attrs(diagramStyles.edgeEnd), {
+							"data-diagram-end": end,
+							"onPointerdown": (event) => actions.endDown(edge.id, end, event)
+						}), null);
+					})),
+					link.value && createVNode("g", css.attrs(diagramStyles.preview), [createVNode("path", mergeProps({ "d": polylinePath(trimEnd([link.value.from, link.value.to], ARROW * .7)) }, css.attrs(diagramStyles.edgeLine)), null), createVNode("polygon", mergeProps({ "points": arrowHead([link.value.from, link.value.to], ARROW) }, css.attrs(diagramStyles.edgeArrow)), null)])
+				])
+			]),
+			marquee.value && createVNode("div", mergeAttrs({ sx: [diagramStyles.marquee, css.bind(diagramDynamicStyles.box, () => [
+				marquee.value.x,
+				marquee.value.y,
+				marquee.value.width,
+				marquee.value.height
+			], true)] }, propsMarquee.value), null),
+			overlay.value != null && createVNode("div", mergeProps(css.attrs(diagramStyles.overlay), { "data-diagram-overlay": "" }), [overlay.value])
+		]);
+	};
+}, {
+	name: "Diagram",
+	props: [
+		"nodes",
+		"edges",
+		"getNodeLabel",
+		"getEdgeLabel",
+		"edgeText",
+		"height",
+		"controller",
+		"selectable",
+		"_selected",
+		"onUpdate:_selected",
+		"dragMode",
+		"selectionMode",
+		"grid",
+		"gridSize",
+		"fitView",
+		"extent",
+		"routing",
+		"edgeRadius",
+		"draggable",
+		"snapToGrid",
+		"guides",
+		"onNodesMove",
+		"connectable",
+		"canConnect",
+		"onConnect",
+		"onReconnect",
+		"backdrop",
+		"overlay",
+		"propsWorld",
+		"propsNode",
+		"propsPort",
+		"propsEdge",
+		"propsEdgeText",
+		"propsMarquee",
+		"propsGuide"
+	]
+});
+/** 连线自己给了折线 */
+var hasPoints = (edge) => !!edge.points && edge.points.length >= 2;
+/** 两组标识合在一起，去掉重复 */
+var union = (a, b) => [.../* @__PURE__ */ new Set([...a, ...b])];
+/** 两组标识是否相同（顺序无关） */
+function sameIds(a, b) {
+	if (a.length !== b.length) return false;
+	const set = new Set(a);
+	return b.every((id) => set.has(id));
+}
+//#endregion
+export { Diagram, DiagramContext, diagramDynamicStyles, diagramStyles };
+
+//# sourceMappingURL=Diagram.js.map