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

package/dist/utils/dom/overlay.js

@@ -0,0 +1,104 @@
+import { focusOrigin, returnFocus, trapFocus } from "./focus.js";
+import { shallowReactive } from "vue";
+//#region src/utils/dom/overlay.ts
+/**
+* 弹层的基础工具。弹层本身用原生 popover / dialog（顶层渲染、Esc、点击外部、嵌套顺序、
+* 背景 inert 都由浏览器负责，见 apps/host-demo/test/native-overlay.browser.test.ts），
+* 这里只补浏览器不做或做得不一致的：组件实例 → 元素、点击遮罩关闭、登记打开着的模态、锁定页面滚动。
+* 焦点的进出与循环见 focus.ts。
+*/
+/**
+* 点击模态 dialog 的遮罩时调用 onDismiss。不能只看 event.target === dialog：
+* dialog 自己的内边距、以及在内容里按下再拖到遮罩上松开（选中文字）时，click 的目标也是 dialog。
+* 所以按坐标判断，而且按下与松开都要在 dialog 的边框之外。返回撤销函数。
+*/
+function dismissOnBackdrop(dialog, onDismiss) {
+	const outside = (event) => {
+		if (event.target !== dialog) return false;
+		const rect = dialog.getBoundingClientRect();
+		const { clientX: x, clientY: y } = event;
+		return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+	};
+	let pressedOutside = false;
+	const onPointerDown = (event) => pressedOutside = outside(event);
+	const onClick = (event) => {
+		if (pressedOutside && outside(event)) onDismiss(event);
+		pressedOutside = false;
+	};
+	dialog.addEventListener("pointerdown", onPointerDown);
+	dialog.addEventListener("click", onClick);
+	return () => {
+		dialog.removeEventListener("pointerdown", onPointerDown);
+		dialog.removeEventListener("click", onClick);
+	};
+}
+/** 打开着的模态 dialog，后打开的在后面 */
+var modals = shallowReactive([]);
+/**
+* 记下一个打开的模态（Dialog 等组件在 showModal 后调用），返回移除函数，重复调用无副作用。
+* 模态打开时外面的元素都是 inert 的，顶层的 manual popover 也不例外（见 native-overlay 的浏览器测试），
+* 所以要在模态打开期间可交互的浮层（Toaster）用 topModal() 把自己移进最上层的模态里。
+*/
+function trackModal(dialog) {
+	modals.push(dialog);
+	return () => {
+		const index = modals.indexOf(dialog);
+		if (index >= 0) modals.splice(index, 1);
+	};
+}
+/** 最上层的模态 dialog；没有时为 undefined。在渲染或 computed 里读取会跟着变化 */
+function topModal() {
+	return modals.at(-1);
+}
+/**
+* 以模态方式打开原生 dialog，接上全部的模态行为：记下焦点来源、showModal、登记为最上层的模态（topModal）、
+* 锁定页面滚动、焦点陷阱，可选点遮罩关闭。返回释放函数：dialog 关闭时调用，撤销以上并把焦点还给来源。
+* ModalCore（Dialog、Drawer、AlertDialog、CommandPalette）与 Tour 共用
+*/
+function openModalDialog(dialog, { lockScroll: lock = true, dismissOnBackdrop: dismiss = false, onDismiss } = {}) {
+	const opener = focusOrigin();
+	dialog.showModal();
+	const cleanups = [
+		trackModal(dialog),
+		lock ? lockScroll() : void 0,
+		trapFocus(dialog),
+		dismiss ? dismissOnBackdrop(dialog, onDismiss ?? (() => dialog.close())) : void 0
+	];
+	return () => {
+		for (const cleanup of cleanups) cleanup?.();
+		returnFocus(dialog, opener);
+	};
+}
+var locks = 0;
+var restore;
+/**
+* 锁定页面滚动（打开模态时）。可以叠加：最后一个解锁时才恢复。
+* 去掉滚动条后在结束边（滚动条那一侧，从右到左时在左边）补上等宽的内边距，加在原有的内边距上，
+* 页面内容不会左右跳动。返回解锁函数，重复调用无副作用。
+*/
+function lockScroll() {
+	if (locks++ === 0) {
+		const root = document.documentElement;
+		const scrollbar = window.innerWidth - root.clientWidth;
+		const previous = {
+			overflow: root.style.overflow,
+			paddingInlineEnd: root.style.paddingInlineEnd
+		};
+		if (scrollbar > 0) {
+			const padding = getComputedStyle(root).paddingInlineEnd || "0px";
+			root.style.paddingInlineEnd = `calc(${padding} + ${scrollbar}px)`;
+		}
+		root.style.overflow = "hidden";
+		restore = () => Object.assign(root.style, previous);
+	}
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		if (--locks === 0) restore?.();
+	};
+}
+//#endregion
+export { dismissOnBackdrop, lockScroll, openModalDialog, topModal, trackModal };
+
+//# sourceMappingURL=overlay.js.map

package/dist/utils/dom/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../src/utils/dom/overlay.ts"],"sourcesContent":["/**\n * 弹层的基础工具。弹层本身用原生 popover / dialog（顶层渲染、Esc、点击外部、嵌套顺序、\n * 背景 inert 都由浏览器负责，见 apps/host-demo/test/native-overlay.browser.test.ts），\n * 这里只补浏览器不做或做得不一致的：组件实例 → 元素、点击遮罩关闭、登记打开着的模态、锁定页面滚动。\n * 焦点的进出与循环见 focus.ts。\n */\nimport { shallowReactive } from 'vue';\nimport { focusOrigin, returnFocus, trapFocus } from './focus';\n\n/**\n * 点击模态 dialog 的遮罩时调用 onDismiss。不能只看 event.target === dialog：\n * dialog 自己的内边距、以及在内容里按下再拖到遮罩上松开（选中文字）时，click 的目标也是 dialog。\n * 所以按坐标判断，而且按下与松开都要在 dialog 的边框之外。返回撤销函数。\n */\nexport function dismissOnBackdrop(\n  dialog: HTMLDialogElement,\n  onDismiss: (event: MouseEvent) => void,\n): () => void {\n  const outside = (event: MouseEvent) => {\n    if (event.target !== dialog) return false;\n    const rect = dialog.getBoundingClientRect();\n    const { clientX: x, clientY: y } = event;\n    return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;\n  };\n  let pressedOutside = false;\n  const onPointerDown = (event: PointerEvent) => (pressedOutside = outside(event));\n  const onClick = (event: MouseEvent) => {\n    if (pressedOutside && outside(event)) onDismiss(event);\n    pressedOutside = false;\n  };\n  dialog.addEventListener('pointerdown', onPointerDown);\n  dialog.addEventListener('click', onClick);\n  return () => {\n    dialog.removeEventListener('pointerdown', onPointerDown);\n    dialog.removeEventListener('click', onClick);\n  };\n}\n\n/** 打开着的模态 dialog，后打开的在后面 */\nconst modals = shallowReactive<HTMLDialogElement[]>([]);\n\n/**\n * 记下一个打开的模态（Dialog 等组件在 showModal 后调用），返回移除函数，重复调用无副作用。\n * 模态打开时外面的元素都是 inert 的，顶层的 manual popover 也不例外（见 native-overlay 的浏览器测试），\n * 所以要在模态打开期间可交互的浮层（Toaster）用 topModal() 把自己移进最上层的模态里。\n */\nexport function trackModal(dialog: HTMLDialogElement): () => void {\n  modals.push(dialog);\n  return () => {\n    const index = modals.indexOf(dialog);\n    if (index >= 0) modals.splice(index, 1);\n  };\n}\n\n/** 最上层的模态 dialog；没有时为 undefined。在渲染或 computed 里读取会跟着变化 */\nexport function topModal(): HTMLDialogElement | undefined {\n  return modals.at(-1);\n}\n\n/** openModalDialog 的选项 */\nexport interface ModalDialogOptions {\n  /** 锁定页面滚动，默认 true */\n  lockScroll?: boolean;\n  /** 点遮罩（对话框外面）关闭，默认 false */\n  dismissOnBackdrop?: boolean;\n  /** 点遮罩时怎样关闭，默认直接 dialog.close()（要先确认时换成自己的） */\n  onDismiss?: (event: MouseEvent) => void;\n}\n\n/**\n * 以模态方式打开原生 dialog，接上全部的模态行为：记下焦点来源、showModal、登记为最上层的模态（topModal）、\n * 锁定页面滚动、焦点陷阱，可选点遮罩关闭。返回释放函数：dialog 关闭时调用，撤销以上并把焦点还给来源。\n * ModalCore（Dialog、Drawer、AlertDialog、CommandPalette）与 Tour 共用\n */\nexport function openModalDialog(\n  dialog: HTMLDialogElement,\n  {\n    lockScroll: lock = true,\n    dismissOnBackdrop: dismiss = false,\n    onDismiss,\n  }: ModalDialogOptions = {},\n): () => void {\n  const opener = focusOrigin();\n  dialog.showModal();\n  const cleanups = [\n    trackModal(dialog),\n    lock ? lockScroll() : undefined,\n    trapFocus(dialog),\n    dismiss ? dismissOnBackdrop(dialog, onDismiss ?? (() => dialog.close())) : undefined,\n  ];\n  return () => {\n    for (const cleanup of cleanups) cleanup?.();\n    returnFocus(dialog, opener);\n  };\n}\n\nlet locks = 0;\nlet restore: (() => void) | undefined;\n\n/**\n * 锁定页面滚动（打开模态时）。可以叠加：最后一个解锁时才恢复。\n * 去掉滚动条后在结束边（滚动条那一侧，从右到左时在左边）补上等宽的内边距，加在原有的内边距上，\n * 页面内容不会左右跳动。返回解锁函数，重复调用无副作用。\n */\nexport function lockScroll(): () => void {\n  if (locks++ === 0) {\n    const root = document.documentElement;\n    const scrollbar = window.innerWidth - root.clientWidth;\n    const previous = {\n      overflow: root.style.overflow,\n      paddingInlineEnd: root.style.paddingInlineEnd,\n    };\n    if (scrollbar > 0) {\n      const padding = getComputedStyle(root).paddingInlineEnd || '0px';\n      root.style.paddingInlineEnd = `calc(${padding} + ${scrollbar}px)`;\n    }\n    root.style.overflow = 'hidden';\n    restore = () => Object.assign(root.style, previous);\n  }\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    if (--locks === 0) restore?.();\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,kBACd,QACA,WACY;CACZ,MAAM,WAAW,UAAsB;EACrC,IAAI,MAAM,WAAW,QAAQ,OAAO;EACpC,MAAM,OAAO,OAAO,sBAAsB;EAC1C,MAAM,EAAE,SAAS,GAAG,SAAS,MAAM;EACnC,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI,KAAK,OAAO,IAAI,KAAK;CACrE;CACA,IAAI,iBAAiB;CACrB,MAAM,iBAAiB,UAAyB,iBAAiB,QAAQ,KAAK;CAC9E,MAAM,WAAW,UAAsB;EACrC,IAAI,kBAAkB,QAAQ,KAAK,GAAG,UAAU,KAAK;EACrD,iBAAiB;CACnB;CACA,OAAO,iBAAiB,eAAe,aAAa;CACpD,OAAO,iBAAiB,SAAS,OAAO;CACxC,aAAa;EACX,OAAO,oBAAoB,eAAe,aAAa;EACvD,OAAO,oBAAoB,SAAS,OAAO;CAC7C;AACF;;AAGA,IAAM,SAAS,gBAAqC,CAAC,CAAC;;;;;;AAOtD,SAAgB,WAAW,QAAuC;CAChE,OAAO,KAAK,MAAM;CAClB,aAAa;EACX,MAAM,QAAQ,OAAO,QAAQ,MAAM;EACnC,IAAI,SAAS,GAAG,OAAO,OAAO,OAAO,CAAC;CACxC;AACF;;AAGA,SAAgB,WAA0C;CACxD,OAAO,OAAO,GAAG,EAAE;AACrB;;;;;;AAiBA,SAAgB,gBACd,QACA,EACE,YAAY,OAAO,MACnB,mBAAmB,UAAU,OAC7B,cACsB,CAAC,GACb;CACZ,MAAM,SAAS,YAAY;CAC3B,OAAO,UAAU;CACjB,MAAM,WAAW;EACf,WAAW,MAAM;EACjB,OAAO,WAAW,IAAI,KAAA;EACtB,UAAU,MAAM;EAChB,UAAU,kBAAkB,QAAQ,oBAAoB,OAAO,MAAM,EAAE,IAAI,KAAA;CAC7E;CACA,aAAa;EACX,KAAK,MAAM,WAAW,UAAU,UAAU;EAC1C,YAAY,QAAQ,MAAM;CAC5B;AACF;AAEA,IAAI,QAAQ;AACZ,IAAI;;;;;;AAOJ,SAAgB,aAAyB;CACvC,IAAI,YAAY,GAAG;EACjB,MAAM,OAAO,SAAS;EACtB,MAAM,YAAY,OAAO,aAAa,KAAK;EAC3C,MAAM,WAAW;GACf,UAAU,KAAK,MAAM;GACrB,kBAAkB,KAAK,MAAM;EAC/B;EACA,IAAI,YAAY,GAAG;GACjB,MAAM,UAAU,iBAAiB,IAAI,CAAC,CAAC,oBAAoB;GAC3D,KAAK,MAAM,mBAAmB,QAAQ,QAAQ,KAAK,UAAU;EAC/D;EACA,KAAK,MAAM,WAAW;EACtB,gBAAgB,OAAO,OAAO,KAAK,OAAO,QAAQ;CACpD;CACA,IAAI,WAAW;CACf,aAAa;EACX,IAAI,UAAU;EACd,WAAW;EACX,IAAI,EAAE,UAAU,GAAG,UAAU;CAC/B;AACF"}

package/dist/utils/dom/page-visibility.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 页面是否在前台：切到别的标签页、窗口最小化时为 false（document.visibilityState）。
+ * 计时、动画在后台时停下用它（useNow、Toaster 的自动关闭、3D 渲染循环）。
+ *
+ *   const visible = usePageVisible();
+ *   watch(visible, (shown) => shown && refresh());
+ */
+import { type Ref } from 'vue';
+/** 页面是否在前台（在 setup 或 effectScope 里调用）；没有 document 的环境（服务端）恒为 true */
+export declare function usePageVisible(): Readonly<Ref<boolean>>;

package/dist/utils/dom/page-visibility.js

@@ -0,0 +1,22 @@
+import { useEventListener } from "./event-listener.js";
+import { shallowRef } from "vue";
+//#region src/utils/dom/page-visibility.ts
+/**
+* 页面是否在前台：切到别的标签页、窗口最小化时为 false（document.visibilityState）。
+* 计时、动画在后台时停下用它（useNow、Toaster 的自动关闭、3D 渲染循环）。
+*
+*   const visible = usePageVisible();
+*   watch(visible, (shown) => shown && refresh());
+*/
+/** 页面是否在前台（在 setup 或 effectScope 里调用）；没有 document 的环境（服务端）恒为 true */
+function usePageVisible() {
+	if (typeof document === "undefined") return shallowRef(true);
+	const visible = shallowRef(document.visibilityState !== "hidden");
+	const update = () => visible.value = document.visibilityState !== "hidden";
+	useEventListener(document, "visibilitychange", update);
+	return visible;
+}
+//#endregion
+export { usePageVisible };
+
+//# sourceMappingURL=page-visibility.js.map

package/dist/utils/dom/page-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-visibility.js","names":[],"sources":["../../../src/utils/dom/page-visibility.ts"],"sourcesContent":["/**\n * 页面是否在前台：切到别的标签页、窗口最小化时为 false（document.visibilityState）。\n * 计时、动画在后台时停下用它（useNow、Toaster 的自动关闭、3D 渲染循环）。\n *\n *   const visible = usePageVisible();\n *   watch(visible, (shown) => shown && refresh());\n */\nimport { shallowRef, type Ref } from 'vue';\nimport { useEventListener } from './event-listener';\n\n/** 页面是否在前台（在 setup 或 effectScope 里调用）；没有 document 的环境（服务端）恒为 true */\nexport function usePageVisible(): Readonly<Ref<boolean>> {\n  if (typeof document === 'undefined') return shallowRef(true);\n  const visible = shallowRef(document.visibilityState !== 'hidden');\n  const update = () => (visible.value = document.visibilityState !== 'hidden');\n  useEventListener(document, 'visibilitychange', update);\n  return visible;\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,iBAAyC;CACvD,IAAI,OAAO,aAAa,aAAa,OAAO,WAAW,IAAI;CAC3D,MAAM,UAAU,WAAW,SAAS,oBAAoB,QAAQ;CAChE,MAAM,eAAgB,QAAQ,QAAQ,SAAS,oBAAoB;CACnE,iBAAiB,UAAU,oBAAoB,MAAM;CACrD,OAAO;AACT"}

package/dist/utils/dom/pan-zoom.d.ts

@@ -0,0 +1,109 @@
+/** 平移与缩放的状态：内容先缩放、再平移（transform-origin 为左上角） */
+export interface PanZoomState {
+    /** 横向平移（px） */
+    x: number;
+    /** 纵向平移（px） */
+    y: number;
+    /** 缩放比例，1 为原大 */
+    scale: number;
+}
+/** 滚轮的作用 */
+export interface PanZoomWheelModes {
+    /** 滚轮缩放（图片预览） */
+    zoom: unknown;
+    /** 滚轮平移，按住 Ctrl / ⌘ 缩放（画布、流程图） */
+    pan: unknown;
+}
+/** usePanZoom 的选项 */
+export interface PanZoomOptions {
+    /** 接收拖动、滚轮的视口（元素或组件实例） */
+    viewport: () => unknown;
+    /** 最小缩放，默认 0.25 */
+    min?: number;
+    /** 最大缩放，默认 4 */
+    max?: number;
+    /** 每一档缩放的倍数（按钮、键盘、双击），默认 1.25 */
+    step?: number;
+    /** 初始状态，默认 { x: 0, y: 0, scale: 1 }；reset 回到它 */
+    initial?: () => PanZoomState;
+    /** 滚轮的作用，默认 zoom */
+    wheel?: keyof PanZoomWheelModes;
+    /** 内容的大小（缩放前）：给了就限制平移，不露出内容外的空白 */
+    bounds?: () => {
+        width: number;
+        height: number;
+    } | undefined;
+    /** 不可用：不响应拖动、滚轮与键盘 */
+    disabled?: () => boolean;
+    /** 只处理返回 true 的事件（按下、滚轮、双击、按键）；默认都处理。返回 false 的事件原样留给页面与别的处理函数 */
+    filter?: (event: PointerEvent | WheelEvent | MouseEvent | KeyboardEvent) => boolean;
+}
+/** fit 要放进视口的内容：缩放前的位置与大小，x、y 不写时从 0 开始 */
+export interface PanZoomContent {
+    /** 内容左边的横坐标，默认 0 */
+    x?: number;
+    /** 内容上边的纵坐标，默认 0 */
+    y?: number;
+    /** 宽 */
+    width: number;
+    /** 高 */
+    height: number;
+}
+/** usePanZoom 的返回值 */
+export interface PanZoom {
+    /** 横向平移（px） */
+    readonly x: number;
+    /** 纵向平移（px） */
+    readonly y: number;
+    /** 缩放比例 */
+    readonly scale: number;
+    /** 正在拖动或捏合：这期间内容不要加 transition */
+    readonly interacting: boolean;
+    /** 内容的 transform：`translate(xpx, ypx) scale(s)`，配 transform-origin: 0 0 */
+    readonly transform: string;
+    /** 放大一档；origin 是缩放中心（视口内坐标），默认视口中心 */
+    zoomIn(origin?: Point): void;
+    /** 缩小一档 */
+    zoomOut(origin?: Point): void;
+    /** 缩放到 scale（限制在 min–max） */
+    zoomTo(scale: number, origin?: Point): void;
+    /** 平移到 x、y */
+    panTo(x: number, y: number): void;
+    /** 回到初始状态 */
+    reset(): void;
+    /** 把内容整个放进视口并居中（不超过原大），四周留出 padding（px），返回用到的缩放 */
+    fit(content: PanZoomContent, padding?: number): number;
+    /** 视口的属性：展开到视口元素上 */
+    readonly viewportProps: Record<string, unknown>;
+}
+/** 视口内的一点（相对视口左上角，px） */
+export interface Point {
+    /** 横坐标 */
+    x: number;
+    /** 纵坐标 */
+    y: number;
+}
+/** 以 origin 为中心缩放到 next：origin 下的内容点缩放前后不动 */
+export declare function zoomAround(state: PanZoomState, next: number, origin: Point): PanZoomState;
+/** 平移的限制：内容比视口大时边缘不进到视口里，比视口小时居中 */
+export declare function clampPan(state: PanZoomState, viewport: {
+    width: number;
+    height: number;
+}, content: {
+    width: number;
+    height: number;
+}): PanZoomState;
+/**
+ * 把内容整个放进视口并居中的状态：缩放取放得下的最大值（不超过原大，再限制在 min–max），四周留出 padding（px）。
+ * 视口或内容的宽高为 0 时缩放按 1 算
+ */
+export declare function fitTransform(viewport: {
+    width: number;
+    height: number;
+}, { x, y, width, height }: PanZoomContent, { padding, min, max }?: {
+    padding?: number;
+    min?: number;
+    max?: number;
+}): PanZoomState;
+/** 平移与缩放的状态与事件（在 setup 里调用） */
+export declare function usePanZoom(options: PanZoomOptions): PanZoom;

package/dist/utils/dom/pan-zoom.js

@@ -0,0 +1,257 @@
+import { clamp } from "../data/number.js";
+import { startMove } from "./move.js";
+import { useEventListener } from "./event-listener.js";
+import { shallowRef } from "vue";
+//#region src/utils/dom/pan-zoom.ts
+/**
+* 平移与缩放：拖动平移，滚轮、触控板双指、触屏捏合以指针为中心缩放，键盘也能操作。
+* 图片预览（Lightbox）、流程图、大图表这类“在视口里看一块更大的内容”的场景用它。
+* 参考 panzoom、React Flow 的视口：状态只有平移 x、y 与缩放 scale，内容自己写 transform。
+*
+*   const view = usePanZoom({ viewport: () => box, min: 0.5, max: 4 });
+*   <div ref={box} tabindex="0" {...view.viewportProps}>
+*     <img style={{ transform: view.transform, transformOrigin: '0 0' }} />
+*   </div>
+*   <IconButton onClick={() => view.zoomIn()} … />
+*
+* - 指针：按下拖动平移（建在 startMove 上，拖过之后的 click 不算点击）；双击放大一档，已放大时回到初始；
+*   两个触点捏合缩放（中心是两指的中点）。
+* - 滚轮：wheel 为 'zoom'（默认，图片预览）时滚轮缩放；为 'pan' 时滚轮平移、按住 Ctrl / ⌘ 才缩放（流程图、画布）。
+*   触控板的双指缩放在浏览器里就是按着 Ctrl 的滚轮，两种模式下都是缩放。
+* - 键盘（视口要能聚焦）：+ / − 缩放，0 回到初始，方向键平移。
+* - bounds 给出内容的大小时限制平移：内容比视口大就不露出边外的空白，比视口小就居中。
+* - filter 挑出要处理的事件（同 d3-zoom 的 filter）：画布里按在节点上、按着 Shift 框选时返回 false，平移让给它们。
+* 视口要设 touch-action: none（viewportProps 里已带），否则触屏拖动会被当成页面滚动。
+*/
+/** 以 origin 为中心缩放到 next：origin 下的内容点缩放前后不动 */
+function zoomAround(state, next, origin) {
+	const ratio = next / state.scale;
+	return {
+		x: origin.x - (origin.x - state.x) * ratio,
+		y: origin.y - (origin.y - state.y) * ratio,
+		scale: next
+	};
+}
+/** 平移的限制：内容比视口大时边缘不进到视口里，比视口小时居中 */
+function clampPan(state, viewport, content) {
+	const axis = (offset, view, size) => size <= view ? (view - size) / 2 : clamp(offset, view - size, 0);
+	return {
+		x: axis(state.x, viewport.width, content.width * state.scale),
+		y: axis(state.y, viewport.height, content.height * state.scale),
+		scale: state.scale
+	};
+}
+/**
+* 把内容整个放进视口并居中的状态：缩放取放得下的最大值（不超过原大，再限制在 min–max），四周留出 padding（px）。
+* 视口或内容的宽高为 0 时缩放按 1 算
+*/
+function fitTransform(viewport, { x = 0, y = 0, width, height }, { padding = 0, min = 0, max = Infinity } = {}) {
+	const fits = (room, size) => size > 0 && room > 0 ? room / size : 1;
+	const scale = clamp(Math.min(fits(viewport.width - padding * 2, width), fits(viewport.height - padding * 2, height), 1), min, max);
+	return {
+		x: (viewport.width - width * scale) / 2 - x * scale,
+		y: (viewport.height - height * scale) / 2 - y * scale,
+		scale
+	};
+}
+/** 键盘方向键每次平移多少 px */
+var KEY_PAN = 40;
+/** 平移与缩放的状态与事件（在 setup 里调用） */
+function usePanZoom(options) {
+	const min = options.min ?? .25;
+	const max = options.max ?? 4;
+	const step = options.step ?? 1.25;
+	const initial = () => options.initial?.() ?? {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	const state = shallowRef(initial());
+	const interacting = shallowRef(false);
+	const pointers = /* @__PURE__ */ new Map();
+	let pinch;
+	const viewport = () => {
+		const value = options.viewport();
+		return value instanceof HTMLElement ? value : null;
+	};
+	const viewportSize = () => {
+		const element = viewport();
+		return {
+			width: element?.clientWidth ?? 0,
+			height: element?.clientHeight ?? 0
+		};
+	};
+	const center = () => {
+		const { width, height } = viewportSize();
+		return {
+			x: width / 2,
+			y: height / 2
+		};
+	};
+	/** 事件的位置换成视口内坐标 */
+	const local = (event) => {
+		const rect = viewport()?.getBoundingClientRect();
+		return {
+			x: event.clientX - (rect?.left ?? 0),
+			y: event.clientY - (rect?.top ?? 0)
+		};
+	};
+	function apply(next) {
+		const content = options.bounds?.();
+		state.value = content ? clampPan(next, viewportSize(), content) : next;
+	}
+	function zoomTo(scale, origin = center()) {
+		const next = clamp(scale, min, max);
+		if (next === state.value.scale) return;
+		apply(zoomAround(state.value, next, origin));
+	}
+	/** 这个事件要不要处理：不可用时都不处理，filter 挑掉的也不处理 */
+	const handles = (event) => !options.disabled?.() && (options.filter?.(event) ?? true);
+	function onWheel(event) {
+		if (!handles(event)) return;
+		const zoom = options.wheel !== "pan" || event.ctrlKey || event.metaKey;
+		event.preventDefault();
+		if (!zoom) {
+			apply({
+				...state.value,
+				x: state.value.x - event.deltaX,
+				y: state.value.y - event.deltaY
+			});
+			return;
+		}
+		const factor = Math.exp(-event.deltaY * (event.deltaMode === 1 ? .05 : .002));
+		zoomTo(state.value.scale * factor, local(event));
+	}
+	useEventListener(viewport, "wheel", onWheel, { passive: false });
+	function onPointerdown(event) {
+		if (event.button !== 0 || !handles(event)) return;
+		pointers.set(event.pointerId, local(event));
+		if (pointers.size === 2) {
+			const [a, b] = [...pointers.values()];
+			pinch = {
+				distance: Math.hypot(a.x - b.x, a.y - b.y),
+				state: state.value
+			};
+			return;
+		}
+		const start = state.value;
+		startMove(event, {
+			threshold: 3,
+			onMove: (point, move) => {
+				pointers.set(move.pointerId, local(move));
+				interacting.value = true;
+				if (pinch) return;
+				apply({
+					...start,
+					x: start.x + point.deltaX,
+					y: start.y + point.deltaY
+				});
+			},
+			onEnd: () => {
+				pointers.clear();
+				pinch = void 0;
+				interacting.value = false;
+			}
+		});
+	}
+	function onPointermove(event) {
+		if (!pinch || !pointers.has(event.pointerId)) return;
+		pointers.set(event.pointerId, local(event));
+		const [a, b] = [...pointers.values()];
+		const distance = Math.hypot(a.x - b.x, a.y - b.y);
+		const scale = clamp(pinch.state.scale * distance / pinch.distance, min, max);
+		apply(zoomAround(pinch.state, scale, {
+			x: (a.x + b.x) / 2,
+			y: (a.y + b.y) / 2
+		}));
+	}
+	function onPointerup(event) {
+		pointers.delete(event.pointerId);
+		if (pointers.size < 2) pinch = void 0;
+	}
+	function onDblclick(event) {
+		if (!handles(event)) return;
+		if (state.value.scale > initial().scale) apply(initial());
+		else zoomTo(state.value.scale * step * step, local(event));
+	}
+	function onKeydown(event) {
+		if (event.altKey || event.ctrlKey || event.metaKey || !handles(event)) return;
+		const { x, y } = state.value;
+		const action = {
+			"+": () => zoomTo(state.value.scale * step),
+			"=": () => zoomTo(state.value.scale * step),
+			"-": () => zoomTo(state.value.scale / step),
+			"0": () => apply(initial()),
+			ArrowLeft: () => apply({
+				...state.value,
+				x: x + KEY_PAN
+			}),
+			ArrowRight: () => apply({
+				...state.value,
+				x: x - KEY_PAN
+			}),
+			ArrowUp: () => apply({
+				...state.value,
+				y: y + KEY_PAN
+			}),
+			ArrowDown: () => apply({
+				...state.value,
+				y: y - KEY_PAN
+			})
+		}[event.key];
+		if (!action) return;
+		event.preventDefault();
+		action();
+	}
+	return {
+		get x() {
+			return state.value.x;
+		},
+		get y() {
+			return state.value.y;
+		},
+		get scale() {
+			return state.value.scale;
+		},
+		get interacting() {
+			return interacting.value;
+		},
+		get transform() {
+			const { x, y, scale } = state.value;
+			return `translate(${x}px, ${y}px) scale(${scale})`;
+		},
+		zoomIn: (origin) => zoomTo(state.value.scale * step, origin),
+		zoomOut: (origin) => zoomTo(state.value.scale / step, origin),
+		zoomTo,
+		panTo: (x, y) => apply({
+			...state.value,
+			x,
+			y
+		}),
+		reset: () => apply(initial()),
+		fit(content, padding = 0) {
+			state.value = fitTransform(viewportSize(), content, {
+				padding,
+				min,
+				max
+			});
+			return state.value.scale;
+		},
+		viewportProps: {
+			style: {
+				touchAction: "none",
+				overflow: "hidden"
+			},
+			onPointerdown,
+			onPointermove,
+			onPointerup,
+			onPointercancel: onPointerup,
+			onDblclick,
+			onKeydown
+		}
+	};
+}
+//#endregion
+export { clampPan, fitTransform, usePanZoom, zoomAround };
+
+//# sourceMappingURL=pan-zoom.js.map

package/dist/utils/dom/pan-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pan-zoom.js","names":[],"sources":["../../../src/utils/dom/pan-zoom.ts"],"sourcesContent":["/**\n * 平移与缩放：拖动平移，滚轮、触控板双指、触屏捏合以指针为中心缩放，键盘也能操作。\n * 图片预览（Lightbox）、流程图、大图表这类“在视口里看一块更大的内容”的场景用它。\n * 参考 panzoom、React Flow 的视口：状态只有平移 x、y 与缩放 scale，内容自己写 transform。\n *\n *   const view = usePanZoom({ viewport: () => box, min: 0.5, max: 4 });\n *   <div ref={box} tabindex=\"0\" {...view.viewportProps}>\n *     <img style={{ transform: view.transform, transformOrigin: '0 0' }} />\n *   </div>\n *   <IconButton onClick={() => view.zoomIn()} … />\n *\n * - 指针：按下拖动平移（建在 startMove 上，拖过之后的 click 不算点击）；双击放大一档，已放大时回到初始；\n *   两个触点捏合缩放（中心是两指的中点）。\n * - 滚轮：wheel 为 'zoom'（默认，图片预览）时滚轮缩放；为 'pan' 时滚轮平移、按住 Ctrl / ⌘ 才缩放（流程图、画布）。\n *   触控板的双指缩放在浏览器里就是按着 Ctrl 的滚轮，两种模式下都是缩放。\n * - 键盘（视口要能聚焦）：+ / − 缩放，0 回到初始，方向键平移。\n * - bounds 给出内容的大小时限制平移：内容比视口大就不露出边外的空白，比视口小就居中。\n * - filter 挑出要处理的事件（同 d3-zoom 的 filter）：画布里按在节点上、按着 Shift 框选时返回 false，平移让给它们。\n * 视口要设 touch-action: none（viewportProps 里已带），否则触屏拖动会被当成页面滚动。\n */\nimport { shallowRef } from 'vue';\nimport { clamp } from '../data/number';\nimport { useEventListener } from './event-listener';\nimport { startMove } from './move';\n\n/** 平移与缩放的状态：内容先缩放、再平移（transform-origin 为左上角） */\nexport interface PanZoomState {\n  /** 横向平移（px） */\n  x: number;\n  /** 纵向平移（px） */\n  y: number;\n  /** 缩放比例，1 为原大 */\n  scale: number;\n}\n\n/** 滚轮的作用 */\nexport interface PanZoomWheelModes {\n  /** 滚轮缩放（图片预览） */\n  zoom: unknown;\n  /** 滚轮平移，按住 Ctrl / ⌘ 缩放（画布、流程图） */\n  pan: unknown;\n}\n\n/** usePanZoom 的选项 */\nexport interface PanZoomOptions {\n  /** 接收拖动、滚轮的视口（元素或组件实例） */\n  viewport: () => unknown;\n  /** 最小缩放，默认 0.25 */\n  min?: number;\n  /** 最大缩放，默认 4 */\n  max?: number;\n  /** 每一档缩放的倍数（按钮、键盘、双击），默认 1.25 */\n  step?: number;\n  /** 初始状态，默认 { x: 0, y: 0, scale: 1 }；reset 回到它 */\n  initial?: () => PanZoomState;\n  /** 滚轮的作用，默认 zoom */\n  wheel?: keyof PanZoomWheelModes;\n  /** 内容的大小（缩放前）：给了就限制平移，不露出内容外的空白 */\n  bounds?: () => { width: number; height: number } | undefined;\n  /** 不可用：不响应拖动、滚轮与键盘 */\n  disabled?: () => boolean;\n  /** 只处理返回 true 的事件（按下、滚轮、双击、按键）；默认都处理。返回 false 的事件原样留给页面与别的处理函数 */\n  filter?: (event: PointerEvent | WheelEvent | MouseEvent | KeyboardEvent) => boolean;\n}\n\n/** fit 要放进视口的内容：缩放前的位置与大小，x、y 不写时从 0 开始 */\nexport interface PanZoomContent {\n  /** 内容左边的横坐标，默认 0 */\n  x?: number;\n  /** 内容上边的纵坐标，默认 0 */\n  y?: number;\n  /** 宽 */\n  width: number;\n  /** 高 */\n  height: number;\n}\n\n/** usePanZoom 的返回值 */\nexport interface PanZoom {\n  /** 横向平移（px） */\n  readonly x: number;\n  /** 纵向平移（px） */\n  readonly y: number;\n  /** 缩放比例 */\n  readonly scale: number;\n  /** 正在拖动或捏合：这期间内容不要加 transition */\n  readonly interacting: boolean;\n  /** 内容的 transform：`translate(xpx, ypx) scale(s)`，配 transform-origin: 0 0 */\n  readonly transform: string;\n  /** 放大一档；origin 是缩放中心（视口内坐标），默认视口中心 */\n  zoomIn(origin?: Point): void;\n  /** 缩小一档 */\n  zoomOut(origin?: Point): void;\n  /** 缩放到 scale（限制在 min–max） */\n  zoomTo(scale: number, origin?: Point): void;\n  /** 平移到 x、y */\n  panTo(x: number, y: number): void;\n  /** 回到初始状态 */\n  reset(): void;\n  /** 把内容整个放进视口并居中（不超过原大），四周留出 padding（px），返回用到的缩放 */\n  fit(content: PanZoomContent, padding?: number): number;\n  /** 视口的属性：展开到视口元素上 */\n  readonly viewportProps: Record<string, unknown>;\n}\n\n/** 视口内的一点（相对视口左上角，px） */\nexport interface Point {\n  /** 横坐标 */\n  x: number;\n  /** 纵坐标 */\n  y: number;\n}\n\n/** 以 origin 为中心缩放到 next：origin 下的内容点缩放前后不动 */\nexport function zoomAround(state: PanZoomState, next: number, origin: Point): PanZoomState {\n  const ratio = next / state.scale;\n  return {\n    x: origin.x - (origin.x - state.x) * ratio,\n    y: origin.y - (origin.y - state.y) * ratio,\n    scale: next,\n  };\n}\n\n/** 平移的限制：内容比视口大时边缘不进到视口里，比视口小时居中 */\nexport function clampPan(\n  state: PanZoomState,\n  viewport: { width: number; height: number },\n  content: { width: number; height: number },\n): PanZoomState {\n  const axis = (offset: number, view: number, size: number) =>\n    size <= view ? (view - size) / 2 : clamp(offset, view - size, 0);\n  return {\n    x: axis(state.x, viewport.width, content.width * state.scale),\n    y: axis(state.y, viewport.height, content.height * state.scale),\n    scale: state.scale,\n  };\n}\n\n/**\n * 把内容整个放进视口并居中的状态：缩放取放得下的最大值（不超过原大，再限制在 min–max），四周留出 padding（px）。\n * 视口或内容的宽高为 0 时缩放按 1 算\n */\nexport function fitTransform(\n  viewport: { width: number; height: number },\n  { x = 0, y = 0, width, height }: PanZoomContent,\n  { padding = 0, min = 0, max = Infinity }: { padding?: number; min?: number; max?: number } = {},\n): PanZoomState {\n  const fits = (room: number, size: number) => (size > 0 && room > 0 ? room / size : 1);\n  const scale = clamp(\n    Math.min(\n      fits(viewport.width - padding * 2, width),\n      fits(viewport.height - padding * 2, height),\n      1,\n    ),\n    min,\n    max,\n  );\n  return {\n    x: (viewport.width - width * scale) / 2 - x * scale,\n    y: (viewport.height - height * scale) / 2 - y * scale,\n    scale,\n  };\n}\n\n/** 键盘方向键每次平移多少 px */\nconst KEY_PAN = 40;\n\n/** 平移与缩放的状态与事件（在 setup 里调用） */\nexport function usePanZoom(options: PanZoomOptions): PanZoom {\n  const min = options.min ?? 0.25;\n  const max = options.max ?? 4;\n  const step = options.step ?? 1.25;\n  const initial = () => options.initial?.() ?? { x: 0, y: 0, scale: 1 };\n  const state = shallowRef<PanZoomState>(initial());\n  const interacting = shallowRef(false);\n  // 按着的触点：两个时捏合\n  const pointers = new Map<number, Point>();\n  let pinch: { distance: number; state: PanZoomState } | undefined;\n\n  const viewport = () => {\n    const value = options.viewport();\n    return value instanceof HTMLElement ? value : null;\n  };\n  const viewportSize = () => {\n    const element = viewport();\n    return { width: element?.clientWidth ?? 0, height: element?.clientHeight ?? 0 };\n  };\n  const center = (): Point => {\n    const { width, height } = viewportSize();\n    return { x: width / 2, y: height / 2 };\n  };\n  /** 事件的位置换成视口内坐标 */\n  const local = (event: { clientX: number; clientY: number }): Point => {\n    const rect = viewport()?.getBoundingClientRect();\n    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };\n  };\n\n  function apply(next: PanZoomState) {\n    const content = options.bounds?.();\n    state.value = content ? clampPan(next, viewportSize(), content) : next;\n  }\n\n  function zoomTo(scale: number, origin: Point = center()) {\n    const next = clamp(scale, min, max);\n    if (next === state.value.scale) return;\n    apply(zoomAround(state.value, next, origin));\n  }\n\n  /** 这个事件要不要处理：不可用时都不处理，filter 挑掉的也不处理 */\n  const handles = (event: PointerEvent | WheelEvent | MouseEvent | KeyboardEvent) =>\n    !options.disabled?.() && (options.filter?.(event) ?? true);\n\n  function onWheel(event: WheelEvent) {\n    if (!handles(event)) return;\n    const zoom = options.wheel !== 'pan' || event.ctrlKey || event.metaKey;\n    event.preventDefault();\n    if (!zoom) {\n      apply({ ...state.value, x: state.value.x - event.deltaX, y: state.value.y - event.deltaY });\n      return;\n    }\n    // 触控板的捏合每次 delta 很小、鼠标滚轮一格约 100：按 delta 连续缩放，两种都顺手\n    const factor = Math.exp(-event.deltaY * (event.deltaMode === 1 ? 0.05 : 0.002));\n    zoomTo(state.value.scale * factor, local(event));\n  }\n  // 要能 preventDefault（不让页面跟着滚、不让浏览器整页缩放）：不能是 passive\n  useEventListener(viewport, 'wheel', onWheel, { passive: false });\n\n  function onPointerdown(event: PointerEvent) {\n    if (event.button !== 0 || !handles(event)) return;\n    pointers.set(event.pointerId, local(event));\n    if (pointers.size === 2) {\n      const [a, b] = [...pointers.values()] as [Point, Point];\n      pinch = { distance: Math.hypot(a.x - b.x, a.y - b.y), state: state.value };\n      return;\n    }\n    const start = state.value;\n    startMove(event, {\n      threshold: 3,\n      onMove: (point, move) => {\n        pointers.set(move.pointerId, local(move));\n        interacting.value = true;\n        if (pinch) return;\n        apply({ ...start, x: start.x + point.deltaX, y: start.y + point.deltaY });\n      },\n      onEnd: () => {\n        pointers.clear();\n        pinch = undefined;\n        interacting.value = false;\n      },\n    });\n  }\n\n  // 第二个触点的移动：捏合（第一个触点的移动由 startMove 收到）\n  function onPointermove(event: PointerEvent) {\n    if (!pinch || !pointers.has(event.pointerId)) return;\n    pointers.set(event.pointerId, local(event));\n    const [a, b] = [...pointers.values()] as [Point, Point];\n    const distance = Math.hypot(a.x - b.x, a.y - b.y);\n    const scale = clamp((pinch.state.scale * distance) / pinch.distance, min, max);\n    apply(zoomAround(pinch.state, scale, { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }));\n  }\n\n  function onPointerup(event: PointerEvent) {\n    pointers.delete(event.pointerId);\n    if (pointers.size < 2) pinch = undefined;\n  }\n\n  function onDblclick(event: MouseEvent) {\n    if (!handles(event)) return;\n    if (state.value.scale > initial().scale) apply(initial());\n    else zoomTo(state.value.scale * step * step, local(event));\n  }\n\n  function onKeydown(event: KeyboardEvent) {\n    if (event.altKey || event.ctrlKey || event.metaKey || !handles(event)) return;\n    const { x, y } = state.value;\n    const actions: Record<string, () => void> = {\n      '+': () => zoomTo(state.value.scale * step),\n      '=': () => zoomTo(state.value.scale * step),\n      '-': () => zoomTo(state.value.scale / step),\n      '0': () => apply(initial()),\n      ArrowLeft: () => apply({ ...state.value, x: x + KEY_PAN }),\n      ArrowRight: () => apply({ ...state.value, x: x - KEY_PAN }),\n      ArrowUp: () => apply({ ...state.value, y: y + KEY_PAN }),\n      ArrowDown: () => apply({ ...state.value, y: y - KEY_PAN }),\n    };\n    const action = actions[event.key];\n    if (!action) return;\n    event.preventDefault();\n    action();\n  }\n\n  const viewportProps = {\n    style: { touchAction: 'none', overflow: 'hidden' },\n    onPointerdown,\n    onPointermove,\n    onPointerup,\n    onPointercancel: onPointerup,\n    onDblclick,\n    onKeydown,\n  };\n\n  return {\n    get x() {\n      return state.value.x;\n    },\n    get y() {\n      return state.value.y;\n    },\n    get scale() {\n      return state.value.scale;\n    },\n    get interacting() {\n      return interacting.value;\n    },\n    get transform() {\n      const { x, y, scale } = state.value;\n      return `translate(${x}px, ${y}px) scale(${scale})`;\n    },\n    zoomIn: (origin) => zoomTo(state.value.scale * step, origin),\n    zoomOut: (origin) => zoomTo(state.value.scale / step, origin),\n    zoomTo,\n    panTo: (x, y) => apply({ ...state.value, x, y }),\n    reset: () => apply(initial()),\n    fit(content, padding = 0) {\n      state.value = fitTransform(viewportSize(), content, { padding, min, max });\n      return state.value.scale;\n    },\n    viewportProps,\n  };\n}\n"],"mappings":"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"}

package/dist/utils/dom/rasterize.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SVG 文字画成 PNG：图表、画布的“导出图片”共用。按 scale 倍的分辨率画进 canvas，先铺底色（SVG 本身多半是透明的）。
+ *
+ *   const blob = await rasterizeSvg(svgText, { width: 640, height: 360 }, { background: backgroundOf(element) });
+ *   downloadFile('流程图.png', blob, 'image/png');
+ *
+ * SVG 里引用的外部资源（图片、网页字体）不会被画出来：浏览器把 SVG 当成图片时不加载它们，导出前要内联或接受回退字体。
+ */
+/** 画成 PNG：size 是 SVG 的显示大小（px），scale 默认 2，background 不写时透明 */
+export declare function rasterizeSvg(svg: string, size: {
+    width: number;
+    height: number;
+}, { scale, background }?: {
+    scale?: number;
+    background?: string;
+}): Promise<Blob>;
+/** 往外找第一个不透明的背景色（导出图片的底色）；都没有时白色 */
+export declare function backgroundOf(element: Element): string;

package/dist/utils/dom/rasterize.js

@@ -0,0 +1,41 @@
+//#region src/utils/dom/rasterize.ts
+/**
+* SVG 文字画成 PNG：图表、画布的“导出图片”共用。按 scale 倍的分辨率画进 canvas，先铺底色（SVG 本身多半是透明的）。
+*
+*   const blob = await rasterizeSvg(svgText, { width: 640, height: 360 }, { background: backgroundOf(element) });
+*   downloadFile('流程图.png', blob, 'image/png');
+*
+* SVG 里引用的外部资源（图片、网页字体）不会被画出来：浏览器把 SVG 当成图片时不加载它们，导出前要内联或接受回退字体。
+*/
+/** 画成 PNG：size 是 SVG 的显示大小（px），scale 默认 2，background 不写时透明 */
+async function rasterizeSvg(svg, size, { scale = 2, background } = {}) {
+	const image = new Image();
+	image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+	await image.decode();
+	const canvas = Object.assign(document.createElement("canvas"), {
+		width: Math.ceil(size.width * scale),
+		height: Math.ceil(size.height * scale)
+	});
+	const context = canvas.getContext("2d");
+	if (background) {
+		context.fillStyle = background;
+		context.fillRect(0, 0, canvas.width, canvas.height);
+	}
+	context.scale(scale, scale);
+	context.drawImage(image, 0, 0, size.width, size.height);
+	const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+	if (!blob) throw new Error("rasterizeSvg: 画布没能生成 PNG（尺寸过大或 SVG 引用了跨域资源）");
+	return blob;
+}
+/** 往外找第一个不透明的背景色（导出图片的底色）；都没有时白色 */
+function backgroundOf(element) {
+	for (let current = element; current; current = current.parentElement) {
+		const color = getComputedStyle(current).backgroundColor;
+		if (color && color !== "transparent" && !/rgba\(.*,\s*0\)$/.test(color)) return color;
+	}
+	return "#fff";
+}
+//#endregion
+export { backgroundOf, rasterizeSvg };
+
+//# sourceMappingURL=rasterize.js.map

package/dist/utils/dom/rasterize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rasterize.js","names":[],"sources":["../../../src/utils/dom/rasterize.ts"],"sourcesContent":["/**\n * SVG 文字画成 PNG：图表、画布的“导出图片”共用。按 scale 倍的分辨率画进 canvas，先铺底色（SVG 本身多半是透明的）。\n *\n *   const blob = await rasterizeSvg(svgText, { width: 640, height: 360 }, { background: backgroundOf(element) });\n *   downloadFile('流程图.png', blob, 'image/png');\n *\n * SVG 里引用的外部资源（图片、网页字体）不会被画出来：浏览器把 SVG 当成图片时不加载它们，导出前要内联或接受回退字体。\n */\n\n/** 画成 PNG：size 是 SVG 的显示大小（px），scale 默认 2，background 不写时透明 */\nexport async function rasterizeSvg(\n  svg: string,\n  size: { width: number; height: number },\n  { scale = 2, background }: { scale?: number; background?: string } = {},\n): Promise<Blob> {\n  const image = new Image();\n  // 用 data: 而不是 blob: 地址：Chrome 把 blob: 载入的、带 foreignObject 的 SVG 当成跨域，画过的 canvas 不能导出\n  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;\n  await image.decode();\n  const canvas = Object.assign(document.createElement('canvas'), {\n    width: Math.ceil(size.width * scale),\n    height: Math.ceil(size.height * scale),\n  });\n  const context = canvas.getContext('2d')!;\n  if (background) {\n    context.fillStyle = background;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n  }\n  context.scale(scale, scale);\n  context.drawImage(image, 0, 0, size.width, size.height);\n  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));\n  if (!blob) throw new Error('rasterizeSvg: 画布没能生成 PNG（尺寸过大或 SVG 引用了跨域资源）');\n  return blob;\n}\n\n/** 往外找第一个不透明的背景色（导出图片的底色）；都没有时白色 */\nexport function backgroundOf(element: Element): string {\n  for (let current: Element | null = element; current; current = current.parentElement) {\n    const color = getComputedStyle(current).backgroundColor;\n    if (color && color !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(color)) return color;\n  }\n  return '#fff';\n}\n"],"mappings":";;;;;;;;;;AAUA,eAAsB,aACpB,KACA,MACA,EAAE,QAAQ,GAAG,eAAwD,CAAC,GACvD;CACf,MAAM,QAAQ,IAAI,MAAM;CAExB,MAAM,MAAM,oCAAoC,mBAAmB,GAAG;CACtE,MAAM,MAAM,OAAO;CACnB,MAAM,SAAS,OAAO,OAAO,SAAS,cAAc,QAAQ,GAAG;EAC7D,OAAO,KAAK,KAAK,KAAK,QAAQ,KAAK;EACnC,QAAQ,KAAK,KAAK,KAAK,SAAS,KAAK;CACvC,CAAC;CACD,MAAM,UAAU,OAAO,WAAW,IAAI;CACtC,IAAI,YAAY;EACd,QAAQ,YAAY;EACpB,QAAQ,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;CACpD;CACA,QAAQ,MAAM,OAAO,KAAK;CAC1B,QAAQ,UAAU,OAAO,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;CACtD,MAAM,OAAO,MAAM,IAAI,SAAsB,YAAY,OAAO,OAAO,SAAS,WAAW,CAAC;CAC5F,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,6CAA6C;CACxE,OAAO;AACT;;AAGA,SAAgB,aAAa,SAA0B;CACrD,KAAK,IAAI,UAA0B,SAAS,SAAS,UAAU,QAAQ,eAAe;EACpF,MAAM,QAAQ,iBAAiB,OAAO,CAAC,CAAC;EACxC,IAAI,SAAS,UAAU,iBAAiB,CAAC,mBAAmB,KAAK,KAAK,GAAG,OAAO;CAClF;CACA,OAAO;AACT"}

package/dist/utils/dom/resize.d.ts

@@ -0,0 +1,4 @@
+type Target = Element | null | undefined;
+/** 观察一个或几个元素的大小；targets 在渲染后读取，读到 null 的跳过 */
+export declare function useResizeObserver(targets: () => Target | readonly Target[], onResize: (entries: ResizeObserverEntry[]) => void): void;
+export {};