cloudmr-ux 4.4.9 → 4.5.0

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

@@ -1,8 +1,8 @@
 import React from "react";
 import "./Toolbar.css";
 import type { DrawToolkitProps } from "../draw-toolkit/DrawToolkit";
-/** Props for {@link DrawToolkit} minus brush controls when using {@link MroDrawToolkit}. */
-export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "brushSize" | "updateBrushSize"> & {
+/** Props for {@link MroDrawToolkit} — extends draw toolkit with MRO pen/shape controls. */
+export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "rois" | "selectedROI" | "setSelectedROI" | "saveROI" | "labelsVisible" | "toggleLabelsVisible"> & {
     penDrawMode?: "freehand" | "polyline";
     onPenDrawModeChange?: (mode: "freehand" | "polyline") => void;
     polylineVertexCount?: number;

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

@@ -108,6 +108,7 @@ export var nv = new Niivue({
     penType: NI_PEN_TYPE.PEN
 });
 nv.opts.penBounds = 0;
+nv.opts.penSize = 1;
 window.nv = nv;
 // The NiiVue component wraps all other components in the UI. 
 // It is exported so that it can be used in other projects easily
@@ -171,15 +172,17 @@ export default function CloudMrNiivueViewer(props) {
     var _23 = useState(null), shapeDraft = _23[0], setShapeDraft = _23[1];
     var _24 = useState("freehand"), penDrawMode = _24[0], setPenDrawMode = _24[1];
     var _25 = useState(0), polylineVertexCount = _25[0], setPolylineVertexCount = _25[1];
+    var _26 = useState(1), brushSize = _26[0], setBrushSize = _26[1];
     var shapeDraftRef = React.useRef(null);
     var drawShapeToolRef = React.useRef(null);
     drawShapeToolRef.current = drawShapeTool;
     shapeDraftRef.current = shapeDraft;
     React.useEffect(function () {
         nv.opts.penBounds = 0;
+        nv.opts.penSize = 1;
     }, []);
-    var _26 = React.useState(1.0), gamma = _26[0], setGamma = _26[1];
-    var _27 = React.useState(0), gammaKey = _27[0], setGammaKey = _27[1];
+    var _27 = React.useState(1.0), gamma = _27[0], setGamma = _27[1];
+    var _28 = React.useState(0), gammaKey = _28[0], setGammaKey = _28[1];
     // Niivue → React bridge so other places (Toolbar) can force the UI to reset
     nv.onResetGamma = function () {
         setGamma(1.0);
@@ -224,13 +227,13 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _28 = useState(0), rangeKey = _28[0], setRangeKey = _28[1];
+    var _29 = useState(0), rangeKey = _29[0], setRangeKey = _29[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _29 = useState([0, 0, 0]), boundMins = _29[0], setBoundMins = _29[1];
-    var _30 = useState([1, 1, 1]), boundMaxs = _30[0], setBoundMaxs = _30[1];
-    var _31 = useState([0.5, 0.5, 0.5]), mms = _31[0], setMMs = _31[1];
+    var _30 = useState([0, 0, 0]), boundMins = _30[0], setBoundMins = _30[1];
+    var _31 = useState([1, 1, 1]), boundMaxs = _31[0], setBoundMaxs = _31[1];
+    var _32 = useState([0.5, 0.5, 0.5]), mms = _32[0], setMMs = _32[1];
     nv.onImageLoaded = function () {
         var _a, _b;
         var oldCrosshairPos = __spreadArray([], nv.scene.crosshairPos, true);
@@ -513,7 +516,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _32 = useState("pan"), dragMode = _32[0], setDragMode = _32[1];
+    var _33 = useState("pan"), dragMode = _33[0], setDragMode = _33[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -550,11 +553,15 @@ export default function CloudMrNiivueViewer(props) {
         nv.setDrawingEnabled(enabled);
         nv.drawScene();
     }
+    function nvUpdateBrushSize(size) {
+        setBrushSize(size);
+        nv.opts.penBounds = (size - 1) / 2;
+        nv.opts.penSize = size;
+    }
     function nvUpdateDrawPen(a) {
         var raw = Number(a.target.value);
         setDrawPen(raw);
         var penValue = raw;
-        nv.opts.penBounds = 0;
         nv.setPenValue(penValue & 7, penValue > 0);
         if (penValue == 8) {
             nv.setPenValue(0, true);
@@ -722,7 +729,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _33 = useState({}), labelMapping = _33[0], setLabelMapping = _33[1];
+    var _34 = useState({}), labelMapping = _34[0], setLabelMapping = _34[1];
     function resampleImage(mapping) {
         if (mapping === void 0) { mapping = labelMapping; }
         var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
@@ -832,7 +839,7 @@ export default function CloudMrNiivueViewer(props) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _34 = React.useState('axial'), sliceType = _34[0], setSliceType = _34[1];
+    var _35 = React.useState('axial'), sliceType = _35[0], setSliceType = _35[1];
     function nvUpdateSliceType(newSliceType) {
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
@@ -972,14 +979,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _35 = useState(''), selectedROI = _35[0], setSelectedDrawingLayer = _35[1];
-    var _36 = useState(false), saveDialogOpen = _36[0], setSaveDialogOpen = _36[1];
-    var _37 = useState(function () {
-    }), saveConfirmCallback = _37[0], setSaveConfirmCallback = _37[1];
-    var _38 = useState(false), confirmationOpen = _38[0], setConfirmationOpen = _38[1];
-    var _39 = useState(function () { }), warningConfirmationCallback = _39[0], setWarningConfirmationCallback = _39[1];
-    var _40 = useState(function () { }), warningCancelCallback = _40[0], setWarningCancelCallback = _40[1];
-    var _41 = useState(false), drawingChanged = _41[0], setDrawingChanged = _41[1];
+    var _36 = useState(''), selectedROI = _36[0], setSelectedDrawingLayer = _36[1];
+    var _37 = useState(false), saveDialogOpen = _37[0], setSaveDialogOpen = _37[1];
+    var _38 = useState(function () {
+    }), saveConfirmCallback = _38[0], setSaveConfirmCallback = _38[1];
+    var _39 = useState(false), confirmationOpen = _39[0], setConfirmationOpen = _39[1];
+    var _40 = useState(function () { }), warningConfirmationCallback = _40[0], setWarningConfirmationCallback = _40[1];
+    var _41 = useState(function () { }), warningCancelCallback = _41[0], setWarningCancelCallback = _41[1];
+    var _42 = useState(false), drawingChanged = _42[0], setDrawingChanged = _42[1];
     // When new drawing strokes are made on top of a saved ROI, reset the dropdown
     // so it shows the "ROI Layer" placeholder instead of the stale saved name.
     React.useEffect(function () {
@@ -1327,7 +1334,9 @@ export default function CloudMrNiivueViewer(props) {
         polylineVertexCount: polylineVertexCount,
         onCancelPolyline: cancelPolylineDraft,
         onFinishPolyline: finishPolylineOpen,
-        onCloseFillPolyline: finishPolylineClosed
+        onCloseFillPolyline: finishPolylineClosed,
+        brushSize: brushSize,
+        updateBrushSize: nvUpdateBrushSize
     };
     return (_jsxs(Box, __assign({ sx: {
             display: 'flex',

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

@@ -0,0 +1,5 @@
+export function BrushSizeSlider({ label, brushSize, updateBrushSize }: {
+    label: any;
+    brushSize: any;
+    updateBrushSize: any;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Stack, Slider, Typography } from "@mui/material";
+var SLIDER_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"
+    }
+};
+export function BrushSizeSlider(_a) {
+    var label = _a.label, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    return (_jsxs(Stack, __assign({ sx: { mb: 0.5, px: 0.5 }, alignItems: "center", width: "100%" }, { children: [_jsxs(Typography, __assign({ color: "white", noWrap: true, width: "100%", marginLeft: "6pt", fontSize: "11pt", sx: { userSelect: "none" } }, { children: [label, ": ", brushSize] })), _jsx(Slider, { value: brushSize, sx: SLIDER_SX, step: 2, min: 1, max: 15, marks: true, onChange: function (_event, value) { return updateBrushSize(value); } })] })));
+}

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

@@ -1,4 +1,4 @@
-export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, onCancelPolyline, onFinishPolyline, onCloseFillPolyline, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, onCancelPolyline, onFinishPolyline, onCloseFillPolyline, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -9,6 +9,8 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     onCancelPolyline: any;
     onFinishPolyline: any;
     onCloseFillPolyline: any;
+    brushSize?: number | undefined;
+    updateBrushSize: any;
     shapeDraftActive?: boolean | undefined;
     onApplyShapeDraft: any;
     onCancelShapeDraft: any;

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

@@ -18,6 +18,7 @@ import { Stack, IconButton, Button, Tooltip, Typography } 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 { BrushSizeSlider } from "./BrushSizeSlider";
 var FILLED_COLORS = [
     { sx: { color: "red" } },
     { sx: { color: "green" } },
@@ -37,7 +38,7 @@ var modeBtnSx = function (active) { return ({
     px: 0.75
 }); };
 export default function DrawColorPlatte(_a) {
-    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.showPenModes, showPenModes = _b === void 0 ? false : _b, _c = _a.penDrawMode, penDrawMode = _c === void 0 ? "freehand" : _c, onPenDrawModeChange = _a.onPenDrawModeChange, _d = _a.polylineVertexCount, polylineVertexCount = _d === void 0 ? 0 : _d, onCancelPolyline = _a.onCancelPolyline, onFinishPolyline = _a.onFinishPolyline, onCloseFillPolyline = _a.onCloseFillPolyline, _e = _a.shapeDraftActive, shapeDraftActive = _e === void 0 ? false : _e, onApplyShapeDraft = _a.onApplyShapeDraft, onCancelShapeDraft = _a.onCancelShapeDraft;
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.showPenModes, showPenModes = _b === void 0 ? false : _b, _c = _a.penDrawMode, penDrawMode = _c === void 0 ? "freehand" : _c, onPenDrawModeChange = _a.onPenDrawModeChange, _d = _a.polylineVertexCount, polylineVertexCount = _d === void 0 ? 0 : _d, onCancelPolyline = _a.onCancelPolyline, onFinishPolyline = _a.onFinishPolyline, onCloseFillPolyline = _a.onCloseFillPolyline, _e = _a.brushSize, brushSize = _e === void 0 ? 1 : _e, updateBrushSize = _a.updateBrushSize, _f = _a.shapeDraftActive, shapeDraftActive = _f === void 0 ? false : _f, onApplyShapeDraft = _a.onApplyShapeDraft, onCancelShapeDraft = _a.onCancelShapeDraft;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -51,7 +52,7 @@ export default function DrawColorPlatte(_a) {
             borderTopLeftRadius: "6pt",
             borderTopRightRadius: "6pt",
             background: "#333"
-        }, direction: "column", spacing: 0.5, sx: { py: expanded ? 0.5 : 0 } }, { children: [showPenModes && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.75, pt: 0.25 } }, { children: [_jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("freehand"); }, sx: modeBtnSx(penDrawMode === "freehand") }, { children: "Freehand" })), _jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("polyline"); }, sx: modeBtnSx(penDrawMode === "polyline") }, { children: "Straight lines" }))] }))), _jsx(Stack, __assign({ direction: "row" }, { children: FILLED_COLORS.map(function (color, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+        }, direction: "column", spacing: 0.5, sx: { py: expanded ? 0.5 : 0 } }, { children: [showPenModes && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.75, pt: 0.25 } }, { children: [_jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("freehand"); }, sx: modeBtnSx(penDrawMode === "freehand") }, { children: "Freehand" })), _jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("polyline"); }, sx: modeBtnSx(penDrawMode === "polyline") }, { children: "Straight lines" }))] }))), showPenModes && expanded && updateBrushSize && (_jsx(BrushSizeSlider, { label: "Line thickness", brushSize: brushSize, updateBrushSize: updateBrushSize })), _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)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each corner to draw connected straight lines" }))), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount >= 2 && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [_jsx(Tooltip, __assign({ title: "Discard current outline" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel polyline", onClick: function () { return onCancelPolyline === null || onCancelPolyline === void 0 ? void 0 : onCancelPolyline(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {

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

@@ -1,2 +1,7 @@
-export default EraserPlatte;
-declare function EraserPlatte(_a: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default function EraserPlatte({ expandEraseOptions, updateDrawPen, setDrawingEnabled, brushSize, updateBrushSize, }: {
+    expandEraseOptions: any;
+    updateDrawPen: any;
+    setDrawingEnabled: any;
+    brushSize?: number | undefined;
+    updateBrushSize: any;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,26 @@
+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 } 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;
+import { BrushSizeSlider } from "./BrushSizeSlider";
+export default function EraserPlatte(_a) {
+    var expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.brushSize, brushSize = _b === void 0 ? 1 : _b, updateBrushSize = _a.updateBrushSize;
     var eraseOptions = [
         _jsx(FiberManualRecordIcon, { style: { color: "white" } }, "e0"),
         _jsx(FiberManualRecordOutlinedIcon, { style: { color: "white" } }, "e1"),
     ];
-    return _jsxs(Stack, __assign({
-        style: {
+    return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
             left: 0,
@@ -36,21 +33,8 @@ var EraserPlatte = function (_a) {
             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;
+        }, direction: "column" }, { children: [updateBrushSize && (_jsx(BrushSizeSlider, { label: "Eraser size", brushSize: brushSize, updateBrushSize: updateBrushSize })), _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)); }) }))] })));
+}

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

@@ -170,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, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, onFinishPolyline: props.onFinishPolyline, onCloseFillPolyline: props.onCloseFillPolyline })] })), _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 () {
+                                } }, { 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, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, onFinishPolyline: props.onFinishPolyline, onCloseFillPolyline: props.onCloseFillPolyline, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _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, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _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.9",
+  "version": "4.5.0",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",