cloudmr-ux 4.4.5 → 4.4.6

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

@@ -1,2 +1,8 @@
-export default DrawColorPlatte;
-declare function DrawColorPlatte(_a: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
+    expanded: any;
+    updateDrawPen: any;
+    setDrawingEnabled: any;
+    shapeDraftActive?: boolean | undefined;
+    onApplyShapeDraft: any;
+    onCancelShapeDraft: any;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +1,34 @@
+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";
 /**
  * Shared ROI label color row (NiiVue pen indices 1–6). Used by pen, rectangle, and ellipse tools.
+ * Rectangle/ellipse palettes may also show Apply/Cancel while a shape draft is being adjusted.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, IconButton } from "@mui/material";
+import { Stack, IconButton, Tooltip, Typography } 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: {
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+var FILLED_COLORS = [
+    { sx: { color: "red" } },
+    { sx: { color: "green" } },
+    { sx: { color: "blue" } },
+    { sx: { color: "yellow" } },
+    { sx: { color: "cyan" } },
+    { sx: { color: "#e81ce8" } },
+];
+export default function DrawColorPlatte(_a) {
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.shapeDraftActive, shapeDraftActive = _b === void 0 ? false : _b, onApplyShapeDraft = _a.onApplyShapeDraft, onCancelShapeDraft = _a.onCancelShapeDraft;
+    return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
             left: 0,
@@ -41,21 +40,8 @@ var DrawColorPlatte = function (_a) {
             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;
+        }, direction: "column", spacing: 0.5, sx: { py: shapeDraftActive && expanded ? 0.5 : 0 } }, { children: [_jsx(Stack, __assign({ direction: "row" }, { children: FILLED_COLORS.map(function (color, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index + 1 } });
+                        setDrawingEnabled(true);
+                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), shapeDraftActive && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, pb: 0.5, borderTop: "1px solid #555" } }, { children: [_jsx(Tooltip, __assign({ title: "Apply shape (Enter)" }, { children: _jsx(IconButton, __assign({ "aria-label": "apply shape", size: "small", onClick: function () { return onApplyShapeDraft === null || onApplyShapeDraft === void 0 ? void 0 : onApplyShapeDraft(); }, sx: { color: "#c9a0e8" } }, { children: _jsx(CheckIcon, { fontSize: "small" }) })) })), _jsx(Tooltip, __assign({ title: "Cancel shape (Esc)" }, { children: _jsx(IconButton, __assign({ "aria-label": "cancel shape", size: "small", onClick: function () { return onCancelShapeDraft === null || onCancelShapeDraft === void 0 ? void 0 : onCancelShapeDraft(); }, sx: { color: "#ccc" } }, { children: _jsx(CloseIcon, { fontSize: "small" }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.68rem", color: "#bbb", userSelect: "none" } }, { children: "Apply or cancel" }))] })))] })));
+}

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MROptimum fork of cloudmr-ux DrawToolkit.
  * Click-away exits drawing mode when you focus elsewhere (slice controls, histogram, etc.),
@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Layout matches {@link NiivueSlicePosition}: outer wrapper → `.title` → `Card` + `CardContent` (no custom fill).
  */
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Box, Card, CardContent, IconButton, Slider, Stack, Tooltip, Typography, } from "@mui/material";
 import DrawIcon from "@mui/icons-material/Draw";
 import CropSquareOutlinedIcon from "@mui/icons-material/CropSquareOutlined";
@@ -31,8 +31,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import OpacityIcon from "@mui/icons-material/Opacity";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import DrawColorPlatte from "./DrawColorPlatte";
 import EraserPlatte from "./EraserPlatte";
@@ -72,6 +70,14 @@ export function MroDrawToolkit(props) {
     var _c = useState(false), expandOpacityOptions = _c[0], setExpandOpacityOptions = _c[1];
     var _d = useState(undefined), setMaskColor = _d[1];
     var filled = props.drawPen > 7;
+    useEffect(function () {
+        if (!props.shapeDraftActive)
+            return;
+        if (drawShapeTool === "rectangle")
+            setExpandedOption("r");
+        else if (drawShapeTool === "ellipse")
+            setExpandedOption("l");
+    }, [props.shapeDraftActive, drawShapeTool]);
     var shapeSelectedSx = function (shape) {
         return drawShapeTool === shape
             ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
@@ -164,7 +170,7 @@ export function MroDrawToolkit(props) {
                                     alignItems: "center",
                                     gap: 4,
                                     overflow: "visible"
-                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "r" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Rectangle" }, { children: _jsx(IconButton, __assign({ "aria-label": "rectangle", size: "small", onClick: clickRectangle, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("rectangle")) }, { children: _jsx(CropSquareOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "r", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), props.shapeDraftActive && (_jsxs(_Fragment, { children: [_jsx(Tooltip, __assign({ title: "Apply shape (Enter)" }, { children: _jsx(IconButton, __assign({ "aria-label": "apply shape", size: "small", onClick: function () { var _a; return (_a = props.onApplyShapeDraft) === null || _a === void 0 ? void 0 : _a.call(props); }, sx: __assign(__assign({}, toolBtnSx), { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }) }, { children: _jsx(CheckIcon, { sx: { color: "inherit" } }) })) })), _jsx(Tooltip, __assign({ title: "Cancel shape (Esc)" }, { children: _jsx(IconButton, __assign({ "aria-label": "cancel shape", size: "small", onClick: function () { var _a; return (_a = props.onCancelShapeDraft) === null || _a === void 0 ? void 0 : _a.call(props); }, sx: toolBtnSx }, { children: _jsx(CloseIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.72rem", color: "#580f8b", userSelect: "none", ml: 0.5 } }, { children: "Adjust shape, then Apply" }))] })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
+                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "r" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Rectangle" }, { children: _jsx(IconButton, __assign({ "aria-label": "rectangle", size: "small", onClick: clickRectangle, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("rectangle")) }, { children: _jsx(CropSquareOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "r", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "rectangle", onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "ellipse", onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
                                                 props.nv.clearDrawing();
                                                 props.resampleImage();
                                                 props.setDrawingChanged(false);

package/package.json

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