cloudmr-ux 4.8.3 → 4.8.5

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';
@@ -578,22 +578,22 @@ export default function CloudMrNiivueViewer(props) {
         setBrushSize(size);
         brushSizeRef.current = size;
         var tool = drawShapeToolRef.current;
-        if ((tool === "pen" || tool === "polyline") && drawPen !== 0 && drawPen !== 8) {
+        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);
         }
@@ -620,6 +620,43 @@ export default function CloudMrNiivueViewer(props) {
             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;
@@ -873,17 +910,28 @@ 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);
@@ -895,19 +943,25 @@ export default function CloudMrNiivueViewer(props) {
         }
     }
     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) });
         }
@@ -915,9 +969,14 @@ 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;
@@ -997,12 +1056,17 @@ export default function CloudMrNiivueViewer(props) {
         var _a, _b;
         setPolylineVertexCount(count);
         if (drawShapeToolRef.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 });
+            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;
             }
@@ -1245,25 +1309,34 @@ export default function CloudMrNiivueViewer(props) {
             return undefined;
         }
         var canvas = document.getElementById("niiCanvas");
-        if (!canvas) {
-            return undefined;
-        }
         var applyOnRightClick = function (event) {
             var _a;
             event.preventDefault();
             event.stopPropagation();
             (_a = nv.onApplyActiveDraft) === null || _a === void 0 ? void 0 : _a.call(nv);
         };
-        var onMouseDown = function (event) {
-            if (event.button === 2) {
-                applyOnRightClick(event);
-            }
+        // Right-click on canvas: apply via Niivue's own handler.
+        if (canvas) {
+            canvas.addEventListener("contextmenu", applyOnRightClick, true);
+        }
+        // Any mousedown outside the canvas exits editing mode.
+        // Clicks on the canvas are handled by Niivue's own mouseUpListener,
+        // so we skip them here to avoid a double-apply race.
+        var onDocMouseDown = function (event) {
+            var _a;
+            var target = event.target;
+            var onCanvas = target === canvas || (canvas && canvas.contains(target));
+            if (onCanvas)
+                return;
+            // Left or right click anywhere outside the canvas → apply draft.
+            (_a = nv.onApplyActiveDraft) === null || _a === void 0 ? void 0 : _a.call(nv);
         };
-        canvas.addEventListener("mousedown", onMouseDown, true);
-        canvas.addEventListener("contextmenu", applyOnRightClick, true);
+        document.addEventListener("mousedown", onDocMouseDown, true);
         return function () {
-            canvas.removeEventListener("mousedown", onMouseDown, true);
-            canvas.removeEventListener("contextmenu", applyOnRightClick, true);
+            if (canvas) {
+                canvas.removeEventListener("contextmenu", applyOnRightClick, true);
+            }
+            document.removeEventListener("mousedown", onDocMouseDown, true);
         };
     }, [shapeDraft, penDraft]);
     React.useEffect(function () {

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

@@ -12,6 +12,7 @@ import {
 import { NI_PEN_TYPE } from "./niivuePenType.js";
 import {
   addPolylineVertex,
+  POLYLINE_CLOSE,
   axCorSagFromMouse,
   cancelPolyline,
   finishPolyline,
@@ -30,7 +31,6 @@ import {
   redrawFreehandDraft,
   redrawPolylineDraft,
   shouldDeferFreehandCommit,
-  syncPolylineDraftToNv,
 } from "./penDraftUtils.js";
 
 /*
@@ -1587,12 +1587,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);
@@ -1668,7 +1665,11 @@ Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   _mouseUpListener.call(this);
 
   if (polylineClick) {
-    addPolylineVertex(this);
+    const result = addPolylineVertex(this);
+    if (result === POLYLINE_CLOSE && typeof this.onApplyActiveDraft === "function") {
+      // Double-click detected — connect last vertex back to first, fill, and commit.
+      this.onApplyActiveDraft();
+    }
     return;
   }
 

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,8 +1,9 @@
-export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, penToolKind, 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;
     penToolKind?: null | undefined;
+    currentPenValue?: number | undefined;
     polylineVertexCount?: number | undefined;
     penDraftActive?: boolean | undefined;
     penDraftKind: any;

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

@@ -20,13 +20,24 @@ 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";
 export default function DrawColorPlatte(_a) {
@@ -34,7 +45,11 @@ export default function DrawColorPlatte(_a) {
     /** @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;
+    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: {
@@ -50,10 +65,36 @@ export default function DrawColorPlatte(_a) {
             borderTopLeftRadius: "6pt",
             borderTopRightRadius: "6pt",
             background: "#333"
-        }, 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)); }) })), 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 &&
+        }, 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: polylineVertexCount >= 3
+                    ? "Double-click to close & fill · Right-click to cancel"
+                    : "Click to add vertices" }))), 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: {
@@ -64,24 +105,15 @@ export default function DrawColorPlatte(_a) {
                                 py: 0.25,
                                 px: 0.75,
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { 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",
-                                        fontSize: ACTION_FONT_SIZE,
-                                        textTransform: "none",
-                                        minWidth: 0,
-                                        py: 0.25,
-                                        px: 0.75
-                                    } }, { 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",
-                                        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,10 +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 TimelineIcon from "@mui/icons-material/Timeline";
+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";
@@ -80,9 +79,8 @@ 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 () {
-        var eraserSelected = props.drawPen === 0 || props.drawPen === 8;
+        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) {
@@ -110,7 +108,7 @@ export function MroDrawToolkit(props) {
     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);
@@ -228,7 +226,7 @@ export function MroDrawToolkit(props) {
                                 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 () {
+                            } }, { 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");
@@ -239,7 +237,7 @@ export function MroDrawToolkit(props) {
                                         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 () {
+                                    } }, { 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/dist/CmrComponents/niivue-viewer/polylinePenUtils.d.ts

@@ -6,7 +6,12 @@ export function notifyPolylineChange(nv: any, count: any): void;
 export function resetPolylineState(nv: any): void;
 export function cancelPolyline(nv: any): void;
 export function previewPolylineSegment(nv: any): void;
-export function addPolylineVertex(nv: any): boolean;
+export function addPolylineVertex(nv: any): boolean | typeof POLYLINE_CLOSE;
 export function finishPolyline(nv: any, { fillClosed }?: {
     fillClosed?: boolean | undefined;
 }): boolean;
+/**
+ * Sentinel returned by addPolylineVertex when a double-click is detected with
+ * ≥3 existing vertices.  The caller should close the polygon and auto-commit.
+ */
+export const POLYLINE_CLOSE: unique symbol;

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

@@ -46,6 +46,7 @@ export function resetPolylineState(nv) {
     nv._cloudMrPolylineBaseBitmap = null;
     nv._cloudMrPolylineSessionStartBitmap = null;
     nv._cloudMrPolylineAxCorSag = -1;
+    nv._cloudMrLastPolylineClickMs = null;
     notifyPolylineChange(nv, 0);
 }
 export function cancelPolyline(nv) {
@@ -69,12 +70,29 @@ export function previewPolylineSegment(nv) {
     nv.refreshDrawing(false, false);
     nv.drawScene();
 }
+/** Max ms between two clicks to be considered a double-click. */
+var DOUBLE_CLICK_MS = 400;
+/**
+ * Sentinel returned by addPolylineVertex when a double-click is detected with
+ * ≥3 existing vertices.  The caller should close the polygon and auto-commit.
+ */
+export var POLYLINE_CLOSE = Symbol("POLYLINE_CLOSE");
 export function addPolylineVertex(nv) {
     var pt = voxFromMouse(nv);
     if (!pt)
         return false;
     var penValue = nv.opts.penValue;
     var verts = nv._cloudMrPolylineVertices || (nv._cloudMrPolylineVertices = []);
+    // Double-click detection: two clicks within DOUBLE_CLICK_MS on ≥3 vertices.
+    var now = Date.now();
+    var isDoubleClick = verts.length >= 3 &&
+        nv._cloudMrLastPolylineClickMs != null &&
+        now - nv._cloudMrLastPolylineClickMs <= DOUBLE_CLICK_MS;
+    nv._cloudMrLastPolylineClickMs = now;
+    if (isDoubleClick) {
+        // Don't add this click as a vertex — signal close instead.
+        return POLYLINE_CLOSE;
+    }
     if (verts.length === 0) {
         nv._cloudMrPolylineSessionStartBitmap = nv.drawBitmap.slice();
         nv._cloudMrPolylineBaseBitmap = nv._cloudMrPolylineSessionStartBitmap.slice();

package/package.json

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