cloudmr-ux 4.8.2 → 4.8.4

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, _f;
+        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 {
@@ -143,13 +143,14 @@ export function CloudMrNiivuePanel(props) {
             nv.opts.penBounds = 0;
             nv.opts.penSize = 1;
         }
-        else if (tool === "pen") {
-            var penBrush = (_f = props.drawToolkitProps.brushSize) !== null && _f !== void 0 ? _f : 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

@@ -63,8 +63,8 @@ import { SettingsPanel } from './SettingsPanel';
 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 { applyPenDraft, cancelPenDraft, captureFreehandDraft, fillPolylineDraft, unfillPolylineDraft, polylineDraftFromNv, redrawPolylineDraft, redrawFreehandDraft, syncPolylineDraftToNv, registerAppliedPolyline, collectPolylineAppliedVoxelIndices, } from './penDraftUtils';
+import { registerAppliedShape, updateShapeRegistryErosionState, removeShapeRegistryEntry, clearShapeRegistry, redrawDraftShape, } from './shapeDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -577,22 +577,23 @@ export default function CloudMrNiivueViewer(props) {
     function nvUpdateBrushSize(size) {
         setBrushSize(size);
         brushSizeRef.current = size;
-        if (drawShapeToolRef.current === "pen" && drawPen !== 0 && drawPen !== 8) {
+        var tool = drawShapeToolRef.current;
+        if ((tool === "pen" || tool === "polyline") && drawPen !== 8) {
             applyNvBrushSize(size);
         }
     }
     function nvUpdateEraserSize(size) {
         setEraserSize(size);
         eraserSizeRef.current = size;
-        if (drawPen === 0 || drawPen === 8) {
+        if (drawPen === 8) {
             applyNvBrushSize(size);
         }
     }
     function nvUpdateDrawPen(a) {
-        var _a;
+        var _a, _b, _c;
         var raw = Number(a.target.value);
         setDrawPen(raw);
-        var isEraser = raw === 0 || raw === 8;
+        var isEraser = raw === 8;
         if (raw === 8) {
             nv.setPenValue(0, true);
         }
@@ -609,10 +610,53 @@ export default function CloudMrNiivueViewer(props) {
         }
         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);
         }
+        // Immediately repaint any active draft in the new color so the user sees the change.
+        if (!isEraser) {
+            var colorValue = raw & 7;
+            if (shapeDraftRef.current) {
+                var next = __assign(__assign({}, shapeDraftRef.current), { penValue: colorValue });
+                shapeDraftRef.current = next;
+                setShapeDraft(next);
+                redrawDraftShape(nv, next);
+            }
+            else if (penDraftRef.current) {
+                var next = __assign(__assign({}, penDraftRef.current), { penValue: colorValue });
+                penDraftRef.current = next;
+                setPenDraft(next);
+                if (next.kind === "polyline") {
+                    var count = (_c = (_b = next.vertices) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+                    if (count >= 2) {
+                        // Redraw segments in the new color, then update the base so the
+                        // rubber-band preview also uses the new color.
+                        redrawPolylineDraft(nv, __assign(__assign({}, next), { filled: false }));
+                        if (nv.drawBitmap)
+                            nv._cloudMrPolylineBaseBitmap = nv.drawBitmap.slice();
+                        // Re-apply fill on top when polygon is closeable (base stays segments-only).
+                        if (count >= 3) {
+                            nv.drawPenAxCorSag = next.axCorSag;
+                            nv.drawPenFillPts = next.vertices.map(function (v) { return __spreadArray([], v, true); });
+                            nv._cloudMrSkipNextUndoBitmap = true;
+                            nv.drawPenFilled();
+                            nv.refreshDrawing(false, false);
+                            nv.drawScene();
+                        }
+                    }
+                }
+                else if (next.kind === "freehand") {
+                    redrawFreehandDraft(nv, next);
+                }
+            }
+        }
     }
     function deactivateDrawTools() {
         var _a, _b;
@@ -866,40 +910,58 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.deferFreehandCommit = false;
     }
     function cancelPenDraftHandler() {
-        var _a;
+        var _a, _b;
         var draft = penDraftRef.current;
         if (!draft)
             return;
         var registryId = draft._registryId;
         cancelPenDraft(nv, draft);
-        if (registryId && draft.kind === "polyline") {
-            restoreCommittedPolyline(nv, registryId);
+        if (registryId) {
+            // Restore the exact committed voxels from the registry (works for both the
+            // legacy polyline-draft case and the new freehand-converted case).
+            var entry_1 = (_a = nv._cloudMrPolylineRegistry) === null || _a === void 0 ? void 0 : _a.find(function (e) { return e.id === registryId; });
+            if (entry_1) {
+                var bitmap_1 = nv.drawBitmap;
+                entry_1.voxelIndices.forEach(function (idx) {
+                    if (idx < bitmap_1.length)
+                        bitmap_1[idx] = entry_1.penValue;
+                });
+                nv.refreshDrawing(true, false);
+                nv.drawScene();
+            }
         }
         if (draft.kind === "polyline") {
-            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            (_b = nv.cloudMrResetPolyline) === null || _b === void 0 ? void 0 : _b.call(nv);
             setPolylineVertexCount(0);
         }
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
-        if (drawShapeToolRef.current === "pen") {
+        var tool = drawShapeToolRef.current;
+        if (tool === "pen" || tool === "polyline") {
             nvSetDrawingEnabled(true);
         }
     }
     function applyPenDraftHandler(_a) {
-        var _b, _c, _d;
-        var _e = _a === void 0 ? {} : _a, _f = _e.keepTool, keepTool = _f === void 0 ? false : _f;
+        var _b, _c, _d, _e, _f;
+        var _g = _a === void 0 ? {} : _a, _h = _g.keepTool, keepTool = _h === void 0 ? false : _h;
         var draft = penDraftRef.current;
         if (!draft)
             return;
         if (draft.kind === "polyline" && ((_b = nv._cloudMrPolylineVertices) === null || _b === void 0 ? void 0 : _b.length) >= 2) {
-            var fresh = polylineDraftFromNv(nv, { filled: !!draft.filled });
+            var fresh = polylineDraftFromNv(nv, { filled: ((_c = draft.vertices) === null || _c === void 0 ? void 0 : _c.length) >= 3 });
             if (fresh) {
                 draft = fresh;
                 penDraftRef.current = draft;
             }
         }
-        draft = (_c = applyPenDraft(nv, draft)) !== null && _c !== void 0 ? _c : draft;
+        // Auto-fill polyline on apply — fillPolylineDraft updates _cloudMrPolylineBaseBitmap
+        // to the filled state so applyPenDraft commits the correct filled bitmap.
+        if (draft.kind === "polyline" && ((_d = draft.vertices) === null || _d === void 0 ? void 0 : _d.length) >= 3) {
+            draft = fillPolylineDraft(nv, draft);
+            penDraftRef.current = draft;
+        }
+        draft = (_e = applyPenDraft(nv, draft)) !== null && _e !== void 0 ? _e : draft;
         if (draft.kind === "polyline" && nv._cloudMrPolylineSessionStartBitmap) {
             draft = __assign(__assign({}, draft), { baseBitmap: new Uint8Array(nv._cloudMrPolylineSessionStartBitmap) });
         }
@@ -907,17 +969,22 @@ export default function CloudMrNiivueViewer(props) {
         markPenVoxelKind(draft, draft.kind === "polyline" ? 3 : 2);
         if (draft.kind === "polyline") {
             registerAppliedPolyline(nv, draft, draft._registryId);
-            (_d = nv.cloudMrResetPolyline) === null || _d === void 0 ? void 0 : _d.call(nv);
+            (_f = nv.cloudMrResetPolyline) === null || _f === void 0 ? void 0 : _f.call(nv);
             setPolylineVertexCount(0);
         }
+        else if (draft._registryId && nv._cloudMrPolylineRegistry) {
+            // Was a committed polyline reopened as a freehand draft (move-only).
+            // Remove the stale registry entry so it is not matched on future clicks.
+            nv._cloudMrPolylineRegistry = nv._cloudMrPolylineRegistry.filter(function (e) { return e.id !== draft._registryId; });
+        }
         setPenDraft(null);
         penDraftRef.current = null;
         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);
         }
@@ -974,11 +1041,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);
         }
@@ -989,13 +1055,18 @@ export default function CloudMrNiivueViewer(props) {
     nv.onPolylineChange = function (count) {
         var _a, _b;
         setPolylineVertexCount(count);
-        if (penDrawModeRef.current === "polyline" && count >= 2) {
-            var prev = penDraftRef.current;
-            var preserveFill = (prev === null || prev === void 0 ? void 0 : prev.kind) === "polyline" &&
-                prev.filled &&
-                ((_a = prev.vertices) === null || _a === void 0 ? void 0 : _a.length) === count;
-            var draft = polylineDraftFromNv(nv, { filled: preserveFill });
+        if (drawShapeToolRef.current === "polyline" && count >= 2) {
+            var draft = polylineDraftFromNv(nv, { filled: count >= 3 });
             if (draft) {
+                if (count >= 3) {
+                    // Show fill live on canvas after each vertex commit.
+                    // Save/restore _cloudMrPolylineBaseBitmap (segments-only) so the
+                    // rubber-band preview still works correctly on mouse move.
+                    var savedBase = (_a = nv._cloudMrPolylineBaseBitmap) === null || _a === void 0 ? void 0 : _a.slice();
+                    redrawPolylineDraft(nv, draft);
+                    if (savedBase)
+                        nv._cloudMrPolylineBaseBitmap = savedBase;
+                }
                 setPenDraft(draft);
                 penDraftRef.current = draft;
             }

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

@@ -30,7 +30,6 @@ import {
   redrawFreehandDraft,
   redrawPolylineDraft,
   shouldDeferFreehandCommit,
-  syncPolylineDraftToNv,
 } from "./penDraftUtils.js";
 
 /*
@@ -1587,12 +1586,9 @@ function cloudMrTryReopenPenDraftOnClick(nv) {
     if (kind !== 3) penKind = 2;
   }
 
-  if (draft.kind === "polyline") {
-    redrawPolylineDraft(nv, draft);
-    syncPolylineDraftToNv(nv, draft);
-  } else {
-    redrawFreehandDraft(nv, draft);
-  }
+  // capturePolylineDraftFromClick always returns a freehand draft now (exact stored
+  // voxels, no vertex state, no re-flood-fill), so the redraw path is uniform.
+  redrawFreehandDraft(nv, draft);
   nv._cloudMrSuppressDrawingChangedMouseUp = true;
   if (typeof nv.onPenDraftReopenReady === "function") {
     nv.onPenDraftReopenReady(draft, penKind);

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

@@ -24,6 +24,8 @@ import { boundsToFreehandCorners, redrawFreehandDraft, redrawPolylineDraft, sync
 import { canvasDeltaToVoxDelta, clientToCanvasPos, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
 import { useNiivueViewerTheme } from "./NiivueViewerThemeContext";
 var HANDLE_SIZE = 10;
+/** Extra space (px) added around the polyline bounding box so it's easy to see and click. */
+var POLYLINE_BOX_PADDING = 14;
 function cloneFreehandDraft(draft) {
     return __assign(__assign({}, draft), { strokeVoxels: draft.strokeVoxels.map(function (v) { return __spreadArray([], v, true); }), bounds: draft.bounds ? __assign({}, draft.bounds) : draft.bounds });
 }
@@ -100,7 +102,13 @@ export function PenDraftOverlay(_a) {
         var height = Math.max.apply(Math, ys) - top;
         if (width < 2 && height < 2)
             return null;
-        return { left: left, top: top, width: Math.max(width, 2), height: Math.max(height, 2) };
+        var pad = isPolyline ? POLYLINE_BOX_PADDING : 0;
+        return {
+            left: left - pad,
+            top: top - pad,
+            width: Math.max(width, 2) + pad * 2,
+            height: Math.max(height, 2) + pad * 2
+        };
     }, [cornerCss, draft === null || draft === void 0 ? void 0 : draft.axCorSag, freehandCorners, isPolyline, nv, overlayKey]);
     var applyDraft = useCallback(function (nextDraft) {
         if (nextDraft.kind === "polyline") {
@@ -211,7 +219,6 @@ export function PenDraftOverlay(_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" })), isPolyline &&
-                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: "grab" }), title: "Move vertex" }, "handle-".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: "Move shape" }))] })));
 }
 export default PenDraftOverlay;

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

@@ -1,10 +1,9 @@
-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, currentPenValue, 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;
+    currentPenValue?: number | 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";
@@ -19,25 +20,38 @@ import CheckIcon from "@mui/icons-material/Check";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { BrushSizeSlider } from "./BrushSizeSlider";
 var FILLED_COLORS = [
-    { sx: { color: "red" } },
-    { sx: { color: "green" } },
-    { sx: { color: "blue" } },
-    { sx: { color: "yellow" } },
-    { sx: { color: "cyan" } },
-    { sx: { color: "#e81ce8" } },
+    { sx: { color: "red" }, glow: "rgba(255, 72, 72, 0.55)" },
+    { sx: { color: "green" }, glow: "rgba(72, 200, 72, 0.55)" },
+    { sx: { color: "blue" }, glow: "rgba(72, 140, 255, 0.55)" },
+    { sx: { color: "yellow" }, glow: "rgba(255, 220, 72, 0.5)" },
+    { sx: { color: "cyan" }, glow: "rgba(72, 220, 255, 0.55)" },
+    { sx: { color: "#e81ce8" }, glow: "rgba(232, 28, 232, 0.5)" },
 ];
+/** Soft halo that hugs the circular icon shape (drop-shadow, not box-shadow). */
+function swatchGlowFilter(glow, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.active, active = _c === void 0 ? false : _c, _d = _b.hover, hover = _d === void 0 ? false : _d;
+    if (active) {
+        return "drop-shadow(0 0 1px ".concat(glow, ") drop-shadow(0 0 4px ").concat(glow, ") drop-shadow(0 0 8px rgba(255, 255, 255, 0.12))");
+    }
+    if (hover) {
+        return "drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))";
+    }
+    return "none";
+}
 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, 
+    /** Currently active pen value (1–6); used to highlight the selected swatch. */
+    _c = _a.currentPenValue, 
+    /** Currently active pen value (1–6); used to highlight the selected swatch. */
+    currentPenValue = _c === void 0 ? 1 : _c, _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 isFreehandTool = penToolKind === "freehand";
+    var isPolylineTool = penToolKind === "polyline";
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -51,13 +65,37 @@ 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 () {
-                        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: {
+        }, 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", sx: { px: 0.25 } }, { children: FILLED_COLORS.map(function (color, index) {
+                    var penValue = index + 1;
+                    var isActive = penValue === (currentPenValue & 7);
+                    return (_jsx(IconButton, __assign({ "aria-label": "Color ".concat(penValue), "aria-pressed": isActive, onClick: function () {
+                            updateDrawPen({ target: { value: penValue } });
+                            setDrawingEnabled(true);
+                        }, sx: {
+                            p: "6px",
+                            borderRadius: "50%",
+                            boxShadow: "none",
+                            transition: "background-color 0.15s ease",
+                            "&:hover": {
+                                backgroundColor: "rgba(255, 255, 255, 0.06)"
+                            },
+                            "& .color-swatch": {
+                                fontSize: "1.2rem",
+                                display: "block",
+                                transition: "filter 0.18s ease",
+                                filter: swatchGlowFilter(color.glow, { active: isActive })
+                            },
+                            "&:hover .color-swatch": {
+                                filter: swatchGlowFilter(color.glow, {
+                                    active: isActive,
+                                    hover: !isActive
+                                })
+                            }
+                        } }, { children: _jsx(FiberManualRecordIcon, { className: "color-swatch", sx: color.sx }) }), index));
+                }) })), isPolylineTool && expanded && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click to add vertices \u00B7 Right-click to fill" }))), 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,24 +103,15 @@ 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
-                                    ? "Remove fill (keeps outline editable)"
-                                    : "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": penDraftFilled ? "undo fill polyline" : "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
-                                        color: penDraftFilled ? "#ffb74d" : "#c9a0e8",
-                                        fontSize: ACTION_FONT_SIZE,
-                                        textTransform: "none",
-                                        minWidth: 0,
-                                        py: 0.25,
-                                        px: 0.75
-                                    } }, { children: penDraftFilled ? "Undo Fill" : "Fill" })) }))), penDrawMode === "polyline" && (_jsx(Tooltip, __assign({ title: "Apply polyline (Enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
-                                        color: "#c9a0e8",
-                                        fontSize: ACTION_FONT_SIZE,
-                                        textTransform: "none",
-                                        minWidth: 0,
-                                        py: 0.25,
-                                        px: 0.75,
-                                        "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                                    } }, { children: "Apply" })) })))] }))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-start", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: _jsx(Tooltip, __assign({ title: "Delete this ROI drawing" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "delete shape draft", onClick: function () { return onDeleteShapeDraft === null || onDeleteShapeDraft === void 0 ? void 0 : onDeleteShapeDraft(); }, startIcon: _jsx(DeleteOutlineIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                            } }, { children: "Delete" })) })), isPolylineTool && (_jsx(Tooltip, __assign({ title: "Apply polyline (Enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                color: "#c9a0e8",
+                                fontSize: ACTION_FONT_SIZE,
+                                textTransform: "none",
+                                minWidth: 0,
+                                py: 0.25,
+                                px: 0.75,
+                                "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
+                            } }, { children: "Apply" })) })))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-start", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: _jsx(Tooltip, __assign({ title: "Delete this ROI drawing" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "delete shape draft", onClick: function () { return onDeleteShapeDraft === null || onDeleteShapeDraft === void 0 ? void 0 : onDeleteShapeDraft(); }, startIcon: _jsx(DeleteOutlineIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
                             color: "#f44336",
                             fontSize: ACTION_FONT_SIZE,
                             textTransform: "none",

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

@@ -1,7 +1,6 @@
-export default function EraserPlatte({ expandEraseOptions, updateDrawPen, setDrawingEnabled, eraserSize, updateEraserSize, }: {
+/** Eraser palette — size control only (filled/region eraser is always used). */
+export default function EraserPlatte({ expandEraseOptions, eraserSize, updateEraserSize, }: {
     expandEraseOptions: any;
-    updateDrawPen: any;
-    setDrawingEnabled: any;
     eraserSize?: number | undefined;
     updateEraserSize: any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -9,18 +9,13 @@ var __assign = (this && this.__assign) || function () {
     };
     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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
 import { BrushSizeSlider } from "./BrushSizeSlider";
+/** Eraser palette — size control only (filled/region eraser is always used). */
 export default function EraserPlatte(_a) {
-    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"),
-    ];
-    return (_jsxs(Stack, __assign({ style: {
+    var expandEraseOptions = _a.expandEraseOptions, _b = _a.eraserSize, eraserSize = _b === void 0 ? 1 : _b, updateEraserSize = _a.updateEraserSize;
+    return (_jsx(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
             left: 0,
@@ -33,8 +28,5 @@ export default function EraserPlatte(_a) {
             borderTopRightRadius: "6pt",
             background: "#333",
             width: 150
-        }, 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)); }) }))] })));
+        }, direction: "column" }, { children: updateEraserSize && (_jsx(BrushSizeSlider, { label: "Eraser size", brushSize: eraserSize, updateBrushSize: updateEraserSize })) })));
 }

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

@@ -20,9 +20,9 @@ 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 PolylineIcon from "@mui/icons-material/Polyline";
 import CropSquareOutlinedIcon from "@mui/icons-material/CropSquareOutlined";
 import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
-import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
 import ReplyIcon from "@mui/icons-material/Reply";
 import CameraAltIcon from "@mui/icons-material/CameraAlt";
 import SvgIcon from "@mui/material/SvgIcon";
@@ -42,6 +42,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) {
@@ -71,11 +79,12 @@ export function MroDrawToolkit(props) {
     var _b = useState("n"), expandedOption = _b[0], setExpandedOption = _b[1];
     var _c = useState(false), expandOpacityOptions = _c[0], setExpandOpacityOptions = _c[1];
     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 === 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,14 +95,20 @@ 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";
     function leaveEraserIfActive() {
         var _a;
-        if (!eraserActive && props.drawPen !== 0 && props.drawPen !== 8) {
+        if (!eraserActive && props.drawPen !== 8) {
             return;
         }
         (_a = props.onDeactivateDrawTools) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -112,6 +127,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 +193,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, 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"); } })] }))] })) })) })) }))] })) })));
+    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", currentPenValue: props.drawPen, 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(PolylineIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "p", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, penToolKind: "polyline", currentPenValue: props.drawPen, 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, currentPenValue: props.drawPen, 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, currentPenValue: props.drawPen, 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: _jsx(EraserIcon, {}) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", 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: "ROI 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/penDraftUtils.d.ts

@@ -48,16 +48,32 @@ export function fillPolylineDraft(nv: any, draft: any): any;
 export function unfillPolylineDraft(nv: any, draft: any): any;
 export function applyPenDraft(nv: any, draft: any): any;
 /**
- * Reconstruct a polyline PenDraft from stored vertices (not flood-fill).
- * Returns null if the click didn't land on a registered polyline.
+ * Reconstruct a PenDraft from a registered polyline entry, returned as a
+ * **freehand** draft so it follows the same simple move-only edit flow.
+ *
+ * Using the exact stored voxel set instead of re-running drawPenFilled avoids
+ * two bugs:
+ *   1. Re-running the flood-fill on complex/self-intersecting shapes can produce
+ *      a different pixel set (winding-rule differences, sub-voxel rounding).
+ *   2. syncPolylineDraftToNv was planting old vertices back into
+ *      _cloudMrPolylineVertices; a React re-render could then re-enable
+ *      polylinePenMode and the next canvas click would append to the stale
+ *      vertices, visually "recreating" the old shape.
  */
 export function capturePolylineDraftFromClick(nv: any): {
     kind: string;
     baseBitmap: Uint8Array;
     axCorSag: any;
     penValue: any;
-    vertices: any;
-    filled: any;
+    strokeVoxels: any[];
+    bounds: {
+        x1: number;
+        y1: number;
+        z1: number;
+        x2: number;
+        y2: number;
+        z2: number;
+    };
     _registryId: any;
 } | null;
 /**

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

@@ -420,22 +420,57 @@ export function applyPenDraft(nv, draft) {
     return draft;
 }
 /**
- * Reconstruct a polyline PenDraft from stored vertices (not flood-fill).
- * Returns null if the click didn't land on a registered polyline.
+ * Reconstruct a PenDraft from a registered polyline entry, returned as a
+ * **freehand** draft so it follows the same simple move-only edit flow.
+ *
+ * Using the exact stored voxel set instead of re-running drawPenFilled avoids
+ * two bugs:
+ *   1. Re-running the flood-fill on complex/self-intersecting shapes can produce
+ *      a different pixel set (winding-rule differences, sub-voxel rounding).
+ *   2. syncPolylineDraftToNv was planting old vertices back into
+ *      _cloudMrPolylineVertices; a React re-render could then re-enable
+ *      polylinePenMode and the next canvas click would append to the stale
+ *      vertices, visually "recreating" the old shape.
  */
 export function capturePolylineDraftFromClick(nv) {
+    var _a;
     var seedVox = voxFromMouse(nv);
     var entry = findPolylineRegistryEntry(nv, seedVox);
-    if (!entry)
+    if (!entry || !((_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims))
         return null;
+    var dx = nv.back.dims[1];
+    var dy = nv.back.dims[2];
+    // Decode stored linear indices back to [x, y, z] triples.
+    var strokeVoxels = [];
+    var x1 = Infinity, y1 = Infinity, z1 = Infinity;
+    var x2 = -Infinity, y2 = -Infinity, z2 = -Infinity;
+    entry.voxelIndices.forEach(function (idx) {
+        var z = Math.floor(idx / (dx * dy));
+        var rem = idx - z * dx * dy;
+        var y = Math.floor(rem / dx);
+        var x = rem % dx;
+        strokeVoxels.push([x, y, z]);
+        if (x < x1)
+            x1 = x;
+        if (x > x2)
+            x2 = x;
+        if (y < y1)
+            y1 = y;
+        if (y > y2)
+            y2 = y;
+        if (z < z1)
+            z1 = z;
+        if (z > z2)
+            z2 = z;
+    });
     var baseBitmap = eraseClusterFromBitmap(nv.drawBitmap, entry.voxelIndices);
     return {
-        kind: "polyline",
+        kind: "freehand",
         baseBitmap: baseBitmap,
         axCorSag: entry.axCorSag,
         penValue: entry.penValue,
-        vertices: entry.vertices.map(function (v) { return __spreadArray([], v, true); }),
-        filled: entry.filled,
+        strokeVoxels: strokeVoxels,
+        bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 },
         _registryId: entry.id
     };
 }

package/package.json

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