@hankchen/canvas-editor-vue 0.1.4 → 0.2.0

package/dist/index.js

@@ -1,16 +1,16 @@
 import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./canvas-C70NSsoF.js";
-import { a as _, i as v, n as y, r as b, t as x } from "./layer-panel-GiVy_B4A.js";
-import { a as S, c as C, d as w, f as T, i as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F } from "./property-panel-C2etsIhF.js";
-import { i as I, n as L, r as R, t as z } from "./completionAnchor-CDR5YZhu.js";
-import { c as B, i as V, n as H, s as U, t as W } from "./useTransientFeedback-CTjmMmFF.js";
-import { i as G, n as K, r as q, t as J } from "./uploadFile-BOfv8aLG.js";
-import { n as Y, t as X } from "./usePathCompletion-uJ5c_gQ0.js";
-import { n as Z, t as Q } from "./useViewport-D9Ipevzs.js";
-import { n as $, r as ee, t as te } from "./useDataSourceSchema-CGbldbUj.js";
-import { n as ne, r as re, t as ie } from "./status-bar-_PvEXyq8.js";
-import { t as ae } from "./useShortcutsHelp-CsyarO2P.js";
-import { n as oe, r as se, t as ce } from "./shared-wuupBoZg.js";
+import { a as _, i as v, n as y, o as b, r as x, s as S, t as C } from "./layer-panel-BEcT9HhJ.js";
+import { a as w, c as T, d as E, f as D, i as O, l as k, m as A, n as j, o as M, p as N, r as P, s as F, t as I, u as L } from "./property-panel-C2etsIhF.js";
+import { i as R, n as z, r as B, t as V } from "./completionAnchor-CDR5YZhu.js";
+import { c as H, i as U, n as W, s as G, t as K } from "./useTransientFeedback-CTjmMmFF.js";
+import { i as q, n as J, r as Y, t as X } from "./uploadFile-BOfv8aLG.js";
+import { n as Z, t as Q } from "./usePathCompletion-uJ5c_gQ0.js";
+import { n as $, t as ee } from "./useViewport-D9Ipevzs.js";
+import { n as te, r as ne, t as re } from "./useDataSourceSchema-CGbldbUj.js";
+import { n as ie, r as ae, t as oe } from "./status-bar-_PvEXyq8.js";
+import { t as se } from "./useShortcutsHelp-CsyarO2P.js";
+import { n as ce, r as le, t as ue } from "./shared-wuupBoZg.js";
 //#region src/index.ts
-var le = "@hankchen/canvas-editor-vue";
+var de = "@hankchen/canvas-editor-vue";
 //#endregion
-export { v as ADD_LAYER_MENU, _ as ADD_MENU, V as ARM_LAYER_CREATE_HINT, e as AlignFloatBar, D as CANVAS_FIELD_SECTIONS, n as CanvasSurface, f as ContentTypePill, a as ContextMenu, $ as DropdownMenu, R as ExpressionCompletionPopup, F as FIELD_SECTIONS_BY_TYPE, N as FONT_PICKER_KEY, l as FindBar, m as GuidesOverlay, se as HelpDialog, S as IMAGE_UPLOAD_KEY, x as LayerPanel, le as PACKAGE_NAME, I as PanelIcon, k as PropertyField, P as PropertyPanel, d as Ruler, ie as StatusBar, c as TextEditingOverlay, L as applyCompletion, E as controlRegistry, u as createGizmoOverlayPainter, h as createRafScheduler, U as detectShortcutPlatform, t as drawCreateRubberBand, s as drawFindMatches, p as drawSelectionGizmo, q as expressionCompletionSource, G as expressionFieldContext, w as fieldSectionsForPath, T as fieldSectionsForType, ne as formatLayerGeometry, re as formatLayerPath, C as injectFontPicker, A as injectImageUpload, H as isEditableEventTarget, y as isUpperHalf, j as layerRoleAt, z as measureCursorAnchor, O as readField, Y as rowsPathCompletionSource, B as shortcutActionLabel, J as uploadFileFromDom, te as useDataSourceSchema, r as useDpr, ee as useDropdownMenu, K as useExpressionCompletion, o as useFindSession, oe as useHistory, b as useLayerPanel, X as usePathCompletion, M as usePropertyPanel, Z as useSelection, ce as useShortcuts, ae as useShortcutsHelp, g as useTextEditing, W as useTransientFeedback, Q as useViewport, i as watchDprChanges };
+export { v as ADD_LAYER_MENU, _ as ADD_MENU, b as ADD_TEXT_PRESET_MENU, U as ARM_LAYER_CREATE_HINT, e as AlignFloatBar, k as CANVAS_FIELD_SECTIONS, n as CanvasSurface, f as ContentTypePill, a as ContextMenu, te as DropdownMenu, B as ExpressionCompletionPopup, L as FIELD_SECTIONS_BY_TYPE, F as FONT_PICKER_KEY, l as FindBar, m as GuidesOverlay, le as HelpDialog, w as IMAGE_UPLOAD_KEY, C as LayerPanel, de as PACKAGE_NAME, S as PANEL_ADD_MENU, R as PanelIcon, j as PropertyField, I as PropertyPanel, d as Ruler, oe as StatusBar, c as TextEditingOverlay, z as applyCompletion, O as controlRegistry, u as createGizmoOverlayPainter, h as createRafScheduler, G as detectShortcutPlatform, t as drawCreateRubberBand, s as drawFindMatches, p as drawSelectionGizmo, Y as expressionCompletionSource, q as expressionFieldContext, E as fieldSectionsForPath, D as fieldSectionsForType, ie as formatLayerGeometry, ae as formatLayerPath, T as injectFontPicker, M as injectImageUpload, W as isEditableEventTarget, y as isUpperHalf, N as layerRoleAt, V as measureCursorAnchor, A as readField, Z as rowsPathCompletionSource, H as shortcutActionLabel, X as uploadFileFromDom, re as useDataSourceSchema, r as useDpr, ne as useDropdownMenu, J as useExpressionCompletion, o as useFindSession, ce as useHistory, x as useLayerPanel, Q as usePathCompletion, P as usePropertyPanel, $ as useSelection, ue as useShortcuts, se as useShortcutsHelp, g as useTextEditing, K as useTransientFeedback, ee as useViewport, i as watchDprChanges };

package/dist/layer-panel/addMenu.d.ts

@@ -1,4 +1,4 @@
-import { LayerType } from '@hankchen/canvas-editor';
+import { LayerType, TextPresetId } from '@hankchen/canvas-editor';
 /** 新增菜单项（spec §2.1）：四类图层武装画拉（drag-create 工单 03）；模板表带 rowsPath 必填表单 */
 export type AddMenuKind = {
     kind: 'layer';
@@ -10,7 +10,20 @@ export type AddMenuKind = {
     label: string;
     title: string;
 };
+/** 文本预设项（text-defaults 工单 02，spec 决策 5）：面板专用入口——应用即写新层样式槽 + 武装画拉 */
+export type AddTextPresetKind = {
+    kind: 'text-preset';
+    preset: TextPresetId;
+    label: string;
+    title: string;
+};
 export declare const ADD_MENU: readonly AddMenuKind[];
+/** 文本预设三项（text-defaults 工单 02，spec 决策 4）：从内核 TEXT_PRESETS 派生
+ *  （字号单一事实源，内核改档位文案自动跟随），v1 只定字号——字体缺口由新层样式槽补 */
+export declare const ADD_TEXT_PRESET_MENU: readonly AddTextPresetKind[];
+/** 面板「＋」完整序（text-defaults 工单 02，spec 决策 5）：文本预设三项插在「文本层」之后；
+ *  工具栏派生视图 ADD_LAYER_MENU 不含预设（预设只属面板） */
+export declare const PANEL_ADD_MENU: readonly (AddMenuKind | AddTextPresetKind)[];
 /** 层型项视图（工具栏「＋插入▾」消费，editor-top-toolbar 工单 03）：ADD_MENU 的
  *  四类图层项，模板表项不进工具栏 */
 export declare const ADD_LAYER_MENU: readonly Extract<AddMenuKind, {

package/dist/layer-panel/index.d.ts

@@ -4,4 +4,4 @@
  */
 export { default as LayerPanel } from './LayerPanel';
 export { isUpperHalf, useLayerPanel, type LayerPanelBinding } from './useLayerPanel';
-export { ADD_LAYER_MENU, ADD_MENU, type AddMenuKind } from './addMenu';
+export { ADD_LAYER_MENU, ADD_MENU, ADD_TEXT_PRESET_MENU, PANEL_ADD_MENU, type AddMenuKind, type AddTextPresetKind, } from './addMenu';

package/dist/{layer-panel-GiVy_B4A.js → layer-panel-BEcT9HhJ.js}

@@ -1,10 +1,10 @@
 import { t as e } from "./createLucideIcon-SCvtEGVf.js";
 import { i as t, r as n, t as r } from "./layerPath-uy2ywyld.js";
 import { i, o as a, r as o } from "./completionAnchor-CDR5YZhu.js";
-import { c as s, i as c, s as l, t as ee } from "./useTransientFeedback-CTjmMmFF.js";
-import { n as te, t as ne } from "./usePathCompletion-uJ5c_gQ0.js";
-import { n as re, t as ie } from "./useDataSourceSchema-CGbldbUj.js";
-import { Fragment as u, computed as d, createBlock as ae, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, nextTick as oe, normalizeClass as _, normalizeStyle as se, onScopeDispose as v, openBlock as y, ref as b, renderList as ce, shallowRef as x, toDisplayString as S, unref as C, vModelText as w, watch as le, withCtx as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
+import { c as s, i as c, s as l, t as u } from "./useTransientFeedback-CTjmMmFF.js";
+import { n as ee, t as te } from "./usePathCompletion-uJ5c_gQ0.js";
+import { n as ne, t as re } from "./useDataSourceSchema-CGbldbUj.js";
+import { Fragment as d, computed as f, createBlock as ie, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as ae, normalizeClass as v, normalizeStyle as oe, onScopeDispose as y, openBlock as b, ref as x, renderList as se, shallowRef as S, toDisplayString as ce, unref as C, vModelText as w, watch as le, withCtx as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
 var ue = e({
 	name: "eye-off",
 	size: 24,
@@ -191,9 +191,20 @@ function P(e, t = []) {
 	for (let r = e.layers.length - 1; r >= 0; --r) n.push(N(e.layers[r], ["layers", r], "root", t));
 	return n;
 }
-//#endregion
-//#region src/layer-panel/addMenu.ts
 var F = [
+	{
+		id: "heading",
+		fontSize: 40
+	},
+	{
+		id: "subheading",
+		fontSize: 28
+	},
+	{
+		id: "body",
+		fontSize: 16
+	}
+], I = [
 	{
 		kind: "layer",
 		type: "TextLayer",
@@ -223,21 +234,37 @@ var F = [
 		label: "模板表",
 		title: "新增模板表（行模板 + 数据行展开）"
 	}
-], I = F.filter((e) => e.kind === "layer");
+], L = {
+	heading: "标题",
+	subheading: "副标题",
+	body: "正文"
+}, R = F.map(({ id: e, fontSize: t }) => ({
+	kind: "text-preset",
+	preset: e,
+	label: L[e],
+	title: `画拉建${L[e]}文本层（字号 ${t}，点击后在画布拖拽定落位与尺寸，Esc 取消）`
+})), z = (() => {
+	let e = I.findIndex((e) => e.kind === "layer" && e.type === "TextLayer");
+	return [
+		...I.slice(0, e + 1),
+		...R,
+		...I.slice(e + 1)
+	];
+})(), B = I.filter((e) => e.kind === "layer");
 //#endregion
 //#region src/layer-panel/useLayerPanel.ts
-function L(e) {
-	let t = x(e.store.doc), n = x(e.store.ui.selection), r = x(e.store.ui.hovered), i = x(e.store.ui.renaming), a = x(e.store.ui.lockedPaths), o = e.subscribe((o) => {
+function V(e) {
+	let t = S(e.store.doc), n = S(e.store.ui.selection), r = S(e.store.ui.hovered), i = S(e.store.ui.renaming), a = S(e.store.ui.lockedPaths), o = e.subscribe((o) => {
 		o.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, r.value = e.store.ui.hovered, i.value = e.store.ui.renaming, a.value = e.store.ui.lockedPaths) : o.branch === "selection" ? n.value = e.store.ui.selection : o.branch === "hovered" ? r.value = e.store.ui.hovered : o.branch === "renaming" ? i.value = e.store.ui.renaming : o.branch === "lockedPaths" && (a.value = e.store.ui.lockedPaths);
 	});
-	return v(o, !0), {
-		outline: d(() => t.value ? P(t.value, a.value) : []),
-		selection: d(() => n.value),
-		hovered: d(() => r.value),
-		renaming: d(() => i.value)
+	return y(o, !0), {
+		outline: f(() => t.value ? P(t.value, a.value) : []),
+		selection: f(() => n.value),
+		hovered: f(() => r.value),
+		renaming: f(() => i.value)
 	};
 }
-function R(e, t) {
+function H(e, t) {
 	return t > 0 && e < t / 2;
 }
 //#endregion
@@ -276,20 +303,30 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 	"disabled",
 	"title",
 	"onClick"
-], z = /* @__PURE__ */ g({
+], U = /* @__PURE__ */ _({
 	__name: "LayerPanel",
 	props: { editor: {} },
 	setup(e) {
-		let r = e, a = `解锁图层（${s("toggleLayerLock", l())}）`, g = `图层已锁定（${s("toggleLayerLock", l())} 解锁后可删除）`, v = L(r.editor), x = b(!1), k = b(""), A = b(!1);
+		let r = e, a = `解锁图层（${s("toggleLayerLock", l())}）`, _ = `图层已锁定（${s("toggleLayerLock", l())} 解锁后可删除）`, y = V(r.editor), S = x(!1), k = x(""), A = x(!1);
 		function j() {
-			x.value = !1, k.value = "", A.value = !1;
+			S.value = !1, k.value = "", A.value = !1;
 		}
-		let M = d(() => x.value ? [] : F.map((e) => e.kind === "layer" ? {
+		let M = f(() => S.value ? [] : z.map((e) => e.kind === "layer" ? {
 			label: e.label,
 			title: e.title,
 			dataAttrs: { "data-add-layer": e.type },
 			run: () => {
-				r.editor.armLayerCreate(e.type), ee().show(c);
+				r.editor.armLayerCreate(e.type), u().show(c);
+			}
+		} : e.kind === "text-preset" ? {
+			label: e.label,
+			title: e.title,
+			dataAttrs: {
+				"data-add-layer": "TextLayer",
+				"data-text-preset": e.preset
+			},
+			run: () => {
+				r.editor.armLayerCreate("TextLayer", e.preset), u().show(c);
 			}
 		} : {
 			label: e.label,
@@ -297,7 +334,7 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 			dataAttrs: { "data-add-layer": "template-table" },
 			keepsOpen: !0,
 			run: () => {
-				x.value = !0;
+				S.value = !0;
 			}
 		}));
 		function N(e) {
@@ -311,24 +348,24 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 		function P(e) {
 			j(), e();
 		}
-		function I() {
+		function F() {
 			j();
 		}
-		let z = ie(r.editor), Le = d(() => te(z.value)), B = b(null), V = b(null), { popup: H, accept: Re } = ne({
-			target: B,
-			enabled: () => x.value,
-			resolve: (e) => Le.value?.(e) ?? null,
-			popupEl: d(() => V.value?.rootEl ?? null)
+		let I = re(r.editor), L = f(() => ee(I.value)), R = x(null), B = x(null), { popup: U, accept: Le } = te({
+			target: R,
+			enabled: () => S.value,
+			resolve: (e) => L.value?.(e) ?? null,
+			popupEl: f(() => B.value?.rootEl ?? null)
 		});
-		function ze(e, t) {
+		function Re(e, t) {
 			if (e.key === "Enter") {
-				if (H.open && H.items.length > 0) return;
+				if (U.open && U.items.length > 0) return;
 				e.preventDefault(), N(t);
 				return;
 			}
-			e.key === "Escape" && H.open && e.stopPropagation();
+			e.key === "Escape" && U.open && e.stopPropagation();
 		}
-		function Be(e, t) {
+		function ze(e, t) {
 			switch (e.role) {
 				case "root": return e.name === "" ? `${e.type} ${t}` : e.name;
 				case "row": return `行 ${Number(e.path[e.path.length - 1]) + 1}`;
@@ -337,7 +374,7 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 				case "content": return e.type;
 			}
 		}
-		let U = d(() => {
+		let W = f(() => {
 			let e = [], t = /* @__PURE__ */ new Map();
 			function r(i, a, o, s) {
 				let c = i.role === "row" ? i.path.slice(0, -2) : i.role === "templateRow" ? i.path.slice(0, -1) : s, l = 0;
@@ -345,42 +382,42 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 					key: i.path.join("."),
 					node: i,
 					indentLevel: a,
-					label: Be(i, l),
+					label: ze(i, l),
 					indexInGroup: o,
 					tablePath: c,
 					inTemplate: n(i.path),
 					draggable: i.role === "root" || i.role === "row" || i.role === "cell"
 				}), i.children.forEach((e, t) => r(e, a + 1, t, c));
 			}
-			return v.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
-		}), Ve = d(() => U.value.length > 0);
-		function He(e) {
+			return y.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
+		}), Be = f(() => W.value.length > 0);
+		function Ve(e) {
 			r.editor.setSelection(e.node.path);
 		}
-		function W(e) {
+		function G(e) {
 			r.editor.setHovered(e === null ? null : e.node.path);
 		}
-		function Ue(e) {
+		function He(e) {
 			r.editor.addTableRow(e.node.path);
 		}
-		function We(e) {
+		function Ue(e) {
 			r.editor.addTableCell(e.node.path);
 		}
-		function Ge(e) {
+		function We(e) {
 			r.editor.addTemplateCell(e.node.path.slice(0, -1));
 		}
-		function Ke(e) {
+		function Ge(e) {
 			r.editor.deleteLayer(e.node.path);
 		}
-		function qe(e) {
+		function Ke(e) {
 			r.editor.toggleLayerVisibility(e.node.path);
 		}
-		function Je(e) {
+		function qe(e) {
 			r.editor.toggleLayerLock(e.node.path);
 		}
-		let G = b(null), K = b(null);
-		function q(e) {
-			let r = G.value;
+		let K = x(null), q = x(null);
+		function J(e) {
+			let r = K.value;
 			if (!r) return !1;
 			if (r.kind === "root") return e.node.role === "root";
 			if (r.kind === "row") return e.node.role === "row";
@@ -388,11 +425,11 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 			let i = n(r.cellPath);
 			return i === e.inTemplate ? !i || t(r.cellPath.slice(0, -2), e.node.path.slice(0, -2)) : !1;
 		}
-		function J(e) {
+		function Y(e) {
 			return e.node.role === "root";
 		}
-		function Y(e, t) {
-			e.draggable && (G.value = e.node.role === "root" ? {
+		function X(e, t) {
+			e.draggable && (K.value = e.node.role === "root" ? {
 				kind: "root",
 				from: e.indexInGroup
 			} : e.node.role === "row" ? {
@@ -406,50 +443,50 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 				cellPath: e.node.path
 			}, t.dataTransfer?.setData("text/plain", e.key), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"));
 		}
-		function Ye(e, t) {
-			J(e) || Y(e, t);
+		function Je(e, t) {
+			Y(e) || X(e, t);
 		}
-		function Xe(e) {
-			if (!J(e)) return e.draggable || void 0;
+		function Ye(e) {
+			if (!Y(e)) return e.draggable || void 0;
 		}
-		function Ze(e, t) {
-			if (!q(e)) return;
-			let n = t.currentTarget.getBoundingClientRect(), r = R(t.clientY - n.top, n.height);
-			t.preventDefault(), K.value = {
+		function Xe(e, t) {
+			if (!J(e)) return;
+			let n = t.currentTarget.getBoundingClientRect(), r = H(t.clientY - n.top, n.height);
+			t.preventDefault(), q.value = {
 				key: e.key,
 				edge: r ? "before" : "after"
 			};
 		}
-		function Qe(e, t) {
-			if (!q(e)) return;
-			let n = K.value, i = G.value;
+		function Ze(e, t) {
+			if (!J(e)) return;
+			let n = q.value, i = K.value;
 			if (!i || !n || n.key !== e.key) return;
 			t.preventDefault();
 			let a = n.edge === "before" ? e.indexInGroup : e.indexInGroup + 1;
-			i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a), G.value = null, K.value = null;
+			i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a), K.value = null, q.value = null;
 		}
-		function $e() {
-			G.value = null, K.value = null;
+		function Qe() {
+			K.value = null, q.value = null;
 		}
-		function X(e) {
-			return t(v.selection.value, e.node.path);
+		function Z(e) {
+			return t(y.selection.value, e.node.path);
 		}
-		function et(e) {
-			return t(v.hovered.value, e.node.path);
+		function $e(e) {
+			return t(y.hovered.value, e.node.path);
 		}
-		let Z = b(""), Q = null, $ = null;
+		let Q = x(""), $ = null, et = null;
 		function tt(e) {
-			$ = e instanceof HTMLInputElement ? e : null;
+			et = e instanceof HTMLInputElement ? e : null;
 		}
 		function nt(e) {
-			return t(v.renaming.value, e.node.path);
+			return t(y.renaming.value, e.node.path);
 		}
 		function rt(e) {
-			J(e) && r.editor.beginRename(e.node.path);
+			Y(e) && r.editor.beginRename(e.node.path);
 		}
 		function it() {
-			let e = Z.value.trim();
-			if (Q !== null && e === Q.trim()) {
+			let e = Q.value.trim();
+			if ($ !== null && e === $.trim()) {
 				r.editor.cancelRename();
 				return;
 			}
@@ -458,22 +495,22 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 		function at() {
 			r.editor.cancelRename();
 		}
-		return le(v.renaming, async (e) => {
+		return le(y.renaming, async (e) => {
 			if (e === null) {
-				Q = null;
+				$ = null;
 				return;
 			}
-			let n = U.value.find((n) => t(n.node.path, e));
-			Z.value = n?.label ?? "", Q = Z.value, await oe();
-			let r = $;
+			let n = W.value.find((n) => t(n.node.path, e));
+			Q.value = n?.label ?? "", $ = Q.value, await ae();
+			let r = et;
 			r && (r.focus({ preventScroll: !0 }), r.select());
-		}), (e, t) => (y(), p("aside", ge, [
-			m("header", _e, [t[9] ||= m("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), m("div", ve, [h(re, {
+		}), (e, t) => (b(), m("aside", ge, [
+			h("header", _e, [t[9] ||= h("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), h("div", ve, [g(ne, {
 				label: "新增图层",
 				items: M.value,
-				onClosed: I
+				onClosed: F
 			}, {
-				trigger: T(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [m("button", {
+				trigger: T(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [h("button", {
 					ref: n,
 					type: "button",
 					"data-add-menu": "",
@@ -484,85 +521,85 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 					onClick: t,
 					onKeydown: r
 				}, " + ", 40, ye)]),
-				body: T(({ closeMenu: e }) => [x.value ? (y(), p(u, { key: 0 }, [
-					t[8] ||= m("p", { class: "px-2 pt-1 text-[11px] leading-4 text-cn-muted" }, "模板行按数据行路径展开成表", -1),
-					E(m("input", {
+				body: T(({ closeMenu: e }) => [S.value ? (b(), m(d, { key: 0 }, [
+					t[8] ||= h("p", { class: "px-2 pt-1 text-[11px] leading-4 text-cn-muted" }, "模板行按数据行路径展开成表", -1),
+					E(h("input", {
 						ref_key: "rowsPathInputEl",
-						ref: B,
+						ref: R,
 						"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
 						"data-template-rows-path": "",
 						type: "text",
 						placeholder: "如 order.items",
-						class: _(["mx-1 my-1 w-[calc(100%-8px)] rounded border bg-cn-field px-2 py-1 text-[12px] text-cn-fg outline-none focus:border-cn-accent/60", A.value ? "border-cn-danger" : "border-cn-field-line"]),
-						onKeydown: (t) => ze(t, e)
+						class: v(["mx-1 my-1 w-[calc(100%-8px)] rounded border bg-cn-field px-2 py-1 text-[12px] text-cn-fg outline-none focus:border-cn-accent/60", A.value ? "border-cn-danger" : "border-cn-field-line"]),
+						onKeydown: (t) => Re(t, e)
 					}, null, 42, be), [[w, k.value]]),
-					A.value ? (y(), p("p", xe, "rowsPath 必填")) : f("", !0),
-					m("div", Se, [m("button", {
+					A.value ? (b(), m("p", xe, "rowsPath 必填")) : p("", !0),
+					h("div", Se, [h("button", {
 						type: "button",
 						"data-template-confirm": "",
 						class: "flex-1 rounded bg-cn-accent/20 px-2 py-1 text-[12px] text-cn-accent hover:bg-cn-accent/30",
 						onClick: (t) => N(e)
-					}, " 创建 ", 8, Ce), m("button", {
+					}, " 创建 ", 8, Ce), h("button", {
 						type: "button",
 						class: "flex-1 rounded px-2 py-1 text-[12px] text-cn-muted hover:text-cn-fg",
 						onClick: (t) => P(e)
 					}, " 取消 ", 8, we)])
-				], 64)) : f("", !0)]),
+				], 64)) : p("", !0)]),
 				_: 1
-			}, 8, ["items"]), x.value ? (y(), ae(o, {
+			}, 8, ["items"]), S.value ? (b(), ie(o, {
 				key: 0,
 				ref_key: "pathPopupRef",
-				ref: V,
-				state: C(H),
-				onSelect: C(Re)
-			}, null, 8, ["state", "onSelect"])) : f("", !0)])]),
-			Ve.value ? f("", !0) : (y(), p("p", Te, " 画布还没有图层，用上方按钮新增 ")),
-			m("ul", {
+				ref: B,
+				state: C(U),
+				onSelect: C(Le)
+			}, null, 8, ["state", "onSelect"])) : p("", !0)])]),
+			Be.value ? p("", !0) : (b(), m("p", Te, " 画布还没有图层，用上方按钮新增 ")),
+			h("ul", {
 				class: "cn-layers__tree flex flex-col gap-0.5 px-1.5 py-1",
-				onDragend: $e
-			}, [(y(!0), p(u, null, ce(U.value, (e) => (y(), p("li", {
+				onDragend: Qe
+			}, [(b(!0), m(d, null, se(W.value, (e) => (b(), m("li", {
 				key: e.key,
 				"data-key": e.key,
-				draggable: Xe(e),
-				class: _(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
-					"cn-layers__row--selected": X(e),
-					"cn-layers__row--hovered": et(e) && !X(e),
-					"cn-layers__row--hidden": J(e) && !e.node.visible,
+				draggable: Ye(e),
+				class: v(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
+					"cn-layers__row--selected": Z(e),
+					"cn-layers__row--hovered": $e(e) && !Z(e),
+					"cn-layers__row--hidden": Y(e) && !e.node.visible,
 					"cn-layers__row--template": e.inTemplate,
-					"cursor-grab": e.draggable && !J(e),
-					"cn-layers__row--drop-before": K.value?.key === e.key && K.value?.edge === "before",
-					"cn-layers__row--drop-after": K.value?.key === e.key && K.value?.edge === "after"
+					"cursor-grab": e.draggable && !Y(e),
+					"cn-layers__row--drop-before": q.value?.key === e.key && q.value?.edge === "before",
+					"cn-layers__row--drop-after": q.value?.key === e.key && q.value?.edge === "after"
 				}]),
-				style: se({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
-				onClick: (t) => He(e),
-				onMouseenter: (t) => W(e),
-				onMouseleave: t[7] ||= (e) => W(null),
-				onDragstart: (t) => Ye(e, t),
-				onDragover: (t) => Ze(e, t),
-				onDrop: (t) => Qe(e, t)
+				style: oe({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
+				onClick: (t) => Ve(e),
+				onMouseenter: (t) => G(e),
+				onMouseleave: t[7] ||= (e) => G(null),
+				onDragstart: (t) => Je(e, t),
+				onDragover: (t) => Xe(e, t),
+				onDrop: (t) => Ze(e, t)
 			}, [
-				J(e) ? (y(), p("span", {
+				Y(e) ? (b(), m("span", {
 					key: 0,
 					"data-drag-handle": "",
 					draggable: "true",
 					title: "拖动排序",
 					class: "cn-layers__handle shrink-0",
-					onDragstart: (t) => Y(e, t)
-				}, [h(i, {
+					onDragstart: (t) => X(e, t)
+				}, [g(i, {
 					icon: C(fe),
 					size: 12,
 					"stroke-width": 2.5
-				}, null, 8, ["icon"])], 40, De)) : f("", !0),
-				e.node.expressionPrefix === "" ? f("", !0) : (y(), p("span", {
+				}, null, 8, ["icon"])], 40, De)) : p("", !0),
+				e.node.expressionPrefix === "" ? p("", !0) : (b(), m("span", {
 					key: 1,
 					class: "cn-layers__prefix",
 					title: e.node.expressionPrefix
-				}, S(e.node.expressionPrefix), 9, Oe)),
-				nt(e) ? E((y(), p("input", {
+				}, ce(e.node.expressionPrefix), 9, Oe)),
+				nt(e) ? E((b(), m("input", {
 					key: 2,
 					ref_for: !0,
 					ref: tt,
-					"onUpdate:modelValue": t[1] ||= (e) => Z.value = e,
+					"onUpdate:modelValue": t[1] ||= (e) => Q.value = e,
 					"data-rename-input": "",
 					"aria-label": "图层重命名",
 					class: "cn-layers__rename-input min-w-0 flex-1",
@@ -570,84 +607,84 @@ var ge = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
 					onDblclick: t[3] ||= O(() => {}, ["stop"]),
 					onKeydown: [t[4] ||= D(O((e) => it(), ["prevent"]), ["enter"]), t[5] ||= D(O((e) => at(), ["prevent"]), ["esc"])],
 					onBlur: t[6] ||= (e) => it()
-				}, null, 544)), [[w, Z.value]]) : (y(), p("span", {
+				}, null, 544)), [[w, Q.value]]) : (b(), m("span", {
 					key: 3,
 					class: "cn-layers__label min-w-0 flex-1 truncate font-mono text-[11px] leading-4",
 					onDblclick: (t) => rt(e)
-				}, S(e.label), 41, ke)),
-				J(e) ? (y(), p("button", {
+				}, ce(e.label), 41, ke)),
+				Y(e) ? (b(), m("button", {
 					key: 4,
 					type: "button",
 					"data-visibility": "",
-					class: _(["cn-layers__eye size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.visible ? "hidden group-hover:flex" : "flex"]),
+					class: v(["cn-layers__eye size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.visible ? "hidden group-hover:flex" : "flex"]),
 					title: e.node.visible ? "隐藏图层（最终输出不含该层）" : "显示图层",
 					"aria-pressed": !e.node.visible,
-					onClick: O((t) => qe(e), ["stop"])
-				}, [h(i, {
+					onClick: O((t) => Ke(e), ["stop"])
+				}, [g(i, {
 					icon: e.node.visible ? C(de) : C(ue),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 10, Ae)) : f("", !0),
-				J(e) ? (y(), p("button", {
+				}, null, 8, ["icon"])], 10, Ae)) : p("", !0),
+				Y(e) ? (b(), m("button", {
 					key: 5,
 					type: "button",
 					"data-lock": "",
-					class: _(["cn-layers__lock size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.locked ? "flex" : "hidden group-hover:flex"]),
+					class: v(["cn-layers__lock size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.locked ? "flex" : "hidden group-hover:flex"]),
 					title: e.node.locked ? a : "锁定图层（画布不可点选/拖动/删除，渲染照常）",
 					"aria-pressed": e.node.locked,
-					onClick: O((t) => Je(e), ["stop"])
-				}, [h(i, {
+					onClick: O((t) => qe(e), ["stop"])
+				}, [g(i, {
 					icon: e.node.locked ? C(me) : C(pe),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 10, je)) : f("", !0),
-				J(e) ? (y(), p("button", {
+				}, null, 8, ["icon"])], 10, je)) : p("", !0),
+				Y(e) ? (b(), m("button", {
 					key: 6,
 					type: "button",
 					"data-rename": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "重命名（双击名称或 F2）",
 					onClick: O((t) => rt(e), ["stop"])
-				}, [h(i, {
+				}, [g(i, {
 					icon: C(he),
 					size: 11,
 					"stroke-width": 2
-				}, null, 8, ["icon"])], 8, Me)) : f("", !0),
-				e.node.role === "root" && e.node.type === "TableLayer" ? (y(), p("button", {
+				}, null, 8, ["icon"])], 8, Me)) : p("", !0),
+				e.node.role === "root" && e.node.type === "TableLayer" ? (b(), m("button", {
 					key: 7,
 					type: "button",
 					"data-add-row": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent",
 					disabled: e.node.templated === !0,
 					title: e.node.templated === !0 ? "模板态不可加行——行由数据展开" : "加行（缺省行 + 缺省格与文本，行宽=表宽）",
-					onClick: O((t) => Ue(e), ["stop"])
-				}, " +行 ", 8, Ne)) : f("", !0),
-				e.node.role === "row" ? (y(), p("button", {
+					onClick: O((t) => He(e), ["stop"])
+				}, " +行 ", 8, Ne)) : p("", !0),
+				e.node.role === "row" ? (b(), m("button", {
 					key: 8,
 					type: "button",
 					"data-add-cell": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "加格（缺省格 + 文本内容，行高取最高格）",
-					onClick: O((t) => We(e), ["stop"])
-				}, " +格 ", 8, Pe)) : f("", !0),
-				e.node.role === "templateRow" ? (y(), p("button", {
+					onClick: O((t) => Ue(e), ["stop"])
+				}, " +格 ", 8, Pe)) : p("", !0),
+				e.node.role === "templateRow" ? (b(), m("button", {
 					key: 9,
 					type: "button",
 					"data-add-template-cell": "",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
 					title: "加格（缺省格 + 文本内容，零高度耦合——行高由数据展开定稿）",
-					onClick: O((t) => Ge(e), ["stop"])
-				}, " +格 ", 8, Fe)) : f("", !0),
-				m("button", {
+					onClick: O((t) => We(e), ["stop"])
+				}, " +格 ", 8, Fe)) : p("", !0),
+				h("button", {
 					type: "button",
 					class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-danger/15 hover:text-cn-danger group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent disabled:hover:text-cn-muted/50",
 					disabled: e.node.role === "templateRow" || e.node.locked,
-					title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? g : "删除（含子层）",
-					onClick: O((t) => Ke(e), ["stop"])
+					title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? _ : "删除（含子层）",
+					onClick: O((t) => Ge(e), ["stop"])
 				}, " ✕ ", 8, Ie)
 			], 46, Ee))), 128))], 32)
 		]));
 	}
 });
 //#endregion
-export { F as a, I as i, R as n, L as r, z as t };
+export { I as a, B as i, H as n, R as o, V as r, z as s, U as t };

package/dist/layer-panel.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./layer-panel-GiVy_B4A.js";
-export { t as ADD_LAYER_MENU, e as ADD_MENU, i as LayerPanel, n as isUpperHalf, r as useLayerPanel };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./layer-panel-BEcT9HhJ.js";
+export { t as ADD_LAYER_MENU, e as ADD_MENU, r as ADD_TEXT_PRESET_MENU, o as LayerPanel, a as PANEL_ADD_MENU, n as isUpperHalf, i as useLayerPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hankchen/canvas-editor-vue",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "Vue 3 薄绑定：响应式桥、composables、画布表面组件、textarea 文本编辑 overlay、schema 驱动属性面板注册表",
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@lucide/vue": "^1.48.0",
-    "@hankchen/canvas-editor": "0.1.1"
+    "@hankchen/canvas-editor": "0.3.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"