cloudmr-ux 4.3.1 → 4.3.3

package/dist/CmrComponents/draw-toolkit/DrawPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DrawPlatteProps {
+    expandDrawOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const DrawPlatte: React.FC<DrawPlatteProps>;
+export default DrawPlatte;

package/dist/CmrComponents/draw-toolkit/DrawPlatte.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+var DrawPlatte = function (_a) {
+    var expandDrawOptions = _a.expandDrawOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var filledOptions = [
+        _jsx(FiberManualRecordIcon, { sx: { color: "red" } }, "f0"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "green" } }, "f1"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "blue" } }, "f2"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "yellow" } }, "f3"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "cyan" } }, "f4"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "#e81ce8" } }, "f5"),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandDrawOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandDrawOptions ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Brush Size: ".concat(brushSize) })), _jsx(Slider, { value: brushSize, sx: {
+                            width: "80%",
+                            color: "#fff",
+                            "& .MuiSlider-track": { backgroundColor: "#fff", border: "none" },
+                            "& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.3)" },
+                            "& .MuiSlider-thumb": {
+                                backgroundColor: "#fff",
+                                border: "2px solid #fff",
+                                "&:hover, &.Mui-focusVisible, &.Mui-active": {
+                                    boxShadow: "0 0 0 8px rgba(255,255,255,0.16)"
+                                }
+                            },
+                            "& .MuiSlider-mark": { backgroundColor: "#fff" },
+                            "& .MuiSlider-markActive": { backgroundColor: "#fff" },
+                            "& .MuiSlider-valueLabel": {
+                                backgroundColor: "#fff",
+                                color: "#000"
+                            }
+                        }, step: 2, min: 1, max: 15, marks: true, onChange: function (_event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack, __assign({ direction: "row" }, { children: filledOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index + 1 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default DrawPlatte;

package/dist/CmrComponents/draw-toolkit/DrawToolkit.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import type { ROI } from "../../core/features/rois/roiTypes";
+export interface DrawToolkitProps {
+    nv: any;
+    volumes: {
+        url: string;
+        name: string;
+    }[];
+    selectedVolume: number;
+    updateDrawPen: (e: any) => void;
+    drawPen: number;
+    setDrawingEnabled: (enabled: boolean) => void;
+    drawingEnabled: boolean;
+    rois: ROI[];
+    selectedROI: number;
+    setSelectedROI: (selected: number) => void;
+    saveROI: () => void;
+    changesMade: boolean;
+    drawUndo: () => void;
+    style: CSSProperties;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+    resampleImage: () => void;
+    roiVisible: boolean;
+    toggleROIVisible: () => void;
+    drawingOpacity: number;
+    setDrawingOpacity: (opacity: number) => void;
+    labelsVisible: boolean;
+    toggleLabelsVisible: () => void;
+    setDrawingChanged: (changed: boolean) => void;
+}
+export declare const DrawToolkit: (props: DrawToolkitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/draw-toolkit/DrawToolkit.js

@@ -0,0 +1,136 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, IconButton, Slider, Stack, Tooltip, Typography, FormLabel, } from "@mui/material";
+import BrushIcon from "@mui/icons-material/Brush";
+import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
+import ReplyIcon from "@mui/icons-material/Reply";
+import CameraAltIcon from "@mui/icons-material/CameraAlt";
+import React, { useState } from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
+import DrawPlatte from "./DrawPlatte";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EraserPlatte from "./EraserPlatte";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import OpacityIcon from "@mui/icons-material/Opacity";
+import MaskPlatte from "./MaskPlatte";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+export var DrawToolkit = function (props) {
+    var _a = useState("n"), expandedOption = _a[0], setExpandedOption = _a[1];
+    var _b = React.useState(false), expandOpacityOptions = _b[0], setExpandOpacityOptions = _b[1];
+    var penColor = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"][(props.drawPen & 7) - 1];
+    var filled = props.drawPen > 7;
+    function clickPaintBrush() {
+        if (expandedOption === "d") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("d");
+        }
+        props.setDrawingEnabled(expandedOption !== "d");
+    }
+    function clickEraser() {
+        if (expandedOption === "e") {
+            setExpandedOption("n");
+        }
+        else {
+            props.updateDrawPen({ target: { value: 8 } });
+            setExpandedOption("e");
+        }
+        props.setDrawingEnabled(expandedOption !== "e");
+    }
+    var _c = useState(undefined), maskColor = _c[0], setMaskColor = _c[1];
+    function clickMask() {
+        if (expandedOption === "m") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("m");
+        }
+        props.setDrawingEnabled(false);
+    }
+    return (_jsx(ClickAwayListener, __assign({ onClickAway: function () {
+            setExpandedOption("n");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(false);
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                display: "flex",
+                width: "100%",
+                flexDirection: "row",
+                justifyItems: "center",
+                alignItems: "center",
+                borderRadius: "4px",
+                height: "20pt",
+                backgroundColor: "#333"
+            }, style: props.style }, { children: [_jsx(FormControl, { children: _jsx(FormLabel, __assign({ component: "legend", className: "ms-2", style: {
+                            width: "100%",
+                            textAlign: "center",
+                            color: "white",
+                            fontSize: 16,
+                            fontWeight: 400
+                        }, sx: {
+                            marginBottom: 0,
+                            marginLeft: 2,
+                            color: "white",
+                            fontWeight: 500,
+                            fontSize: 14
+                        } }, { children: "ROI Tools:" })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "draw", onClick: clickPaintBrush }, { children: _jsx(BrushIcon, { style: {
+                                        color: expandedOption === "d" && penColor !== undefined
+                                            ? penColor
+                                            : "white"
+                                    } }) })), _jsx(DrawPlatte, { expandDrawOptions: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "erase", onClick: clickEraser }, { children: filled || !(expandedOption === "e") ? (_jsx(EraserIcon, { style: { color: "#ddd" } })) : (_jsx(AutoFixNormalOutlinedIcon, { style: { color: "white" } })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", onClick: function () {
+                                props.drawUndo();
+                            } }, { children: _jsx(ReplyIcon, { style: { color: "white" } }) })) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "capture", onClick: function () {
+                            props.nv.saveScene("".concat(props.volumes[props.selectedVolume].name, "_drawing.png"));
+                        } }, { children: _jsx(CameraAltIcon, { style: { color: "white" } }) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "delete", onClick: function () {
+                            props.nv.clearDrawing();
+                            props.resampleImage();
+                            props.setDrawingChanged(false);
+                        } }, { children: _jsx(DeleteIcon, { style: { color: "white" } }) })) }), _jsx(Tooltip, __assign({ title: "Region of interests visibility" }, { children: _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "visible", onClick: function () {
+                                props.toggleROIVisible();
+                            } }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { style: { color: "white" } })) : (_jsx(VisibilityOffIcon, { style: { color: "white" } })) })) }) })), _jsxs(FormControl, __assign({ style: { flexDirection: "row", alignItems: "center", color: "white" } }, { children: [_jsx(Tooltip, __assign({ title: "Region of interests opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", onClick: function () {
+                                    setExpandOpacityOptions(!expandOpacityOptions);
+                                } }, { children: _jsx(OpacityIcon, { style: { color: "white" } }) })) })), "=", " ".concat(props.drawingOpacity), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(FormControl, { children: [_jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", onClick: clickMask }, { children: _jsx(FormatColorFillIcon, { style: {
+                                        color: expandedOption === "m" && maskColor !== undefined
+                                            ? maskColor
+                                            : "white"
+                                    } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                props.resampleImage();
+                                props.setDrawingChanged(true);
+                            }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () {
+                                setExpandedOption("n");
+                            } })] })] })) })));
+};
+function EraserIcon(props) {
+    return (_jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 25 25" }, { children: [_jsx("rect", { x: "6", y: "3", width: "12", height: "22", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "currentColor" }), _jsx("rect", { x: "7", y: "4", width: "10", height: "8", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "#FFFFFF" })] })));
+}
+var OpacityPlatte = function (_a) {
+    var drawingOpacity = _a.drawingOpacity, setDrawingOpacity = _a.setDrawingOpacity, expanded = _a.expanded;
+    return (_jsx(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Opacity: ".concat(drawingOpacity) })), _jsx(Slider, { sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (_event, value) {
+                        setDrawingOpacity(value);
+                    } })] })) })));
+};

package/dist/CmrComponents/draw-toolkit/EraserPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface EraserPlatteProps {
+    expandEraseOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const EraserPlatte: React.FC<EraserPlatteProps>;
+export default EraserPlatte;

package/dist/CmrComponents/draw-toolkit/EraserPlatte.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+var EraserPlatte = function (_a) {
+    var expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var eraseOptions = [
+        _jsx(FiberManualRecordIcon, { style: { color: "white" } }, "e0"),
+        _jsx(FiberManualRecordOutlinedIcon, { style: { color: "white" } }, "e1"),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandEraseOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandEraseOptions ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Eraser Size: ".concat(brushSize) })), _jsx(Slider, { sx: { width: "80%" }, value: brushSize, step: 2, min: 1, max: 15, marks: true, onChange: function (_event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack, __assign({ direction: "row", style: { justifyContent: "center" } }, { children: eraseOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index === 0 ? 8 : 0 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default EraserPlatte;

package/dist/CmrComponents/draw-toolkit/MaskPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface MaskPlatteProps {
+    expanded: boolean;
+    nv: any;
+    setMaskColor: (color: string | undefined) => void;
+    resampleImage: () => void;
+    unfocus: () => void;
+}
+declare const MaskPlatte: React.FC<MaskPlatteProps>;
+export default MaskPlatte;

package/dist/CmrComponents/draw-toolkit/MaskPlatte.js

@@ -0,0 +1,92 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Stack, IconButton, Typography, Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { InvertibleDualSlider } from "../double-slider/InvertibleDualSlider";
+import { CmrCheckbox } from "../CmrCheckbox/CmrCheckbox";
+var MaskPlatte = function (_a) {
+    var expanded = _a.expanded, nv = _a.nv, setMaskColor = _a.setMaskColor, resampleImage = _a.resampleImage, unfocus = _a.unfocus;
+    var _b = useState(0), colorIndex = _b[0], storeColorIndex = _b[1];
+    var _c = useState("red"), maskColor = _c[0], storeMaskColor = _c[1];
+    var _d = useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = useState(undefined), original = _e[0], setOriginal = _e[1];
+    var colors = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"];
+    var filledOptions = colors.map(function (color, i) { return (_jsx(FiberManualRecordIcon, { sx: { color: color } }, i)); });
+    if (expanded) {
+        setMaskColor(maskColor);
+    }
+    else {
+        setMaskColor(undefined);
+    }
+    var _f = useState(nv.volumes[0] ? nv.volumes[0].vox_min : 0), min = _f[0], setMin = _f[1];
+    var _g = useState(nv.volumes[0] ? nv.volumes[0].vox_max : 1), max = _g[0], setMax = _g[1];
+    var cancelMask = function () {
+        if (original)
+            nv.drawBitmap = new Uint8Array(original);
+        else
+            return;
+        nv.refreshDrawing(true);
+        resampleImage();
+        setOriginal(undefined);
+    };
+    useEffect(function () {
+        if (!expanded) {
+            cancelMask();
+        }
+        else {
+            if (colorIndex !== -1)
+                nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+            resampleImage();
+        }
+    }, [expanded]);
+    useEffect(function () {
+        if (colorIndex !== -1 && expanded)
+            nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+    }, [min, max, checked]);
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 450 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        }, direction: "column" }, { children: [_jsx(Stack, __assign({ alignItems: "center" }, { children: _jsx(Typography, __assign({ color: "white", gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Mask range:" })) })), _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, { children: [filledOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                            storeColorIndex(index);
+                            storeMaskColor(colors[index]);
+                            setMaskColor(colors[index]);
+                            nv.fillRange(min, max, index + 1, checked, original, setOriginal);
+                            resampleImage();
+                        } }, { children: value }), index)); }), _jsx(CmrCheckbox, __assign({ style: { color: "white" }, onChange: function (e) {
+                            e.stopPropagation();
+                            setChecked(e.target.checked);
+                            resampleImage();
+                        } }, { children: "Inverted" }))] })), _jsx(Stack, __assign({ direction: "row", sx: { mb: 1 } }, { children: _jsx(Box, __assign({ width: 400, style: { paddingLeft: "10px", paddingRight: "10px" } }, { children: _jsx(InvertibleDualSlider, { name: "", min: nv.volumes[0] ? nv.volumes[0].vox_min : 0, max: nv.volumes[0] ? nv.volumes[0].vox_max : 1, reverse: checked, setMin: setMin, setMax: setMax, onFinalize: function () {
+                            resampleImage();
+                        } }) })) })), _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, { children: [_jsx(IconButton, __assign({ onClick: function () {
+                            setOriginal(undefined);
+                            nv.drawAddUndoBitmapWithHiddenVoxels();
+                            unfocus();
+                        } }, { children: _jsx(CheckIcon, { style: { color: "green" } }) })), _jsx(IconButton, __assign({ onClick: function () {
+                            cancelMask();
+                            unfocus();
+                        } }, { children: _jsx(CloseIcon, { style: { color: "red" } }) }))] }))] })));
+};
+export default MaskPlatte;

package/dist/CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+export interface NiivueContrastAdjustmentsProps {
+    /** The Niivue instance. */
+    nv: any;
+    /**
+     * Current window minimum in real space (mirrors `volumes[0].cal_min`).
+     * Controlled by the parent — updated via `setMin`.
+     */
+    min: number;
+    /**
+     * Current window maximum in real space (mirrors `volumes[0].cal_max`).
+     * Controlled by the parent — updated via `setMax`.
+     */
+    max: number;
+    /** Called with the new real-space minimum when the user moves the low thumb. */
+    setMin: (min: number) => void;
+    /** Called with the new real-space maximum when the user moves the high thumb. */
+    setMax: (max: number) => void;
+    /**
+     * Scaling factors used to convert between real space and the display (render)
+     * space shown in the dual-range input boxes.
+     *
+     * Transform: `renderValue = a * realValue - a * b`
+     * Inverse:   `realValue  = renderValue / a + b`
+     *
+     * Pass `{ a: 1, b: 0 }` for a 1-to-1 mapping (no scientific-notation scaling).
+     */
+    transformFactors: {
+        a: number;
+        b: number;
+    };
+    /** Current gamma value. Controlled by the parent — updated via `setGamma`. */
+    gamma: number;
+    /**
+     * React key forwarded to the gamma slider to force a remount when gamma is
+     * externally reset (e.g. from the Toolbar reset button).
+     */
+    gammaKey: number;
+    /** Called with the new gamma value when the user moves the gamma slider. */
+    setGamma: (val: number) => void;
+    /**
+     * Optional list of layer controls rendered below the gamma slider (e.g.
+     * per-layer color-map pickers). Pass an empty array or omit to render nothing.
+     */
+    layerList?: React.ReactNode[];
+    /**
+     * Heading displayed above the card.
+     * @default "Contrast Adjustments"
+     */
+    title?: string;
+    /**
+     * Accent color used on the dual-range slider and the gamma slider.
+     * @default "#580f8b"
+     */
+    accentColor?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * **NiivueContrastAdjustments**
+ *
+ * A reusable "Contrast Adjustments" control panel for a Niivue viewer. Renders:
+ *
+ * 1. A dark **title strip** (`.title` class, same visual style as Slice Position).
+ * 2. An outlined **Card** + **CardContent** containing:
+ *    - A `TKDualRange` for window min/max with optional real→render-space transform.
+ *    - A gamma range slider.
+ *    - An optional `layerList` slot for per-layer controls.
+ *
+ * ### Wiring
+ *
+ * ```tsx
+ * <NiivueContrastAdjustments
+ *   nv={nv}
+ *   min={min}
+ *   max={max}
+ *   setMin={setMin}
+ *   setMax={setMax}
+ *   transformFactors={transformFactors}
+ *   gamma={gamma}
+ *   gammaKey={gammaKey}
+ *   setGamma={setGamma}
+ *   layerList={layerList}
+ * />
+ * ```
+ *
+ * Pass `title=""` to suppress the heading strip, or `title="Window / Level"` to
+ * rename it for a different application.
+ */
+export declare function NiivueContrastAdjustments({ nv, min, max, setMin, setMax, transformFactors, gamma, gammaKey, setGamma, layerList, title, accentColor, style, className, }: NiivueContrastAdjustmentsProps): import("react/jsx-runtime").JSX.Element;
+export default NiivueContrastAdjustments;

package/dist/CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments.js

@@ -0,0 +1,74 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, Box } from "@mui/material";
+import TKDualRange from "../tk-dualrange/TKDualRange";
+import CmrLabel from "../label/Label";
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * **NiivueContrastAdjustments**
+ *
+ * A reusable "Contrast Adjustments" control panel for a Niivue viewer. Renders:
+ *
+ * 1. A dark **title strip** (`.title` class, same visual style as Slice Position).
+ * 2. An outlined **Card** + **CardContent** containing:
+ *    - A `TKDualRange` for window min/max with optional real→render-space transform.
+ *    - A gamma range slider.
+ *    - An optional `layerList` slot for per-layer controls.
+ *
+ * ### Wiring
+ *
+ * ```tsx
+ * <NiivueContrastAdjustments
+ *   nv={nv}
+ *   min={min}
+ *   max={max}
+ *   setMin={setMin}
+ *   setMax={setMax}
+ *   transformFactors={transformFactors}
+ *   gamma={gamma}
+ *   gammaKey={gammaKey}
+ *   setGamma={setGamma}
+ *   layerList={layerList}
+ * />
+ * ```
+ *
+ * Pass `title=""` to suppress the heading strip, or `title="Window / Level"` to
+ * rename it for a different application.
+ */
+export function NiivueContrastAdjustments(_a) {
+    var _b, _c, _d, _e;
+    var nv = _a.nv, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, transformFactors = _a.transformFactors, gamma = _a.gamma, gammaKey = _a.gammaKey, setGamma = _a.setGamma, _f = _a.layerList, layerList = _f === void 0 ? [] : _f, _g = _a.title, title = _g === void 0 ? "Contrast Adjustments" : _g, _h = _a.accentColor, accentColor = _h === void 0 ? "#580f8b" : _h, style = _a.style, className = _a.className;
+    var a = transformFactors.a, b = transformFactors.b;
+    return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _jsx(Card, __assign({ variant: "outlined", sx: { mb: 2, borderTopLeftRadius: 0, borderTopRightRadius: 0 } }, { children: _jsx(CardContent, { children: _jsxs(Box, __assign({ style: { display: "flex", flex: 1, minWidth: "245px", flexDirection: "column" } }, { children: [_jsx(TKDualRange, { name: "Values:", minDomain: (_c = (_b = nv.volumes[0]) === null || _b === void 0 ? void 0 : _b.robust_min) !== null && _c !== void 0 ? _c : 0, maxDomain: (_e = (_d = nv.volumes[0]) === null || _d === void 0 ? void 0 : _d.robust_max) !== null && _e !== void 0 ? _e : 1, valueLow: min, valueHigh: max, onChangeLow: function (newMin) {
+                                    var v = nv.volumes[0];
+                                    if (!v)
+                                        return;
+                                    v.cal_min = newMin;
+                                    nv.refreshLayers(v, 0, nv.volumes.length);
+                                    nv.drawScene();
+                                    setMin(newMin);
+                                }, onChangeHigh: function (newMax) {
+                                    var v = nv.volumes[0];
+                                    if (!v)
+                                        return;
+                                    v.cal_max = newMax;
+                                    nv.refreshLayers(v, 0, nv.volumes.length);
+                                    nv.drawScene();
+                                    setMax(newMax);
+                                }, transform: function (x) { return a * x - a * b; }, inverse: function (y) { return y / a + b; }, step: 0.001, precision: 3, accentColor: accentColor }), _jsxs("div", __assign({ style: { marginTop: 20, marginBottom: 15 } }, { children: [_jsxs(CmrLabel, __assign({ style: { display: "block", marginBottom: 6 } }, { children: ["Gamma: ", gamma.toFixed(2)] })), _jsx("input", { id: "gamma", type: "range", min: 0.1, max: 3.0, step: 0.05, value: gamma, onChange: function (e) {
+                                            var val = Number(e.target.value);
+                                            setGamma(val);
+                                            nv.setGamma(val);
+                                        }, style: { width: "100%", accentColor: accentColor } }, gammaKey)] })), layerList.length > 0 && (_jsx(Box, __assign({ style: { height: "100%" } }, { children: layerList })))] })) }) }))] })));
+}
+export default NiivueContrastAdjustments;

package/dist/index.d.ts

@@ -23,6 +23,10 @@ export { InvertibleDualSlider } from "./CmrComponents/double-slider/InvertibleDu
 export type { LambdaFile } from "./CmrComponents/upload/Upload";
 export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
 export type { NiivueSlicePositionProps } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
+export { NiivueContrastAdjustments } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
+export type { NiivueContrastAdjustmentsProps } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
+export { DrawToolkit } from "./CmrComponents/draw-toolkit/DrawToolkit";
+export type { DrawToolkitProps } from "./CmrComponents/draw-toolkit/DrawToolkit";
 import type { FC } from "react";
 import type { CmrTableProps } from "./CmrTable/CmrTable";
 export declare const CmrTable: FC<CmrTableProps>;

package/dist/index.js

@@ -23,6 +23,8 @@ export { DualSlider } from "./CmrComponents/double-slider/DualSlider";
 export { Slider } from "./CmrComponents/gui-slider/Slider";
 export { InvertibleDualSlider } from "./CmrComponents/double-slider/InvertibleDualSlider";
 export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
+export { NiivueContrastAdjustments } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
+export { DrawToolkit } from "./CmrComponents/draw-toolkit/DrawToolkit";
 import CmrTableComponent from "./CmrTable/CmrTable";
 export var CmrTable = CmrTableComponent;
 export * from "./core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",