@hankchen/canvas-editor-vue 0.7.0 → 0.8.0

package/dist/{canvas-D3fFnBqG.js → canvas-DuvO27sj.js}

@@ -5,7 +5,7 @@ import { c as m, o as h, t as g } from "./ExpressionPathPicker-DchGsK70.js";
 import { a as _, d as v, i as y, n as b, p as x, r as S, t as C, u as w } from "./useTransientFeedback-BN_O7V2w.js";
 import { c as T, f as E, i as D, l as O, m as k, n as ee, o as A, p as j, t as M } from "./uploadFile-mXJVPEzm.js";
 import { n as N, t as P } from "./useViewport-D9Ipevzs.js";
-import { Fragment as F, computed as I, createBlock as L, createCommentVNode as R, createElementBlock as z, createElementVNode as B, createVNode as V, defineComponent as H, mergeProps as te, nextTick as ne, normalizeClass as U, normalizeStyle as W, onBeforeUnmount as re, onMounted as G, onScopeDispose as K, openBlock as q, ref as J, renderList as Y, shallowRef as X, toDisplayString as Z, unref as Q, vModelText as ie, vShow as ae, watch as $, withDirectives as oe, withModifiers as se } from "vue";
+import { Fragment as F, computed as I, createBlock as L, createCommentVNode as R, createElementBlock as z, createElementVNode as B, createVNode as V, defineComponent as H, mergeProps as te, nextTick as ne, normalizeClass as U, normalizeStyle as W, onBeforeUnmount as re, onMounted as ie, onScopeDispose as G, openBlock as K, ref as q, renderList as J, shallowRef as Y, toDisplayString as X, unref as Z, vModelText as ae, vShow as oe, watch as Q, withDirectives as se, withModifiers as $ } from "vue";
 var ce = e({
 	name: "arrow-down-left",
 	size: 24,
@@ -336,13 +336,13 @@ var ke = ["aria-disabled"], Ae = {
 			let t = o.value;
 			t && (e.startsWith("corner-") ? a.editor.alignToCanvas(t, e, { margin: 40 }) : a.editor.alignToCanvas(t, e));
 		}
-		return (e, t) => (q(), z("div", {
+		return (e, t) => (K(), z("div", {
 			class: U(["cn-align-float", { "cn-align-float--disabled": !c.value }]),
 			role: "toolbar",
 			"aria-label": "对齐画布",
 			"data-align-float": "",
 			"aria-disabled": c.value ? void 0 : "true"
-		}, [(q(), z(F, null, Y(d, (e, t) => (q(), z(F, { key: t }, [t > 0 ? (q(), z("span", Ae)) : R("", !0), B("span", je, [(q(!0), z(F, null, Y(e.keys, (e) => (q(), z("button", te({
+		}, [(K(), z(F, null, J(d, (e, t) => (K(), z(F, { key: t }, [t > 0 ? (K(), z("span", Ae)) : R("", !0), B("span", je, [(K(!0), z(F, null, J(e.keys, (e) => (K(), z("button", te({
 			key: e.mode,
 			type: "button",
 			class: "cn-align-float__key",
@@ -362,7 +362,7 @@ var ke = ["aria-disabled"], Ae = {
 	__name: "ContextMenu",
 	props: { editor: {} },
 	setup(e, { expose: t }) {
-		let n = e, r = J(null), i = J(!1), a = J({
+		let n = e, r = q(null), i = q(!1), a = q({
 			x: 0,
 			y: 0
 		}), o = w(), s = `先 ${v("copyStyle", o)} 复制样式`, c = `图层已锁定（${v("toggleLayerLock", o)} 解锁后可删除）`, l = N(n.editor), u = I(() => l.value !== null && f(l.value)), d = I(() => l.value !== null && n.editor.canCopySelection), m = I(() => (i.value, l.value !== null && n.editor.canCopyStyle)), b = I(() => (i.value, l.value !== null && n.editor.canPasteStyle)), x = I(() => {
@@ -381,23 +381,38 @@ var ke = ["aria-disabled"], Ae = {
 			if (!e || e.type !== "TableLayer" || e.template !== null) return !1;
 			let t = e.rows[e.rows.length - 1];
 			return t !== void 0 && t.cells.length > 0;
-		}), k = _(n.editor), ee = I(() => h(k.value)), A = I(() => {
+		}), k = I(() => {
+			i.value;
+			let e = l.value;
+			return e === null || S.value?.type !== "ImageLayer" ? null : n.editor.baseImageConversionBlock(e);
+		}), ee = I(() => {
+			switch (k.value) {
+				case "not-head-root": return "仅数组头的垫底图片图层可转换";
+				case "not-image": return "仅图片图层可转换";
+				case "not-covering": return "仅覆盖整个画布的垫底图片图层可转换";
+				case "hidden": return "隐藏图层不可转换——先恢复显示再转换";
+				case "expression-marked": return "表达式驱动的底图不转换——背景是静态声明，标记保留在图层上";
+				case "no-image-src": return "该图层无图片引用——纯色底请在画布属性面板设置背景色";
+				case "locked": return "图层已锁定——解锁后可转换";
+				default: return;
+			}
+		}), A = _(n.editor), j = I(() => h(A.value)), M = I(() => {
 			let e = S.value;
 			return !e || e.type !== "TableLayer" ? "" : `模板取自末行，其余 ${Math.max(e.rows.length - 1, 0)} 行将移除（可撤销）`;
-		}), j = I(() => {
-			if (k.value === null) return y;
-			if (O.value) return A.value;
+		}), P = I(() => {
+			if (A.value === null) return y;
+			if (O.value) return M.value;
 			let e = S.value;
 			return e !== null && e.type === "TableLayer" && e.rows.length === 0 ? "空表无可转换行" : "末行为空——先为末行加格";
-		}), M = J(!1), P = J("");
-		function L() {
-			M.value = !0, P.value = "";
+		}), L = q(!1), H = q("");
+		function te() {
+			L.value = !0, H.value = "";
 		}
-		function H() {
+		function re() {
 			let e = C();
-			e && P.value !== "" && (n.editor.convertTableToTemplate(e, P.value), G());
+			e && H.value !== "" && (n.editor.convertTableToTemplate(e, H.value), Y());
 		}
-		let te = I(() => [
+		let ie = I(() => [
 			{
 				key: "visibility",
 				label: x.value ? "隐藏" : "显示",
@@ -463,6 +478,13 @@ var ke = ["aria-disabled"], Ae = {
 				title: u.value ? void 0 : "置顶/置底仅对根图层生效",
 				run: () => n.editor.sendToBack()
 			},
+			...S.value?.type === "ImageLayer" ? [{
+				key: "to-background",
+				label: "转为画布背景",
+				enabled: k.value === null,
+				title: ee.value,
+				run: () => n.editor.convertSelectionToBackground()
+			}] : [],
 			...T.value ? [{
 				key: "to-rows",
 				label: "转回普通表",
@@ -475,10 +497,10 @@ var ke = ["aria-disabled"], Ae = {
 			}] : S.value?.type === "TableLayer" ? [{
 				key: "to-template",
 				label: "转为模板表…",
-				enabled: k.value !== null && O.value,
-				title: j.value,
+				enabled: A.value !== null && O.value,
+				title: P.value,
 				keepsOpen: !0,
-				run: () => L()
+				run: () => te()
 			}] : [],
 			{
 				key: "delete",
@@ -491,7 +513,7 @@ var ke = ["aria-disabled"], Ae = {
 				}
 			}
 		]);
-		async function re(e, t) {
+		async function G(e, t) {
 			a.value = {
 				x: e,
 				y: t
@@ -504,16 +526,16 @@ var ke = ["aria-disabled"], Ae = {
 				y: Math.max(2, Math.min(a.value.y, l))
 			};
 		}
-		function G() {
-			i.value = !1, M.value = !1, P.value = "";
+		function Y() {
+			i.value = !1, L.value = !1, H.value = "";
 		}
-		function K(e) {
-			e.run(), e.keepsOpen !== !0 && G();
+		function Z(e) {
+			e.run(), e.keepsOpen !== !0 && Y();
 		}
 		return t({
-			openAt: re,
-			close: G
-		}), (e, t) => i.value ? (q(), z("div", {
+			openAt: G,
+			close: Y
+		}), (e, t) => i.value ? (K(), z("div", {
 			key: 0,
 			ref_key: "rootRef",
 			ref: r,
@@ -524,50 +546,50 @@ var ke = ["aria-disabled"], Ae = {
 				left: `${a.value.x}px`,
 				top: `${a.value.y}px`
 			}),
-			onPointerdown: t[1] ||= se(() => {}, ["stop"]),
-			onContextmenu: t[2] ||= se(() => {}, ["prevent"])
-		}, [M.value ? (q(), z("div", Pe, [
-			B("p", Fe, Z(A.value), 1),
+			onPointerdown: t[1] ||= $(() => {}, ["stop"]),
+			onContextmenu: t[2] ||= $(() => {}, ["prevent"])
+		}, [L.value ? (K(), z("div", Pe, [
+			B("p", Fe, X(M.value), 1),
 			V(g, {
-				modelValue: P.value,
-				"onUpdate:modelValue": t[0] ||= (e) => P.value = e,
+				modelValue: H.value,
+				"onUpdate:modelValue": t[0] ||= (e) => H.value = e,
 				"data-convert-rows-path": "",
 				mode: "rowsPath",
-				source: ee.value,
+				source: j.value,
 				"aria-label": "取行路径",
 				placeholder: "未选择行路径"
 			}, null, 8, ["modelValue", "source"]),
 			B("div", Ie, [B("button", {
 				type: "button",
 				class: "cn-context-menu__item cn-context-menu__item--confirm",
-				disabled: P.value === "",
-				onClick: H
+				disabled: H.value === "",
+				onClick: re
 			}, " 确认转换 ", 8, Le), B("button", {
 				type: "button",
 				class: "cn-context-menu__item",
-				onClick: G
+				onClick: Y
 			}, "取消")])
-		])) : (q(!0), z(F, { key: 1 }, Y(te.value, (e) => (q(), z("button", {
+		])) : (K(!0), z(F, { key: 1 }, J(ie.value, (e) => (K(), z("button", {
 			key: e.key,
 			type: "button",
 			role: "menuitem",
 			class: U(["cn-context-menu__item", [`cn-context-menu__item--${e.key}`]]),
 			disabled: !e.enabled,
 			title: e.title,
-			onClick: (t) => K(e)
-		}, Z(e.label), 11, Re))), 128))], 36)) : R("", !0);
+			onClick: (t) => Z(e)
+		}, X(e.label), 11, Re))), 128))], 36)) : R("", !0);
 	}
-}), [["__scopeId", "data-v-77744e07"]]);
+}), [["__scopeId", "data-v-99fabe20"]]);
 //#endregion
 //#region src/canvas/useFindSession.ts
 function Be(e) {
-	let t = X(e.store.ui.find.open), n = X(e.store.ui.find.query), r = X(e.store.ui.find.replacement), i = X(e.listFindMatches()), a = X(e.findCursor), o = () => {
+	let t = Y(e.store.ui.find.open), n = Y(e.store.ui.find.query), r = Y(e.store.ui.find.replacement), i = Y(e.listFindMatches()), a = Y(e.findCursor), o = () => {
 		let o = e.store.ui.find;
 		t.value = o.open, n.value = o.query, r.value = o.replacement, i.value = e.listFindMatches(), a.value = e.findCursor;
 	}, s = e.subscribe((e) => {
 		(e.scope === "doc" || e.scope === "ui" && e.branch === "find") && o();
 	});
-	return K(s, !0), {
+	return G(s, !0), {
 		open: t,
 		query: n,
 		replacement: r,
@@ -588,7 +610,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 	__name: "FindBar",
 	props: { editor: {} },
 	setup(e, { expose: t }) {
-		let n = e, { open: r, query: i, replacement: a, matches: o, cursor: s } = Be(n.editor), c = J(null), u = J(null), d = I(() => {
+		let n = e, { open: r, query: i, replacement: a, matches: o, cursor: s } = Be(n.editor), c = q(null), u = q(null), d = I(() => {
 			let e = o.value.length;
 			return e === 0 ? i.value === "" ? "" : "无结果" : `第 ${s.value + 1}/${e} 处`;
 		}), f = I(() => o.value.length > 0), p = I(() => f.value && s.value > 0), h = I(() => f.value && s.value < o.value.length - 1);
@@ -630,7 +652,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 		function w(e) {
 			n.editor.setFindReplacement(e.target.value);
 		}
-		$(r, (e) => {
+		Q(r, (e) => {
 			e && c.value?.focus({ preventScroll: !0 });
 		}, {
 			immediate: !0,
@@ -639,15 +661,15 @@ var Ve = ["value"], He = ["value"], Ue = {
 		function T(e) {
 			r.value && (e.key.toLowerCase() !== "f" || !(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey || b(e.target) || c.value?.focus({ preventScroll: !0 }));
 		}
-		return window.addEventListener("keydown", T), re(() => window.removeEventListener("keydown", T)), $(i, () => {
+		return window.addEventListener("keydown", T), re(() => window.removeEventListener("keydown", T)), Q(i, () => {
 			u.value = null;
-		}), t({ close: x }), (e, t) => Q(r) ? (q(), z("div", {
+		}), t({ close: x }), (e, t) => Z(r) ? (K(), z("div", {
 			key: 0,
 			class: "cn-find-bar",
 			"data-find-bar": "",
 			role: "search",
 			"aria-label": "查找替换",
-			onPointerdown: t[2] ||= se(() => {}, ["stop"])
+			onPointerdown: t[2] ||= $(() => {}, ["stop"])
 		}, [
 			B("input", {
 				ref_key: "queryInput",
@@ -655,7 +677,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				class: "cn-find-bar__input",
 				"data-find-query": "",
 				type: "text",
-				value: Q(i),
+				value: Z(i),
 				placeholder: "查找",
 				"aria-label": "查找",
 				spellcheck: "false",
@@ -667,7 +689,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				class: "cn-find-bar__input",
 				"data-find-replace": "",
 				type: "text",
-				value: Q(a),
+				value: Z(a),
 				placeholder: "替换",
 				"aria-label": "替换",
 				spellcheck: "false",
@@ -675,8 +697,8 @@ var Ve = ["value"], He = ["value"], Ue = {
 				onInput: w,
 				onKeydown: S
 			}, null, 40, He),
-			B("span", Ue, Z(d.value), 1),
-			u.value ? (q(), z("span", We, Z(u.value), 1)) : R("", !0),
+			B("span", Ue, X(d.value), 1),
+			u.value ? (K(), z("span", We, X(u.value), 1)) : R("", !0),
 			B("button", {
 				type: "button",
 				class: "cn-find-bar__key",
@@ -685,7 +707,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				title: "上一处（Shift+Enter）",
 				"aria-label": "上一处",
 				onClick: t[0] ||= (e) => _(-1)
-			}, [V(m, { icon: Q(fe) }, null, 8, ["icon"])], 8, Ge),
+			}, [V(m, { icon: Z(fe) }, null, 8, ["icon"])], 8, Ge),
 			B("button", {
 				type: "button",
 				class: "cn-find-bar__key",
@@ -694,7 +716,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				title: "下一处（Enter）",
 				"aria-label": "下一处",
 				onClick: t[1] ||= (e) => _(1)
-			}, [V(m, { icon: Q(l) }, null, 8, ["icon"])], 8, Ke),
+			}, [V(m, { icon: Z(l) }, null, 8, ["icon"])], 8, Ke),
 			B("button", {
 				type: "button",
 				class: "cn-find-bar__action",
@@ -718,7 +740,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				title: "关闭（Esc）",
 				"aria-label": "关闭查找替换",
 				onClick: x
-			}, [V(m, { icon: Q(ge) }, null, 8, ["icon"])])
+			}, [V(m, { icon: Z(ge) }, null, 8, ["icon"])])
 		], 32)) : R("", !0);
 	}
 }), [["__scopeId", "data-v-71f0a3ae"]]), Xe = {
@@ -777,7 +799,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 	},
 	emits: ["change", "styleWrite"],
 	setup(e, { expose: o, emit: l }) {
-		let d = e, f = l, p = J(null);
+		let d = e, f = l, p = q(null);
 		o({ rootEl: p });
 		function h(e, t, n) {
 			f("styleWrite", {
@@ -817,8 +839,8 @@ var Ve = ["value"], He = ["value"], Ue = {
 		function x(e) {
 			h(["font"], e.target.value, !0);
 		}
-		let S = J(String(d.fontSize)), C = J(!1);
-		$(() => d.fontSize, (e) => {
+		let S = q(String(d.fontSize)), C = q(!1);
+		Q(() => d.fontSize, (e) => {
 			C.value || (S.value = String(e));
 		});
 		function w(e) {
@@ -894,16 +916,16 @@ var Ve = ["value"], He = ["value"], Ue = {
 		function H() {
 			h(["autowrap"], !d.autowrap, !0);
 		}
-		return (t, n) => (q(), z("div", {
+		return (t, n) => (K(), z("div", {
 			ref_key: "rootRef",
 			ref: p,
 			class: "cn-edit-toolbar",
 			role: "toolbar",
 			"aria-label": "文本编辑",
 			"data-edit-toolbar": "",
-			onPointerdown: n[7] ||= se(() => {}, ["prevent"])
+			onPointerdown: n[7] ||= $(() => {}, ["prevent"])
 		}, [
-			B("span", Ze, [(q(), z(F, null, Y(g, (t) => B("button", {
+			B("span", Ze, [(K(), z(F, null, J(g, (t) => B("button", {
 				key: t.value,
 				type: "button",
 				class: U(["cn-edit-toolbar__item", { "cn-edit-toolbar__item--active": t.value === e.mode }]),
@@ -911,18 +933,18 @@ var Ve = ["value"], He = ["value"], Ue = {
 				"data-pill-static": t.value === "static" || void 0,
 				"data-pill-expression": t.value === "expression" || void 0,
 				onClick: (e) => _(t.value)
-			}, Z(t.label), 11, Qe)), 64))]),
+			}, X(t.label), 11, Qe)), 64))]),
 			B("span", $e, [B("select", {
 				class: "cn-edit-toolbar__font",
 				"data-toolbar-font": "",
 				value: e.font,
 				title: "字体",
-				onPointerdown: n[0] ||= se(() => {}, ["stop"]),
+				onPointerdown: n[0] ||= $(() => {}, ["stop"]),
 				onChange: x
-			}, [(q(!0), z(F, null, Y(y.value, (e) => (q(), z("option", {
+			}, [(K(!0), z(F, null, J(y.value, (e) => (K(), z("option", {
 				key: e.value,
 				value: e.value
-			}, Z(e.label), 9, tt))), 128))], 40, et)]),
+			}, X(e.label), 9, tt))), 128))], 40, et)]),
 			B("span", nt, [
 				B("button", {
 					type: "button",
@@ -931,10 +953,10 @@ var Ve = ["value"], He = ["value"], Ue = {
 					title: "字号减 1",
 					onClick: n[1] ||= (e) => k(-1)
 				}, [V(m, {
-					icon: Q(pe),
+					icon: Z(pe),
 					size: 11
 				}, null, 8, ["icon"])]),
-				oe(B("input", {
+				se(B("input", {
 					"onUpdate:modelValue": n[2] ||= (e) => S.value = e,
 					class: "cn-edit-toolbar__size",
 					"data-toolbar-font-size": "",
@@ -943,12 +965,12 @@ var Ve = ["value"], He = ["value"], Ue = {
 					step: 1,
 					"aria-label": "字号（场景像素）",
 					title: "字号（场景像素）",
-					onPointerdown: n[3] ||= se(() => {}, ["stop"]),
+					onPointerdown: n[3] ||= $(() => {}, ["stop"]),
 					onInput: E,
 					onChange: O,
 					onBlur: O,
 					onFocus: n[4] ||= (e) => C.value = !0
-				}, null, 544), [[ie, S.value]]),
+				}, null, 544), [[ae, S.value]]),
 				B("button", {
 					type: "button",
 					class: "cn-edit-toolbar__mini",
@@ -956,7 +978,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 					title: "字号加 1",
 					onClick: n[5] ||= (e) => k(1)
 				}, [V(m, {
-					icon: Q(me),
+					icon: Z(me),
 					size: 11
 				}, null, 8, ["icon"])])
 			]),
@@ -967,11 +989,11 @@ var Ve = ["value"], He = ["value"], Ue = {
 				value: ee.value,
 				"aria-label": "字色",
 				title: "字色",
-				onPointerdown: n[6] ||= se(() => {}, ["stop"]),
+				onPointerdown: n[6] ||= $(() => {}, ["stop"]),
 				onInput: A,
 				onChange: j
 			}, null, 40, it)]),
-			B("span", at, [(q(!0), z(F, null, Y(Q(P), (t) => (q(), z("button", {
+			B("span", at, [(K(!0), z(F, null, J(Z(P), (t) => (K(), z("button", {
 				key: t.value,
 				type: "button",
 				class: U(["cn-edit-toolbar__item cn-edit-toolbar__icon-item", { "cn-edit-toolbar__item--active": t.value === e.horizontalAlign }]),
@@ -983,7 +1005,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				icon: t.icon,
 				size: 12
 			}, null, 8, ["icon"])], 10, ot))), 128))]),
-			B("span", st, [(q(!0), z(F, null, Y(Q(L), (t) => (q(), z("button", {
+			B("span", st, [(K(!0), z(F, null, J(Z(L), (t) => (K(), z("button", {
 				key: t.value,
 				type: "button",
 				class: U(["cn-edit-toolbar__item cn-edit-toolbar__icon-item", { "cn-edit-toolbar__item--active": t.value === e.verticalAlign }]),
@@ -1003,7 +1025,7 @@ var Ve = ["value"], He = ["value"], Ue = {
 				title: "自动换行",
 				onClick: H
 			}, [V(m, {
-				icon: Q(he),
+				icon: Z(he),
 				size: 12
 			}, null, 8, ["icon"])], 10, ut)])
 		], 544));
@@ -1018,10 +1040,10 @@ function pt(e) {
 	return n(), () => t?.removeEventListener("change", n);
 }
 function mt() {
-	let e = X(window.devicePixelRatio || 1), t = pt((t) => {
+	let e = Y(window.devicePixelRatio || 1), t = pt((t) => {
 		e.value = t;
 	});
-	return K(t, !0), e;
+	return G(t, !0), e;
 }
 //#endregion
 //#region src/canvas/useTextEditing.ts
@@ -1041,10 +1063,10 @@ function gt(e, t) {
 	return ht.set(n, i), i;
 }
 function _t(e, t) {
-	let n = X(e.store.ui.editing), r = X(0), i = e.subscribe((t) => {
+	let n = Y(e.store.ui.editing), r = Y(0), i = e.subscribe((t) => {
 		t.scope === "doc" ? (r.value += 1, n.value = e.store.ui.editing) : t.scope === "ui" && t.branch === "editing" && (n.value = e.store.ui.editing);
 	});
-	K(i, !0);
+	G(i, !0);
 	let a = I(() => n.value?.path ?? null), o = mt(), s = P(e), c = I(() => {
 		r.value;
 		let t = n.value;
@@ -1075,10 +1097,10 @@ function _t(e, t) {
 			textAlign: e.horizontalAlign,
 			whiteSpace: e.autowrap ? "pre-wrap" : "pre"
 		};
-	}), f = X({
+	}), f = Y({
 		width: 0,
 		height: 0
-	}), p = X({
+	}), p = Y({
 		width: 0,
 		height: 0
 	}), m = () => {
@@ -1097,15 +1119,15 @@ function _t(e, t) {
 			height: e.offsetHeight
 		};
 	};
-	$(a, (e) => {
+	Q(a, (e) => {
 		e !== null && m();
 	}, { flush: "post" });
 	let g = null;
-	$(() => t.getToolbar?.() ?? null, (e) => {
+	Q(() => t.getToolbar?.() ?? null, (e) => {
 		g?.disconnect(), g = null, e !== null && (h(), typeof ResizeObserver == "function" && (g = new ResizeObserver(h), g.observe(e)));
 	}, { flush: "post" });
 	let _ = null;
-	G(() => {
+	ie(() => {
 		let e = t.getHost();
 		e !== null && typeof ResizeObserver == "function" && (_ = new ResizeObserver(() => {
 			f.value = {
@@ -1113,7 +1135,7 @@ function _t(e, t) {
 				height: e.clientHeight
 			};
 		}), _.observe(e));
-	}), K(() => {
+	}), G(() => {
 		_?.disconnect(), g?.disconnect();
 	}, !0);
 	let v = I(() => {
@@ -1176,7 +1198,7 @@ function _t(e, t) {
 			return;
 		}
 		k();
-	}, M = X(!1), N = (e) => {
+	}, M = Y(!1), N = (e) => {
 		M.value = e, !e && O && (O = !1, a.value !== null && k());
 	}, F = () => {
 		if (a.value !== null) {
@@ -1215,7 +1237,7 @@ function _t(e, t) {
 	}, z = () => {
 		D = !1;
 	};
-	return window.addEventListener("pointerdown", R, !0), window.addEventListener("pointerup", z, !0), K(() => {
+	return window.addEventListener("pointerdown", R, !0), window.addEventListener("pointerup", z, !0), G(() => {
 		window.removeEventListener("pointerdown", R, !0), window.removeEventListener("pointerup", z, !0), A();
 	}, !0), {
 		editing: a,
@@ -1242,7 +1264,7 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 	__name: "TextEditingOverlay",
 	props: { editor: {} },
 	setup(e, { expose: t }) {
-		let n = e, r = J(null), i = J(null), a = J(null), o = J(null), s = _t(n.editor, {
+		let n = e, r = q(null), i = q(null), a = q(null), o = q(null), s = _t(n.editor, {
 			getTextarea: () => i.value,
 			getHost: () => r.value?.parentElement ?? null,
 			getToolbar: () => a.value?.rootEl ?? null
@@ -1261,16 +1283,16 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 			popupEl: () => o.value?.rootEl ?? null,
 			scale: s.scale
 		});
-		$(c, async (e) => {
+		Q(c, async (e) => {
 			if (!e) return;
 			await ne();
 			let t = i.value, n = s.layout.value;
 			t && n && (t.value = n.text, g(), t.focus({ preventScroll: !0 }), t.select());
-		}), $(s.draftSeq, async () => {
+		}), Q(s.draftSeq, async () => {
 			await ne();
 			let e = i.value, t = s.layout.value;
 			e && t && (e.value = t.text, g());
-		}), $(l, async (e, t) => {
+		}), Q(l, async (e, t) => {
 			if (!t || !e) return;
 			let n = i.value;
 			if (!n || u.value) return;
@@ -1286,39 +1308,39 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 			commitEditing: () => s.commitNow(),
 			isEditing: () => c.value !== null,
 			ownsEventTarget: (e) => s.ownsEventTarget(e)
-		}), (e, t) => (q(), z("div", {
+		}), (e, t) => (K(), z("div", {
 			ref_key: "rootRef",
 			ref: r,
 			class: "cn-text-overlay"
 		}, [
-			Q(c) && Q(l) ? (q(), z("textarea", {
-				key: Q(c).join(""),
+			Z(c) && Z(l) ? (K(), z("textarea", {
+				key: Z(c).join(""),
 				ref_key: "textareaRef",
 				ref: i,
 				class: "cn-text-overlay__textarea",
-				style: W(Q(l)),
-				wrap: Q(l).whiteSpace === "pre" ? "off" : "soft",
+				style: W(Z(l)),
+				wrap: Z(l).whiteSpace === "pre" ? "off" : "soft",
 				spellcheck: "false",
 				autocomplete: "off",
 				onKeydown: b,
 				onBlur: x,
-				onCompositionstart: t[0] ||= (e) => Q(s).setComposing(!0),
-				onCompositionend: t[1] ||= (e) => Q(s).setComposing(!1)
+				onCompositionstart: t[0] ||= (e) => Z(s).setComposing(!0),
+				onCompositionend: t[1] ||= (e) => Z(s).setComposing(!1)
 			}, null, 44, vt)) : R("", !0),
-			Q(c) && Q(d) ? (q(), L(ft, {
+			Z(c) && Z(d) ? (K(), L(ft, {
 				key: 1,
 				ref_key: "toolbarRef",
 				ref: a,
-				style: W(Q(d)),
+				style: W(Z(d)),
 				mode: m.value ? "expression" : "static",
-				font: Q(p)?.font ?? "",
-				"font-size": Q(p)?.fontSize ?? 16,
-				"font-color": Q(p)?.fontColor ?? "#000000",
-				"horizontal-align": Q(p)?.horizontalAlign ?? "left",
-				"vertical-align": Q(p)?.verticalAlign ?? "top",
-				autowrap: Q(p)?.autowrap ?? !1,
-				onChange: t[2] ||= (e) => Q(s).setExpressionMode(e === "expression"),
-				onStyleWrite: t[3] ||= (e) => Q(s).updateStyleField(e.key, e.value, e.final)
+				font: Z(p)?.font ?? "",
+				"font-size": Z(p)?.fontSize ?? 16,
+				"font-color": Z(p)?.fontColor ?? "#000000",
+				"horizontal-align": Z(p)?.horizontalAlign ?? "left",
+				"vertical-align": Z(p)?.verticalAlign ?? "top",
+				autowrap: Z(p)?.autowrap ?? !1,
+				onChange: t[2] ||= (e) => Z(s).setExpressionMode(e === "expression"),
+				onStyleWrite: t[3] ||= (e) => Z(s).updateStyleField(e.key, e.value, e.final)
 			}, null, 8, [
 				"style",
 				"mode",
@@ -1329,16 +1351,16 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 				"vertical-align",
 				"autowrap"
 			])) : R("", !0),
-			Q(c) && _.value ? (q(), z("span", {
+			Z(c) && _.value ? (K(), z("span", {
 				key: 2,
 				class: "cn-text-overlay__diagnostic",
-				style: W(Q(f))
-			}, Z(_.value), 5)) : R("", !0),
+				style: W(Z(f))
+			}, X(_.value), 5)) : R("", !0),
 			V(k, {
 				ref_key: "popupRef",
 				ref: o,
-				state: Q(v),
-				onSelect: Q(y)
+				state: Z(v),
+				onSelect: Z(y)
 			}, null, 8, ["state", "onSelect"])
 		], 512));
 	}
@@ -1351,12 +1373,12 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 	props: { editor: {} },
 	emits: ["ready"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = J(null), a = J(null), o = J(null), s = J(null), c = J(null), l = J(null), u = J(!1), d = J(!1), f = J(null), p = J(null), m = J(n.editor.store.ui.armedCreate), h = J(!1), g = I(() => d.value ? "cn-surface--panning" : u.value ? "cn-surface--pannable" : ""), _ = I(() => {
+		let n = e, r = t, i = q(null), a = q(null), o = q(null), s = q(null), c = q(null), l = q(null), u = q(!1), d = q(!1), f = q(null), p = q(null), m = q(n.editor.store.ui.armedCreate), h = q(!1), g = I(() => d.value ? "cn-surface--panning" : u.value ? "cn-surface--pannable" : ""), _ = I(() => {
 			if (d.value) return;
 			if (m.value !== null || h.value) return u.value ? void 0 : { cursor: "crosshair" };
 			let e = p.value ?? f.value;
 			return e === null ? void 0 : { cursor: Xe[e] };
-		}), v = J(!1), y = C();
+		}), v = q(!1), y = C();
 		function x(e) {
 			return new Promise((t, n) => {
 				let r = URL.createObjectURL(e), i = new Image();
@@ -1371,7 +1393,7 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 			});
 		}
 		let w = [];
-		return G(() => {
+		return ie(() => {
 			let e = i.value, t = a.value, g = o.value;
 			if (!e || !t || !g) return;
 			let _ = n.editor, C = () => {
@@ -1506,8 +1528,8 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 					s.value.commitEditing();
 				}
 				e.preventDefault();
-				let t = k(e), n = _.toScenePoint(t.x, t.y);
-				if (_.selectAt(n.x, n.y) === null) {
+				let t = k(e), n = _.toScenePoint(t.x, t.y), r = _.hitTest(n.x, n.y) ?? _.baseImageAt(n.x, n.y);
+				if (_.setSelection(r), r === null) {
 					c.value?.close();
 					return;
 				}
@@ -1544,9 +1566,9 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 				return !1;
 			}, re = (e) => {
 				W(e) && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), v.value = !0);
-			}, G = (t) => {
+			}, ie = (t) => {
 				t.relatedTarget !== null && e.contains(t.relatedTarget) || (v.value = !1);
-			}, K = (e) => {
+			}, G = (e) => {
 				e.preventDefault(), v.value = !1;
 				let t = [], n = e.dataTransfer?.files;
 				for (let e = 0; n !== void 0 && e < n.length; e += 1) {
@@ -1558,9 +1580,9 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 						y.show("上传不可用：未接入上传实现，图片未添加");
 						return;
 					}
-					s.value?.isEditing() && s.value.commitEditing(), q(t, k(e));
+					s.value?.isEditing() && s.value.commitEditing(), K(t, k(e));
 				}
-			}, q = async (e, t) => {
+			}, K = async (e, t) => {
 				let n = _.toScenePoint(t.x, t.y);
 				for (let t = 0; t < e.length; t += 1) {
 					let r = e[t];
@@ -1579,19 +1601,19 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 					}
 				}
 			};
-			e.addEventListener("dragover", re), e.addEventListener("dragleave", G), e.addEventListener("drop", K), w.push(() => {
-				e.removeEventListener("dragover", re), e.removeEventListener("dragleave", G), e.removeEventListener("drop", K);
+			e.addEventListener("dragover", re), e.addEventListener("dragleave", ie), e.addEventListener("drop", G), w.push(() => {
+				e.removeEventListener("dragover", re), e.removeEventListener("dragleave", ie), e.removeEventListener("drop", G);
 			});
-			let J = () => _.invalidate("both"), Y = (e) => e.preventDefault();
-			t.addEventListener("contextlost", Y), t.addEventListener("contextrestored", J), g.addEventListener("contextlost", Y), g.addEventListener("contextrestored", J), w.push(() => {
-				t.removeEventListener("contextlost", Y), t.removeEventListener("contextrestored", J), g.removeEventListener("contextlost", Y), g.removeEventListener("contextrestored", J);
+			let q = () => _.invalidate("both"), J = (e) => e.preventDefault();
+			t.addEventListener("contextlost", J), t.addEventListener("contextrestored", q), g.addEventListener("contextlost", J), g.addEventListener("contextrestored", q), w.push(() => {
+				t.removeEventListener("contextlost", J), t.removeEventListener("contextrestored", q), g.removeEventListener("contextlost", J), g.removeEventListener("contextrestored", q);
 			}), r("ready", {
 				contentCanvas: t,
 				overlayCanvas: g
 			});
 		}), re(() => {
 			w.forEach((e) => e()), w.length = 0, n.editor.detachSurfaces();
-		}), (t, n) => (q(), z("div", {
+		}), (t, n) => (K(), z("div", {
 			ref_key: "hostRef",
 			ref: i,
 			class: U(["cn-surface", g.value]),
@@ -1622,10 +1644,10 @@ var vt = ["wrap"], yt = /*#__PURE__*/ x(/* @__PURE__ */ H({
 				ref: l,
 				editor: e.editor
 			}, null, 8, ["editor"]),
-			v.value ? (q(), z("div", bt, [...n[0] ||= [B("span", { class: "cn-surface__drop-hint-text" }, "松开以上传图片", -1)]])) : R("", !0)
+			v.value ? (K(), z("div", bt, [...n[0] ||= [B("span", { class: "cn-surface__drop-hint-text" }, "松开以上传图片", -1)]])) : R("", !0)
 		], 6));
 	}
-}), [["__scopeId", "data-v-2327ee46"]]);
+}), [["__scopeId", "data-v-e1d8373e"]]);
 //#endregion
 //#region src/canvas/guideSnap.ts
 function Ct(e, t, n, r) {
@@ -1655,14 +1677,14 @@ var wt = [
 	__name: "GuidesOverlay",
 	props: { editor: {} },
 	setup(e, { expose: t }) {
-		let n = e, r = P(n.editor), i = X(n.editor.store.doc), a = X(n.editor.listGuides()), o = X(n.editor.listSnapAxes()), s = n.editor.subscribe((e) => {
+		let n = e, r = P(n.editor), i = Y(n.editor.store.doc), a = Y(n.editor.listGuides()), o = Y(n.editor.listSnapAxes()), s = n.editor.subscribe((e) => {
 			if (e.scope === "doc") {
 				i.value = n.editor.store.doc, a.value = n.editor.listGuides(), o.value = n.editor.listSnapAxes();
 				return;
 			}
 			e.branch === "guides" ? a.value = n.editor.listGuides() : e.branch === "snapAxes" && (o.value = n.editor.listSnapAxes());
 		});
-		K(s, !0);
+		G(s, !0);
 		function c(e, t) {
 			let n = i.value, a = r.value;
 			return n ? e === "vertical" ? {
@@ -1678,7 +1700,7 @@ var wt = [
 		function l(e) {
 			return String(Math.round(e * 100) / 100);
 		}
-		let u = J(null);
+		let u = q(null);
 		function d(e) {
 			return {
 				orientation: e.orientation,
@@ -1709,7 +1731,7 @@ var wt = [
 			endGuideDrag: m,
 			cancelGuideDrag: h
 		});
-		let g = J(null), _ = I(() => a.value.map((e) => {
+		let g = q(null), _ = I(() => a.value.map((e) => {
 			let t = g.value;
 			return t !== null && t.id === e.id ? {
 				id: e.id,
@@ -1724,7 +1746,7 @@ var wt = [
 				dragging: !1,
 				overRuler: !1
 			};
-		})), v = J(null);
+		})), v = q(null);
 		function y(e, t) {
 			let n = v.value?.getBoundingClientRect(), i = r.value, a = n?.left ?? 0, o = n?.top ?? 0;
 			return t === "vertical" ? i.x + (e.clientX - a) / i.zoom : i.y + (e.clientY - o) / i.zoom;
@@ -1774,13 +1796,13 @@ var wt = [
 			let t = g.value;
 			t !== null && e.pointerId === t.pointerId && (g.value = null, S(e));
 		}
-		return (e, t) => (q(), z("div", {
+		return (e, t) => (K(), z("div", {
 			ref_key: "rootRef",
 			ref: v,
 			class: "cn-guides",
 			"data-guide-overlay": ""
 		}, [
-			(q(!0), z(F, null, Y(o.value, (e, t) => (q(), z("div", {
+			(K(!0), z(F, null, J(o.value, (e, t) => (K(), z("div", {
 				key: `${e.orientation}-${e.position}-${t}`,
 				class: U(["cn-guides__snap", `cn-guides__snap--${e.orientation}`]),
 				"data-snap-line": "",
@@ -1789,7 +1811,7 @@ var wt = [
 				"data-snap-source": e.source,
 				style: W(c(e.orientation, e.position))
 			}, null, 14, wt))), 128)),
-			(q(!0), z(F, null, Y(_.value, (e) => (q(), z("div", {
+			(K(!0), z(F, null, J(_.value, (e) => (K(), z("div", {
 				key: e.id,
 				class: U(["cn-guides__guide", [`cn-guides__guide--${e.orientation}`, {
 					"cn-guides__guide--grabbed": e.dragging,
@@ -1805,7 +1827,7 @@ var wt = [
 				onPointerup: T,
 				onPointercancel: E
 			}, null, 46, Tt))), 128)),
-			u.value ? (q(), z("div", {
+			u.value ? (K(), z("div", {
 				key: 0,
 				class: U(["cn-guides__guide cn-guides__guide--preview", `cn-guides__guide--${u.value.orientation}`]),
 				"data-guide-preview": "",
@@ -1834,10 +1856,10 @@ var wt = [
 		"guide-drag-cancel"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = P(n.editor), a = X(n.editor.store.ui.rulersVisible), o = n.editor.subscribe((e) => {
+		let n = e, r = t, i = P(n.editor), a = Y(n.editor.store.ui.rulersVisible), o = n.editor.subscribe((e) => {
 			e.scope === "ui" && e.branch === "rulersVisible" && (a.value = n.editor.store.ui.rulersVisible);
 		});
-		K(o, !0);
+		G(o, !0);
 		let s = [
 			1,
 			2,
@@ -1875,13 +1897,13 @@ var wt = [
 			}
 			return o;
 		}
-		let l = J(null), u = J(null), d = J(0), f = J(0), p = () => {
+		let l = q(null), u = q(null), d = q(0), f = q(0), p = () => {
 			d.value = l.value?.clientWidth ?? 0, f.value = u.value?.clientHeight ?? 0;
 		}, m = null;
-		G(() => {
+		ie(() => {
 			p(), m = new ResizeObserver(() => p()), l.value && m.observe(l.value), u.value && m.observe(u.value);
 		}), re(() => m?.disconnect());
-		let h = I(() => c(i.value.x, d.value, i.value.zoom)), g = I(() => c(i.value.y, f.value, i.value.zoom)), _ = J(null);
+		let h = I(() => c(i.value.x, d.value, i.value.zoom)), g = I(() => c(i.value.y, f.value, i.value.zoom)), _ = q(null);
 		function v(e, t, n) {
 			let r = e.getBoundingClientRect(), a = i.value;
 			return {
@@ -1916,7 +1938,7 @@ var wt = [
 			let a = v(n, i.orientation, e);
 			r(t === "guide-drag-end" ? "guide-drag-end" : "guide-drag-cancel", a);
 		}
-		return (e, t) => oe((q(), z("div", Ot, [
+		return (e, t) => se((K(), z("div", Ot, [
 			B("div", {
 				ref_key: "topRef",
 				ref: l,
@@ -1929,11 +1951,11 @@ var wt = [
 				onPointermove: t[1] ||= (e) => b(e),
 				onPointerup: t[2] ||= (e) => x(e, "guide-drag-end"),
 				onPointercancel: t[3] ||= (e) => x(e, "guide-drag-cancel")
-			}, [(q(!0), z(F, null, Y(h.value, (e) => (q(), z("span", {
+			}, [(K(!0), z(F, null, J(h.value, (e) => (K(), z("span", {
 				key: e.scene,
 				class: U(["cn-ruler__tick", { "cn-ruler__tick--major": e.label !== null }]),
 				style: W({ left: `${e.position}px` })
-			}, [e.label === null ? R("", !0) : (q(), z("span", kt, Z(e.label), 1))], 6))), 128))], 544),
+			}, [e.label === null ? R("", !0) : (K(), z("span", kt, X(e.label), 1))], 6))), 128))], 544),
 			B("div", {
 				ref_key: "leftRef",
 				ref: u,
@@ -1946,17 +1968,17 @@ var wt = [
 				onPointermove: t[5] ||= (e) => b(e),
 				onPointerup: t[6] ||= (e) => x(e, "guide-drag-end"),
 				onPointercancel: t[7] ||= (e) => x(e, "guide-drag-cancel")
-			}, [(q(!0), z(F, null, Y(g.value, (e) => (q(), z("span", {
+			}, [(K(!0), z(F, null, J(g.value, (e) => (K(), z("span", {
 				key: e.scene,
 				class: U(["cn-ruler__tick", { "cn-ruler__tick--major": e.label !== null }]),
 				style: W({ top: `${e.position}px` })
-			}, [e.label === null ? R("", !0) : (q(), z("span", At, Z(e.label), 1))], 6))), 128))], 544),
+			}, [e.label === null ? R("", !0) : (K(), z("span", At, X(e.label), 1))], 6))), 128))], 544),
 			t[8] ||= B("div", {
 				class: "cn-ruler__corner",
 				"data-ruler-corner": "",
 				"aria-hidden": "true"
 			}, null, -1)
-		], 512)), [[ae, a.value]]);
+		], 512)), [[oe, a.value]]);
 	}
 }), [["__scopeId", "data-v-5bd7248c"]]), Pt = "#2563eb", Ft = "rgba(37, 99, 235, 0.08)", It = [4, 3], Lt = 1, Rt = "rgba(11, 18, 32, 0.9)", zt = "#ffffff", Bt = 11, Vt = 6, Ht = 3, Ut = 3, Wt = 6;
 function Gt(e, t, n) {