@imfusion/web-ui 0.11.1-dev.48.g0fcb0d30 → 0.11.1-dev.49.gcda1589f

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

@@ -1,8 +1,9 @@
 import { t as e } from "../meta-V_KyLeGn.js";
 import { n as t, t as n } from "../toggle-group-eGr6_hgQ.js";
-import { a as r, d as i, f as a, i as o, m as s, n as c, o as l, r as u, t as d, u as f } from "../tabs-EMQSqOk5.js";
-import { t as p } from "../scroll-area-CXQ_SxPX.js";
-import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "../slider-CpIZMAFl.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";
@@ -76,7 +77,7 @@ function I(e, t) {
 //#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 i = /* @__PURE__ */ w(h, {
+	let a = /* @__PURE__ */ w(s, {
 		value: t,
 		min: e.min,
 		max: e.max,
@@ -85,19 +86,19 @@ function R({ spec: e, value: t, row: n, onChange: r }) {
 		onValueChange: (e) => {
 			r(typeof e == "number" ? e : e[0]);
 		},
-		children: [/* @__PURE__ */ w(f, {
+		children: [/* @__PURE__ */ w(i, {
 			justify: "between",
-			children: [/* @__PURE__ */ C(v, { children: e.label }), /* @__PURE__ */ C(y, {})]
-		}), /* @__PURE__ */ C(b, { children: /* @__PURE__ */ w(_, { children: [/* @__PURE__ */ C(g, {}), /* @__PURE__ */ C(m, { "aria-label": e.label })] }) })]
+			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 })] }) })]
 	});
 	return n ? /* @__PURE__ */ C("div", {
 		className: A.rowField,
-		children: i
-	}) : i;
+		children: a
+	}) : a;
 }
 function z({ checked: e, row: t, onChange: n }) {
 	let r = T();
-	return /* @__PURE__ */ w(f, {
+	return /* @__PURE__ */ w(i, {
 		align: "center",
 		justify: t ? "start" : "between",
 		gap: "2",
@@ -106,13 +107,13 @@ function z({ checked: e, row: t, onChange: n }) {
 			id: r,
 			className: A.invertLabel,
 			children: "Invert"
-		}), /* @__PURE__ */ C(i, {
+		}), /* @__PURE__ */ C(b, {
 			"aria-labelledby": r,
 			checked: e,
 			onCheckedChange: (e) => {
 				n(e);
 			},
-			children: /* @__PURE__ */ C(a, {})
+			children: /* @__PURE__ */ C(m, {})
 		})]
 	});
 }
@@ -151,123 +152,123 @@ function V({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
 		}
 	})] });
 }
-function H({ variant: e = "default", options: t, intensityRange: n, ranges: i, onOptionsChange: a, className: m, ...h }) {
-	let [g, _] = D("2d"), v = P(n, i), y = (e) => {
-		_(e === "3d" ? "3d" : "2d");
+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");
 	};
 	return /* @__PURE__ */ C("div", {
-		...h,
+		...l,
 		"data-imf-ui-component": "ImageDisplayOptions",
-		className: L({ className: m }),
-		children: e === "default" ? /* @__PURE__ */ w(r, {
-			value: g,
-			onValueChange: y,
-			children: [/* @__PURE__ */ w(c, { children: [
-				/* @__PURE__ */ C(l, {
+		className: L({ className: c }),
+		children: e === "default" ? /* @__PURE__ */ w(p, {
+			value: u,
+			onValueChange: m,
+			children: [/* @__PURE__ */ w(g, { children: [
+				/* @__PURE__ */ C(_, {
 					value: "2d",
 					children: "2D Slices"
 				}),
-				/* @__PURE__ */ C(l, {
+				/* @__PURE__ */ C(_, {
 					value: "3d",
 					children: "3D Volume"
 				}),
-				/* @__PURE__ */ C(d, {})
-			] }), /* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(u, {
+				/* @__PURE__ */ C(y, {})
+			] }), /* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(v, {
 				value: "2d",
-				children: /* @__PURE__ */ C(s, {
+				children: /* @__PURE__ */ C(r, {
 					gap: "3",
 					children: /* @__PURE__ */ C(V, {
 						dimension: "2d",
-						fields: v["2d"],
+						fields: f["2d"],
 						options: t,
 						row: !1,
-						onChange: a
+						onChange: s
 					})
 				})
-			}), /* @__PURE__ */ C(u, {
+			}), /* @__PURE__ */ C(v, {
 				value: "3d",
-				children: /* @__PURE__ */ C(s, {
+				children: /* @__PURE__ */ C(r, {
 					gap: "3",
 					children: /* @__PURE__ */ C(V, {
 						dimension: "3d",
-						fields: v["3d"],
+						fields: f["3d"],
 						options: t,
 						row: !1,
-						onChange: a
+						onChange: s
 					})
 				})
 			})] })]
-		}) : e === "horizontal" ? /* @__PURE__ */ w(r, {
+		}) : e === "horizontal" ? /* @__PURE__ */ w(p, {
 			className: A.horizontalTabs,
 			orientation: "vertical",
-			value: g,
-			onValueChange: y,
-			children: [/* @__PURE__ */ w(c, {
+			value: u,
+			onValueChange: m,
+			children: [/* @__PURE__ */ w(g, {
 				fill: !0,
 				children: [
-					/* @__PURE__ */ C(l, {
+					/* @__PURE__ */ C(_, {
 						value: "2d",
 						children: "2D"
 					}),
-					/* @__PURE__ */ C(l, {
+					/* @__PURE__ */ C(_, {
 						value: "3d",
 						children: "3D"
 					}),
-					/* @__PURE__ */ C(d, {})
+					/* @__PURE__ */ C(y, {})
 				]
-			}), /* @__PURE__ */ w(o, {
+			}), /* @__PURE__ */ w(h, {
 				className: A.horizontalPanel,
-				children: [/* @__PURE__ */ C(u, {
+				children: [/* @__PURE__ */ C(v, {
 					value: "2d",
-					children: /* @__PURE__ */ C(p, {
+					children: /* @__PURE__ */ C(a, {
 						orientation: "horizontal",
 						className: A.strip,
-						children: /* @__PURE__ */ C(f, {
+						children: /* @__PURE__ */ C(i, {
 							align: "center",
 							gap: "3",
 							children: /* @__PURE__ */ C(V, {
 								dimension: "2d",
-								fields: v["2d"],
+								fields: f["2d"],
 								options: t,
 								row: !0,
-								onChange: a
+								onChange: s
 							})
 						})
 					})
-				}), /* @__PURE__ */ C(u, {
+				}), /* @__PURE__ */ C(v, {
 					value: "3d",
-					children: /* @__PURE__ */ C(p, {
+					children: /* @__PURE__ */ C(a, {
 						orientation: "horizontal",
 						className: A.strip,
-						children: /* @__PURE__ */ C(f, {
+						children: /* @__PURE__ */ C(i, {
 							align: "center",
 							gap: "3",
 							children: /* @__PURE__ */ C(V, {
 								dimension: "3d",
-								fields: v["3d"],
+								fields: f["3d"],
 								options: t,
 								row: !0,
-								onChange: a
+								onChange: s
 							})
 						})
 					})
 				})]
 			})]
-		}) : /* @__PURE__ */ C(p, {
+		}) : /* @__PURE__ */ C(a, {
 			orientation: "horizontal",
 			className: A.strip,
-			children: /* @__PURE__ */ w(f, {
+			children: /* @__PURE__ */ w(i, {
 				align: "center",
 				gap: "3",
 				children: [/* @__PURE__ */ C(B, {
-					active: g,
-					onChange: _
+					active: u,
+					onChange: d
 				}), /* @__PURE__ */ C(V, {
-					dimension: g,
-					fields: v[g],
+					dimension: u,
+					fields: f[u],
 					options: t,
 					row: !0,
-					onChange: a
+					onChange: s
 				})]
 			})
 		})

package/dist/integrations/view-tools/index.d.ts

@@ -0,0 +1,4 @@
+export { useViewInteraction } from './use-view-interaction';
+export { ViewTools } from './view-tools';
+export type { ViewToolAction } from './view-tools-view';
+export { viewToolsMeta } from './view-tools.meta';

package/dist/integrations/view-tools/use-view-interaction.d.ts

@@ -0,0 +1,21 @@
+import { SliceViewDefaultEventHandler } from '@imfusion/sdk';
+import { ViewToolAction } from './view-tools-view';
+type InteractiveView = {
+    defaultEventHandler(): Pick<SliceViewDefaultEventHandler, "limitViewInteractionTo" | "restoreDefaultInputMapping"> | null;
+};
+export declare function createViewInteractionStore(views: () => InteractiveView[]): {
+    getViewInteraction: () => ViewToolAction;
+    subscribe: (listener: () => void) => () => boolean;
+    setViewInteraction: (next: ViewToolAction) => void;
+};
+/**
+ * useViewInteraction - the tool that limits the left mouse button in the main 2D and MPR views, shared by every caller
+ * and by `ViewTools`. `setViewInteraction("Default")` restores the default input mapping.
+ *
+ * Must run inside `ImFusionReady`, within an `ImFusionProvider`. Needs `@imfusion/sdk` 1.3.0 or later.
+ */
+export declare function useViewInteraction(): {
+    viewInteraction: ViewToolAction;
+    setViewInteraction: (next: ViewToolAction) => void;
+};
+export {};

package/dist/integrations/view-tools/view-tools-view.d.ts

@@ -0,0 +1,23 @@
+import { SliceViewAction } from '@imfusion/sdk';
+type ViewTool = Extract<SliceViewAction, "Pan" | "Zoom" | "Windowing">;
+/** `Default` restores the SDK's full input mapping; every other value limits the left mouse button to that action. */
+export type ViewToolAction = "Default" | ViewTool;
+type ViewToolsViewProps = React.ComponentProps<"div"> & {
+    /** The active tool, or `"Default"` when none is pressed. */
+    viewInteraction: ViewToolAction;
+    /** Called with the pressed tool, or `"Default"` when the active tool is pressed again. */
+    onViewInteractionChange: (viewInteraction: ViewToolAction) => void;
+    /** Called when the reset button is pressed. */
+    onReset: () => void;
+    /** Lays the tools out in a row or a column. */
+    orientation?: "horizontal" | "vertical";
+};
+/**
+ * ViewToolsView - the SDK-free presentational surface behind `ViewTools`:
+ * the same toggles and reset button, driven by plain props instead of the SDK views.
+ */
+export declare function ViewToolsView({ viewInteraction, onViewInteractionChange, onReset, orientation, "aria-label": ariaLabel, className, ...props }: ViewToolsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ViewToolsView {
+    var displayName: string;
+}
+export {};

package/dist/integrations/view-tools/view-tools.d.ts

@@ -0,0 +1,14 @@
+import { ViewToolsView } from './view-tools-view';
+type Props = Omit<React.ComponentProps<typeof ViewToolsView>, "viewInteraction" | "onViewInteractionChange" | "onReset">;
+/**
+ * ViewTools - Pan, Zoom, and Windowing toggles that limit the left mouse button in the main 2D and MPR views to one
+ * action, and a button that resets the view group. Releasing the active toggle restores the default input mapping.
+ * The active tool is the one `useViewInteraction` reads and sets.
+ *
+ * Must render inside `ImFusionReady`, within an `ImFusionProvider`. Needs `@imfusion/sdk` 1.3.0 or later.
+ */
+export declare function ViewTools(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ViewTools {
+    var displayName: string;
+}
+export {};

package/dist/integrations/view-tools/view-tools.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const viewToolsMeta: ComponentMeta;

package/dist/integrations/view-tools.js

@@ -0,0 +1,133 @@
+import { _M as e, ek as t, fM as n, hl as r, vC as i } from "../icons-vc1WZCxX.js";
+import { t as a } from "../meta-V_KyLeGn.js";
+import { n as o, t as s } from "../toggle-group-eGr6_hgQ.js";
+import { n as c } from "../icon-button-roSB497o.js";
+import { n as l, t as u } from "../row-CImu8yXV.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";
+import { useImFusion as h } from "@imfusion/sdk-react";
+//#region src/integrations/view-tools/use-view-interaction.ts
+function g(e) {
+	return [
+		e.display.main2dView(),
+		e.display.mainAxialView(),
+		e.display.mainCoronalView(),
+		e.display.mainSagittalView()
+	];
+}
+function _(e) {
+	let t = "Default", n = /* @__PURE__ */ new Set();
+	return {
+		getViewInteraction: () => t,
+		subscribe: (e) => (n.add(e), () => n.delete(e)),
+		setViewInteraction: (r) => {
+			if (r !== t) {
+				t = r;
+				for (let t of e()) {
+					let e = t.defaultEventHandler();
+					r === "Default" ? e?.restoreDefaultInputMapping() : e?.limitViewInteractionTo(r);
+				}
+				for (let e of n) e();
+			}
+		}
+	};
+}
+var v = /* @__PURE__ */ new WeakMap();
+function y(e) {
+	let t = v.get(e);
+	return t || (t = _(() => g(e)), v.set(e, t)), t;
+}
+function b() {
+	let { getViewInteraction: e, subscribe: t, setViewInteraction: n } = y(h());
+	return {
+		viewInteraction: m(t, e),
+		setViewInteraction: n
+	};
+}
+//#endregion
+//#region src/integrations/view-tools/view-tools-view.tsx
+var x = d({ root: "imf-ui-view-tools-module-root" }.root), S = {
+	Pan: r,
+	Zoom: n,
+	Windowing: t
+};
+function C(e) {
+	return typeof e == "string" && Object.hasOwn(S, e);
+}
+function w({ viewInteraction: t, onViewInteractionChange: n, onReset: r, orientation: a = "horizontal", "aria-label": d = "View tools", className: m, ...h }) {
+	let g = a === "vertical" ? l : u;
+	return /* @__PURE__ */ f("div", {
+		role: "group",
+		"aria-label": d,
+		...h,
+		"data-imf-ui-component": "ViewTools",
+		"data-orientation": a,
+		className: x({ className: m }),
+		children: /* @__PURE__ */ p(g, {
+			gap: "2",
+			align: "center",
+			children: [/* @__PURE__ */ f(s, {
+				orientation: a,
+				value: t === "Default" ? [] : [t],
+				onValueChange: (e) => {
+					n(C(e[0]) ? e[0] : "Default");
+				},
+				children: Object.entries(S).map(([t, n]) => /* @__PURE__ */ f(o, {
+					value: t,
+					"aria-label": t,
+					children: /* @__PURE__ */ f(e, {
+						glyph: n,
+						"aria-hidden": !0
+					})
+				}, t))
+			}), /* @__PURE__ */ f(c, {
+				glyph: i,
+				label: "Reset view",
+				variant: "ghost",
+				onClick: r
+			})]
+		})
+	});
+}
+w.displayName = "ViewToolsView";
+//#endregion
+//#region src/integrations/view-tools/view-tools.tsx
+function T(e) {
+	let t = h(), { viewInteraction: n, setViewInteraction: r } = b();
+	return /* @__PURE__ */ f(w, {
+		...e,
+		viewInteraction: n,
+		onViewInteractionChange: r,
+		onReset: () => {
+			t.display.viewGroup().reset();
+		}
+	});
+}
+T.displayName = "ViewTools";
+//#endregion
+//#region src/integrations/view-tools/view-tools.meta.ts
+var E = {
+	name: "ViewTools",
+	category: a.inputs,
+	status: "experimental",
+	description: "Toolbar that limits mouse interaction in the ImFusion main 2D and MPR views to pan, zoom, or windowing, with a reset button for the view group. For a segmented control not tied to the SDK, use ToggleGroup.",
+	origin: "adapted",
+	internalDependencies: [
+		"ToggleGroup",
+		"Toggle",
+		"Icon",
+		"IconButton",
+		"Row",
+		"Stack"
+	],
+	upstream: {
+		name: "ImFusion Web SDK",
+		websiteLink: "https://www.imfusion.com/",
+		docLink: "https://docs.imfusion.com/",
+		llmDocLink: "https://docs.imfusion.com/",
+		runtimeDependencies: ["@imfusion/sdk", "@imfusion/sdk-react"]
+	}
+};
+//#endregion
+export { T as ViewTools, b as useViewInteraction, E as viewToolsMeta };

package/dist/row-CImu8yXV.js

@@ -0,0 +1,136 @@
+import { cva as e } from "class-variance-authority";
+import { jsx as t } from "react/jsx-runtime";
+var n = {
+	alignCenter: "imf-ui-stack-module-alignCenter",
+	alignEnd: "imf-ui-stack-module-alignEnd",
+	alignStart: "imf-ui-stack-module-alignStart",
+	alignStretch: "imf-ui-stack-module-alignStretch",
+	gap0: "imf-ui-stack-module-gap0",
+	gap1: "imf-ui-stack-module-gap1",
+	gap10: "imf-ui-stack-module-gap10",
+	gap2: "imf-ui-stack-module-gap2",
+	gap3: "imf-ui-stack-module-gap3",
+	gap4: "imf-ui-stack-module-gap4",
+	gap5: "imf-ui-stack-module-gap5",
+	gap6: "imf-ui-stack-module-gap6",
+	gap7: "imf-ui-stack-module-gap7",
+	gap8: "imf-ui-stack-module-gap8",
+	gap9: "imf-ui-stack-module-gap9",
+	justifyAround: "imf-ui-stack-module-justifyAround",
+	justifyBetween: "imf-ui-stack-module-justifyBetween",
+	justifyCenter: "imf-ui-stack-module-justifyCenter",
+	justifyEnd: "imf-ui-stack-module-justifyEnd",
+	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
+	justifyStart: "imf-ui-stack-module-justifyStart",
+	root: "imf-ui-stack-module-root"
+}, r = e(n.root, { variants: {
+	gap: {
+		0: n.gap0,
+		1: n.gap1,
+		2: n.gap2,
+		3: n.gap3,
+		4: n.gap4,
+		5: n.gap5,
+		6: n.gap6,
+		7: n.gap7,
+		8: n.gap8,
+		9: n.gap9,
+		10: n.gap10
+	},
+	align: {
+		start: n.alignStart,
+		center: n.alignCenter,
+		end: n.alignEnd,
+		stretch: n.alignStretch
+	},
+	justify: {
+		start: n.justifyStart,
+		center: n.justifyCenter,
+		end: n.justifyEnd,
+		between: n.justifyBetween,
+		around: n.justifyAround,
+		evenly: n.justifyEvenly
+	}
+} });
+function i({ gap: e = "4", align: n = "stretch", justify: i = "start", ...a }) {
+	return /* @__PURE__ */ t("div", {
+		...a,
+		"data-imf-ui-component": "Stack",
+		className: r({
+			gap: e,
+			align: n,
+			justify: i,
+			className: a.className
+		})
+	});
+}
+var a = {
+	alignCenter: "imf-ui-row-module-alignCenter",
+	alignEnd: "imf-ui-row-module-alignEnd",
+	alignStart: "imf-ui-row-module-alignStart",
+	alignStretch: "imf-ui-row-module-alignStretch",
+	gap1: "imf-ui-row-module-gap1",
+	gap10: "imf-ui-row-module-gap10",
+	gap2: "imf-ui-row-module-gap2",
+	gap3: "imf-ui-row-module-gap3",
+	gap4: "imf-ui-row-module-gap4",
+	gap5: "imf-ui-row-module-gap5",
+	gap6: "imf-ui-row-module-gap6",
+	gap7: "imf-ui-row-module-gap7",
+	gap8: "imf-ui-row-module-gap8",
+	gap9: "imf-ui-row-module-gap9",
+	justifyAround: "imf-ui-row-module-justifyAround",
+	justifyBetween: "imf-ui-row-module-justifyBetween",
+	justifyCenter: "imf-ui-row-module-justifyCenter",
+	justifyEnd: "imf-ui-row-module-justifyEnd",
+	justifyEvenly: "imf-ui-row-module-justifyEvenly",
+	justifyStart: "imf-ui-row-module-justifyStart",
+	root: "imf-ui-row-module-root",
+	wrap: "imf-ui-row-module-wrap"
+}, o = e(a.root, { variants: {
+	gap: {
+		1: a.gap1,
+		2: a.gap2,
+		3: a.gap3,
+		4: a.gap4,
+		5: a.gap5,
+		6: a.gap6,
+		7: a.gap7,
+		8: a.gap8,
+		9: a.gap9,
+		10: a.gap10
+	},
+	align: {
+		start: a.alignStart,
+		center: a.alignCenter,
+		end: a.alignEnd,
+		stretch: a.alignStretch
+	},
+	justify: {
+		start: a.justifyStart,
+		center: a.justifyCenter,
+		end: a.justifyEnd,
+		between: a.justifyBetween,
+		around: a.justifyAround,
+		evenly: a.justifyEvenly
+	},
+	wrap: {
+		true: a.wrap,
+		false: null
+	}
+} });
+function s({ gap: e = "2", align: n = "stretch", justify: r = "start", wrap: i = !1, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		...a,
+		"data-imf-ui-component": "Row",
+		className: o({
+			gap: e,
+			align: n,
+			justify: r,
+			wrap: i,
+			className: a.className
+		})
+	});
+}
+//#endregion
+export { i as n, s as t };