cloudmr-ux 4.8.9 → 5.0.0

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-viewer/Toolbar.js

@@ -46,8 +46,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 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 React, { Fragment, useState } from 'react';
+import { Box, Button, CircularProgress, Stack, Switch, TextField, 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';
@@ -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";
@@ -78,9 +77,65 @@ export default function Toolbar(props) {
         { value: "none", label: "Slice and None" }
     ];
     var displayModes = ["absolute", "real", "imaginary", "phase"];
-    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];
+    var _a = useState(''), zoomText = _a[0], setZoomText = _a[1];
+    var zoomEditingRef = React.useRef(false);
+    /** Compute the base pixels-per-mm at zoom=1.0, reading live canvas + volume state. */
+    var getBasePxPerMm = function () {
+        var _a;
+        var nv = props.nv;
+        var canvas = (_a = nv === null || nv === void 0 ? void 0 : nv.gl) === null || _a === void 0 ? void 0 : _a.canvas;
+        var back = nv === null || nv === void 0 ? void 0 : nv.back;
+        if (!canvas || !(back === null || back === void 0 ? void 0 : back.dims) || !(back === null || back === void 0 ? void 0 : back.pixDims))
+            return null;
+        var imgWmm = back.dims[1] * Math.abs(back.pixDims[1]);
+        var imgHmm = back.dims[2] * Math.abs(back.pixDims[2]);
+        if (imgWmm <= 0 || imgHmm <= 0)
+            return null;
+        var w = canvas.clientWidth || canvas.width;
+        var h = canvas.clientHeight || canvas.height;
+        return Math.min(w / imgWmm, h / imgHmm);
+    };
+    /** Returns the display value (number only, no unit suffix). */
+    var formatPxPerMm = function () {
+        var _a, _b, _c;
+        var zoom = (_c = (_b = (_a = props.nv) === null || _a === void 0 ? void 0 : _a.scene) === null || _b === void 0 ? void 0 : _b.pan2Dxyzmm) === null || _c === void 0 ? void 0 : _c[3];
+        if (zoom == null)
+            return '';
+        var base = getBasePxPerMm();
+        if (base != null && base > 0)
+            return (base * zoom).toFixed(2);
+        return (zoom * 100).toFixed(0);
+    };
+    React.useEffect(function () {
+        var rafId;
+        var sync = function () {
+            if (!zoomEditingRef.current)
+                setZoomText(formatPxPerMm());
+            rafId = requestAnimationFrame(sync);
+        };
+        rafId = requestAnimationFrame(sync);
+        return function () { return cancelAnimationFrame(rafId); };
+    }, [props.nv]);
+    var applyZoom = function (text) {
+        var num = parseFloat(text.trim());
+        if (isNaN(num) || num <= 0)
+            return;
+        var base = getBasePxPerMm();
+        var targetZoom = (base != null && base > 0) ? num / base : num / 100;
+        var scene = props.nv.scene;
+        var current = scene.pan2Dxyzmm[3];
+        var next = Math.max(0.01, targetZoom);
+        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();
+    };
+    var _b = useState(false), roiDeleteOpen = _b[0], setRoiDeleteOpen = _b[1];
+    var _c = useState(undefined), roiDeleteMsg = _c[0], setRoiDeleteMsg = _c[1];
+    var _d = useState(function () { return function () { }; }), roiDeleteConfirm = _d[0], setRoiDeleteConfirm = _d[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 = {
@@ -250,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);
@@ -270,7 +320,28 @@ export default function Toolbar(props) {
                                             border: '1px solid',
                                             borderColor: 'divider',
                                             borderRadius: 1
-                                        } }, { children: _jsx(ZoomOutIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Zoom In', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                        } }, { children: _jsx(ZoomOutIcon, {}) })) })), _jsx(TextField, { label: "px/mm", size: "small", value: zoomText, onChange: function (e) { return setZoomText(e.target.value); }, onFocus: function (e) {
+                                        zoomEditingRef.current = true;
+                                        requestAnimationFrame(function () { return e.target.select(); });
+                                    }, onBlur: function () {
+                                        zoomEditingRef.current = false;
+                                        applyZoom(zoomText);
+                                    }, onKeyDown: function (e) {
+                                        if (e.key === 'Enter') {
+                                            e.target.blur();
+                                        }
+                                        else if (e.key === 'Escape') {
+                                            zoomEditingRef.current = false;
+                                            setZoomText(formatPxPerMm());
+                                            e.target.blur();
+                                        }
+                                    }, sx: {
+                                        width: 100,
+                                        '& .MuiInputBase-input': {
+                                            textAlign: 'center',
+                                            fontSize: '0.8rem'
+                                        }
+                                    } }), _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;

package/package.json

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