cloudmr-ux 4.6.0 → 4.6.2

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

@@ -186,7 +186,7 @@ export function CloudMrNiivuePanel(props) {
                                     left: 0,
                                     width: "100%",
                                     height: "100%"
-                                } }), props.shapeDraft && (_jsx(ShapeDraftOverlay, { nv: props.nv, draft: props.shapeDraft, onDraftChange: props.onShapeDraftChange, overlayKey: props.mms })), props.penDraft && (_jsx(PenDraftOverlay, { nv: props.nv, draft: props.penDraft, onDraftChange: props.onPenDraftChange, overlayKey: props.mms }))] }))] })), _jsxs(Box, __assign({ sx: {
+                                } }), props.shapeDraft && (_jsx(ShapeDraftOverlay, { nv: props.nv, draft: props.shapeDraft, onDraftChange: props.onShapeDraftChange, onApplyDraft: props.onApplyShapeDraft, overlayKey: props.mms })), props.penDraft && (_jsx(PenDraftOverlay, { nv: props.nv, draft: props.penDraft, onDraftChange: props.onPenDraftChange, onApplyDraft: props.onApplyPenDraft, overlayKey: props.mms }))] }))] })), _jsxs(Box, __assign({ sx: {
                     width: {
                         xs: "100%",
                         md: "35%"

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

@@ -832,6 +832,14 @@ export default function CloudMrNiivueViewer(props) {
             (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
         }
     }
+    function syncActiveDraftRefs() {
+        nv._cloudMrActiveShapeDraft = shapeDraftRef.current;
+        nv._cloudMrActivePenDraft = penDraftRef.current;
+    }
+    function clearActiveDraftRefs() {
+        nv._cloudMrActiveShapeDraft = null;
+        nv._cloudMrActivePenDraft = null;
+    }
     function cancelPenDraftHandler() {
         var _a;
         var draft = penDraftRef.current;
@@ -845,6 +853,7 @@ export default function CloudMrNiivueViewer(props) {
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
+        clearActiveDraftRefs();
         if (drawShapeToolRef.current === "pen") {
             nvSetDrawingEnabled(true);
         }
@@ -862,6 +871,7 @@ export default function CloudMrNiivueViewer(props) {
         setPenDraft(null);
         penDraftRef.current = null;
         nv._cloudMrPenDraftActive = false;
+        clearActiveDraftRefs();
         setDrawingChanged(true);
         if (drawShapeToolRef.current === "pen") {
             nvSetDrawingEnabled(true);
@@ -878,6 +888,7 @@ export default function CloudMrNiivueViewer(props) {
     function onPenDraftChange(draft) {
         setPenDraft(draft);
         penDraftRef.current = draft;
+        syncActiveDraftRefs();
         if (draft.kind === "polyline") {
             syncPolylineDraftToNv(nv, draft);
         }
@@ -889,6 +900,7 @@ export default function CloudMrNiivueViewer(props) {
         setPenDraft(draft);
         penDraftRef.current = draft;
         nv._cloudMrPenDraftActive = true;
+        syncActiveDraftRefs();
         nvSetDrawingEnabled(false);
     };
     nv.onPolylineChange = function (count) {
@@ -903,11 +915,13 @@ export default function CloudMrNiivueViewer(props) {
             if (draft) {
                 setPenDraft(draft);
                 penDraftRef.current = draft;
+                syncActiveDraftRefs();
             }
         }
         else if (((_b = penDraftRef.current) === null || _b === void 0 ? void 0 : _b.kind) === "polyline") {
             setPenDraft(null);
             penDraftRef.current = null;
+            syncActiveDraftRefs();
         }
     };
     function cancelShapeDraft() {
@@ -920,6 +934,7 @@ export default function CloudMrNiivueViewer(props) {
         setShapeDraft(null);
         shapeDraftRef.current = null;
         nv._cloudMrShapeDraftActive = false;
+        clearActiveDraftRefs();
         if (drawShapeToolRef.current) {
             nvSetDrawingEnabled(true);
         }
@@ -932,6 +947,7 @@ export default function CloudMrNiivueViewer(props) {
         setShapeDraft(null);
         shapeDraftRef.current = null;
         nv._cloudMrShapeDraftActive = false;
+        clearActiveDraftRefs();
         if (drawShapeToolRef.current) {
             nvSetDrawingEnabled(true);
         }
@@ -940,11 +956,13 @@ export default function CloudMrNiivueViewer(props) {
     function onShapeDraftChange(draft) {
         setShapeDraft(draft);
         shapeDraftRef.current = draft;
+        syncActiveDraftRefs();
     }
     nv.onShapeDraftReady = function (draft) {
         setShapeDraft(draft);
         shapeDraftRef.current = draft;
         nv._cloudMrShapeDraftActive = true;
+        syncActiveDraftRefs();
         nvSetDrawingEnabled(false);
     };
     nv.onApplyActiveDraft = function () {
@@ -961,32 +979,6 @@ export default function CloudMrNiivueViewer(props) {
     React.useEffect(function () {
         nv._cloudMrShapeDraftActive = shapeDraft != null;
     }, [shapeDraft]);
-    React.useEffect(function () {
-        if (!shapeDraft && !penDraft) {
-            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);
-            }
-        };
-        canvas.addEventListener("mousedown", onMouseDown, true);
-        canvas.addEventListener("contextmenu", applyOnRightClick, true);
-        return function () {
-            canvas.removeEventListener("mousedown", onMouseDown, true);
-            canvas.removeEventListener("contextmenu", applyOnRightClick, true);
-        };
-    }, [shapeDraft, penDraft]);
     React.useEffect(function () {
         if (!shapeDraft && !penDraft) {
             return undefined;
@@ -1000,16 +992,6 @@ export default function CloudMrNiivueViewer(props) {
                 else if (penDraft) {
                     cancelPenDraftHandler();
                 }
-                return;
-            }
-            if (event.key === "Enter") {
-                event.preventDefault();
-                if (shapeDraft) {
-                    applyShapeDraft();
-                }
-                else if (penDraft) {
-                    applyPenDraftHandler();
-                }
             }
         };
         window.addEventListener("keydown", onKeyDown);

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

@@ -4,9 +4,13 @@
 import { Niivue, NVImage, NVImageFromUrlOptions } from "@niivue/niivue";
 import {
   captureDeferredShapeDraft,
+  captureShapeDraftFromClick,
   isDraftTooSmall,
+  isVoxelPartOfDraft,
+  redrawDraftShape,
   shouldDeferShapeCommit,
 } from "./shapeDraftUtils.js";
+import { NI_PEN_TYPE } from "./niivuePenType.js";
 import {
   addPolylineVertex,
   axCorSagFromMouse,
@@ -19,6 +23,9 @@ import {
 } from "./polylinePenUtils.js";
 import {
   captureFreehandDraft,
+  capturePenDraftFromClick,
+  isPenDrawToolActive,
+  redrawFreehandDraft,
   shouldDeferFreehandCommit,
 } from "./penDraftUtils.js";
 
@@ -1465,29 +1472,93 @@ Niivue.prototype.cloudMrResetPolyline = function cloudMrResetPolyline() {
   resetPolylineState(this);
 };
 
-const RIGHT_MOUSE_BUTTON = 2;
-
 function cloudMrHasApplyableDraft(nv) {
   return !!(nv._cloudMrShapeDraftActive || nv._cloudMrPenDraftActive);
 }
 
-function cloudMrTryApplyDraftOnRightClick(nv, event) {
-  if (!cloudMrHasApplyableDraft(nv)) {
+function getActiveDraft(nv) {
+  if (nv._cloudMrPenDraftActive && nv._cloudMrActivePenDraft) {
+    return nv._cloudMrActivePenDraft;
+  }
+  if (nv._cloudMrShapeDraftActive && nv._cloudMrActiveShapeDraft) {
+    return nv._cloudMrActiveShapeDraft;
+  }
+  return null;
+}
+
+function isClickOnActiveDraft(nv) {
+  const draft = getActiveDraft(nv);
+  if (!draft) return false;
+  const vox = voxFromMouse(nv);
+  if (!vox) return false;
+  return isVoxelPartOfDraft(nv, draft, vox);
+}
+
+/** Commit the active draft when the user clicks outside the ROI being edited. */
+function cloudMrTryApplyDraftOnClickAway(nv) {
+  if (!cloudMrHasApplyableDraft(nv) || !isClickWithoutDrag(nv.uiData)) {
+    return false;
+  }
+  if (isClickOnActiveDraft(nv)) {
     return false;
   }
-  event.preventDefault();
-  event.stopPropagation();
   if (typeof nv.onApplyActiveDraft === "function") {
+    nv._cloudMrSuppressDrawingChangedMouseUp = true;
     nv.onApplyActiveDraft();
   }
   return true;
 }
 
+/**
+ * When no draft is active and the user clicks an existing ROI, reconstruct a
+ * shape or pen draft so the bounding-box overlay reappears for re-editing.
+ */
+function cloudMrTryReopenDraftOnClick(nv) {
+  if (
+    nv._cloudMrShapeDraftActive ||
+    nv._cloudMrPenDraftActive ||
+    !isClickWithoutDrag(nv.uiData)
+  ) {
+    return false;
+  }
+
+  const penType = nv.opts.penType;
+  const isShapeTool =
+    nv.opts.deferShapeCommit &&
+    nv.opts.drawingEnabled &&
+    (penType === NI_PEN_TYPE.RECTANGLE || penType === NI_PEN_TYPE.ELLIPSE);
+  const isPenTool = isPenDrawToolActive(nv);
+
+  if (!isShapeTool && !isPenTool) {
+    return false;
+  }
+
+  if (isShapeTool) {
+    const reopenDraft = captureShapeDraftFromClick(nv);
+    if (!reopenDraft) return false;
+    redrawDraftShape(nv, reopenDraft);
+    nv._cloudMrSuppressDrawingChangedMouseUp = true;
+    if (typeof nv.onShapeDraftReady === "function") {
+      nv.onShapeDraftReady(reopenDraft);
+    }
+    return true;
+  }
+
+  const reopenDraft = capturePenDraftFromClick(nv);
+  if (!reopenDraft) return false;
+  redrawFreehandDraft(nv, reopenDraft);
+  nv._cloudMrSuppressDrawingChangedMouseUp = true;
+  if (typeof nv.onPenDraftReady === "function") {
+    nv.onPenDraftReady(reopenDraft);
+  }
+  if (nv.opts.polylinePenMode) {
+    resetPolylineState(nv);
+  }
+  return true;
+}
+
 const _mouseDownListener = Niivue.prototype.mouseDownListener;
 Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
-  if (e.button === RIGHT_MOUSE_BUTTON && cloudMrTryApplyDraftOnRightClick(this, e)) {
-    return;
-  }
   if (shouldDeferFreehandCommit(this) && this.drawBitmap) {
     this._cloudMrFreehandSessionStartBitmap = this.drawBitmap.slice();
     this._cloudMrFreehandAxCorSag = -1;
@@ -1551,17 +1622,30 @@ Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   _mouseUpListener.call(this);
 
   if (polylineClick) {
+    if (cloudMrTryReopenDraftOnClick(this)) return;
     addPolylineVertex(this);
     return;
   }
 
+  if (cloudMrHasApplyableDraft(this) && isClickWithoutDrag(this.uiData)) {
+    if (cloudMrTryApplyDraftOnClickAway(this)) {
+      cloudMrTryReopenDraftOnClick(this);
+      return;
+    }
+    if (isClickOnActiveDraft(this)) {
+      return;
+    }
+  }
+
   if (!pendingDraft?.baseBitmap) {
+    cloudMrTryReopenDraftOnClick(this);
     return;
   }
   if (isDraftTooSmall(pendingDraft.ptA, pendingDraft.ptB)) {
     this.drawBitmap.set(pendingDraft.baseBitmap);
     this.refreshDrawing(true, false);
     this.drawScene();
+    cloudMrTryReopenDraftOnClick(this);
     return;
   }
   this._cloudMrSuppressDrawingChangedMouseUp = true;

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

@@ -1,10 +1,12 @@
 /**
  * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
+ * @param {{ nv: any, draft: any, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
-export function PenDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
+export function PenDraftOverlay({ nv, draft, onDraftChange, onApplyDraft, overlayKey }: {
     nv: any;
     draft: any;
-    onDraftChange: any;
-    overlayKey: any;
+    onDraftChange: (d: any) => void;
+    onApplyDraft?: (() => void) | undefined;
+    overlayKey?: unknown;
 }): import("react/jsx-runtime").JSX.Element | null;
 export default PenDraftOverlay;

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

@@ -29,9 +29,10 @@ function cloneFreehandDraft(draft) {
 }
 /**
  * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
+ * @param {{ nv: any, draft: any, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
 export function PenDraftOverlay(_a) {
-    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
+    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
@@ -109,6 +110,7 @@ export function PenDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var hadDrag = dragRef.current != null;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -116,6 +118,10 @@ export function PenDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        // Auto-apply as soon as the user releases the handle after a move/resize
+        if (hadDrag && onApplyDraft) {
+            onApplyDraft();
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;

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

@@ -1,11 +1,12 @@
 /**
  * Overlay handles for adjusting a rectangle/ellipse draft before commit.
- * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, overlayKey?: unknown }} props
+ * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
-export function ShapeDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
+export function ShapeDraftOverlay({ nv, draft, onDraftChange, onApplyDraft, overlayKey }: {
     nv: any;
     draft: import('./shapeDraftUtils').ShapeDraft;
     onDraftChange: (d: any) => void;
+    onApplyDraft?: (() => void) | undefined;
     overlayKey?: unknown;
 }): import("react/jsx-runtime").JSX.Element | null;
 export default ShapeDraftOverlay;

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

@@ -25,11 +25,11 @@ var HANDLE_SIZE = 10;
 var ACCENT = "#580f8b";
 /**
  * Overlay handles for adjusting a rectangle/ellipse draft before commit.
- * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, overlayKey?: unknown }} props
+ * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, onApplyDraft?: () => void, overlayKey?: unknown }} props
  */
 export function ShapeDraftOverlay(_a) {
     var _b;
-    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
+    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, onApplyDraft = _a.onApplyDraft, overlayKey = _a.overlayKey;
     var dragRef = useRef(null);
     var draftRef = useRef(draft);
     draftRef.current = draft;
@@ -84,6 +84,7 @@ export function ShapeDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var hadDrag = dragRef.current != null;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -91,6 +92,10 @@ export function ShapeDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        // Auto-apply as soon as the user releases the handle after a move/resize
+        if (hadDrag && onApplyDraft) {
+            onApplyDraft();
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;

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, onCancelPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onCancelShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -7,12 +7,10 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     onPenDrawModeChange: any;
     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,13 @@ 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 Cancel while adjusting.
+ * Shapes are applied automatically on mouse release.
  */
 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 FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
 import { BrushSizeSlider } from "./BrushSizeSlider";
 var FILLED_COLORS = [
     { sx: { color: "red" } },
@@ -37,7 +38,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, 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, onCancelShapeDraft = _a.onCancelShapeDraft;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -62,36 +63,22 @@ export default function DrawColorPlatte(_a) {
                                 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",
-                                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: {
+                            } }, { children: "Cancel" })) })), penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: "Fill interior (keeps outline editable until release)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, startIcon: _jsx(FormatColorFillIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
                                 color: "#c9a0e8",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
                                 minWidth: 0,
                                 py: 0.25,
                                 px: 0.75,
+                                ml: "auto",
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Apply" })) }))] })))] })));
+                            } }, { children: "Fill" })) })))] }))), shapeDraftActive && expanded && (_jsx(Stack, __assign({ direction: "row", alignItems: "center", 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",
+                            fontSize: ACTION_FONT_SIZE,
+                            textTransform: "none",
+                            minWidth: 0,
+                            py: 0.25,
+                            px: 0.75,
+                            "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
+                        } }, { children: "Cancel" })) })) })))] })));
 }

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

@@ -13,6 +13,27 @@
 export function isEraserActive(nv: any): any;
 export function isFreehandPenActive(nv: any): any;
 export function shouldDeferFreehandCommit(nv: any): any;
+export function isPenDrawToolActive(nv: any): any;
+/**
+ * Re-enter pen edit mode when clicking an existing freehand/polyline ROI.
+ * Reopens as a freehand draft (move via bounding box) since vertex data is
+ * not stored in the bitmap alone.
+ */
+export function capturePenDraftFromClick(nv: any): {
+    kind: string;
+    baseBitmap: Uint8Array;
+    axCorSag: any;
+    penValue: number;
+    strokeVoxels: [number, number, number][];
+    bounds: {
+        x1: any;
+        y1: any;
+        z1: any;
+        x2: any;
+        y2: any;
+        z2: any;
+    };
+} | null;
 export function redrawPolylineDraft(nv: any, draft: any): void;
 export function translatePolylineVertices(vertices: any, delta: any): any;
 export function updatePolylineVertex(vertices: any, index: any, newVox: any): any;

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

@@ -18,7 +18,8 @@ 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, } from "./shapeDraftUtils";
+import { axCorSagFromMouse, voxFromMouse } from "./polylinePenUtils";
 import { NI_PEN_TYPE } from "./niivuePenType";
 /** @typedef {'polyline' | 'freehand'} PenDraftKind */
 /**
@@ -47,6 +48,34 @@ export function isFreehandPenActive(nv) {
 export function shouldDeferFreehandCommit(nv) {
     return !!nv.opts.deferFreehandCommit && isFreehandPenActive(nv);
 }
+export function isPenDrawToolActive(nv) {
+    return (nv.opts.drawingEnabled &&
+        nv.opts.penType === NI_PEN_TYPE.PEN &&
+        nv.opts.penValue > 0 &&
+        (nv.opts.deferFreehandCommit || nv.opts.polylinePenMode));
+}
+/**
+ * Re-enter pen edit mode when clicking an existing freehand/polyline ROI.
+ * Reopens as a freehand draft (move via bounding box) since vertex data is
+ * not stored in the bitmap alone.
+ */
+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 axCorSag = nv.drawPenAxCorSag >= 0 ? nv.drawPenAxCorSag : axCorSagFromMouse(nv);
+    return {
+        kind: "freehand",
+        baseBitmap: eraseClusterFromBitmap(nv.drawBitmap, visited),
+        axCorSag: axCorSag,
+        penValue: label,
+        strokeVoxels: voxels,
+        bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 }
+    };
+}
 export function redrawPolylineDraft(nv, draft) {
     var _a;
     if (!((_a = draft === null || draft === void 0 ? void 0 : draft.vertices) === null || _a === void 0 ? void 0 : _a.length) || !draft.baseBitmap)

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

@@ -49,6 +49,34 @@ export function captureDeferredShapeDraft(nv: any): {
     baseBitmap: Uint8Array | null;
 };
 export function shouldDeferShapeCommit(nv: any): any;
+/**
+ * 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;
+/** True when a voxel belongs to the live draft overlay (drawn on top of baseBitmap). */
+export function isVoxelPartOfDraft(nv: any, draft: any, seedVox: any): boolean;
+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
+ * reconstruct a ShapeDraft so the bounding-box overlay reappears for re-editing.
+ *
+ * Returns null if the click didn't land on a labeled voxel.
+ */
+export function captureShapeDraftFromClick(nv: any): {
+    ptA: any[];
+    ptB: any[];
+    penValue: number;
+    axCorSag: number;
+    penType: any;
+    baseBitmap: Uint8Array;
+} | null;
 export type ShapeDraftKind = 'rectangle' | 'ellipse';
 export type ShapeDraft = {
     ptA: [number, number, number];

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

@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { NI_PEN_TYPE } from "./niivuePenType";
+import { voxFromMouse } from "./polylinePenUtils";
 /** @typedef {'rectangle' | 'ellipse'} ShapeDraftKind */
 /**
  * @typedef {Object} ShapeDraft
@@ -186,3 +187,136 @@ export function shouldDeferShapeCommit(nv) {
         (penType === NI_PEN_TYPE.RECTANGLE || penType === NI_PEN_TYPE.ELLIPSE) &&
         nv.drawShapePreviewBitmap);
 }
+function voxelIndex(x, y, z, dx, dy) {
+    return x + y * dx + z * dx * dy;
+}
+function decodeVoxelIndex(idx, dx, dy) {
+    var z = Math.floor(idx / (dx * dy));
+    var rem = idx - z * dx * dy;
+    var y = Math.floor(rem / dx);
+    var x = rem % dx;
+    return [x, y, z];
+}
+function inferAxCorSagFromBounds(x1, y1, z1, x2, y2, z2, fallback) {
+    if (fallback === void 0) { fallback = 0; }
+    var spanX = x2 - x1;
+    var spanY = y2 - y1;
+    var spanZ = z2 - z1;
+    if (spanZ <= spanX && spanZ <= spanY)
+        return 0;
+    if (spanY <= spanX && spanY <= spanZ)
+        return 1;
+    if (spanX <= spanY && spanX <= spanZ)
+        return 2;
+    return fallback;
+}
+/**
+ * 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, seedVox) {
+    var _a;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims || !nv.drawBitmap || !seedVox)
+        return null;
+    var dx = dims[1];
+    var dy = dims[2];
+    var dz = dims[3];
+    var seedIdx = voxelIndex(seedVox[0], seedVox[1], seedVox[2], dx, dy);
+    var label = nv.drawBitmap[seedIdx];
+    if (!label)
+        return null;
+    var visited = new Set();
+    var queue = [seedIdx];
+    visited.add(seedIdx);
+    var voxels = [];
+    var x1 = Infinity;
+    var y1 = Infinity;
+    var z1 = Infinity;
+    var x2 = -Infinity;
+    var y2 = -Infinity;
+    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];
+        voxels.push([x, y, z]);
+        x1 = Math.min(x1, x);
+        y1 = Math.min(y1, y);
+        z1 = Math.min(z1, z);
+        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];
+            if (nx < 0 || ny < 0 || nz < 0 || nx >= dx || ny >= dy || nz >= dz)
+                continue;
+            var nIdx = voxelIndex(nx, ny, nz, dx, dy);
+            if (visited.has(nIdx) || nv.drawBitmap[nIdx] !== label)
+                continue;
+            visited.add(nIdx);
+            queue.push(nIdx);
+        }
+    }
+    if (!Number.isFinite(x1))
+        return null;
+    return {
+        label: label,
+        visited: visited,
+        voxels: voxels,
+        bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 }
+    };
+}
+/** True when a voxel belongs to the live draft overlay (drawn on top of baseBitmap). */
+export function isVoxelPartOfDraft(nv, draft, seedVox) {
+    var _a;
+    if (!(draft === null || draft === void 0 ? void 0 : draft.baseBitmap) || !(nv === null || nv === void 0 ? void 0 : nv.drawBitmap) || !seedVox)
+        return false;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims)
+        return false;
+    var dx = dims[1];
+    var dy = dims[2];
+    var idx = voxelIndex(seedVox[0], seedVox[1], seedVox[2], dx, dy);
+    return (nv.drawBitmap[idx] === draft.penValue &&
+        draft.baseBitmap[idx] !== draft.penValue);
+}
+export function eraseClusterFromBitmap(bitmap, visited) {
+    var next = new Uint8Array(bitmap);
+    visited.forEach(function (idx) {
+        next[idx] = 0;
+    });
+    return next;
+}
+/**
+ * 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
+ * reconstruct a ShapeDraft so the bounding-box overlay reappears for re-editing.
+ *
+ * Returns null if the click didn't land on a labeled voxel.
+ */
+export function captureShapeDraftFromClick(nv) {
+    var seedVox = voxFromMouse(nv);
+    var cluster = floodFillClusterFromVox(nv, seedVox);
+    if (!cluster)
+        return null;
+    var label = cluster.label, visited = cluster.visited, 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 {
+        ptA: [x1, y1, z1],
+        ptB: [x2, y2, z2],
+        penValue: label,
+        axCorSag: axCorSag,
+        penType: nv.opts.penType,
+        baseBitmap: baseBitmap
+    };
+}

package/package.json

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