@weasel-js/ui 1.2.0 → 1.3.0

package/dist/chunks/{CurveEditor-SmwwvrsA.js → CurveEditor-DiJk0NhK.js}

@@ -1,6 +1,7 @@
-import { i as e, n as t, r as n, t as r } from "./Plot2D-CEnhzodm.js";
-import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { t as e } from "./dlog-CMYiRF3Q.js";
+import { n as t, r as n, t as r } from "./Plot2D-BEjpJhk-.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 //#region src/components/CurveEditor/catmullRom.ts
 function f(e, t, n) {
 	let r = t.x - e.x, i = t.y - e.y;
@@ -199,59 +200,59 @@ function A(e) {
 	return (e.constrain ?? "none") === "function" ? "monotone" : e.interpolation ?? "catmull-rom";
 }
 function j(t = {}) {
-	let n = t.id ?? "function", r = t.domain ?? "2d", i = t.endpoints ?? "free", a = t.constrain ?? "none", o = t.addPointMode ?? "click-curve", s = A(t), c = t.interactive !== !1, f = t.curve !== !1 && t.curve !== null;
+	let n = t.id ?? "function", r = t.domain ?? "2d", s = t.endpoints ?? "free", c = t.constrain ?? "none", l = t.addPointMode ?? "click-curve", u = A(t), d = t.interactive !== !1, f = t.curve !== !1 && t.curve !== null;
 	function p(e, n) {
-		let { points: r, activeIndex: a } = e, o = O(r, n), p = "", m = null;
+		let { points: r, activeIndex: c } = e, l = O(r, n), p = "", m = null;
 		if (r.length >= 2) {
-			let e = y(r, C, s).map((e) => n.toPlot(e)), i = [`M${e[0].x.toFixed(2)},${e[0].y.toFixed(2)}`];
+			let e = y(r, C, u).map((e) => n.toPlot(e)), i = [`M${e[0].x.toFixed(2)},${e[0].y.toFixed(2)}`];
 			for (let t = 1; t < e.length; t++) i.push(`L${e[t].x.toFixed(2)},${e[t].y.toFixed(2)}`);
 			if (p = i.join(""), t.fill) {
 				let r = t.fill.side === "below" ? n.plotSize.height : 0, a = e[0], o = e[e.length - 1], s = [...i];
 				s.push(`L${o.x.toFixed(2)},${r.toFixed(2)}`), s.push(`L${a.x.toFixed(2)},${r.toFixed(2)}`), s.push("Z"), m = s.join("");
 			}
 		}
-		return /* @__PURE__ */ d(l, { children: [
-			m && /* @__PURE__ */ u("path", {
+		return /* @__PURE__ */ o(i, { children: [
+			m && /* @__PURE__ */ a("path", {
 				"data-curve-element": "fill",
 				className: S.fill,
 				d: m,
 				fill: t.fill ? t.fill.color : void 0
 			}),
-			p && f && /* @__PURE__ */ u("path", {
+			p && f && /* @__PURE__ */ a("path", {
 				className: S.curve,
 				d: p,
 				fill: "none"
 			}),
-			c && o.map((e, n) => {
-				let o = D(n, r.length, i), s = r[n]?.locked === !0;
-				if ((s || o) && t.hideNonInteractive) return null;
-				let c = a === n, l = f && (n === 0 || n === r.length - 1);
+			d && l.map((e, n) => {
+				let i = D(n, r.length, s), o = r[n]?.locked === !0;
+				if ((o || i) && t.hideNonInteractive) return null;
+				let l = c === n, u = f && (n === 0 || n === r.length - 1);
 				if (t.renderAnchor) {
-					let i = t.renderAnchor({
+					let s = t.renderAnchor({
 						point: r[n],
 						index: n,
 						cx: e.x,
 						cy: e.y,
-						isActive: c,
-						isLocked: s,
-						isPinnedEndpoint: o,
-						isEndpoint: l
+						isActive: l,
+						isLocked: o,
+						isPinnedEndpoint: i,
+						isEndpoint: u
 					});
-					if (i != null) return /* @__PURE__ */ u("g", {
+					if (s != null) return /* @__PURE__ */ a("g", {
 						"data-anchor-index": n,
-						children: i
+						children: s
 					}, n);
 				}
 				let d = [
 					S.anchor,
-					l && S.endpoint,
-					(o || s) && S.pinned,
-					s && S.locked,
-					c && S.active
+					u && S.endpoint,
+					(i || o) && S.pinned,
+					o && S.locked,
+					l && S.active
 				].filter(Boolean).join(" ");
-				if (l || s) {
-					let t = s ? 3.55 : 5;
-					return /* @__PURE__ */ u("rect", {
+				if (u || o) {
+					let t = o ? 3.55 : 5;
+					return /* @__PURE__ */ a("rect", {
 						className: d,
 						x: e.x - t,
 						y: e.y - t,
@@ -261,7 +262,7 @@ function j(t = {}) {
 						"data-anchor-index": n
 					}, n);
 				}
-				return /* @__PURE__ */ u("circle", {
+				return /* @__PURE__ */ a("circle", {
 					className: d,
 					cx: e.x,
 					cy: e.y,
@@ -272,14 +273,14 @@ function j(t = {}) {
 		] });
 	}
 	function m(e, t, n) {
-		if (!c) return null;
+		if (!d) return null;
 		let r = b(O(e.points, n), t, w);
 		if (r) return {
 			kind: "anchor",
 			payload: { index: r.index }
 		};
-		if (o === "click-curve" && f) {
-			let r = x(k(e.points, s, n), t, T);
+		if (l === "click-curve" && f) {
+			let r = x(k(e.points, u, n), t, T);
 			if (r) return {
 				kind: "curve",
 				payload: {
@@ -292,21 +293,21 @@ function j(t = {}) {
 	}
 	function h(e) {
 		return {
-			onMove(n, o, s, c) {
+			onMove(n, i, a, o) {
 				let l = n.points;
 				if (e < 0 || e >= l.length) return n;
-				let u = c.modelRange, d = t.xClamp ? t.xClamp[0] : u.xMin, f = t.xClamp ? t.xClamp[1] : u.xMax, p = o.x, m = o.y, h = e === 0 || e === l.length - 1;
-				if (i === "pinned-both" && h) p = l[e].x, m = l[e].y;
-				else if (i === "pinned-x" && h) p = e === 0 ? d : f;
-				else if (a === "function" || r === "1d") {
-					let t = a === "function" ? (f - d) / 1e3 : 0, n = e > 0 ? l[e - 1].x + t : d, r = e < l.length - 1 ? l[e + 1].x - t : f;
+				let u = o.modelRange, d = t.xClamp ? t.xClamp[0] : u.xMin, f = t.xClamp ? t.xClamp[1] : u.xMax, p = i.x, m = i.y, h = e === 0 || e === l.length - 1;
+				if (s === "pinned-both" && h) p = l[e].x, m = l[e].y;
+				else if (s === "pinned-x" && h) p = e === 0 ? d : f;
+				else if (c === "function" || r === "1d") {
+					let t = c === "function" ? (f - d) / 1e3 : 0, n = e > 0 ? l[e - 1].x + t : d, r = e < l.length - 1 ? l[e + 1].x - t : f;
 					p = Math.max(n, Math.min(r, p));
 				}
 				p = Math.max(Math.min(d, f), Math.min(Math.max(d, f), p));
 				let g = E({
 					x: p,
 					y: m
-				}, c), _ = l.slice();
+				}, o), _ = l.slice();
 				return _[e] = {
 					...l[e],
 					x: g.x,
@@ -331,73 +332,73 @@ function j(t = {}) {
 			}
 		};
 	}
-	function g(o, s, c, l, u) {
-		if (s.kind === "anchor") {
-			let { index: r } = s.payload;
+	function g(i, a, o, l, u) {
+		if (a.kind === "anchor") {
+			let { index: r } = a.payload;
 			if (e("function-layer", "anchor-down", {
 				id: n,
 				index: r,
 				shift: l.modifiers.shift,
-				button: c.button
-			}), o.points[r]?.locked) return;
+				button: o.button
+			}), i.points[r]?.locked) return;
 			if (l.modifiers.shift) {
-				if (D(r, o.points.length, i) || t.minPoints !== void 0 && o.points.length <= t.minPoints) return;
+				if (D(r, i.points.length, s) || t.minPoints !== void 0 && i.points.length <= t.minPoints) return;
 				u.commit({
-					...o,
-					points: o.points.filter((e, t) => t !== r),
+					...i,
+					points: i.points.filter((e, t) => t !== r),
 					activeIndex: null
 				});
 				return;
 			}
-			return c.button === 2 ? void 0 : (u.commit({
-				...o,
+			return o.button === 2 ? void 0 : (u.commit({
+				...i,
 				activeIndex: r
 			}), h(r));
 		}
-		if (s.kind === "curve") {
-			let { segIdx: e } = s.payload;
-			if (t.maxPoints !== void 0 && o.points.length >= t.maxPoints) return;
-			let n = e + 1, i = E(u.model, l);
-			if (a === "function" || r === "1d") {
-				let e = a === "function" ? (l.modelRange.xMax - l.modelRange.xMin) / 1e3 : 0, t = n > 0 ? o.points[n - 1] : null, r = n < o.points.length ? o.points[n] : null;
-				if (t && Math.abs(i.x - t.x) < e * 2) return u.commit({
-					...o,
+		if (a.kind === "curve") {
+			let { segIdx: e } = a.payload;
+			if (t.maxPoints !== void 0 && i.points.length >= t.maxPoints) return;
+			let n = e + 1, o = E(u.model, l);
+			if (c === "function" || r === "1d") {
+				let e = c === "function" ? (l.modelRange.xMax - l.modelRange.xMin) / 1e3 : 0, t = n > 0 ? i.points[n - 1] : null, r = n < i.points.length ? i.points[n] : null;
+				if (t && Math.abs(o.x - t.x) < e * 2) return u.commit({
+					...i,
 					activeIndex: n - 1
 				}), h(n - 1);
-				if (r && Math.abs(i.x - r.x) < e * 2) return u.commit({
-					...o,
+				if (r && Math.abs(o.x - r.x) < e * 2) return u.commit({
+					...i,
 					activeIndex: n
 				}), h(n);
 			}
-			let c = [
-				...o.points.slice(0, n),
-				i,
-				...o.points.slice(n)
+			let s = [
+				...i.points.slice(0, n),
+				o,
+				...i.points.slice(n)
 			];
 			return u.commit({
-				...o,
-				points: c,
+				...i,
+				points: s,
 				activeIndex: n
 			}), h(n);
 		}
 	}
-	function _(e, n, i, a, s) {
-		if (!c || o !== "click-empty" || t.maxPoints !== void 0 && e.points.length >= t.maxPoints) return;
-		let l = E(n, a), u = e.points.length;
+	function _(e, n, i, a, o) {
+		if (!d || l !== "click-empty" || t.maxPoints !== void 0 && e.points.length >= t.maxPoints) return;
+		let s = E(n, a), c = e.points.length;
 		if (r === "1d") {
-			for (let t = 0; t < e.points.length; t++) if (e.points[t].x > l.x) {
-				u = t;
+			for (let t = 0; t < e.points.length; t++) if (e.points[t].x > s.x) {
+				c = t;
 				break;
 			}
 		}
-		let d = [
-			...e.points.slice(0, u),
-			l,
-			...e.points.slice(u)
+		let u = [
+			...e.points.slice(0, c),
+			s,
+			...e.points.slice(c)
 		];
-		s.commit({
+		o.commit({
 			...e,
-			points: d,
+			points: u,
 			activeIndex: null
 		});
 	}
@@ -425,22 +426,22 @@ function N(e) {
 		ctrl: e.ctrlKey
 	};
 }
-function P(l) {
-	let { layers: f, onLayerChange: p, onLayerCommit: m, width: h, height: g, xRange: _ = [0, 1], yRange: v = [0, 1], grid: y, axes: b, className: x, style: C, children: w } = l, T = l.history !== !1, E = o(() => ({
+function P(i) {
+	let { layers: f, onLayerChange: p, onLayerCommit: m, width: h, height: g, xRange: _ = [0, 1], yRange: v = [0, 1], grid: y, axes: b, className: x, style: C, children: w } = i, T = i.history !== !1, E = l(() => ({
 		xMin: _[0],
 		xMax: _[1],
 		yMin: v[0],
 		yMax: v[1]
-	}), [_, v]), D = o(() => ({
+	}), [_, v]), D = l(() => ({
 		width: h,
 		height: g
-	}), [h, g]), O = s(f);
+	}), [h, g]), O = u(f);
 	O.current = f;
-	let k = s(E);
+	let k = u(E);
 	k.current = E;
-	let A = s(D);
+	let A = u(D);
 	A.current = D;
-	let j = s(null), M = i((e) => {
+	let j = u(null), M = s((e) => {
 		let r = k.current, i = A.current;
 		return {
 			modelRange: r,
@@ -449,17 +450,17 @@ function P(l) {
 			toModel: (e) => n(e, r, i),
 			modifiers: e
 		};
-	}, []), P = s(null), [F, I] = c(null), L = s([]), R = s([]), z = i(() => {
+	}, []), P = u(null), [F, I] = d(null), L = u([]), R = u([]), z = s(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let t of O.current) e.set(t.layer.id, t.state);
 		return e;
-	}, []), B = i((e) => {
+	}, []), B = s((e) => {
 		let t = O.current;
 		for (let n of t) {
 			let t = e.get(n.layer.id);
 			t !== void 0 && t !== n.state && p(n.layer.id, t);
 		}
-	}, [p]), V = i(() => {
+	}, [p]), V = s(() => {
 		if (!T) return;
 		let e = L.current;
 		if (e.length === 0) return;
@@ -469,7 +470,7 @@ function P(l) {
 		T,
 		z,
 		B
-	]), H = i(() => {
+	]), H = s(() => {
 		if (!T) return;
 		let e = R.current;
 		if (e.length === 0) return;
@@ -479,13 +480,13 @@ function P(l) {
 		T,
 		z,
 		B
-	]), U = s(() => {}), W = s(() => {}), G = s(() => {}), K = s((e) => U.current(e)).current, q = s((e) => W.current(e)).current, J = s((e) => G.current(e)).current, Y = i(() => {
+	]), U = u(() => {}), W = u(() => {}), G = u(() => {}), K = u((e) => U.current(e)).current, q = u((e) => W.current(e)).current, J = u((e) => G.current(e)).current, Y = s(() => {
 		window.removeEventListener("pointermove", K), window.removeEventListener("pointerup", q), window.removeEventListener("pointercancel", J), P.current = null, I(null);
 	}, [
 		K,
 		q,
 		J
-	]), X = i((e) => {
+	]), X = s((e) => {
 		for (let t of O.current) if (t.layer.id === e) return t.state;
 	}, []);
 	U.current = (e) => {
@@ -518,7 +519,7 @@ function P(l) {
 		let r = M(N(e)), i = t.gesture.onCancel ? t.gesture.onCancel(n, r) : t.startSelfState;
 		i !== n && p(t.layerId, i), Y();
 	};
-	let Z = i((e, t, n) => {
+	let Z = s((e, t, n) => {
 		let r = z();
 		P.current = {
 			layerId: e,
@@ -532,7 +533,7 @@ function P(l) {
 		K,
 		q,
 		J
-	]), Q = i((t, n) => {
+	]), Q = s((t, n) => {
 		if (P.current) return;
 		let r = M(N(t)), i = O.current, a = t.nativeEvent;
 		e("layered-curve-editor", "pointerdown", {
@@ -590,7 +591,7 @@ function P(l) {
 		m,
 		T,
 		z
-	]), $ = i((e) => {
+	]), $ = s((e) => {
 		let t = M(N(e)), n = O.current;
 		if (T && (e.metaKey || e.ctrlKey)) {
 			let t = e.key.toLowerCase();
@@ -613,20 +614,20 @@ function P(l) {
 		H,
 		M
 	]);
-	a(() => () => {
+	c(() => () => {
 		window.removeEventListener("pointermove", K), window.removeEventListener("pointerup", q), window.removeEventListener("pointercancel", J);
 	}, [
 		K,
 		q,
 		J
 	]);
-	let ee = o(() => ({
+	let ee = l(() => ({
 		modelRange: E,
 		plotSize: D,
 		toPlot: (e) => t(e, E, D),
 		toModel: (e) => n(e, E, D)
 	}), [E, D]);
-	return /* @__PURE__ */ d(r, {
+	return /* @__PURE__ */ o(r, {
 		ref: j,
 		className: [S.root, x].filter(Boolean).join(" "),
 		style: C,
@@ -650,7 +651,7 @@ function P(l) {
 				},
 				isActive: F === e.layer.id
 			};
-			return /* @__PURE__ */ u("g", {
+			return /* @__PURE__ */ a("g", {
 				"data-layer-id": e.layer.id,
 				children: e.layer.render(e.state, t)
 			}, e.layer.id);
@@ -660,10 +661,10 @@ function P(l) {
 //#endregion
 //#region src/components/CurveEditor/CurveEditor.tsx
 function F(e) {
-	let { value: t, onInput: n, onChange: r, domain: l, endpoints: d, interpolation: f, constrain: p, addPointMode: m, minPoints: h, maxPoints: g, curve: _, fill: v, hideNonInteractive: y, renderAnchor: b, width: x, height: S, xRange: C, yRange: w, grid: T, axes: E, history: D, className: O, style: k, decorations: A } = e, M = o(() => j({
+	let { value: t, onInput: n, onChange: r, domain: i, endpoints: o, interpolation: f, constrain: p, addPointMode: m, minPoints: h, maxPoints: g, curve: _, fill: v, hideNonInteractive: y, renderAnchor: b, width: x, height: S, xRange: C, yRange: w, grid: T, axes: E, history: D, className: O, style: k, decorations: A } = e, M = l(() => j({
 		id: "function",
-		domain: l,
-		endpoints: d,
+		domain: i,
+		endpoints: o,
 		interpolation: f,
 		constrain: p,
 		addPointMode: m,
@@ -674,8 +675,8 @@ function F(e) {
 		hideNonInteractive: y,
 		renderAnchor: b
 	}), [
-		l,
-		d,
+		i,
+		o,
 		f,
 		p,
 		m,
@@ -685,47 +686,47 @@ function F(e) {
 		v,
 		y,
 		b
-	]), [N, F] = c(() => ({
+	]), [N, F] = d(() => ({
 		points: t,
 		activeIndex: null
-	})), I = s(N);
-	I.current = N, a(() => {
+	})), I = u(N);
+	I.current = N, c(() => {
 		I.current.activeIndex === null && I.current.points !== t && F({
 			points: t,
 			activeIndex: null
 		});
 	}, [t]);
-	let L = i((e, t) => {
+	let L = s((e, t) => {
 		let r = t, i = I.current.points;
 		F(r), r.points !== i && n(r.points);
-	}, [n]), R = i((e, t, n) => {
+	}, [n]), R = s((e, t, n) => {
 		if (!r) return;
 		let i = t, a = n;
 		i.points !== a.points && r?.(i.points, a.points);
 	}, [r]);
-	return /* @__PURE__ */ u("div", {
-		onContextMenu: i((e) => {
+	return /* @__PURE__ */ a("div", {
+		onContextMenu: s((e) => {
 			let t = e.target?.closest?.("[data-anchor-index]");
 			if (!t) return;
 			e.preventDefault(), e.stopPropagation();
 			let i = t.getAttribute("data-anchor-index");
 			if (i === null) return;
-			let a = Number(i), o = I.current.points;
-			if (!Number.isInteger(a) || a < 0 || a >= o.length || o[a]?.locked || d !== void 0 && d !== "free" && (a === 0 || a === o.length - 1) || h !== void 0 && o.length <= h) return;
-			let s = o.filter((e, t) => t !== a);
+			let a = Number(i), s = I.current.points;
+			if (!Number.isInteger(a) || a < 0 || a >= s.length || s[a]?.locked || o !== void 0 && o !== "free" && (a === 0 || a === s.length - 1) || h !== void 0 && s.length <= h) return;
+			let c = s.filter((e, t) => t !== a);
 			F({
-				points: s,
+				points: c,
 				activeIndex: null
-			}), n(s), r?.(s, o);
+			}), n(c), r?.(c, s);
 		}, [
-			d,
+			o,
 			h,
 			n,
 			r
 		]),
 		style: { display: "contents" },
-		children: /* @__PURE__ */ u(P, {
-			layers: o(() => [{
+		children: /* @__PURE__ */ a(P, {
+			layers: l(() => [{
 				layer: M,
 				state: N
 			}], [M, N]),
@@ -783,4 +784,4 @@ function L(e, t) {
 //#endregion
 export { M as a, j as i, F as n, y as o, P as r, I as t };
 
-//# sourceMappingURL=CurveEditor-SmwwvrsA.js.map
+//# sourceMappingURL=CurveEditor-DiJk0NhK.js.map