@hankchen/canvas-editor-vue 0.2.0 → 0.4.0

package/dist/usePathCompletion-Do17CQ6l.js

@@ -0,0 +1,220 @@
+import { a as e } from "./layerPath-uy2ywyld.js";
+import { a as t, g as n, i as r, m as i, r as a } from "./popupPosition-Ck5Gsvjy.js";
+import { nextTick as o, onMounted as s, onScopeDispose as c, reactive as l, toValue as u, watch as d } from "vue";
+//#region ../canvas-editor/src/shared/rowsPathCandidates.ts
+function f(e) {
+	return e.type === "array" || e.items !== void 0;
+}
+function p(e) {
+	return !f(e) && e.properties === void 0;
+}
+function m(e, t, n) {
+	let r = {
+		path: n === "" ? e : `${n}.${e}`,
+		segment: e
+	};
+	return t.description !== void 0 && (r.description = t.description), t.title !== void 0 && (r.title = t.title), f(t) && (r.type = "array"), r;
+}
+function h(e, t) {
+	let n = [];
+	if (e.properties !== void 0) for (let [r, i] of e.properties) p(i) || n.push(m(r, i, t));
+	return n;
+}
+function g(e, t) {
+	if (e === null) return null;
+	let r = t.split("."), i = t.endsWith(".") ? "" : r[r.length - 1], a = r.slice(0, -1), o = e;
+	for (let e of a) {
+		if (f(o)) return null;
+		let t = n(o, [e]);
+		if (t === null) return null;
+		o = t;
+	}
+	return f(o) || p(o) ? null : {
+		partial: i,
+		candidates: h(o, a.join("."))
+	};
+}
+function _(t, n, r) {
+	if (r === null) return null;
+	if (t === null || n === null) return r;
+	let a = null;
+	for (let o = 0; o < n.length; o += 1) {
+		if (n[o] !== "template") continue;
+		let s = e(t, n.slice(0, o));
+		if (s === null || s.type !== "TableLayer" || (a = i(a ?? r, s.rowsPath), a === null)) return null;
+	}
+	return a ?? r;
+}
+//#endregion
+//#region src/shared/rowsPathCompletionSource.ts
+function v(e) {
+	return e === null ? null : (t) => {
+		let n = g(e, t);
+		return n === null ? null : {
+			partial: n.partial,
+			candidates: n.candidates.map((e) => e.type === "array" ? {
+				...e,
+				type: "行数组"
+			} : e)
+		};
+	};
+}
+//#endregion
+//#region src/shared/usePathCompletion.ts
+var y = [
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+];
+function b(e) {
+	return {
+		kind: "fragment",
+		start: -2,
+		end: e.length + 2,
+		raw: "",
+		expr: e,
+		error: null,
+		diagnostic: null
+	};
+}
+function x(e) {
+	let n = l({
+		open: !1,
+		items: [],
+		activeIndex: 0,
+		top: 0,
+		left: 0
+	}), i = null, f = !1, p = "";
+	function m() {
+		n.open = !1, n.items = [], n.activeIndex = 0, p = "";
+	}
+	function h() {
+		if (!n.open || !i) return;
+		let t = r(i), o = e.popupEl ? u(e.popupEl) : null, s = a({
+			anchor: t,
+			popupWidth: o?.offsetWidth ?? 0,
+			popupHeight: o?.offsetHeight ?? 0,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight
+		});
+		n.top = s.top, n.left = s.left;
+	}
+	function g(t, r = !1) {
+		if (!u(e.enabled)) {
+			m();
+			return;
+		}
+		let a = i;
+		if (!a) {
+			m();
+			return;
+		}
+		let s = a.value.slice(0, a.selectionStart ?? a.value.length);
+		if (s === "" && !r) {
+			m();
+			return;
+		}
+		let c = e.resolve(s);
+		if (!c) {
+			m();
+			return;
+		}
+		let l = r ? c.candidates : c.candidates.filter((e) => e.segment.startsWith(c.partial));
+		if (l.length === 0) {
+			m();
+			return;
+		}
+		p = c.partial, (n.open || t) && (n.items = l, n.activeIndex = 0, n.open = !0, h(), o(h));
+	}
+	function _(e) {
+		let r = i;
+		if (!n.open || f || !r) return;
+		let a = n.items[e ?? n.activeIndex];
+		if (!a) return;
+		let o = r.value.slice(0, r.selectionStart ?? r.value.length), s = t(r.value, b(o), o.length, p, a);
+		if (!s) {
+			m();
+			return;
+		}
+		r.value = s.value, r.setSelectionRange(s.cursor, s.cursor), r.dispatchEvent(new Event("input", { bubbles: !0 })), r.dispatchEvent(new Event("change", { bubbles: !0 })), m();
+	}
+	function v(e) {
+		f || e.isComposing || g(!0);
+	}
+	function x() {
+		f = !0;
+	}
+	function S() {
+		f = !1, g(!0);
+	}
+	function C(e) {
+		return f || e.isComposing || e.keyCode === 229;
+	}
+	function w(e) {
+		if (!C(e)) {
+			if (e.key === " " && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault(), g(!0, !0);
+				return;
+			}
+			if (n.open) {
+				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+					e.preventDefault();
+					let t = n.items.length;
+					t > 0 && (n.activeIndex = (n.activeIndex + (e.key === "ArrowDown" ? 1 : t - 1)) % t);
+					return;
+				}
+				if (e.key === "Enter" || e.key === "Tab") {
+					e.preventDefault(), _();
+					return;
+				}
+				e.key === "Escape" && (e.preventDefault(), m());
+			}
+		}
+	}
+	function T(e) {
+		n.open && !C(e) && y.includes(e.key) && g(!1);
+	}
+	function E() {
+		f || g(!1);
+	}
+	function D() {
+		m();
+	}
+	function O(e) {
+		n.open && e.target !== i && m();
+	}
+	function k() {
+		h();
+	}
+	let A = [
+		["input", v],
+		["keydown", w],
+		["keyup", T],
+		["click", E],
+		["blur", D],
+		["compositionstart", x],
+		["compositionend", S]
+	];
+	function j(e) {
+		for (let [t, n] of A) e.addEventListener(t, n);
+	}
+	function M(e) {
+		for (let [t, n] of A) e.removeEventListener(t, n);
+	}
+	function N(e) {
+		i !== e && (i && M(i), i = e, e && j(e));
+	}
+	return s(() => N(e.target.value)), d(e.target, (e) => N(e)), d(() => u(e.enabled), (e) => {
+		e || m();
+	}), document.addEventListener("mousedown", O), window.addEventListener("scroll", k, !0), window.addEventListener("resize", k), c(() => {
+		i && M(i), document.removeEventListener("mousedown", O), window.removeEventListener("scroll", k, !0), window.removeEventListener("resize", k);
+	}), {
+		popup: n,
+		accept: _
+	};
+}
+//#endregion
+export { v as n, _ as r, x as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hankchen/canvas-editor-vue",
-  "version": "0.2.0",
+  "version": "0.4.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.3.0"
+    "@hankchen/canvas-editor": "0.5.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/dist/completionAnchor-CDR5YZhu.js

@@ -1,273 +0,0 @@
-import { Fragment as e, Teleport as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, nextTick as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, resolveDynamicComponent as m, toDisplayString as h, watch as g, withModifiers as _ } from "vue";
-//#region ../canvas-editor/src/shared/expressionSchema.ts
-function v(e) {
-	let t = e;
-	for (; t !== void 0;) {
-		if (t.properties !== void 0) return t.properties;
-		t = t.items;
-	}
-	return null;
-}
-function y(e, t) {
-	let n = e;
-	for (let e of t) {
-		let t = v(n)?.get(e);
-		if (t === void 0) return null;
-		n = t;
-	}
-	return n;
-}
-function b(e) {
-	if (e.type === "array" || e.items !== void 0) return { entries: [] };
-	let t = e.properties === void 0 ? [] : [...e.properties].map(([e, t]) => ({
-		key: e,
-		node: t
-	}));
-	return e.open === !0 ? {
-		entries: t,
-		open: !0
-	} : { entries: t };
-}
-function x(e, t) {
-	let n = t.split(".");
-	return t === "" || n.includes("") ? null : y(e, n)?.items ?? null;
-}
-//#endregion
-//#region ../canvas-editor/src/shared/expressionPath.ts
-function S(e) {
-	if (e === "") return {
-		ok: !1,
-		error: "expression_syntax_error"
-	};
-	let t = e.split(".");
-	if (t.includes("")) return {
-		ok: !1,
-		error: "expression_syntax_error"
-	};
-	let n = t[0], r = t.slice(1);
-	return n === "row" ? {
-		ok: !0,
-		head: { kind: "row" },
-		rest: r
-	} : n === "$root" ? {
-		ok: !0,
-		head: { kind: "root" },
-		rest: r
-	} : {
-		ok: !0,
-		head: {
-			kind: "bare",
-			name: n
-		},
-		rest: r
-	};
-}
-function C(e) {
-	let t = 0, n = e.length;
-	for (; t < n && " 	\n\r\0\v".includes(e[t]);) t += 1;
-	for (; n > t && " 	\n\r\0\v".includes(e[n - 1]);) --n;
-	return e.slice(t, n);
-}
-function w(e) {
-	let t = [], n = 0, r = e.indexOf("{{");
-	for (; r !== -1;) {
-		let i = e.indexOf("}}", r + 2);
-		if (i === -1) {
-			r > n && t.push({
-				kind: "literal",
-				start: n,
-				end: r,
-				text: e.slice(n, r)
-			});
-			let i = e.slice(r);
-			return t.push({
-				kind: "open",
-				start: r,
-				end: e.length,
-				text: i,
-				expr: C(i.slice(2))
-			}), {
-				template: e,
-				parts: t
-			};
-		}
-		r > n && t.push({
-			kind: "literal",
-			start: n,
-			end: r,
-			text: e.slice(n, r)
-		});
-		let a = e.slice(r + 2, i), o = C(a), s = S(o).ok ? null : "expression_syntax_error";
-		t.push({
-			kind: "fragment",
-			start: r,
-			end: i + 2,
-			raw: a,
-			expr: o,
-			error: s
-		}), n = i + 2, r = e.indexOf("{{", n);
-	}
-	return n < e.length && t.push({
-		kind: "literal",
-		start: n,
-		end: e.length,
-		text: e.slice(n)
-	}), {
-		template: e,
-		parts: t
-	};
-}
-function T(e, t) {
-	for (let n of e.parts) if (n.kind !== "literal" && (n.kind === "open" ? t > n.start && t <= n.end : t > n.start && t < n.end)) return n;
-	return null;
-}
-//#endregion
-//#region src/shared/PanelIcon.vue
-var E = /* @__PURE__ */ o({
-	inheritAttrs: !1,
-	__name: "PanelIcon",
-	props: {
-		icon: {},
-		size: { default: 14 },
-		strokeWidth: { default: 2 }
-	},
-	setup(e) {
-		return (t, r) => (d(), n(m(e.icon), s({
-			size: e.size,
-			"stroke-width": e.strokeWidth
-		}, t.$attrs), null, 16, ["size", "stroke-width"]));
-	}
-}), D = {
-	role: "listbox",
-	"aria-label": "表达式路径候选"
-}, O = [
-	"aria-selected",
-	"title",
-	"onClick"
-], k = { class: "cn-completion__segment font-mono text-cn-fg" }, A = {
-	key: 0,
-	class: "shrink-0 rounded-sm bg-cn-field px-1 py-0.5 text-[9px] leading-none text-cn-muted"
-}, j = {
-	key: 1,
-	class: "truncate text-[10px] leading-none text-cn-muted"
-}, M = {
-	key: 0,
-	class: "cn-completion__hint px-2 py-1.5 text-[10px] leading-none text-cn-muted"
-}, N = /* @__PURE__ */ o({
-	__name: "ExpressionCompletionPopup",
-	props: { state: {} },
-	emits: ["select"],
-	setup(o, { expose: s, emit: m }) {
-		let v = o, y = m, b = f(null);
-		return s({ rootEl: b }), g(() => v.state.activeIndex, async () => {
-			await c(), b.value?.querySelector(".cn-completion__option--active")?.scrollIntoView?.({ block: "nearest" });
-		}), (s, c) => (d(), n(t, { to: "body" }, [o.state.open ? (d(), i("div", {
-			key: 0,
-			ref_key: "rootRef",
-			ref: b,
-			class: "cn-props cn-completion fixed z-50 max-h-[200px] min-w-[140px] max-w-[280px] overflow-y-auto rounded-md border border-cn-field-line py-1 text-[11px] leading-none",
-			style: u({
-				top: `${o.state.top}px`,
-				left: `${o.state.left}px`
-			}),
-			onMousedown: c[0] ||= _(() => {}, ["prevent", "stop"]),
-			onPointerdown: c[1] ||= _(() => {}, ["stop"])
-		}, [a("div", D, [(d(!0), i(e, null, p(o.state.items, (e, t) => (d(), i("button", {
-			key: `${t}:${e.segment}`,
-			type: "button",
-			role: "option",
-			class: l(["cn-completion__option flex w-full items-center gap-1.5 px-2 py-1.5 text-left", t === o.state.activeIndex ? "cn-completion__option--active" : ""]),
-			"aria-selected": t === o.state.activeIndex,
-			title: e.path ?? e.segment,
-			onClick: (e) => y("select", t)
-		}, [
-			a("span", k, h(e.segment), 1),
-			e.type ? (d(), i("span", A, h(e.type), 1)) : r("", !0),
-			e.description ?? e.title ? (d(), i("span", j, h(e.description ?? e.title), 1)) : r("", !0)
-		], 10, O))), 128))]), o.state.openMapping ? (d(), i("div", M, " 动态字段，键由模板定义 ")) : r("", !0)], 36)) : r("", !0)]));
-	}
-});
-//#endregion
-//#region src/shared/completion.ts
-function P(e, t, n, r) {
-	let i = t.start + 2, a = t.kind === "open" ? t.end : t.end - 2, o = 0;
-	for (; a - o > i && " 	\n\r\0\v".includes(e[a - 1 - o]);) o += 1;
-	let s = a - o, c = s - n.length;
-	return c < i || e.slice(c, s) !== n ? null : {
-		value: e.slice(0, c) + r + e.slice(s),
-		cursor: c + r.length
-	};
-}
-//#endregion
-//#region src/shared/completionAnchor.ts
-function F(e, t) {
-	return parseFloat(e.getPropertyValue(t)) || 0;
-}
-function I(e, t, n) {
-	for (let r of n) {
-		let n = e.getPropertyValue(r);
-		n && t.setProperty(r, n);
-	}
-}
-var L = [
-	"font-family",
-	"font-size",
-	"font-weight",
-	"font-style",
-	"font-stretch",
-	"letter-spacing",
-	"word-spacing",
-	"line-height",
-	"text-transform",
-	"text-indent",
-	"tab-size"
-];
-function R(e) {
-	return F(e, "line-height") || F(e, "font-size") * 1.4;
-}
-function z(e) {
-	let t = document.createElement("div"), n = t.style;
-	return n.position = "fixed", n.top = "0", n.left = "0", n.visibility = "hidden", e(t, n), document.body.appendChild(t), t;
-}
-function B(e, t) {
-	let n = e.selectionStart ?? e.value.length, r = e.getBoundingClientRect(), i = getComputedStyle(e), a = F(i, "padding-left"), o = F(i, "padding-top"), s = null, c = z((t, r) => {
-		r.whiteSpace = i.whiteSpace || "pre-wrap", r.boxSizing = "content-box", r.width = `${Math.max(0, e.clientWidth - a - F(i, "padding-right"))}px`, I(i, r, [
-			"padding-left",
-			"padding-right",
-			"padding-top",
-			"padding-bottom",
-			"word-break",
-			"overflow-wrap"
-		]), I(i, r, L), s = document.createElement("span"), s.textContent = "​", t.append(document.createTextNode(e.value.slice(0, n)), s);
-	});
-	try {
-		let n = r.left + F(i, "border-left-width") + a + s.offsetLeft * t - e.scrollLeft, c = r.top + F(i, "border-top-width") + o + s.offsetTop * t - e.scrollTop;
-		return {
-			left: n,
-			top: c,
-			bottom: c + R(i) * t
-		};
-	} finally {
-		c.remove();
-	}
-}
-function V(e, t) {
-	let n = e.selectionStart ?? e.value.length, r = e.getBoundingClientRect(), i = getComputedStyle(e), a = z((t, r) => {
-		r.display = "inline-block", r.whiteSpace = "pre", I(i, r, L), t.textContent = e.value.slice(0, n);
-	});
-	try {
-		let n = a.getBoundingClientRect().width || a.offsetWidth;
-		return {
-			left: r.left + F(i, "border-left-width") + F(i, "padding-left") + n * t - e.scrollLeft,
-			top: r.top + F(i, "border-top-width"),
-			bottom: r.bottom - F(i, "border-bottom-width")
-		};
-	} finally {
-		a.remove();
-	}
-}
-function H(e, t = 1) {
-	return e instanceof HTMLTextAreaElement ? B(e, t) : V(e, t);
-}
-//#endregion
-export { T as a, x as c, E as i, b as l, P as n, w as o, N as r, S as s, H as t, y as u };