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

package/dist/diagram/export.js

@@ -0,0 +1,115 @@
+import { backgroundOf, rasterizeSvg } from "../utils/dom/rasterize.js";
+import { diagramInternals } from "./controller.js";
+//#region src/diagram/export.ts
+/**
+* 画布导出成 SVG、PNG：整张图（不只是视口里看得见的部分），节点的 HTML 原样放进 SVG 的 foreignObject。
+*
+*   const diagram = useDiagram();
+*   downloadFile('流程.svg', diagramToSvg(diagram), 'image/svg+xml');
+*   downloadFile('流程.png', await diagramToPng(diagram), 'image/png');
+*
+* 复制随视口平移缩放的那一层，把每个元素算出来的样式（主题变量已经解析）写到它自己身上，
+* 去掉端口、对齐线、拖出来的连线和选中、焦点的描边，平移到内容的左上角（留 padding）。
+* 范围是 Diagram 的 extent，没写时包住全部节点与连线。网页字体不会被内联：看图的机器上没有时换成回退字体。
+*/
+/** 导出时去掉的元素：端口、改接把手、对齐线与拖出来的连线 */
+var TRANSIENT = "[data-diagram-port],[data-diagram-transient]";
+/** 整张图导出成 SVG 文字；画布还没挂载、没有内容时报错 */
+function diagramToSvg(diagram, options = {}) {
+	const { svg } = render(diagram, options);
+	return svg;
+}
+/** 整张图导出成 PNG（两倍分辨率，pixelRatio 可改） */
+async function diagramToPng(diagram, options = {}) {
+	const { svg, width, height } = render(diagram, options);
+	return rasterizeSvg(svg, {
+		width,
+		height
+	}, { scale: options.pixelRatio ?? 2 });
+}
+function render(diagram, { padding = 24, background }) {
+	const internal = diagramInternals(diagram);
+	const root = internal.element.value;
+	const world = root?.querySelector("[data-diagram-world]");
+	const content = internal.content();
+	if (!root || !world || !content) throw new Error("diagramToSvg: 画布还没有挂载或没有内容");
+	const width = Math.ceil(content.width + padding * 2);
+	const height = Math.ceil(content.height + padding * 2);
+	const copy = world.cloneNode(true);
+	inlineStyles(world, copy);
+	for (const element of copy.querySelectorAll(TRANSIENT)) element.remove();
+	for (const element of copy.querySelectorAll("[data-diagram-item]")) element.style.setProperty("outline-style", "none");
+	copy.style.setProperty("transform", `translate(${padding - content.x}px, ${padding - content.y}px)`);
+	const frame = document.createElement("div");
+	frame.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+	frame.style.cssText = `position: relative; width: ${width}px; height: ${height}px; overflow: hidden; background: ${background ?? backgroundOf(root)}`;
+	frame.append(copy);
+	return {
+		svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><foreignObject x="0" y="0" width="${width}" height="${height}">${new XMLSerializer().serializeToString(frame)}</foreignObject></svg>`,
+		width,
+		height
+	};
+}
+/**
+* 会继承的属性：与父元素相同时不必写（复制品里照样继承到）。不在表里的按不继承处理，只是多写几条，结果不变
+*/
+var INHERITED = new Set("color cursor direction font-family font-size font-style font-weight font-stretch font-variant font-variant-ligatures font-variant-caps font-variant-numeric font-variant-east-asian font-feature-settings font-kerning font-optical-sizing font-variation-settings font-size-adjust font-synthesis font-palette letter-spacing line-height list-style-image list-style-position list-style-type quotes tab-size text-align text-align-last text-indent text-shadow text-transform text-rendering visibility white-space white-space-collapse text-wrap-mode word-break word-spacing overflow-wrap word-wrap writing-mode hyphens line-break caret-color color-scheme border-collapse border-spacing empty-cells caption-side pointer-events fill fill-opacity fill-rule stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width paint-order text-anchor dominant-baseline clip-rule shape-rendering image-rendering marker-start marker-mid marker-end orphans widows math-depth math-style ruby-position text-emphasis-color text-emphasis-position text-emphasis-style text-underline-position text-decoration-skip-ink text-size-adjust -webkit-text-fill-color -webkit-text-stroke-color -webkit-text-stroke-width -webkit-font-smoothing -webkit-text-size-adjust".split(/\s+/));
+/**
+* 把原元素算出来的样式写到复制品上（类名在导出的文件里不存在），复制品去掉类名。
+* 只写导出后会变的：不继承的属性与这种元素的默认值相同时不写，继承的属性与父元素相同时不写——
+* 全部写上时一张小图也有几百 KB
+*/
+function inlineStyles(source, target) {
+	const defaults = defaultStyles();
+	const sources = [source, ...source.querySelectorAll("*")];
+	const targets = [target, ...target.querySelectorAll("*")];
+	try {
+		sources.forEach((from, index) => {
+			const to = targets[index];
+			if (!to?.style) return;
+			const computed = getComputedStyle(from);
+			const parent = from === source || !from.parentElement ? null : getComputedStyle(from.parentElement);
+			const initial = defaults.of(from);
+			let text = "";
+			for (let i = 0; i < computed.length; i++) {
+				const name = computed[i];
+				const value = computed.getPropertyValue(name);
+				if (!(parent && INHERITED.has(name) ? value === parent.getPropertyValue(name) : value === initial.getPropertyValue(name))) text += `${name}:${value};`;
+			}
+			to.setAttribute("style", text);
+			to.removeAttribute("class");
+		});
+	} finally {
+		defaults.dispose();
+	}
+}
+/**
+* 各种元素的默认样式：在一个 all: initial 的容器里各放一个同名元素读出来（容器不继承页面的字体、颜色，
+* 同导出后 foreignObject 里的情形）。按命名空间与标签缓存，用完 dispose 移除容器
+*/
+function defaultStyles() {
+	const sandbox = document.createElement("div");
+	sandbox.style.cssText = "all: initial; position: fixed; left: -100000px; top: 0; contain: strict;";
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	sandbox.append(svg);
+	document.body.append(sandbox);
+	const cache = /* @__PURE__ */ new Map();
+	return {
+		of(element) {
+			const key = `${element.namespaceURI}|${element.localName}`;
+			let style = cache.get(key);
+			if (!style) {
+				const sample = document.createElementNS(element.namespaceURI, element.localName);
+				(element instanceof SVGElement && element.localName !== "svg" ? svg : sandbox).append(sample);
+				style = getComputedStyle(sample);
+				cache.set(key, style);
+			}
+			return style;
+		},
+		dispose: () => sandbox.remove()
+	};
+}
+//#endregion
+export { diagramToPng, diagramToSvg };
+
+//# sourceMappingURL=export.js.map

package/dist/diagram/export.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.js","names":[],"sources":["../../src/diagram/export.ts"],"sourcesContent":["/**\n * 画布导出成 SVG、PNG：整张图（不只是视口里看得见的部分），节点的 HTML 原样放进 SVG 的 foreignObject。\n *\n *   const diagram = useDiagram();\n *   downloadFile('流程.svg', diagramToSvg(diagram), 'image/svg+xml');\n *   downloadFile('流程.png', await diagramToPng(diagram), 'image/png');\n *\n * 复制随视口平移缩放的那一层，把每个元素算出来的样式（主题变量已经解析）写到它自己身上，\n * 去掉端口、对齐线、拖出来的连线和选中、焦点的描边，平移到内容的左上角（留 padding）。\n * 范围是 Diagram 的 extent，没写时包住全部节点与连线。网页字体不会被内联：看图的机器上没有时换成回退字体。\n */\nimport { backgroundOf, rasterizeSvg } from '../utils/dom/rasterize';\nimport { diagramInternals, type DiagramController } from './controller';\n\n/** 导出的选项 */\nexport interface DiagramExportOptions {\n  /** 内容四周留的空白（px），默认 24 */\n  padding?: number;\n  /** 底色，默认取画布的背景色；SVG 写 'transparent' 时透明 */\n  background?: string;\n}\n\n/** 导出时去掉的元素：端口、改接把手、对齐线与拖出来的连线 */\nconst TRANSIENT = '[data-diagram-port],[data-diagram-transient]';\n\n/** 整张图导出成 SVG 文字；画布还没挂载、没有内容时报错 */\nexport function diagramToSvg(\n  diagram: DiagramController,\n  options: DiagramExportOptions = {},\n): string {\n  const { svg } = render(diagram, options);\n  return svg;\n}\n\n/** 整张图导出成 PNG（两倍分辨率，pixelRatio 可改） */\nexport async function diagramToPng(\n  diagram: DiagramController,\n  options: DiagramExportOptions & { pixelRatio?: number } = {},\n): Promise<Blob> {\n  const { svg, width, height } = render(diagram, options);\n  return rasterizeSvg(svg, { width, height }, { scale: options.pixelRatio ?? 2 });\n}\n\nfunction render(diagram: DiagramController, { padding = 24, background }: DiagramExportOptions) {\n  const internal = diagramInternals(diagram);\n  const root = internal.element.value;\n  const world = root?.querySelector<HTMLElement>('[data-diagram-world]');\n  const content = internal.content();\n  if (!root || !world || !content) throw new Error('diagramToSvg: 画布还没有挂载或没有内容');\n  const width = Math.ceil(content.width + padding * 2);\n  const height = Math.ceil(content.height + padding * 2);\n\n  const copy = world.cloneNode(true) as HTMLElement;\n  inlineStyles(world, copy);\n  for (const element of copy.querySelectorAll(TRANSIENT)) element.remove();\n  // 选中、焦点的描边不是图的一部分\n  for (const element of copy.querySelectorAll<HTMLElement>('[data-diagram-item]')) {\n    element.style.setProperty('outline-style', 'none');\n  }\n  copy.style.setProperty(\n    'transform',\n    `translate(${padding - content.x}px, ${padding - content.y}px)`,\n  );\n\n  const frame = document.createElement('div');\n  frame.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');\n  frame.style.cssText = `position: relative; width: ${width}px; height: ${height}px; overflow: hidden; background: ${\n    background ?? backgroundOf(root)\n  }`;\n  frame.append(copy);\n  const html = new XMLSerializer().serializeToString(frame);\n  const svg =\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\" viewBox=\"0 0 ${width} ${height}\">` +\n    `<foreignObject x=\"0\" y=\"0\" width=\"${width}\" height=\"${height}\">${html}</foreignObject></svg>`;\n  return { svg, width, height };\n}\n\n/**\n * 会继承的属性：与父元素相同时不必写（复制品里照样继承到）。不在表里的按不继承处理，只是多写几条，结果不变\n */\nconst INHERITED = new Set(\n  (\n    'color cursor direction font-family font-size font-style font-weight font-stretch font-variant ' +\n    'font-variant-ligatures font-variant-caps font-variant-numeric font-variant-east-asian font-feature-settings ' +\n    'font-kerning font-optical-sizing font-variation-settings font-size-adjust font-synthesis font-palette ' +\n    'letter-spacing line-height list-style-image list-style-position list-style-type quotes tab-size ' +\n    'text-align text-align-last text-indent text-shadow text-transform text-rendering visibility white-space ' +\n    'white-space-collapse text-wrap-mode word-break word-spacing overflow-wrap word-wrap writing-mode hyphens ' +\n    'line-break caret-color color-scheme border-collapse border-spacing empty-cells caption-side pointer-events ' +\n    'fill fill-opacity fill-rule stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin ' +\n    'stroke-miterlimit stroke-opacity stroke-width paint-order text-anchor dominant-baseline clip-rule ' +\n    'shape-rendering image-rendering marker-start marker-mid marker-end orphans widows math-depth math-style ' +\n    'ruby-position text-emphasis-color text-emphasis-position text-emphasis-style text-underline-position ' +\n    'text-decoration-skip-ink text-size-adjust -webkit-text-fill-color -webkit-text-stroke-color ' +\n    '-webkit-text-stroke-width -webkit-font-smoothing -webkit-text-size-adjust'\n  ).split(/\\s+/),\n);\n\n/**\n * 把原元素算出来的样式写到复制品上（类名在导出的文件里不存在），复制品去掉类名。\n * 只写导出后会变的：不继承的属性与这种元素的默认值相同时不写，继承的属性与父元素相同时不写——\n * 全部写上时一张小图也有几百 KB\n */\nfunction inlineStyles(source: Element, target: Element) {\n  const defaults = defaultStyles();\n  const sources = [source, ...source.querySelectorAll('*')];\n  const targets = [target, ...target.querySelectorAll('*')];\n  try {\n    sources.forEach((from, index) => {\n      const to = targets[index] as HTMLElement | SVGElement | undefined;\n      if (!to?.style) return;\n      const computed = getComputedStyle(from);\n      const parent =\n        from === source || !from.parentElement ? null : getComputedStyle(from.parentElement);\n      const initial = defaults.of(from);\n      let text = '';\n      for (let i = 0; i < computed.length; i++) {\n        const name = computed[i]!;\n        const value = computed.getPropertyValue(name);\n        const same =\n          parent && INHERITED.has(name)\n            ? value === parent.getPropertyValue(name)\n            : value === initial.getPropertyValue(name);\n        if (!same) text += `${name}:${value};`;\n      }\n      to.setAttribute('style', text);\n      to.removeAttribute('class');\n    });\n  } finally {\n    defaults.dispose();\n  }\n}\n\n/**\n * 各种元素的默认样式：在一个 all: initial 的容器里各放一个同名元素读出来（容器不继承页面的字体、颜色，\n * 同导出后 foreignObject 里的情形）。按命名空间与标签缓存，用完 dispose 移除容器\n */\nfunction defaultStyles() {\n  const sandbox = document.createElement('div');\n  sandbox.style.cssText =\n    'all: initial; position: fixed; left: -100000px; top: 0; contain: strict;';\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n  sandbox.append(svg);\n  document.body.append(sandbox);\n  const cache = new Map<string, CSSStyleDeclaration>();\n  return {\n    of(element: Element) {\n      const key = `${element.namespaceURI}|${element.localName}`;\n      let style = cache.get(key);\n      if (!style) {\n        const sample = document.createElementNS(element.namespaceURI, element.localName);\n        (element instanceof SVGElement && element.localName !== 'svg' ? svg : sandbox).append(\n          sample,\n        );\n        style = getComputedStyle(sample);\n        cache.set(key, style);\n      }\n      return style;\n    },\n    dispose: () => sandbox.remove(),\n  };\n}\n"],"mappings":"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"}

package/dist/diagram/geometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 画布的几何（纯函数）：点与矩形、边界、相交与包含、折线的路径与中点、箭头。坐标都是画布坐标（缩放前的 px）。
+ */
+/** 画布上的一点 */
+export interface DiagramPoint {
+    /** 横坐标 */
+    x: number;
+    /** 纵坐标 */
+    y: number;
+}
+/** 画布上的矩形：左上角与大小 */
+export interface DiagramRect {
+    /** 左边的横坐标 */
+    x: number;
+    /** 上边的纵坐标 */
+    y: number;
+    /** 宽 */
+    width: number;
+    /** 高 */
+    height: number;
+}
+/** 包住全部矩形与点的最小矩形；什么都没有时 undefined */
+export declare function boundsOf(rects: Iterable<DiagramRect>, points?: Iterable<DiagramPoint>): DiagramRect | undefined;
+/** 两个角点围成的矩形（框选时按下点与当前点的先后不定） */
+export declare function rectFromCorners(a: DiagramPoint, b: DiagramPoint): DiagramRect;
+/** 两个矩形有重叠（只碰到边不算） */
+export declare function rectsIntersect(a: DiagramRect, b: DiagramRect): boolean;
+/** outer 整个包住 inner（边重合也算） */
+export declare function rectContains(outer: DiagramRect, inner: DiagramRect): boolean;
+/** 矩形的中心 */
+export declare function rectCenter(rect: DiagramRect): DiagramPoint;
+/** 从矩形中心朝 toward 方向的射线与矩形边框的交点：两个节点之间没有路由时，直线的两端落在边框上 */
+export declare function borderPoint(rect: DiagramRect, toward: DiagramPoint): DiagramPoint;
+/**
+ * 折线的 SVG 路径（`M … L …`）；radius 大于 0 时拐角改成圆角（正交路由的线更柔和），
+ * 圆角不超过相邻两段各自长度的一半，短段不会画反
+ */
+export declare function polylinePath(points: readonly DiagramPoint[], radius?: number): string;
+/** 折线上走到一半长度的点：连线文字默认放在这里 */
+export declare function polylineMidpoint(points: readonly DiagramPoint[]): DiagramPoint;
+/**
+ * 折线终点的箭头：三角形的三个顶点（SVG polygon 的 points），尖端在终点，沿最后一段的方向；
+ * 没有方向（少于两个不同的点）时返回空串
+ */
+export declare function arrowHead(points: readonly DiagramPoint[], size?: number): string;
+/** 去掉终点处箭头占的那一段：线画到箭头的底边，不从箭尖下面露出来 */
+export declare function trimEnd(points: readonly DiagramPoint[], length: number): DiagramPoint[];
+/** 对齐线：拖动时与别的节点对齐的那条线（画布坐标的线段） */
+export interface DiagramGuide {
+    /** 起点 */
+    from: DiagramPoint;
+    /** 终点 */
+    to: DiagramPoint;
+}
+/**
+ * 拖动中的矩形向别的矩形对齐：左、中、右任一条竖线与别人的左、中、右相差不到 tolerance 时吸过去，横向同理（上、中、下）。
+ * 返回吸附后的位置与要画的对齐线（每个方向取差得最少的那一条，线从两个矩形里靠外的一端画到另一端）
+ */
+export declare function alignToGuides(rect: DiagramRect, others: readonly DiagramRect[], tolerance: number): {
+    x: number;
+    y: number;
+    guides: DiagramGuide[];
+};
+/** 点落在哪个矩形里：后面的在上层，先找后面的 */
+export declare function rectAt<T extends DiagramRect>(rects: readonly T[], point: DiagramPoint): T | undefined;

package/dist/diagram/geometry.js

@@ -0,0 +1,219 @@
+//#region src/diagram/geometry.ts
+/** 包住全部矩形与点的最小矩形；什么都没有时 undefined */
+function boundsOf(rects, points = []) {
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const rect of rects) {
+		left = Math.min(left, rect.x);
+		top = Math.min(top, rect.y);
+		right = Math.max(right, rect.x + rect.width);
+		bottom = Math.max(bottom, rect.y + rect.height);
+	}
+	for (const point of points) {
+		left = Math.min(left, point.x);
+		top = Math.min(top, point.y);
+		right = Math.max(right, point.x);
+		bottom = Math.max(bottom, point.y);
+	}
+	return left === Infinity ? void 0 : {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+/** 两个角点围成的矩形（框选时按下点与当前点的先后不定） */
+function rectFromCorners(a, b) {
+	return {
+		x: Math.min(a.x, b.x),
+		y: Math.min(a.y, b.y),
+		width: Math.abs(a.x - b.x),
+		height: Math.abs(a.y - b.y)
+	};
+}
+/** 两个矩形有重叠（只碰到边不算） */
+function rectsIntersect(a, b) {
+	return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+}
+/** outer 整个包住 inner（边重合也算） */
+function rectContains(outer, inner) {
+	return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+/** 矩形的中心 */
+function rectCenter(rect) {
+	return {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
+}
+/** 从矩形中心朝 toward 方向的射线与矩形边框的交点：两个节点之间没有路由时，直线的两端落在边框上 */
+function borderPoint(rect, toward) {
+	const center = rectCenter(rect);
+	const dx = toward.x - center.x;
+	const dy = toward.y - center.y;
+	if (dx === 0 && dy === 0) return center;
+	const scale = Math.min(dx === 0 ? Infinity : rect.width / 2 / Math.abs(dx), dy === 0 ? Infinity : rect.height / 2 / Math.abs(dy));
+	return {
+		x: center.x + dx * scale,
+		y: center.y + dy * scale
+	};
+}
+/** 两点之间的距离 */
+var distance = (a, b) => Math.hypot(b.x - a.x, b.y - a.y);
+/**
+* 折线的 SVG 路径（`M … L …`）；radius 大于 0 时拐角改成圆角（正交路由的线更柔和），
+* 圆角不超过相邻两段各自长度的一半，短段不会画反
+*/
+function polylinePath(points, radius = 0) {
+	if (points.length === 0) return "";
+	const [first] = points;
+	let path = `M${first.x} ${first.y}`;
+	for (let index = 1; index < points.length; index++) {
+		const point = points[index];
+		const next = points[index + 1];
+		if (!next || radius <= 0) {
+			path += ` L${point.x} ${point.y}`;
+			continue;
+		}
+		const previous = points[index - 1];
+		const r = Math.min(radius, distance(previous, point) / 2, distance(point, next) / 2);
+		const before = towards(point, previous, r);
+		const after = towards(point, next, r);
+		path += ` L${before.x} ${before.y} Q${point.x} ${point.y} ${after.x} ${after.y}`;
+	}
+	return path;
+}
+/** 从 from 朝 to 走 length 的点 */
+function towards(from, to, length) {
+	const total = distance(from, to);
+	if (total === 0) return from;
+	return {
+		x: from.x + (to.x - from.x) * length / total,
+		y: from.y + (to.y - from.y) * length / total
+	};
+}
+/** 折线上走到一半长度的点：连线文字默认放在这里 */
+function polylineMidpoint(points) {
+	if (points.length === 0) return {
+		x: 0,
+		y: 0
+	};
+	let remaining = points.slice(1).reduce((sum, point, index) => sum + distance(points[index], point), 0) / 2;
+	for (let index = 1; index < points.length; index++) {
+		const segment = distance(points[index - 1], points[index]);
+		if (remaining <= segment) return towards(points[index - 1], points[index], remaining);
+		remaining -= segment;
+	}
+	return points[points.length - 1];
+}
+/**
+* 折线终点的箭头：三角形的三个顶点（SVG polygon 的 points），尖端在终点，沿最后一段的方向；
+* 没有方向（少于两个不同的点）时返回空串
+*/
+function arrowHead(points, size = 8) {
+	const tip = points[points.length - 1];
+	const from = [...points].reverse().find((point) => tip && (point.x !== tip.x || point.y !== tip.y));
+	if (!tip || !from) return "";
+	const angle = Math.atan2(tip.y - from.y, tip.x - from.x);
+	const back = {
+		x: tip.x - Math.cos(angle) * size,
+		y: tip.y - Math.sin(angle) * size
+	};
+	const half = size * .5;
+	const left = {
+		x: back.x + Math.sin(angle) * half,
+		y: back.y - Math.cos(angle) * half
+	};
+	const right = {
+		x: back.x - Math.sin(angle) * half,
+		y: back.y + Math.cos(angle) * half
+	};
+	const round = (value) => Math.round(value * 100) / 100;
+	return [
+		tip,
+		left,
+		right
+	].map((point) => `${round(point.x)},${round(point.y)}`).join(" ");
+}
+/** 去掉终点处箭头占的那一段：线画到箭头的底边，不从箭尖下面露出来 */
+function trimEnd(points, length) {
+	if (points.length < 2 || length <= 0) return [...points];
+	const tip = points[points.length - 1];
+	const before = points[points.length - 2];
+	if (distance(before, tip) <= length) return [...points];
+	return [...points.slice(0, -1), towards(tip, before, length)];
+}
+/**
+* 拖动中的矩形向别的矩形对齐：左、中、右任一条竖线与别人的左、中、右相差不到 tolerance 时吸过去，横向同理（上、中、下）。
+* 返回吸附后的位置与要画的对齐线（每个方向取差得最少的那一条，线从两个矩形里靠外的一端画到另一端）
+*/
+function alignToGuides(rect, others, tolerance) {
+	const lines = (start, size) => [
+		start,
+		start + size / 2,
+		start + size
+	];
+	let best = [];
+	for (const axis of ["x", "y"]) {
+		const own = axis === "x" ? lines(rect.x, rect.width) : lines(rect.y, rect.height);
+		let found;
+		for (const other of others) {
+			const theirs = axis === "x" ? lines(other.x, other.width) : lines(other.y, other.height);
+			for (const mine of own) for (const line of theirs) {
+				const diff = line - mine;
+				if (Math.abs(diff) <= tolerance && (!found || Math.abs(diff) < Math.abs(found.diff))) found = {
+					diff,
+					at: line,
+					other
+				};
+			}
+		}
+		if (found) best = [...best, {
+			axis,
+			...found
+		}];
+	}
+	const x = rect.x + (best.find((item) => item.axis === "x")?.diff ?? 0);
+	const y = rect.y + (best.find((item) => item.axis === "y")?.diff ?? 0);
+	const placed = {
+		...rect,
+		x,
+		y
+	};
+	return {
+		x,
+		y,
+		guides: best.map(({ axis, at, other }) => axis === "x" ? {
+			from: {
+				x: at,
+				y: Math.min(placed.y, other.y)
+			},
+			to: {
+				x: at,
+				y: Math.max(placed.y + placed.height, other.y + other.height)
+			}
+		} : {
+			from: {
+				x: Math.min(placed.x, other.x),
+				y: at
+			},
+			to: {
+				x: Math.max(placed.x + placed.width, other.x + other.width),
+				y: at
+			}
+		})
+	};
+}
+/** 点落在哪个矩形里：后面的在上层，先找后面的 */
+function rectAt(rects, point) {
+	for (let index = rects.length - 1; index >= 0; index--) {
+		const rect = rects[index];
+		if (point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height) return rect;
+	}
+}
+//#endregion
+export { alignToGuides, arrowHead, borderPoint, boundsOf, polylineMidpoint, polylinePath, rectAt, rectCenter, rectContains, rectFromCorners, rectsIntersect, trimEnd };
+
+//# sourceMappingURL=geometry.js.map

package/dist/diagram/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","names":[],"sources":["../../src/diagram/geometry.ts"],"sourcesContent":["/**\n * 画布的几何（纯函数）：点与矩形、边界、相交与包含、折线的路径与中点、箭头。坐标都是画布坐标（缩放前的 px）。\n */\n\n/** 画布上的一点 */\nexport interface DiagramPoint {\n  /** 横坐标 */\n  x: number;\n  /** 纵坐标 */\n  y: number;\n}\n\n/** 画布上的矩形：左上角与大小 */\nexport interface DiagramRect {\n  /** 左边的横坐标 */\n  x: number;\n  /** 上边的纵坐标 */\n  y: number;\n  /** 宽 */\n  width: number;\n  /** 高 */\n  height: number;\n}\n\n/** 包住全部矩形与点的最小矩形；什么都没有时 undefined */\nexport function boundsOf(\n  rects: Iterable<DiagramRect>,\n  points: Iterable<DiagramPoint> = [],\n): DiagramRect | undefined {\n  let left = Infinity;\n  let top = Infinity;\n  let right = -Infinity;\n  let bottom = -Infinity;\n  for (const rect of rects) {\n    left = Math.min(left, rect.x);\n    top = Math.min(top, rect.y);\n    right = Math.max(right, rect.x + rect.width);\n    bottom = Math.max(bottom, rect.y + rect.height);\n  }\n  for (const point of points) {\n    left = Math.min(left, point.x);\n    top = Math.min(top, point.y);\n    right = Math.max(right, point.x);\n    bottom = Math.max(bottom, point.y);\n  }\n  return left === Infinity\n    ? undefined\n    : { x: left, y: top, width: right - left, height: bottom - top };\n}\n\n/** 两个角点围成的矩形（框选时按下点与当前点的先后不定） */\nexport function rectFromCorners(a: DiagramPoint, b: DiagramPoint): DiagramRect {\n  return {\n    x: Math.min(a.x, b.x),\n    y: Math.min(a.y, b.y),\n    width: Math.abs(a.x - b.x),\n    height: Math.abs(a.y - b.y),\n  };\n}\n\n/** 两个矩形有重叠（只碰到边不算） */\nexport function rectsIntersect(a: DiagramRect, b: DiagramRect): boolean {\n  return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;\n}\n\n/** outer 整个包住 inner（边重合也算） */\nexport function rectContains(outer: DiagramRect, inner: DiagramRect): boolean {\n  return (\n    inner.x >= outer.x &&\n    inner.y >= outer.y &&\n    inner.x + inner.width <= outer.x + outer.width &&\n    inner.y + inner.height <= outer.y + outer.height\n  );\n}\n\n/** 矩形的中心 */\nexport function rectCenter(rect: DiagramRect): DiagramPoint {\n  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };\n}\n\n/** 从矩形中心朝 toward 方向的射线与矩形边框的交点：两个节点之间没有路由时，直线的两端落在边框上 */\nexport function borderPoint(rect: DiagramRect, toward: DiagramPoint): DiagramPoint {\n  const center = rectCenter(rect);\n  const dx = toward.x - center.x;\n  const dy = toward.y - center.y;\n  if (dx === 0 && dy === 0) return center;\n  // 射线先碰到竖边还是横边：比较两个方向上到边的比例\n  const scale = Math.min(\n    dx === 0 ? Infinity : rect.width / 2 / Math.abs(dx),\n    dy === 0 ? Infinity : rect.height / 2 / Math.abs(dy),\n  );\n  return { x: center.x + dx * scale, y: center.y + dy * scale };\n}\n\n/** 两点之间的距离 */\nconst distance = (a: DiagramPoint, b: DiagramPoint) => Math.hypot(b.x - a.x, b.y - a.y);\n\n/**\n * 折线的 SVG 路径（`M … L …`）；radius 大于 0 时拐角改成圆角（正交路由的线更柔和），\n * 圆角不超过相邻两段各自长度的一半，短段不会画反\n */\nexport function polylinePath(points: readonly DiagramPoint[], radius = 0): string {\n  if (points.length === 0) return '';\n  const [first] = points as [DiagramPoint];\n  let path = `M${first.x} ${first.y}`;\n  for (let index = 1; index < points.length; index++) {\n    const point = points[index]!;\n    const next = points[index + 1];\n    if (!next || radius <= 0) {\n      path += ` L${point.x} ${point.y}`;\n      continue;\n    }\n    const previous = points[index - 1]!;\n    const r = Math.min(radius, distance(previous, point) / 2, distance(point, next) / 2);\n    const before = towards(point, previous, r);\n    const after = towards(point, next, r);\n    path += ` L${before.x} ${before.y} Q${point.x} ${point.y} ${after.x} ${after.y}`;\n  }\n  return path;\n}\n\n/** 从 from 朝 to 走 length 的点 */\nfunction towards(from: DiagramPoint, to: DiagramPoint, length: number): DiagramPoint {\n  const total = distance(from, to);\n  if (total === 0) return from;\n  return {\n    x: from.x + ((to.x - from.x) * length) / total,\n    y: from.y + ((to.y - from.y) * length) / total,\n  };\n}\n\n/** 折线上走到一半长度的点：连线文字默认放在这里 */\nexport function polylineMidpoint(points: readonly DiagramPoint[]): DiagramPoint {\n  if (points.length === 0) return { x: 0, y: 0 };\n  let remaining =\n    points.slice(1).reduce((sum, point, index) => sum + distance(points[index]!, point), 0) / 2;\n  for (let index = 1; index < points.length; index++) {\n    const segment = distance(points[index - 1]!, points[index]!);\n    if (remaining <= segment) return towards(points[index - 1]!, points[index]!, remaining);\n    remaining -= segment;\n  }\n  return points[points.length - 1]!;\n}\n\n/**\n * 折线终点的箭头：三角形的三个顶点（SVG polygon 的 points），尖端在终点，沿最后一段的方向；\n * 没有方向（少于两个不同的点）时返回空串\n */\nexport function arrowHead(points: readonly DiagramPoint[], size = 8): string {\n  const tip = points[points.length - 1];\n  // 最后一段可能长度为零（端点重复）：往前找一个不同的点定方向\n  const from = [...points]\n    .reverse()\n    .find((point) => tip && (point.x !== tip.x || point.y !== tip.y));\n  if (!tip || !from) return '';\n  const angle = Math.atan2(tip.y - from.y, tip.x - from.x);\n  const back = { x: tip.x - Math.cos(angle) * size, y: tip.y - Math.sin(angle) * size };\n  const half = size * 0.5;\n  const left = { x: back.x + Math.sin(angle) * half, y: back.y - Math.cos(angle) * half };\n  const right = { x: back.x - Math.sin(angle) * half, y: back.y + Math.cos(angle) * half };\n  const round = (value: number) => Math.round(value * 100) / 100;\n  return [tip, left, right].map((point) => `${round(point.x)},${round(point.y)}`).join(' ');\n}\n\n/** 去掉终点处箭头占的那一段：线画到箭头的底边，不从箭尖下面露出来 */\nexport function trimEnd(points: readonly DiagramPoint[], length: number): DiagramPoint[] {\n  if (points.length < 2 || length <= 0) return [...points];\n  const tip = points[points.length - 1]!;\n  const before = points[points.length - 2]!;\n  const segment = distance(before, tip);\n  if (segment <= length) return [...points];\n  return [...points.slice(0, -1), towards(tip, before, length)];\n}\n\n/** 对齐线：拖动时与别的节点对齐的那条线（画布坐标的线段） */\nexport interface DiagramGuide {\n  /** 起点 */\n  from: DiagramPoint;\n  /** 终点 */\n  to: DiagramPoint;\n}\n\n/**\n * 拖动中的矩形向别的矩形对齐：左、中、右任一条竖线与别人的左、中、右相差不到 tolerance 时吸过去，横向同理（上、中、下）。\n * 返回吸附后的位置与要画的对齐线（每个方向取差得最少的那一条，线从两个矩形里靠外的一端画到另一端）\n */\nexport function alignToGuides(\n  rect: DiagramRect,\n  others: readonly DiagramRect[],\n  tolerance: number,\n): { x: number; y: number; guides: DiagramGuide[] } {\n  const lines = (start: number, size: number) => [start, start + size / 2, start + size];\n  let best: { axis: 'x' | 'y'; diff: number; at: number; other: DiagramRect }[] = [];\n  for (const axis of ['x', 'y'] as const) {\n    const own = axis === 'x' ? lines(rect.x, rect.width) : lines(rect.y, rect.height);\n    let found: { diff: number; at: number; other: DiagramRect } | undefined;\n    for (const other of others) {\n      const theirs = axis === 'x' ? lines(other.x, other.width) : lines(other.y, other.height);\n      for (const mine of own) {\n        for (const line of theirs) {\n          const diff = line - mine;\n          if (Math.abs(diff) <= tolerance && (!found || Math.abs(diff) < Math.abs(found.diff))) {\n            found = { diff, at: line, other };\n          }\n        }\n      }\n    }\n    if (found) best = [...best, { axis, ...found }];\n  }\n  const x = rect.x + (best.find((item) => item.axis === 'x')?.diff ?? 0);\n  const y = rect.y + (best.find((item) => item.axis === 'y')?.diff ?? 0);\n  const placed = { ...rect, x, y };\n  const guides = best.map(({ axis, at, other }) =>\n    axis === 'x'\n      ? {\n          from: { x: at, y: Math.min(placed.y, other.y) },\n          to: { x: at, y: Math.max(placed.y + placed.height, other.y + other.height) },\n        }\n      : {\n          from: { x: Math.min(placed.x, other.x), y: at },\n          to: { x: Math.max(placed.x + placed.width, other.x + other.width), y: at },\n        },\n  );\n  return { x, y, guides };\n}\n\n/** 点落在哪个矩形里：后面的在上层，先找后面的 */\nexport function rectAt<T extends DiagramRect>(\n  rects: readonly T[],\n  point: DiagramPoint,\n): T | undefined {\n  for (let index = rects.length - 1; index >= 0; index--) {\n    const rect = rects[index]!;\n    if (\n      point.x >= rect.x &&\n      point.x <= rect.x + rect.width &&\n      point.y >= rect.y &&\n      point.y <= rect.y + rect.height\n    ) {\n      return rect;\n    }\n  }\n  return undefined;\n}\n"],"mappings":";;AAyBA,SAAgB,SACd,OACA,SAAiC,CAAC,GACT;CACzB,IAAI,OAAO;CACX,IAAI,MAAM;CACV,IAAI,QAAQ;CACZ,IAAI,SAAS;CACb,KAAK,MAAM,QAAQ,OAAO;EACxB,OAAO,KAAK,IAAI,MAAM,KAAK,CAAC;EAC5B,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC;EAC1B,QAAQ,KAAK,IAAI,OAAO,KAAK,IAAI,KAAK,KAAK;EAC3C,SAAS,KAAK,IAAI,QAAQ,KAAK,IAAI,KAAK,MAAM;CAChD;CACA,KAAK,MAAM,SAAS,QAAQ;EAC1B,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;EAC7B,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC;EAC3B,QAAQ,KAAK,IAAI,OAAO,MAAM,CAAC;EAC/B,SAAS,KAAK,IAAI,QAAQ,MAAM,CAAC;CACnC;CACA,OAAO,SAAS,WACZ,KAAA,IACA;EAAE,GAAG;EAAM,GAAG;EAAK,OAAO,QAAQ;EAAM,QAAQ,SAAS;CAAI;AACnE;;AAGA,SAAgB,gBAAgB,GAAiB,GAA8B;CAC7E,OAAO;EACL,GAAG,KAAK,IAAI,EAAE,GAAG,EAAE,CAAC;EACpB,GAAG,KAAK,IAAI,EAAE,GAAG,EAAE,CAAC;EACpB,OAAO,KAAK,IAAI,EAAE,IAAI,EAAE,CAAC;EACzB,QAAQ,KAAK,IAAI,EAAE,IAAI,EAAE,CAAC;CAC5B;AACF;;AAGA,SAAgB,eAAe,GAAgB,GAAyB;CACtE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE;AAC7F;;AAGA,SAAgB,aAAa,OAAoB,OAA6B;CAC5E,OACE,MAAM,KAAK,MAAM,KACjB,MAAM,KAAK,MAAM,KACjB,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI,MAAM,SACzC,MAAM,IAAI,MAAM,UAAU,MAAM,IAAI,MAAM;AAE9C;;AAGA,SAAgB,WAAW,MAAiC;CAC1D,OAAO;EAAE,GAAG,KAAK,IAAI,KAAK,QAAQ;EAAG,GAAG,KAAK,IAAI,KAAK,SAAS;CAAE;AACnE;;AAGA,SAAgB,YAAY,MAAmB,QAAoC;CACjF,MAAM,SAAS,WAAW,IAAI;CAC9B,MAAM,KAAK,OAAO,IAAI,OAAO;CAC7B,MAAM,KAAK,OAAO,IAAI,OAAO;CAC7B,IAAI,OAAO,KAAK,OAAO,GAAG,OAAO;CAEjC,MAAM,QAAQ,KAAK,IACjB,OAAO,IAAI,WAAW,KAAK,QAAQ,IAAI,KAAK,IAAI,EAAE,GAClD,OAAO,IAAI,WAAW,KAAK,SAAS,IAAI,KAAK,IAAI,EAAE,CACrD;CACA,OAAO;EAAE,GAAG,OAAO,IAAI,KAAK;EAAO,GAAG,OAAO,IAAI,KAAK;CAAM;AAC9D;;AAGA,IAAM,YAAY,GAAiB,MAAoB,KAAK,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;;;;;AAMtF,SAAgB,aAAa,QAAiC,SAAS,GAAW;CAChF,IAAI,OAAO,WAAW,GAAG,OAAO;CAChC,MAAM,CAAC,SAAS;CAChB,IAAI,OAAO,IAAI,MAAM,EAAE,GAAG,MAAM;CAChC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS;EAClD,MAAM,QAAQ,OAAO;EACrB,MAAM,OAAO,OAAO,QAAQ;EAC5B,IAAI,CAAC,QAAQ,UAAU,GAAG;GACxB,QAAQ,KAAK,MAAM,EAAE,GAAG,MAAM;GAC9B;EACF;EACA,MAAM,WAAW,OAAO,QAAQ;EAChC,MAAM,IAAI,KAAK,IAAI,QAAQ,SAAS,UAAU,KAAK,IAAI,GAAG,SAAS,OAAO,IAAI,IAAI,CAAC;EACnF,MAAM,SAAS,QAAQ,OAAO,UAAU,CAAC;EACzC,MAAM,QAAQ,QAAQ,OAAO,MAAM,CAAC;EACpC,QAAQ,KAAK,OAAO,EAAE,GAAG,OAAO,EAAE,IAAI,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM;CAC/E;CACA,OAAO;AACT;;AAGA,SAAS,QAAQ,MAAoB,IAAkB,QAA8B;CACnF,MAAM,QAAQ,SAAS,MAAM,EAAE;CAC/B,IAAI,UAAU,GAAG,OAAO;CACxB,OAAO;EACL,GAAG,KAAK,KAAM,GAAG,IAAI,KAAK,KAAK,SAAU;EACzC,GAAG,KAAK,KAAM,GAAG,IAAI,KAAK,KAAK,SAAU;CAC3C;AACF;;AAGA,SAAgB,iBAAiB,QAA+C;CAC9E,IAAI,OAAO,WAAW,GAAG,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;CAC7C,IAAI,YACF,OAAO,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,UAAU,MAAM,SAAS,OAAO,QAAS,KAAK,GAAG,CAAC,IAAI;CAC5F,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS;EAClD,MAAM,UAAU,SAAS,OAAO,QAAQ,IAAK,OAAO,MAAO;EAC3D,IAAI,aAAa,SAAS,OAAO,QAAQ,OAAO,QAAQ,IAAK,OAAO,QAAS,SAAS;EACtF,aAAa;CACf;CACA,OAAO,OAAO,OAAO,SAAS;AAChC;;;;;AAMA,SAAgB,UAAU,QAAiC,OAAO,GAAW;CAC3E,MAAM,MAAM,OAAO,OAAO,SAAS;CAEnC,MAAM,OAAO,CAAC,GAAG,MAAM,CAAC,CACrB,QAAQ,CAAC,CACT,MAAM,UAAU,QAAQ,MAAM,MAAM,IAAI,KAAK,MAAM,MAAM,IAAI,EAAE;CAClE,IAAI,CAAC,OAAO,CAAC,MAAM,OAAO;CAC1B,MAAM,QAAQ,KAAK,MAAM,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,CAAC;CACvD,MAAM,OAAO;EAAE,GAAG,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI;EAAM,GAAG,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI;CAAK;CACpF,MAAM,OAAO,OAAO;CACpB,MAAM,OAAO;EAAE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;EAAM,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;CAAK;CACtF,MAAM,QAAQ;EAAE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;EAAM,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;CAAK;CACvF,MAAM,SAAS,UAAkB,KAAK,MAAM,QAAQ,GAAG,IAAI;CAC3D,OAAO;EAAC;EAAK;EAAM;CAAK,CAAC,CAAC,KAAK,UAAU,GAAG,MAAM,MAAM,CAAC,EAAE,GAAG,MAAM,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG;AAC1F;;AAGA,SAAgB,QAAQ,QAAiC,QAAgC;CACvF,IAAI,OAAO,SAAS,KAAK,UAAU,GAAG,OAAO,CAAC,GAAG,MAAM;CACvD,MAAM,MAAM,OAAO,OAAO,SAAS;CACnC,MAAM,SAAS,OAAO,OAAO,SAAS;CAEtC,IADgB,SAAS,QAAQ,GAC7B,KAAW,QAAQ,OAAO,CAAC,GAAG,MAAM;CACxC,OAAO,CAAC,GAAG,OAAO,MAAM,GAAG,EAAE,GAAG,QAAQ,KAAK,QAAQ,MAAM,CAAC;AAC9D;;;;;AAcA,SAAgB,cACd,MACA,QACA,WACkD;CAClD,MAAM,SAAS,OAAe,SAAiB;EAAC;EAAO,QAAQ,OAAO;EAAG,QAAQ;CAAI;CACrF,IAAI,OAA4E,CAAC;CACjF,KAAK,MAAM,QAAQ,CAAC,KAAK,GAAG,GAAY;EACtC,MAAM,MAAM,SAAS,MAAM,MAAM,KAAK,GAAG,KAAK,KAAK,IAAI,MAAM,KAAK,GAAG,KAAK,MAAM;EAChF,IAAI;EACJ,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,SAAS,SAAS,MAAM,MAAM,MAAM,GAAG,MAAM,KAAK,IAAI,MAAM,MAAM,GAAG,MAAM,MAAM;GACvF,KAAK,MAAM,QAAQ,KACjB,KAAK,MAAM,QAAQ,QAAQ;IACzB,MAAM,OAAO,OAAO;IACpB,IAAI,KAAK,IAAI,IAAI,KAAK,cAAc,CAAC,SAAS,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,MAAM,IAAI,IAChF,QAAQ;KAAE;KAAM,IAAI;KAAM;IAAM;GAEpC;EAEJ;EACA,IAAI,OAAO,OAAO,CAAC,GAAG,MAAM;GAAE;GAAM,GAAG;EAAM,CAAC;CAChD;CACA,MAAM,IAAI,KAAK,KAAK,KAAK,MAAM,SAAS,KAAK,SAAS,GAAG,CAAC,EAAE,QAAQ;CACpE,MAAM,IAAI,KAAK,KAAK,KAAK,MAAM,SAAS,KAAK,SAAS,GAAG,CAAC,EAAE,QAAQ;CACpE,MAAM,SAAS;EAAE,GAAG;EAAM;EAAG;CAAE;CAY/B,OAAO;EAAE;EAAG;EAAG,QAXA,KAAK,KAAK,EAAE,MAAM,IAAI,YACnC,SAAS,MACL;GACE,MAAM;IAAE,GAAG;IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,MAAM,CAAC;GAAE;GAC9C,IAAI;IAAE,GAAG;IAAI,GAAG,KAAK,IAAI,OAAO,IAAI,OAAO,QAAQ,MAAM,IAAI,MAAM,MAAM;GAAE;EAC7E,IACA;GACE,MAAM;IAAE,GAAG,KAAK,IAAI,OAAO,GAAG,MAAM,CAAC;IAAG,GAAG;GAAG;GAC9C,IAAI;IAAE,GAAG,KAAK,IAAI,OAAO,IAAI,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;IAAG,GAAG;GAAG;EAC3E,CAES;CAAO;AACxB;;AAGA,SAAgB,OACd,OACA,OACe;CACf,KAAK,IAAI,QAAQ,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS;EACtD,MAAM,OAAO,MAAM;EACnB,IACE,MAAM,KAAK,KAAK,KAChB,MAAM,KAAK,KAAK,IAAI,KAAK,SACzB,MAAM,KAAK,KAAK,KAChB,MAAM,KAAK,KAAK,IAAI,KAAK,QAEzB,OAAO;CAEX;AAEF"}

package/dist/diagram/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 画布（子路径 `@zerodep-dev/vue-tsx-pro-ui/diagram`）：能平移、缩放的视口里摆放 HTML 节点与 SVG 连线，选择、框选、拖动、连线、键盘与读屏；
+ * 标准节点 DiagramNode、泳道 DiagramLanes、控制器 useDiagram、缩放按钮 DiagramControls、小地图 DiagramMinimap、
+ * 导出 diagramToSvg / diagramToPng 与几何、路由工具。流程图、组织架构图、关系图都建在它上面。
+ *
+ *   import { Diagram, DiagramControls, DiagramNode, useDiagram } from '@zerodep-dev/vue-tsx-pro-ui/diagram';
+ *
+ * 不放在主入口：只有画图的页面用得到；文案自带中英文（messages.ts），别的语言在 Lang.messages.diagram 里补。
+ */
+export { Diagram, DiagramContext, diagramDynamicStyles, diagramStyles, type DiagramConnection, type DiagramDragModes, type DiagramEdgeItem, type DiagramGrids, type DiagramItemState, type DiagramNodeItem, type DiagramNodeMove, type DiagramProps, type DiagramReconnection, type DiagramRoutings, type DiagramSelection, type DiagramSelectionModes, } from './Diagram';
+export { DiagramControls, diagramControlsStyles, type DiagramControlsPlacements, type DiagramControlsProps, } from './DiagramControls';
+export { DiagramLanes, diagramLanesDynamicStyles, diagramLanesStyles, lanesExtent, type DiagramLane, type DiagramLanesLayout, type DiagramLanesProps, } from './DiagramLanes';
+export { DiagramMinimap, diagramMinimapStyles, type DiagramMinimapPlacements, type DiagramMinimapProps, } from './DiagramMinimap';
+export { DiagramNode, diagramNodeStyles, diagramNodeToneStyles, type DiagramNodeProps, type DiagramNodeShapes, } from './DiagramNode';
+export { diagramInternals, useDiagram, type DiagramController, type DiagramInternals, type DiagramOptions, } from './controller';
+export { diagramToPng, diagramToSvg, type DiagramExportOptions } from './export';
+export { alignToGuides, arrowHead, borderPoint, boundsOf, polylineMidpoint, polylinePath, rectAt, rectCenter, rectContains, rectFromCorners, rectsIntersect, trimEnd, type DiagramGuide, type DiagramPoint, type DiagramRect, } from './geometry';
+export { diagramMessages, type DiagramMessages } from './messages';
+export { chooseSides, nearestSide, routeEdges, routeOrthogonal, sidePoint, simplify, straightRoute, type DiagramSide, type DiagramSides, type RouteEdge, type RouteEnd, type RouteOptions, } from './route';

package/dist/diagram/index.js

@@ -0,0 +1,11 @@
+import { diagramInternals, useDiagram } from "./controller.js";
+import { DiagramNode, diagramNodeStyles, diagramNodeToneStyles } from "./DiagramNode.js";
+import { alignToGuides, arrowHead, borderPoint, boundsOf, polylineMidpoint, polylinePath, rectAt, rectCenter, rectContains, rectFromCorners, rectsIntersect, trimEnd } from "./geometry.js";
+import { diagramMessages } from "./messages.js";
+import { chooseSides, nearestSide, routeEdges, routeOrthogonal, sidePoint, simplify, straightRoute } from "./route.js";
+import { Diagram, DiagramContext, diagramDynamicStyles, diagramStyles } from "./Diagram.js";
+import { DiagramControls, diagramControlsStyles } from "./DiagramControls.js";
+import { DiagramLanes, diagramLanesDynamicStyles, diagramLanesStyles, lanesExtent } from "./DiagramLanes.js";
+import { DiagramMinimap, diagramMinimapStyles } from "./DiagramMinimap.js";
+import { diagramToPng, diagramToSvg } from "./export.js";
+export { Diagram, DiagramContext, DiagramControls, DiagramLanes, DiagramMinimap, DiagramNode, alignToGuides, arrowHead, borderPoint, boundsOf, chooseSides, diagramControlsStyles, diagramDynamicStyles, diagramInternals, diagramLanesDynamicStyles, diagramLanesStyles, diagramMessages, diagramMinimapStyles, diagramNodeStyles, diagramNodeToneStyles, diagramStyles, diagramToPng, diagramToSvg, lanesExtent, nearestSide, polylineMidpoint, polylinePath, rectAt, rectCenter, rectContains, rectFromCorners, rectsIntersect, routeEdges, routeOrthogonal, sidePoint, simplify, straightRoute, trimEnd, useDiagram };

package/dist/diagram/messages.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 画布（Diagram、DiagramControls）自带的文案：中文与英文各一份，
+ * 可以在 createUi 的 lang.messages.diagram 里按字段改写（见 config/lang/messages.ts）
+ */
+import type { MessageTable } from '../config/lang/messages';
+/** 画布的文案 */
+export interface DiagramMessages {
+    /** 画布的角色说明（aria-roledescription） */
+    readonly canvas: string;
+    /** 节点的角色说明 */
+    readonly node: string;
+    /** 连线的角色说明 */
+    readonly edge: string;
+    /** 连线的默认名称：`从 提交申请 到 部门审批` */
+    readonly edgeBetween: (from: string, to: string) => string;
+    /** 缩放工具栏的名称 */
+    readonly controls: string;
+    /** 放大 */
+    readonly zoomIn: string;
+    /** 缩小 */
+    readonly zoomOut: string;
+    /** 适应画布 */
+    readonly fit: string;
+    /** 当前缩放（百分数），点击回到原大 */
+    readonly zoomLevel: (percent: number) => string;
+}
+/** 画布的内置文案 */
+export declare const diagramMessages: MessageTable<DiagramMessages>;

package/dist/diagram/messages.js

@@ -0,0 +1,30 @@
+//#region src/diagram/messages.ts
+/** 画布的内置文案 */
+var diagramMessages = {
+	"zh-CN": {
+		canvas: "画布",
+		node: "节点",
+		edge: "连线",
+		edgeBetween: (from, to) => `从 ${from} 到 ${to}`,
+		controls: "缩放",
+		zoomIn: "放大",
+		zoomOut: "缩小",
+		fit: "适应画布",
+		zoomLevel: (percent) => `缩放 ${percent}%，点击回到原大`
+	},
+	"en-US": {
+		canvas: "Canvas",
+		node: "Node",
+		edge: "Connection",
+		edgeBetween: (from, to) => `From ${from} to ${to}`,
+		controls: "Zoom",
+		zoomIn: "Zoom in",
+		zoomOut: "Zoom out",
+		fit: "Fit to view",
+		zoomLevel: (percent) => `Zoom ${percent}%, click to reset to 100%`
+	}
+};
+//#endregion
+export { diagramMessages };
+
+//# sourceMappingURL=messages.js.map

package/dist/diagram/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":[],"sources":["../../src/diagram/messages.ts"],"sourcesContent":["/**\n * 画布（Diagram、DiagramControls）自带的文案：中文与英文各一份，\n * 可以在 createUi 的 lang.messages.diagram 里按字段改写（见 config/lang/messages.ts）\n */\nimport type { MessageTable } from '../config/lang/messages';\n\n/** 画布的文案 */\nexport interface DiagramMessages {\n  /** 画布的角色说明（aria-roledescription） */\n  readonly canvas: string;\n  /** 节点的角色说明 */\n  readonly node: string;\n  /** 连线的角色说明 */\n  readonly edge: string;\n  /** 连线的默认名称：`从 提交申请 到 部门审批` */\n  readonly edgeBetween: (from: string, to: string) => string;\n  /** 缩放工具栏的名称 */\n  readonly controls: string;\n  /** 放大 */\n  readonly zoomIn: string;\n  /** 缩小 */\n  readonly zoomOut: string;\n  /** 适应画布 */\n  readonly fit: string;\n  /** 当前缩放（百分数），点击回到原大 */\n  readonly zoomLevel: (percent: number) => string;\n}\n\n/** 画布的内置文案 */\nexport const diagramMessages: MessageTable<DiagramMessages> = {\n  'zh-CN': {\n    canvas: '画布',\n    node: '节点',\n    edge: '连线',\n    edgeBetween: (from, to) => `从 ${from} 到 ${to}`,\n    controls: '缩放',\n    zoomIn: '放大',\n    zoomOut: '缩小',\n    fit: '适应画布',\n    zoomLevel: (percent) => `缩放 ${percent}%，点击回到原大`,\n  },\n  'en-US': {\n    canvas: 'Canvas',\n    node: 'Node',\n    edge: 'Connection',\n    edgeBetween: (from, to) => `From ${from} to ${to}`,\n    controls: 'Zoom',\n    zoomIn: 'Zoom in',\n    zoomOut: 'Zoom out',\n    fit: 'Fit to view',\n    zoomLevel: (percent) => `Zoom ${percent}%, click to reset to 100%`,\n  },\n};\n"],"mappings":";;AA6BA,IAAa,kBAAiD;CAC5D,SAAS;EACP,QAAQ;EACR,MAAM;EACN,MAAM;EACN,cAAc,MAAM,OAAO,KAAK,KAAK,KAAK;EAC1C,UAAU;EACV,QAAQ;EACR,SAAS;EACT,KAAK;EACL,YAAY,YAAY,MAAM,QAAQ;CACxC;CACA,SAAS;EACP,QAAQ;EACR,MAAM;EACN,MAAM;EACN,cAAc,MAAM,OAAO,QAAQ,KAAK,MAAM;EAC9C,UAAU;EACV,QAAQ;EACR,SAAS;EACT,KAAK;EACL,YAAY,YAAY,QAAQ,QAAQ;CAC1C;AACF"}

package/dist/diagram/route.d.ts

@@ -0,0 +1,81 @@
+/**
+ * 正交路由（纯函数）：连线只走横竖两个方向，绕开节点，拐弯尽量少；同一个节点同一条边上的几条线均匀分开。
+ * 做法同 Wybrow 等人的正交连接线路由（开源实现见 orthogonal-connector，MIT）：
+ *   1. 每个节点外扩 margin 作为障碍；起点、终点从所在边的端口往外伸出一小段（stub）
+ *   2. 障碍的边线、端口、两端之间的中线画成横竖“标尺”，标尺的交点（不在障碍里的）就是可走的格点
+ *   3. 在格点上跑 A*：代价是长度加拐弯惩罚，状态带方向，所以同样长时选拐弯少的
+ * 找不到路时退回成三段的折线（不避障）。画布有几百个节点也只取两端附近的障碍，单条线的格点在几千以内。
+ */
+import { type DiagramPoint, type DiagramRect } from './geometry';
+/** 节点的四条边 */
+export interface DiagramSides {
+    /** 上边 */
+    top: unknown;
+    /** 右边 */
+    right: unknown;
+    /** 下边 */
+    bottom: unknown;
+    /** 左边 */
+    left: unknown;
+}
+/** 连线从哪条边出去、进来 */
+export type DiagramSide = keyof DiagramSides;
+/** 一端：节点的矩形、从哪条边、边上的哪一点（不写时取边的中点） */
+export interface RouteEnd {
+    /** 节点的矩形 */
+    rect: DiagramRect;
+    /** 从哪条边；不写时按两端的相对位置选 */
+    side?: DiagramSide;
+    /** 边上的点（端口分配给出）；不写时取边的中点 */
+    point?: DiagramPoint;
+}
+/** routeOrthogonal 的选项 */
+export interface RouteOptions {
+    /** 绕开节点时离节点的距离，也是端口伸出的长度，默认 16 */
+    margin?: number;
+    /** 拐一个弯折合多少长度，默认 40：同样能到时选拐弯少的 */
+    bendPenalty?: number;
+}
+/** 边的中点 */
+export declare function sidePoint(rect: DiagramRect, side: DiagramSide): DiagramPoint;
+/**
+ * 两个节点之间按相对位置选出、进的边：横向隔得开就左右连，否则上下连；
+ * 目标在右边时从右边出、从左边进，在下面时从下边出、从上边进，反过来亦然
+ */
+export declare function chooseSides(from: DiagramRect, to: DiagramRect): [DiagramSide, DiagramSide];
+/** 去掉共线的中间点与重复点 */
+export declare function simplify(points: readonly DiagramPoint[]): DiagramPoint[];
+/**
+ * 两个节点之间的正交折线：从 from 的一条边出去，进 to 的一条边，绕开 obstacles（不含两端自己，函数会把两端也算上）。
+ * 返回含两端端口的折线点（画布坐标），可以直接交给 Diagram 的 edges[].points
+ */
+export declare function routeOrthogonal(from: RouteEnd, to: RouteEnd, obstacles?: readonly DiagramRect[], options?: RouteOptions): DiagramPoint[];
+/** routeEdges 的一条连线：两端节点的标识，可以指定出、进的边 */
+export interface RouteEdge {
+    /** 连线的标识 */
+    id: string;
+    /** 起点节点 */
+    from: string;
+    /** 终点节点 */
+    to: string;
+    /** 从起点的哪条边出去；不写时自动选 */
+    fromSide?: DiagramSide;
+    /** 从终点的哪条边进来；不写时自动选 */
+    toSide?: DiagramSide;
+}
+/**
+ * 一组连线一起路由：先定每条线的出、进边，同一个节点同一条边上的几条线按对端的位置排开（端口分配，线不挤在一个点），
+ * 再逐条绕开全部节点。返回连线标识 → 折线点；两端节点缺了的连线不在结果里。
+ * obstacles 不写时用 nodes 本身；拖动时只重算相连的几条线，可以把全部节点作为 obstacles 传进来
+ */
+export declare function routeEdges(nodes: readonly (DiagramRect & {
+    id: string;
+})[], edges: readonly RouteEdge[], options?: RouteOptions & {
+    obstacles?: readonly (DiagramRect & {
+        id: string;
+    })[];
+}): Map<string, DiagramPoint[]>;
+/** 两个节点之间的直线：两端落在边框上（没有路由时的默认画法） */
+export declare function straightRoute(from: DiagramRect, to: DiagramRect): DiagramPoint[];
+/** 离点最近的边：连线拖到节点上时从这条边进去 */
+export declare function nearestSide(rect: DiagramRect, point: DiagramPoint): DiagramSide;