cloudmr-ux 4.6.7 → 4.6.9

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

@@ -51,6 +51,7 @@ export interface CloudMrNiivuePanelProps {
     shapeDraft: import("./shapeDraftUtils").ShapeDraft | null;
     onShapeDraftChange: (draft: import("./shapeDraftUtils").ShapeDraft) => void;
     onApplyShapeDraft: () => void;
+    onApplyShapeDraftKeepTool?: () => void;
     onCancelShapeDraft: () => void;
     penDraft: {
         kind: "polyline" | "freehand";
@@ -71,6 +72,7 @@ export interface CloudMrNiivuePanelProps {
     } | null;
     onPenDraftChange: (draft: NonNullable<CloudMrNiivuePanelProps["penDraft"]>) => void;
     onApplyPenDraft: () => void;
+    onApplyPenDraftKeepTool?: () => void;
     onCancelPenDraft: () => void;
 }
 export declare function CloudMrNiivuePanel(props: CloudMrNiivuePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -107,15 +107,16 @@ export function CloudMrNiivuePanel(props) {
         props.resampleImage();
     }, [histogram]);
     function applyDrawShapeTool(tool) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (props.shapeDraft) {
-            props.onCancelShapeDraft();
+            // Apply (commit) the current draft rather than discarding it
+            (_a = props.onApplyShapeDraftKeepTool) === null || _a === void 0 ? void 0 : _a.call(props);
         }
         if (props.penDraft) {
-            props.onCancelPenDraft();
+            (_b = props.onApplyPenDraftKeepTool) === null || _b === void 0 ? void 0 : _b.call(props);
         }
         if (tool !== "pen") {
-            (_b = (_a = props.drawToolkitProps).onPenDrawModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, "freehand");
+            (_d = (_c = props.drawToolkitProps).onPenDrawModeChange) === null || _d === void 0 ? void 0 : _d.call(_c, "freehand");
         }
         props.setDrawShapeTool(tool);
         var nv = props.nv;

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

@@ -849,22 +849,28 @@ export default function CloudMrNiivueViewer(props) {
             nvSetDrawingEnabled(true);
         }
     }
-    function applyPenDraftHandler() {
-        var _a;
+    function applyPenDraftHandler(_a) {
+        var _b;
+        var _c = _a === void 0 ? {} : _a, _d = _c.keepTool, keepTool = _d === void 0 ? false : _d;
         var draft = penDraftRef.current;
         if (!draft)
             return;
         applyPenDraft(nv, draft);
+        markPenVoxelKind(draft, draft.kind === "polyline" ? 3 : 2);
         if (draft.kind === "polyline") {
-            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            (_b = nv.cloudMrResetPolyline) === null || _b === void 0 ? void 0 : _b.call(nv);
             setPolylineVertexCount(0);
         }
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
         setDrawingChanged(true);
-        if (drawShapeToolRef.current === "pen") {
-            nvSetDrawingEnabled(true);
+        if (!keepTool) {
+            // Deactivate tool entirely — palette closes, user re-enters edit by clicking the ROI
+            setDrawShapeTool(null);
+            nv.opts.deferFreehandCommit = false;
+            nv.opts.polylinePenMode = false;
+            nvSetDrawingEnabled(false);
         }
         resampleImage();
     }
@@ -891,6 +897,21 @@ export default function CloudMrNiivueViewer(props) {
         nv._cloudMrPenDraftActive = true;
         nvSetDrawingEnabled(false);
     };
+    // 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) {
+        setPenDraft(draft);
+        penDraftRef.current = draft;
+        nv._cloudMrPenDraftActive = true;
+        // Auto-select pen tool so the palette opens
+        setDrawShapeTool("pen");
+        var mode = penKind === 3 ? "polyline" : "freehand";
+        setPenDrawMode(mode);
+        penDrawModeRef.current = mode;
+        nv.opts.deferFreehandCommit = false;
+        nv.opts.polylinePenMode = false;
+        nvSetDrawingEnabled(false);
+    };
     nv.onPolylineChange = function (count) {
         var _a, _b;
         setPolylineVertexCount(count);
@@ -924,19 +945,65 @@ export default function CloudMrNiivueViewer(props) {
             nvSetDrawingEnabled(true);
         }
     }
-    function applyShapeDraft() {
-        if (!shapeDraftRef.current)
+    function ensureToolKindBitmap() {
+        if (!nv.drawBitmap)
+            return;
+        if (!nv._cloudMrToolKindBitmap || nv._cloudMrToolKindBitmap.length !== nv.drawBitmap.length) {
+            nv._cloudMrToolKindBitmap = new Uint8Array(nv.drawBitmap.length);
+        }
+    }
+    function markShapeVoxelKind(draft) {
+        if (!nv.drawBitmap || !(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+            return;
+        ensureToolKindBitmap();
+        var tkb = nv._cloudMrToolKindBitmap;
+        for (var i = 0; i < nv.drawBitmap.length; i++) {
+            if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.penValue) {
+                tkb[i] = 1; // shape
+            }
+        }
+    }
+    function markPenVoxelKind(draft, kind) {
+        var _a;
+        if (!nv.drawBitmap)
+            return;
+        ensureToolKindBitmap();
+        var tkb = nv._cloudMrToolKindBitmap;
+        var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+        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];
+                tkb[x + y * dx + z * dx * dy] = kind;
+            }
+        }
+        else if (draft.baseBitmap) {
+            for (var i = 0; i < nv.drawBitmap.length; i++) {
+                if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.penValue) {
+                    tkb[i] = kind;
+                }
+            }
+        }
+    }
+    function applyShapeDraft(_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.keepTool, keepTool = _c === void 0 ? false : _c;
+        var draft = shapeDraftRef.current;
+        if (!draft)
             return;
         nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+        markShapeVoxelKind(draft);
         setDrawingChanged(true);
         setShapeDraft(null);
         shapeDraftRef.current = null;
         nv._cloudMrShapeDraftActive = false;
-        // Deactivate tool entirely — palette closes, user re-enters edit by clicking the ROI
-        setDrawShapeTool(null);
-        nv.opts.deferShapeCommit = false;
-        nv.opts.penType = NI_PEN_TYPE.PEN;
-        nvSetDrawingEnabled(false);
+        if (!keepTool) {
+            // Deactivate tool entirely — palette closes, user re-enters edit by clicking the ROI
+            setDrawShapeTool(null);
+            nv.opts.deferShapeCommit = false;
+            nv.opts.penType = NI_PEN_TYPE.PEN;
+            nvSetDrawingEnabled(false);
+        }
         resampleImage();
     }
     function onShapeDraftChange(draft) {
@@ -999,16 +1066,6 @@ export default function CloudMrNiivueViewer(props) {
             return undefined;
         }
         var onKeyDown = function (event) {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                if (shapeDraft) {
-                    cancelShapeDraft();
-                }
-                else if (penDraft) {
-                    cancelPenDraftHandler();
-                }
-                return;
-            }
             if (event.key === "Enter") {
                 event.preventDefault();
                 if (shapeDraft) {
@@ -1543,7 +1600,7 @@ export default function CloudMrNiivueViewer(props) {
                     props.rois[selectedROI].filename : undefined) }), props.niis[selectedVolume] != undefined && _jsx(CloudMrNiivuePanel, { nv: nv, transformFactors: transformFactors, decimalPrecision: decimalPrecision, locationData: locationData, locationTableVisible: locationTableVisible, pipelineID: props.pipelineID, resampleImage: resampleImage, rois: rois, drawToolkitProps: drawToolkitProps, drawShapeTool: drawShapeTool, setDrawShapeTool: setDrawShapeTool, mins: boundMins, maxs: boundMaxs, mms: mms, min: min, max: max, setMin: setMin, setMax: setMax, unzipAndRenderROI: unpackROI, zipAndSendROI: zipAndSendDrawingLayer, setLabelAlias: setLabelAlias, onAfterRoiUpload: function () {
                     var _a;
                     void ((_a = props.refreshPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props));
-                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: applyShapeDraft, onCancelShapeDraft: cancelShapeDraft, penDraft: penDraft, onPenDraftChange: onPenDraftChange, onApplyPenDraft: applyPenDraftHandler, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })));
+                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: function () { return applyShapeDraft(); }, onApplyShapeDraftKeepTool: function () { return applyShapeDraft({ keepTool: true }); }, onCancelShapeDraft: cancelShapeDraft, penDraft: penDraft, onPenDraftChange: onPenDraftChange, onApplyPenDraft: function () { return applyPenDraftHandler(); }, onApplyPenDraftKeepTool: function () { return applyPenDraftHandler({ keepTool: true }); }, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })));
 }
 function niiToVolume(nii) {
     return {

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

@@ -19,9 +19,12 @@ import {
   isPolylinePenActive,
   previewPolylineSegment,
   resetPolylineState,
+  voxFromMouse,
 } from "./polylinePenUtils.js";
 import {
   captureFreehandDraft,
+  capturePenDraftFromClick,
+  redrawFreehandDraft,
   shouldDeferFreehandCommit,
 } from "./penDraftUtils.js";
 
@@ -1486,18 +1489,30 @@ function cloudMrTryApplyDraftOnRightClick(nv, event) {
   return true;
 }
 
+/** Returns the tool-kind code stored for the voxel under the mouse (0=unknown,1=shape,2=pen freehand,3=pen polyline). */
+function clickedVoxelToolKind(nv) {
+  const bitmap = nv._cloudMrToolKindBitmap;
+  if (!bitmap || !nv.back?.dims) return 0;
+  const seedVox = voxFromMouse(nv);
+  if (!seedVox) return 0;
+  const dims = nv.back.dims;
+  const dx = dims[1];
+  const dy = dims[2];
+  const idx = seedVox[0] + seedVox[1] * dx + seedVox[2] * dx * dy;
+  return bitmap[idx] || 0;
+}
+
 /**
- * Re-enter rectangle/ellipse edit mode when clicking an existing applied ROI.
- * Works regardless of which tool is currently active (or whether any tool is active),
- * so clicking an ROI after apply always re-enters edit mode.
+ * Re-enter rectangle/ellipse edit mode when clicking an existing applied shape ROI.
+ * Skips voxels that were drawn with the pen tool (those are handled by pen reopen).
  */
 function cloudMrTryReopenShapeDraftOnClick(nv) {
-  if (nv._cloudMrShapeDraftActive || nv._cloudMrPenDraftActive) {
-    return false;
-  }
-  if (!isClickWithoutDrag(nv.uiData)) {
-    return false;
-  }
+  if (nv._cloudMrShapeDraftActive || nv._cloudMrPenDraftActive) return false;
+  if (!isClickWithoutDrag(nv.uiData)) return false;
+
+  // If we know this voxel was drawn with the pen, skip shape reopen
+  const kind = clickedVoxelToolKind(nv);
+  if (kind === 2 || kind === 3) return false;
 
   const reopenDraft = captureShapeDraftFromClick(nv);
   if (!reopenDraft) return false;
@@ -1510,6 +1525,33 @@ function cloudMrTryReopenShapeDraftOnClick(nv) {
   return true;
 }
 
+/**
+ * Re-enter pen (freehand) edit mode when clicking an existing applied pen ROI.
+ * Skips voxels that were drawn with a shape tool.
+ */
+function cloudMrTryReopenPenDraftOnClick(nv) {
+  if (nv._cloudMrShapeDraftActive || nv._cloudMrPenDraftActive) return false;
+  if (!isClickWithoutDrag(nv.uiData)) return false;
+
+  // Only handle pen voxels — skip if this was drawn with a shape tool
+  const kind = clickedVoxelToolKind(nv);
+  if (kind === 1) return false;
+
+  const draft = capturePenDraftFromClick(nv);
+  if (!draft) return false;
+
+  // 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;
+
+  redrawFreehandDraft(nv, draft);
+  nv._cloudMrSuppressDrawingChangedMouseUp = true;
+  if (typeof nv.onPenDraftReopenReady === "function") {
+    nv.onPenDraftReopenReady(draft, penKind);
+  }
+  return true;
+}
+
 const _mouseDownListener = Niivue.prototype.mouseDownListener;
 Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
   if (e.button === RIGHT_MOUSE_BUTTON && cloudMrTryApplyDraftOnRightClick(this, e)) {
@@ -1583,14 +1625,18 @@ Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   }
 
   if (!pendingDraft?.baseBitmap) {
-    cloudMrTryReopenShapeDraftOnClick(this);
+    if (!cloudMrTryReopenShapeDraftOnClick(this)) {
+      cloudMrTryReopenPenDraftOnClick(this);
+    }
     return;
   }
   if (isDraftTooSmall(pendingDraft.ptA, pendingDraft.ptB)) {
     this.drawBitmap.set(pendingDraft.baseBitmap);
     this.refreshDrawing(true, false);
     this.drawScene();
-    cloudMrTryReopenShapeDraftOnClick(this);
+    if (!cloudMrTryReopenShapeDraftOnClick(this)) {
+      cloudMrTryReopenPenDraftOnClick(this);
+    }
     return;
   }
   this._cloudMrSuppressDrawingChangedMouseUp = true;

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, onCancelPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, onApplyPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -8,11 +8,9 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     polylineVertexCount?: number | undefined;
     penDraftActive?: boolean | undefined;
     onApplyPenDraft: any;
-    onCancelPenDraft: any;
     onFillPenDraft: any;
     brushSize?: number | undefined;
     updateBrushSize: any;
     shapeDraftActive?: boolean | undefined;
     onApplyShapeDraft: any;
-    onCancelShapeDraft: any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -11,12 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Pen palette adds freehand vs polyline mode; pen/shape drafts show Apply/Cancel while adjusting.
+ * Pen palette adds freehand vs polyline mode; pen/shape drafts show Apply while adjusting.
  */
 import { Stack, IconButton, Button, Tooltip, Typography } from "@mui/material";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
 import { BrushSizeSlider } from "./BrushSizeSlider";
 var FILLED_COLORS = [
     { sx: { color: "red" } },
@@ -37,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, onCancelPenDraft = _a.onCancelPenDraft, 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, onCancelShapeDraft = _a.onCancelShapeDraft;
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.showPenModes, showPenModes = _b === void 0 ? false : _b, _c = _a.penDrawMode, penDrawMode = _c === void 0 ? "freehand" : _c, onPenDrawModeChange = _a.onPenDrawModeChange, _d = _a.polylineVertexCount, polylineVertexCount = _d === void 0 ? 0 : _d, _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;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -54,38 +53,14 @@ 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: "space-between", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [_jsx(Tooltip, __assign({ title: "Cancel (Esc)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel pen draft", onClick: function () { return onCancelPenDraft === null || onCancelPenDraft === void 0 ? void 0 : onCancelPenDraft(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
-                                color: "#ccc",
-                                fontSize: ACTION_FONT_SIZE,
-                                textTransform: "none",
-                                minWidth: 0,
-                                py: 0.25,
-                                px: 0.75,
-                                "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Cancel" })) })), _jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 1 }, { children: [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",
-                                        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: {
-                                        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 && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [_jsx(Tooltip, __assign({ title: "Cancel shape (Esc)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel shape", onClick: function () { return onCancelShapeDraft === null || onCancelShapeDraft === void 0 ? void 0 : onCancelShapeDraft(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
-                                color: "#ccc",
+                    } }, { 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",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
                                 minWidth: 0,
                                 py: 0.25,
-                                px: 0.75,
-                                "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Cancel" })) })), _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply shape", onClick: function () { return onApplyShapeDraft === null || onApplyShapeDraft === void 0 ? void 0 : onApplyShapeDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                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: {
                                 color: "#c9a0e8",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
@@ -93,5 +68,13 @@ export default function DrawColorPlatte(_a) {
                                 py: 0.25,
                                 px: 0.75,
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Apply" })) }))] })))] })));
+                            } }, { children: "Apply" })) }))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply shape", onClick: function () { return onApplyShapeDraft === null || onApplyShapeDraft === void 0 ? void 0 : onApplyShapeDraft(); }, 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" })) })) })))] })));
 }

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, onCancelPenDraft: props.onCancelPenDraft, 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, onCancelShapeDraft: props.onCancelShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, shapeDraftActive: props.shapeDraftActive && drawShapeTool === "ellipse", onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: __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, 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 () {
                                                 props.nv.clearDrawing();

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

@@ -49,6 +49,18 @@ export function polylineDraftFromNv(nv: any, { filled }?: {
 /** 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;
+/**
+ * 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.
+ */
+export function capturePenDraftFromClick(nv: any): {
+    kind: string;
+    baseBitmap: Uint8Array;
+    axCorSag: number;
+    penValue: number;
+    strokeVoxels: [number, number, number][];
+    bounds: object;
+} | null;
 export function cancelPenDraft(nv: any, draft: any): void;
 export type PenDraftKind = 'polyline' | 'freehand';
 export type PenDraft = {

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

@@ -18,8 +18,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { translatePt } from "./shapeDraftUtils";
+import { translatePt, floodFillClusterFromVox, eraseClusterFromBitmap, inferAxCorSagFromBounds, } from "./shapeDraftUtils";
 import { NI_PEN_TYPE } from "./niivuePenType";
+import { voxFromMouse } from "./polylinePenUtils";
 /** @typedef {'polyline' | 'freehand'} PenDraftKind */
 /**
  * @typedef {Object} PenDraft
@@ -265,6 +266,28 @@ export function applyPenDraft(nv, draft) {
         nv.onDrawingChanged("draw");
     }
 }
+/**
+ * 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.
+ */
+export function capturePenDraftFromClick(nv) {
+    var seedVox = voxFromMouse(nv);
+    var cluster = floodFillClusterFromVox(nv, seedVox);
+    if (!cluster)
+        return null;
+    var label = cluster.label, visited = cluster.visited, voxels = cluster.voxels, bounds = cluster.bounds;
+    var x1 = bounds.x1, y1 = bounds.y1, z1 = bounds.z1, x2 = bounds.x2, y2 = bounds.y2, z2 = bounds.z2;
+    var baseBitmap = eraseClusterFromBitmap(nv.drawBitmap, visited);
+    var axCorSag = inferAxCorSagFromBounds(x1, y1, z1, x2, y2, z2, nv.drawPenAxCorSag >= 0 ? nv.drawPenAxCorSag : 0);
+    return {
+        kind: "freehand",
+        baseBitmap: baseBitmap,
+        axCorSag: axCorSag,
+        penValue: label,
+        strokeVoxels: voxels,
+        bounds: bounds
+    };
+}
 export function cancelPenDraft(nv, draft) {
     if (draft === null || draft === void 0 ? void 0 : draft.baseBitmap) {
         nv.drawBitmap.set(draft.baseBitmap);

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

@@ -49,6 +49,18 @@ export function captureDeferredShapeDraft(nv: any): {
     baseBitmap: Uint8Array | null;
 };
 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.
+ * @returns {{ label: number, visited: Set<number>, voxels: [number,number,number][], bounds: object } | null}
+ */
+export function floodFillClusterFromVox(nv: any, seedVox: any): {
+    label: number;
+    visited: Set<number>;
+    voxels: [number, number, number][];
+    bounds: object;
+} | null;
+export function eraseClusterFromBitmap(bitmap: any, visited: any): Uint8Array;
 /**
  * When the user clicks on an existing filled ROI while the rectangle/ellipse tool
  * is active (but no draft is currently open), flood-fill the clicked cluster to

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

@@ -197,7 +197,7 @@ function decodeVoxelIndex(idx, dx, dy) {
     var x = rem % dx;
     return [x, y, z];
 }
-function inferAxCorSagFromBounds(x1, y1, z1, x2, y2, z2, fallback) {
+export function inferAxCorSagFromBounds(x1, y1, z1, x2, y2, z2, fallback) {
     if (fallback === void 0) { fallback = 0; }
     var spanX = x2 - x1;
     var spanY = y2 - y1;
@@ -221,7 +221,7 @@ function sliceKey(axCorSag, x, y, z) {
  * Flood-fill a connected voxel cluster from a seed.
  * @returns {{ label: number, visited: Set<number>, voxels: [number,number,number][], bounds: object } | null}
  */
-function floodFillClusterFromVox(nv, seedVox) {
+export function floodFillClusterFromVox(nv, seedVox) {
     var _a;
     var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
     if (!dims || !nv.drawBitmap || !seedVox)
@@ -281,7 +281,7 @@ function floodFillClusterFromVox(nv, seedVox) {
         bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 }
     };
 }
-function eraseClusterFromBitmap(bitmap, visited) {
+export function eraseClusterFromBitmap(bitmap, visited) {
     var next = new Uint8Array(bitmap);
     visited.forEach(function (idx) {
         next[idx] = 0;

package/package.json

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