@camstack/addon-benchmark 1.0.2 → 1.0.3

package/dist/MaskShapeCanvas-DwXCR2iE.mjs

@@ -0,0 +1,686 @@
+import { a as e, b as t, c as n, h as r, m as i, u as a } from "./_virtual_mf___mfe_internal__addon_benchmark_page__loadShare__react__loadShare__.js-Bnj8XQnA.mjs";
+import { n as o, r as s } from "./_virtual_mf___mfe_internal__addon_benchmark_page__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.js-SOU_VnTj.mjs";
+import { a as c, c as l, i as u, l as d, n as f, o as p, r as m, s as h } from "./ReactKonva-xvRRqI5S.mjs";
+//#region ../ui-library/src/composites/cap-settings/MaskShapeCanvas.tsx
+t();
+var g = {
+	rect: "#ef4444",
+	polygon: "#3b82f6",
+	grid: "#6366f1",
+	line: "#f59e0b"
+}, _ = "33", v = "66", y = "#6366f1", b = 3, x = 2, S = 12, C = 16, w = 9;
+function T(e, t, n) {
+	return {
+		x: e.x * t,
+		y: e.y * n
+	};
+}
+function E(e, t, n) {
+	return {
+		x: e.x / t,
+		y: e.y / n
+	};
+}
+function D(e, t, n) {
+	return e.flatMap((e) => [e.x * t, e.y * n]);
+}
+function O(e) {
+	return !Number.isFinite(e) || e < 0 ? 0 : e > 1 ? 1 : e;
+}
+function k(e) {
+	return e.color ?? g[e.shape.kind];
+}
+function A(e, t) {
+	let n = e[t], r = e[(t + 1) % e.length];
+	if (!n || !r) return [...e];
+	let i = {
+		x: (n.x + r.x) / 2,
+		y: (n.y + r.y) / 2
+	};
+	return [
+		...e.slice(0, t + 1),
+		i,
+		...e.slice(t + 1)
+	];
+}
+function j(e, t) {
+	return e.length === t.length ? e.every((e, n) => {
+		let r = t[n];
+		return Math.abs(e.x - r.x) < 1e-6 && Math.abs(e.y - r.y) < 1e-6;
+	}) : !1;
+}
+function M(e) {
+	return e.kind === "polygon" || e.kind === "line";
+}
+function N({ items: e, selectedId: t, onSelect: u, onShapeChange: d, onDrawComplete: f, drawingKind: m, supportedShapes: h, transparent: _ = !1, backdrop: v, polygonVertices: A, grid: N }) {
+	let P = i(null), [F, z] = r({
+		w: 800,
+		h: 450
+	}), [B, V] = r([]), [H, U] = r(null), [W, G] = r(null), [K, q] = r(null), J = m !== null && h.includes(m);
+	a(() => {
+		if (!K) return;
+		let t = e.find((e) => e.id === K.itemId);
+		if (!t || !M(t.shape)) {
+			q(null);
+			return;
+		}
+		j(t.shape.points, K.points) && q(null);
+	}, [e, K]), a(() => {
+		let e = P.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			let t = e[0];
+			if (!t) return;
+			let { width: n, height: r } = t.contentRect;
+			z(_ ? {
+				w: n,
+				h: r
+			} : {
+				w: n,
+				h: n * 9 / 16
+			});
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [_]), a(() => {
+		!J && H !== null && U(null);
+	}, [J, H]);
+	let Y = n((e) => {
+		f(e), V([]);
+	}, [f]), X = n((e) => {
+		if (!J || m === null) {
+			u(null);
+			return;
+		}
+		let t = e.target.getStage();
+		if (!t) return;
+		let n = t.getPointerPosition();
+		if (!n) return;
+		let r = E(n, F.w, F.h);
+		if (m === "rect") {
+			let e = O(r.x), t = O(r.y);
+			Y({
+				kind: "rect",
+				x: e,
+				y: t,
+				width: Math.min(.2, 1 - e),
+				height: Math.min(.2, 1 - t)
+			});
+			return;
+		}
+		if (m === "grid") {
+			let e = N?.width ?? C, t = N?.height ?? w;
+			Y({
+				kind: "grid",
+				gridWidth: e,
+				gridHeight: t,
+				cells: Array.from({ length: e * t }, () => !1)
+			});
+			return;
+		}
+		if (m === "line") {
+			if (B.length === 0) {
+				V([r]);
+				return;
+			}
+			Y({
+				kind: "line",
+				points: [...B, r]
+			});
+			return;
+		}
+		if (m === "polygon") {
+			if (B.length === 0) {
+				V([r]);
+				return;
+			}
+			if (B.length >= b) {
+				let e = T(B[0], F.w, F.h);
+				if (Math.hypot(n.x - e.x, n.y - e.y) < S) {
+					Y({
+						kind: "polygon",
+						points: B
+					});
+					return;
+				}
+			}
+			V((e) => [...e, r]);
+		}
+	}, [
+		J,
+		m,
+		B,
+		F,
+		N,
+		Y,
+		u
+	]), ee = n((e) => {
+		!J || m !== "polygon" || B.length < b || (e.cancelBubble = !0, Y({
+			kind: "polygon",
+			points: B
+		}));
+	}, [
+		J,
+		m,
+		B,
+		Y
+	]), Z = i(null), Q = i(null);
+	a(() => () => {
+		Z.current !== null && cancelAnimationFrame(Z.current);
+	}, []);
+	let te = n((e) => {
+		if (!J) return;
+		let t = e.target.getStage();
+		t && (Q.current = t.getPointerPosition() ?? null, Z.current === null && (Z.current = requestAnimationFrame(() => {
+			Z.current = null, U(Q.current);
+		})));
+	}, [J]), ne = i(!1), re = i(!0), ie = i(/* @__PURE__ */ new Set()), ae = n((e, t, n, r) => {
+		let i = t.gridWidth * t.gridHeight;
+		if (n < 0 || n >= i || t.cells[n] === r) return;
+		let a = [...t.cells];
+		for (; a.length < i;) a.push(!1);
+		a.length = i, a[n] = r, d(e, {
+			...t,
+			cells: a
+		});
+	}, [d]), $ = [];
+	if (!_) {
+		for (let e = 1; e < C; e++) {
+			let t = F.w / C * e;
+			$.push(/* @__PURE__ */ o(p, {
+				points: [
+					t,
+					0,
+					t,
+					F.h
+				],
+				stroke: "#ffffff",
+				strokeWidth: .5,
+				opacity: .08
+			}, `gv-${e}`));
+		}
+		for (let e = 1; e < w; e++) {
+			let t = F.h / w * e;
+			$.push(/* @__PURE__ */ o(p, {
+				points: [
+					0,
+					t,
+					F.w,
+					t
+				],
+				stroke: "#ffffff",
+				strokeWidth: .5,
+				opacity: .08
+			}, `gh-${e}`));
+		}
+	}
+	return /* @__PURE__ */ s("div", {
+		ref: P,
+		className: _ ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
+		style: { cursor: J ? "crosshair" : "default" },
+		children: [
+			v && !_ ? /* @__PURE__ */ o("div", {
+				className: "absolute inset-0 pointer-events-none [&>*]:w-full [&>*]:h-full [&>img]:object-cover [&>video]:object-cover",
+				style: {
+					width: F.w,
+					height: F.h
+				},
+				children: v
+			}) : null,
+			/* @__PURE__ */ s(l, {
+				width: F.w,
+				height: F.h,
+				onClick: X,
+				onDblClick: ee,
+				onMouseMove: te,
+				children: [
+					/* @__PURE__ */ s(c, {
+						listening: !1,
+						children: [/* @__PURE__ */ o(p, {
+							points: [
+								0,
+								0,
+								F.w,
+								0,
+								F.w,
+								F.h,
+								0,
+								F.h,
+								0,
+								0
+							],
+							stroke: "transparent",
+							strokeWidth: 0
+						}), $]
+					}),
+					/* @__PURE__ */ o(c, { children: e.map((e) => {
+						let n = e.id === t, r = e.enabled === !1, i = k(e), a = n && !J && !r;
+						if (e.shape.kind === "rect") return /* @__PURE__ */ o(I, {
+							item: e,
+							shape: e.shape,
+							color: i,
+							selected: n,
+							dimmed: r,
+							editable: a,
+							isDrawing: J,
+							size: F,
+							onSelect: u,
+							onShapeChange: d
+						}, e.id);
+						if (e.shape.kind === "grid") return /* @__PURE__ */ o(L, {
+							item: e,
+							shape: e.shape,
+							color: i,
+							dimmed: r,
+							editable: a,
+							size: F,
+							onSelect: u,
+							paintingRef: ne,
+							paintValueRef: re,
+							paintedRef: ie,
+							paintCell: ae
+						}, e.id);
+						let s = e.shape.kind === "line", c = s ? x : Math.max(b, A?.min ?? b), l = s ? x : A?.max, f = K && K.itemId === e.id ? K.points : e.shape.points;
+						return /* @__PURE__ */ o(R, {
+							item: e,
+							shape: e.shape,
+							color: i,
+							selected: n,
+							dimmed: r,
+							editable: a,
+							isLine: s,
+							isDrawing: J,
+							size: F,
+							effectivePoints: f,
+							minVertices: c,
+							maxVertices: l,
+							isDragging: W === e.id,
+							onSelect: u,
+							onShapeChange: d,
+							setDragOverride: q,
+							setDraggingItemId: G
+						}, e.id);
+					}) }),
+					/* @__PURE__ */ o(c, {
+						listening: !1,
+						children: J && B.length > 0 && /* @__PURE__ */ s("Group", { children: [
+							m === "polygon" && B.length >= 2 && /* @__PURE__ */ o("Line", {
+								points: D(B, F.w, F.h),
+								stroke: y,
+								strokeWidth: 1.5,
+								dash: [6, 3],
+								opacity: .8
+							}),
+							m === "line" && B.length === 1 && H && /* @__PURE__ */ o("Line", {
+								points: [
+									B[0].x * F.w,
+									B[0].y * F.h,
+									H.x,
+									H.y
+								],
+								stroke: g.line,
+								strokeWidth: 1.5,
+								dash: [6, 3],
+								opacity: .7
+							}),
+							m === "polygon" && H && B.length >= 1 && /* @__PURE__ */ o("Line", {
+								points: [
+									B[B.length - 1].x * F.w,
+									B[B.length - 1].y * F.h,
+									H.x,
+									H.y
+								],
+								stroke: y,
+								strokeWidth: 1,
+								dash: [4, 4],
+								opacity: .5
+							}),
+							B.map((e, t) => {
+								let n = T(e, F.w, F.h), r = t === 0 && m === "polygon" && B.length >= b;
+								return /* @__PURE__ */ o("Circle", {
+									x: n.x,
+									y: n.y,
+									radius: r ? 7 : 4,
+									fill: r ? y : "#ffffff",
+									stroke: y,
+									strokeWidth: 1.5,
+									opacity: .9
+								}, t);
+							})
+						] })
+					})
+				]
+			}),
+			J ? /* @__PURE__ */ o("div", {
+				className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700",
+				children: m === "line" ? "Click to set the start point, click again to complete the line" : m === "rect" ? "Click to drop a rectangle, then drag the corner to resize" : m === "grid" ? "Click to add the grid, then paint cells" : B.length < b ? "Click to add points (min 3). Double-click or click the first point to close." : "Continue adding points. Double-click or click the first point to close."
+			}) : null
+		]
+	});
+}
+var P = .02;
+function F(e, t) {
+	return Math.abs(e.x - t.x) < 1e-6 && Math.abs(e.y - t.y) < 1e-6 && Math.abs(e.width - t.width) < 1e-6 && Math.abs(e.height - t.height) < 1e-6;
+}
+function I({ item: e, shape: t, color: n, selected: i, dimmed: c, editable: l, isDrawing: f, size: p, onSelect: g, onShapeChange: y }) {
+	let [b, x] = r(null), S = {
+		x: t.x,
+		y: t.y,
+		width: t.width,
+		height: t.height
+	};
+	a(() => {
+		b && F(S, b) && x(null);
+	}, [
+		t.x,
+		t.y,
+		t.width,
+		t.height,
+		b
+	]);
+	let C = b ?? S, w = C.x * p.w, T = C.y * p.h, E = C.width * p.w, D = C.height * p.h, k = c ? .35 : i ? 1 : .85, A = (t) => {
+		x(t), y(e.id, {
+			kind: "rect",
+			x: t.x,
+			y: t.y,
+			width: t.width,
+			height: t.height
+		});
+	};
+	return /* @__PURE__ */ o(u, {
+		onClick: (t) => {
+			t.cancelBubble = !0, f || g(e.id);
+		},
+		children: /* @__PURE__ */ s(u, {
+			draggable: l,
+			dragBoundFunc: l ? (e) => ({
+				x: Math.max(-w, Math.min(p.w - (w + E), e.x)),
+				y: Math.max(-T, Math.min(p.h - (T + D), e.y))
+			}) : void 0,
+			onDragEnd: l ? (e) => {
+				let t = e.target, n = t.x() / p.w, r = t.y() / p.h;
+				if (t.position({
+					x: 0,
+					y: 0
+				}), n === 0 && r === 0) return;
+				let i = Math.min(Math.max(0, C.x + n), Math.max(0, 1 - C.width)), a = Math.min(Math.max(0, C.y + r), Math.max(0, 1 - C.height));
+				A({
+					...C,
+					x: i,
+					y: a
+				});
+			} : void 0,
+			onMouseEnter: (e) => {
+				if (!l) return;
+				let t = e.target.getStage();
+				t && (t.container().style.cursor = "move");
+			},
+			onMouseLeave: (e) => {
+				if (!l) return;
+				let t = e.target.getStage();
+				t && (t.container().style.cursor = f ? "crosshair" : "default");
+			},
+			children: [
+				/* @__PURE__ */ o(h, {
+					x: w,
+					y: T,
+					width: E,
+					height: D,
+					fill: n + (i ? v : _),
+					stroke: n,
+					strokeWidth: i ? 2.5 : 1.5,
+					opacity: k
+				}),
+				e.label ? /* @__PURE__ */ o(d, {
+					x: w,
+					y: T - 16,
+					text: e.label,
+					fontSize: 12,
+					fill: n,
+					stroke: "#000000",
+					strokeWidth: 3,
+					fillAfterStrokeEnabled: !0,
+					fontStyle: "bold",
+					listening: !1
+				}) : null,
+				l ? /* @__PURE__ */ o(m, {
+					x: w + E,
+					y: T + D,
+					radius: 6,
+					fill: n,
+					stroke: "#ffffff",
+					strokeWidth: 1.5,
+					draggable: !0,
+					dragBoundFunc: (e) => ({
+						x: Math.min(p.w, Math.max(w, e.x)),
+						y: Math.min(p.h, Math.max(T, e.y))
+					}),
+					onDragStart: (e) => {
+						e.cancelBubble = !0;
+					},
+					onDragMove: (e) => {
+						let t = e.target, n = O(t.x() / p.w - C.x), r = O(t.y() / p.h - C.y);
+						x({
+							...C,
+							width: Math.max(P, Math.min(n, 1 - C.x)),
+							height: Math.max(P, Math.min(r, 1 - C.y))
+						});
+					},
+					onDragEnd: (e) => {
+						let t = e.target, n = O(t.x() / p.w - C.x), r = O(t.y() / p.h - C.y);
+						A({
+							...C,
+							width: Math.max(P, Math.min(n, 1 - C.x)),
+							height: Math.max(P, Math.min(r, 1 - C.y))
+						});
+					},
+					onMouseEnter: (e) => {
+						let t = e.target.getStage();
+						t && (t.container().style.cursor = "nwse-resize");
+					},
+					onMouseLeave: (e) => {
+						let t = e.target.getStage();
+						t && (t.container().style.cursor = "default");
+					}
+				}) : null
+			]
+		})
+	});
+}
+function L({ item: e, shape: t, color: n, dimmed: r, editable: i, size: a, onSelect: s, paintingRef: c, paintValueRef: l, paintedRef: d, paintCell: f }) {
+	let { gridWidth: p, gridHeight: m, cells: g } = t, _ = a.w / p, y = a.h / m, b = p * m, x = r ? .3 : 1, S = (n) => {
+		if (!i) {
+			s(e.id);
+			return;
+		}
+		let r = g[n] !== !0;
+		c.current = !0, l.current = r, d.current = new Set([n]), f(e.id, t, n, r);
+	}, C = (n) => {
+		!c.current || !i || d.current.has(n) || (d.current.add(n), f(e.id, t, n, l.current));
+	}, w = () => {
+		c.current && (c.current = !1, d.current = /* @__PURE__ */ new Set());
+	};
+	return /* @__PURE__ */ o(u, {
+		opacity: x,
+		onMouseUp: w,
+		onMouseLeave: w,
+		children: Array.from({ length: b }, (e, t) => {
+			let r = t % p, i = Math.floor(t / p), a = g[t] === !0;
+			return /* @__PURE__ */ o(h, {
+				x: r * _,
+				y: i * y,
+				width: _,
+				height: y,
+				fill: a ? n + v : "#ffffff10",
+				stroke: a ? n : "#ffffff40",
+				strokeWidth: .5,
+				onMouseDown: (e) => {
+					e.cancelBubble = !0, S(t);
+				},
+				onMouseEnter: () => C(t)
+			}, t);
+		})
+	});
+}
+function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, isLine: c, isDrawing: l, size: m, effectivePoints: h, minVertices: g, maxVertices: y, isDragging: b, onSelect: x, onShapeChange: S, setDragOverride: C, setDraggingItemId: w }) {
+	let O = D(h, m.w, m.h), k = i ? .35 : r ? 1 : c ? .8 : .85, j = (e) => c ? {
+		kind: "line",
+		points: [...e]
+	} : {
+		kind: "polygon",
+		points: [...e]
+	}, M = h.map((e) => e.x * m.w), N = h.map((e) => e.y * m.h), P = M.length > 0 ? Math.min(...M) : 0, F = M.length > 0 ? Math.max(...M) : 0, I = N.length > 0 ? Math.min(...N) : 0, L = N.length > 0 ? Math.max(...N) : 0, R = (e) => ({
+		x: Math.max(-P, Math.min(m.w - F, e.x)),
+		y: Math.max(-I, Math.min(m.h - L, e.y))
+	}), z = (n) => {
+		let r = n.target, i = r.x() / m.w, a = r.y() / m.h;
+		if (r.position({
+			x: 0,
+			y: 0
+		}), w(null), i === 0 && a === 0) return;
+		let o = t.points.map((e) => ({
+			x: e.x + i,
+			y: e.y + a
+		}));
+		C({
+			itemId: e.id,
+			points: o
+		}), S(e.id, j(o));
+	}, B = !c && h.length > g, V = !c && (y === void 0 || h.length < y);
+	return /* @__PURE__ */ s(u, {
+		onClick: (t) => {
+			t.cancelBubble = !0, l || x(e.id);
+		},
+		children: [
+			/* @__PURE__ */ s(u, {
+				draggable: a,
+				dragBoundFunc: a ? R : void 0,
+				onDragStart: a ? () => w(e.id) : void 0,
+				onDragEnd: a ? z : void 0,
+				onMouseEnter: (e) => {
+					if (!a) return;
+					let t = e.target.getStage();
+					t && (t.container().style.cursor = "move");
+				},
+				onMouseLeave: (e) => {
+					if (!a) return;
+					let t = e.target.getStage();
+					t && (t.container().style.cursor = l ? "crosshair" : "default");
+				},
+				children: [c ? /* @__PURE__ */ o(f, {
+					points: O,
+					stroke: n,
+					strokeWidth: r ? 3 : 2,
+					fill: n,
+					pointerLength: 10,
+					pointerWidth: 8,
+					opacity: k
+				}) : /* @__PURE__ */ o(p, {
+					points: O,
+					closed: !0,
+					fill: n + (r ? v : _),
+					stroke: n,
+					strokeWidth: r ? 2.5 : 1.5,
+					opacity: k
+				}), e.label && h.length > 0 ? (() => {
+					let t = T({
+						x: h.reduce((e, t) => e + t.x, 0) / h.length,
+						y: h.reduce((e, t) => e + t.y, 0) / h.length
+					}, m.w, m.h), r = Math.max(40, e.label.length * 11 * .62);
+					return /* @__PURE__ */ o(d, {
+						x: t.x - r / 2,
+						y: t.y - 7,
+						width: r,
+						align: "center",
+						text: e.label,
+						fontSize: 12,
+						fill: n,
+						stroke: "#000000",
+						strokeWidth: 3,
+						fillAfterStrokeEnabled: !0,
+						fontStyle: "bold",
+						listening: !1
+					});
+				})() : null]
+			}),
+			a && !b && h.map((r, i) => {
+				let a = T(r, m.w, m.h);
+				return /* @__PURE__ */ o("Circle", {
+					x: a.x,
+					y: a.y,
+					radius: 5,
+					fill: n,
+					stroke: "#ffffff",
+					strokeWidth: 1.5,
+					draggable: !0,
+					onDragMove: (n) => {
+						let r = E({
+							x: n.target.x(),
+							y: n.target.y()
+						}, m.w, m.h);
+						C((n) => {
+							let a = n && n.itemId === e.id ? n.points : t.points;
+							return {
+								itemId: e.id,
+								points: a.map((e, t) => t === i ? r : e)
+							};
+						});
+					},
+					onDragEnd: (n) => {
+						let r = E({
+							x: n.target.x(),
+							y: n.target.y()
+						}, m.w, m.h), a = t.points.map((e, t) => t === i ? r : e);
+						C({
+							itemId: e.id,
+							points: a
+						}), S(e.id, j(a));
+					},
+					onContextMenu: (n) => {
+						n.evt.preventDefault(), n.cancelBubble = !0, B && S(e.id, j(t.points.filter((e, t) => t !== i)));
+					}
+				}, `pt-${i}`);
+			}),
+			a && !b && V && h.length >= 2 && h.map((r, i) => {
+				let a = h[(i + 1) % h.length], s = T({
+					x: (r.x + a.x) / 2,
+					y: (r.y + a.y) / 2
+				}, m.w, m.h);
+				return /* @__PURE__ */ o("Circle", {
+					x: s.x,
+					y: s.y,
+					radius: 4,
+					fill: "#ffffff",
+					stroke: n,
+					strokeWidth: 1.5,
+					opacity: .6,
+					onMouseEnter: (e) => {
+						let t = e.target;
+						t.to({
+							radius: 6,
+							opacity: 1,
+							duration: .1
+						});
+						let n = t.getStage();
+						n && (n.container().style.cursor = "copy");
+					},
+					onMouseLeave: (e) => {
+						let t = e.target;
+						t.to({
+							radius: 4,
+							opacity: .6,
+							duration: .1
+						});
+						let n = t.getStage();
+						n && (n.container().style.cursor = l ? "crosshair" : "default");
+					},
+					onClick: (n) => {
+						n.cancelBubble = !0, S(e.id, j(A(t.points, i)));
+					}
+				}, `mid-${i}`);
+			})
+		]
+	});
+}
+var z = e(N);
+//#endregion
+export { z as MaskShapeCanvas };