@imfusion/web-ui 0.11.1-dev.73.g65836a33 → 0.11.1-dev.75.g4f81d8fd

package/dist/integrations/image-display-options.js

@@ -1,14 +1,15 @@
-import { t as e } from "../meta-V_KyLeGn.js";
-import { n as t, t as n } from "../toggle-group-CVQzM3lQ.js";
-import { n as r, t as i } from "../row-CImu8yXV.js";
-import { t as a } from "../scroll-area-CXQ_SxPX.js";
-import { a as o, i as s, n as c, o as l, r as u, s as d, t as f } from "../slider-CpIZMAFl.js";
-import { a as p, d as m, i as h, n as g, o as _, r as v, t as y, u as b } from "../tabs-BqgyMmo6.js";
-import { cva as x } from "class-variance-authority";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { useId as T, useMemo as E, useState as D } from "react";
-import { useDisplayOptions2d as O, useDisplayOptions3d as k } from "@imfusion/sdk-react";
-var A = {
+import { sy as e, vM as t, yC as n } from "../icons-CMetKl2x.js";
+import { t as r } from "../meta-V_KyLeGn.js";
+import { n as i, t as a } from "../toggle-group-CVQzM3lQ.js";
+import { i as o, n as s, o as c, t as l } from "../row-CaeE5pqs.js";
+import { C as u, E as d, S as f, T as p, _ as m, a as h, b as g, d as _, f as v, g as y, h as b, i as x, n as S, o as C, r as w, t as T, v as E, w as D, x as ee, y as O } from "../tabs-Bl3YlG5t.js";
+import { t as k } from "../scroll-area-CXQ_SxPX.js";
+import { a as A, c as j, i as M, n as te, o as ne, r as re, s as ie, t as N } from "../separator-BxUMVvFE.js";
+import { cva as ae } from "class-variance-authority";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+import { useId as L, useMemo as R, useState as z } from "react";
+import { useDisplayOptions2d as B, useDisplayOptions3d as V } from "@imfusion/sdk-react";
+var H = {
 	horizontalPanel: "imf-ui-image-display-options-module-horizontalPanel",
 	horizontalTabs: "imf-ui-image-display-options-module-horizontalTabs",
 	invertLabel: "imf-ui-image-display-options-module-invertLabel",
@@ -17,7 +18,7 @@ var A = {
 	rowField: "imf-ui-image-display-options-module-rowField",
 	segment: "imf-ui-image-display-options-module-segment",
 	strip: "imf-ui-image-display-options-module-strip"
-}, j = {
+}, U = {
 	key: "gamma",
 	label: "Gamma",
 	min: .1,
@@ -25,14 +26,14 @@ var A = {
 	step: .1,
 	format: { maximumFractionDigits: 1 }
 };
-function M(e) {
+function W(e) {
 	return e > 0 ? 10 ** Math.floor(Math.log10(e / 1e3)) : 1;
 }
-function N(e) {
+function G(e) {
 	return !(e > 0) || e >= 1 ? 0 : Math.ceil(-Math.log10(e));
 }
-function P([e, t], n) {
-	let r = t - e, i = M(r), a = { maximumFractionDigits: N(i) }, o = (e) => {
+function K([e, t], n) {
+	let r = t - e, i = W(r), a = { maximumFractionDigits: G(i) }, o = (e) => {
 		let t = n?.[e.key];
 		if (!t) return e;
 		let r = t.step ?? e.step;
@@ -41,7 +42,7 @@ function P([e, t], n) {
 			min: t.min ?? e.min,
 			max: t.max ?? e.max,
 			step: r,
-			format: t.step === void 0 ? e.format : { maximumFractionDigits: N(r) }
+			format: t.step === void 0 ? e.format : { maximumFractionDigits: G(r) }
 		};
 	}, s = o({
 		key: "window",
@@ -62,22 +63,22 @@ function P([e, t], n) {
 		"2d": [
 			s,
 			c,
-			o(j)
+			o(U)
 		],
 		"3d": [s, c]
 	};
 }
-function F(e, t) {
+function q(e, t) {
 	return e === "window" ? { window: t } : e === "level" ? { level: t } : { gamma: t };
 }
-function I(e, t) {
+function oe(e, t) {
 	return t === "window" ? e.window : t === "level" ? e.level : "gamma" in e ? e.gamma : 0;
 }
 //#endregion
 //#region src/integrations/image-display-options/image-display-options-view.tsx
-var L = x(A.root);
-function R({ spec: e, value: t, row: n, onChange: r }) {
-	let a = /* @__PURE__ */ w(s, {
+var se = ae(H.root);
+function ce({ spec: e, value: t, row: n, onChange: r }) {
+	let i = /* @__PURE__ */ I(A, {
 		value: t,
 		min: e.min,
 		max: e.max,
@@ -86,230 +87,338 @@ function R({ spec: e, value: t, row: n, onChange: r }) {
 		onValueChange: (e) => {
 			r(typeof e == "number" ? e : e[0]);
 		},
-		children: [/* @__PURE__ */ w(i, {
+		children: [/* @__PURE__ */ I(l, {
 			justify: "between",
-			children: [/* @__PURE__ */ C(u, { children: e.label }), /* @__PURE__ */ C(d, {})]
-		}), /* @__PURE__ */ C(f, { children: /* @__PURE__ */ w(l, { children: [/* @__PURE__ */ C(c, {}), /* @__PURE__ */ C(o, { "aria-label": e.label })] }) })]
+			children: [/* @__PURE__ */ F(M, { children: e.label }), /* @__PURE__ */ F(j, {})]
+		}), /* @__PURE__ */ F(te, { children: /* @__PURE__ */ I(ie, { children: [/* @__PURE__ */ F(re, {}), /* @__PURE__ */ F(ne, { "aria-label": e.label })] }) })]
 	});
-	return n ? /* @__PURE__ */ C("div", {
-		className: A.rowField,
-		children: a
-	}) : a;
+	return n ? /* @__PURE__ */ F("div", {
+		className: H.rowField,
+		children: i
+	}) : i;
 }
-function z({ checked: e, row: t, onChange: n }) {
-	let r = T();
-	return /* @__PURE__ */ w(i, {
+function J({ checked: e, row: t, onChange: n }) {
+	let r = L();
+	return /* @__PURE__ */ I(l, {
 		align: "center",
 		justify: t ? "start" : "between",
 		gap: "2",
-		className: A.invertRow,
-		children: [/* @__PURE__ */ C("span", {
+		className: H.invertRow,
+		children: [/* @__PURE__ */ F("span", {
 			id: r,
-			className: A.invertLabel,
+			className: H.invertLabel,
 			children: "Invert"
-		}), /* @__PURE__ */ C(b, {
+		}), /* @__PURE__ */ F(_, {
 			"aria-labelledby": r,
 			checked: e,
 			onCheckedChange: (e) => {
 				n(e);
 			},
-			children: /* @__PURE__ */ C(m, {})
+			children: /* @__PURE__ */ F(v, {})
 		})]
 	});
 }
-function B({ active: e, onChange: r }) {
-	return /* @__PURE__ */ w(n, {
-		className: A.segment,
+function le({ active: e, onChange: t }) {
+	return /* @__PURE__ */ I(a, {
+		className: H.segment,
 		"aria-label": "Display dimension",
 		value: [e],
 		onValueChange: (e) => {
-			let t = e[0];
-			(t === "2d" || t === "3d") && r(t);
+			let n = e[0];
+			(n === "2d" || n === "3d") && t(n);
 		},
-		children: [/* @__PURE__ */ C(t, {
+		children: [/* @__PURE__ */ F(i, {
 			value: "2d",
 			children: "2D"
-		}), /* @__PURE__ */ C(t, {
+		}), /* @__PURE__ */ F(i, {
 			value: "3d",
 			children: "3D"
 		})]
 	});
 }
-function V({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
+function Y({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
 	let a = n[e];
-	return /* @__PURE__ */ w(S, { children: [t.map((t) => /* @__PURE__ */ C(R, {
+	return /* @__PURE__ */ F(P, { children: t.map((t) => /* @__PURE__ */ F(ce, {
 		spec: t,
-		value: I(a, t.key),
+		value: oe(a, t.key),
 		row: r,
 		onChange: (n) => {
-			i(e, F(t.key, n));
+			i(e, q(t.key, n));
 		}
-	}, t.key)), /* @__PURE__ */ C(z, {
-		checked: a.invert,
-		row: r,
-		onChange: (t) => {
-			i(e, { invert: t });
-		}
-	})] });
+	}, t.key)) });
+}
+function X({ dimension: n, options: r, onPresetSelected: i }) {
+	let a = r[n].currentPreset, o = r[n].presetNames;
+	if (o.length !== 0) return /* @__PURE__ */ I(D, {
+		width: "full",
+		value: a,
+		onValueChange: (e) => {
+			e !== null && i(n, e);
+		},
+		children: [
+			/* @__PURE__ */ F(O, { children: "Preset" }),
+			/* @__PURE__ */ I(p, { children: [/* @__PURE__ */ F(d, {
+				placeholder: "Choose a preset",
+				children: a
+			}), /* @__PURE__ */ F(b, { children: /* @__PURE__ */ F(t, { glyph: e }) })] }),
+			/* @__PURE__ */ F(f, { children: /* @__PURE__ */ F(u, {
+				alignItemWithTrigger: !0,
+				side: "bottom",
+				sideOffset: 4,
+				children: /* @__PURE__ */ F(ee, { children: /* @__PURE__ */ F(g, { children: o.map((e) => /* @__PURE__ */ I(y, {
+					value: e,
+					children: [/* @__PURE__ */ F(m, { children: "✓" }), /* @__PURE__ */ F(E, { children: e })]
+				}, e)) }) })
+			}) })
+		]
+	});
 }
-function H({ variant: e = "default", options: t, intensityRange: n, ranges: o, onOptionsChange: s, className: c, ...l }) {
-	let [u, d] = D("2d"), f = P(n, o), m = (e) => {
-		d(e === "3d" ? "3d" : "2d");
+function Z({ variant: e = "default", options: r, intensityRange: i, ranges: a, withGamma: u = !1, onOptionsChange: d, onAutoWindow: f, onTransferFunctionPresetChanged: p, className: m, ...g }) {
+	let [_, v] = z("2d"), y = K(i, a), b = u ? y : {
+		...y,
+		"2d": y["2d"].filter((e) => e.key !== "gamma")
+	}, E = (e) => {
+		v(e === "3d" ? "3d" : "2d");
 	};
-	return /* @__PURE__ */ C("div", {
-		...l,
+	return /* @__PURE__ */ F("div", {
+		...g,
 		"data-imf-ui-component": "ImageDisplayOptions",
-		className: L({ className: c }),
-		children: e === "default" ? /* @__PURE__ */ w(p, {
-			value: u,
-			onValueChange: m,
-			children: [/* @__PURE__ */ w(g, { children: [
-				/* @__PURE__ */ C(_, {
+		className: se({ className: m }),
+		children: e === "default" ? /* @__PURE__ */ I(h, {
+			value: _,
+			onValueChange: E,
+			children: [/* @__PURE__ */ I(S, { children: [
+				/* @__PURE__ */ F(C, {
 					value: "2d",
 					children: "2D Slices"
 				}),
-				/* @__PURE__ */ C(_, {
+				/* @__PURE__ */ F(C, {
 					value: "3d",
 					children: "3D Volume"
 				}),
-				/* @__PURE__ */ C(y, {})
-			] }), /* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(v, {
+				/* @__PURE__ */ F(T, {})
+			] }), /* @__PURE__ */ I(x, { children: [/* @__PURE__ */ F(w, {
 				value: "2d",
-				children: /* @__PURE__ */ C(r, {
+				children: /* @__PURE__ */ I(s, {
 					gap: "3",
-					children: /* @__PURE__ */ C(V, {
-						dimension: "2d",
-						fields: f["2d"],
-						options: t,
-						row: !1,
-						onChange: s
-					})
+					children: [
+						/* @__PURE__ */ F(Y, {
+							dimension: "2d",
+							fields: b["2d"],
+							options: r,
+							row: !1,
+							onChange: d
+						}),
+						/* @__PURE__ */ F(c, {
+							onClick: f,
+							variant: "outline",
+							children: "Auto Window"
+						}),
+						/* @__PURE__ */ F(J, {
+							checked: r["2d"].invert,
+							row: !1,
+							onChange: (e) => {
+								d("2d", { invert: e });
+							}
+						}),
+						r["2d"].presetNames.length > 0 && /* @__PURE__ */ F(N, {}),
+						/* @__PURE__ */ F(X, {
+							dimension: "2d",
+							options: r,
+							onPresetSelected: p
+						})
+					]
 				})
-			}), /* @__PURE__ */ C(v, {
+			}), /* @__PURE__ */ F(w, {
 				value: "3d",
-				children: /* @__PURE__ */ C(r, {
+				children: /* @__PURE__ */ I(s, {
 					gap: "3",
-					children: /* @__PURE__ */ C(V, {
-						dimension: "3d",
-						fields: f["3d"],
-						options: t,
-						row: !1,
-						onChange: s
-					})
+					children: [
+						/* @__PURE__ */ F(Y, {
+							dimension: "3d",
+							fields: b["3d"],
+							options: r,
+							row: !1,
+							onChange: d
+						}),
+						r["3d"].presetNames.length > 0 && /* @__PURE__ */ F(N, {}),
+						/* @__PURE__ */ F(X, {
+							dimension: "3d",
+							options: r,
+							onPresetSelected: p
+						})
+					]
 				})
 			})] })]
-		}) : e === "horizontal" ? /* @__PURE__ */ w(p, {
-			className: A.horizontalTabs,
+		}) : e === "horizontal" ? /* @__PURE__ */ I(h, {
+			className: H.horizontalTabs,
 			orientation: "vertical",
-			value: u,
-			onValueChange: m,
-			children: [/* @__PURE__ */ w(g, {
+			value: _,
+			onValueChange: E,
+			children: [/* @__PURE__ */ I(S, {
 				fill: !0,
 				children: [
-					/* @__PURE__ */ C(_, {
+					/* @__PURE__ */ F(C, {
 						value: "2d",
 						children: "2D"
 					}),
-					/* @__PURE__ */ C(_, {
+					/* @__PURE__ */ F(C, {
 						value: "3d",
 						children: "3D"
 					}),
-					/* @__PURE__ */ C(y, {})
+					/* @__PURE__ */ F(T, {})
 				]
-			}), /* @__PURE__ */ w(h, {
-				className: A.horizontalPanel,
-				children: [/* @__PURE__ */ C(v, {
+			}), /* @__PURE__ */ I(x, {
+				className: H.horizontalPanel,
+				children: [/* @__PURE__ */ F(w, {
 					value: "2d",
-					children: /* @__PURE__ */ C(a, {
+					children: /* @__PURE__ */ F(k, {
 						orientation: "horizontal",
-						className: A.strip,
-						children: /* @__PURE__ */ C(i, {
-							align: "center",
-							gap: "3",
-							children: /* @__PURE__ */ C(V, {
+						className: H.strip,
+						children: /* @__PURE__ */ I(l, {
+							align: "start",
+							gap: "4",
+							children: [/* @__PURE__ */ F(s, {
+								gap: "2",
+								className: H.rowField,
+								children: /* @__PURE__ */ F(Y, {
+									dimension: "2d",
+									fields: b["2d"],
+									options: r,
+									row: !1,
+									onChange: d
+								})
+							}), /* @__PURE__ */ I(s, { children: [/* @__PURE__ */ F(X, {
 								dimension: "2d",
-								fields: f["2d"],
-								options: t,
+								options: r,
+								onPresetSelected: p
+							}), /* @__PURE__ */ I(l, { children: [/* @__PURE__ */ F(c, {
+								size: "sm",
+								onClick: f,
+								variant: "outline",
+								startIcon: /* @__PURE__ */ F(t, { glyph: n }),
+								children: "Auto Window"
+							}), /* @__PURE__ */ F(J, {
+								checked: r["2d"].invert,
 								row: !0,
-								onChange: s
-							})
+								onChange: (e) => {
+									d("2d", { invert: e });
+								}
+							})] })] })]
 						})
 					})
-				}), /* @__PURE__ */ C(v, {
+				}), /* @__PURE__ */ F(w, {
 					value: "3d",
-					children: /* @__PURE__ */ C(a, {
+					children: /* @__PURE__ */ F(k, {
 						orientation: "horizontal",
-						className: A.strip,
-						children: /* @__PURE__ */ C(i, {
-							align: "center",
-							gap: "3",
-							children: /* @__PURE__ */ C(V, {
+						className: H.strip,
+						children: /* @__PURE__ */ I(l, {
+							align: "start",
+							gap: "4",
+							children: [/* @__PURE__ */ F(s, {
+								className: H.rowField,
+								align: "center",
+								gap: "2",
+								children: /* @__PURE__ */ F(Y, {
+									dimension: "3d",
+									fields: b["3d"],
+									options: r,
+									row: !1,
+									onChange: d
+								})
+							}), /* @__PURE__ */ F(s, { children: /* @__PURE__ */ F(X, {
 								dimension: "3d",
-								fields: f["3d"],
-								options: t,
-								row: !0,
-								onChange: s
-							})
+								options: r,
+								onPresetSelected: p
+							}) })]
 						})
 					})
 				})]
 			})]
-		}) : /* @__PURE__ */ C(a, {
+		}) : /* @__PURE__ */ F(k, {
 			orientation: "horizontal",
-			className: A.strip,
-			children: /* @__PURE__ */ w(i, {
+			className: H.strip,
+			children: /* @__PURE__ */ I(l, {
 				align: "center",
 				gap: "3",
-				children: [/* @__PURE__ */ C(B, {
-					active: u,
-					onChange: d
-				}), /* @__PURE__ */ C(V, {
-					dimension: u,
-					fields: f[u],
-					options: t,
-					row: !0,
-					onChange: s
-				})]
+				children: [
+					/* @__PURE__ */ F(le, {
+						active: _,
+						onChange: v
+					}),
+					/* @__PURE__ */ F(Y, {
+						dimension: _,
+						fields: b[_],
+						options: r,
+						row: !0,
+						onChange: d
+					}),
+					_ === "2d" && /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(o, {
+						onClick: f,
+						size: "sm",
+						variant: "outline",
+						glyph: n,
+						label: "Auto Window"
+					}), /* @__PURE__ */ F(J, {
+						checked: r["2d"].invert,
+						row: !0,
+						onChange: (e) => {
+							d("2d", { invert: e });
+						}
+					})] })
+				]
 			})
 		})
 	});
 }
-H.displayName = "ImageDisplayOptionsView";
+Z.displayName = "ImageDisplayOptionsView";
 //#endregion
 //#region src/integrations/image-display-options/image-display-options.tsx
-function U({ data: e, variant: t = "default", ranges: n, ...r }) {
-	let i = O(e), a = k(e), o = {
+function Q({ data: e, variant: t = "default", ranges: n, withGamma: r = !1, ...i }) {
+	let a = B(e), o = V(e), s = a.transferFunctionPresetNames(), c = a.transferFunction().presetName;
+	c ||= null;
+	let l = o.transferFunctionPresetNames(), u = o.transferFunction().presetName;
+	u ||= null;
+	let d = {
 		"2d": {
-			window: i.window,
-			level: i.level,
-			gamma: i.gamma,
-			invert: i.invert
-		},
-		"3d": {
 			window: a.window,
 			level: a.level,
-			invert: a.invert
+			gamma: a.gamma,
+			invert: a.invert,
+			currentPreset: c,
+			presetNames: s
+		},
+		"3d": {
+			window: o.window,
+			level: o.level,
+			currentPreset: u,
+			presetNames: l
 		}
-	}, s = E(() => e.minmaxIntensityOriginal(), [e]);
-	return /* @__PURE__ */ C(H, {
-		...r,
+	}, f = R(() => e.minmaxIntensityOriginal(), [e]);
+	return /* @__PURE__ */ F(Z, {
+		...i,
 		variant: t,
-		options: o,
-		intensityRange: s,
+		options: d,
+		intensityRange: f,
 		ranges: n,
+		withGamma: r,
 		onOptionsChange: (e, t) => {
-			Object.assign(e === "2d" ? i : a, t);
+			Object.assign(e === "2d" ? a : o, t);
+		},
+		onAutoWindow: () => e.autoWindow(),
+		onTransferFunctionPresetChanged: (t, n) => {
+			(t === "2d" ? a : o).applyTransferFunctionPreset(n, e);
 		}
 	});
 }
-U.displayName = "ImageDisplayOptions";
+Q.displayName = "ImageDisplayOptions";
 //#endregion
 //#region src/integrations/image-display-options/image-display-options.meta.ts
-var W = {
+var $ = {
 	name: "ImageDisplayOptions",
-	category: e.inputs,
+	category: r.inputs,
 	status: "experimental",
-	description: "Panel and toolbar controls for an image dataset's display options, including window, level, gamma, and invert settings.",
+	description: "Panel and toolbar controls for an image dataset's display options: window, level, optional gamma, invert, auto window, and transfer-function presets.",
 	origin: "adapted",
 	internalDependencies: [
 		"Tabs",
@@ -319,7 +428,12 @@ var W = {
 		"Toggle",
 		"Row",
 		"Stack",
-		"ScrollArea"
+		"ScrollArea",
+		"Select",
+		"Button",
+		"IconButton",
+		"Separator",
+		"Icon"
 	],
 	upstream: {
 		name: "ImFusion Web SDK",
@@ -330,4 +444,4 @@ var W = {
 	}
 };
 //#endregion
-export { U as ImageDisplayOptions, W as imageDisplayOptionsMeta };
+export { Q as ImageDisplayOptions, $ as imageDisplayOptionsMeta };

package/dist/integrations/view-tools.js

@@ -1,8 +1,7 @@
 import { hl as e, pM as t, tk as n, vM as r, yC as i } from "../icons-CMetKl2x.js";
 import { t as a } from "../meta-V_KyLeGn.js";
 import { n as o, t as s } from "../toggle-group-CVQzM3lQ.js";
-import { n as c } from "../icon-button-kVghav2z.js";
-import { n as l, t as u } from "../row-CImu8yXV.js";
+import { i as c, n as l, t as u } from "../row-CaeE5pqs.js";
 import { cva as d } from "class-variance-authority";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useSyncExternalStore as m } from "react";