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

package/dist/diagram/DiagramMinimap.js

@@ -0,0 +1,133 @@
+import { mergeAttrs } from "../utils/props.js";
+import { startMove } from "../utils/dom/move.js";
+import { diagramInternals } from "./controller.js";
+import { boundsOf } from "./geometry.js";
+import { DiagramContext } from "./Diagram.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/diagram/DiagramMinimap.tsx
+/** 小地图放在画布的哪个角 */
+/** 未声明的属性落到外层 div 上 */
+/** DiagramMinimap 的样式 */
+var diagramMinimapStyles = css.create({
+	root: {
+		position: "absolute",
+		pointerEvents: "auto",
+		overflow: "hidden",
+		backgroundColor: "_surface",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_md",
+		boxShadow: "_sm",
+		cursor: "pointer",
+		touchAction: "none"
+	},
+	"bottom-end": {
+		insetBlockEnd: "_space.sm",
+		insetInlineEnd: "_space.sm"
+	},
+	"bottom-start": {
+		insetBlockEnd: "_space.sm",
+		insetInlineStart: "_space.sm"
+	},
+	"top-end": {
+		insetBlockStart: "_space.sm",
+		insetInlineEnd: "_space.sm"
+	},
+	"top-start": {
+		insetBlockStart: "_space.sm",
+		insetInlineStart: "_space.sm"
+	},
+	svg: { display: "block" },
+	node: { fill: "_borderStrong" },
+	viewport: {
+		fill: `color-mix(in srgb, currentColor 6%, transparent)`,
+		stroke: "_accent",
+		strokeWidth: 1.5,
+		color: "_accent"
+	}
+});
+/** 小地图 */
+var DiagramMinimap = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const placement = readonlyProp(_props, "placement", "bottom-end");
+	const width = readonlyProp(_props, "width", 168);
+	const height = readonlyProp(_props, "height", 112);
+	const propsNode = readonlyProp(_props, "propsNode");
+	const propsViewport = readonlyProp(_props, "propsViewport");
+	const rest = restProps(_props, _ctx, true);
+	const diagram = DiagramContext.inject();
+	const internal = diagramInternals(diagram);
+	let svg = null;
+	/** 视口在画布坐标里的范围 */
+	const visible = () => {
+		const { width: viewWidth, height: viewHeight } = internal.size.value;
+		return {
+			x: -diagram.x / diagram.scale,
+			y: -diagram.y / diagram.scale,
+			width: viewWidth / diagram.scale,
+			height: viewHeight / diagram.scale
+		};
+	};
+	/** 把视口的中心移到小地图上点到的位置 */
+	function centerAt(clientX, clientY) {
+		const matrix = svg?.getScreenCTM()?.inverse();
+		if (!matrix) return;
+		const point = new DOMPoint(clientX, clientY).matrixTransform(matrix);
+		const { width: viewWidth, height: viewHeight } = internal.size.value;
+		internal.view.panTo(viewWidth / 2 - point.x * diagram.scale, viewHeight / 2 - point.y * diagram.scale);
+	}
+	function onPointerdown(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		centerAt(event.clientX, event.clientY);
+		startMove(event, { onMove: (point) => centerAt(point.clientX, point.clientY) });
+	}
+	return () => {
+		const nodes = internal.nodes();
+		const view = visible();
+		const frame = boundsOf([...nodes, view]) ?? {
+			x: 0,
+			y: 0,
+			width: 1,
+			height: 1
+		};
+		const pad = Math.max(frame.width, frame.height) * .04;
+		return createVNode("div", mergeAttrs({ sx: [diagramMinimapStyles.root, diagramMinimapStyles[placement.value]] }, rest, {
+			"aria-hidden": "true",
+			onPointerdown
+		}), [createVNode("svg", mergeProps({ "ref": _cache[0] || (_cache[0] = (element) => svg = element) }, css.attrs(diagramMinimapStyles.svg), {
+			"width": width.value,
+			"height": height.value,
+			"viewBox": `${frame.x - pad} ${frame.y - pad} ${frame.width + pad * 2} ${frame.height + pad * 2}`,
+			"preserveAspectRatio": "xMidYMid meet"
+		}), [nodes.map((node, index) => createVNode("rect", mergeProps({ "key": index }, mergeAttrs({ sx: diagramMinimapStyles.node }, propsNode.value, {
+			x: node.x,
+			y: node.y,
+			width: node.width,
+			height: node.height,
+			rx: Math.min(node.width, node.height) * .12
+		})), null)), createVNode("rect", mergeAttrs({ sx: diagramMinimapStyles.viewport }, propsViewport.value, {
+			x: view.x,
+			y: view.y,
+			width: view.width,
+			height: view.height,
+			"vector-effect": "non-scaling-stroke"
+		}), null)])]);
+	};
+}, {
+	name: "DiagramMinimap",
+	props: [
+		"placement",
+		"width",
+		"height",
+		"propsNode",
+		"propsViewport"
+	]
+});
+//#endregion
+export { DiagramMinimap, diagramMinimapStyles };
+
+//# sourceMappingURL=DiagramMinimap.js.map

package/dist/diagram/DiagramMinimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramMinimap.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/diagram/DiagramMinimap.tsx"],"sourcesContent":["/**\n * 小地图：整张图的缩略（节点画成小方块）与当前视口的框，点或拖小地图把视口移过去。放在 Diagram 的 overlay 里：\n *\n *   <Diagram overlay={<><DiagramControls /><DiagramMinimap /></>} … />\n *\n * 只是指针用户的便利：键盘用户用视口的方向键平移，读屏不念它（aria-hidden）。\n * 部件：Root（div）、Node（每个节点的方块）、Viewport（视口的框）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { diagramInternals } from './controller';\nimport { DiagramContext } from './Diagram';\nimport { boundsOf } from './geometry';\n\n/** 小地图放在画布的哪个角 */\nexport interface DiagramMinimapPlacements {\n  /** 右下（从右到左时左下），默认 */\n  'bottom-end': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n  /** 右上 */\n  'top-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DiagramMinimapProps extends PartProps<'div'> {\n  /** 放在画布的哪个角，默认 bottom-end */\n  placement?: keyof DiagramMinimapPlacements;\n  /** 宽（px），默认 168 */\n  width?: number;\n  /** 高（px），默认 112 */\n  height?: number;\n  /** 节点方块的部件属性 */\n  propsNode?: PartProps<'rect'>;\n  /** 视口框的部件属性 */\n  propsViewport?: PartProps<'rect'>;\n}\n\n/** DiagramMinimap 的样式 */\nexport const diagramMinimapStyles = css.create({\n  root: {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    boxShadow: '_sm',\n    cursor: 'pointer',\n    touchAction: 'none',\n  },\n  'bottom-end': { insetBlockEnd: '_space.sm', insetInlineEnd: '_space.sm' },\n  'bottom-start': { insetBlockEnd: '_space.sm', insetInlineStart: '_space.sm' },\n  'top-end': { insetBlockStart: '_space.sm', insetInlineEnd: '_space.sm' },\n  'top-start': { insetBlockStart: '_space.sm', insetInlineStart: '_space.sm' },\n  svg: { display: 'block' },\n  node: { fill: '_borderStrong' },\n  viewport: {\n    fill: `color-mix(in srgb, currentColor 6%, transparent)`,\n    stroke: '_accent',\n    strokeWidth: 1.5,\n    color: '_accent',\n  },\n});\n\n/** 小地图 */\nexport const DiagramMinimap = _component(\n  ({\n    placement = 'bottom-end',\n    width = 168,\n    height = 112,\n    propsNode,\n    propsViewport,\n    ...rest\n  }: DiagramMinimapProps) => {\n    const diagram = DiagramContext.inject();\n    const internal = diagramInternals(diagram);\n    let svg: SVGSVGElement | null = null;\n\n    /** 视口在画布坐标里的范围 */\n    const visible = () => {\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      return {\n        x: -diagram.x / diagram.scale,\n        y: -diagram.y / diagram.scale,\n        width: viewWidth / diagram.scale,\n        height: viewHeight / diagram.scale,\n      };\n    };\n\n    /** 把视口的中心移到小地图上点到的位置 */\n    function centerAt(clientX: number, clientY: number) {\n      const matrix = svg?.getScreenCTM()?.inverse();\n      if (!matrix) return;\n      const point = new DOMPoint(clientX, clientY).matrixTransform(matrix);\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      internal.view.panTo(\n        viewWidth / 2 - point.x * diagram.scale,\n        viewHeight / 2 - point.y * diagram.scale,\n      );\n    }\n\n    function onPointerdown(event: PointerEvent) {\n      if (event.button !== 0) return;\n      event.preventDefault();\n      centerAt(event.clientX, event.clientY);\n      startMove(event, { onMove: (point) => centerAt(point.clientX, point.clientY) });\n    }\n\n    return () => {\n      const nodes = internal.nodes();\n      const view = visible();\n      // 视口也算进范围：拖到很远时框也一直看得见\n      const frame = boundsOf([...nodes, view]) ?? { x: 0, y: 0, width: 1, height: 1 };\n      const pad = Math.max(frame.width, frame.height) * 0.04;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [diagramMinimapStyles.root, diagramMinimapStyles[placement]] },\n            rest,\n            { 'aria-hidden': 'true', onPointerdown },\n          )}\n        >\n          <svg\n            ref={(element: unknown) => (svg = element as SVGSVGElement | null)}\n            {...css.attrs(diagramMinimapStyles.svg)}\n            width={width}\n            height={height}\n            viewBox={`${frame.x - pad} ${frame.y - pad} ${frame.width + pad * 2} ${frame.height + pad * 2}`}\n            preserveAspectRatio=\"xMidYMid meet\"\n          >\n            {nodes.map((node, index) => (\n              <rect\n                key={index}\n                {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.node }, propsNode, {\n                  x: node.x,\n                  y: node.y,\n                  width: node.width,\n                  height: node.height,\n                  rx: Math.min(node.width, node.height) * 0.12,\n                })}\n              />\n            ))}\n            <rect\n              {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.viewport }, propsViewport, {\n                x: view.x,\n                y: view.y,\n                width: view.width,\n                height: view.height,\n                // 小地图按比例缩得很小，描边不跟着缩\n                'vector-effect': 'non-scaling-stroke',\n              })}\n            />\n          </svg>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;AA2CA,IAAa,uBAAuB,IAAI,OAAO;CAC7C,MAAM;EACJ,UAAU;EACV,eAAe;EACf,UAAU;EACV,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,WAAW;EACX,QAAQ;EACR,aAAa;CACf;CACA,cAAc;EAAE,eAAe;EAAa,gBAAgB;CAAY;CACxE,gBAAgB;EAAE,eAAe;EAAa,kBAAkB;CAAY;CAC5E,WAAW;EAAE,iBAAiB;EAAa,gBAAgB;CAAY;CACvE,aAAa;EAAE,iBAAiB;EAAa,kBAAkB;CAAY;CAC3E,KAAK,EAAE,SAAS,QAAQ;CACxB,MAAM,EAAE,MAAM,gBAAgB;CAC9B,UAAU;EACR,MAAM;EACN,QAAQ;EACR,aAAa;EACb,OAAO;CACT;AACF,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAO2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aANb,YAAY;CAAA,MAAA,QAAAA,aAAA,QAAA,SAChB,GAAG;CAAA,MAAA,SAAAA,aAAA,QAAA,UACF,GAAG;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAGT,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,UAAU,eAAe,OAAO;CACtC,MAAM,WAAW,iBAAiB,OAAO;CACzC,IAAI,MAA4B;;CAGhC,MAAM,gBAAgB;EACpB,MAAM,EAAE,OAAO,WAAW,QAAQ,eAAe,SAAS,KAAK;EAC/D,OAAO;GACL,GAAG,CAAC,QAAQ,IAAI,QAAQ;GACxB,GAAG,CAAC,QAAQ,IAAI,QAAQ;GACxB,OAAO,YAAY,QAAQ;GAC3B,QAAQ,aAAa,QAAQ;EAC/B;CACF;;CAGA,SAAS,SAAS,SAAiB,SAAiB;EAClD,MAAM,SAAS,KAAK,aAAa,CAAC,EAAE,QAAQ;EAC5C,IAAI,CAAC,QAAQ;EACb,MAAM,QAAQ,IAAI,SAAS,SAAS,OAAO,CAAC,CAAC,gBAAgB,MAAM;EACnE,MAAM,EAAE,OAAO,WAAW,QAAQ,eAAe,SAAS,KAAK;EAC/D,SAAS,KAAK,MACZ,YAAY,IAAI,MAAM,IAAI,QAAQ,OAClC,aAAa,IAAI,MAAM,IAAI,QAAQ,KACrC;CACF;CAEA,SAAS,cAAc,OAAqB;EAC1C,IAAI,MAAM,WAAW,GAAG;EACxB,MAAM,eAAe;EACrB,SAAS,MAAM,SAAS,MAAM,OAAO;EACrC,UAAU,OAAO,EAAE,SAAS,UAAU,SAAS,MAAM,SAAS,MAAM,OAAO,EAAE,CAAC;CAChF;CAEA,aAAa;EACX,MAAM,QAAQ,SAAS,MAAM;EAC7B,MAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,SAAS,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK;GAAE,GAAG;GAAG,GAAG;GAAG,OAAO;GAAG,QAAQ;EAAE;EAC9E,MAAM,MAAM,KAAK,IAAI,MAAM,OAAO,MAAM,MAAM,IAAI;EAClD,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,qBAAqB,MAAM,qBAAoB,UAAA,MAAW,EAAE,GACnE,MACA;GAAE,eAAe;GAAQ;EAAc,CACzC,GAAC,CAAAA,YAAA,OAAAC,WAAA,EAAA,OAAA,OAAA,OAAA,OAAA,MAGO,YAAsB,MAAM,SAAgC,GAC9D,IAAI,MAAM,qBAAqB,GAAG,GAAC;GAAA,SAAA,MAAA;GAAA,UAAA,OAAA;GAAA,WAG9B,GAAG,MAAM,IAAI,IAAG,GAAI,MAAM,IAAI,IAAG,GAAI,MAAM,QAAQ,MAAM,EAAC,GAAI,MAAM,SAAS,MAAM;GAAG,uBAAA;EAAA,CAAA,GAAA,CAG9F,MAAM,KAAK,MAAM,UAAKD,YAAA,QAAAC,WAAA,EAAA,OAEd,MAAK,GACN,WAAmB,EAAE,IAAI,qBAAqB,KAAK,GAAC,UAAA,OAAa;GACnE,GAAG,KAAK;GACR,GAAG,KAAK;GACR,OAAO,KAAK;GACZ,QAAQ,KAAK;GACb,IAAI,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,IAAI;EAC1C,CAAC,CAAC,GAAA,IAAA,CAEL,GAACD,YAAA,QAEI,WAAmB,EAAE,IAAI,qBAAqB,SAAS,GAAC,cAAA,OAAiB;GAC3E,GAAG,KAAK;GACR,GAAG,KAAK;GACR,OAAO,KAAK;GACZ,QAAQ,KAAK;GAEb,iBAAiB;EACnB,CAAC,GAAC,IAAA,CAAA,CAAA,CAAA,CAAA;CAKZ;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/diagram/DiagramNode.d.ts

@@ -0,0 +1,65 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 节点的形状 */
+export interface DiagramNodeShapes {
+    /** 圆角矩形，默认 */
+    rect: unknown;
+    /** 胶囊形：开始、结束 */
+    pill: unknown;
+}
+/** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */
+export interface DiagramNodeProps extends PartProps<'div', 'title'> {
+    /** 标题：节点的名字 */
+    title?: VNodeChild;
+    /** 标题下的说明（次要文字）：岗位、类型、处理人 */
+    description?: VNodeChild;
+    /** 起始边：图标、头像；图标的颜色跟着 tone */
+    start?: VNodeChild;
+    /** 结束边：标记、数字 */
+    end?: VNodeChild;
+    /**
+     * 色调：底色、边框与起始边的颜色。neutral 是普通的卡片，别的色调用来区分类型或标出状态（当前步骤、已完成、被退回）
+     * @default 'neutral'
+     */
+    tone?: StatusTone;
+    /**
+     * 形状
+     * @default 'rect'
+     */
+    shape?: keyof DiagramNodeShapes;
+    /** 虚线边框：草稿、停用、还没走到的 */
+    dashed?: boolean;
+    /**
+     * 内容的对齐：center 居中（流程步骤），start 靠起始边（名片式：头像、图标在前）
+     * @default 'center'
+     */
+    align?: 'center' | 'start';
+    /** 说明下面的更多内容 */
+    children?: VNodeChild;
+}
+/** DiagramNode 的样式：root、pill、dashed、alignStart、body、title、description、start、end */
+export declare const diagramNodeStyles: Readonly<{
+    alignStart: css.CompiledStyles;
+    body: css.CompiledStyles;
+    bodyStart: css.CompiledStyles;
+    dashed: css.CompiledStyles;
+    description: css.CompiledStyles;
+    end: css.CompiledStyles;
+    pill: css.CompiledStyles;
+    root: css.CompiledStyles;
+    start: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 色调：节点的底色与边框 */
+export declare const diagramNodeToneStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** 画布的标准节点 */
+export declare const DiagramNode: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DiagramNodeProps>;

package/dist/diagram/DiagramNode.js

@@ -0,0 +1,142 @@
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/diagram/DiagramNode.tsx
+/** 节点的形状 */
+/** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */
+/** DiagramNode 的样式：root、pill、dashed、alignStart、body、title、description、start、end */
+var diagramNodeStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_space.sm",
+		minWidth: 0,
+		boxSizing: "border-box",
+		paddingInline: "_space.sm",
+		overflow: "hidden",
+		lineHeight: "_tight",
+		color: "_text",
+		borderWidth: "_sm",
+		borderStyle: "solid",
+		borderRadius: "_md",
+		boxShadow: "_xs"
+	},
+	pill: {
+		borderRadius: "_full",
+		paddingInline: "_space.md"
+	},
+	dashed: {
+		borderStyle: "dashed",
+		boxShadow: "none"
+	},
+	alignStart: { justifyContent: "flex-start" },
+	body: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		minWidth: 0,
+		textAlign: "center"
+	},
+	bodyStart: { textAlign: "start" },
+	title: {
+		fontWeight: "_medium",
+		overflowWrap: "anywhere"
+	},
+	description: {
+		fontSize: "0.85em",
+		color: "_textMuted",
+		overflowWrap: "anywhere"
+	},
+	start: {
+		display: "flex",
+		flexShrink: 0
+	},
+	end: {
+		display: "flex",
+		alignItems: "center",
+		flexShrink: 0,
+		marginInlineStart: "auto"
+	}
+});
+/** 色调：节点的底色与边框 */
+var diagramNodeToneStyles = css.create({
+	neutral: {
+		backgroundColor: "_surfaceRaised",
+		borderColor: "_borderStrong"
+	},
+	accent: {
+		backgroundColor: "_accentSoft",
+		borderColor: "_accentBorder"
+	},
+	info: {
+		backgroundColor: "_infoSoft",
+		borderColor: "_infoBorder"
+	},
+	success: {
+		backgroundColor: "_successSoft",
+		borderColor: "_successBorder"
+	},
+	warning: {
+		backgroundColor: "_warningSoft",
+		borderColor: "_warningBorder"
+	},
+	danger: {
+		backgroundColor: "_dangerSoft",
+		borderColor: "_dangerBorder"
+	}
+});
+/** 色调：起始边（图标）的颜色 */
+var startTones = css.create({
+	neutral: { color: "_textMuted" },
+	accent: { color: "_accentText" },
+	info: { color: "_infoText" },
+	success: { color: "_successText" },
+	warning: { color: "_warningText" },
+	danger: { color: "_dangerText" }
+});
+/** 画布的标准节点 */
+var DiagramNode = /*#__PURE__*/ _component((_props, _ctx) => {
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const start = readonlyProp(_props, "start");
+	const end = readonlyProp(_props, "end");
+	const tone = readonlyProp(_props, "tone", "neutral");
+	const shape = readonlyProp(_props, "shape", "rect");
+	const dashed = readonlyProp(_props, "dashed", false);
+	const align = readonlyProp(_props, "align", "center");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("div", mergeAttrs({ sx: [
+		diagramNodeStyles.root,
+		diagramNodeToneStyles[tone.value],
+		shape.value === "pill" && diagramNodeStyles.pill,
+		dashed.value && diagramNodeStyles.dashed,
+		align.value === "start" && diagramNodeStyles.alignStart
+	] }, rest, dataAttrs({ "data-diagram-shape": shape.value })), [
+		hasContent(start.value) && createVNode("span", css.attrs(diagramNodeStyles.start, startTones[tone.value]), [start.value]),
+		createVNode("div", css.attrs(diagramNodeStyles.body, align.value === "start" && diagramNodeStyles.bodyStart), [
+			hasContent(title.value) && createVNode("div", css.attrs(diagramNodeStyles.title), [title.value]),
+			hasContent(description.value) && createVNode("div", css.attrs(diagramNodeStyles.description), [description.value]),
+			children.value
+		]),
+		hasContent(end.value) && createVNode("span", css.attrs(diagramNodeStyles.end), [end.value])
+	]);
+}, {
+	name: "DiagramNode",
+	props: [
+		"title",
+		"description",
+		"start",
+		"end",
+		"tone",
+		"shape",
+		"dashed",
+		"align"
+	]
+});
+//#endregion
+export { DiagramNode, diagramNodeStyles, diagramNodeToneStyles };
+
+//# sourceMappingURL=DiagramNode.js.map

package/dist/diagram/DiagramNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramNode.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/diagram/DiagramNode.tsx"],"sourcesContent":["/**\n * 画布的标准节点：填满 Diagram 给的节点框的卡片，流程步骤、组织架构、关系图的节点不必各自写样式。\n * Diagram 没给 children 时每个节点就画成它（标题是 getNodeLabel）。\n *\n *   <Diagram nodes={steps} …>{(step) => <DiagramNode title={step.name} shape={step.end ? 'pill' : 'rect'} />}</Diagram>\n *   <DiagramNode start={<Avatar name={person.name} size=\"sm\" />} title={person.name} description={person.title} align=\"start\" />\n *   <DiagramNode start={<Icon icon={Warehouse} />} tone=\"success\" title=\"华东仓\" description=\"仓库\" align=\"start\" />\n *\n * 选中、焦点的描边由 Diagram 画在节点框外，shape=\"pill\" 时描边也是胶囊形。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 节点的形状 */\nexport interface DiagramNodeShapes {\n  /** 圆角矩形，默认 */\n  rect: unknown;\n  /** 胶囊形：开始、结束 */\n  pill: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */\nexport interface DiagramNodeProps extends PartProps<'div', 'title'> {\n  /** 标题：节点的名字 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字）：岗位、类型、处理人 */\n  description?: VNodeChild;\n  /** 起始边：图标、头像；图标的颜色跟着 tone */\n  start?: VNodeChild;\n  /** 结束边：标记、数字 */\n  end?: VNodeChild;\n  /**\n   * 色调：底色、边框与起始边的颜色。neutral 是普通的卡片，别的色调用来区分类型或标出状态（当前步骤、已完成、被退回）\n   * @default 'neutral'\n   */\n  tone?: StatusTone;\n  /**\n   * 形状\n   * @default 'rect'\n   */\n  shape?: keyof DiagramNodeShapes;\n  /** 虚线边框：草稿、停用、还没走到的 */\n  dashed?: boolean;\n  /**\n   * 内容的对齐：center 居中（流程步骤），start 靠起始边（名片式：头像、图标在前）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** DiagramNode 的样式：root、pill、dashed、alignStart、body、title、description、start、end */\nexport const diagramNodeStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_space.sm',\n    minWidth: 0,\n    boxSizing: 'border-box',\n    paddingInline: '_space.sm',\n    overflow: 'hidden',\n    lineHeight: '_tight',\n    color: '_text',\n    borderWidth: '_sm',\n    borderStyle: 'solid',\n    borderRadius: '_md',\n    boxShadow: '_xs',\n  },\n  pill: { borderRadius: '_full', paddingInline: '_space.md' },\n  dashed: { borderStyle: 'dashed', boxShadow: 'none' },\n  alignStart: { justifyContent: 'flex-start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0, textAlign: 'center' },\n  bodyStart: { textAlign: 'start' },\n  title: { fontWeight: '_medium', overflowWrap: 'anywhere' },\n  description: { fontSize: '0.85em', color: '_textMuted', overflowWrap: 'anywhere' },\n  start: { display: 'flex', flexShrink: 0 },\n  end: { display: 'flex', alignItems: 'center', flexShrink: 0, marginInlineStart: 'auto' },\n});\n\n/** 色调：节点的底色与边框 */\nexport const diagramNodeToneStyles = css.create({\n  neutral: { backgroundColor: '_surfaceRaised', borderColor: '_borderStrong' },\n  accent: { backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: { backgroundColor: '_successSoft', borderColor: '_successBorder' },\n  warning: { backgroundColor: '_warningSoft', borderColor: '_warningBorder' },\n  danger: { backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\n/** 色调：起始边（图标）的颜色 */\nconst startTones = css.create({\n  neutral: { color: '_textMuted' },\n  accent: { color: '_accentText' },\n  info: { color: '_infoText' },\n  success: { color: '_successText' },\n  warning: { color: '_warningText' },\n  danger: { color: '_dangerText' },\n});\n\n/** 画布的标准节点 */\nexport const DiagramNode = _component(\n  ({\n    title,\n    description,\n    start,\n    end,\n    tone = 'neutral',\n    shape = 'rect',\n    dashed = false,\n    align = 'center',\n    children,\n    ...rest\n  }: DiagramNodeProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              diagramNodeStyles.root,\n              diagramNodeToneStyles[tone],\n              shape === 'pill' && diagramNodeStyles.pill,\n              dashed && diagramNodeStyles.dashed,\n              align === 'start' && diagramNodeStyles.alignStart,\n            ],\n          },\n          rest,\n          // Diagram 按它把选中、焦点的描边画成同样的形状\n          dataAttrs({ 'data-diagram-shape': shape }),\n        )}\n      >\n        {hasContent(start) && (\n          <span {...css.attrs(diagramNodeStyles.start, startTones[tone])}>{start}</span>\n        )}\n        {/* 标题、说明是块级元素：读屏与无障碍检查从内容取文字时两段之间有停顿，不会连成一串 */}\n        <div\n          {...css.attrs(diagramNodeStyles.body, align === 'start' && diagramNodeStyles.bodyStart)}\n        >\n          {hasContent(title) && <div {...css.attrs(diagramNodeStyles.title)}>{title}</div>}\n          {hasContent(description) && (\n            <div {...css.attrs(diagramNodeStyles.description)}>{description}</div>\n          )}\n          {children}\n        </div>\n        {hasContent(end) && <span {...css.attrs(diagramNodeStyles.end)}>{end}</span>}\n      </div>\n    ),\n);\n"],"mappings":"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"}

package/dist/diagram/controller.d.ts

@@ -0,0 +1,68 @@
+import { type PanZoom, type PanZoomState } from '../utils/dom/pan-zoom';
+import type { DiagramPoint, DiagramRect } from './geometry';
+/** useDiagram 的选项 */
+export interface DiagramOptions {
+    /** 最小缩放，默认 0.2 */
+    minScale?: number;
+    /** 最大缩放，默认 2 */
+    maxScale?: number;
+    /** 每一档缩放的倍数（按钮、键盘），默认 1.2 */
+    step?: number;
+    /** 适应内容时四周留的空白（px），默认 48：画布角上的缩放按钮不压住节点 */
+    fitPadding?: number;
+}
+/** 画布的控制器 */
+export interface DiagramController {
+    /** 视口的横向平移（px） */
+    readonly x: number;
+    /** 视口的纵向平移（px） */
+    readonly y: number;
+    /** 缩放比例，1 为原大 */
+    readonly scale: number;
+    /** 正在拖动平移或捏合：这期间不要加过渡动画 */
+    readonly interacting: boolean;
+    /** 能不能再放大、缩小（按钮的可用状态） */
+    readonly canZoomIn: boolean;
+    /** 能不能再缩小 */
+    readonly canZoomOut: boolean;
+    /** 放大一档（以视口中心为准） */
+    zoomIn(): void;
+    /** 缩小一档 */
+    zoomOut(): void;
+    /** 缩放到 scale（限制在 minScale–maxScale），以视口中心为准 */
+    zoomTo(scale: number): void;
+    /** 把全部内容放进视口并居中（不超过原大）；还没有内容或视口时什么也不做 */
+    fit(): void;
+    /** 平移到让这块区域（画布坐标）整个看得见，四周留 margin（px）；已经看得见时不动 */
+    reveal(rect: DiagramRect, margin?: number): void;
+    /** 页面坐标（clientX、clientY）换成画布坐标 */
+    toDiagram(clientX: number, clientY: number): DiagramPoint;
+}
+/** 画布的内部接口：Diagram 接上控制器，小地图、导出这类画布部件经它读画布的状态（diagramInternals 取得） */
+export interface DiagramInternals {
+    /** 视口元素：Diagram 挂载后写入 */
+    readonly element: {
+        value: HTMLElement | null;
+    };
+    /** 视口的大小（px）：Diagram 量到后写入，响应式 */
+    readonly size: {
+        value: {
+            width: number;
+            height: number;
+        };
+    };
+    /** 读内容的边界（画布坐标）：Diagram 交进来 */
+    content: () => DiagramRect | undefined;
+    /** 读节点当前的位置与大小（拖动中的按拖到的位置）：Diagram 交进来 */
+    nodes: () => readonly DiagramRect[];
+    /** 挑出视口要处理的事件：Diagram 按拖动方式、点在哪里交进来 */
+    filter: (event: PointerEvent | WheelEvent | MouseEvent | KeyboardEvent) => boolean;
+    /** 视口的事件属性：展开到视口元素上 */
+    readonly view: PanZoom;
+    /** 适应内容时的状态；还没有内容或视口时 undefined */
+    fitted(): PanZoomState | undefined;
+}
+/** 控制器的内部接口：Diagram 与画布部件（DiagramMinimap、导出）用；自己写画布部件时也从这里读 */
+export declare function diagramInternals(controller: DiagramController): DiagramInternals;
+/** 创建画布的控制器（在 setup 里调用） */
+export declare function useDiagram(options?: DiagramOptions): DiagramController;

package/dist/diagram/controller.js

@@ -0,0 +1,117 @@
+import { fitTransform, usePanZoom } from "../utils/dom/pan-zoom.js";
+import { shallowRef } from "vue";
+//#region src/diagram/controller.ts
+/**
+* 画布的控制器：视口（平移、缩放、适应内容）与坐标换算，交给 Diagram 与画布外的工具栏共用（RUNES.md §7 的控制器对象）。
+*
+*   const diagram = useDiagram({ maxScale: 2 });
+*   <IconButton icon={Maximize} aria-label="适应画布" onClick={() => diagram.fit()} />
+*   <Diagram controller={diagram} nodes={nodes} … />
+*
+* 视口建在 usePanZoom 上：滚轮平移、按住 Ctrl / ⌘ 或触控板捏合缩放，拖动空白处平移，键盘的方向键、+ / −；
+* 回到初始（键盘 0、已放大时双击）回到“适应内容”。不传 controller 时 Diagram 自己建一个。
+*/
+var internals = /* @__PURE__ */ new WeakMap();
+/** 控制器的内部接口：Diagram 与画布部件（DiagramMinimap、导出）用；自己写画布部件时也从这里读 */
+function diagramInternals(controller) {
+	const found = internals.get(controller);
+	if (!found) throw new Error("Diagram: controller 要用 useDiagram() 创建");
+	return found;
+}
+/** 创建画布的控制器（在 setup 里调用） */
+function useDiagram(options = {}) {
+	const min = options.minScale ?? .2;
+	const max = options.maxScale ?? 2;
+	const padding = options.fitPadding ?? 48;
+	const element = shallowRef(null);
+	const size = () => ({
+		width: element.value?.clientWidth ?? 0,
+		height: element.value?.clientHeight ?? 0
+	});
+	const own = {
+		element,
+		size: shallowRef({
+			width: 0,
+			height: 0
+		}),
+		content: () => void 0,
+		nodes: () => [],
+		filter: () => true,
+		fitted() {
+			const content = own.content();
+			const viewport = size();
+			if (!content || viewport.width === 0 || viewport.height === 0) return void 0;
+			return fitTransform(viewport, content, {
+				padding,
+				min,
+				max
+			});
+		}
+	};
+	const view = usePanZoom({
+		viewport: () => element.value,
+		min,
+		max,
+		step: options.step ?? 1.2,
+		wheel: "pan",
+		initial: () => own.fitted() ?? {
+			x: 0,
+			y: 0,
+			scale: 1
+		},
+		filter: (event) => own.filter(event)
+	});
+	const zoomTo = (scale) => view.zoomTo(scale);
+	const controller = {
+		get x() {
+			return view.x;
+		},
+		get y() {
+			return view.y;
+		},
+		get scale() {
+			return view.scale;
+		},
+		get interacting() {
+			return view.interacting;
+		},
+		get canZoomIn() {
+			return view.scale < max;
+		},
+		get canZoomOut() {
+			return view.scale > min;
+		},
+		zoomIn: () => view.zoomIn(),
+		zoomOut: () => view.zoomOut(),
+		zoomTo,
+		fit() {
+			const content = own.content();
+			if (content && element.value) view.fit(content, padding);
+		},
+		reveal(rect, margin = 24) {
+			const { width, height } = size();
+			const { x, y, scale } = view;
+			const shift = (offset, start, length, room) => {
+				const from = start * scale + offset;
+				const to = from + length * scale;
+				if (to - from > room - margin * 2 || from < margin) return offset + margin - from;
+				if (to > room - margin) return offset + room - margin - to;
+				return offset;
+			};
+			view.panTo(shift(x, rect.x, rect.width, width), shift(y, rect.y, rect.height, height));
+		},
+		toDiagram(clientX, clientY) {
+			const box = element.value?.getBoundingClientRect();
+			return {
+				x: (clientX - (box?.left ?? 0) - view.x) / view.scale,
+				y: (clientY - (box?.top ?? 0) - view.y) / view.scale
+			};
+		}
+	};
+	internals.set(controller, Object.assign(own, { view }));
+	return controller;
+}
+//#endregion
+export { diagramInternals, useDiagram };
+
+//# sourceMappingURL=controller.js.map

package/dist/diagram/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":[],"sources":["../../src/diagram/controller.ts"],"sourcesContent":["/**\n * 画布的控制器：视口（平移、缩放、适应内容）与坐标换算，交给 Diagram 与画布外的工具栏共用（RUNES.md §7 的控制器对象）。\n *\n *   const diagram = useDiagram({ maxScale: 2 });\n *   <IconButton icon={Maximize} aria-label=\"适应画布\" onClick={() => diagram.fit()} />\n *   <Diagram controller={diagram} nodes={nodes} … />\n *\n * 视口建在 usePanZoom 上：滚轮平移、按住 Ctrl / ⌘ 或触控板捏合缩放，拖动空白处平移，键盘的方向键、+ / −；\n * 回到初始（键盘 0、已放大时双击）回到“适应内容”。不传 controller 时 Diagram 自己建一个。\n */\nimport { shallowRef } from 'vue';\nimport { fitTransform, usePanZoom, type PanZoom, type PanZoomState } from '../utils/dom/pan-zoom';\nimport type { DiagramPoint, DiagramRect } from './geometry';\n\n/** useDiagram 的选项 */\nexport interface DiagramOptions {\n  /** 最小缩放，默认 0.2 */\n  minScale?: number;\n  /** 最大缩放，默认 2 */\n  maxScale?: number;\n  /** 每一档缩放的倍数（按钮、键盘），默认 1.2 */\n  step?: number;\n  /** 适应内容时四周留的空白（px），默认 48：画布角上的缩放按钮不压住节点 */\n  fitPadding?: number;\n}\n\n/** 画布的控制器 */\nexport interface DiagramController {\n  /** 视口的横向平移（px） */\n  readonly x: number;\n  /** 视口的纵向平移（px） */\n  readonly y: number;\n  /** 缩放比例，1 为原大 */\n  readonly scale: number;\n  /** 正在拖动平移或捏合：这期间不要加过渡动画 */\n  readonly interacting: boolean;\n  /** 能不能再放大、缩小（按钮的可用状态） */\n  readonly canZoomIn: boolean;\n  /** 能不能再缩小 */\n  readonly canZoomOut: boolean;\n  /** 放大一档（以视口中心为准） */\n  zoomIn(): void;\n  /** 缩小一档 */\n  zoomOut(): void;\n  /** 缩放到 scale（限制在 minScale–maxScale），以视口中心为准 */\n  zoomTo(scale: number): void;\n  /** 把全部内容放进视口并居中（不超过原大）；还没有内容或视口时什么也不做 */\n  fit(): void;\n  /** 平移到让这块区域（画布坐标）整个看得见，四周留 margin（px）；已经看得见时不动 */\n  reveal(rect: DiagramRect, margin?: number): void;\n  /** 页面坐标（clientX、clientY）换成画布坐标 */\n  toDiagram(clientX: number, clientY: number): DiagramPoint;\n}\n\n/** 画布的内部接口：Diagram 接上控制器，小地图、导出这类画布部件经它读画布的状态（diagramInternals 取得） */\nexport interface DiagramInternals {\n  /** 视口元素：Diagram 挂载后写入 */\n  readonly element: { value: HTMLElement | null };\n  /** 视口的大小（px）：Diagram 量到后写入，响应式 */\n  readonly size: { value: { width: number; height: number } };\n  /** 读内容的边界（画布坐标）：Diagram 交进来 */\n  content: () => DiagramRect | undefined;\n  /** 读节点当前的位置与大小（拖动中的按拖到的位置）：Diagram 交进来 */\n  nodes: () => readonly DiagramRect[];\n  /** 挑出视口要处理的事件：Diagram 按拖动方式、点在哪里交进来 */\n  filter: (event: PointerEvent | WheelEvent | MouseEvent | KeyboardEvent) => boolean;\n  /** 视口的事件属性：展开到视口元素上 */\n  readonly view: PanZoom;\n  /** 适应内容时的状态；还没有内容或视口时 undefined */\n  fitted(): PanZoomState | undefined;\n}\n\nconst internals = new WeakMap<DiagramController, DiagramInternals>();\n\n/** 控制器的内部接口：Diagram 与画布部件（DiagramMinimap、导出）用；自己写画布部件时也从这里读 */\nexport function diagramInternals(controller: DiagramController): DiagramInternals {\n  const found = internals.get(controller);\n  if (!found) throw new Error('Diagram: controller 要用 useDiagram() 创建');\n  return found;\n}\n\n/** 创建画布的控制器（在 setup 里调用） */\nexport function useDiagram(options: DiagramOptions = {}): DiagramController {\n  const min = options.minScale ?? 0.2;\n  const max = options.maxScale ?? 2;\n  const padding = options.fitPadding ?? 48;\n  const element = shallowRef<HTMLElement | null>(null);\n  const size = () => ({\n    width: element.value?.clientWidth ?? 0,\n    height: element.value?.clientHeight ?? 0,\n  });\n\n  const own: Omit<DiagramInternals, 'view'> = {\n    element,\n    size: shallowRef({ width: 0, height: 0 }),\n    content: () => undefined,\n    nodes: () => [],\n    filter: () => true,\n    fitted() {\n      const content = own.content();\n      const viewport = size();\n      if (!content || viewport.width === 0 || viewport.height === 0) return undefined;\n      return fitTransform(viewport, content, { padding, min, max });\n    },\n  };\n  const view = usePanZoom({\n    viewport: () => element.value,\n    min,\n    max,\n    step: options.step ?? 1.2,\n    wheel: 'pan',\n    initial: () => own.fitted() ?? { x: 0, y: 0, scale: 1 },\n    filter: (event) => own.filter(event),\n  });\n  const zoomTo = (scale: number) => view.zoomTo(scale);\n\n  const controller: DiagramController = {\n    get x() {\n      return view.x;\n    },\n    get y() {\n      return view.y;\n    },\n    get scale() {\n      return view.scale;\n    },\n    get interacting() {\n      return view.interacting;\n    },\n    get canZoomIn() {\n      return view.scale < max;\n    },\n    get canZoomOut() {\n      return view.scale > min;\n    },\n    zoomIn: () => view.zoomIn(),\n    zoomOut: () => view.zoomOut(),\n    zoomTo,\n    fit() {\n      const content = own.content();\n      if (content && element.value) view.fit(content, padding);\n    },\n    reveal(rect, margin = 24) {\n      const { width, height } = size();\n      const { x, y, scale } = view;\n      // 一个方向上：区域在视口外就挪到刚好露出来，比视口还大时对齐起始边\n      const shift = (offset: number, start: number, length: number, room: number) => {\n        const from = start * scale + offset;\n        const to = from + length * scale;\n        if (to - from > room - margin * 2 || from < margin) return offset + margin - from;\n        if (to > room - margin) return offset + room - margin - to;\n        return offset;\n      };\n      view.panTo(shift(x, rect.x, rect.width, width), shift(y, rect.y, rect.height, height));\n    },\n    toDiagram(clientX, clientY) {\n      const box = element.value?.getBoundingClientRect();\n      return {\n        x: (clientX - (box?.left ?? 0) - view.x) / view.scale,\n        y: (clientY - (box?.top ?? 0) - view.y) / view.scale,\n      };\n    },\n  };\n  internals.set(controller, Object.assign(own, { view }));\n  return controller;\n}\n"],"mappings":";;;;;;;;;;;;;AAwEA,IAAM,4BAAY,IAAI,QAA6C;;AAGnE,SAAgB,iBAAiB,YAAiD;CAChF,MAAM,QAAQ,UAAU,IAAI,UAAU;CACtC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,wCAAwC;CACpE,OAAO;AACT;;AAGA,SAAgB,WAAW,UAA0B,CAAC,GAAsB;CAC1E,MAAM,MAAM,QAAQ,YAAY;CAChC,MAAM,MAAM,QAAQ,YAAY;CAChC,MAAM,UAAU,QAAQ,cAAc;CACtC,MAAM,UAAU,WAA+B,IAAI;CACnD,MAAM,cAAc;EAClB,OAAO,QAAQ,OAAO,eAAe;EACrC,QAAQ,QAAQ,OAAO,gBAAgB;CACzC;CAEA,MAAM,MAAsC;EAC1C;EACA,MAAM,WAAW;GAAE,OAAO;GAAG,QAAQ;EAAE,CAAC;EACxC,eAAe,KAAA;EACf,aAAa,CAAC;EACd,cAAc;EACd,SAAS;GACP,MAAM,UAAU,IAAI,QAAQ;GAC5B,MAAM,WAAW,KAAK;GACtB,IAAI,CAAC,WAAW,SAAS,UAAU,KAAK,SAAS,WAAW,GAAG,OAAO,KAAA;GACtE,OAAO,aAAa,UAAU,SAAS;IAAE;IAAS;IAAK;GAAI,CAAC;EAC9D;CACF;CACA,MAAM,OAAO,WAAW;EACtB,gBAAgB,QAAQ;EACxB;EACA;EACA,MAAM,QAAQ,QAAQ;EACtB,OAAO;EACP,eAAe,IAAI,OAAO,KAAK;GAAE,GAAG;GAAG,GAAG;GAAG,OAAO;EAAE;EACtD,SAAS,UAAU,IAAI,OAAO,KAAK;CACrC,CAAC;CACD,MAAM,UAAU,UAAkB,KAAK,OAAO,KAAK;CAEnD,MAAM,aAAgC;EACpC,IAAI,IAAI;GACN,OAAO,KAAK;EACd;EACA,IAAI,IAAI;GACN,OAAO,KAAK;EACd;EACA,IAAI,QAAQ;GACV,OAAO,KAAK;EACd;EACA,IAAI,cAAc;GAChB,OAAO,KAAK;EACd;EACA,IAAI,YAAY;GACd,OAAO,KAAK,QAAQ;EACtB;EACA,IAAI,aAAa;GACf,OAAO,KAAK,QAAQ;EACtB;EACA,cAAc,KAAK,OAAO;EAC1B,eAAe,KAAK,QAAQ;EAC5B;EACA,MAAM;GACJ,MAAM,UAAU,IAAI,QAAQ;GAC5B,IAAI,WAAW,QAAQ,OAAO,KAAK,IAAI,SAAS,OAAO;EACzD;EACA,OAAO,MAAM,SAAS,IAAI;GACxB,MAAM,EAAE,OAAO,WAAW,KAAK;GAC/B,MAAM,EAAE,GAAG,GAAG,UAAU;GAExB,MAAM,SAAS,QAAgB,OAAe,QAAgB,SAAiB;IAC7E,MAAM,OAAO,QAAQ,QAAQ;IAC7B,MAAM,KAAK,OAAO,SAAS;IAC3B,IAAI,KAAK,OAAO,OAAO,SAAS,KAAK,OAAO,QAAQ,OAAO,SAAS,SAAS;IAC7E,IAAI,KAAK,OAAO,QAAQ,OAAO,SAAS,OAAO,SAAS;IACxD,OAAO;GACT;GACA,KAAK,MAAM,MAAM,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,QAAQ,MAAM,CAAC;EACvF;EACA,UAAU,SAAS,SAAS;GAC1B,MAAM,MAAM,QAAQ,OAAO,sBAAsB;GACjD,OAAO;IACL,IAAI,WAAW,KAAK,QAAQ,KAAK,KAAK,KAAK,KAAK;IAChD,IAAI,WAAW,KAAK,OAAO,KAAK,KAAK,KAAK,KAAK;GACjD;EACF;CACF;CACA,UAAU,IAAI,YAAY,OAAO,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;CACtD,OAAO;AACT"}

package/dist/diagram/export.d.ts

@@ -0,0 +1,14 @@
+import { type DiagramController } from './controller';
+/** 导出的选项 */
+export interface DiagramExportOptions {
+    /** 内容四周留的空白（px），默认 24 */
+    padding?: number;
+    /** 底色，默认取画布的背景色；SVG 写 'transparent' 时透明 */
+    background?: string;
+}
+/** 整张图导出成 SVG 文字；画布还没挂载、没有内容时报错 */
+export declare function diagramToSvg(diagram: DiagramController, options?: DiagramExportOptions): string;
+/** 整张图导出成 PNG（两倍分辨率，pixelRatio 可改） */
+export declare function diagramToPng(diagram: DiagramController, options?: DiagramExportOptions & {
+    pixelRatio?: number;
+}): Promise<Blob>;