cloudmr-ux 4.8.0 → 4.8.3

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

@@ -25,8 +25,8 @@ export interface CloudMrNiivuePanelProps {
     locationData: any[];
     decimalPrecision: number;
     drawToolkitProps: CloudMrDrawToolkitProps;
-    drawShapeTool: "pen" | "rectangle" | "ellipse" | null;
-    setDrawShapeTool: (t: "pen" | "rectangle" | "ellipse" | null) => void;
+    drawShapeTool: "pen" | "polyline" | "rectangle" | "ellipse" | null;
+    setDrawShapeTool: (t: "pen" | "polyline" | "rectangle" | "ellipse" | null) => void;
     resampleImage: () => void;
     layerList: React.ComponentProps<any>[];
     mins: number[];

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

@@ -109,24 +109,24 @@ export function CloudMrNiivuePanel(props) {
         props.resampleImage();
     }, [histogram]);
     function applyDrawShapeTool(tool) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         if (props.shapeDraft) {
-            // Apply (commit) the current draft rather than discarding it
             (_a = props.onApplyShapeDraftKeepTool) === null || _a === void 0 ? void 0 : _a.call(props);
         }
         if (props.penDraft) {
             (_b = props.onApplyPenDraftKeepTool) === null || _b === void 0 ? void 0 : _b.call(props);
         }
-        if (tool !== "pen") {
-            (_d = (_c = props.drawToolkitProps).onPenDrawModeChange) === null || _d === void 0 ? void 0 : _d.call(_c, "freehand");
-        }
         props.setDrawShapeTool(tool);
         var nv = props.nv;
-        var penMode = (_e = props.drawToolkitProps.penDrawMode) !== null && _e !== void 0 ? _e : "freehand";
         nv.opts.deferShapeCommit = tool === "rectangle" || tool === "ellipse";
         if (tool === "pen") {
-            nv.opts.polylinePenMode = penMode === "polyline";
-            nv.opts.isFilledPen = penMode === "freehand";
+            nv.opts.polylinePenMode = false;
+            nv.opts.isFilledPen = true;
+            nv.opts.deferFreehandCommit = false;
+        }
+        else if (tool === "polyline") {
+            nv.opts.polylinePenMode = true;
+            nv.opts.isFilledPen = false;
             nv.opts.deferFreehandCommit = false;
         }
         else {
@@ -139,8 +139,18 @@ export function CloudMrNiivuePanel(props) {
                 : tool === "ellipse"
                     ? NI_PEN_TYPE.ELLIPSE
                     : NI_PEN_TYPE.PEN;
+        if (tool === "rectangle" || tool === "ellipse") {
+            nv.opts.penBounds = 0;
+            nv.opts.penSize = 1;
+        }
+        else if (tool === "pen" || tool === "polyline") {
+            var penBrush = (_c = props.drawToolkitProps.brushSize) !== null && _c !== void 0 ? _c : 1;
+            nv.opts.penBounds = (penBrush - 1) / 2;
+            nv.opts.penSize = penBrush;
+        }
         nv.drawScene();
-        if ((tool === "rectangle" || tool === "ellipse") && !props.drawToolkitProps.drawingEnabled) {
+        if ((tool === "rectangle" || tool === "ellipse" || tool === "pen" || tool === "polyline") &&
+            !props.drawToolkitProps.drawingEnabled) {
             props.drawToolkitProps.setDrawingEnabled(true);
         }
     }

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

@@ -64,6 +64,7 @@ import { NumberPicker } from './NumberPicker';
 import { ColorPicker } from './ColorPicker';
 import { LayersPanel } from './LayersPanel';
 import { applyPenDraft, cancelPenDraft, captureFreehandDraft, fillPolylineDraft, unfillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, registerAppliedPolyline, restoreCommittedPolyline, collectPolylineAppliedVoxelIndices, } from './penDraftUtils';
+import { registerAppliedShape, updateShapeRegistryErosionState, removeShapeRegistryEntry, clearShapeRegistry, } from './shapeDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -177,6 +178,9 @@ export default function CloudMrNiivueViewer(props) {
     var _25 = useState(0), polylineVertexCount = _25[0], setPolylineVertexCount = _25[1];
     var _26 = useState(null), penDraft = _26[0], setPenDraft = _26[1];
     var _27 = useState(1), brushSize = _27[0], setBrushSize = _27[1];
+    var _28 = useState(1), eraserSize = _28[0], setEraserSize = _28[1];
+    var brushSizeRef = React.useRef(1);
+    var eraserSizeRef = React.useRef(1);
     var shapeDraftRef = React.useRef(null);
     var penDraftRef = React.useRef(null);
     var drawShapeToolRef = React.useRef(null);
@@ -189,8 +193,8 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.penBounds = 0;
         nv.opts.penSize = 1;
     }, []);
-    var _28 = React.useState(1.0), gamma = _28[0], setGamma = _28[1];
-    var _29 = React.useState(0), gammaKey = _29[0], setGammaKey = _29[1];
+    var _29 = React.useState(1.0), gamma = _29[0], setGamma = _29[1];
+    var _30 = React.useState(0), gammaKey = _30[0], setGammaKey = _30[1];
     // Niivue → React bridge so other places (Toolbar) can force the UI to reset
     nv.onResetGamma = function () {
         setGamma(1.0);
@@ -235,13 +239,13 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _30 = useState(0), rangeKey = _30[0], setRangeKey = _30[1];
+    var _31 = useState(0), rangeKey = _31[0], setRangeKey = _31[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _31 = useState([0, 0, 0]), boundMins = _31[0], setBoundMins = _31[1];
-    var _32 = useState([1, 1, 1]), boundMaxs = _32[0], setBoundMaxs = _32[1];
-    var _33 = useState([0.5, 0.5, 0.5]), mms = _33[0], setMMs = _33[1];
+    var _32 = useState([0, 0, 0]), boundMins = _32[0], setBoundMins = _32[1];
+    var _33 = useState([1, 1, 1]), boundMaxs = _33[0], setBoundMaxs = _33[1];
+    var _34 = useState([0.5, 0.5, 0.5]), mms = _34[0], setMMs = _34[1];
     nv.onImageLoaded = function () {
         var _a, _b;
         var oldCrosshairPos = __spreadArray([], nv.scene.crosshairPos, true);
@@ -437,6 +441,11 @@ export default function CloudMrNiivueViewer(props) {
             nv._cloudMrSuppressDrawingChangedMouseUp = false;
             return;
         }
+        if (nv.opts.drawingEnabled &&
+            nv.opts.penType === NI_PEN_TYPE.PEN &&
+            nv.opts.penValue === 0) {
+            updateShapeRegistryErosionState(nv);
+        }
         if (nv.opts.drawingEnabled) {
             setDrawingChanged(true);
             resampleImage();
@@ -524,7 +533,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _34 = useState("pan"), dragMode = _34[0], setDragMode = _34[1];
+    var _35 = useState("pan"), dragMode = _35[0], setDragMode = _35[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -561,11 +570,25 @@ export default function CloudMrNiivueViewer(props) {
         nv.setDrawingEnabled(enabled);
         nv.drawScene();
     }
-    function nvUpdateBrushSize(size) {
-        setBrushSize(size);
+    function applyNvBrushSize(size) {
         nv.opts.penBounds = (size - 1) / 2;
         nv.opts.penSize = size;
     }
+    function nvUpdateBrushSize(size) {
+        setBrushSize(size);
+        brushSizeRef.current = size;
+        var tool = drawShapeToolRef.current;
+        if ((tool === "pen" || tool === "polyline") && drawPen !== 0 && drawPen !== 8) {
+            applyNvBrushSize(size);
+        }
+    }
+    function nvUpdateEraserSize(size) {
+        setEraserSize(size);
+        eraserSizeRef.current = size;
+        if (drawPen === 0 || drawPen === 8) {
+            applyNvBrushSize(size);
+        }
+    }
     function nvUpdateDrawPen(a) {
         var _a;
         var raw = Number(a.target.value);
@@ -583,21 +606,19 @@ export default function CloudMrNiivueViewer(props) {
             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();
-            }
+            applyActiveDraftIfAny();
         }
         else if (drawShapeToolRef.current === "pen") {
             nv.opts.deferFreehandCommit = false;
-            nv.opts.polylinePenMode = penDrawModeRef.current === "polyline";
-            nv.opts.isFilledPen = penDrawModeRef.current === "freehand";
+            nv.opts.polylinePenMode = false;
+            nv.opts.isFilledPen = true;
+            applyNvBrushSize(brushSizeRef.current);
+        }
+        else if (drawShapeToolRef.current === "polyline") {
+            nv.opts.deferFreehandCommit = false;
+            nv.opts.polylinePenMode = true;
+            nv.opts.isFilledPen = false;
+            applyNvBrushSize(brushSizeRef.current);
         }
     }
     function deactivateDrawTools() {
@@ -625,26 +646,17 @@ export default function CloudMrNiivueViewer(props) {
             nv.setPenValue(1, false);
             nv.opts.isFilledPen = false;
         }
+        applyNvBrushSize(1);
     }
     function activateEraser() {
-        var _a;
+        applyActiveDraftIfAny();
         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 } });
+        applyNvBrushSize(eraserSizeRef.current);
         nvSetDrawingEnabled(true);
     }
     function nvUpdateDrawOpacity(a) {
@@ -809,7 +821,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _35 = useState({}), labelMapping = _35[0], setLabelMapping = _35[1];
+    var _36 = useState({}), labelMapping = _36[0], setLabelMapping = _36[1];
     function resampleImage(mapping) {
         if (mapping === void 0) { mapping = labelMapping; }
         var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
@@ -877,7 +889,8 @@ export default function CloudMrNiivueViewer(props) {
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
-        if (drawShapeToolRef.current === "pen") {
+        var tool = drawShapeToolRef.current;
+        if (tool === "pen" || tool === "polyline") {
             nvSetDrawingEnabled(true);
         }
     }
@@ -910,9 +923,9 @@ export default function CloudMrNiivueViewer(props) {
         nv._cloudMrPenDraftActive = false;
         setDrawingChanged(true);
         if (keepTool) {
-            var mode = penDrawModeRef.current;
-            nv.opts.polylinePenMode = mode === "polyline";
-            nv.opts.isFilledPen = mode === "freehand";
+            var tool = drawShapeToolRef.current;
+            nv.opts.polylinePenMode = tool === "polyline";
+            nv.opts.isFilledPen = tool === "pen";
             nv.opts.deferFreehandCommit = false;
             nvSetDrawingEnabled(true);
         }
@@ -947,6 +960,7 @@ export default function CloudMrNiivueViewer(props) {
     nv.onShapeCommitted = function (draft) {
         nv.drawAddUndoBitmap(nv.drawFillOverwrites);
         markShapeVoxelKind(draft);
+        registerAppliedShape(nv, draft);
         setDrawingChanged(true);
         resampleImage();
     };
@@ -968,11 +982,10 @@ export default function CloudMrNiivueViewer(props) {
         setPenDraft(draft);
         penDraftRef.current = draft;
         nv._cloudMrPenDraftActive = true;
-        // Auto-select pen tool so the palette opens
-        setDrawShapeTool("pen");
-        var mode = draft.kind === "polyline" ? "polyline" : "freehand";
-        setPenDrawMode(mode);
-        penDrawModeRef.current = mode;
+        // Auto-select the correct pen tool so the right palette opens
+        var tool = draft.kind === "polyline" ? "polyline" : "pen";
+        setDrawShapeTool(tool);
+        penDrawModeRef.current = draft.kind === "polyline" ? "polyline" : "freehand";
         if (draft.kind === "polyline") {
             setPolylineVertexCount((_b = (_a = draft.vertices) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
         }
@@ -983,7 +996,7 @@ export default function CloudMrNiivueViewer(props) {
     nv.onPolylineChange = function (count) {
         var _a, _b;
         setPolylineVertexCount(count);
-        if (penDrawModeRef.current === "polyline" && count >= 2) {
+        if (drawShapeToolRef.current === "polyline" && count >= 2) {
             var prev = penDraftRef.current;
             var preserveFill = (prev === null || prev === void 0 ? void 0 : prev.kind) === "polyline" &&
                 prev.filled &&
@@ -1020,6 +1033,7 @@ export default function CloudMrNiivueViewer(props) {
         nv._cloudMrPolylineBaseBitmap = null;
         nv._cloudMrPolylineSessionStartBitmap = null;
         nv._cloudMrToolKindBitmap = null;
+        clearShapeRegistry(nv);
     }
     function clearDrawingHandler() {
         var _a;
@@ -1057,6 +1071,9 @@ export default function CloudMrNiivueViewer(props) {
         var draft = shapeDraftRef.current;
         if (!(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
             return;
+        if (draft._registryId != null) {
+            removeShapeRegistryEntry(nv, draft._registryId);
+        }
         // Clear tool-kind tags for voxels this shape occupied
         if (nv._cloudMrToolKindBitmap) {
             for (var i = 0; i < nv.drawBitmap.length; i++) {
@@ -1162,13 +1179,29 @@ export default function CloudMrNiivueViewer(props) {
             }
         }
     }
+    function applyActiveDraftIfAny() {
+        if (shapeDraftRef.current) {
+            applyShapeDraft();
+        }
+        else if (penDraftRef.current) {
+            applyPenDraftHandler();
+        }
+    }
     function applyShapeDraft(_a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.keepTool, keepTool = _c === void 0 ? false : _c;
+        var _b, _c;
+        var _d = _a === void 0 ? {} : _a, _e = _d.keepTool, keepTool = _e === void 0 ? false : _e;
         var draft = shapeDraftRef.current;
         if (!draft)
             return;
         nv.drawAddUndoBitmap(nv.drawFillOverwrites);
         markShapeVoxelKind(draft);
+        var registryId = registerAppliedShape(nv, draft, {
+            existingId: draft._registryId,
+            eroded: ((_c = (_b = draft.shapeVoxels) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0
+        });
+        if (registryId != null) {
+            draft._registryId = registryId;
+        }
         setDrawingChanged(true);
         setShapeDraft(null);
         shapeDraftRef.current = null;
@@ -1187,6 +1220,7 @@ export default function CloudMrNiivueViewer(props) {
         shapeDraftRef.current = draft;
     }
     nv.onShapeDraftReady = function (draft) {
+        applyNvBrushSize(1);
         setShapeDraft(draft);
         shapeDraftRef.current = draft;
         nv._cloudMrShapeDraftActive = true;
@@ -1198,12 +1232,7 @@ export default function CloudMrNiivueViewer(props) {
         nvSetDrawingEnabled(false);
     };
     nv.onApplyActiveDraft = function () {
-        if (shapeDraftRef.current) {
-            applyShapeDraft();
-        }
-        else if (penDraftRef.current) {
-            applyPenDraftHandler();
-        }
+        applyActiveDraftIfAny();
     };
     React.useEffect(function () {
         nv._cloudMrPenDraftActive = penDraft != null;
@@ -1259,7 +1288,7 @@ export default function CloudMrNiivueViewer(props) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _36 = React.useState('axial'), sliceType = _36[0], setSliceType = _36[1];
+    var _37 = React.useState('axial'), sliceType = _37[0], setSliceType = _37[1];
     function nvUpdateSliceType(newSliceType) {
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
@@ -1399,14 +1428,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _37 = useState(''), selectedROI = _37[0], setSelectedDrawingLayer = _37[1];
-    var _38 = useState(false), saveDialogOpen = _38[0], setSaveDialogOpen = _38[1];
-    var _39 = useState(function () {
-    }), saveConfirmCallback = _39[0], setSaveConfirmCallback = _39[1];
-    var _40 = useState(false), confirmationOpen = _40[0], setConfirmationOpen = _40[1];
-    var _41 = useState(function () { }), warningConfirmationCallback = _41[0], setWarningConfirmationCallback = _41[1];
-    var _42 = useState(function () { }), warningCancelCallback = _42[0], setWarningCancelCallback = _42[1];
-    var _43 = useState(false), drawingChanged = _43[0], setDrawingChanged = _43[1];
+    var _38 = useState(''), selectedROI = _38[0], setSelectedDrawingLayer = _38[1];
+    var _39 = useState(false), saveDialogOpen = _39[0], setSaveDialogOpen = _39[1];
+    var _40 = useState(function () {
+    }), saveConfirmCallback = _40[0], setSaveConfirmCallback = _40[1];
+    var _41 = useState(false), confirmationOpen = _41[0], setConfirmationOpen = _41[1];
+    var _42 = useState(function () { }), warningConfirmationCallback = _42[0], setWarningConfirmationCallback = _42[1];
+    var _43 = useState(function () { }), warningCancelCallback = _43[0], setWarningCancelCallback = _43[1];
+    var _44 = useState(false), drawingChanged = _44[0], setDrawingChanged = _44[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 () {
@@ -1763,6 +1792,8 @@ export default function CloudMrNiivueViewer(props) {
         penDraftFilled: (penDraft === null || penDraft === void 0 ? void 0 : penDraft.filled) === true,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize,
+        eraserSize: eraserSize,
+        updateEraserSize: nvUpdateEraserSize,
         onActivateEraser: activateEraser,
         onDeactivateDrawTools: deactivateDrawTools,
         onClearDrawing: clearDrawingHandler

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

@@ -1673,6 +1673,16 @@ Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   }
 
   if (!pendingDraft?.baseBitmap) {
+    // If a draft is open and the user clicked (not dragged) on the canvas,
+    // treat it as an "apply" — same behaviour as right-click or the Apply button.
+    if (
+      (this._cloudMrShapeDraftActive || this._cloudMrPenDraftActive) &&
+      isClickWithoutDrag(this.uiData) &&
+      typeof this.onApplyActiveDraft === "function"
+    ) {
+      this.onApplyActiveDraft();
+      return;
+    }
     cloudMrTryReopenDraftOnClick(this);
     return;
   }

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

@@ -28,7 +28,7 @@ var HANDLE_SIZE = 10;
  * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
 export function ShapeDraftOverlay(_a) {
-    var _b;
+    var _b, _c, _d;
     var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
     var theme = useNiivueViewerTheme();
     var dragRef = useRef(null);
@@ -38,7 +38,7 @@ export function ShapeDraftOverlay(_a) {
     var finishDragRef = useRef(null);
     var onApplyDraftRef = useRef(onApplyDraft);
     onApplyDraftRef.current = onApplyDraft;
-    var _c = useState(0), setTick = _c[1];
+    var _e = useState(0), setTick = _e[1];
     var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
     useEffect(function () {
         var onMove = function () { return bump(); };
@@ -82,6 +82,7 @@ export function ShapeDraftOverlay(_a) {
             return null;
         return { left: left, top: top, width: width, height: height };
     }, [cornerCss]);
+    var resizeDisabled = ((_d = (_c = draft === null || draft === void 0 ? void 0 : draft.shapeVoxels) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
     var applyDraft = useCallback(function (nextDraft) {
         redrawDraftShape(nv, nextDraft);
         onDraftChange(nextDraft);
@@ -101,6 +102,7 @@ export function ShapeDraftOverlay(_a) {
         }
     };
     onPointerMoveRef.current = function (event) {
+        var _a;
         var drag = dragRef.current;
         var currentDraft = draftRef.current;
         if (!drag || !currentDraft)
@@ -113,8 +115,11 @@ export function ShapeDraftOverlay(_a) {
                 return;
             var startCanvas = clientToCanvasPos(canvas, drag.startClientX, drag.startClientY);
             var endCanvas = clientToCanvasPos(canvas, event.clientX, event.clientY);
-            var delta = canvasDeltaToVoxDelta(nv, startCanvas, endCanvas);
-            var next = __assign(__assign({}, currentDraft), { ptA: translatePt(drag.startPtA, delta), ptB: translatePt(drag.startPtB, delta) });
+            var delta_1 = canvasDeltaToVoxDelta(nv, startCanvas, endCanvas);
+            var next = __assign(__assign({}, currentDraft), { ptA: translatePt(drag.startPtA, delta_1), ptB: translatePt(drag.startPtB, delta_1), shapeVoxels: (_a = drag.startShapeVoxels) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+                    var x = _a[0], y = _a[1], z = _a[2];
+                    return translatePt([x, y, z], delta_1);
+                }) });
             applyDraft(next);
             return;
         }
@@ -123,10 +128,11 @@ export function ShapeDraftOverlay(_a) {
             if (!vox)
                 return;
             var next = resizeDraftCorner(nv, currentDraft, drag.cornerIndex, vox);
-            applyDraft(next);
+            applyDraft(__assign(__assign({}, next), { shapeVoxels: undefined }));
         }
     };
     var startDrag = useCallback(function (event, mode, cornerIndex) {
+        var _a;
         if (cornerIndex === void 0) { cornerIndex = -1; }
         event.preventDefault();
         event.stopPropagation();
@@ -137,7 +143,11 @@ export function ShapeDraftOverlay(_a) {
             startClientX: event.clientX,
             startClientY: event.clientY,
             startPtA: __spreadArray([], draft.ptA, true),
-            startPtB: __spreadArray([], draft.ptB, true)
+            startPtB: __spreadArray([], draft.ptB, true),
+            startShapeVoxels: (_a = draft.shapeVoxels) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+                var x = _a[0], y = _a[1], z = _a[2];
+                return [x, y, z];
+            })
         };
         window.addEventListener("pointermove", onPointerMoveRef.current);
         window.addEventListener("pointerup", finishDragRef.current);
@@ -181,6 +191,7 @@ export function ShapeDraftOverlay(_a) {
                     background: theme.accentMutedBgLight,
                     boxSizing: "border-box",
                     pointerEvents: "none"
-                } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: "Move shape" })), cornerCss.map(function (pos, i) { return (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "corner", i); }, style: __assign(__assign({}, handleStyle), { left: pos.x, top: pos.y, cursor: "nwse-resize" }), title: "Resize shape" }, "corner-".concat(i))); })] })));
+                } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: resizeDisabled ? "Move shape (resize unavailable after erasing)" : "Move shape" })), !resizeDisabled &&
+                cornerCss.map(function (pos, i) { return (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "corner", i); }, style: __assign(__assign({}, handleStyle), { left: pos.x, top: pos.y, cursor: "nwse-resize" }), title: "Resize shape" }, "corner-".concat(i))); })] })));
 }
 export default ShapeDraftOverlay;

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

@@ -1,10 +1,8 @@
-export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, penDraftKind, penDraftFilled, onApplyPenDraft, onDeletePenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onDeleteShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, penToolKind, polylineVertexCount, penDraftActive, penDraftKind, penDraftFilled, onApplyPenDraft, onDeletePenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onDeleteShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
-    showPenModes?: boolean | undefined;
-    penDrawMode?: string | undefined;
-    onPenDrawModeChange: any;
+    penToolKind?: null | undefined;
     polylineVertexCount?: number | undefined;
     penDraftActive?: boolean | undefined;
     penDraftKind: any;

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

@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Pen palette adds freehand vs polyline mode; pen/shape drafts show Apply while adjusting.
+ * Color palette for pen/shape ROI tools. Freehand and polyline each use their own
+ * toolbar button and pass `penToolKind` to show the matching options.
  */
 import { Stack, IconButton, Button, Tooltip, Typography } from "@mui/material";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
@@ -28,16 +29,14 @@ 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.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;
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, 
+    /** @type {"freehand" | "polyline" | null} */
+    _b = _a.penToolKind, 
+    /** @type {"freehand" | "polyline" | null} */
+    penToolKind = _b === void 0 ? null : _b, _c = _a.polylineVertexCount, polylineVertexCount = _c === void 0 ? 0 : _c, _d = _a.penDraftActive, penDraftActive = _d === void 0 ? false : _d, penDraftKind = _a.penDraftKind, _e = _a.penDraftFilled, penDraftFilled = _e === void 0 ? false : _e, onApplyPenDraft = _a.onApplyPenDraft, onDeletePenDraft = _a.onDeletePenDraft, onFillPenDraft = _a.onFillPenDraft, _f = _a.brushSize, brushSize = _f === void 0 ? 1 : _f, updateBrushSize = _a.updateBrushSize, _g = _a.shapeDraftActive, shapeDraftActive = _g === void 0 ? false : _g, onApplyShapeDraft = _a.onApplyShapeDraft, onDeleteShapeDraft = _a.onDeleteShapeDraft;
+    var isFreehandTool = penToolKind === "freehand";
+    var isPolylineTool = penToolKind === "polyline";
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -51,13 +50,13 @@ export default function DrawColorPlatte(_a) {
             borderTopLeftRadius: "6pt",
             borderTopRightRadius: "6pt",
             background: "#333"
-        }, direction: "column", spacing: 0.5, sx: { py: expanded ? 0.5 : 0 } }, { children: [showPenModes && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.75, pt: 0.25 } }, { children: [_jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("freehand"); }, sx: modeBtnSx(penDrawMode === "freehand") }, { children: "Freehand" })), _jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("polyline"); }, sx: modeBtnSx(penDrawMode === "polyline") }, { children: "Polyline" }))] }))), 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 () {
+        }, direction: "column", spacing: 0.5, sx: { py: expanded ? 0.5 : 0 } }, { children: [(isFreehandTool || isPolylineTool) && expanded && updateBrushSize && (_jsx(BrushSizeSlider, { label: "Line thickness", brushSize: brushSize, updateBrushSize: updateBrushSize })), _jsx(Stack, __assign({ direction: "row" }, { children: FILLED_COLORS.map(function (color, index) { return (_jsx(IconButton, __assign({ onClick: function () {
                         updateDrawPen({ target: { value: index + 1 } });
                         setDrawingEnabled(true);
-                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each vertex to draw connected line segments" }))), showPenModes &&
-                penDraftActive &&
-                (penDrawMode === "polyline" || penDraftKind === "freehand") &&
-                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: {
+                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), isPolylineTool && 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" }))), penDraftActive &&
+                expanded &&
+                ((isFreehandTool && penDraftKind === "freehand") ||
+                    (isPolylineTool && penDraftKind === "polyline")) && (_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",
@@ -65,7 +64,7 @@ export default function DrawColorPlatte(_a) {
                                 py: 0.25,
                                 px: 0.75,
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Delete" })) })), _jsxs(Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: penDraftFilled
+                            } }, { children: "Delete" })) })), isPolylineTool && (_jsxs(Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [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",
@@ -74,7 +73,7 @@ export default function DrawColorPlatte(_a) {
                                         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: {
+                                    } }, { children: penDraftFilled ? "Undo Fill" : "Fill" })) }))), _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",
@@ -82,7 +81,7 @@ export default function DrawColorPlatte(_a) {
                                         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: {
+                                    } }, { 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",

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

@@ -1,7 +1,7 @@
-export default function EraserPlatte({ expandEraseOptions, updateDrawPen, setDrawingEnabled, brushSize, updateBrushSize, }: {
+export default function EraserPlatte({ expandEraseOptions, updateDrawPen, setDrawingEnabled, eraserSize, updateEraserSize, }: {
     expandEraseOptions: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
-    brushSize?: number | undefined;
-    updateBrushSize: any;
+    eraserSize?: number | undefined;
+    updateEraserSize: any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -15,7 +15,7 @@ import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
 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 expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.eraserSize, eraserSize = _b === void 0 ? 1 : _b, updateEraserSize = _a.updateEraserSize;
     var eraseOptions = [
         _jsx(FiberManualRecordIcon, { style: { color: "white" } }, "e0"),
         _jsx(FiberManualRecordOutlinedIcon, { style: { color: "white" } }, "e1"),
@@ -33,7 +33,7 @@ export default function EraserPlatte(_a) {
             borderTopRightRadius: "6pt",
             background: "#333",
             width: 150
-        }, 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 () {
+        }, direction: "column" }, { children: [updateEraserSize && (_jsx(BrushSizeSlider, { label: "Eraser size", brushSize: eraserSize, updateBrushSize: updateEraserSize })), _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

@@ -20,6 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import { Box, Card, CardContent, IconButton, Slider, Stack, Tooltip, Typography, } from "@mui/material";
 import DrawIcon from "@mui/icons-material/Draw";
+import TimelineIcon from "@mui/icons-material/Timeline";
 import CropSquareOutlinedIcon from "@mui/icons-material/CropSquareOutlined";
 import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
 import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
@@ -42,6 +43,14 @@ function clickTargetIsNiivueCanvas(target) {
         return false;
     return !!target.closest("#niiCanvas");
 }
+/** Click-away scoped to one tool button + its dropdown palette. */
+function ToolClickAway(_a) {
+    var active = _a.active, onClickAway = _a.onClickAway, sx = _a.sx, children = _a.children;
+    var box = _jsx(Box, __assign({ sx: sx }, { children: children }));
+    if (!active)
+        return box;
+    return _jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, { children: box }));
+}
 /** Same icon tone as typical MUI on-paper controls (matches slice panel body). */
 var ICON_COLOR = "#212121";
 function EraserIcon(props) {
@@ -73,9 +82,11 @@ export function MroDrawToolkit(props) {
     var _d = useState(undefined), setMaskColor = _d[1];
     var filled = props.drawPen > 7;
     useEffect(function () {
-        // Close palette when tool is deactivated programmatically (e.g. after Apply)
+        var eraserSelected = props.drawPen === 0 || props.drawPen === 8;
+        // Close palette when tool is deactivated programmatically (e.g. after Apply).
+        // Keep eraser palette open when switching from shape/pen edit → eraser in one click.
         if (drawShapeTool === null && !props.shapeDraftActive && !props.penDraftActive) {
-            setExpandedOption("n");
+            setExpandedOption(eraserSelected ? "e" : "n");
             return;
         }
         if (!props.shapeDraftActive && !props.penDraftActive)
@@ -86,8 +97,14 @@ export function MroDrawToolkit(props) {
             setExpandedOption("l");
         else if (drawShapeTool === "pen")
             setExpandedOption("d");
-    }, [props.shapeDraftActive, props.penDraftActive, drawShapeTool]);
+        else if (drawShapeTool === "polyline")
+            setExpandedOption("p");
+    }, [props.shapeDraftActive, props.penDraftActive, drawShapeTool, props.drawPen]);
     var shapeSelectedSx = function (shape) {
+        if (shape === "pen")
+            return (drawShapeTool === "pen") ? theme.selectedToolSx : {};
+        if (shape === "polyline")
+            return (drawShapeTool === "polyline") ? theme.selectedToolSx : {};
         return drawShapeTool === shape ? theme.selectedToolSx : {};
     };
     var eraserActive = expandedOption === "e";
@@ -112,6 +129,19 @@ export function MroDrawToolkit(props) {
             props.setDrawingEnabled(true);
         }
     }
+    function clickPolyline() {
+        leaveEraserIfActive();
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("polyline");
+        if (expandedOption === "p") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("p");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
     function clickRectangle() {
         leaveEraserIfActive();
         onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("rectangle");
@@ -165,43 +195,52 @@ export function MroDrawToolkit(props) {
         "&:hover": { backgroundColor: "rgba(0,0,0,0.04)" },
         "&.Mui-disabled": { color: "rgba(0,0,0,0.26)" }
     };
-    return (_jsx(ClickAwayListener, __assign({ onClickAway: function (event) {
-            var _a;
-            if (clickTargetIsNiivueCanvas(event.target))
-                return;
-            if (props.shapeDraftActive || props.penDraftActive)
-                return;
-            setExpandedOption("n");
-            setExpandOpacityOptions(false);
-            (_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,
-                        borderTopRightRadius: 0,
-                        overflow: "visible"
-                    } }, { children: _jsx(CardContent, __assign({ sx: {
-                            overflow: "visible",
-                            "&:last-child": { paddingBottom: 2 }
-                        } }, { children: _jsx("div", __assign({ style: { display: "flex", flexDirection: "column", overflow: "visible" } }, { children: _jsxs("div", __assign({ style: {
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    flexWrap: "wrap",
-                                    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, 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 ? theme.selectedToolSx : {})) }, { 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;
-                                                (_a = props.onClearDrawing) === null || _a === void 0 ? void 0 : _a.call(props);
-                                                setExpandedOption("n");
-                                                setExpandOpacityOptions(false);
-                                            }, sx: toolBtnSx }, { children: _jsx(DeleteIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "ROI visibility" }, { children: _jsx(IconButton, __assign({ "aria-label": "visible", size: "small", onClick: function () { return props.toggleROIVisible(); }, sx: toolBtnSx }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { sx: { color: ICON_COLOR } })) : (_jsx(VisibilityOffIcon, { sx: { color: ICON_COLOR, opacity: 0.45 } })) })) })), _jsxs(Box, __assign({ sx: {
-                                            position: "relative",
-                                            zIndex: expandOpacityOptions ? 1600 : "auto",
-                                            display: "inline-flex",
-                                            alignItems: "center",
-                                            color: ICON_COLOR
-                                        } }, { children: [_jsx(Tooltip, __assign({ title: "Drawing opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", size: "small", onClick: function () { return setExpandOpacityOptions(!expandOpacityOptions); }, sx: toolBtnSx }, { children: _jsx(OpacityIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.7rem", mr: 0.25, userSelect: "none", color: ICON_COLOR } }, { children: props.drawingOpacity.toFixed(2) })), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "m" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Mask by intensity range" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", size: "small", onClick: clickMask, sx: toolBtnSx }, { children: _jsx(FormatColorFillIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
-                                                    props.resampleImage();
-                                                    props.setDrawingChanged(true);
-                                                }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () { return setExpandedOption("n"); } })] }))] })) })) })) }))] })) })));
+    function shouldIgnoreToolClickAway(event) {
+        if (clickTargetIsNiivueCanvas(event.target))
+            return true;
+        if (props.shapeDraftActive || props.penDraftActive)
+            return true;
+        return false;
+    }
+    function handleDrawToolClickAway(event) {
+        var _a;
+        if (shouldIgnoreToolClickAway(event))
+            return;
+        if (expandedOption === "n" || expandedOption === "m")
+            return;
+        setExpandedOption("n");
+        setExpandOpacityOptions(false);
+        (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+    var toolGroupSx = { position: "relative", display: "inline-flex", alignItems: "center" };
+    return (_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,
+                    borderTopRightRadius: 0,
+                    overflow: "visible"
+                } }, { children: _jsx(CardContent, __assign({ sx: {
+                        overflow: "visible",
+                        "&:last-child": { paddingBottom: 2 }
+                    } }, { children: _jsx("div", __assign({ style: { display: "flex", flexDirection: "column", overflow: "visible" } }, { children: _jsxs("div", __assign({ style: {
+                                display: "flex",
+                                flexDirection: "row",
+                                flexWrap: "wrap",
+                                alignItems: "center",
+                                gap: 4,
+                                overflow: "visible"
+                            } }, { children: [_jsxs(ToolClickAway, __assign({ active: expandedOption === "d", onClickAway: handleDrawToolClickAway, sx: __assign(__assign({}, toolGroupSx), { zIndex: expandedOption === "d" ? 1600 : "auto" }) }, { children: [_jsx(Tooltip, __assign({ title: "Freehand" }, { children: _jsx(IconButton, __assign({ "aria-label": "freehand", 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, penToolKind: "freehand", penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, onDeletePenDraft: props.onDeletePenDraft, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsxs(ToolClickAway, __assign({ active: expandedOption === "p", onClickAway: handleDrawToolClickAway, sx: __assign(__assign({}, toolGroupSx), { zIndex: expandedOption === "p" ? 1600 : "auto" }) }, { children: [_jsx(Tooltip, __assign({ title: "Polyline" }, { children: _jsx(IconButton, __assign({ "aria-label": "polyline", size: "small", onClick: clickPolyline, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("polyline")) }, { children: _jsx(TimelineIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "p", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, penToolKind: "polyline", polylineVertexCount: props.polylineVertexCount, 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(ToolClickAway, __assign({ active: expandedOption === "r", onClickAway: handleDrawToolClickAway, sx: __assign(__assign({}, toolGroupSx), { zIndex: expandedOption === "r" ? 1600 : "auto" }) }, { 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(ToolClickAway, __assign({ active: expandedOption === "l", onClickAway: handleDrawToolClickAway, sx: __assign(__assign({}, toolGroupSx), { zIndex: expandedOption === "l" ? 1600 : "auto" }) }, { 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(ToolClickAway, __assign({ active: expandedOption === "e", onClickAway: handleDrawToolClickAway, sx: __assign(__assign({}, toolGroupSx), { zIndex: expandedOption === "e" ? 1600 : "auto" }) }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: __assign(__assign({}, toolBtnSx), (eraserActive ? theme.selectedToolSx : {})) }, { children: filled || !eraserActive ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, eraserSize: props.eraserSize, updateEraserSize: props.updateEraserSize })] })), _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;
+                                            (_a = props.onClearDrawing) === null || _a === void 0 ? void 0 : _a.call(props);
+                                            setExpandedOption("n");
+                                            setExpandOpacityOptions(false);
+                                        }, sx: toolBtnSx }, { children: _jsx(DeleteIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "ROI visibility" }, { children: _jsx(IconButton, __assign({ "aria-label": "visible", size: "small", onClick: function () { return props.toggleROIVisible(); }, sx: toolBtnSx }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { sx: { color: ICON_COLOR } })) : (_jsx(VisibilityOffIcon, { sx: { color: ICON_COLOR, opacity: 0.45 } })) })) })), _jsxs(Box, __assign({ sx: {
+                                        position: "relative",
+                                        zIndex: expandOpacityOptions ? 1600 : "auto",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        color: ICON_COLOR
+                                    } }, { children: [_jsx(Tooltip, __assign({ title: "Drawing opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", size: "small", onClick: function () { return setExpandOpacityOptions(!expandOpacityOptions); }, sx: toolBtnSx }, { children: _jsx(OpacityIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.7rem", mr: 0.25, userSelect: "none", color: ICON_COLOR } }, { children: props.drawingOpacity.toFixed(2) })), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "m" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Mask by intensity range" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", size: "small", onClick: clickMask, sx: toolBtnSx }, { children: _jsx(FormatColorFillIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                                props.resampleImage();
+                                                props.setDrawingChanged(true);
+                                            }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () { return setExpandedOption("n"); } })] }))] })) })) })) }))] })));
 }

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

@@ -7,7 +7,29 @@
  * @property {number} axCorSag
  * @property {number} penType
  * @property {Uint8Array} baseBitmap
+ * @property {[number, number, number][]} [shapeVoxels] exact voxels when reopening a modified shape
+ * @property {number} [_registryId] links to _cloudMrShapeRegistry for erosion tracking
  */
+export function collectShapeVoxelIndices(nv: any, draft: any): Set<any>;
+export function findShapeRegistryEntryById(nv: any, registryId: any): any;
+/**
+ * Match a flood-filled cluster to a registered shape using an IoU-style score:
+ *   overlap / max(clusterSize, entrySize)
+ * This prevents a large eroded rectangle from matching a smaller new shape drawn
+ * inside its original footprint, while still correctly identifying the same shape
+ * being re-opened (where both sizes are nearly equal and overlap is near 1.0).
+ */
+export function findShapeRegistryEntry(nv: any, cluster: any): any;
+/** Persist applied rectangle/ellipse voxels so eraser hits can be tracked per shape. */
+export function registerAppliedShape(nv: any, draft: any, { existingId, eroded }?: {
+    existingId: any;
+    eroded?: boolean | undefined;
+}): any;
+/** Mark shapes whose stored voxels were cleared by the eraser. */
+export function updateShapeRegistryErosionState(nv: any): void;
+export function removeShapeRegistryEntry(nv: any, registryId: any): void;
+export function clearShapeRegistry(nv: any): void;
+export function paintShapeVoxels(nv: any, voxels: any, penValue: any): void;
 export function penTypeToKind(penType: any): "rectangle" | "ellipse";
 export function normalizeBounds(ptA: any, ptB: any, dims: any): {
     x1: number;
@@ -70,6 +92,8 @@ export function eraseClusterFromBitmap(bitmap: any, visited: any): Uint8Array;
  * reconstruct a ShapeDraft so the bounding-box overlay reappears for re-editing.
  */
 export function captureShapeDraftFromClick(nv: any): {
+    shapeVoxels?: number[][] | undefined;
+    _registryId?: any;
     ptA: any[];
     ptB: any[];
     penValue: number;
@@ -85,4 +109,12 @@ export type ShapeDraft = {
     axCorSag: number;
     penType: number;
     baseBitmap: Uint8Array;
+    /**
+     * exact voxels when reopening a modified shape
+     */
+    shapeVoxels?: [number, number, number][] | undefined;
+    /**
+     * links to _cloudMrShapeRegistry for erosion tracking
+     */
+    _registryId?: number | undefined;
 };

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

@@ -29,7 +29,136 @@ import { voxFromMouse } from "./polylinePenUtils";
  * @property {number} axCorSag
  * @property {number} penType
  * @property {Uint8Array} baseBitmap
+ * @property {[number, number, number][]} [shapeVoxels] exact voxels when reopening a modified shape
+ * @property {number} [_registryId] links to _cloudMrShapeRegistry for erosion tracking
  */
+export function collectShapeVoxelIndices(nv, draft) {
+    var _a, _b;
+    var indices = new Set();
+    if (!(nv === null || nv === void 0 ? void 0 : nv.drawBitmap))
+        return indices;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (((_b = draft.shapeVoxels) === null || _b === void 0 ? void 0 : _b.length) && dims) {
+        var dx = dims[1];
+        var dy = dims[2];
+        for (var _i = 0, _c = draft.shapeVoxels; _i < _c.length; _i++) {
+            var _d = _c[_i], x = _d[0], y = _d[1], z = _d[2];
+            indices.add(x + y * dx + z * dx * dy);
+        }
+        return indices;
+    }
+    if (!draft.baseBitmap)
+        return indices;
+    for (var i = 0; i < nv.drawBitmap.length; i++) {
+        if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.penValue) {
+            indices.add(i);
+        }
+    }
+    return indices;
+}
+export function findShapeRegistryEntryById(nv, registryId) {
+    var _a, _b;
+    return (_b = (_a = nv._cloudMrShapeRegistry) === null || _a === void 0 ? void 0 : _a.find(function (entry) { return entry.id === registryId; })) !== null && _b !== void 0 ? _b : null;
+}
+/**
+ * Match a flood-filled cluster to a registered shape using an IoU-style score:
+ *   overlap / max(clusterSize, entrySize)
+ * This prevents a large eroded rectangle from matching a smaller new shape drawn
+ * inside its original footprint, while still correctly identifying the same shape
+ * being re-opened (where both sizes are nearly equal and overlap is near 1.0).
+ */
+export function findShapeRegistryEntry(nv, cluster) {
+    var registry = nv._cloudMrShapeRegistry;
+    if (!(registry === null || registry === void 0 ? void 0 : registry.length) || !(cluster === null || cluster === void 0 ? void 0 : cluster.visited))
+        return null;
+    var clusterSize = cluster.visited.size;
+    if (clusterSize === 0)
+        return null;
+    var MATCH_THRESHOLD = 0.5;
+    var best = null;
+    var bestScore = 0;
+    for (var _i = 0, registry_1 = registry; _i < registry_1.length; _i++) {
+        var entry = registry_1[_i];
+        var overlap = 0;
+        for (var _a = 0, _b = cluster.visited; _a < _b.length; _a++) {
+            var idx = _b[_a];
+            if (entry.voxelIndices.has(idx))
+                overlap++;
+        }
+        var score = overlap / Math.max(clusterSize, entry.voxelIndices.size);
+        if (score > bestScore) {
+            bestScore = score;
+            best = entry;
+        }
+    }
+    return bestScore >= MATCH_THRESHOLD ? best : null;
+}
+/** Persist applied rectangle/ellipse voxels so eraser hits can be tracked per shape. */
+export function registerAppliedShape(nv, draft, _a) {
+    var _b, _c;
+    var _d = _a === void 0 ? {} : _a, existingId = _d.existingId, _e = _d.eroded, eroded = _e === void 0 ? false : _e;
+    var voxelIndices = collectShapeVoxelIndices(nv, draft);
+    if (!voxelIndices.size)
+        return null;
+    nv._cloudMrShapeRegistry = nv._cloudMrShapeRegistry || [];
+    var nextId = existingId !== null && existingId !== void 0 ? existingId : (nv._cloudMrShapeNextId = (nv._cloudMrShapeNextId || 0) + 1);
+    var entry = {
+        id: nextId,
+        ptA: __spreadArray([], draft.ptA, true),
+        ptB: __spreadArray([], draft.ptB, true),
+        penType: draft.penType,
+        penValue: draft.penValue,
+        axCorSag: draft.axCorSag,
+        voxelIndices: voxelIndices,
+        eroded: eroded || ((_c = (_b = draft.shapeVoxels) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0
+    };
+    var existingIndex = nv._cloudMrShapeRegistry.findIndex(function (e) { return e.id === nextId; });
+    if (existingIndex >= 0) {
+        nv._cloudMrShapeRegistry[existingIndex] = entry;
+    }
+    else {
+        nv._cloudMrShapeRegistry.push(entry);
+    }
+    return nextId;
+}
+/** Mark shapes whose stored voxels were cleared by the eraser. */
+export function updateShapeRegistryErosionState(nv) {
+    var registry = nv._cloudMrShapeRegistry;
+    if (!(registry === null || registry === void 0 ? void 0 : registry.length) || !nv.drawBitmap)
+        return;
+    for (var _i = 0, registry_2 = registry; _i < registry_2.length; _i++) {
+        var entry = registry_2[_i];
+        if (entry.eroded)
+            continue;
+        for (var _a = 0, _b = entry.voxelIndices; _a < _b.length; _a++) {
+            var idx = _b[_a];
+            if (nv.drawBitmap[idx] === 0) {
+                entry.eroded = true;
+                break;
+            }
+        }
+    }
+}
+export function removeShapeRegistryEntry(nv, registryId) {
+    if (registryId == null || !nv._cloudMrShapeRegistry)
+        return;
+    nv._cloudMrShapeRegistry = nv._cloudMrShapeRegistry.filter(function (e) { return e.id !== registryId; });
+}
+export function clearShapeRegistry(nv) {
+    nv._cloudMrShapeRegistry = [];
+}
+export function paintShapeVoxels(nv, voxels, penValue) {
+    var _a;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims || !(voxels === null || voxels === void 0 ? void 0 : voxels.length))
+        return;
+    var dx = dims[1];
+    var dy = dims[2];
+    for (var _i = 0, voxels_1 = voxels; _i < voxels_1.length; _i++) {
+        var _b = voxels_1[_i], x = _b[0], y = _b[1], z = _b[2];
+        nv.drawBitmap[x + y * dx + z * dx * dy] = penValue;
+    }
+}
 export function penTypeToKind(penType) {
     return penType === NI_PEN_TYPE.ELLIPSE ? "ellipse" : "rectangle";
 }
@@ -88,16 +217,27 @@ export function isDraftTooSmall(ptA, ptB) {
 }
 /** @param {ShapeDraft} draft */
 export function redrawDraftShape(nv, draft) {
+    var _a;
     if (!(nv === null || nv === void 0 ? void 0 : nv.drawBitmap) || !(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
         return;
+    // Shapes are filled regions — penSize/penBounds must not expand voxels (e.g. after eraser).
+    var savedPenBounds = nv.opts.penBounds;
+    var savedPenSize = nv.opts.penSize;
+    nv.opts.penBounds = 0;
+    nv.opts.penSize = 1;
     nv.drawBitmap.set(draft.baseBitmap);
     nv.drawPenAxCorSag = draft.axCorSag;
-    if (draft.penType === NI_PEN_TYPE.RECTANGLE) {
+    if ((_a = draft.shapeVoxels) === null || _a === void 0 ? void 0 : _a.length) {
+        paintShapeVoxels(nv, draft.shapeVoxels, draft.penValue);
+    }
+    else if (draft.penType === NI_PEN_TYPE.RECTANGLE) {
         nv.drawRectangleMask(draft.ptA, draft.ptB, draft.penValue);
     }
     else {
         nv.drawEllipseMask(draft.ptA, draft.ptB, draft.penValue);
     }
+    nv.opts.penBounds = savedPenBounds;
+    nv.opts.penSize = savedPenSize;
     nv.refreshDrawing(false, false);
     nv.drawScene();
 }
@@ -312,8 +452,8 @@ function inferShapePenTypeFromCluster(cluster, axCorSag) {
     var bounds = cluster.bounds, voxels = cluster.voxels;
     var x1 = bounds.x1, y1 = bounds.y1, z1 = bounds.z1, x2 = bounds.x2, y2 = bounds.y2, z2 = bounds.z2;
     var filled = new Set();
-    for (var _i = 0, voxels_1 = voxels; _i < voxels_1.length; _i++) {
-        var _a = voxels_1[_i], x = _a[0], y = _a[1], z = _a[2];
+    for (var _i = 0, voxels_2 = voxels; _i < voxels_2.length; _i++) {
+        var _a = voxels_2[_i], x = _a[0], y = _a[1], z = _a[2];
         filled.add(sliceKey(axCorSag, x, y, z));
     }
     var uMin;
@@ -359,6 +499,59 @@ function inferShapePenTypeFromCluster(cluster, axCorSag) {
     }
     return ellipseScore > rectScore ? NI_PEN_TYPE.ELLIPSE : NI_PEN_TYPE.RECTANGLE;
 }
+/**
+ * Geometric completeness check: true when the cluster still fills its bounding
+ * shape with no significant gaps (i.e. the eraser has not meaningfully touched it).
+ * Used as a fallback when the shape is not in the registry.
+ *
+ * For rectangles:   all bounding-box voxels must be present.
+ * For ellipses:     we use niivue's actual threshold (≤ 1.0) so boundary pixels
+ *                   that niivue doesn't draw never trigger a false "eroded" result.
+ *                   Additionally we allow up to 5% of interior voxels to be absent
+ *                   to tolerate rendering rounding without masking real erasure.
+ */
+function isClusterCompleteShape(cluster, penType) {
+    var bounds = cluster.bounds, voxels = cluster.voxels;
+    var x1 = bounds.x1, y1 = bounds.y1, z1 = bounds.z1, x2 = bounds.x2, y2 = bounds.y2, z2 = bounds.z2;
+    var filled = new Set(voxels.map(function (_a) {
+        var x = _a[0], y = _a[1], z = _a[2];
+        return "".concat(x, ",").concat(y, ",").concat(z);
+    }));
+    if (penType === NI_PEN_TYPE.RECTANGLE) {
+        for (var z = z1; z <= z2; z++) {
+            for (var y = y1; y <= y2; y++) {
+                for (var x = x1; x <= x2; x++) {
+                    if (!filled.has("".concat(x, ",").concat(y, ",").concat(z)))
+                        return false;
+                }
+            }
+        }
+        return true;
+    }
+    // Ellipse / ellipsoid: match niivue's exact threshold (≤ 1.0).
+    var cx = (x1 + x2) / 2;
+    var cy = (y1 + y2) / 2;
+    var cz = (z1 + z2) / 2;
+    var ru = Math.max(0.5, (x2 - x1) / 2);
+    var rv = Math.max(0.5, (y2 - y1) / 2);
+    var rw = Math.max(0.5, (z2 - z1) / 2);
+    var expected = 0;
+    var missing = 0;
+    for (var z = z1; z <= z2; z++) {
+        for (var y = y1; y <= y2; y++) {
+            for (var x = x1; x <= x2; x++) {
+                var inEllipse = Math.pow(((x - cx) / ru), 2) + Math.pow(((y - cy) / rv), 2) + Math.pow(((z - cz) / rw), 2) <= 1.0;
+                if (inEllipse) {
+                    expected++;
+                    if (!filled.has("".concat(x, ",").concat(y, ",").concat(z)))
+                        missing++;
+                }
+            }
+        }
+    }
+    // Allow up to 5% missing to handle minor rendering rounding at the boundary.
+    return expected === 0 || missing / expected <= 0.05;
+}
 /**
  * When the user clicks on an existing filled ROI while the rectangle/ellipse tool
  * is active (but no draft is currently open), flood-fill the clicked cluster to
@@ -369,17 +562,21 @@ export function captureShapeDraftFromClick(nv) {
     var cluster = floodFillClusterFromVox(nv, seedVox);
     if (!cluster)
         return null;
-    var label = cluster.label, visited = cluster.visited, bounds = cluster.bounds;
+    var label = cluster.label, visited = cluster.visited, voxels = cluster.voxels, bounds = cluster.bounds;
     var x1 = bounds.x1, y1 = bounds.y1, z1 = bounds.z1, x2 = bounds.x2, y2 = bounds.y2, z2 = bounds.z2;
     var baseBitmap = eraseClusterFromBitmap(nv.drawBitmap, visited);
     var axCorSag = inferAxCorSagFromBounds(x1, y1, z1, x2, y2, z2, nv.drawPenAxCorSag >= 0 ? nv.drawPenAxCorSag : 0);
     var penType = inferShapePenTypeFromCluster(cluster, axCorSag);
-    return {
-        ptA: [x1, y1, z1],
-        ptB: [x2, y2, z2],
-        penValue: label,
-        axCorSag: axCorSag,
-        penType: penType,
-        baseBitmap: baseBitmap
-    };
+    var registryEntry = findShapeRegistryEntry(nv, cluster);
+    // A shape is considered modified (partially erased) if:
+    //   - the registry knows it was eroded, OR
+    //   - (no registry entry) the geometry check finds gaps
+    var isModified = (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.eroded) === true ||
+        (!registryEntry && !isClusterCompleteShape(cluster, penType));
+    return __assign(__assign({ ptA: [x1, y1, z1], ptB: [x2, y2, z2], penValue: label, axCorSag: axCorSag, penType: penType, baseBitmap: baseBitmap }, (registryEntry ? { _registryId: registryEntry.id } : {})), (isModified
+        ? { shapeVoxels: voxels.map(function (_a) {
+                var x = _a[0], y = _a[1], z = _a[2];
+                return [x, y, z];
+            }) }
+        : {}));
 }

package/package.json

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