cloudmr-ux 4.9.0 → 5.0.1

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

@@ -10,7 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, Box } from "@mui/material";
+import { Box, Button, Card, CardContent } from "@mui/material";
+import Brightness6Icon from "@mui/icons-material/Brightness6";
 import TKDualRange from "../tk-dualrange/TKDualRange";
 import CmrLabel from "../label/Label";
 import { resolveNiivueAccentColor, useNiivueViewerTheme, } from "../niivue-viewer/NiivueViewerThemeContext";
@@ -52,6 +53,43 @@ export function NiivueContrastAdjustments(_a) {
     var theme = useNiivueViewerTheme();
     var accentColor = resolveNiivueAccentColor(accentColorProp, theme);
     var a = transformFactors.a, b = transformFactors.b;
+    var handleResetContrast = function () {
+        var _a, _b;
+        nv.resetContrast();
+        nv.setGamma(1.0);
+        (_a = nv.onResetGamma) === null || _a === void 0 ? void 0 : _a.call(nv);
+        var vol = (_b = nv.volumes) === null || _b === void 0 ? void 0 : _b[0];
+        if (vol) {
+            setMin(vol.cal_min);
+            setMax(vol.cal_max);
+        }
+    };
+    var resetContrastButtonSx = {
+        color: "rgba(0, 0, 0, 0.87)",
+        textTransform: "none",
+        fontSize: "0.78rem",
+        py: 0,
+        minWidth: 0,
+        background: "none",
+        "& .MuiButton-startIcon": {
+            color: "inherit"
+        },
+        "&:hover": {
+            color: accentColor,
+            background: "none"
+        },
+        "&:active": {
+            color: accentColor,
+            opacity: 0.8,
+            background: "none"
+        },
+        "&:focus": {
+            background: "none"
+        },
+        "&.MuiButtonBase-root:hover": {
+            backgroundColor: "transparent"
+        }
+    };
     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, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { 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)
@@ -72,6 +110,6 @@ export function NiivueContrastAdjustments(_a) {
                                             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 })))] })) })) }))] })));
+                                        }, style: { width: "100%", accentColor: accentColor } }, gammaKey)] })), _jsx(Box, __assign({ sx: { display: "flex", justifyContent: "flex-end", mt: 0.5, mb: 1 } }, { children: _jsx(Button, __assign({ size: "small", disableRipple: true, startIcon: _jsx(Brightness6Icon, { fontSize: "small" }), onClick: handleResetContrast, sx: resetContrastButtonSx }, { children: "Reset Contrast" })) })), layerList.length > 0 && (_jsx(Box, __assign({ style: { height: "100%" } }, { children: layerList })))] })) })) }))] })));
 }
 export default NiivueContrastAdjustments;

package/dist/CmrComponents/niivue-slice-position/NiivueSlicePosition.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Card, CardContent } from "@mui/material";
 import CmrLabel from "../label/Label";
 import { resolveNiivueAccentColor, useNiivueViewerTheme, } from "../niivue-viewer/NiivueViewerThemeContext";
@@ -18,6 +18,50 @@ import { resolveNiivueAccentColor, useNiivueViewerTheme, } from "../niivue-viewe
 var safeSpan = function (min, max) { return Math.max(1e-9, max - min); };
 var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
 var round3 = function (v) { return Math.round(v * 1000) / 1000; };
+// ─── Deferred number input ────────────────────────────────────────────────────
+/**
+ * A text input that holds a local string draft while the user is typing,
+ * committing only on blur or Enter. This prevents mid-entry snapping when the
+ * parent immediately re-renders with the snapped Niivue position.
+ * Arrow Up / Arrow Down step by one voxel via `onStep`.
+ */
+function SliceInput(_a) {
+    var value = _a.value, inputStyle = _a.inputStyle, onCommit = _a.onCommit, onStep = _a.onStep;
+    var committed = value.toFixed(3);
+    var _b = useState(committed), draft = _b[0], setDraft = _b[1];
+    var _c = useState(false), focused = _c[0], setFocused = _c[1];
+    // Keep draft in sync with parent while the field is not being edited.
+    useEffect(function () {
+        if (!focused)
+            setDraft(committed);
+    }, [committed, focused]);
+    var commit = function (raw) {
+        var n = Number(raw);
+        if (Number.isFinite(n)) {
+            onCommit(n);
+        }
+        else {
+            // Revert to last known good value.
+            setDraft(committed);
+        }
+    };
+    return (_jsx("input", { type: "text", inputMode: "decimal", value: draft, style: inputStyle, onChange: function (e) { return setDraft(e.target.value); }, onFocus: function () { return setFocused(true); }, onBlur: function (e) {
+            setFocused(false);
+            commit(e.target.value);
+        }, onKeyDown: function (e) {
+            if (e.key === "Enter") {
+                e.target.blur();
+            }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                onStep(1);
+            }
+            else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                onStep(-1);
+            }
+        } }));
+}
 // ─── Component ────────────────────────────────────────────────────────────────
 /**
  * **NiivueSlicePosition**
@@ -235,24 +279,6 @@ export function NiivueSlicePosition(_a) {
         accentColor: accentColor
     };
     // ── Render ────────────────────────────────────────────────────────────────
-    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, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { children: _jsxs("div", __assign({ style: { display: "flex", flexDirection: "column" } }, { children: [_jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "X:" }), _jsx("input", { type: "number", value: xVal.toFixed(3), min: sliderMinX, max: sliderMaxX, step: stepX, style: inputStyle, onChange: function (e) {
-                                                    var next = Number(e.target.value);
-                                                    if (Number.isFinite(next))
-                                                        applyX(next);
-                                                }, onBlur: function (e) {
-                                                    applyX(clamp(Number(e.target.value), sliderMinX, sliderMaxX));
-                                                } })] })), _jsx("input", { id: "xSlice", type: "range", min: sliderMinX, max: sliderMaxX, step: stepX, value: clamp(xVal, sliderMinX, sliderMaxX), style: sliderStyle, onChange: function (e) { return applyX(Number(e.target.value)); } })] })), _jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Y:" }), _jsx("input", { type: "number", value: yVal.toFixed(3), min: sliderMinY, max: sliderMaxY, step: stepY, style: inputStyle, onChange: function (e) {
-                                                    var next = Number(e.target.value);
-                                                    if (Number.isFinite(next))
-                                                        applyY(next);
-                                                }, onBlur: function (e) {
-                                                    applyY(clamp(Number(e.target.value), sliderMinY, sliderMaxY));
-                                                } })] })), _jsx("input", { id: "ySlice", type: "range", min: sliderMinY, max: sliderMaxY, step: stepY, value: clamp(yVal, sliderMinY, sliderMaxY), style: sliderStyle, onChange: function (e) { return applyY(Number(e.target.value)); } })] })), _jsxs("div", { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Z:" }), _jsx("input", { type: "number", value: zVal.toFixed(3), min: sliderMinZ, max: sliderMaxZ, step: stepZ, style: inputStyle, onChange: function (e) {
-                                                    var next = Number(e.target.value);
-                                                    if (Number.isFinite(next))
-                                                        applyZ(next);
-                                                }, onBlur: function (e) {
-                                                    applyZ(clamp(Number(e.target.value), sliderMinZ, sliderMaxZ));
-                                                } })] })), _jsx("input", { id: "zSlice", type: "range", min: 0, max: Math.max(0, nz - 1), step: 1, value: zSliceIndex, style: sliderStyle, onChange: function (e) { return applyZBySliceIndex(Number(e.target.value)); } })] })] })) })) }))] })));
+    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, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { children: _jsxs("div", __assign({ style: { display: "flex", flexDirection: "column" } }, { children: [_jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "X:" }), _jsx(SliceInput, { value: xVal, inputStyle: inputStyle, onCommit: function (mm) { return applyX(clamp(mm, sliderMinX, sliderMaxX)); }, onStep: function (dir) { return applyX(clamp(xVal + dir * stepX, sliderMinX, sliderMaxX)); } })] })), _jsx("input", { id: "xSlice", type: "range", min: sliderMinX, max: sliderMaxX, step: stepX, value: clamp(xVal, sliderMinX, sliderMaxX), style: sliderStyle, onChange: function (e) { return applyX(Number(e.target.value)); } })] })), _jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Y:" }), _jsx(SliceInput, { value: yVal, inputStyle: inputStyle, onCommit: function (mm) { return applyY(clamp(mm, sliderMinY, sliderMaxY)); }, onStep: function (dir) { return applyY(clamp(yVal + dir * stepY, sliderMinY, sliderMaxY)); } })] })), _jsx("input", { id: "ySlice", type: "range", min: sliderMinY, max: sliderMaxY, step: stepY, value: clamp(yVal, sliderMinY, sliderMaxY), style: sliderStyle, onChange: function (e) { return applyY(Number(e.target.value)); } })] })), _jsxs("div", { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Z:" }), _jsx(SliceInput, { value: zVal, inputStyle: inputStyle, onCommit: function (mm) { return applyZ(mm); }, onStep: function (dir) { return applyZBySliceIndex(zSliceIndex + dir); } })] })), _jsx("input", { id: "zSlice", type: "range", min: 0, max: Math.max(0, nz - 1), step: 1, value: zSliceIndex, style: sliderStyle, onChange: function (e) { return applyZBySliceIndex(Number(e.target.value)); } })] })] })) })) }))] })));
 }
 export default NiivueSlicePosition;

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

@@ -55,7 +55,6 @@ 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";
@@ -306,12 +305,7 @@ export default function Toolbar(props) {
                                 alignItems: 'center'
                             }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
                                         marginRight: 'auto'
-                                    } }, { children: "Labels Visible" })), _jsx(Switch, { defaultChecked: false, checked: props.labelsVisible, onChange: props.toggleLabelsVisible, sx: viewerTheme.muiSwitchSx })] })), _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 () {
+                                    } }, { children: "Labels Visible" })), _jsx(Switch, { defaultChecked: false, checked: props.labelsVisible, onChange: props.toggleLabelsVisible, sx: viewerTheme.muiSwitchSx })] })), _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: '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);

package/dist/CmrComponents/tk-dualrange/TKDualRange.js

@@ -82,6 +82,13 @@ export default function TKDualRange(_a) {
     var span = Math.max(1e-12, tMax - tMin);
     var pct = function (t) { return ((t - tMin) / span) * 100; };
     var s = step !== null && step !== void 0 ? step : Math.max(span * 0.001, Number.EPSILON);
+    // Whether either value is currently outside the domain (from manual text input).
+    var isOutOfBounds = valueLow < minDomain || valueLow > maxDomain ||
+        valueHigh < minDomain || valueHigh > maxDomain;
+    // Clamped render-space values used only for the fill bar and slider thumbs,
+    // so they don't go offscreen when the real value is outside the domain.
+    var tLowDisplay = clamp(tLow, tMin, tMax);
+    var tHighDisplay = clamp(tHigh, tMin, tMax);
     // Keep ends from crossing; clamp in REAL space against the other end.
     var handleLowRender = function (nextRender) {
         var nextReal = clamp(inverse(nextRender), minDomain, valueHigh);
@@ -91,18 +98,22 @@ export default function TKDualRange(_a) {
         var nextReal = clamp(inverse(nextRender), valueLow, maxDomain);
         onChangeHigh(nextReal);
     };
-    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueLow, precision), lo: minDomain, hi: valueHigh, onCommit: function (raw) {
+    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueLow, precision), lo: minDomain, hi: maxDomain, onCommit: function (raw) {
                                     var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
-                                    onChangeLow(clamp(n, minDomain, valueHigh));
-                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueHigh, precision), lo: valueLow, hi: maxDomain, onCommit: function (raw) {
+                                    onChangeLow(n);
+                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueHigh, precision), lo: minDomain, hi: maxDomain, onCommit: function (raw) {
                                     var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
-                                    onChangeHigh(clamp(n, valueLow, maxDomain));
-                                } })] }))] })), _jsxs("div", __assign({ className: "tkdr__track", style: (_b = {}, _b["--tkdr-accent"] = accentColor, _b) }, { children: [_jsx("div", { className: "tkdr__range-fill", style: {
-                            left: "".concat(pct(Math.min(tLow, tHigh)), "%"),
-                            width: "".concat(Math.abs(pct(tHigh) - pct(tLow)), "%")
-                        }, "aria-hidden": true }), _jsx("input", { className: "tkdr__range", type: "range", min: tMin, max: tMax, step: s, value: tLow, onChange: function (e) { return handleLowRender(Number(e.target.value)); } }), _jsx("input", { className: "tkdr__range tkdr__range--top", type: "range", min: tMin, max: tMax, step: s, value: tHigh, onChange: function (e) { return handleHighRender(Number(e.target.value)); } })] }))] })));
+                                    onChangeHigh(n);
+                                } })] }))] })), _jsxs("div", __assign({ className: "tkdr__track", style: __assign((_b = {}, _b["--tkdr-accent"] = accentColor, _b), (isOutOfBounds && {
+                    opacity: 0.35,
+                    filter: "grayscale(1)",
+                    transition: "opacity 0.15s, filter 0.15s"
+                })) }, { children: [_jsx("div", { className: "tkdr__range-fill", style: {
+                            left: "".concat(pct(Math.min(tLowDisplay, tHighDisplay)), "%"),
+                            width: "".concat(Math.abs(pct(tHighDisplay) - pct(tLowDisplay)), "%")
+                        }, "aria-hidden": true }), _jsx("input", { className: "tkdr__range", type: "range", min: tMin, max: tMax, step: s, value: tLowDisplay, onChange: function (e) { return handleLowRender(Number(e.target.value)); } }), _jsx("input", { className: "tkdr__range tkdr__range--top", type: "range", min: tMin, max: tMax, step: s, value: tHighDisplay, onChange: function (e) { return handleHighRender(Number(e.target.value)); } })] }))] })));
 }

package/package.json

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