cloudmr-ux 4.5.8 → 4.6.0

package/dist/CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram.js

@@ -117,7 +117,7 @@ export function resampleNiivueRoiHistogram(options) {
             x: roi.sample,
             type: "histogram",
             name: roi.alias,
-            opacity: roi.visibility ? 0.5 : 0.1,
+            opacity: roi.visibility ? 0.5 : 0,
             marker: {
                 color: roi.color
             },

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

@@ -11,6 +11,8 @@ export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "rois" | "selectedR
     onCancelPenDraft?: () => void;
     onFillPenDraft?: () => void;
     penDraftActive?: boolean;
+    onActivateEraser?: () => void;
+    onDeactivateDrawTools?: () => void;
     shapeDraftActive?: boolean;
     onApplyShapeDraft?: () => void;
     onCancelShapeDraft?: () => void;

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

@@ -153,13 +153,8 @@ export function CloudMrNiivuePanel(props) {
                     justifyContent: "flex-start",
                     mb: { xs: 2, md: 0 }
                 } }, { children: [_jsx(MroDrawToolkit, __assign({}, props.drawToolkitProps, { drawShapeTool: props.drawShapeTool, onDrawShapeToolChange: applyDrawShapeTool, onExitDrawMode: function () {
-                            if (props.shapeDraft) {
-                                props.onCancelShapeDraft();
-                            }
-                            if (props.penDraft) {
-                                props.onCancelPenDraft();
-                            }
-                            props.setDrawShapeTool(null);
+                            var _a, _b;
+                            (_b = (_a = props.drawToolkitProps).onDeactivateDrawTools) === null || _b === void 0 ? void 0 : _b.call(_a);
                         }, shapeDraftActive: props.shapeDraft != null, penDraftActive: props.penDraft != null, onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft, style: {
                             marginBottom: 0,
                             width: "100%",

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

@@ -576,6 +576,7 @@ export default function CloudMrNiivueViewer(props) {
             nv.setPenValue(raw & 7, raw > 0);
         }
         if (isEraser) {
+            nv.opts.penType = NI_PEN_TYPE.PEN;
             nv.opts.deferFreehandCommit = false;
             nv.opts.deferShapeCommit = false;
             nv.opts.polylinePenMode = false;
@@ -597,6 +598,53 @@ export default function CloudMrNiivueViewer(props) {
             nv.opts.isFilledPen = penDrawModeRef.current === "freehand";
         }
     }
+    function deactivateDrawTools() {
+        var _a, _b;
+        if (shapeDraftRef.current) {
+            cancelShapeDraft();
+        }
+        if (penDraftRef.current) {
+            cancelPenDraft(nv, penDraftRef.current);
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            setPolylineVertexCount(0);
+            setPenDraft(null);
+            penDraftRef.current = null;
+            nv._cloudMrPenDraftActive = false;
+        }
+        setDrawShapeTool(null);
+        nv.opts.penType = NI_PEN_TYPE.PEN;
+        nv.opts.deferShapeCommit = false;
+        nv.opts.deferFreehandCommit = false;
+        nv.opts.polylinePenMode = false;
+        (_b = nv.cloudMrResetPolyline) === null || _b === void 0 ? void 0 : _b.call(nv);
+        nvSetDrawingEnabled(false);
+        if (drawPen === 0 || drawPen === 8) {
+            setDrawPen(1);
+            nv.setPenValue(1, false);
+            nv.opts.isFilledPen = false;
+        }
+    }
+    function activateEraser() {
+        var _a;
+        setDrawShapeTool(null);
+        nv.opts.penType = NI_PEN_TYPE.PEN;
+        nv.opts.deferShapeCommit = false;
+        nv.opts.deferFreehandCommit = false;
+        nv.opts.polylinePenMode = false;
+        if (shapeDraftRef.current) {
+            cancelShapeDraft();
+        }
+        if (penDraftRef.current) {
+            cancelPenDraft(nv, penDraftRef.current);
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            setPolylineVertexCount(0);
+            setPenDraft(null);
+            penDraftRef.current = null;
+            nv._cloudMrPenDraftActive = false;
+        }
+        nvUpdateDrawPen({ target: { value: 8 } });
+        nvSetDrawingEnabled(true);
+    }
     function nvUpdateDrawOpacity(a) {
         setDrawOpacity(a);
         nv.setDrawOpacity(a);
@@ -1470,7 +1518,9 @@ export default function CloudMrNiivueViewer(props) {
         onFillPenDraft: fillPolylineDraftHandler,
         penDraftActive: penDraft != null,
         brushSize: brushSize,
-        updateBrushSize: nvUpdateBrushSize
+        updateBrushSize: nvUpdateBrushSize,
+        onActivateEraser: activateEraser,
+        onDeactivateDrawTools: deactivateDrawTools
     };
     return (_jsxs(Box, __assign({ sx: {
             display: 'flex',

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

@@ -85,7 +85,17 @@ export function MroDrawToolkit(props) {
             ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
             : {};
     };
+    var eraserActive = expandedOption === "e";
+    function leaveEraserIfActive() {
+        var _a;
+        if (!eraserActive && props.drawPen !== 0 && props.drawPen !== 8) {
+            return;
+        }
+        (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
+        setExpandedOption("n");
+    }
     function clickPen() {
+        leaveEraserIfActive();
         onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("pen");
         if (expandedOption === "d") {
             setExpandedOption("n");
@@ -98,6 +108,7 @@ export function MroDrawToolkit(props) {
         }
     }
     function clickRectangle() {
+        leaveEraserIfActive();
         onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("rectangle");
         if (expandedOption === "r") {
             setExpandedOption("n");
@@ -110,6 +121,7 @@ export function MroDrawToolkit(props) {
         }
     }
     function clickEllipse() {
+        leaveEraserIfActive();
         onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("ellipse");
         if (expandedOption === "l") {
             setExpandedOption("n");
@@ -122,16 +134,15 @@ export function MroDrawToolkit(props) {
         }
     }
     function clickEraser() {
-        var _a;
+        var _a, _b;
         if (expandedOption === "e") {
             setExpandedOption("n");
+            (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
+            return;
         }
-        else {
-            (_a = props.onExitDrawMode) === null || _a === void 0 ? void 0 : _a.call(props);
-            props.updateDrawPen({ target: { value: 8 } });
-            setExpandedOption("e");
-        }
-        props.setDrawingEnabled(expandedOption !== "e");
+        leaveEraserIfActive();
+        (_b = props.onActivateEraser) === null || _b === void 0 ? void 0 : _b.call(props);
+        setExpandedOption("e");
     }
     function clickMask() {
         if (expandedOption === "m") {
@@ -157,8 +168,7 @@ export function MroDrawToolkit(props) {
                 return;
             setExpandedOption("n");
             setExpandOpacityOptions(false);
-            props.setDrawingEnabled(false);
-            (_a = props.onExitDrawMode) === null || _a === void 0 ? void 0 : _a.call(props);
+            (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
         } }, { children: _jsxs("div", __assign({ style: __assign({ width: "100%", position: "relative", zIndex: 1080 }, props.style) }, { children: [_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: "ROI Tools" })), _jsx(Card, __assign({ variant: "outlined", sx: {
                         mb: 2,
                         borderTopLeftRadius: 0,
@@ -174,7 +184,9 @@ 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, onApplyPenDraft: props.onApplyPenDraft, onCancelPenDraft: props.onCancelPenDraft, 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, 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 () {
+                                } }, { 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, onApplyPenDraft: props.onApplyPenDraft, onCancelPenDraft: props.onCancelPenDraft, 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, 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: __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 () {
                                                 props.nv.clearDrawing();
                                                 props.resampleImage();
                                                 props.setDrawingChanged(false);

package/dist/core/common/components/NiivueTools/Niivue.js

@@ -833,7 +833,7 @@ export default function NiiVueport(props) {
                 x: roi.sample,
                 type: "histogram",
                 name: roi.alias,
-                opacity: roi.visibility ? 0.5 : 0.1,
+                opacity: roi.visibility ? 0.5 : 0,
                 marker: {
                     color: roi.color
                 },

package/package.json

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