@hankchen/canvas-editor-vue 0.1.1 → 0.1.2

package/dist/property-panel.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./property-panel-jt_rsTVW.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./property-panel-Cw6T9dAQ.js";
 export { a as CANVAS_FIELD_SECTIONS, p as FIELD_SECTIONS_BY_TYPE, d as FONT_PICKER_KEY, e as IMAGE_UPLOAD_KEY, s as PropertyField, f as PropertyPanel, i as controlRegistry, n as fieldSectionsForPath, r as fieldSectionsForType, t as injectFontPicker, c as injectImageUpload, l as layerRoleAt, o as readField, u as usePropertyPanel };

package/dist/shared-BTyB4vbT.js

@@ -0,0 +1,123 @@
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, t as l, u } from "./useTransientFeedback-Cnp6aNB7.js";
+import { t as d } from "./useShortcutsHelp-CsyarO2P.js";
+import { Fragment as f, Teleport as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, defineComponent as y, onBeforeUnmount as b, onScopeDispose as x, openBlock as S, renderList as C, shallowRef as w, toDisplayString as T, unref as E, watch as D, withModifiers as O } from "vue";
+//#region src/shared/HelpDialog.vue?vue&type=script&setup=true&lang.ts
+var k = {
+	class: "cn-help__panel",
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-label": "快捷键帮助",
+	"data-help-dialog": ""
+}, A = { class: "cn-help__header" }, j = { class: "cn-help__body" }, M = ["data-help-group"], N = { class: "cn-help__section-title" }, P = { class: "cn-help__list" }, F = { class: "cn-help__label" }, I = { class: "cn-help__keys" }, L = {
+	class: "cn-help__section",
+	"data-help-interactions": ""
+}, R = { class: "cn-help__list" }, z = { class: "cn-help__label" }, B = { class: "cn-help__keys" }, V = /*#__PURE__*/ a(/* @__PURE__ */ y({
+	__name: "HelpDialog",
+	props: {
+		bindings: { default: () => n },
+		platform: {}
+	},
+	setup(n) {
+		let r = n, { open: a, close: o } = d(), c = m(() => r.platform ?? s()), l = m(() => e.map((e) => ({
+			group: e,
+			label: i[e],
+			bindings: r.bindings.filter((t) => t.group === e)
+		})).filter((e) => e.bindings.length > 0)), u = [
+			{
+				gesture: "Ctrl/⌘ + 滚轮",
+				text: "缩放画布（以指针为中心，5%–800%）"
+			},
+			{
+				gesture: "空格拖动",
+				text: "平移画布（中键拖拽、左键拖空白同效）"
+			},
+			{
+				gesture: "面板菜单 / T·G·Q·I",
+				text: "画拉建层：点层型或按键武装 → 画布拖拽定落位与尺寸（位移小于死区 = 点击兜底缺省尺寸）→ 自动选中、文本直打；Esc 取消"
+			},
+			{
+				gesture: "双击",
+				text: "就地编辑文本"
+			},
+			{
+				gesture: "Esc",
+				text: "退出编辑 / 解除武装 / 关闭弹层 / 选择逐级升级（格→行→表）"
+			},
+			{
+				gesture: "方向键",
+				text: "微调选中图层 1px（按住 Shift 大步 10px）"
+			},
+			{
+				gesture: "Tab / ⇧Tab",
+				text: "在根图层间循环选层（跳过隐藏与锁定）"
+			}
+		];
+		function y(e) {
+			e.key === "Escape" && o();
+		}
+		return D(a, (e) => {
+			e ? window.addEventListener("keydown", y) : window.removeEventListener("keydown", y);
+		}), b(() => window.removeEventListener("keydown", y)), (e, n) => (S(), h(p, { to: "body" }, [E(a) ? (S(), _("div", {
+			key: 0,
+			class: "cn-help",
+			"data-help-overlay": "",
+			onPointerdown: n[1] ||= O((...e) => E(o) && E(o)(...e), ["self"])
+		}, [v("div", k, [v("header", A, [n[2] ||= v("h2", { class: "cn-help__title" }, "快捷键", -1), v("button", {
+			type: "button",
+			class: "cn-help__close",
+			"data-help-close": "",
+			"aria-label": "关闭快捷键帮助",
+			onClick: n[0] ||= (...e) => E(o) && E(o)(...e)
+		}, " ✕ ")]), v("div", j, [(S(!0), _(f, null, C(l.value, (e) => (S(), _("section", {
+			key: e.group,
+			class: "cn-help__section",
+			"data-help-group": e.group
+		}, [v("h3", N, T(e.label), 1), v("ul", P, [(S(!0), _(f, null, C(e.bindings, (e) => (S(), _("li", {
+			key: `${e.action}:${e.combo.key}`,
+			class: "cn-help__row",
+			"data-help-shortcut": ""
+		}, [v("span", F, T(e.label), 1), v("kbd", I, T(E(t)(e.combo, c.value)), 1)]))), 128))])], 8, M))), 128)), v("section", L, [n[3] ||= v("h3", { class: "cn-help__section-title" }, "内置交互", -1), v("ul", R, [(S(), _(f, null, C(u, (e) => v("li", {
+			key: e.gesture,
+			class: "cn-help__row",
+			"data-help-interaction": ""
+		}, [v("span", z, T(e.text), 1), v("kbd", B, T(e.gesture), 1)])), 64))])])])])], 32)) : g("", !0)]));
+	}
+}), [["__scopeId", "data-v-486e5be3"]]);
+//#endregion
+//#region src/shared/useHistory.ts
+function H(e) {
+	let t = w(e.store.canUndo), n = w(e.store.canRedo), r = e.subscribe((r) => {
+		r.scope === "doc" && (t.value = e.store.canUndo, n.value = e.store.canRedo);
+	});
+	return x(r, !0), {
+		canUndo: m(() => t.value),
+		canRedo: m(() => n.value)
+	};
+}
+//#endregion
+//#region src/shared/useShortcuts.ts
+var U = new Set(Object.keys(u));
+function W(e) {
+	let t = d(), n = l(), i = (i) => {
+		let a = r({
+			key: i.key,
+			mod: i.ctrlKey || i.metaKey,
+			shift: i.shiftKey,
+			alt: i.altKey,
+			code: i.code,
+			composing: i.isComposing || i.keyCode === 229,
+			editing: e.store.ui.editing !== null,
+			editableTarget: o(i.target)
+		});
+		if (a !== null) {
+			if (i.preventDefault(), a === "helpShortcuts") {
+				t.toggle();
+				return;
+			}
+			e.executeShortcut(a), U.has(a) && n.show(c);
+		}
+	};
+	window.addEventListener("keydown", i), x(() => window.removeEventListener("keydown", i), !0);
+}
+//#endregion
+export { H as n, V as r, W as t };

package/dist/shared.js

@@ -1,9 +1,9 @@
-import { i as e, n as t, r as n, t as r } from "./completionAnchor-4lhR2kJz.js";
-import { n as i, o as a, r as o, s, t as c } from "./useTransientFeedback-gS9Xa9GY.js";
-import { i as l, n as u, r as d, t as f } from "./uploadFile-CutE_xI-.js";
-import { n as p, t as m } from "./usePathCompletion-DkHoGla4.js";
-import { n as h, t as g } from "./useViewport-BLe2ise1.js";
-import { n as _, r as v, t as y } from "./useDataSourceSchema-C924m8fc.js";
-import { t as b } from "./useShortcutsHelp-DTC3yRil.js";
-import { n as x, r as S, t as C } from "./shared-D9zYUQaw.js";
+import { i as e, n as t, r as n, t as r } from "./completionAnchor-CDR5YZhu.js";
+import { n as i, o as a, r as o, s, t as c } from "./useTransientFeedback-Cnp6aNB7.js";
+import { i as l, n as u, r as d, t as f } from "./uploadFile-BOfv8aLG.js";
+import { n as p, t as m } from "./usePathCompletion-uJ5c_gQ0.js";
+import { n as h, t as g } from "./useViewport-D9Ipevzs.js";
+import { n as _, r as v, t as y } from "./useDataSourceSchema-DStVoY8Z.js";
+import { t as b } from "./useShortcutsHelp-CsyarO2P.js";
+import { n as x, r as S, t as C } from "./shared-BTyB4vbT.js";
 export { o as ARM_LAYER_CREATE_HINT, _ as DropdownMenu, n as ExpressionCompletionPopup, S as HelpDialog, e as PanelIcon, t as applyCompletion, a as detectShortcutPlatform, d as expressionCompletionSource, l as expressionFieldContext, i as isEditableEventTarget, r as measureCursorAnchor, p as rowsPathCompletionSource, s as shortcutActionLabel, f as uploadFileFromDom, y as useDataSourceSchema, v as useDropdownMenu, u as useExpressionCompletion, x as useHistory, m as usePathCompletion, h as useSelection, C as useShortcuts, b as useShortcutsHelp, c as useTransientFeedback, g as useViewport };

package/dist/{status-bar-BhhrVoBZ.js → status-bar-DO8akYAw.js}

@@ -1,8 +1,9 @@
-import { B as e, D as t, G as n, H as r, L as i, P as a, _ as o, a as s, b as c, d as l, g as u, m as d, p as f, y as p } from "./layerPath-BRZK9ka1.js";
-import { l as m, o as h, s as g, t as _ } from "./useTransientFeedback-gS9Xa9GY.js";
-import { n as v, t as y } from "./useViewport-BLe2ise1.js";
-import { n as b, t as x } from "./useDataSourceSchema-C924m8fc.js";
-import { t as S } from "./useShortcutsHelp-DTC3yRil.js";
+import { a as e } from "./layerPath-uy2ywyld.js";
+import { l as t, o as n, s as r, t as i } from "./useTransientFeedback-Cnp6aNB7.js";
+import { n as a, t as o } from "./useViewport-D9Ipevzs.js";
+import { n as s, t as c } from "./useDataSourceSchema-DStVoY8Z.js";
+import { t as l } from "./useShortcutsHelp-CsyarO2P.js";
+import { Fragment as u, computed as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, onScopeDispose as _, openBlock as v, shallowRef as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
 //#region src/status-bar/layerPathLabel.ts
 function C(e) {
 	let t = `图层 ${String(e[1])}`;
@@ -34,11 +35,11 @@ function T(e, t) {
 }
 //#endregion
 //#region src/status-bar/useDoc.ts
-function E(t) {
-	let n = e(t.store.doc), r = t.subscribe((e) => {
-		e.scope === "doc" && (n.value = t.store.doc);
+function E(e) {
+	let t = y(e.store.doc), n = e.subscribe((n) => {
+		n.scope === "doc" && (t.value = e.store.doc);
 	});
-	return i(r, !0), f(() => n.value);
+	return _(n, !0), d(() => t.value);
 }
 //#endregion
 //#region src/status-bar/StatusBar.vue?vue&type=script&setup=true&lang.ts
@@ -71,7 +72,7 @@ var D = {
 }, F = {
 	class: "cn-statusbar__segment",
 	"data-feedback": ""
-}, I = /*#__PURE__*/ m(/* @__PURE__ */ c({
+}, I = /*#__PURE__*/ t(/* @__PURE__ */ g({
 	__name: "StatusBar",
 	props: {
 		editor: {},
@@ -80,38 +81,38 @@ var D = {
 		saveState: {},
 		feedback: { default: "" }
 	},
-	setup(e) {
-		let i = e, c = y(i.editor), m = v(i.editor), w = E(i.editor), I = x(i.editor), L = f(() => Math.round(c.value.zoom * 100)), R = f(() => {
-			let e = m.value;
+	setup(t) {
+		let g = t, _ = o(g.editor), y = a(g.editor), w = E(g.editor), I = c(g.editor), L = d(() => Math.round(_.value.zoom * 100)), R = d(() => {
+			let e = y.value;
 			return e === null ? "未选中图层" : C(e);
-		}), z = f(() => {
-			let e = m.value, t = w.value;
-			if (e === null || t === null) return null;
-			let n = s(t, e), r = i.editor.layerBoxAt(e);
-			return !n || !r ? null : T(n.position, r);
-		}), B = f(() => {
+		}), z = d(() => {
+			let t = y.value, n = w.value;
+			if (t === null || n === null) return null;
+			let r = e(n, t), i = g.editor.layerBoxAt(t);
+			return !r || !i ? null : T(r.position, i);
+		}), B = d(() => {
 			let e = I.value;
 			return e === null ? "schema 无候选" : `schema 已注入顶层 ${e.properties?.size ?? 0} 键`;
-		}), { toggle: V } = S(), H = `快捷键帮助（${g("helpShortcuts", h())}）`, U = _(), W = f(() => i.feedback === "" ? U.message.value : i.feedback);
+		}), { toggle: V } = l(), H = `快捷键帮助（${r("helpShortcuts", n())}）`, U = i(), W = d(() => g.feedback === "" ? U.message.value : g.feedback);
 		function G(e) {
-			let { width: t, height: n } = i.editor.getSurfaceSize();
-			i.editor.zoomAt(t / 2, n / 2, c.value.zoom * e);
+			let { width: t, height: n } = g.editor.getSurfaceSize();
+			g.editor.zoomAt(t / 2, n / 2, _.value.zoom * e);
 		}
-		let K = f(() => [
+		let K = d(() => [
 			{
 				label: "100%",
 				dataAttrs: { "data-zoom-100": "" },
-				run: () => i.editor.resetZoom()
+				run: () => g.editor.resetZoom()
 			},
 			{
 				label: "适应画布",
 				dataAttrs: { "data-zoom-fit": "" },
-				run: () => i.editor.fitToSurface()
+				run: () => g.editor.fitToSurface()
 			},
 			{
 				label: "适应选区",
 				dataAttrs: { "data-zoom-fit-selection": "" },
-				run: () => i.editor.fitToSelection()
+				run: () => g.editor.fitToSelection()
 			},
 			{
 				label: "放大",
@@ -126,14 +127,14 @@ var D = {
 				run: () => G(1 / 1.25)
 			}
 		]);
-		return (e, s) => (t(), o("footer", D, [
-			p(b, {
+		return (e, t) => (v(), p("footer", D, [
+			h(s, {
 				label: "缩放",
 				direction: "up",
 				items: K.value
 			}, {
-				trigger: a(({ open: e, toggle: t, triggerRef: r, onKeydown: i }) => [d("button", {
-					ref: r,
+				trigger: S(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [m("button", {
+					ref: n,
 					type: "button",
 					class: "cn-statusbar__segment cn-statusbar__zoom-trigger",
 					"data-zoom": "",
@@ -141,51 +142,51 @@ var D = {
 					"aria-expanded": e,
 					title: "缩放",
 					onClick: t,
-					onKeydown: i
-				}, n(L.value) + "% ", 41, O)]),
+					onKeydown: r
+				}, b(L.value) + "% ", 41, O)]),
 				_: 1
 			}, 8, ["items"]),
-			s[6] ||= d("span", {
+			t[6] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
 			}, null, -1),
-			d("span", k, n(R.value), 1),
-			i.pendingCount > 0 ? (t(), o(l, { key: 0 }, [s[1] ||= d("span", {
+			m("span", k, b(R.value), 1),
+			g.pendingCount > 0 ? (v(), p(u, { key: 0 }, [t[1] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
-			}, null, -1), d("span", A, " 物化中 " + n(i.pendingCount), 1)], 64)) : u("", !0),
-			z.value === null ? u("", !0) : (t(), o(l, { key: 1 }, [s[2] ||= d("span", {
+			}, null, -1), m("span", A, " 物化中 " + b(g.pendingCount), 1)], 64)) : f("", !0),
+			z.value === null ? f("", !0) : (v(), p(u, { key: 1 }, [t[2] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
-			}, null, -1), d("span", j, n(z.value), 1)], 64)),
-			i.resourceNote === "" ? u("", !0) : (t(), o(l, { key: 2 }, [s[3] ||= d("span", {
+			}, null, -1), m("span", j, b(z.value), 1)], 64)),
+			g.resourceNote === "" ? f("", !0) : (v(), p(u, { key: 2 }, [t[3] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
-			}, null, -1), d("span", M, n(i.resourceNote), 1)], 64)),
-			i.saveState === void 0 ? u("", !0) : (t(), o(l, { key: 3 }, [s[4] ||= d("span", {
+			}, null, -1), m("span", M, b(g.resourceNote), 1)], 64)),
+			g.saveState === void 0 ? f("", !0) : (v(), p(u, { key: 3 }, [t[4] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
-			}, null, -1), d("span", N, n(i.saveState === "dirty" ? "● 未保存" : "○ 已保存"), 1)], 64)),
-			s[7] ||= d("span", {
+			}, null, -1), m("span", N, b(g.saveState === "dirty" ? "● 未保存" : "○ 已保存"), 1)], 64)),
+			t[7] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
 			}, null, -1),
-			d("span", P, n(B.value), 1),
-			W.value === "" ? u("", !0) : (t(), o(l, { key: 4 }, [s[5] ||= d("span", {
+			m("span", P, b(B.value), 1),
+			W.value === "" ? f("", !0) : (v(), p(u, { key: 4 }, [t[5] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
-			}, null, -1), d("span", F, n(W.value), 1)], 64)),
-			s[8] ||= d("span", {
+			}, null, -1), m("span", F, b(W.value), 1)], 64)),
+			t[8] ||= m("span", {
 				class: "cn-statusbar__divider",
 				"aria-hidden": "true"
 			}, null, -1),
-			d("button", {
+			m("button", {
 				type: "button",
 				class: "cn-statusbar__segment cn-statusbar__help",
 				"data-help": "",
 				"aria-haspopup": "dialog",
 				title: H,
-				onClick: s[0] ||= (...e) => r(V) && r(V)(...e)
+				onClick: t[0] ||= (...e) => x(V) && x(V)(...e)
 			}, " 快捷键 ")
 		]));
 	}

package/dist/status-bar.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./status-bar-BhhrVoBZ.js";
+import { n as e, r as t, t as n } from "./status-bar-DO8akYAw.js";
 export { n as StatusBar, e as formatLayerGeometry, t as formatLayerPath };