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

package/dist/diagram/route.js

@@ -0,0 +1,327 @@
+import { borderPoint, rectCenter } from "./geometry.js";
+//#region src/diagram/route.ts
+/**
+* 正交路由（纯函数）：连线只走横竖两个方向，绕开节点，拐弯尽量少；同一个节点同一条边上的几条线均匀分开。
+* 做法同 Wybrow 等人的正交连接线路由（开源实现见 orthogonal-connector，MIT）：
+*   1. 每个节点外扩 margin 作为障碍；起点、终点从所在边的端口往外伸出一小段（stub）
+*   2. 障碍的边线、端口、两端之间的中线画成横竖“标尺”，标尺的交点（不在障碍里的）就是可走的格点
+*   3. 在格点上跑 A*：代价是长度加拐弯惩罚，状态带方向，所以同样长时选拐弯少的
+* 找不到路时退回成三段的折线（不避障）。画布有几百个节点也只取两端附近的障碍，单条线的格点在几千以内。
+*/
+var DIRECTIONS = {
+	top: {
+		x: 0,
+		y: -1
+	},
+	right: {
+		x: 1,
+		y: 0
+	},
+	bottom: {
+		x: 0,
+		y: 1
+	},
+	left: {
+		x: -1,
+		y: 0
+	}
+};
+/** 边的中点 */
+function sidePoint(rect, side) {
+	const center = rectCenter(rect);
+	if (side === "top") return {
+		x: center.x,
+		y: rect.y
+	};
+	if (side === "bottom") return {
+		x: center.x,
+		y: rect.y + rect.height
+	};
+	if (side === "left") return {
+		x: rect.x,
+		y: center.y
+	};
+	return {
+		x: rect.x + rect.width,
+		y: center.y
+	};
+}
+/**
+* 两个节点之间按相对位置选出、进的边：横向隔得开就左右连，否则上下连；
+* 目标在右边时从右边出、从左边进，在下面时从下边出、从上边进，反过来亦然
+*/
+function chooseSides(from, to) {
+	const a = rectCenter(from);
+	const b = rectCenter(to);
+	if (Math.max(to.x - (from.x + from.width), from.x - (to.x + to.width)) >= Math.max(to.y - (from.y + from.height), from.y - (to.y + to.height))) return b.x >= a.x ? ["right", "left"] : ["left", "right"];
+	return b.y >= a.y ? ["bottom", "top"] : ["top", "bottom"];
+}
+var inflate = (rect, by) => ({
+	x: rect.x - by,
+	y: rect.y - by,
+	width: rect.width + by * 2,
+	height: rect.height + by * 2
+});
+/** 点严格在矩形里面（边上不算） */
+var inside = (rect, x, y) => x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;
+/** 横线或竖线段穿过矩形内部 */
+function crosses(rect, a, b) {
+	if (a.y === b.y) {
+		const [left, right] = a.x < b.x ? [a.x, b.x] : [b.x, a.x];
+		return a.y > rect.y && a.y < rect.y + rect.height && right > rect.x && left < rect.x + rect.width;
+	}
+	const [top, bottom] = a.y < b.y ? [a.y, b.y] : [b.y, a.y];
+	return a.x > rect.x && a.x < rect.x + rect.width && bottom > rect.y && top < rect.y + rect.height;
+}
+/** 去掉共线的中间点与重复点 */
+function simplify(points) {
+	const out = [];
+	for (const point of points) {
+		const last = out[out.length - 1];
+		if (last && last.x === point.x && last.y === point.y) continue;
+		const before = out[out.length - 2];
+		if (before && last && (before.x === last.x && last.x === point.x || before.y === last.y && last.y === point.y)) {
+			out[out.length - 1] = point;
+			continue;
+		}
+		out.push(point);
+	}
+	return out;
+}
+/** 找不到路时：端口伸出后走一个 Z 形（不避障） */
+function fallback(start, end, startSide) {
+	return startSide === "left" || startSide === "right" ? [
+		start,
+		{
+			x: (start.x + end.x) / 2,
+			y: start.y
+		},
+		{
+			x: (start.x + end.x) / 2,
+			y: end.y
+		},
+		end
+	] : [
+		start,
+		{
+			x: start.x,
+			y: (start.y + end.y) / 2
+		},
+		{
+			x: end.x,
+			y: (start.y + end.y) / 2
+		},
+		end
+	];
+}
+/**
+* 两个节点之间的正交折线：从 from 的一条边出去，进 to 的一条边，绕开 obstacles（不含两端自己，函数会把两端也算上）。
+* 返回含两端端口的折线点（画布坐标），可以直接交给 Diagram 的 edges[].points
+*/
+function routeOrthogonal(from, to, obstacles = [], options = {}) {
+	const margin = options.margin ?? 16;
+	const bendPenalty = options.bendPenalty ?? 40;
+	const [autoFrom, autoTo] = chooseSides(from.rect, to.rect);
+	const fromSide = from.side ?? autoFrom;
+	const toSide = to.side ?? autoTo;
+	const startPort = from.point ?? sidePoint(from.rect, fromSide);
+	const endPort = to.point ?? sidePoint(to.rect, toSide);
+	const out = (point, side) => ({
+		x: point.x + DIRECTIONS[side].x * margin,
+		y: point.y + DIRECTIONS[side].y * margin
+	});
+	const start = out(startPort, fromSide);
+	const end = out(endPort, toSide);
+	const reach = Math.max(from.rect.width, from.rect.height, to.rect.width, to.rect.height) * 2 + margin * 4;
+	const left = Math.min(start.x, end.x) - reach;
+	const right = Math.max(start.x, end.x) + reach;
+	const top = Math.min(start.y, end.y) - reach;
+	const bottom = Math.max(start.y, end.y) + reach;
+	const blocks = [
+		from.rect,
+		to.rect,
+		...obstacles
+	].map((rect) => inflate(rect, margin - .5)).filter((rect) => rect.x < right && rect.x + rect.width > left && rect.y < bottom && rect.y + rect.height > top);
+	const xs = /* @__PURE__ */ new Set([
+		start.x,
+		end.x,
+		(start.x + end.x) / 2
+	]);
+	const ys = /* @__PURE__ */ new Set([
+		start.y,
+		end.y,
+		(start.y + end.y) / 2
+	]);
+	for (const rect of blocks) {
+		xs.add(rect.x - margin / 2).add(rect.x + rect.width + margin / 2);
+		ys.add(rect.y - margin / 2).add(rect.y + rect.height + margin / 2);
+	}
+	const columns = [...xs].sort((a, b) => a - b);
+	const rows = [...ys].sort((a, b) => a - b);
+	const blocked = (x, y) => blocks.some((rect) => inside(rect, x, y));
+	const key = (x, y) => `${x},${y}`;
+	const columnOf = new Map(columns.map((x, index) => [x, index]));
+	const rowOf = new Map(rows.map((y, index) => [y, index]));
+	const startAxis = fromSide === "left" || fromSide === "right" ? 0 : 1;
+	const endAxis = toSide === "left" || toSide === "right" ? 0 : 1;
+	const heuristic = (x, y) => Math.abs(x - end.x) + Math.abs(y - end.y);
+	const open = [{
+		x: start.x,
+		y: start.y,
+		axis: startAxis,
+		cost: 0,
+		estimate: heuristic(start.x, start.y)
+	}];
+	const best = /* @__PURE__ */ new Map([[`${key(start.x, start.y)}|${startAxis}`, 0]]);
+	let found;
+	while (open.length) {
+		let index = 0;
+		for (let i = 1; i < open.length; i++) if (open[i].estimate < open[index].estimate) index = i;
+		const current = open.splice(index, 1)[0];
+		if (current.x === end.x && current.y === end.y) {
+			found = current;
+			break;
+		}
+		const column = columnOf.get(current.x);
+		const row = rowOf.get(current.y);
+		const neighbours = [];
+		if (column > 0) neighbours.push([
+			columns[column - 1],
+			current.y,
+			0
+		]);
+		if (column < columns.length - 1) neighbours.push([
+			columns[column + 1],
+			current.y,
+			0
+		]);
+		if (row > 0) neighbours.push([
+			current.x,
+			rows[row - 1],
+			1
+		]);
+		if (row < rows.length - 1) neighbours.push([
+			current.x,
+			rows[row + 1],
+			1
+		]);
+		for (const [x, y, axis] of neighbours) {
+			if (blocked(x, y) || blocks.some((rect) => crosses(rect, current, {
+				x,
+				y
+			}))) continue;
+			const turn = current.axis !== 2 && current.axis !== axis ? bendPenalty : 0;
+			const arrive = x === end.x && y === end.y && axis !== endAxis ? bendPenalty : 0;
+			const cost = current.cost + Math.abs(x - current.x) + Math.abs(y - current.y) + turn + arrive;
+			const state = `${key(x, y)}|${axis}`;
+			if (cost >= (best.get(state) ?? Infinity)) continue;
+			best.set(state, cost);
+			open.push({
+				x,
+				y,
+				axis,
+				cost,
+				estimate: cost + heuristic(x, y),
+				previous: current
+			});
+		}
+	}
+	if (!found) return simplify([
+		startPort,
+		...fallback(start, end, fromSide),
+		endPort
+	]);
+	const path = [];
+	for (let node = found; node; node = node.previous) path.unshift({
+		x: node.x,
+		y: node.y
+	});
+	return simplify([
+		startPort,
+		...path,
+		endPort
+	]);
+}
+/**
+* 一组连线一起路由：先定每条线的出、进边，同一个节点同一条边上的几条线按对端的位置排开（端口分配，线不挤在一个点），
+* 再逐条绕开全部节点。返回连线标识 → 折线点；两端节点缺了的连线不在结果里。
+* obstacles 不写时用 nodes 本身；拖动时只重算相连的几条线，可以把全部节点作为 obstacles 传进来
+*/
+function routeEdges(nodes, edges, options = {}) {
+	const byId = new Map(nodes.map((node) => [node.id, node]));
+	const obstacles = options.obstacles ?? nodes;
+	const plans = edges.flatMap((edge) => {
+		const from = byId.get(edge.from) ?? obstacles.find((node) => node.id === edge.from);
+		const to = byId.get(edge.to) ?? obstacles.find((node) => node.id === edge.to);
+		if (!from || !to || from === to) return [];
+		const [autoFrom, autoTo] = chooseSides(from, to);
+		return [{
+			edge,
+			from,
+			to,
+			fromSide: edge.fromSide ?? autoFrom,
+			toSide: edge.toSide ?? autoTo
+		}];
+	});
+	const slots = /* @__PURE__ */ new Map();
+	for (const plan of plans) for (const end of ["from", "to"]) {
+		const node = plan[end];
+		const side = end === "from" ? plan.fromSide : plan.toSide;
+		const slot = `${node.id}|${side}`;
+		slots.set(slot, [...slots.get(slot) ?? [], {
+			plan,
+			end
+		}]);
+	}
+	const points = /* @__PURE__ */ new Map();
+	for (const [slot, list] of slots) {
+		const side = slot.split("|")[1];
+		const horizontal = side === "top" || side === "bottom";
+		const other = (item) => rectCenter(item.end === "from" ? item.plan.to : item.plan.from)[horizontal ? "x" : "y"];
+		const sorted = [...list].sort((a, b) => other(a) - other(b));
+		sorted.forEach((item, index) => {
+			const node = item.plan[item.end];
+			const base = sidePoint(node, side);
+			const span = horizontal ? node.width : node.height;
+			const offset = ((index + 1) / (sorted.length + 1) - .5) * span;
+			points.set(`${item.plan.edge.id}|${item.end}`, horizontal ? {
+				x: base.x + offset,
+				y: base.y
+			} : {
+				x: base.x,
+				y: base.y + offset
+			});
+		});
+	}
+	const routes = /* @__PURE__ */ new Map();
+	for (const plan of plans) {
+		const others = obstacles.filter((node) => node.id !== plan.from.id && node.id !== plan.to.id);
+		routes.set(plan.edge.id, routeOrthogonal({
+			rect: plan.from,
+			side: plan.fromSide,
+			point: points.get(`${plan.edge.id}|from`)
+		}, {
+			rect: plan.to,
+			side: plan.toSide,
+			point: points.get(`${plan.edge.id}|to`)
+		}, others, options));
+	}
+	return routes;
+}
+/** 两个节点之间的直线：两端落在边框上（没有路由时的默认画法） */
+function straightRoute(from, to) {
+	return [borderPoint(from, rectCenter(to)), borderPoint(to, rectCenter(from))];
+}
+/** 离点最近的边：连线拖到节点上时从这条边进去 */
+function nearestSide(rect, point) {
+	return [
+		["top", Math.abs(point.y - rect.y)],
+		["right", Math.abs(point.x - (rect.x + rect.width))],
+		["bottom", Math.abs(point.y - (rect.y + rect.height))],
+		["left", Math.abs(point.x - rect.x)]
+	].reduce((best, item) => item[1] < best[1] ? item : best)[0];
+}
+//#endregion
+export { chooseSides, nearestSide, routeEdges, routeOrthogonal, sidePoint, simplify, straightRoute };
+
+//# sourceMappingURL=route.js.map

package/dist/diagram/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","names":[],"sources":["../../src/diagram/route.ts"],"sourcesContent":["/**\n * 正交路由（纯函数）：连线只走横竖两个方向，绕开节点，拐弯尽量少；同一个节点同一条边上的几条线均匀分开。\n * 做法同 Wybrow 等人的正交连接线路由（开源实现见 orthogonal-connector，MIT）：\n *   1. 每个节点外扩 margin 作为障碍；起点、终点从所在边的端口往外伸出一小段（stub）\n *   2. 障碍的边线、端口、两端之间的中线画成横竖“标尺”，标尺的交点（不在障碍里的）就是可走的格点\n *   3. 在格点上跑 A*：代价是长度加拐弯惩罚，状态带方向，所以同样长时选拐弯少的\n * 找不到路时退回成三段的折线（不避障）。画布有几百个节点也只取两端附近的障碍，单条线的格点在几千以内。\n */\nimport { borderPoint, rectCenter, type DiagramPoint, type DiagramRect } from './geometry';\n\n/** 节点的四条边 */\nexport interface DiagramSides {\n  /** 上边 */\n  top: unknown;\n  /** 右边 */\n  right: unknown;\n  /** 下边 */\n  bottom: unknown;\n  /** 左边 */\n  left: unknown;\n}\n\n/** 连线从哪条边出去、进来 */\nexport type DiagramSide = keyof DiagramSides;\n\n/** 一端：节点的矩形、从哪条边、边上的哪一点（不写时取边的中点） */\nexport interface RouteEnd {\n  /** 节点的矩形 */\n  rect: DiagramRect;\n  /** 从哪条边；不写时按两端的相对位置选 */\n  side?: DiagramSide;\n  /** 边上的点（端口分配给出）；不写时取边的中点 */\n  point?: DiagramPoint;\n}\n\n/** routeOrthogonal 的选项 */\nexport interface RouteOptions {\n  /** 绕开节点时离节点的距离，也是端口伸出的长度，默认 16 */\n  margin?: number;\n  /** 拐一个弯折合多少长度，默认 40：同样能到时选拐弯少的 */\n  bendPenalty?: number;\n}\n\nconst DIRECTIONS: Record<DiagramSide, DiagramPoint> = {\n  top: { x: 0, y: -1 },\n  right: { x: 1, y: 0 },\n  bottom: { x: 0, y: 1 },\n  left: { x: -1, y: 0 },\n};\n\n/** 边的中点 */\nexport function sidePoint(rect: DiagramRect, side: DiagramSide): DiagramPoint {\n  const center = rectCenter(rect);\n  if (side === 'top') return { x: center.x, y: rect.y };\n  if (side === 'bottom') return { x: center.x, y: rect.y + rect.height };\n  if (side === 'left') return { x: rect.x, y: center.y };\n  return { x: rect.x + rect.width, y: center.y };\n}\n\n/**\n * 两个节点之间按相对位置选出、进的边：横向隔得开就左右连，否则上下连；\n * 目标在右边时从右边出、从左边进，在下面时从下边出、从上边进，反过来亦然\n */\nexport function chooseSides(from: DiagramRect, to: DiagramRect): [DiagramSide, DiagramSide] {\n  const a = rectCenter(from);\n  const b = rectCenter(to);\n  const gapX = Math.max(to.x - (from.x + from.width), from.x - (to.x + to.width));\n  const gapY = Math.max(to.y - (from.y + from.height), from.y - (to.y + to.height));\n  if (gapX >= gapY) return b.x >= a.x ? ['right', 'left'] : ['left', 'right'];\n  return b.y >= a.y ? ['bottom', 'top'] : ['top', 'bottom'];\n}\n\nconst inflate = (rect: DiagramRect, by: number): DiagramRect => ({\n  x: rect.x - by,\n  y: rect.y - by,\n  width: rect.width + by * 2,\n  height: rect.height + by * 2,\n});\n\n/** 点严格在矩形里面（边上不算） */\nconst inside = (rect: DiagramRect, x: number, y: number) =>\n  x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;\n\n/** 横线或竖线段穿过矩形内部 */\nfunction crosses(rect: DiagramRect, a: DiagramPoint, b: DiagramPoint): boolean {\n  if (a.y === b.y) {\n    const [left, right] = a.x < b.x ? [a.x, b.x] : [b.x, a.x];\n    return (\n      a.y > rect.y && a.y < rect.y + rect.height && right > rect.x && left < rect.x + rect.width\n    );\n  }\n  const [top, bottom] = a.y < b.y ? [a.y, b.y] : [b.y, a.y];\n  return a.x > rect.x && a.x < rect.x + rect.width && bottom > rect.y && top < rect.y + rect.height;\n}\n\n/** 去掉共线的中间点与重复点 */\nexport function simplify(points: readonly DiagramPoint[]): DiagramPoint[] {\n  const out: DiagramPoint[] = [];\n  for (const point of points) {\n    const last = out[out.length - 1];\n    if (last && last.x === point.x && last.y === point.y) continue;\n    const before = out[out.length - 2];\n    if (\n      before &&\n      last &&\n      ((before.x === last.x && last.x === point.x) || (before.y === last.y && last.y === point.y))\n    ) {\n      out[out.length - 1] = point;\n      continue;\n    }\n    out.push(point);\n  }\n  return out;\n}\n\n/** 找不到路时：端口伸出后走一个 Z 形（不避障） */\nfunction fallback(start: DiagramPoint, end: DiagramPoint, startSide: DiagramSide): DiagramPoint[] {\n  const horizontal = startSide === 'left' || startSide === 'right';\n  return horizontal\n    ? [start, { x: (start.x + end.x) / 2, y: start.y }, { x: (start.x + end.x) / 2, y: end.y }, end]\n    : [\n        start,\n        { x: start.x, y: (start.y + end.y) / 2 },\n        { x: end.x, y: (start.y + end.y) / 2 },\n        end,\n      ];\n}\n\n/** 一个格点在 A* 里的状态：位置加进来的方向（0 横、1 竖、2 起点） */\ninterface Node {\n  x: number;\n  y: number;\n  axis: 0 | 1 | 2;\n  cost: number;\n  estimate: number;\n  previous?: Node;\n}\n\n/**\n * 两个节点之间的正交折线：从 from 的一条边出去，进 to 的一条边，绕开 obstacles（不含两端自己，函数会把两端也算上）。\n * 返回含两端端口的折线点（画布坐标），可以直接交给 Diagram 的 edges[].points\n */\nexport function routeOrthogonal(\n  from: RouteEnd,\n  to: RouteEnd,\n  obstacles: readonly DiagramRect[] = [],\n  options: RouteOptions = {},\n): DiagramPoint[] {\n  const margin = options.margin ?? 16;\n  const bendPenalty = options.bendPenalty ?? 40;\n  const [autoFrom, autoTo] = chooseSides(from.rect, to.rect);\n  const fromSide = from.side ?? autoFrom;\n  const toSide = to.side ?? autoTo;\n  const startPort = from.point ?? sidePoint(from.rect, fromSide);\n  const endPort = to.point ?? sidePoint(to.rect, toSide);\n  const out = (point: DiagramPoint, side: DiagramSide) => ({\n    x: point.x + DIRECTIONS[side].x * margin,\n    y: point.y + DIRECTIONS[side].y * margin,\n  });\n  const start = out(startPort, fromSide);\n  const end = out(endPort, toSide);\n\n  // 只取两端附近的障碍：两端包围盒再往外一圈\n  const reach =\n    Math.max(from.rect.width, from.rect.height, to.rect.width, to.rect.height) * 2 + margin * 4;\n  const left = Math.min(start.x, end.x) - reach;\n  const right = Math.max(start.x, end.x) + reach;\n  const top = Math.min(start.y, end.y) - reach;\n  const bottom = Math.max(start.y, end.y) + reach;\n  const blocks = [from.rect, to.rect, ...obstacles]\n    .map((rect) => inflate(rect, margin - 0.5))\n    .filter(\n      (rect) =>\n        rect.x < right &&\n        rect.x + rect.width > left &&\n        rect.y < bottom &&\n        rect.y + rect.height > top,\n    );\n\n  // 标尺：障碍的边线（再往外半个 margin，线不贴着障碍走）、端口、两端之间的中线\n  const xs = new Set<number>([start.x, end.x, (start.x + end.x) / 2]);\n  const ys = new Set<number>([start.y, end.y, (start.y + end.y) / 2]);\n  for (const rect of blocks) {\n    xs.add(rect.x - margin / 2).add(rect.x + rect.width + margin / 2);\n    ys.add(rect.y - margin / 2).add(rect.y + rect.height + margin / 2);\n  }\n  const columns = [...xs].sort((a, b) => a - b);\n  const rows = [...ys].sort((a, b) => a - b);\n  const blocked = (x: number, y: number) => blocks.some((rect) => inside(rect, x, y));\n  const key = (x: number, y: number) => `${x},${y}`;\n  const columnOf = new Map(columns.map((x, index) => [x, index]));\n  const rowOf = new Map(rows.map((y, index) => [y, index]));\n\n  // A*：从 start 沿出边的方向出发，到 end 时要沿进边的反方向进\n  const startAxis = fromSide === 'left' || fromSide === 'right' ? 0 : 1;\n  const endAxis = toSide === 'left' || toSide === 'right' ? 0 : 1;\n  const heuristic = (x: number, y: number) => Math.abs(x - end.x) + Math.abs(y - end.y);\n  const open: Node[] = [\n    { x: start.x, y: start.y, axis: startAxis, cost: 0, estimate: heuristic(start.x, start.y) },\n  ];\n  const best = new Map<string, number>([[`${key(start.x, start.y)}|${startAxis}`, 0]]);\n  let found: Node | undefined;\n  while (open.length) {\n    // 格点不多，按估价线性取最小即可\n    let index = 0;\n    for (let i = 1; i < open.length; i++) if (open[i]!.estimate < open[index]!.estimate) index = i;\n    const current = open.splice(index, 1)[0]!;\n    if (current.x === end.x && current.y === end.y) {\n      found = current;\n      break;\n    }\n    const column = columnOf.get(current.x)!;\n    const row = rowOf.get(current.y)!;\n    const neighbours: [number, number, 0 | 1][] = [];\n    if (column > 0) neighbours.push([columns[column - 1]!, current.y, 0]);\n    if (column < columns.length - 1) neighbours.push([columns[column + 1]!, current.y, 0]);\n    if (row > 0) neighbours.push([current.x, rows[row - 1]!, 1]);\n    if (row < rows.length - 1) neighbours.push([current.x, rows[row + 1]!, 1]);\n    for (const [x, y, axis] of neighbours) {\n      if (blocked(x, y) || blocks.some((rect) => crosses(rect, current, { x, y }))) continue;\n      const turn = current.axis !== 2 && current.axis !== axis ? bendPenalty : 0;\n      // 到终点时还要拐向进边的方向\n      const arrive = x === end.x && y === end.y && axis !== endAxis ? bendPenalty : 0;\n      const cost = current.cost + Math.abs(x - current.x) + Math.abs(y - current.y) + turn + arrive;\n      const state = `${key(x, y)}|${axis}`;\n      if (cost >= (best.get(state) ?? Infinity)) continue;\n      best.set(state, cost);\n      open.push({ x, y, axis, cost, estimate: cost + heuristic(x, y), previous: current });\n    }\n  }\n  if (!found) return simplify([startPort, ...fallback(start, end, fromSide), endPort]);\n  const path: DiagramPoint[] = [];\n  for (let node: Node | undefined = found; node; node = node.previous)\n    path.unshift({ x: node.x, y: node.y });\n  return simplify([startPort, ...path, endPort]);\n}\n\n/** routeEdges 的一条连线：两端节点的标识，可以指定出、进的边 */\nexport interface RouteEdge {\n  /** 连线的标识 */\n  id: string;\n  /** 起点节点 */\n  from: string;\n  /** 终点节点 */\n  to: string;\n  /** 从起点的哪条边出去；不写时自动选 */\n  fromSide?: DiagramSide;\n  /** 从终点的哪条边进来；不写时自动选 */\n  toSide?: DiagramSide;\n}\n\n/**\n * 一组连线一起路由：先定每条线的出、进边，同一个节点同一条边上的几条线按对端的位置排开（端口分配，线不挤在一个点），\n * 再逐条绕开全部节点。返回连线标识 → 折线点；两端节点缺了的连线不在结果里。\n * obstacles 不写时用 nodes 本身；拖动时只重算相连的几条线，可以把全部节点作为 obstacles 传进来\n */\nexport function routeEdges(\n  nodes: readonly (DiagramRect & { id: string })[],\n  edges: readonly RouteEdge[],\n  options: RouteOptions & { obstacles?: readonly (DiagramRect & { id: string })[] } = {},\n): Map<string, DiagramPoint[]> {\n  const byId = new Map(nodes.map((node) => [node.id, node]));\n  const obstacles = options.obstacles ?? nodes;\n  // 每条线两端的边\n  const plans = edges.flatMap((edge) => {\n    const from = byId.get(edge.from) ?? obstacles.find((node) => node.id === edge.from);\n    const to = byId.get(edge.to) ?? obstacles.find((node) => node.id === edge.to);\n    if (!from || !to || from === to) return [];\n    const [autoFrom, autoTo] = chooseSides(from, to);\n    return [{ edge, from, to, fromSide: edge.fromSide ?? autoFrom, toSide: edge.toSide ?? autoTo }];\n  });\n  // 端口分配：同一节点同一条边上的线按对端中心沿这条边的坐标排序，均匀分布在边上\n  const slots = new Map<string, { plan: (typeof plans)[number]; end: 'from' | 'to' }[]>();\n  for (const plan of plans) {\n    for (const end of ['from', 'to'] as const) {\n      const node = plan[end];\n      const side = end === 'from' ? plan.fromSide : plan.toSide;\n      const slot = `${node.id}|${side}`;\n      slots.set(slot, [...(slots.get(slot) ?? []), { plan, end }]);\n    }\n  }\n  const points = new Map<string, DiagramPoint>();\n  for (const [slot, list] of slots) {\n    const side = slot.split('|')[1] as DiagramSide;\n    const horizontal = side === 'top' || side === 'bottom';\n    const other = (item: (typeof list)[number]) =>\n      rectCenter(item.end === 'from' ? item.plan.to : item.plan.from)[horizontal ? 'x' : 'y'];\n    const sorted = [...list].sort((a, b) => other(a) - other(b));\n    sorted.forEach((item, index) => {\n      const node = item.plan[item.end];\n      const base = sidePoint(node, side);\n      const span = horizontal ? node.width : node.height;\n      const offset = ((index + 1) / (sorted.length + 1) - 0.5) * span;\n      points.set(\n        `${item.plan.edge.id}|${item.end}`,\n        horizontal ? { x: base.x + offset, y: base.y } : { x: base.x, y: base.y + offset },\n      );\n    });\n  }\n  const routes = new Map<string, DiagramPoint[]>();\n  for (const plan of plans) {\n    const others = obstacles.filter((node) => node.id !== plan.from.id && node.id !== plan.to.id);\n    routes.set(\n      plan.edge.id,\n      routeOrthogonal(\n        { rect: plan.from, side: plan.fromSide, point: points.get(`${plan.edge.id}|from`) },\n        { rect: plan.to, side: plan.toSide, point: points.get(`${plan.edge.id}|to`) },\n        others,\n        options,\n      ),\n    );\n  }\n  return routes;\n}\n\n/** 两个节点之间的直线：两端落在边框上（没有路由时的默认画法） */\nexport function straightRoute(from: DiagramRect, to: DiagramRect): DiagramPoint[] {\n  return [borderPoint(from, rectCenter(to)), borderPoint(to, rectCenter(from))];\n}\n\n/** 离点最近的边：连线拖到节点上时从这条边进去 */\nexport function nearestSide(rect: DiagramRect, point: DiagramPoint): DiagramSide {\n  const distances: [DiagramSide, number][] = [\n    ['top', Math.abs(point.y - rect.y)],\n    ['right', Math.abs(point.x - (rect.x + rect.width))],\n    ['bottom', Math.abs(point.y - (rect.y + rect.height))],\n    ['left', Math.abs(point.x - rect.x)],\n  ];\n  return distances.reduce((best, item) => (item[1] < best[1] ? item : best))[0];\n}\n"],"mappings":"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"}

package/dist/display/Accordion.d.ts

@@ -0,0 +1,71 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type IconProps } from '../base/Icon';
+import { type SelectionProps } from '../utils/data/selection';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+import { type CollapseProps } from './Collapse';
+/** Accordion 交给 AccordionItem 的状态 */
+export interface AccordionState {
+    /** 展开着的项 */
+    readonly expanded: readonly string[];
+    /** 标题的层级（h2–h6） */
+    readonly headingLevel: 2 | 3 | 4 | 5 | 6;
+    /** 整组不可用 */
+    readonly disabled: boolean;
+    /** 展开或收起一项（单开 / 多开的规则由组决定） */
+    toggle(value: string): void;
+}
+/** Accordion 的上下文：自定义的项可以 inject 它接入组 */
+export declare const AccordionContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<AccordionState>;
+/** 两种方式共有的属性；未声明的属性落到外层 div 上 */
+interface AccordionBaseProps extends PartProps<'div'> {
+    /** 单开时允许把唯一展开的那项也收起，默认 true */
+    collapsible?: boolean;
+    /** 标题的层级，按所在页面的大纲选，默认 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** 整组不可用 */
+    disabled?: boolean;
+    /** 字号档位；不写时继承 */
+    size?: TextSize;
+    /** AccordionItem */
+    children?: VNodeChild;
+}
+/** 单开（selectionMode="single"，value 是展开项的值）或多开（value 是数组） */
+export type AccordionProps = AccordionBaseProps & SelectionProps;
+/** Accordion 的样式：root、item、heading、trigger、chevron、chevronOpen、content */
+export declare const accordionStyles: Readonly<{
+    chevron: css.CompiledStyles;
+    chevronOpen: css.CompiledStyles;
+    content: css.CompiledStyles;
+    heading: css.CompiledStyles;
+    item: css.CompiledStyles;
+    root: css.CompiledStyles;
+    trigger: css.CompiledStyles;
+    triggerDisabled: css.CompiledStyles;
+}>;
+/** 手风琴：一组可展开收起的项，单开或多开 */
+export declare const Accordion: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AccordionProps>;
+/** 未声明的属性落到每一项的外层 div 上 */
+export interface AccordionItemProps extends PartProps<'div', 'title'> {
+    /** 这一项的值 */
+    value: string;
+    /** 标题 */
+    title: VNodeChild;
+    /** 不可用：标题按钮 disabled，不能展开收起 */
+    disabled?: boolean;
+    /** 标题（h2–h6）的部件属性 */
+    propsHeading?: PartProps<'h3'>;
+    /** 标题按钮的部件属性 */
+    propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;
+    /** 展开箭头的部件属性 */
+    propsChevron?: Partial<IconProps>;
+    /** 内容区（Collapse，role="region"）的部件属性 */
+    propsContent?: Partial<CollapseProps>;
+    /** 内容 */
+    children?: VNodeChild;
+}
+/** 手风琴里的一项：标题按钮 + 展开收起的内容 */
+export declare const AccordionItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AccordionItemProps>;
+export {};

package/dist/display/Accordion.js

@@ -0,0 +1,219 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { selectedValues, toggleSelection } from "../utils/data/selection.js";
+import { Collapse } from "./Collapse.js";
+import { computed, createVNode, h, isVNode, mergeProps, shallowRef, useId } from "vue";
+import { _component, bindable, childrenProp, createContext, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown } from "@lucide/icons";
+//#region src/display/Accordion.tsx
+/**
+* 手风琴，复合组件：Accordion（div）> AccordionItem（标题按钮 + 展开收起的内容）。WAI-ARIA 的 Accordion 模式：
+* 每个标题是 heading 里的 button（aria-expanded、aria-controls），内容是 role="region"、以标题为名称；
+* 标题都在 Tab 顺序里，另外 ↑ / ↓ 在标题之间移动（到头后循环），Home / End 到第一个、最后一个。参考 Radix Accordion。
+*
+*   <Accordion _value={open} aria-label="常见问题">
+*     <AccordionItem value="ship" title="多久发货？">付款后 48 小时内。</AccordionItem>
+*     <AccordionItem value="refund" title="怎么退款？">…</AccordionItem>
+*   </Accordion>
+*   <Accordion selectionMode="multiple" _value={openList}>…</Accordion>
+*
+* 展开收起的动画同 Collapsible（Collapse 的 CSS 过渡）。部件见 AccordionItemProps。
+*/
+/** Accordion 交给 AccordionItem 的状态 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Accordion 的上下文：自定义的项可以 inject 它接入组 */
+var AccordionContext = createContext("Accordion");
+/** 两种方式共有的属性；未声明的属性落到外层 div 上 */
+/** 单开（selectionMode="single"，value 是展开项的值）或多开（value 是数组） */
+/** Accordion 的样式：root、item、heading、trigger、chevron、chevronOpen、content */
+var accordionStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	item: {
+		borderBottomWidth: "_xs",
+		borderBottomStyle: "solid",
+		borderBottomColor: "_borderMuted"
+	},
+	heading: {
+		margin: 0,
+		fontSize: "inherit",
+		fontWeight: "inherit"
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_md",
+		width: "_full",
+		minHeight: "_minTarget",
+		paddingBlock: "_md",
+		paddingInline: "_sm",
+		borderRadius: "_sm",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fill"
+		},
+		color: "_text",
+		fontWeight: "_semibold",
+		textAlign: "start"
+	},
+	triggerDisabled: { opacity: "_disabled" },
+	chevron: {
+		flexShrink: 0,
+		color: "_textMuted"
+	},
+	chevronOpen: { rotate: "180deg" },
+	content: {
+		paddingInline: "_sm",
+		paddingBlockEnd: "_md",
+		color: "_text"
+	}
+});
+/** 手风琴：一组可展开收起的项，单开或多开 */
+var Accordion = /*#__PURE__*/ _component((_props, _ctx) => {
+	const selectionMode = readonlyProp(_props, "selectionMode", "single");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const collapsible = readonlyProp(_props, "collapsible", true);
+	const headingLevel = readonlyProp(_props, "headingLevel", 3);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const size = readonlyProp(_props, "size");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let root = shallowRef(null);
+	const expanded = computed(() => selectedValues(value.value));
+	AccordionContext.provide({
+		get expanded() {
+			return expanded.value;
+		},
+		get headingLevel() {
+			return headingLevel.value;
+		},
+		get disabled() {
+			return disabled.value;
+		},
+		toggle(item) {
+			const next = toggleSelection(expanded.value, item, {
+				mode: selectionMode.value,
+				required: !collapsible.value
+			});
+			if (next === expanded.value) return;
+			value.value = selectionMode.value === "multiple" ? [...next] : next[0] ?? null;
+		}
+	});
+	function onKeydown(event) {
+		const target = event.target;
+		if (!root.value || !target.matches("[data-accordion-trigger]")) return;
+		const triggers = [...root.value.querySelectorAll("[data-accordion-trigger]:not(:disabled)")].filter((trigger) => trigger.closest("[data-accordion]") === root.value);
+		const index = triggers.indexOf(target);
+		const next = {
+			ArrowDown: triggers[(index + 1) % triggers.length],
+			ArrowUp: triggers[(index - 1 + triggers.length) % triggers.length],
+			Home: triggers[0],
+			End: triggers.at(-1)
+		}[event.key];
+		if (!next) return;
+		event.preventDefault();
+		next.focus();
+	}
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [accordionStyles.root, size.value && fontSizeStyles[size.value]] }, rest, {
+		ref: root,
+		onKeydown
+	}), {
+		"data-accordion": "",
+		"data-disabled": disabled.value || void 0
+	}), [children.value]);
+}, {
+	name: "Accordion",
+	props: [
+		"selectionMode",
+		"_value",
+		"onUpdate:_value",
+		"collapsible",
+		"headingLevel",
+		"disabled",
+		"size"
+	]
+});
+/** 未声明的属性落到每一项的外层 div 上 */
+/** 手风琴里的一项：标题按钮 + 展开收起的内容 */
+var AccordionItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache = [];
+	const value = readonlyProp(_props2, "value");
+	const title = readonlyProp(_props2, "title");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const propsHeading = readonlyProp(_props2, "propsHeading");
+	const propsTrigger = readonlyProp(_props2, "propsTrigger");
+	const propsChevron = readonlyProp(_props2, "propsChevron");
+	const propsContent = readonlyProp(_props2, "propsContent");
+	childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const accordion = AccordionContext.inject();
+	const id = useId();
+	const triggerId = `${id}-trigger`;
+	const contentId = `${id}-content`;
+	const model = {
+		get open() {
+			return accordion.expanded.includes(value.value);
+		},
+		set open(next) {
+			if (next !== model.open) accordion.toggle(value.value);
+		}
+	};
+	return () => {
+		let _slot;
+		const open = model.open;
+		const off = disabled.value || accordion.disabled;
+		const state = open ? "open" : "closed";
+		const trigger = createVNode(ButtonBase, mergeProps(mergePartProps({ sx: [accordionStyles.trigger, off && accordionStyles.triggerDisabled] }, propsTrigger.value, {
+			id: triggerId,
+			disabled: off,
+			"aria-expanded": open,
+			"aria-controls": contentId,
+			onClick: () => accordion.toggle(value.value)
+		}), {
+			"data-accordion-trigger": "",
+			"data-state": state
+		}), { default: () => [createVNode("span", null, [title.value]), createVNode(Icon, mergePartProps({
+			icon: ChevronDown,
+			sx: [
+				accordionStyles.chevron,
+				disclosureStyles.icon,
+				open && accordionStyles.chevronOpen
+			]
+		}, propsChevron.value), null)] });
+		return createVNode("div", mergeProps(mergeAttrs({ sx: accordionStyles.item }, rest), {
+			"data-state": state,
+			"data-disabled": off || void 0
+		}), [h(`h${accordion.headingLevel}`, mergeAttrs({ sx: accordionStyles.heading }, propsHeading.value), [trigger]), createVNode(Collapse, mergeProps(mergePartProps({ propsContent: { sx: accordionStyles.content } }, propsContent.value, {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId
+		}), {
+			"_open": model.open,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => model.open = $event)
+		}), _isSlot(_slot = forwardChildren(_props2)) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	name: "AccordionItem",
+	props: [
+		"value",
+		"title",
+		"disabled",
+		"propsHeading",
+		"propsTrigger",
+		"propsChevron",
+		"propsContent"
+	]
+});
+//#endregion
+export { Accordion, AccordionContext, AccordionItem, accordionStyles };
+
+//# sourceMappingURL=Accordion.js.map