@weasel-js/ui 1.4.4 → 1.5.0

package/dist/chunks/createKeyframeLayer-AL4jP0EX.js

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