@weasel-js/ui 1.4.4 → 1.5.1

package/dist/chunks/createKeyframeLayer-7j7ukrSx.js

@@ -0,0 +1,699 @@
+import { t as e } from "./dlog-CMYiRF3Q.js";
+import { c as t, s as n, t as r } from "./Plot2D-Czvyt_vG.js";
+import { t as i } from "./snap-B0WQwetQ.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cubicBezierEasing as c, openPointerSession as l, resolveEasing as u } from "@weasel-js/core";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { tokenPx as g } from "@weasel-js/theme";
+//#region src/components/CurveEditor/hitTest.ts
+function _(e, t, n) {
+	let r = n * n, i = null;
+	for (let n = 0; n < e.length; n++) {
+		let a = e[n], o = a.x - t.x, s = a.y - t.y, c = o * o + s * s;
+		c > r || (i === null || c < i.d2) && (i = {
+			index: n,
+			d2: c
+		});
+	}
+	return i ? { index: i.index } : null;
+}
+function v(e, t, n) {
+	let r = n * n, i = null;
+	for (let n = 0; n < e.length; n++) {
+		let a = e[n];
+		if (a.length < 2) continue;
+		let o = a.length - 1;
+		for (let e = 0; e < o; e++) {
+			let s = a[e], c = a[e + 1], l = c.x - s.x, u = c.y - s.y, d = t.x - s.x, f = t.y - s.y, p = l * l + u * u, m = p > 0 ? (d * l + f * u) / p : 0;
+			m < 0 ? m = 0 : m > 1 && (m = 1);
+			let h = s.x + m * l, g = s.y + m * u, _ = h - t.x, v = g - t.y, y = _ * _ + v * v;
+			if (y > r) continue;
+			let b = (e + m) / o;
+			(i === null || y < i.d2) && (i = {
+				segIdx: n,
+				t: b,
+				d2: y
+			});
+		}
+	}
+	return i ? {
+		segIdx: i.segIdx,
+		t: i.t
+	} : null;
+}
+//#endregion
+//#region src/handles.ts
+var y = [
+	"--wzl-handle-size",
+	"--wzl-handle-size-sm",
+	"--wzl-handle-size-lg"
+];
+function b(e, t) {
+	return g(e, t);
+}
+function x(e, t) {
+	return b(e, t) / 2;
+}
+var S = {
+	root: "_root_61ttk_1",
+	fill: "_fill_61ttk_18",
+	curve: "_curve_61ttk_24",
+	anchor: "_anchor_61ttk_31",
+	active: "_active_61ttk_42",
+	pinned: "_pinned_61ttk_47",
+	locked: "_locked_61ttk_54",
+	endpoint: "_endpoint_61ttk_62",
+	hidden: "_hidden_61ttk_70",
+	keyframe: "_keyframe_61ttk_84",
+	handle: "_handle_61ttk_91",
+	segmentTarget: "_segmentTarget_61ttk_97",
+	keyframeGhost: "_keyframeGhost_61ttk_107",
+	segmentBand: "_segmentBand_61ttk_115",
+	handleStem: "_handleStem_61ttk_135"
+}, C = {
+	shift: !1,
+	alt: !1,
+	meta: !1,
+	ctrl: !1
+};
+function w(e) {
+	return {
+		shift: e.shiftKey,
+		alt: e.altKey,
+		meta: e.metaKey,
+		ctrl: e.ctrlKey
+	};
+}
+function T(i) {
+	let { layers: a, onLayerChange: c, onLayerCommit: u, width: g, height: _, xRange: v = [0, 1], yRange: y = [0, 1], grid: b, axes: x, xTicks: T, yTicks: E, className: D, style: O, children: k } = i, A = i.history !== !1, j = p(() => ({
+		xMin: v[0],
+		xMax: v[1],
+		yMin: y[0],
+		yMax: y[1]
+	}), [v, y]), M = p(() => ({
+		width: g,
+		height: _
+	}), [g, _]), N = m(a);
+	N.current = a;
+	let P = m(j);
+	P.current = j;
+	let F = m(M);
+	F.current = M;
+	let I = m(null), L = d((e) => {
+		let r = P.current, i = F.current;
+		return {
+			modelRange: r,
+			plotSize: i,
+			toPlot: (e) => n(e, r, i),
+			toModel: (e) => t(e, r, i),
+			modifiers: e
+		};
+	}, []), R = m(null), [z, B] = h(null), V = m([]), H = m([]), U = d(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of N.current) e.set(t.layer.id, t.state);
+		return e;
+	}, []), W = d((e) => {
+		let t = N.current;
+		for (let n of t) {
+			let t = e.get(n.layer.id);
+			t !== void 0 && t !== n.state && c(n.layer.id, t);
+		}
+	}, [c]), G = d(() => {
+		if (!A) return;
+		let e = V.current;
+		if (e.length === 0) return;
+		let t = e.pop();
+		H.current.push(U()), W(t);
+	}, [
+		A,
+		U,
+		W
+	]), K = d(() => {
+		if (!A) return;
+		let e = H.current;
+		if (e.length === 0) return;
+		let t = e.pop();
+		V.current.push(U()), W(t);
+	}, [
+		A,
+		U,
+		W
+	]), q = m(() => {}), J = m(() => {}), Y = m(() => {}), X = m(null), Z = d(() => {
+		X.current = null, R.current = null, B(null);
+	}, []), Q = d((e) => {
+		for (let t of N.current) if (t.layer.id === e) return t.state;
+	}, []);
+	q.current = (e) => {
+		let t = R.current;
+		if (!t) return;
+		let n = I.current;
+		if (!n) return;
+		let r = n.clientToModel(e), i = Q(t.layerId);
+		if (i === void 0) return;
+		let a = L(w(e)), o = t.gesture.onMove(i, r, e, a);
+		o !== i && c(t.layerId, o);
+	}, J.current = (e) => {
+		let t = R.current;
+		if (!t) return;
+		let n = Q(t.layerId);
+		if (n === void 0) {
+			Z();
+			return;
+		}
+		let r = L(w(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
+		i !== n && c(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), u && u(t.layerId, i, t.startSelfState), Z();
+	}, Y.current = () => {
+		let e = R.current;
+		if (!e) return;
+		let t = Q(e.layerId);
+		if (t === void 0) {
+			Z();
+			return;
+		}
+		let n = L(C), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
+		r !== t && c(e.layerId, r), Z();
+	};
+	let $ = d((e, t, n) => {
+		let r = U();
+		R.current = {
+			layerId: e,
+			gesture: n,
+			startStates: r,
+			startSelfState: r.get(e)
+		}, B(e), X.current = l(t.currentTarget, t, {
+			onMove: (e) => q.current(e),
+			onEnd: (e) => J.current(e),
+			onCancel: () => Y.current()
+		}, { capture: !1 });
+	}, [U]), ee = d((t, n) => {
+		if (R.current) return;
+		let r = L(w(t)), i = N.current, a = t.nativeEvent;
+		e("layered-curve-editor", "pointerdown", {
+			plot: n.plot,
+			model: n.model,
+			layers: i.length
+		});
+		let o = U();
+		for (let e = i.length - 1; e >= 0; e--) {
+			let s = i[e], l = s.layer.hitTest?.(s.state, n.plot, r);
+			if (!l) continue;
+			let d = s.state, f, p = s.layer.onPointerDown?.(d, l, a, r, {
+				plot: n.plot,
+				model: n.model,
+				commit(e) {
+					f = e, c(s.layer.id, e);
+				}
+			});
+			if (t.stopPropagation(), p) {
+				$(s.layer.id, t, p);
+				return;
+			}
+			f !== void 0 && (A && (V.current.push(o), H.current = []), u?.(s.layer.id, f, d));
+			return;
+		}
+		let s = null;
+		for (let e = i.length - 1; e >= 0; e--) {
+			let l = i[e];
+			if (!l.layer.onEmptyPointerDown) continue;
+			let u = l.state, d, f = l.layer.onEmptyPointerDown(u, n.model, a, r, {
+				plot: n.plot,
+				model: n.model,
+				commit(e) {
+					d = e, c(l.layer.id, e);
+				}
+			});
+			if (f) {
+				$(l.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = o, R.current.startSelfState = o.get(l.layer.id));
+				return;
+			}
+			if (d !== void 0) {
+				s = {
+					id: l.layer.id,
+					next: d,
+					prev: u
+				};
+				break;
+			}
+		}
+		s && (A && (V.current.push(o), H.current = []), u?.(s.id, s.next, s.prev));
+	}, [
+		L,
+		$,
+		c,
+		u,
+		A,
+		U
+	]), te = d((e) => {
+		let t = L(w(e)), n = N.current;
+		if (A && (e.metaKey || e.ctrlKey)) {
+			let t = e.key.toLowerCase();
+			if (t === "z") {
+				e.shiftKey ? K() : G(), e.preventDefault();
+				return;
+			}
+			if (t === "y") {
+				K(), e.preventDefault();
+				return;
+			}
+		}
+		for (let r = n.length - 1; r >= 0; r--) {
+			let i = n[r];
+			if (!i.layer.onKeyDown) continue;
+			let a = U(), o;
+			if (i.layer.onKeyDown(i.state, e.nativeEvent, t, { commit(e) {
+				o = e, c(i.layer.id, e);
+			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), u?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
+		}
+	}, [
+		A,
+		G,
+		K,
+		L,
+		U,
+		c,
+		u
+	]);
+	f(() => () => {
+		X.current?.cancel();
+	}, []);
+	let ne = p(() => ({
+		modelRange: j,
+		plotSize: M,
+		toPlot: (e) => n(e, j, M),
+		toModel: (e) => t(e, j, M)
+	}), [j, M]);
+	return /* @__PURE__ */ s(r, {
+		ref: I,
+		className: [S.root, D].filter(Boolean).join(" "),
+		style: O,
+		width: g,
+		height: _,
+		xRange: v,
+		yRange: y,
+		grid: b,
+		axes: x,
+		xTicks: T,
+		yTicks: E,
+		tabIndex: A ? 0 : void 0,
+		role: "group",
+		"aria-label": i["aria-label"],
+		onPointerDown: ee,
+		onKeyDown: te,
+		children: [k, a.map((e) => {
+			let t = {
+				...ne,
+				modifiers: {
+					shift: !1,
+					alt: !1,
+					meta: !1,
+					ctrl: !1
+				},
+				isActive: z === e.layer.id
+			};
+			return /* @__PURE__ */ o("g", {
+				"data-layer-id": e.layer.id,
+				children: e.layer.render(e.state, t)
+			}, e.layer.id);
+		})]
+	});
+}
+//#endregion
+//#region src/components/CurveEditor/createKeyframeLayer.tsx
+var E = 16, D = 8, O = 8, k = 6, A = x("--wzl-handle-size"), j = 3.5, M = 10, N = .01;
+function P(e) {
+	return {
+		keys: e,
+		selectedKey: null,
+		selectedSegment: null,
+		drag: null
+	};
+}
+function F(e, t) {
+	return t ? Math.min(t[1], Math.max(t[0], e)) : e;
+}
+function I(e) {
+	let t = e?.easing;
+	return typeof t == "object" && t && "bezier" in t ? t.bezier : null;
+}
+function L(e, t, n, r) {
+	let i = {
+		...e[t],
+		t: n,
+		value: r
+	}, a = e.filter((e, n) => n !== t), o = a.findIndex((e) => e.t > n), s = o === -1 ? a.length : o;
+	return a.splice(s, 0, i), {
+		keys: a,
+		selectedKey: s
+	};
+}
+function R(e) {
+	let { drag: t, keys: n } = e;
+	if (!t) return {
+		keys: n,
+		selectedKey: e.selectedKey
+	};
+	if (t.kind === "key") {
+		let e = n[t.index];
+		return e && e.t === t.t && e.value === t.value ? {
+			keys: n,
+			selectedKey: t.index
+		} : L(n, t.index, t.t, t.value);
+	}
+	let r = n.slice();
+	return r[t.segment] = {
+		...n[t.segment],
+		easing: { bezier: t.bezier }
+	}, {
+		keys: r,
+		selectedKey: e.selectedKey
+	};
+}
+function z(e = {}) {
+	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), l = e.snapRadiusPx ?? 6;
+	function d(e, t, n) {
+		let r = e.drag;
+		return r?.kind === "handle" && r.segment === n ? c(...r.bezier) : u(t[n].easing);
+	}
+	function f(e, t, n) {
+		let r = [];
+		for (let i = 1; i < t.length; i++) {
+			let a = t[i - 1], o = t[i], s = d(e, t, i), c = [];
+			for (let e = 0; e <= E; e++) {
+				let t = e / E;
+				c.push(n.toPlot({
+					x: a.t + (o.t - a.t) * t,
+					y: a.value + (o.value - a.value) * s(t)
+				}));
+			}
+			r.push(c);
+		}
+		return r;
+	}
+	function p(e) {
+		let t = e.selectedSegment;
+		if (t === null || t < 1 || t >= e.keys.length) return null;
+		let n = e.drag;
+		return n?.kind === "handle" && n.segment === t ? n.bezier : I(e.keys[t]);
+	}
+	function m(e, t, n) {
+		let r = e.keys[e.selectedSegment - 1], i = e.keys[e.selectedSegment], a = (e, t) => n.toPlot({
+			x: r.t + e * (i.t - r.t),
+			y: r.value + t * (i.value - r.value)
+		});
+		return [a(t[0], t[1]), a(t[2], t[3])];
+	}
+	let h = (e) => e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x.toFixed(2)},${e.y.toFixed(2)}`).join("");
+	function g(e, t) {
+		let i = e.drag?.kind === "key" ? R(e).keys : e.keys, c = f(e, i, t), l = c.flatMap((e, t) => t === 0 ? e : e.slice(1)), u = e.selectedSegment, d = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
+		return /* @__PURE__ */ s(a, { children: [
+			u !== null && u >= 1 && u < i.length ? (() => {
+				let e = t.toPlot({
+					x: i[u - 1].t,
+					y: 0
+				}).x, n = t.toPlot({
+					x: i[u].t,
+					y: 0
+				}).x;
+				return /* @__PURE__ */ o("rect", {
+					className: S.segmentBand,
+					x: Math.min(e, n),
+					y: 0,
+					width: Math.abs(n - e),
+					height: t.plotSize.height
+				});
+			})() : null,
+			l.length > 1 ? /* @__PURE__ */ o("path", {
+				"data-curve-element": "curve",
+				className: S.curve,
+				d: h(l)
+			}) : null,
+			c.map((e, t) => /* @__PURE__ */ o("path", {
+				className: S.segmentTarget,
+				d: h(e),
+				role: "button",
+				tabIndex: 0,
+				"aria-label": `${n} segment into ${r(i[t + 1].t)}`,
+				"aria-current": u === t + 1 ? "true" : void 0,
+				"data-segment-index": t + 1
+			}, `seg-${t + 1}`)),
+			d ? (() => {
+				let [r, i] = m(e, d, t), c = t.toPlot({
+					x: e.keys[u - 1].t,
+					y: e.keys[u - 1].value
+				}), l = t.toPlot({
+					x: e.keys[u].t,
+					y: e.keys[u].value
+				});
+				return /* @__PURE__ */ s(a, { children: [
+					/* @__PURE__ */ o("line", {
+						className: S.handleStem,
+						x1: c.x,
+						y1: c.y,
+						x2: r.x,
+						y2: r.y
+					}),
+					/* @__PURE__ */ o("line", {
+						className: S.handleStem,
+						x1: l.x,
+						y1: l.y,
+						x2: i.x,
+						y2: i.y
+					}),
+					[r, i].map((e, t) => /* @__PURE__ */ o("circle", {
+						className: S.handle,
+						cx: e.x,
+						cy: e.y,
+						r: j,
+						role: "button",
+						tabIndex: 0,
+						"aria-label": `${n} bezier handle ${t + 1}`,
+						"data-handle-index": t
+					}, `handle-${t}`))
+				] });
+			})() : null,
+			e.keys.map((i, a) => {
+				let s = t.toPlot({
+					x: i.t,
+					y: i.value
+				});
+				return /* @__PURE__ */ o("rect", {
+					className: S.keyframe,
+					x: s.x - A,
+					y: s.y - A,
+					width: A * 2,
+					height: A * 2,
+					transform: `rotate(45 ${s.x} ${s.y})`,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `${n} key at ${r(i.t)}`,
+					"aria-current": e.selectedKey === a ? "true" : void 0,
+					"data-keyframe-index": a,
+					"data-dragging": g === a ? "true" : void 0
+				}, `key-${a}`);
+			}),
+			e.drag?.kind === "key" ? (() => {
+				let n = t.toPlot({
+					x: e.drag.t,
+					y: e.drag.value
+				});
+				return /* @__PURE__ */ o("rect", {
+					"aria-hidden": "true",
+					className: S.keyframeGhost,
+					x: n.x - A,
+					y: n.y - A,
+					width: A * 2,
+					height: A * 2,
+					transform: `rotate(45 ${n.x} ${n.y})`,
+					"data-keyframe-ghost": ""
+				});
+			})() : null
+		] });
+	}
+	function y(e, t, n) {
+		let r = p(e);
+		if (r) {
+			let i = _(m(e, r, n), t, O);
+			if (i) return {
+				kind: "handle",
+				payload: { handle: i.index }
+			};
+		}
+		let i = _(e.keys.map((e) => n.toPlot({
+			x: e.t,
+			y: e.value
+		})), t, D);
+		if (i) return {
+			kind: "key",
+			payload: { index: i.index }
+		};
+		let a = v(f(e, e.keys, n), t, k);
+		return a ? {
+			kind: "segment",
+			payload: { segment: a.segIdx + 1 }
+		} : null;
+	}
+	function b(t) {
+		return {
+			onMove(n, r, a, o) {
+				let s = F(r.x, e.xClamp);
+				if (e.snapX && !a.altKey) {
+					let t = (o.modelRange.xMax - o.modelRange.xMin) / o.plotSize.width;
+					s = F(i(s, e.snapX, Math.abs(t) * l), e.xClamp);
+				}
+				return {
+					...n,
+					drag: {
+						kind: "key",
+						index: t,
+						t: s,
+						value: F(r.y, e.yClamp)
+					}
+				};
+			},
+			onCommit(e) {
+				return {
+					...e,
+					...R(e),
+					drag: null
+				};
+			},
+			onCancel(e) {
+				return {
+					...e,
+					drag: null
+				};
+			}
+		};
+	}
+	function x(e, t) {
+		return {
+			onMove(n, r) {
+				let i = n.keys[e - 1], a = n.keys[e], o = n.drag;
+				if (!i || !a || o?.kind !== "handle") return n;
+				let s = a.t === i.t ? 0 : Math.min(1, Math.max(0, (r.x - i.t) / (a.t - i.t))), c = a.value === i.value ? 0 : (r.y - i.value) / (a.value - i.value), l = [...o.bezier];
+				return l[t * 2] = s, l[t * 2 + 1] = c, {
+					...n,
+					drag: {
+						kind: "handle",
+						segment: e,
+						bezier: l
+					}
+				};
+			},
+			onCommit(e) {
+				return {
+					...e,
+					...R(e),
+					drag: null
+				};
+			},
+			onCancel(e) {
+				return {
+					...e,
+					drag: null
+				};
+			}
+		};
+	}
+	function C(e, t, n, r, i) {
+		if (n.button === 0) {
+			if (t.kind === "handle") {
+				let n = p(e), r = e.selectedSegment;
+				if (!n || r === null) return;
+				let { handle: a } = t.payload;
+				return i.commit({
+					...e,
+					drag: {
+						kind: "handle",
+						segment: r,
+						bezier: n
+					}
+				}), x(r, a);
+			}
+			if (t.kind === "key") {
+				let { index: n } = t.payload, r = e.keys[n];
+				return i.commit({
+					...e,
+					selectedKey: n,
+					drag: {
+						kind: "key",
+						index: n,
+						t: r.t,
+						value: r.value
+					}
+				}), b(n);
+			}
+			if (t.kind === "segment") {
+				let { segment: n } = t.payload;
+				i.commit({
+					...e,
+					selectedSegment: n
+				});
+			}
+		}
+	}
+	function w(n, r, i, a) {
+		let o = r.target;
+		if (o?.closest?.("[data-layer-id]")?.getAttribute("data-layer-id") !== t) return;
+		let s = r.key === "Enter" || r.key === " ", c = r.key === "ArrowRight" ? 1 : r.key === "ArrowLeft" ? -1 : 0, l = r.key === "ArrowUp" ? 1 : r.key === "ArrowDown" ? -1 : 0, u = r.shiftKey ? M : 1, d = o.closest("[data-keyframe-index]");
+		if (d) {
+			let t = Number(d.getAttribute("data-keyframe-index")), o = n.keys[t];
+			if (!o) return;
+			if (s) {
+				r.preventDefault(), a.commit({
+					...n,
+					selectedKey: t
+				});
+				return;
+			}
+			if (c === 0 && l === 0) return;
+			r.preventDefault();
+			let f = i.modelRange, p = (e.step?.x ?? Math.abs(f.xMax - f.xMin) / 100) * u, m = (e.step?.y ?? Math.abs(f.yMax - f.yMin) / 100) * u, h = F(o.t + c * p, e.xClamp), g = F(o.value + l * m, e.yClamp);
+			if (h === o.t && g === o.value) return;
+			a.commit({
+				...n,
+				...L(n.keys, t, h, g),
+				drag: null
+			});
+			return;
+		}
+		let f = o.closest("[data-segment-index]");
+		if (f && s) {
+			r.preventDefault(), a.commit({
+				...n,
+				selectedSegment: Number(f.getAttribute("data-segment-index"))
+			});
+			return;
+		}
+		let m = o.closest("[data-handle-index]"), h = p(n);
+		if (m && h && n.selectedSegment !== null && (c !== 0 || l !== 0)) {
+			r.preventDefault();
+			let e = Number(m.getAttribute("data-handle-index")), t = [...h];
+			t[e * 2] = Math.min(1, Math.max(0, t[e * 2] + c * N * u)), t[e * 2 + 1] += l * N * u;
+			let i = {
+				kind: "handle",
+				segment: n.selectedSegment,
+				bezier: t
+			};
+			a.commit({
+				...n,
+				...R({
+					...n,
+					drag: i
+				}),
+				drag: null
+			});
+		}
+	}
+	return {
+		id: t,
+		render: g,
+		hitTest: y,
+		onPointerDown: C,
+		onKeyDown: w
+	};
+}
+//#endregion
+export { S as a, b as c, T as i, _ as l, z as n, y as o, P as r, x as s, R as t, v as u };
+
+//# sourceMappingURL=createKeyframeLayer-7j7ukrSx.js.map