cloudmr-ux 4.7.5 → 4.7.7

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

@@ -195,7 +195,7 @@ export function CloudMrNiivuePanel(props) {
                                     left: 0,
                                     width: "100%",
                                     height: "100%"
-                                } }), props.shapeDraft && (_jsx(ShapeDraftOverlay, { nv: props.nv, draft: props.shapeDraft, onDraftChange: props.onShapeDraftChange, overlayKey: props.mms })), props.penDraft && (_jsx(PenDraftOverlay, { nv: props.nv, draft: props.penDraft, onDraftChange: props.onPenDraftChange, overlayKey: props.mms }))] }))] })), _jsxs(Box, __assign({ sx: {
+                                } }), props.shapeDraft && (_jsx(ShapeDraftOverlay, { nv: props.nv, draft: props.shapeDraft, onDraftChange: props.onShapeDraftChange, onApplyDraft: props.onApplyShapeDraft, overlayKey: props.mms })), props.penDraft && (_jsx(PenDraftOverlay, { nv: props.nv, draft: props.penDraft, onDraftChange: props.onPenDraftChange, onApplyDraft: props.onApplyPenDraft, overlayKey: props.mms }))] }))] })), _jsxs(Box, __assign({ sx: {
                     width: {
                         xs: "100%",
                         md: "35%"

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

@@ -1051,6 +1051,67 @@ export default function CloudMrNiivueViewer(props) {
             nvSetDrawingEnabled(true);
         }
     }
+    function deleteShapeDraftHandler() {
+        var draft = shapeDraftRef.current;
+        if (!(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+            return;
+        // Clear tool-kind tags for voxels this shape occupied
+        if (nv._cloudMrToolKindBitmap) {
+            for (var i = 0; i < nv.drawBitmap.length; i++) {
+                if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.penValue) {
+                    nv._cloudMrToolKindBitmap[i] = 0;
+                }
+            }
+        }
+        nv.drawBitmap.set(draft.baseBitmap);
+        nv.refreshDrawing(true, false);
+        nv.drawScene();
+        nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+        setShapeDraft(null);
+        shapeDraftRef.current = null;
+        nv._cloudMrShapeDraftActive = false;
+        setDrawingChanged(true);
+        setDrawShapeTool(null);
+        nv.opts.deferShapeCommit = false;
+        nv.opts.penType = NI_PEN_TYPE.PEN;
+        nvSetDrawingEnabled(false);
+        resampleImage();
+    }
+    function deletePenDraftHandler() {
+        var _a;
+        var draft = penDraftRef.current;
+        if (!(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+            return;
+        // Clear tool-kind tags for voxels this ROI occupied
+        if (nv._cloudMrToolKindBitmap) {
+            for (var i = 0; i < nv.drawBitmap.length; i++) {
+                if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.penValue) {
+                    nv._cloudMrToolKindBitmap[i] = 0;
+                }
+            }
+        }
+        nv.drawBitmap.set(draft.baseBitmap);
+        nv.refreshDrawing(true, false);
+        nv.drawScene();
+        nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+        // Remove from polyline registry if this was a registered polyline
+        if (draft._registryId != null && nv._cloudMrPolylineRegistry) {
+            nv._cloudMrPolylineRegistry = nv._cloudMrPolylineRegistry.filter(function (e) { return e.id !== draft._registryId; });
+        }
+        if (draft.kind === "polyline") {
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            setPolylineVertexCount(0);
+        }
+        setPenDraft(null);
+        penDraftRef.current = null;
+        nv._cloudMrPenDraftActive = false;
+        setDrawingChanged(true);
+        setDrawShapeTool(null);
+        nv.opts.deferFreehandCommit = false;
+        nv.opts.polylinePenMode = false;
+        nvSetDrawingEnabled(false);
+        resampleImage();
+    }
     function ensureToolKindBitmap() {
         if (!nv.drawBitmap)
             return;
@@ -1692,6 +1753,8 @@ export default function CloudMrNiivueViewer(props) {
         onCancelPolyline: cancelPolylineDraft,
         onApplyPenDraft: applyPenDraftHandler,
         onCancelPenDraft: cancelPenDraftHandler,
+        onDeletePenDraft: deletePenDraftHandler,
+        onDeleteShapeDraft: deleteShapeDraftHandler,
         onFillPenDraft: fillPolylineDraftHandler,
         penDraftActive: penDraft != null,
         penDraftKind: penDraft === null || penDraft === void 0 ? void 0 : penDraft.kind,

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

@@ -1,10 +1,12 @@
 /**
  * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
+ * @param {{ nv: any, draft: import('./penDraftUtils').PenDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
-export function PenDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
+export function PenDraftOverlay({ nv, draft, onDraftChange, onApplyDraft, overlayKey }: {
     nv: any;
-    draft: any;
-    onDraftChange: any;
-    overlayKey: any;
+    draft: import('./penDraftUtils').PenDraft;
+    onDraftChange: (d: any) => void;
+    onApplyDraft?: (() => void) | undefined;
+    overlayKey?: unknown;
 }): import("react/jsx-runtime").JSX.Element | null;
 export default PenDraftOverlay;

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

@@ -29,14 +29,17 @@ function cloneFreehandDraft(draft) {
 }
 /**
  * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
+ * @param {{ nv: any, draft: import('./penDraftUtils').PenDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
 export function PenDraftOverlay(_a) {
-    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
+    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
     var onPointerMoveRef = useRef(null);
     var finishDragRef = useRef(null);
+    var onApplyDraftRef = useRef(onApplyDraft);
+    onApplyDraftRef.current = onApplyDraft;
     var _b = useState(0), setTick = _b[1];
     var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
     useEffect(function () {
@@ -109,6 +112,8 @@ export function PenDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var _a, _b;
+        var hadDrag = (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.didMove;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -116,11 +121,15 @@ export function PenDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        if (hadDrag) {
+            (_b = onApplyDraftRef.current) === null || _b === void 0 ? void 0 : _b.call(onApplyDraftRef);
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;
         if (!drag)
             return;
+        drag.didMove = true;
         event.preventDefault();
         var canvas = nv.canvas || document.getElementById("niiCanvas");
         if (!canvas)
@@ -154,6 +163,7 @@ export function PenDraftOverlay(_a) {
             mode: mode,
             cornerIndex: cornerIndex,
             kind: current.kind,
+            didMove: false,
             startClientX: event.clientX,
             startClientY: event.clientY,
             startDraft: current,

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

@@ -1,11 +1,12 @@
 /**
  * Overlay handles for adjusting a rectangle/ellipse draft before commit.
- * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, overlayKey?: unknown }} props
+ * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
-export function ShapeDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
+export function ShapeDraftOverlay({ nv, draft, onDraftChange, onApplyDraft, overlayKey }: {
     nv: any;
     draft: import('./shapeDraftUtils').ShapeDraft;
     onDraftChange: (d: any) => void;
+    onApplyDraft?: (() => void) | undefined;
     overlayKey?: unknown;
 }): import("react/jsx-runtime").JSX.Element | null;
 export default ShapeDraftOverlay;

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

@@ -25,16 +25,18 @@ var HANDLE_SIZE = 10;
 var ACCENT = "#580f8b";
 /**
  * Overlay handles for adjusting a rectangle/ellipse draft before commit.
- * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, overlayKey?: unknown }} props
+ * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
 export function ShapeDraftOverlay(_a) {
     var _b;
-    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
+    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
     var onPointerMoveRef = useRef(null);
     var finishDragRef = useRef(null);
+    var onApplyDraftRef = useRef(onApplyDraft);
+    onApplyDraftRef.current = onApplyDraft;
     var _c = useState(0), setTick = _c[1];
     var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
     useEffect(function () {
@@ -84,6 +86,8 @@ export function ShapeDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var _a, _b;
+        var hadDrag = (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.didMove;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -91,12 +95,16 @@ export function ShapeDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        if (hadDrag) {
+            (_b = onApplyDraftRef.current) === null || _b === void 0 ? void 0 : _b.call(onApplyDraftRef);
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;
         var currentDraft = draftRef.current;
         if (!drag || !currentDraft)
             return;
+        drag.didMove = true;
         event.preventDefault();
         if (drag.mode === "move") {
             var canvas = nv.canvas || document.getElementById("niiCanvas");
@@ -124,6 +132,7 @@ export function ShapeDraftOverlay(_a) {
         dragRef.current = {
             mode: mode,
             cornerIndex: cornerIndex,
+            didMove: false,
             startClientX: event.clientX,
             startClientY: event.clientY,
             startPtA: __spreadArray([], draft.ptA, true),

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, penDraftActive, penDraftKind, penDraftFilled, onApplyPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, penDraftKind, penDraftFilled, onApplyPenDraft, onDeletePenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onDeleteShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -10,9 +10,11 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     penDraftKind: any;
     penDraftFilled?: boolean | undefined;
     onApplyPenDraft: any;
+    onDeletePenDraft: any;
     onFillPenDraft: any;
     brushSize?: number | undefined;
     updateBrushSize: any;
     shapeDraftActive?: boolean | undefined;
     onApplyShapeDraft: any;
+    onDeleteShapeDraft: any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -16,6 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, IconButton, Button, Tooltip, Typography } from "@mui/material";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 import CheckIcon from "@mui/icons-material/Check";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { BrushSizeSlider } from "./BrushSizeSlider";
 var FILLED_COLORS = [
     { sx: { color: "red" } },
@@ -36,7 +37,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, _e = _a.penDraftActive, penDraftActive = _e === void 0 ? false : _e, penDraftKind = _a.penDraftKind, _f = _a.penDraftFilled, penDraftFilled = _f === void 0 ? false : _f, onApplyPenDraft = _a.onApplyPenDraft, onFillPenDraft = _a.onFillPenDraft, _g = _a.brushSize, brushSize = _g === void 0 ? 1 : _g, updateBrushSize = _a.updateBrushSize, _h = _a.shapeDraftActive, shapeDraftActive = _h === void 0 ? false : _h, onApplyShapeDraft = _a.onApplyShapeDraft;
+    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, _e = _a.penDraftActive, penDraftActive = _e === void 0 ? false : _e, penDraftKind = _a.penDraftKind, _f = _a.penDraftFilled, penDraftFilled = _f === void 0 ? false : _f, onApplyPenDraft = _a.onApplyPenDraft, onDeletePenDraft = _a.onDeletePenDraft, onFillPenDraft = _a.onFillPenDraft, _g = _a.brushSize, brushSize = _g === void 0 ? 1 : _g, updateBrushSize = _a.updateBrushSize, _h = _a.shapeDraftActive, shapeDraftActive = _h === void 0 ? false : _h, onApplyShapeDraft = _a.onApplyShapeDraft, onDeleteShapeDraft = _a.onDeleteShapeDraft;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -56,30 +57,38 @@ export default function DrawColorPlatte(_a) {
                     } }, { 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 vertex to draw connected line segments" }))), showPenModes &&
                 penDraftActive &&
                 (penDrawMode === "polyline" || penDraftKind === "freehand") &&
-                expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: penDraftFilled
-                            ? "Remove fill (keeps outline editable)"
-                            : "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": penDraftFilled ? "undo fill polyline" : "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
-                                color: penDraftFilled ? "#ffb74d" : "#c9a0e8",
-                                fontSize: ACTION_FONT_SIZE,
-                                textTransform: "none",
-                                minWidth: 0,
-                                py: 0.25,
-                                px: 0.75
-                            } }, { children: penDraftFilled ? "Undo Fill" : "Fill" })) }))), _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
-                                color: "#c9a0e8",
+                expanded && (_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: "Delete this ROI drawing" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "delete pen draft", onClick: function () { return onDeletePenDraft === null || onDeletePenDraft === void 0 ? void 0 : onDeletePenDraft(); }, startIcon: _jsx(DeleteOutlineIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                color: "#f44336",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
                                 minWidth: 0,
                                 py: 0.25,
                                 px: 0.75,
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Apply" })) }))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply shape", onClick: function () { return onApplyShapeDraft === null || onApplyShapeDraft === void 0 ? void 0 : onApplyShapeDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
-                            color: "#c9a0e8",
+                            } }, { children: "Delete" })) })), _jsxs(Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: penDraftFilled
+                                    ? "Remove fill (keeps outline editable)"
+                                    : "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": penDraftFilled ? "undo fill polyline" : "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
+                                        color: penDraftFilled ? "#ffb74d" : "#c9a0e8",
+                                        fontSize: ACTION_FONT_SIZE,
+                                        textTransform: "none",
+                                        minWidth: 0,
+                                        py: 0.25,
+                                        px: 0.75
+                                    } }, { children: penDraftFilled ? "Undo Fill" : "Fill" })) }))), penDrawMode === "polyline" && (_jsx(Tooltip, __assign({ title: "Apply polyline (Enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                        color: "#c9a0e8",
+                                        fontSize: ACTION_FONT_SIZE,
+                                        textTransform: "none",
+                                        minWidth: 0,
+                                        py: 0.25,
+                                        px: 0.75,
+                                        "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
+                                    } }, { children: "Apply" })) })))] }))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-start", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: _jsx(Tooltip, __assign({ title: "Delete this ROI drawing" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "delete shape draft", onClick: function () { return onDeleteShapeDraft === null || onDeleteShapeDraft === void 0 ? void 0 : onDeleteShapeDraft(); }, startIcon: _jsx(DeleteOutlineIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                            color: "#f44336",
                             fontSize: ACTION_FONT_SIZE,
                             textTransform: "none",
                             minWidth: 0,
                             py: 0.25,
                             px: 0.75,
                             "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                        } }, { children: "Apply" })) })) })))] })));
+                        } }, { children: "Delete" })) })) })))] })));
 }

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

@@ -189,7 +189,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, penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, onFillPenDraft: props.onFillPenDraft, 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 })] })), _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 })] })), _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: __assign(__assign({}, toolBtnSx), (eraserActive
+                                } }, { 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, penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, onDeletePenDraft: props.onDeletePenDraft, onFillPenDraft: props.onFillPenDraft, 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, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _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, onDeleteShapeDraft: props.onDeleteShapeDraft })] })), _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: __assign(__assign({}, toolBtnSx), (eraserActive
                                                         ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
                                                         : {})) }, { children: filled || !eraserActive ? (_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 () {
                                                 var _a;

package/package.json

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