cloudmr-ux 4.4.8 → 4.5.0

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

@@ -1,8 +1,18 @@
 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;
+    onCancelPolyline?: () => void;
+    onFinishPolyline?: () => void;
+    onCloseFillPolyline?: () => void;
+    shapeDraftActive?: boolean;
+    onApplyShapeDraft?: () => void;
+    onCancelShapeDraft?: () => void;
+};
 export interface CloudMrNiivuePanelProps {
     nv: any;
     pipelineID: string;

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

@@ -106,9 +106,13 @@ export function CloudMrNiivuePanel(props) {
         props.resampleImage();
     }, [histogram]);
     function applyDrawShapeTool(tool) {
+        var _a, _b;
         if (props.shapeDraft) {
             props.onCancelShapeDraft();
         }
+        if (tool !== "pen") {
+            (_b = (_a = props.drawToolkitProps).onPenDrawModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, "freehand");
+        }
         props.setDrawShapeTool(tool);
         var nv = props.nv;
         nv.opts.deferShapeCommit = tool === "rectangle" || tool === "ellipse";

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
@@ -169,15 +170,19 @@ export default function CloudMrNiivueViewer(props) {
     var _21 = useState(false), saving = _21[0], setSaving = _21[1];
     var _22 = useState(null), drawShapeTool = _22[0], setDrawShapeTool = _22[1];
     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 _24 = React.useState(1.0), gamma = _24[0], setGamma = _24[1];
-    var _25 = React.useState(0), gammaKey = _25[0], setGammaKey = _25[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);
@@ -222,13 +227,13 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _26 = useState(0), rangeKey = _26[0], setRangeKey = _26[1];
+    var _29 = useState(0), rangeKey = _29[0], setRangeKey = _29[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _27 = useState([0, 0, 0]), boundMins = _27[0], setBoundMins = _27[1];
-    var _28 = useState([1, 1, 1]), boundMaxs = _28[0], setBoundMaxs = _28[1];
-    var _29 = useState([0.5, 0.5, 0.5]), mms = _29[0], setMMs = _29[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);
@@ -511,7 +516,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _30 = useState("pan"), dragMode = _30[0], setDragMode = _30[1];
+    var _33 = useState("pan"), dragMode = _33[0], setDragMode = _33[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -548,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);
@@ -720,7 +729,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _31 = useState({}), labelMapping = _31[0], setLabelMapping = _31[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;
@@ -733,6 +742,34 @@ export default function CloudMrNiivueViewer(props) {
             setROIs(next);
         }
     }
+    function syncPenDrawMode(mode) {
+        var _a;
+        setPenDrawMode(mode);
+        nv.opts.polylinePenMode = mode === "polyline";
+        nv.opts.isFilledPen = mode === "freehand";
+        if (mode === "freehand") {
+            (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+        }
+    }
+    function cancelPolylineDraft() {
+        var _a;
+        (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+    }
+    function finishPolylineOpen() {
+        if (nv.cloudMrFinishPolyline(false)) {
+            setDrawingChanged(true);
+            resampleImage();
+        }
+    }
+    function finishPolylineClosed() {
+        if (nv.cloudMrFinishPolyline(true)) {
+            setDrawingChanged(true);
+            resampleImage();
+        }
+    }
+    nv.onPolylineChange = function (count) {
+        setPolylineVertexCount(count);
+    };
     function cancelShapeDraft() {
         var draft = shapeDraftRef.current;
         if (!draft)
@@ -771,26 +808,38 @@ export default function CloudMrNiivueViewer(props) {
         nvSetDrawingEnabled(false);
     };
     React.useEffect(function () {
-        if (!shapeDraft)
+        if (!shapeDraft && !(penDrawMode === "polyline" && polylineVertexCount >= 2)) {
             return undefined;
+        }
         var onKeyDown = function (event) {
-            if (event.key === "Enter") {
+            if (event.key === "Escape") {
                 event.preventDefault();
-                applyShapeDraft();
+                if (shapeDraft) {
+                    cancelShapeDraft();
+                }
+                else if (polylineVertexCount >= 2) {
+                    cancelPolylineDraft();
+                }
+                return;
             }
-            else if (event.key === "Escape") {
+            if (event.key === "Enter") {
                 event.preventDefault();
-                cancelShapeDraft();
+                if (shapeDraft) {
+                    applyShapeDraft();
+                }
+                else if (penDrawMode === "polyline" && polylineVertexCount >= 2) {
+                    finishPolylineOpen();
+                }
             }
         };
         window.addEventListener("keydown", onKeyDown);
         return function () { return window.removeEventListener("keydown", onKeyDown); };
-    }, [shapeDraft]);
+    }, [shapeDraft, penDrawMode, polylineVertexCount]);
     function nvUpdateSelectionBoxColor(rgb01) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _32 = React.useState('axial'), sliceType = _32[0], setSliceType = _32[1];
+    var _35 = React.useState('axial'), sliceType = _35[0], setSliceType = _35[1];
     function nvUpdateSliceType(newSliceType) {
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
@@ -930,14 +979,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _33 = useState(''), selectedROI = _33[0], setSelectedDrawingLayer = _33[1];
-    var _34 = useState(false), saveDialogOpen = _34[0], setSaveDialogOpen = _34[1];
-    var _35 = useState(function () {
-    }), saveConfirmCallback = _35[0], setSaveConfirmCallback = _35[1];
-    var _36 = useState(false), confirmationOpen = _36[0], setConfirmationOpen = _36[1];
-    var _37 = useState(function () { }), warningConfirmationCallback = _37[0], setWarningConfirmationCallback = _37[1];
-    var _38 = useState(function () { }), warningCancelCallback = _38[0], setWarningCancelCallback = _38[1];
-    var _39 = useState(false), drawingChanged = _39[0], setDrawingChanged = _39[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 () {
@@ -1264,6 +1313,10 @@ export default function CloudMrNiivueViewer(props) {
                 cancelShapeDraft();
                 return;
             }
+            if (polylineVertexCount > 0) {
+                cancelPolylineDraft();
+                return;
+            }
             nv.drawUndo();
             resampleImage();
             if (nv.drawBitmap && nv.drawBitmap.every(function (v) { return v === 0; })) {
@@ -1275,7 +1328,15 @@ export default function CloudMrNiivueViewer(props) {
         toggleROIVisible: toggleROIVisible,
         drawingOpacity: drawingOpacity,
         setDrawingOpacity: nvUpdateDrawingOpacity,
-        setDrawingChanged: setDrawingChanged
+        setDrawingChanged: setDrawingChanged,
+        penDrawMode: penDrawMode,
+        onPenDrawModeChange: syncPenDrawMode,
+        polylineVertexCount: polylineVertexCount,
+        onCancelPolyline: cancelPolylineDraft,
+        onFinishPolyline: finishPolylineOpen,
+        onCloseFillPolyline: finishPolylineClosed,
+        brushSize: brushSize,
+        updateBrushSize: nvUpdateBrushSize
     };
     return (_jsxs(Box, __assign({ sx: {
             display: 'flex',

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

@@ -7,6 +7,15 @@ import {
   isDraftTooSmall,
   shouldDeferShapeCommit,
 } from "./shapeDraftUtils.js";
+import {
+  addPolylineVertex,
+  cancelPolyline,
+  finishPolyline,
+  isClickWithoutDrag,
+  isPolylinePenActive,
+  previewPolylineSegment,
+  resetPolylineState,
+} from "./polylinePenUtils.js";
 
 /*
  * bitmapOverlay — in-browser state only: remembers each voxel's label *before* Group
@@ -1414,14 +1423,63 @@ Niivue.prototype.drawAddUndoBitmap = function cloudMrDrawAddUndoBitmap(...args)
   return _drawAddUndoBitmap.apply(this, args);
 };
 
+Niivue.prototype.cloudMrCancelPolyline = function cloudMrCancelPolyline() {
+  cancelPolyline(this);
+};
+
+Niivue.prototype.cloudMrFinishPolyline = function cloudMrFinishPolyline(fillClosed = false) {
+  return finishPolyline(this, { fillClosed });
+};
+
+Niivue.prototype.cloudMrResetPolyline = function cloudMrResetPolyline() {
+  resetPolylineState(this);
+};
+
+const _mouseClick = Niivue.prototype.mouseClick;
+Niivue.prototype.mouseClick = function cloudMrMouseClick(...args) {
+  if (isPolylinePenActive(this)) {
+    if (this._cloudMrPolylineVertices?.length > 0) {
+      previewPolylineSegment(this);
+    }
+    return false;
+  }
+  return _mouseClick.apply(this, args);
+};
+
+const _mouseMoveListener = Niivue.prototype.mouseMoveListener;
+Niivue.prototype.mouseMoveListener = function cloudMrMouseMoveListener(event) {
+  const result = _mouseMoveListener.call(this, event);
+  if (isPolylinePenActive(this) && this._cloudMrPolylineVertices?.length > 0) {
+    previewPolylineSegment(this);
+  }
+  return result;
+};
+
 const _mouseUpListener = Niivue.prototype.mouseUpListener;
 Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   let pendingDraft = null;
+  let polylineClick = false;
+
   if (shouldDeferShapeCommit(this)) {
     this._cloudMrSkipNextUndoBitmap = true;
     pendingDraft = captureDeferredShapeDraft(this);
   }
+
+  if (isPolylinePenActive(this) && isClickWithoutDrag(this.uiData)) {
+    this.drawPenLocation = [NaN, NaN, NaN];
+    this.drawPenFillPts = [];
+    this._cloudMrSkipNextUndoBitmap = true;
+    this._cloudMrSuppressDrawingChangedMouseUp = true;
+    polylineClick = true;
+  }
+
   _mouseUpListener.call(this);
+
+  if (polylineClick) {
+    addPolylineVertex(this);
+    return;
+  }
+
   if (!pendingDraft?.baseBitmap) {
     return;
   }

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,7 +1,16 @@
-export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, 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;
+    showPenModes?: boolean | undefined;
+    penDrawMode?: string | undefined;
+    onPenDrawModeChange: any;
+    polylineVertexCount?: number | undefined;
+    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

@@ -12,12 +12,13 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Shared ROI label color row (NiiVue pen indices 1–6). Used by pen, rectangle, and ellipse tools.
- * Rectangle/ellipse palettes may also show Apply/Cancel while a shape draft is being adjusted.
+ * Pen palette adds freehand vs straight-line mode; rectangle/ellipse show Apply/Cancel while adjusting.
  */
-import { Stack, IconButton, Button, Tooltip } from "@mui/material";
+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" } },
@@ -28,24 +29,56 @@ var FILLED_COLORS = [
 ];
 var ACTION_FONT_SIZE = "0.75rem";
 var ACTION_ICON_SIZE = "0.875rem";
+var modeBtnSx = function (active) { return ({
+    color: active ? "#c9a0e8" : "#bbb",
+    fontSize: ACTION_FONT_SIZE,
+    textTransform: "none",
+    minWidth: 0,
+    py: 0.25,
+    px: 0.75
+}); };
 export default function DrawColorPlatte(_a) {
-    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.shapeDraftActive, shapeDraftActive = _b === void 0 ? false : _b, onApplyShapeDraft = _a.onApplyShapeDraft, onCancelShapeDraft = _a.onCancelShapeDraft;
+    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%",
             left: 0,
             zIndex: 1500,
             border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
-            maxWidth: expanded ? 300 : 0,
+            maxWidth: expanded ? 320 : 0,
+            minWidth: expanded ? 240 : 0,
             overflow: expanded ? "visible" : "hidden",
             borderRadius: "16px",
             borderTopLeftRadius: "6pt",
             borderTopRightRadius: "6pt",
             background: "#333"
-        }, direction: "column", spacing: 0.5, sx: { py: shapeDraftActive && expanded ? 0.5 : 0 } }, { children: [_jsx(Stack, __assign({ direction: "row" }, { children: FILLED_COLORS.map(function (color, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+        }, 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)); }) })), shapeDraftActive && 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: "Cancel shape (Esc)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel shape", onClick: function () { return onCancelShapeDraft === null || onCancelShapeDraft === void 0 ? void 0 : onCancelShapeDraft(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                    } }, { 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: {
+                                color: "#ccc",
+                                fontSize: ACTION_FONT_SIZE,
+                                textTransform: "none",
+                                minWidth: 0,
+                                py: 0.25,
+                                px: 0.75,
+                                "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
+                            } }, { children: "Cancel" })) })), _jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 1 }, { children: [polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: "Connect last point to first and fill" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "close and fill polyline", onClick: function () { return onCloseFillPolyline === null || onCloseFillPolyline === void 0 ? void 0 : onCloseFillPolyline(); }, sx: {
+                                        color: "#c9a0e8",
+                                        fontSize: ACTION_FONT_SIZE,
+                                        textTransform: "none",
+                                        minWidth: 0,
+                                        py: 0.25,
+                                        px: 0.75
+                                    } }, { children: "Close & fill" })) }))), _jsx(Tooltip, __assign({ title: "Keep outline only (Enter)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "finish polyline", onClick: function () { return onFinishPolyline === null || onFinishPolyline === void 0 ? void 0 : onFinishPolyline(); }, 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: "Done" })) }))] }))] }))), shapeDraftActive && 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: "Cancel shape (Esc)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel shape", onClick: function () { return onCancelShapeDraft === null || onCancelShapeDraft === void 0 ? void 0 : onCancelShapeDraft(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
                                 color: "#ccc",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",

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 })] })), _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/dist/CmrComponents/niivue-viewer/polylinePenUtils.d.ts

@@ -0,0 +1,12 @@
+export function isPolylinePenActive(nv: any): any;
+export function isClickWithoutDrag(uiData: any, thresholdPx?: number): boolean;
+export function axCorSagFromMouse(nv: any): any;
+export function voxFromMouse(nv: any): any[] | null;
+export function notifyPolylineChange(nv: any, count: any): void;
+export function resetPolylineState(nv: any): void;
+export function cancelPolyline(nv: any): void;
+export function previewPolylineSegment(nv: any): void;
+export function addPolylineVertex(nv: any): boolean;
+export function finishPolyline(nv: any, { fillClosed }?: {
+    fillClosed?: boolean | undefined;
+}): boolean;

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

@@ -0,0 +1,123 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { NI_PEN_TYPE } from "./niivuePenType";
+var CLICK_DRAG_PX = 5;
+export function isPolylinePenActive(nv) {
+    return (nv.opts.polylinePenMode &&
+        nv.opts.drawingEnabled &&
+        nv.opts.penType === NI_PEN_TYPE.PEN);
+}
+export function isClickWithoutDrag(uiData, thresholdPx) {
+    if (thresholdPx === void 0) { thresholdPx = CLICK_DRAG_PX; }
+    var dx = uiData.dragStart[0] - uiData.dragEnd[0];
+    var dy = uiData.dragStart[1] - uiData.dragEnd[1];
+    return dx * dx + dy * dy <= thresholdPx * thresholdPx;
+}
+export function axCorSagFromMouse(nv) {
+    var _a;
+    var tile = nv.tileIndex(nv.mousePos[0], nv.mousePos[1]);
+    if (tile >= 0 && ((_a = nv.screenSlices) === null || _a === void 0 ? void 0 : _a[tile])) {
+        return nv.screenSlices[tile].axCorSag;
+    }
+    return nv.drawPenAxCorSag >= 0 ? nv.drawPenAxCorSag : 0;
+}
+export function voxFromMouse(nv) {
+    var frac = nv.canvasPos2frac(nv.mousePos);
+    if (!frac || frac[0] < 0)
+        return null;
+    var vox = nv.frac2vox(frac);
+    return [vox[0], vox[1], vox[2]];
+}
+export function notifyPolylineChange(nv, count) {
+    if (typeof nv.onPolylineChange === "function") {
+        nv.onPolylineChange(count);
+    }
+}
+export function resetPolylineState(nv) {
+    nv._cloudMrPolylineVertices = [];
+    nv._cloudMrPolylineBaseBitmap = null;
+    nv._cloudMrPolylineSessionStartBitmap = null;
+    nv._cloudMrPolylineAxCorSag = -1;
+    notifyPolylineChange(nv, 0);
+}
+export function cancelPolyline(nv) {
+    if (nv._cloudMrPolylineSessionStartBitmap) {
+        nv.drawBitmap.set(nv._cloudMrPolylineSessionStartBitmap);
+        nv.refreshDrawing(true, false);
+        nv.drawScene();
+    }
+    resetPolylineState(nv);
+}
+export function previewPolylineSegment(nv) {
+    var verts = nv._cloudMrPolylineVertices;
+    if (!(verts === null || verts === void 0 ? void 0 : verts.length) || !nv._cloudMrPolylineBaseBitmap)
+        return;
+    var cursor = voxFromMouse(nv);
+    if (!cursor)
+        return;
+    nv.drawBitmap.set(nv._cloudMrPolylineBaseBitmap);
+    nv.drawPenAxCorSag = nv._cloudMrPolylineAxCorSag;
+    nv.drawPenLine(cursor, verts[verts.length - 1], nv.opts.penValue);
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+}
+export function addPolylineVertex(nv) {
+    var pt = voxFromMouse(nv);
+    if (!pt)
+        return false;
+    var penValue = nv.opts.penValue;
+    var verts = nv._cloudMrPolylineVertices || (nv._cloudMrPolylineVertices = []);
+    if (verts.length === 0) {
+        nv._cloudMrPolylineSessionStartBitmap = nv.drawBitmap.slice();
+        nv._cloudMrPolylineBaseBitmap = nv._cloudMrPolylineSessionStartBitmap.slice();
+        nv._cloudMrPolylineAxCorSag = axCorSagFromMouse(nv);
+        nv.drawPenAxCorSag = nv._cloudMrPolylineAxCorSag;
+        verts.push(pt);
+        nv.drawPt(pt[0], pt[1], pt[2], penValue);
+        nv.refreshDrawing(false, false);
+    }
+    else {
+        var prev = verts[verts.length - 1];
+        if (prev[0] === pt[0] && prev[1] === pt[1] && prev[2] === pt[2]) {
+            return false;
+        }
+        nv.drawPenAxCorSag = nv._cloudMrPolylineAxCorSag;
+        nv.drawPenLine(pt, prev, penValue);
+        verts.push(pt);
+        nv._cloudMrPolylineBaseBitmap = nv.drawBitmap.slice();
+        nv.refreshDrawing(false, false);
+    }
+    nv.drawScene();
+    notifyPolylineChange(nv, verts.length);
+    return true;
+}
+export function finishPolyline(nv, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.fillClosed, fillClosed = _c === void 0 ? false : _c;
+    var verts = nv._cloudMrPolylineVertices;
+    if (!verts || verts.length < 2) {
+        resetPolylineState(nv);
+        return false;
+    }
+    if (fillClosed && verts.length >= 3) {
+        var first = verts[0];
+        var last = verts[verts.length - 1];
+        nv.drawPenAxCorSag = nv._cloudMrPolylineAxCorSag;
+        nv.drawPenLine(first, last, nv.opts.penValue);
+        nv.drawPenFillPts = verts.map(function (v) { return __spreadArray([], v, true); });
+        nv.drawPenFilled();
+    }
+    nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+    if (typeof nv.onDrawingChanged === "function") {
+        nv.onDrawingChanged("draw");
+    }
+    resetPolylineState(nv);
+    nv.drawScene();
+    return true;
+}

package/package.json

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