cloudmr-ux 4.3.7 → 4.3.8

package/dist/CmrComponents/niivue-viewer/NumberPicker.d.ts

@@ -0,0 +1 @@
+export function NumberPicker(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-viewer/NumberPicker.js

@@ -0,0 +1,40 @@
+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 } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Input } from "@mui/material";
+import React from "react";
+export function NumberPicker(props) {
+    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    React.useEffect(function () {
+        setValue(props.value);
+    }, []);
+    function handleNumberInput(event) {
+        var v = event.target.value;
+        if (v < props.min) {
+            v = props.min;
+        }
+        if (v > props.max) {
+            v = props.max;
+        }
+        setValue(v);
+        props.onChange(v);
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: 'flex'
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                    marginRight: 'auto'
+                } }, { children: props.title })), _jsx(Input, { disableUnderline: true, type: 'number', style: { width: '50px', height: '20px' }, onInput: handleNumberInput, value: value, inputProps: {
+                    step: props.step
+                } })] })));
+}

package/dist/CmrComponents/niivue-viewer/SettingsPanel.d.ts

@@ -0,0 +1 @@
+export function SettingsPanel(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-viewer/SettingsPanel.js

@@ -0,0 +1,30 @@
+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 { Drawer } from "@mui/material";
+import { Box } from "@mui/material";
+import { IconButton } from "@mui/material";
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+export function SettingsPanel(props) {
+    return (_jsx(Drawer, __assign({ open: props.open, variant: "temporary", anchor: "right", sx: {
+            width: props.width
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                width: props.width,
+                role: 'presentation',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start'
+            } }, { children: [_jsx(Box, __assign({ sx: {
+                        display: 'flex',
+                        marginBottom: '10px'
+                    } }, { children: _jsx(IconButton, __assign({ onClick: props.toggleMenu, style: { marginRight: 'auto' } }, { children: _jsx(ArrowForwardIcon, {}) })) })), props.children] })) })));
+}

package/dist/CmrComponents/niivue-viewer/Switch.d.ts

@@ -0,0 +1 @@
+export default function NVSwitch(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-viewer/Switch.js

@@ -0,0 +1,27 @@
+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 } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Switch } from "@mui/material";
+import React from "react";
+export default function NVSwitch(props) {
+    function handleChange() {
+        props.onChange();
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: 'flex',
+            alignItems: 'center'
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ onClick: handleChange, style: {
+                    marginRight: 'auto'
+                } }, { children: props.title })), _jsx(Switch, { checked: props.checked, onChange: handleChange })] })));
+}

package/dist/CmrComponents/niivue-viewer/Toolbar.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ROI } from "../../core/features/rois/roiTypes";
+interface ToolbarProps {
+    nv: any;
+    nvUpdateSliceType: any;
+    sliceType: string;
+    toggleLayers: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    toggleSettings: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    volumes: {
+        url: string;
+        name: string;
+        alias: string;
+    }[];
+    selectedVolume: number;
+    setSelectedVolume: (index: number) => void;
+    showColorBar: boolean;
+    toggleColorBar: () => void;
+    rois: ROI[];
+    selectedROI: number;
+    setSelectedROI: (selected: number) => void;
+    refreshROI: () => void;
+    showCrosshair: boolean;
+    toggleShowCrosshair: () => void;
+    dragMode: string;
+    setDragMode: (dragMode: string) => void;
+    radiological: boolean;
+    toggleRadiological: () => void;
+    saveROI: (callback: () => void, preSaving: () => void) => void;
+    complexMode: string;
+    setComplexMode: (complexMode: string) => void;
+    complexOptions: string[];
+    labelsVisible: boolean;
+    toggleLabelsVisible: () => void;
+    saving: boolean;
+    setSaving: (saving: boolean) => void;
+    drawingChanged: boolean;
+    resampleImage?: () => void;
+    /** Bearer token for authenticated ROI delete */
+    accessToken: string | undefined;
+    /** Current pipeline id (for ROI refresh after delete/save) */
+    pipelineId: string | undefined;
+    /** Full URL for ROI DELETE API */
+    roiDeleteUrl: string;
+    /** Refetch ROI list after server mutation */
+    refreshPipelineRois: () => Promise<void>;
+}
+export default function Toolbar(props: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CmrComponents/niivue-viewer/Toolbar.js

@@ -0,0 +1,276 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Box, Button, CircularProgress, Stack, Switch, Tooltip, Typography } from "@mui/material";
+import { IconButton, FormControl, Select, MenuItem, InputLabel } from "@mui/material";
+import SettingsIcon from '@mui/icons-material/Settings';
+import HomeIcon from '@mui/icons-material/Home';
+import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
+import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import Brightness6Icon from '@mui/icons-material/Brightness6';
+import DeleteIcon from "@mui/icons-material/Delete";
+import CmrConfirmation from "../dialogue/Confirmation";
+import axios from "axios";
+export default function Toolbar(props) {
+    var _this = this;
+    var saving = props.saving, setSaving = props.setSaving;
+    function handleSliceTypeChange(e) {
+        var newSliceType = e.target.value;
+        var nvUpdateSliceType = props.nvUpdateSliceType;
+        nvUpdateSliceType(newSliceType);
+    }
+    // let dragModes = ["Pan","Measurement","Contrast",'None'];
+    var dragModes = [
+        { value: "pan", label: "Zoom and Pan" },
+        { value: "measurement", label: "Slice and Measurement" },
+        { value: "contrast", label: "Slice and Contrast" },
+        { value: "none", label: "Slice and None" }
+    ];
+    var _a = useState(false), roiDeleteOpen = _a[0], setRoiDeleteOpen = _a[1];
+    var _b = useState(undefined), roiDeleteMsg = _b[0], setRoiDeleteMsg = _b[1];
+    var _c = useState(function () { return function () { }; }), roiDeleteConfirm = _c[0], setRoiDeleteConfirm = _c[1];
+    // const deleteROI= createAsyncThunk('DeleteROI', async (arg: { accessToken: string, jobId: string }) => {
+    //     // const data = { jobId: arg.jobId }; // No need to stringify, axios will handle it
+    //     const config = {
+    //         headers: {
+    //             'Content-Type': 'application/json',
+    //             'Authorization': `Bearer ${arg.accessToken}`
+    //         },
+    //         params: {
+    //             id: arg.jobId // Send jobId as a query parameter
+    //         }
+    //     };
+    //     const response = await axios.delete(`${JOBS_DELETE_API}`, config);
+    //     console.log(response);
+    //     if (response.status == 200)
+    //         getUpstreamJobs(arg.accessToken);
+    // });
+    return (_jsx(Box, __assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: props.volumes[props.selectedVolume] != undefined && _jsxs(Fragment, { children: [_jsxs(Box, __assign({ sx: {
+                        display: 'flex',
+                        width: '100%',
+                        flexDirection: 'row',
+                        justifyItems: 'left',
+                        alignItems: 'center',
+                        backgroundColor: 'white',
+                        flexWrap: 'wrap'
+                    } }, { children: [_jsxs(FormControl, __assign({ size: 'small', sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Opened Volume" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.selectedVolume, label: "Opened Volume", onChange: function (e) { return props.setSelectedVolume(Number(e.target.value)); } }, { children: props.volumes.map(function (value, index) {
+                                        return _jsx(MenuItem, __assign({ value: index }, { children: value.alias }));
+                                    }) }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Orientation" })), _jsxs(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.sliceType, label: "Orientation", onChange: handleSliceTypeChange }, { children: [_jsx(MenuItem, __assign({ value: 'axial' }, { children: "Axial" })), _jsx(MenuItem, __assign({ value: 'coronal' }, { children: "Coronal" })), _jsx(MenuItem, __assign({ value: 'sagittal' }, { children: "Sagittal" })), _jsx(MenuItem, __assign({ value: 'multi' }, { children: "Multi" })), _jsx(MenuItem, __assign({ value: '3d' }, { children: "3D" }))] }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
+                                m: 2,
+                                minWidth: 180
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "drag-mode-label" }, { children: "Scroll and Right Click Drag" })), _jsx(Select, __assign({ labelId: "drag-mode-label", id: "drag-mode", value: props.dragMode, label: "Scroll and Right Click Drag", onChange: function (e) {
+                                        console.log(e.target.value);
+                                        props.setDragMode(e.target.value);
+                                    } }, { children: dragModes.map(function (mode, index) { return (_jsx(MenuItem, __assign({ value: mode.value }, { children: mode.label }), index)); }) }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Display Mode" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.complexMode, label: "Display Mode", onChange: function (e) { return props.setComplexMode(e.target.value); } }, { children: props.complexOptions.map(function (value) {
+                                        return _jsx(MenuItem, __assign({ value: value }, { children: value.charAt(0).toUpperCase() + value.slice(1) }));
+                                    }) }))] })), _jsxs(FormControl, __assign({ size: "small", sx: { m: 2, minWidth: 160 } }, { children: [_jsx(InputLabel, __assign({ id: "roi-layer-label" }, { children: "ROI Layer" })), _jsx(Select, __assign({ labelId: "roi-layer-label", id: "roi-layer", value: props.selectedROI, label: "Opened ROIs", 
+                                    // Only text in the closed preview (no icon)
+                                    renderValue: function (selected) {
+                                        var _a, _b, _c;
+                                        // handle no selection or invalid index
+                                        if (selected === undefined || selected === null || isNaN(Number(selected))) {
+                                            return '';
+                                        }
+                                        var idx = Number(selected);
+                                        return (_c = (_b = (_a = props.rois) === null || _a === void 0 ? void 0 : _a[idx]) === null || _b === void 0 ? void 0 : _b.filename) !== null && _c !== void 0 ? _c : '';
+                                    }, MenuProps: {
+                                        // optional: nicer menu width to fit long names + icon
+                                        PaperProps: { sx: { minWidth: 280 } }
+                                    } }, { children: props.rois.map(function (value, index) { return (_jsxs(MenuItem, __assign({ value: index, onClick: function () { return props.setSelectedROI(Number(index)); }, sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 1
+                                        } }, { children: [_jsx(Box, __assign({ sx: { flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' } }, { children: value.filename })), _jsx(IconButton, __assign({ size: "small", 
+                                                // prevent selecting/closing when clicking the icon
+                                                onMouseDown: function (e) { return e.stopPropagation(); }, onClick: function (e) {
+                                                    e.stopPropagation();
+                                                    setRoiDeleteMsg("You are about to delete \u201C".concat(value.filename, "\u201D"));
+                                                    setRoiDeleteConfirm(function () {
+                                                        return function () { return __awaiter(_this, void 0, void 0, function () {
+                                                            var error_1;
+                                                            var _a, _b, _c;
+                                                            return __generator(this, function (_d) {
+                                                                switch (_d.label) {
+                                                                    case 0:
+                                                                        _d.trys.push([0, 4, , 5]);
+                                                                        // Make delete call to the endpoint
+                                                                        return [4 /*yield*/, axios["delete"](props.roiDeleteUrl, {
+                                                                                headers: {
+                                                                                    Authorization: "Bearer ".concat(props.accessToken)
+                                                                                },
+                                                                                data: {
+                                                                                    roi_id: value.id
+                                                                                }
+                                                                            })];
+                                                                    case 1:
+                                                                        // Make delete call to the endpoint
+                                                                        _d.sent();
+                                                                        if (!props.pipelineId) return [3 /*break*/, 3];
+                                                                        return [4 /*yield*/, props.refreshPipelineRois()];
+                                                                    case 2:
+                                                                        _d.sent();
+                                                                        _d.label = 3;
+                                                                    case 3:
+                                                                        // Clear client drawing if we just deleted the applied ROI
+                                                                        if (props.selectedROI === index) {
+                                                                            props.nv.closeDrawing();
+                                                                            (_b = (_a = props.nv).drawScene) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                                        }
+                                                                        // Always refresh the histogram + ROI table after any deletion
+                                                                        (_c = props.resampleImage) === null || _c === void 0 ? void 0 : _c.call(props);
+                                                                        console.log("Deleted ROI: ".concat(value.filename));
+                                                                        return [3 /*break*/, 5];
+                                                                    case 4:
+                                                                        error_1 = _d.sent();
+                                                                        console.error("Failed to delete ROI:", error_1);
+                                                                        return [3 /*break*/, 5];
+                                                                    case 5: return [2 /*return*/];
+                                                                }
+                                                            });
+                                                        }); };
+                                                    });
+                                                    setRoiDeleteOpen(true);
+                                                } }, { children: _jsx(DeleteIcon, { fontSize: "small" }) }))] }), index)); }) }))] })), _jsx(CmrConfirmation, { name: "Delete ROI Layer", message: roiDeleteMsg, open: roiDeleteOpen, setOpen: setRoiDeleteOpen, cancellable: true, cancelText: "Cancel", confirmText: "Delete", color: "error", confirmCallback: function () {
+                                roiDeleteConfirm();
+                            } }), _jsx(Button, __assign({ variant: 'contained', disabled: !props.drawingChanged, endIcon: saving && _jsx(CircularProgress, { sx: { color: 'white' }, size: 20 }), onClick: function () {
+                                if (saving)
+                                    return;
+                                props.saveROI(function () { return __awaiter(_this, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                if (!props.pipelineId) return [3 /*break*/, 2];
+                                                return [4 /*yield*/, props.refreshPipelineRois()];
+                                            case 1:
+                                                _a.sent();
+                                                _a.label = 2;
+                                            case 2:
+                                                setSaving(false);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); }, function () {
+                                    setSaving(true);
+                                });
+                            } }, { children: "Save Drawing Layer" })), _jsx(IconButton, __assign({ onClick: props.toggleSettings, style: { marginLeft: 'auto' } }, { children: _jsx(SettingsIcon, {}) }))] })), _jsxs(Box, __assign({ sx: {
+                        display: 'flex',
+                        width: '100%',
+                        flexDirection: 'row',
+                        justifyItems: 'left',
+                        alignItems: 'center',
+                        backgroundColor: 'white',
+                        flexWrap: 'wrap'
+                    } }, { children: [_jsxs(Box, __assign({ sx: {
+                                display: 'flex',
+                                alignItems: 'center'
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: 'auto'
+                                    } }, { children: "Neurological" })), _jsx(Switch, { defaultChecked: false, checked: !props.radiological, onChange: props.toggleRadiological })] })), _jsxs(Box, __assign({ sx: {
+                                display: 'flex',
+                                alignItems: 'center'
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: 'auto'
+                                    } }, { children: "Show Crosshair" })), _jsx(Switch, { defaultChecked: true, checked: props.showCrosshair, onChange: props.toggleShowCrosshair })] })), _jsxs(Box, __assign({ sx: {
+                                display: 'flex',
+                                alignItems: 'center'
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: 'auto'
+                                    } }, { children: "Show Color Bar" })), _jsx(Switch, { checked: props.showColorBar, onChange: props.toggleColorBar })] })), _jsxs(Box, __assign({ sx: {
+                                display: 'flex',
+                                alignItems: 'center'
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: 'auto'
+                                    } }, { children: "Labels Visible" })), _jsx(Switch, { defaultChecked: false, checked: props.labelsVisible, onChange: props.toggleLabelsVisible })] })), _jsx(Box, { sx: { flex: 1 } }), _jsxs(Stack, __assign({ flexDirection: 'row', alignItems: 'center', sx: { m: 2, gap: 0.5 } }, { children: [_jsx(Tooltip, __assign({ title: 'Reset Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetScene(); } }, { children: _jsx(HomeIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Recenter Views', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.recenter(); } }, { children: _jsx(CenterFocusStrongIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Zooms', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetZoom(); } }, { children: _jsx(ZoomInMapIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Reset Contrast', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                            var _a, _b;
+                                            props.nv.resetContrast();
+                                            props.nv.setGamma(1.0); // engine reset
+                                            (_b = (_a = props.nv).onResetGamma) === null || _b === void 0 ? void 0 : _b.call(_a); // UI reset: bumps gammaKey + sets gamma=1.0
+                                        } }, { children: _jsx(Brightness6Icon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Zoom Out', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                            var scene = props.nv.scene;
+                                            var current = scene.pan2Dxyzmm[3];
+                                            var next = Math.max(0.1, current - 0.1);
+                                            var delta = current - next;
+                                            scene.pan2Dxyzmm[3] = next;
+                                            var mm = props.nv.frac2mm(scene.crosshairPos);
+                                            scene.pan2Dxyzmm[0] += delta * mm[0];
+                                            scene.pan2Dxyzmm[1] += delta * mm[1];
+                                            scene.pan2Dxyzmm[2] += delta * mm[2];
+                                            props.nv.drawScene();
+                                        }, size: "small", sx: {
+                                            border: '1px solid',
+                                            borderColor: 'divider',
+                                            borderRadius: 1
+                                        } }, { children: _jsx(ZoomOutIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Zoom In', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                            var scene = props.nv.scene;
+                                            var current = scene.pan2Dxyzmm[3];
+                                            var next = current + 0.1;
+                                            var delta = current - next;
+                                            scene.pan2Dxyzmm[3] = next;
+                                            var mm = props.nv.frac2mm(scene.crosshairPos);
+                                            scene.pan2Dxyzmm[0] += delta * mm[0];
+                                            scene.pan2Dxyzmm[1] += delta * mm[1];
+                                            scene.pan2Dxyzmm[2] += delta * mm[2];
+                                            props.nv.drawScene();
+                                        }, size: "small", sx: {
+                                            border: '1px solid',
+                                            borderColor: 'divider',
+                                            borderRadius: 1
+                                        } }, { children: _jsx(ZoomInIcon, {}) })) }))] }))] }))] }) })));
+}

package/dist/CmrComponents/niivue-viewer/Toolbar.scss

@@ -0,0 +1,40 @@
+.lil-gui {
+  --background-color: #ffffff;
+  --text-color: #3d3d3d;
+  --title-background-color: #333;
+  --title-text-color: #fff;
+  --widget-color: #f0f0f0;
+  --hover-color: #f0f0f0;
+  --focus-color: #fafafa;
+  --number-color: #000000;
+  --string-color: #8da300;
+  --width: '100%';
+}
+
+.lil-gui .controller > .name{
+  font-size:12pt;
+}
+.lil-gui .title {
+  font-size:14pt;
+  display: flex;
+  align-items: center;
+  padding-left: 5pt;
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+  font-weight: normal;
+  height: 28pt;
+}
+
+.title {
+  font-size:16px;
+  display: flex;
+  align-items: center;
+  padding-left: 10pt;
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+  font-weight: normal;
+  height: 30pt;
+  background: #333;
+  color: #fff;
+  // margin-bottom: 4px;
+}

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/DrawColorPlatte.d.ts

@@ -0,0 +1,2 @@
+export default DrawColorPlatte;
+declare function DrawColorPlatte(_a: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/DrawColorPlatte.js

@@ -0,0 +1,61 @@
+/**
+ * Shared ROI label color row (NiiVue pen indices 1–6). Used by pen, rectangle, and ellipse tools.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+var __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);
+};
+var DrawColorPlatte = function (_a) {
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled;
+    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: 1500,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            overflow: expanded ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        },
+        direction: "column"
+    }, {
+        children: [
+            _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 DrawColorPlatte;

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/EraserPlatte.d.ts

@@ -0,0 +1,2 @@
+export default EraserPlatte;
+declare function EraserPlatte(_a: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/EraserPlatte.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+var __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);
+};
+var EraserPlatte = function (_a) {
+    var expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled;
+    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: 1500,
+            border: "".concat(expandEraseOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandEraseOptions ? 300 : 0,
+            overflow: expandEraseOptions ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        },
+        direction: "column"
+    }, {
+        children: [
+            _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/niivue-viewer/mro-draw-toolkit/MaskPlatte.d.ts

@@ -0,0 +1,2 @@
+export default MaskPlatte;
+declare function MaskPlatte(_a: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;