cloudmr-ux 4.7.2 → 4.7.4

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

@@ -107,7 +107,7 @@ export function CloudMrNiivuePanel(props) {
         props.resampleImage();
     }, [histogram]);
     function applyDrawShapeTool(tool) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (props.shapeDraft) {
             // Apply (commit) the current draft rather than discarding it
             (_a = props.onApplyShapeDraftKeepTool) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -120,9 +120,17 @@ export function CloudMrNiivuePanel(props) {
         }
         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";
-        nv.opts.deferFreehandCommit =
-            tool === "pen" && props.drawToolkitProps.penDrawMode === "freehand";
+        if (tool === "pen") {
+            nv.opts.polylinePenMode = penMode === "polyline";
+            nv.opts.isFilledPen = penMode === "freehand";
+            nv.opts.deferFreehandCommit = penMode === "freehand";
+        }
+        else {
+            nv.opts.polylinePenMode = false;
+            nv.opts.deferFreehandCommit = false;
+        }
         nv.opts.penType =
             tool === "rectangle"
                 ? NI_PEN_TYPE.RECTANGLE

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

@@ -63,7 +63,7 @@ import { SettingsPanel } from './SettingsPanel';
 import { NumberPicker } from './NumberPicker';
 import { ColorPicker } from './ColorPicker';
 import { LayersPanel } from './LayersPanel';
-import { applyPenDraft, cancelPenDraft, fillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, } from './penDraftUtils';
+import { applyPenDraft, cancelPenDraft, fillPolylineDraft, unfillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, registerAppliedPolyline, restoreCommittedPolyline, collectPolylineAppliedVoxelIndices, } from './penDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -837,7 +837,11 @@ export default function CloudMrNiivueViewer(props) {
         var draft = penDraftRef.current;
         if (!draft)
             return;
+        var registryId = draft._registryId;
         cancelPenDraft(nv, draft);
+        if (registryId && draft.kind === "polyline") {
+            restoreCommittedPolyline(nv, registryId);
+        }
         if (draft.kind === "polyline") {
             (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
             setPolylineVertexCount(0);
@@ -850,22 +854,41 @@ export default function CloudMrNiivueViewer(props) {
         }
     }
     function applyPenDraftHandler(_a) {
-        var _b;
-        var _c = _a === void 0 ? {} : _a, _d = _c.keepTool, keepTool = _d === void 0 ? false : _d;
+        var _b, _c, _d;
+        var _e = _a === void 0 ? {} : _a, _f = _e.keepTool, keepTool = _f === void 0 ? false : _f;
         var draft = penDraftRef.current;
         if (!draft)
             return;
-        applyPenDraft(nv, draft);
+        if (draft.kind === "polyline" && ((_b = nv._cloudMrPolylineVertices) === null || _b === void 0 ? void 0 : _b.length) >= 2) {
+            var fresh = polylineDraftFromNv(nv, { filled: !!draft.filled });
+            if (fresh) {
+                draft = fresh;
+                penDraftRef.current = draft;
+            }
+        }
+        draft = (_c = applyPenDraft(nv, draft)) !== null && _c !== void 0 ? _c : draft;
+        if (draft.kind === "polyline" && nv._cloudMrPolylineSessionStartBitmap) {
+            draft = __assign(__assign({}, draft), { baseBitmap: new Uint8Array(nv._cloudMrPolylineSessionStartBitmap) });
+        }
+        penDraftRef.current = draft;
         markPenVoxelKind(draft, draft.kind === "polyline" ? 3 : 2);
         if (draft.kind === "polyline") {
-            (_b = nv.cloudMrResetPolyline) === null || _b === void 0 ? void 0 : _b.call(nv);
+            registerAppliedPolyline(nv, draft, draft._registryId);
+            (_d = nv.cloudMrResetPolyline) === null || _d === void 0 ? void 0 : _d.call(nv);
             setPolylineVertexCount(0);
         }
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
         setDrawingChanged(true);
-        if (!keepTool) {
+        if (keepTool) {
+            var mode = penDrawModeRef.current;
+            nv.opts.polylinePenMode = mode === "polyline";
+            nv.opts.isFilledPen = mode === "freehand";
+            nv.opts.deferFreehandCommit = mode === "freehand";
+            nvSetDrawingEnabled(true);
+        }
+        else {
             // Deactivate tool entirely — palette closes, user re-enters edit by clicking the ROI
             setDrawShapeTool(null);
             nv.opts.deferFreehandCommit = false;
@@ -878,7 +901,9 @@ export default function CloudMrNiivueViewer(props) {
         var draft = penDraftRef.current;
         if (!draft || draft.kind !== "polyline" || draft.vertices.length < 3)
             return;
-        var next = fillPolylineDraft(nv, draft);
+        var next = draft.filled
+            ? unfillPolylineDraft(nv, draft)
+            : fillPolylineDraft(nv, draft);
         onPenDraftChange(next);
     }
     function onPenDraftChange(draft) {
@@ -900,14 +925,18 @@ export default function CloudMrNiivueViewer(props) {
     // Called by NiivuePatcher when the user clicks an applied pen ROI to re-edit it.
     // penKind: 2=freehand, 3=polyline
     nv.onPenDraftReopenReady = function (draft, penKind) {
+        var _a, _b;
         setPenDraft(draft);
         penDraftRef.current = draft;
         nv._cloudMrPenDraftActive = true;
         // Auto-select pen tool so the palette opens
         setDrawShapeTool("pen");
-        var mode = penKind === 3 ? "polyline" : "freehand";
+        var mode = draft.kind === "polyline" ? "polyline" : "freehand";
         setPenDrawMode(mode);
         penDrawModeRef.current = mode;
+        if (draft.kind === "polyline") {
+            setPolylineVertexCount((_b = (_a = draft.vertices) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+        }
         nv.opts.deferFreehandCommit = false;
         nv.opts.polylinePenMode = false;
         nvSetDrawingEnabled(false);
@@ -1010,11 +1039,18 @@ export default function CloudMrNiivueViewer(props) {
         ensureToolKindBitmap();
         var tkb = nv._cloudMrToolKindBitmap;
         var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+        if (draft.kind === "polyline") {
+            for (var _i = 0, _b = collectPolylineAppliedVoxelIndices(nv, draft); _i < _b.length; _i++) {
+                var idx = _b[_i];
+                tkb[idx] = kind;
+            }
+            return;
+        }
         if (draft.kind === "freehand" && draft.strokeVoxels && dims) {
             var dx = dims[1];
             var dy = dims[2];
-            for (var _i = 0, _b = draft.strokeVoxels; _i < _b.length; _i++) {
-                var _c = _b[_i], x = _c[0], y = _c[1], z = _c[2];
+            for (var _c = 0, _d = draft.strokeVoxels; _c < _d.length; _c++) {
+                var _e = _d[_c], x = _e[0], y = _e[1], z = _e[2];
                 tkb[x + y * dx + z * dx * dy] = kind;
             }
         }
@@ -1621,6 +1657,7 @@ export default function CloudMrNiivueViewer(props) {
         onCancelPenDraft: cancelPenDraftHandler,
         onFillPenDraft: fillPolylineDraftHandler,
         penDraftActive: penDraft != null,
+        penDraftFilled: (penDraft === null || penDraft === void 0 ? void 0 : penDraft.filled) === true,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize,
         onActivateEraser: activateEraser,

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

@@ -24,8 +24,12 @@ import {
 import {
   captureFreehandDraft,
   capturePenDraftFromClick,
+  capturePolylineDraftFromClick,
+  isRegisteredPolylineClick,
   redrawFreehandDraft,
+  redrawPolylineDraft,
   shouldDeferFreehandCommit,
+  syncPolylineDraftToNv,
 } from "./penDraftUtils.js";
 
 /*
@@ -1513,6 +1517,7 @@ function cloudMrTryReopenShapeDraftOnClick(nv) {
   // If we know this voxel was drawn with the pen, skip shape reopen
   const kind = clickedVoxelToolKind(nv);
   if (kind === 2 || kind === 3) return false;
+  if (isRegisteredPolylineClick(nv)) return false;
 
   const reopenDraft = captureShapeDraftFromClick(nv);
   if (!reopenDraft) return false;
@@ -1537,14 +1542,21 @@ function cloudMrTryReopenPenDraftOnClick(nv) {
   const kind = clickedVoxelToolKind(nv);
   if (kind === 1) return false;
 
-  const draft = capturePenDraftFromClick(nv);
-  if (!draft) return false;
+  let draft = capturePolylineDraftFromClick(nv);
+  let penKind = draft ? 3 : kind === 3 ? 3 : 2;
 
-  // Look up pen sub-mode (freehand=2 or polyline=3) from the kind bitmap
-  let penKind = kind; // 2 or 3; if 0 (unknown) default to freehand (2)
-  if (penKind !== 3) penKind = 2;
+  if (!draft) {
+    draft = capturePenDraftFromClick(nv);
+    if (!draft) return false;
+    if (kind !== 3) penKind = 2;
+  }
 
-  redrawFreehandDraft(nv, draft);
+  if (draft.kind === "polyline") {
+    redrawPolylineDraft(nv, draft);
+    syncPolylineDraftToNv(nv, draft);
+  } else {
+    redrawFreehandDraft(nv, draft);
+  }
   nv._cloudMrSuppressDrawingChangedMouseUp = true;
   if (typeof nv.onPenDraftReopenReady === "function") {
     nv.onPenDraftReopenReady(draft, penKind);

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

@@ -1,4 +1,4 @@
-export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, onApplyPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, penDraftFilled, onApplyPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -7,6 +7,7 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     onPenDrawModeChange: any;
     polylineVertexCount?: number | undefined;
     penDraftActive?: boolean | undefined;
+    penDraftFilled?: boolean | undefined;
     onApplyPenDraft: any;
     onFillPenDraft: any;
     brushSize?: number | undefined;

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

@@ -36,7 +36,7 @@ var modeBtnSx = function (active) { return ({
     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, onApplyPenDraft = _a.onApplyPenDraft, 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;
+    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, _f = _a.penDraftFilled, penDraftFilled = _f === void 0 ? false : _f, onApplyPenDraft = _a.onApplyPenDraft, 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;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -53,14 +53,16 @@ export default function DrawColorPlatte(_a) {
         }, 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 && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
-                                color: "#c9a0e8",
+                    } }, { 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 && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { 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: "Fill" })) }))), _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                            } }, { children: penDraftFilled ? "Undo Fill" : "Fill" })) }))), _jsx(Tooltip, __assign({ title: "Apply shape (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",

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

@@ -189,7 +189,7 @@ export function MroDrawToolkit(props) {
                                     alignItems: "center",
                                     gap: 4,
                                     overflow: "visible"
-                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, penDraftActive: props.penDraftActive, onApplyPenDraft: props.onApplyPenDraft, 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 })] })), _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 })] })), _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
+                                } }, { 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, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, 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 })] })), _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 })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: __assign(__assign({}, toolBtnSx), (eraserActive
                                                         ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
                                                         : {})) }, { children: filled || !eraserActive ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
                                                 var _a;

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

@@ -1,15 +1,11 @@
-/** @typedef {'polyline' | 'freehand'} PenDraftKind */
-/**
- * @typedef {Object} PenDraft
- * @property {PenDraftKind} kind
- * @property {Uint8Array} baseBitmap
- * @property {number} axCorSag
- * @property {number} penValue
- * @property {[number, number, number][]} [vertices]
- * @property {[number, number, number][]} [strokeVoxels]
- * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
- * @property {boolean} [filled]
- */
+/** Voxel indices added by a pen draft relative to its base bitmap. */
+export function collectPenDraftVoxelIndices(nv: any, draft: any): Set<any>;
+/** Collect applied polyline voxels using session baseline and vertex redraw fallbacks. */
+export function collectPolylineAppliedVoxelIndices(nv: any, draft: any): Set<any>;
+export function isRegisteredPolylineClick(nv: any, seedVox?: any[] | null): boolean;
+/** Persist applied polyline vertices so reopen can restore the full line. */
+export function registerAppliedPolyline(nv: any, draft: any, existingId: any): any;
+export function restoreCommittedPolyline(nv: any, registryId: any): void;
 export function isEraserActive(nv: any): any;
 export function isFreehandPenActive(nv: any): any;
 export function shouldDeferFreehandCommit(nv: any): any;
@@ -48,7 +44,22 @@ export function polylineDraftFromNv(nv: any, { filled }?: {
 } | null;
 /** Fill polyline interior without closing the outline or committing the draft. */
 export function fillPolylineDraft(nv: any, draft: any): any;
-export function applyPenDraft(nv: any, draft: any): void;
+/** Undo a previous fill — revert to outline-only without committing the draft. */
+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.
+ */
+export function capturePolylineDraftFromClick(nv: any): {
+    kind: string;
+    baseBitmap: Uint8Array;
+    axCorSag: any;
+    penValue: any;
+    vertices: any;
+    filled: any;
+    _registryId: any;
+} | null;
 /**
  * Flood-fill from the clicked voxel to reconstruct a freehand PenDraft for re-editing.
  * Returns null if the click didn't land on a labeled voxel.
@@ -79,4 +90,5 @@ export type PenDraft = {
         z2: number;
     } | undefined;
     filled?: boolean | undefined;
+    _registryId?: number | undefined;
 };

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

@@ -32,7 +32,127 @@ import { voxFromMouse } from "./polylinePenUtils";
  * @property {[number, number, number][]} [strokeVoxels]
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
  * @property {boolean} [filled]
+ * @property {number} [_registryId]
  */
+function voxelIndexFromVox(vox, dx, dy) {
+    return vox[0] + vox[1] * dx + vox[2] * dx * dy;
+}
+/** Voxel indices added by a pen draft relative to its base bitmap. */
+export function collectPenDraftVoxelIndices(nv, draft) {
+    var indices = new Set();
+    if (!nv.drawBitmap || !(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+        return indices;
+    var penValue = draft.penValue;
+    for (var i = 0; i < nv.drawBitmap.length; i++) {
+        if (nv.drawBitmap[i] === penValue && draft.baseBitmap[i] !== penValue) {
+            indices.add(i);
+        }
+    }
+    return indices;
+}
+/** Collect applied polyline voxels using session baseline and vertex redraw fallbacks. */
+export function collectPolylineAppliedVoxelIndices(nv, draft) {
+    var _a;
+    var indices = collectPenDraftVoxelIndices(nv, draft);
+    if (indices.size)
+        return indices;
+    var session = nv._cloudMrPolylineSessionStartBitmap;
+    if (session && nv.drawBitmap && (draft === null || draft === void 0 ? void 0 : draft.penValue) != null) {
+        indices = new Set();
+        var penValue = draft.penValue;
+        for (var i = 0; i < nv.drawBitmap.length; i++) {
+            if (nv.drawBitmap[i] === penValue && session[i] !== penValue) {
+                indices.add(i);
+            }
+        }
+        if (indices.size)
+            return indices;
+    }
+    if (((_a = draft === null || draft === void 0 ? void 0 : draft.vertices) === null || _a === void 0 ? void 0 : _a.length) >= 2 && session) {
+        var baseBitmap = new Uint8Array(session);
+        redrawPolylineDraft(nv, __assign(__assign({}, draft), { baseBitmap: baseBitmap, filled: !!draft.filled }));
+        indices = collectPenDraftVoxelIndices(nv, __assign(__assign({}, draft), { baseBitmap: baseBitmap }));
+    }
+    return indices;
+}
+export function isRegisteredPolylineClick(nv, seedVox) {
+    if (seedVox === void 0) { seedVox = voxFromMouse(nv); }
+    return !!findPolylineRegistryEntry(nv, seedVox);
+}
+function findPolylineRegistryEntryById(nv, registryId) {
+    var _a, _b;
+    return (_b = (_a = nv._cloudMrPolylineRegistry) === null || _a === void 0 ? void 0 : _a.find(function (entry) { return entry.id === registryId; })) !== null && _b !== void 0 ? _b : null;
+}
+function findPolylineRegistryEntry(nv, seedVox) {
+    var _a;
+    var registry = nv._cloudMrPolylineRegistry;
+    if (!(registry === null || registry === void 0 ? void 0 : registry.length) || !seedVox || !((_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];
+    var seedIdx = voxelIndexFromVox(seedVox, dx, dy);
+    var direct = registry.find(function (entry) { return entry.voxelIndices.has(seedIdx); });
+    if (direct)
+        return direct;
+    var cluster = floodFillClusterFromVox(nv, seedVox, { connectivity: 26 });
+    if (!cluster)
+        return null;
+    var best = null;
+    var bestOverlap = 0;
+    for (var _i = 0, registry_1 = registry; _i < registry_1.length; _i++) {
+        var entry = registry_1[_i];
+        var overlap = 0;
+        for (var _b = 0, _c = cluster.visited; _b < _c.length; _b++) {
+            var idx = _c[_b];
+            if (entry.voxelIndices.has(idx))
+                overlap++;
+        }
+        if (overlap > bestOverlap) {
+            bestOverlap = overlap;
+            best = entry;
+        }
+    }
+    return bestOverlap > 0 ? best : null;
+}
+/** Persist applied polyline vertices so reopen can restore the full line. */
+export function registerAppliedPolyline(nv, draft, existingId) {
+    var _a;
+    var voxelIndices = collectPolylineAppliedVoxelIndices(nv, draft);
+    if (!voxelIndices.size || !((_a = draft.vertices) === null || _a === void 0 ? void 0 : _a.length))
+        return null;
+    nv._cloudMrPolylineRegistry = nv._cloudMrPolylineRegistry || [];
+    var nextId = existingId !== null && existingId !== void 0 ? existingId : ((nv._cloudMrPolylineNextId = (nv._cloudMrPolylineNextId || 0) + 1));
+    var entry = {
+        id: nextId,
+        vertices: draft.vertices.map(function (v) { return __spreadArray([], v, true); }),
+        axCorSag: draft.axCorSag,
+        penValue: draft.penValue,
+        filled: !!draft.filled,
+        voxelIndices: voxelIndices
+    };
+    var existingIndex = nv._cloudMrPolylineRegistry.findIndex(function (e) { return e.id === nextId; });
+    if (existingIndex >= 0) {
+        nv._cloudMrPolylineRegistry[existingIndex] = entry;
+    }
+    else {
+        nv._cloudMrPolylineRegistry.push(entry);
+    }
+    return nextId;
+}
+export function restoreCommittedPolyline(nv, registryId) {
+    var entry = findPolylineRegistryEntryById(nv, registryId);
+    if (!entry || !nv.drawBitmap)
+        return;
+    var draft = {
+        kind: "polyline",
+        vertices: entry.vertices.map(function (v) { return __spreadArray([], v, true); }),
+        baseBitmap: nv.drawBitmap.slice(),
+        axCorSag: entry.axCorSag,
+        penValue: entry.penValue,
+        filled: entry.filled
+    };
+    redrawPolylineDraft(nv, draft);
+}
 export function isEraserActive(nv) {
     return (nv.opts.drawingEnabled &&
         nv.opts.penType === NI_PEN_TYPE.PEN &&
@@ -130,10 +250,16 @@ export function redrawFreehandDraft(nv, draft) {
     if (!((_a = draft === null || draft === void 0 ? void 0 : draft.strokeVoxels) === null || _a === void 0 ? void 0 : _a.length) || !draft.baseBitmap)
         return;
     nv.drawBitmap.set(draft.baseBitmap);
+    // strokeVoxels already contains every expanded/thickened voxel of the original
+    // stroke. Replaying them with penBounds=0 stamps each voxel directly without
+    // re-expanding, preventing thickness from accumulating across edits.
+    var savedPenBounds = nv.opts.penBounds;
+    nv.opts.penBounds = 0;
     for (var _i = 0, _b = draft.strokeVoxels; _i < _b.length; _i++) {
         var _c = _b[_i], x = _c[0], y = _c[1], z = _c[2];
         nv.drawPt(x, y, z, draft.penValue);
     }
+    nv.opts.penBounds = savedPenBounds;
     nv.refreshDrawing(false, false);
     nv.drawScene();
 }
@@ -254,9 +380,35 @@ export function fillPolylineDraft(nv, draft) {
     syncPolylineDraftToNv(nv, next);
     return next;
 }
+/** Undo a previous fill — revert to outline-only without committing the draft. */
+export function unfillPolylineDraft(nv, draft) {
+    if (!(draft === null || draft === void 0 ? void 0 : draft.vertices))
+        return draft;
+    var next = __assign(__assign({}, draft), { filled: false });
+    redrawPolylineDraft(nv, next);
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+    syncPolylineDraftToNv(nv, next);
+    return next;
+}
 export function applyPenDraft(nv, draft) {
+    var _a;
     if (draft.kind === "polyline") {
-        redrawPolylineDraft(nv, draft);
+        // Prefer live vertex state; draft snapshots can lag behind the canvas.
+        if (((_a = nv._cloudMrPolylineVertices) === null || _a === void 0 ? void 0 : _a.length) >= 2) {
+            var fresh = polylineDraftFromNv(nv, { filled: !!draft.filled });
+            if (fresh)
+                draft = fresh;
+        }
+        // Commit the incrementally drawn bitmap (drops rubber-band preview to cursor).
+        if (nv._cloudMrPolylineBaseBitmap) {
+            nv.drawBitmap.set(nv._cloudMrPolylineBaseBitmap);
+            nv.refreshDrawing(false, false);
+            nv.drawScene();
+        }
+        else {
+            redrawPolylineDraft(nv, draft);
+        }
     }
     else {
         redrawFreehandDraft(nv, draft);
@@ -265,6 +417,27 @@ export function applyPenDraft(nv, draft) {
     if (typeof nv.onDrawingChanged === "function") {
         nv.onDrawingChanged("draw");
     }
+    return draft;
+}
+/**
+ * Reconstruct a polyline PenDraft from stored vertices (not flood-fill).
+ * Returns null if the click didn't land on a registered polyline.
+ */
+export function capturePolylineDraftFromClick(nv) {
+    var seedVox = voxFromMouse(nv);
+    var entry = findPolylineRegistryEntry(nv, seedVox);
+    if (!entry)
+        return null;
+    var baseBitmap = eraseClusterFromBitmap(nv.drawBitmap, entry.voxelIndices);
+    return {
+        kind: "polyline",
+        baseBitmap: baseBitmap,
+        axCorSag: entry.axCorSag,
+        penValue: entry.penValue,
+        vertices: entry.vertices.map(function (v) { return __spreadArray([], v, true); }),
+        filled: entry.filled,
+        _registryId: entry.id
+    };
 }
 /**
  * Flood-fill from the clicked voxel to reconstruct a freehand PenDraft for re-editing.
@@ -272,7 +445,7 @@ export function applyPenDraft(nv, draft) {
  */
 export function capturePenDraftFromClick(nv) {
     var seedVox = voxFromMouse(nv);
-    var cluster = floodFillClusterFromVox(nv, seedVox);
+    var cluster = floodFillClusterFromVox(nv, seedVox, { connectivity: 26 });
     if (!cluster)
         return null;
     var label = cluster.label, visited = cluster.visited, voxels = cluster.voxels, bounds = cluster.bounds;

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

@@ -52,9 +52,12 @@ export function shouldDeferShapeCommit(nv: any): any;
 export function inferAxCorSagFromBounds(x1: any, y1: any, z1: any, x2: any, y2: any, z2: any, fallback?: number): number;
 /**
  * Flood-fill a connected voxel cluster from a seed.
+ * @param {{ connectivity?: 6 | 26 }} [options]
  * @returns {{ label: number, visited: Set<number>, voxels: [number,number,number][], bounds: object } | null}
  */
-export function floodFillClusterFromVox(nv: any, seedVox: any): {
+export function floodFillClusterFromVox(nv: any, seedVox: any, { connectivity }?: {
+    connectivity?: number | undefined;
+}): {
     label: number;
     visited: Set<number>;
     voxels: [number, number, number][];

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

@@ -217,13 +217,36 @@ function sliceKey(axCorSag, x, y, z) {
         return "".concat(x, ",").concat(z);
     return "".concat(y, ",").concat(z);
 }
+var NEIGHBORS_6 = [
+    [1, 0, 0],
+    [-1, 0, 0],
+    [0, 1, 0],
+    [0, -1, 0],
+    [0, 0, 1],
+    [0, 0, -1],
+];
+var NEIGHBORS_26 = (function () {
+    var out = [];
+    for (var dx = -1; dx <= 1; dx++) {
+        for (var dy = -1; dy <= 1; dy++) {
+            for (var dz = -1; dz <= 1; dz++) {
+                if (dx === 0 && dy === 0 && dz === 0)
+                    continue;
+                out.push([dx, dy, dz]);
+            }
+        }
+    }
+    return out;
+})();
 /**
  * Flood-fill a connected voxel cluster from a seed.
+ * @param {{ connectivity?: 6 | 26 }} [options]
  * @returns {{ label: number, visited: Set<number>, voxels: [number,number,number][], bounds: object } | null}
  */
-export function floodFillClusterFromVox(nv, seedVox) {
-    var _a;
-    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+export function floodFillClusterFromVox(nv, seedVox, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.connectivity, connectivity = _d === void 0 ? 6 : _d;
+    var dims = (_b = nv.back) === null || _b === void 0 ? void 0 : _b.dims;
     if (!dims || !nv.drawBitmap || !seedVox)
         return null;
     var dx = dims[1];
@@ -233,6 +256,7 @@ export function floodFillClusterFromVox(nv, seedVox) {
     var label = nv.drawBitmap[seedIdx];
     if (!label)
         return null;
+    var neighborOffsets = connectivity === 26 ? NEIGHBORS_26 : NEIGHBORS_6;
     var visited = new Set();
     var queue = [seedIdx];
     visited.add(seedIdx);
@@ -245,7 +269,7 @@ export function floodFillClusterFromVox(nv, seedVox) {
     var z2 = -Infinity;
     while (queue.length > 0) {
         var idx = queue.shift();
-        var _b = decodeVoxelIndex(idx, dx, dy), x = _b[0], y = _b[1], z = _b[2];
+        var _e = decodeVoxelIndex(idx, dx, dy), x = _e[0], y = _e[1], z = _e[2];
         voxels.push([x, y, z]);
         x1 = Math.min(x1, x);
         y1 = Math.min(y1, y);
@@ -253,16 +277,11 @@ export function floodFillClusterFromVox(nv, seedVox) {
         x2 = Math.max(x2, x);
         y2 = Math.max(y2, y);
         z2 = Math.max(z2, z);
-        var neighbors = [
-            [x + 1, y, z],
-            [x - 1, y, z],
-            [x, y + 1, z],
-            [x, y - 1, z],
-            [x, y, z + 1],
-            [x, y, z - 1],
-        ];
-        for (var _i = 0, neighbors_1 = neighbors; _i < neighbors_1.length; _i++) {
-            var _c = neighbors_1[_i], nx = _c[0], ny = _c[1], nz = _c[2];
+        for (var _i = 0, neighborOffsets_1 = neighborOffsets; _i < neighborOffsets_1.length; _i++) {
+            var _f = neighborOffsets_1[_i], ox = _f[0], oy = _f[1], oz = _f[2];
+            var nx = x + ox;
+            var ny = y + oy;
+            var nz = z + oz;
             if (nx < 0 || ny < 0 || nz < 0 || nx >= dx || ny >= dy || nz >= dz)
                 continue;
             var nIdx = voxelIndex(nx, ny, nz, dx, dy);

package/package.json

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