cloudmr-ux 4.5.6 → 4.5.9

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

@@ -565,13 +565,85 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.penSize = size;
     }
     function nvUpdateDrawPen(a) {
+        var _a;
         var raw = Number(a.target.value);
         setDrawPen(raw);
-        var penValue = raw;
-        nv.setPenValue(penValue & 7, penValue > 0);
-        if (penValue == 8) {
+        var isEraser = raw === 0 || raw === 8;
+        if (raw === 8) {
             nv.setPenValue(0, true);
         }
+        else {
+            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;
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            if (penDraftRef.current) {
+                cancelPenDraft(nv, penDraftRef.current);
+                setPenDraft(null);
+                penDraftRef.current = null;
+                nv._cloudMrPenDraftActive = false;
+                setPolylineVertexCount(0);
+            }
+            if (shapeDraftRef.current) {
+                cancelShapeDraft();
+            }
+        }
+        else if (drawShapeToolRef.current === "pen") {
+            nv.opts.deferFreehandCommit = penDrawModeRef.current === "freehand";
+            nv.opts.polylinePenMode = penDrawModeRef.current === "polyline";
+            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);
@@ -1446,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,14 +134,15 @@ export function MroDrawToolkit(props) {
         }
     }
     function clickEraser() {
+        var _a, _b;
         if (expandedOption === "e") {
             setExpandedOption("n");
+            (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
+            return;
         }
-        else {
-            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") {
@@ -155,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,
@@ -172,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/CmrComponents/niivue-viewer/penDraftUtils.d.ts

@@ -10,6 +10,7 @@
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
  * @property {boolean} [filled]
  */
+export function isEraserActive(nv: any): any;
 export function isFreehandPenActive(nv: any): any;
 export function shouldDeferFreehandCommit(nv: any): any;
 export function redrawPolylineDraft(nv: any, draft: any): void;

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

@@ -32,11 +32,17 @@ import { NI_PEN_TYPE } from "./niivuePenType";
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
  * @property {boolean} [filled]
  */
+export function isEraserActive(nv) {
+    return (nv.opts.drawingEnabled &&
+        nv.opts.penType === NI_PEN_TYPE.PEN &&
+        nv.opts.penValue === 0);
+}
 export function isFreehandPenActive(nv) {
     return (nv.opts.isFilledPen &&
         nv.opts.drawingEnabled &&
         nv.opts.penType === NI_PEN_TYPE.PEN &&
-        !nv.opts.polylinePenMode);
+        !nv.opts.polylinePenMode &&
+        nv.opts.penValue > 0);
 }
 export function shouldDeferFreehandCommit(nv) {
     return !!nv.opts.deferFreehandCommit && isFreehandPenActive(nv);

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

@@ -12,7 +12,8 @@ var CLICK_DRAG_PX = 5;
 export function isPolylinePenActive(nv) {
     return (nv.opts.polylinePenMode &&
         nv.opts.drawingEnabled &&
-        nv.opts.penType === NI_PEN_TYPE.PEN);
+        nv.opts.penType === NI_PEN_TYPE.PEN &&
+        nv.opts.penValue > 0);
 }
 export function isClickWithoutDrag(uiData, thresholdPx) {
     if (thresholdPx === void 0) { thresholdPx = CLICK_DRAG_PX; }

package/package.json

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