@sheetxl/studio-vanilla 0.8.0-beta.10 → 0.8.0-beta.11

package/cdn/assets/DZo_DGKkHCqIyM5N.js

@@ -0,0 +1,388 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.11
+*
+* (C) 2026-present SheetXL Inc. & Michael T. Ford
+* License: The license can be found at https://www.sheetxl.com/license.
+*/
+import { n as e } from "./C7fZFw4yQ9VNHtnV.js";
+import { t } from "./Cf0bbHHOW6iwvyXg.js";
+import { t as n } from "./8CW-puLLSNyeaGce.js";
+import { A as r, W as i, c as a, p as o } from "./PD_ckP5IyZurtALu.js";
+import { D as s, j as c } from "./BJ5RRYxWA_yTbVpr.js";
+import { n as l } from "./vY2ZLR024kVOwWej.js";
+import { t as u } from "./DsRSG0tf_a2zWfcu.js";
+var d = e(t(), 1), f = n(), p = r("chart:paint", () => import("./Dg9ALylpMhftKvuI.js")), m = {
+	boxes: [],
+	handles: []
+}, h = (0, d.memo)((0, d.forwardRef)((e, t) => {
+	let { children: n, style: r, chart: a, onChartChange: o, zoom: l = 1, width: h, height: g, selection: _ = null, onElementPress: v, onPointerDown: y, ...b } = e, [x, S] = (0, d.useState)(() => i.isPromiseLike(a) ? null : a), [C, w] = (0, d.useState)(null), T = (0, d.useRef)(o);
+	T.current = o;
+	let E = (0, d.useRef)(null);
+	(0, d.useEffect)(() => {
+		let e = !0, t = (e, t) => {
+			w(t), S(e), E.current !== e && (E.current = e, T.current?.(e));
+		};
+		if (i.isPromiseLike(a)) return a.then((n) => {
+			e && t(n, null);
+		}, (n) => {
+			e && t(null, n);
+		}), () => {
+			e = !1;
+		};
+		t(a, null);
+	}, [a]);
+	let [D, O] = c(), k = typeof h == "number" ? h : O.width, A = typeof g == "number" ? g : O.height, j = k ? Math.round(k / l) : 0, M = A ? Math.round(A / l) : 0, N = (0, d.useRef)({
+		width: j,
+		height: M
+	});
+	N.current = {
+		width: j,
+		height: M
+	};
+	let P = (0, d.useCallback)(async () => {
+		let e = N.current;
+		if (!x || !e.width || !e.height) return null;
+		let t = x.getLayout(e);
+		return t ? (await p.load()).renderChartToSVG(t) : null;
+	}, [x]), F = (0, d.useRef)(null), I = (0, d.useRef)(null), L = (0, d.useRef)(l);
+	L.current = l;
+	let R = (0, d.useCallback)((e, t) => {
+		let n = F.current;
+		if (!n) return null;
+		let r = n.getBoundingClientRect(), i = L.current || 1;
+		return {
+			x: (e - r.left) / i,
+			y: (t - r.top) / i
+		};
+	}, []), z = (0, d.useCallback)((e, t) => {
+		let n = I.current, r = R(e, t);
+		return x && n && r ? x.getElementAt(r, n) : null;
+	}, [x, R]), B = s(t, () => ({
+		isChartElement: () => !0,
+		getChart: () => x,
+		toSVG: P,
+		getElementAt: z
+	}), [
+		x,
+		P,
+		z
+	]), V = u([
+		B,
+		D,
+		F
+	]), H = (0, d.useRef)(null), U = (0, d.useRef)(null), [W, G] = (0, d.useState)(() => p.peek() ?? null), [K, q] = (0, d.useState)(null), [J, Y] = (0, d.useState)(0), [X, Z] = (0, d.useState)(m);
+	(0, d.useEffect)(() => x?.addListeners({ onLayoutChange: () => Y((e) => e + 1) }), [x]), (0, d.useEffect)(() => {
+		if (W) return;
+		let e = !0;
+		return p.load().then((t) => {
+			e && G(t);
+		}, (t) => {
+			e && q(t);
+		}), () => {
+			e = !1;
+		};
+	}, [W]);
+	let Q = (0, d.useCallback)(() => {
+		let e = I.current;
+		Z(x && e && _ && !_.isEmpty() ? ((e, t, n) => {
+			let r = [], i = [];
+			for (let a of n.getItems()) {
+				if (a.getChart() !== e) continue;
+				let o = a.getElementType();
+				if (o === "series" || o === "dataLabels") {
+					let n = o === "series" ? a : a.getParent(), i = o === "series" ? n.getPoints() : n.getPoints().map((e) => e.getDataLabel());
+					for (let n of i) {
+						let i = e.getElementBounds(n, t);
+						i && r.push(i);
+					}
+					if (r.length > 0) continue;
+				}
+				let s = e.getElementBounds(a, t);
+				if (s && (r.push(s), n.getItems().length === 1)) {
+					let e = [
+						s.x,
+						s.x + s.width / 2,
+						s.x + s.width
+					], t = [
+						s.y,
+						s.y + s.height / 2,
+						s.y + s.height
+					];
+					for (let n of e) for (let r of t) n === e[1] && r === t[1] || i.push({
+						x: n,
+						y: r
+					});
+				}
+			}
+			return {
+				boxes: r,
+				handles: i
+			};
+		})(x, e, _) : m);
+	}, [x, _]);
+	(0, d.useEffect)(() => _?.addListeners({ onChange: Q }), [_, Q]), (0, d.useLayoutEffect)(() => {
+		let e = H.current;
+		if (!(W && e && x && j && M)) return;
+		let t = x.getLayout({
+			width: j,
+			height: M
+		});
+		if (I.current = t, !t) return U.current?.dispose(), U.current = null, void Q();
+		U.current ? U.current.update(t) : U.current = W.mountChart(e, t), Q();
+	}, [
+		W,
+		x,
+		j,
+		M,
+		J,
+		Q
+	]), (0, d.useEffect)(() => () => {
+		U.current?.dispose(), U.current = null, I.current = null;
+	}, [x]);
+	let ee = (0, d.useCallback)((e) => {
+		if (y?.(e), e.button !== 0 && e.button !== 2) return;
+		let t = I.current, n = R(e.clientX, e.clientY);
+		if (!x || !t || !n) return;
+		let r = x.getElementAt(n, t);
+		if (v?.({
+			element: r,
+			point: n,
+			event: e
+		}), !_) return;
+		if (!r || r.getElementType() === "chartArea") return void _.clear();
+		let i = ((e, t) => {
+			let n = e.getElementType();
+			if (n === "point") {
+				let n = e.getParent();
+				return t === n || t?.getElementType() === "point" && t.getParent() === n ? e : n;
+			}
+			if (n === "legendEntry") {
+				let n = e.getParent();
+				return t === n || t?.getElementType() === "legendEntry" ? e : n;
+			}
+			if (n === "dataLabel") {
+				let n = e.getParent()?.getParent(), r = n?.getDataLabels();
+				return r ? t === r || t?.getElementType() === "dataLabel" && t.getParent()?.getParent() === n ? e : r : e;
+			}
+			return e;
+		})(r, _.getActive());
+		_.isSelected(i) && _.getItems().length === 1 || _.select([i]);
+	}, [
+		x,
+		_,
+		v,
+		y,
+		R
+	]);
+	if (x?.isDeleted()) return;
+	let $ = K ?? C;
+	return (0, f.jsxs)("div", {
+		...b,
+		onPointerDown: ee,
+		style: {
+			...h === void 0 ? {} : { width: h },
+			...g === void 0 ? {} : { height: g },
+			...r,
+			overflow: "hidden"
+		},
+		ref: V,
+		children: [
+			$ ? (0, f.jsx)("div", {
+				className: "chart-element-error",
+				style: {
+					padding: "8px",
+					fontSize: "12px",
+					color: "var(--sxl-color-error, #b00020)"
+				},
+				children: $.message
+			}) : null,
+			(0, f.jsx)("div", {
+				className: "chart-element",
+				ref: H,
+				style: {
+					width: j || "100%",
+					height: M || "100%",
+					zoom: l,
+					position: "relative"
+				}
+			}),
+			X.boxes.length > 0 ? (0, f.jsxs)("div", {
+				className: "chart-element-selection",
+				style: {
+					position: "absolute",
+					left: 0,
+					top: 0,
+					width: j,
+					height: M,
+					zoom: l,
+					pointerEvents: "none"
+				},
+				children: [X.boxes.map((e, t) => (0, f.jsx)("div", { style: {
+					position: "absolute",
+					left: e.x - 1,
+					top: e.y - 1,
+					width: Math.max(0, e.width),
+					height: Math.max(0, e.height),
+					border: "1px solid var(--sxl-color-primary, #1a73e8)",
+					boxSizing: "content-box"
+				} }, `box-${t}`)), X.handles.map((e, t) => (0, f.jsx)("div", { style: {
+					position: "absolute",
+					left: e.x - 3,
+					top: e.y - 3,
+					width: 6,
+					height: 6,
+					background: "var(--sxl-color-background, #fff)",
+					border: "1px solid var(--sxl-color-primary, #1a73e8)",
+					boxSizing: "border-box"
+				} }, `handle-${t}`))]
+			}) : null
+		]
+	});
+}));
+h.displayName = "ChartElement";
+var g = (0, d.memo)((0, d.forwardRef)((e, t) => {
+	let { children: n, disabled: r, style: i, chart: a, zoom: o = 1, isDragging: c, movable: l, onHide: p, onShow: m, onDragZone: g, adornmentHost: _, flip: v, gesture: y, ...b } = e, x = s(t, () => ({ isChartEditor: () => !0 }), []), S = (0, d.useRef)(null), C = u([x, S]), w = l?.getRange()?.getWorksheet()?.getView()?.getChartElementSelection() ?? null;
+	(0, d.useLayoutEffect)(() => {
+		g?.((e) => {
+			let t = "touches" in e ? e.touches[0] : e;
+			if (!t) return !0;
+			let n = S.current?.getElementAt(t.clientX, t.clientY) ?? null;
+			return !n || n.getElementType() === "chartArea";
+		});
+	}, [g]);
+	let T = (0, d.useCallback)((e) => {
+		!r && e.element && e.element.getElementType() !== "chartArea" && (e.event.stopPropagation(), l && !l.isSelected() && l.select());
+	}, [l, r]);
+	if (!a.isDeleted()) return (0, f.jsx)(h, {
+		...b,
+		chart: a,
+		zoom: o,
+		selection: r ? null : w,
+		onElementPress: T,
+		style: {
+			...i,
+			filter: r ? "blur(1px)" : void 0,
+			boxShadow: c ? "1px 1px 2px var(--sxl-color-shadow, rgba(0,0,0,.15))" : void 0
+		},
+		ref: C
+	});
+}));
+g.displayName = "ChartEditor";
+var _ = /* @__PURE__ */ new Set([
+	"waterfall",
+	"histogram",
+	"pareto",
+	"boxwhisker",
+	"treemap",
+	"sunburst",
+	"funnel",
+	"regionMap"
+]), v = [
+	{
+		key: "chartTitleToggle",
+		state: (e) => e.getTitle().getVisible(),
+		show: ["chartTitleAboveChart"],
+		hide: ["chartTitleNone"]
+	},
+	{
+		key: "chartLegendToggle",
+		state: (e) => e.getLegend().getVisible(),
+		show: ["legendRight"],
+		hide: ["legendNone"]
+	},
+	{
+		key: "chartDataLabelsToggle",
+		state: (e) => e.getDataLabels().getVisible(),
+		show: ["dataLabelShow"],
+		hide: ["dataLabelNone"]
+	},
+	{
+		key: "chartDataTableToggle",
+		state: (e) => e.getDataTable().getVisible(),
+		show: ["dataTableShow"],
+		hide: ["dataTableNone"]
+	},
+	{
+		key: "chartGridlinesToggle",
+		state: (e) => e.getAxes().getValueAxis()?.getMajorGridlines().getVisible() ?? !1,
+		show: ["primaryValueGridLinesMajor"],
+		hide: ["primaryValueGridLinesNone"]
+	},
+	{
+		key: "chartAxisTitlesToggle",
+		state: (e) => e.getAxes().getItems().some((e) => e.getAxisGroup() === "primary" && e.getTitle().getVisible()),
+		show: ["primaryCategoryAxisTitleAdjacentToAxis", "primaryValueAxisTitleRotated"],
+		hide: ["primaryCategoryAxisTitleNone", "primaryValueAxisTitleNone"]
+	}
+], y = {
+	renderer: (e) => (0, f.jsx)(g, {
+		...e,
+		chart: e.movable.getContent()
+	}),
+	commands: (e, t) => {
+		let { sheet: n, movable: r, notifier: i } = t, s = r.getContent();
+		e.use(l({
+			transaction: n,
+			notifier: i
+		}));
+		let c = () => ({ chart: () => s }), u = () => s.isReadOnly() ? [o("reason.sheetProtected")] : [], d = () => {
+			let t = s.isReadOnly() ? [o("reason.sheetProtected")] : _.has(s.getChartType()) ? [o("reason.chartTypeNotEditable")] : [];
+			e.updateCommand("chartChangeType", {
+				callback: (e) => {
+					let t = typeof e == "string" ? e : e?.type;
+					t && s.setChartType(t);
+				},
+				state: s.getChartType(),
+				context: c,
+				disabledReasons: t
+			}), e.updateCommand("chartSwitchRowColumn", {
+				callback: () => {
+					s.setSeriesBy(s.getSeriesBy() === "rows" ? "columns" : "rows");
+				},
+				state: s.getSeriesBy(),
+				context: c,
+				disabledReasons: t
+			}), e.updateCommand("chartSelectData", {
+				tags: ["noTransaction", "noRepeat"],
+				callback: async (e) => {
+					if (!e) {
+						let t = await i?.showInput?.({
+							title: a("dialog.chartSelectData.title"),
+							description: a("dialog.chartSelectData.description"),
+							inputLabel: a("dialog.chartSelectData.inputLabel"),
+							initialValue: s.getSeries()[0]?.getValuesRange()?.getAddress() ?? "",
+							options: [{
+								id: "Select",
+								label: () => a("dialog.select")
+							}]
+						});
+						if (!t || t.option !== "Select" || !t.input) return;
+						e = t.input;
+					}
+					s.setData(e);
+				},
+				context: c,
+				disabledReasons: t
+			}), e.updateCommand("chartAddElement", {
+				callback: (e) => {
+					e && s.setElement(e);
+				},
+				context: c,
+				disabledReasons: t
+			});
+			for (let n of v) {
+				let r = n.state(s);
+				e.updateCommand(n.key, {
+					callback: () => {
+						for (let e of r ? n.hide : n.show) s.setElement(e);
+					},
+					state: r,
+					context: c,
+					disabledReasons: n.key === "chartTitleToggle" || n.key === "chartLegendToggle" ? u() : t
+				});
+			}
+		};
+		return d(), s.addListeners({ onAnyChange: d });
+	}
+};
+export { y as ChartKind };