cloudmr-ux 4.7.4 → 4.7.6

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

@@ -125,7 +125,7 @@ export function CloudMrNiivuePanel(props) {
         if (tool === "pen") {
             nv.opts.polylinePenMode = penMode === "polyline";
             nv.opts.isFilledPen = penMode === "freehand";
-            nv.opts.deferFreehandCommit = penMode === "freehand";
+            nv.opts.deferFreehandCommit = false;
         }
         else {
             nv.opts.polylinePenMode = false;
@@ -195,7 +195,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

@@ -63,7 +63,7 @@ import { SettingsPanel } from './SettingsPanel';
 import { NumberPicker } from './NumberPicker';
 import { ColorPicker } from './ColorPicker';
 import { LayersPanel } from './LayersPanel';
-import { applyPenDraft, cancelPenDraft, fillPolylineDraft, unfillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, registerAppliedPolyline, restoreCommittedPolyline, collectPolylineAppliedVoxelIndices, } from './penDraftUtils';
+import { applyPenDraft, cancelPenDraft, captureFreehandDraft, fillPolylineDraft, unfillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, registerAppliedPolyline, restoreCommittedPolyline, collectPolylineAppliedVoxelIndices, } from './penDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -593,7 +593,7 @@ export default function CloudMrNiivueViewer(props) {
             }
         }
         else if (drawShapeToolRef.current === "pen") {
-            nv.opts.deferFreehandCommit = penDrawModeRef.current === "freehand";
+            nv.opts.deferFreehandCommit = false;
             nv.opts.polylinePenMode = penDrawModeRef.current === "polyline";
             nv.opts.isFilledPen = penDrawModeRef.current === "freehand";
         }
@@ -821,16 +821,42 @@ export default function CloudMrNiivueViewer(props) {
         }
     }
     function syncPenDrawMode(mode) {
-        var _a;
+        var _a, _b;
+        var prevMode = penDrawModeRef.current;
+        // Commit an in-progress freehand before switching to polyline so it stays
+        // marked as pen (kind 2) and is not misidentified as a shape on click.
+        if (prevMode === "freehand" && mode === "polyline") {
+            var draft = penDraftRef.current;
+            if ((draft === null || draft === void 0 ? void 0 : draft.kind) === "freehand") {
+                applyPenDraft(nv, draft);
+                markPenVoxelKind(draft, 2);
+                setPenDraft(null);
+                penDraftRef.current = null;
+                nv._cloudMrPenDraftActive = false;
+            }
+            else if (nv._cloudMrFreehandSessionStartBitmap) {
+                var axCorSag = nv._cloudMrFreehandAxCorSag >= 0 ? nv._cloudMrFreehandAxCorSag : nv.drawPenAxCorSag;
+                var captured = captureFreehandDraft(nv, nv._cloudMrFreehandSessionStartBitmap, axCorSag);
+                nv._cloudMrFreehandSessionStartBitmap = null;
+                if (captured)
+                    markPenVoxelKind(captured, 2);
+            }
+        }
+        if (mode === "freehand") {
+            (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            if (((_b = penDraftRef.current) === null || _b === void 0 ? void 0 : _b.kind) === "polyline") {
+                cancelPenDraft(nv, penDraftRef.current);
+                setPenDraft(null);
+                penDraftRef.current = null;
+                nv._cloudMrPenDraftActive = false;
+                setPolylineVertexCount(0);
+            }
+        }
         setPenDrawMode(mode);
         penDrawModeRef.current = mode;
         nv.opts.polylinePenMode = mode === "polyline";
         nv.opts.isFilledPen = mode === "freehand";
-        nv.opts.deferFreehandCommit =
-            drawShapeToolRef.current === "pen" && mode === "freehand";
-        if (mode === "freehand") {
-            (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
-        }
+        nv.opts.deferFreehandCommit = false;
     }
     function cancelPenDraftHandler() {
         var _a;
@@ -885,7 +911,7 @@ export default function CloudMrNiivueViewer(props) {
             var mode = penDrawModeRef.current;
             nv.opts.polylinePenMode = mode === "polyline";
             nv.opts.isFilledPen = mode === "freehand";
-            nv.opts.deferFreehandCommit = mode === "freehand";
+            nv.opts.deferFreehandCommit = false;
             nvSetDrawingEnabled(true);
         }
         else {
@@ -916,6 +942,17 @@ export default function CloudMrNiivueViewer(props) {
     function cancelPolylineDraft() {
         cancelPenDraftHandler();
     }
+    nv.onShapeCommitted = function (draft) {
+        nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+        markShapeVoxelKind(draft);
+        setDrawingChanged(true);
+        resampleImage();
+    };
+    nv.onFreehandCommitted = function (draft) {
+        markPenVoxelKind(draft, 2);
+        setDrawingChanged(true);
+        resampleImage();
+    };
     nv.onPenDraftReady = function (draft) {
         setPenDraft(draft);
         penDraftRef.current = draft;
@@ -1657,6 +1694,7 @@ export default function CloudMrNiivueViewer(props) {
         onCancelPenDraft: cancelPenDraftHandler,
         onFillPenDraft: fillPolylineDraftHandler,
         penDraftActive: penDraft != null,
+        penDraftKind: penDraft === null || penDraft === void 0 ? void 0 : penDraft.kind,
         penDraftFilled: (penDraft === null || penDraft === void 0 ? void 0 : penDraft.filled) === true,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize,

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

@@ -25,6 +25,7 @@ import {
   captureFreehandDraft,
   capturePenDraftFromClick,
   capturePolylineDraftFromClick,
+  isFreehandPenActive,
   isRegisteredPolylineClick,
   redrawFreehandDraft,
   redrawPolylineDraft,
@@ -537,6 +538,19 @@ Niivue.prototype.drawPenFilled = function () {
         return;
     }
     this.drawAddUndoBitmap()
+    if (this._cloudMrFreehandSessionStartBitmap && isFreehandPenActive(this)) {
+        const axCorSag =
+            this.drawPenAxCorSag >= 0 ? this.drawPenAxCorSag : this._cloudMrFreehandAxCorSag;
+        const draft = captureFreehandDraft(
+            this,
+            this._cloudMrFreehandSessionStartBitmap,
+            axCorSag,
+        );
+        this._cloudMrFreehandSessionStartBitmap = null;
+        if (draft && typeof this.onFreehandCommitted === "function") {
+            this.onFreehandCommitted(draft);
+        }
+    }
     // Post-processing to hide hidden voxels
     this.hiddenBitmap = new Uint8Array(this.drawBitmap.length);
     for (let i = 0; i < this.drawBitmap.length; i++) {
@@ -1506,6 +1520,28 @@ function clickedVoxelToolKind(nv) {
   return bitmap[idx] || 0;
 }
 
+/**
+ * Re-open an applied ROI for editing based on stored (or inferred) tool kind.
+ * Unmarked pen strokes (kind 0) must try pen reopen before shape inference —
+ * otherwise freehand blobs get misclassified as ellipse/rectangle shapes.
+ */
+function cloudMrTryReopenDraftOnClick(nv) {
+  if (nv._cloudMrShapeDraftActive || nv._cloudMrPenDraftActive) return;
+  if (!isClickWithoutDrag(nv.uiData)) return;
+
+  const kind = clickedVoxelToolKind(nv);
+  if (kind === 1) {
+    cloudMrTryReopenShapeDraftOnClick(nv);
+    return;
+  }
+  if (kind === 2 || kind === 3) {
+    cloudMrTryReopenPenDraftOnClick(nv);
+    return;
+  }
+  if (cloudMrTryReopenPenDraftOnClick(nv)) return;
+  cloudMrTryReopenShapeDraftOnClick(nv);
+}
+
 /**
  * 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).
@@ -1569,12 +1605,12 @@ Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
   if (e.button === RIGHT_MOUSE_BUTTON && cloudMrTryApplyDraftOnRightClick(this, e)) {
     return;
   }
-  if (shouldDeferFreehandCommit(this) && this.drawBitmap) {
+  if (isFreehandPenActive(this) && this.drawBitmap) {
     this._cloudMrFreehandSessionStartBitmap = this.drawBitmap.slice();
     this._cloudMrFreehandAxCorSag = -1;
   }
   _mouseDownListener.call(this, e);
-  if (shouldDeferFreehandCommit(this) && this._cloudMrFreehandSessionStartBitmap) {
+  if (isFreehandPenActive(this) && this._cloudMrFreehandSessionStartBitmap) {
     const axCorSag = axCorSagFromMouse(this);
     if (axCorSag >= 0) {
       this._cloudMrFreehandAxCorSag = axCorSag;
@@ -1637,22 +1673,20 @@ Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
   }
 
   if (!pendingDraft?.baseBitmap) {
-    if (!cloudMrTryReopenShapeDraftOnClick(this)) {
-      cloudMrTryReopenPenDraftOnClick(this);
-    }
+    cloudMrTryReopenDraftOnClick(this);
     return;
   }
   if (isDraftTooSmall(pendingDraft.ptA, pendingDraft.ptB)) {
     this.drawBitmap.set(pendingDraft.baseBitmap);
     this.refreshDrawing(true, false);
     this.drawScene();
-    if (!cloudMrTryReopenShapeDraftOnClick(this)) {
-      cloudMrTryReopenPenDraftOnClick(this);
-    }
+    cloudMrTryReopenDraftOnClick(this);
     return;
   }
   this._cloudMrSuppressDrawingChangedMouseUp = true;
-  if (typeof this.onShapeDraftReady === "function") {
+  if (typeof this.onShapeCommitted === "function") {
+    this.onShapeCommitted(pendingDraft);
+  } else if (typeof this.onShapeDraftReady === "function") {
     this.onShapeDraftReady(pendingDraft);
   }
 };

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: import('./penDraftUtils').PenDraft, 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;
+    draft: import('./penDraftUtils').PenDraft;
+    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,14 +29,17 @@ function cloneFreehandDraft(draft) {
 }
 /**
  * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
+ * @param {{ nv: any, draft: import('./penDraftUtils').PenDraft, 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;
     var onPointerMoveRef = useRef(null);
     var finishDragRef = useRef(null);
+    var onApplyDraftRef = useRef(onApplyDraft);
+    onApplyDraftRef.current = onApplyDraft;
     var _b = useState(0), setTick = _b[1];
     var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
     useEffect(function () {
@@ -109,6 +112,8 @@ export function PenDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var _a, _b;
+        var hadDrag = (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.didMove;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -116,11 +121,15 @@ export function PenDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        if (hadDrag) {
+            (_b = onApplyDraftRef.current) === null || _b === void 0 ? void 0 : _b.call(onApplyDraftRef);
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;
         if (!drag)
             return;
+        drag.didMove = true;
         event.preventDefault();
         var canvas = nv.canvas || document.getElementById("niiCanvas");
         if (!canvas)
@@ -154,6 +163,7 @@ export function PenDraftOverlay(_a) {
             mode: mode,
             cornerIndex: cornerIndex,
             kind: current.kind,
+            didMove: false,
             startClientX: event.clientX,
             startClientY: event.clientY,
             startDraft: 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,16 +25,18 @@ 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;
     var onPointerMoveRef = useRef(null);
     var finishDragRef = useRef(null);
+    var onApplyDraftRef = useRef(onApplyDraft);
+    onApplyDraftRef.current = onApplyDraft;
     var _c = useState(0), setTick = _c[1];
     var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
     useEffect(function () {
@@ -84,6 +86,8 @@ export function ShapeDraftOverlay(_a) {
         onDraftChange(nextDraft);
     }, [nv, onDraftChange]);
     finishDragRef.current = function () {
+        var _a, _b;
+        var hadDrag = (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.didMove;
         dragRef.current = null;
         if (onPointerMoveRef.current) {
             window.removeEventListener("pointermove", onPointerMoveRef.current);
@@ -91,12 +95,16 @@ export function ShapeDraftOverlay(_a) {
         if (finishDragRef.current) {
             window.removeEventListener("pointerup", finishDragRef.current);
         }
+        if (hadDrag) {
+            (_b = onApplyDraftRef.current) === null || _b === void 0 ? void 0 : _b.call(onApplyDraftRef);
+        }
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;
         var currentDraft = draftRef.current;
         if (!drag || !currentDraft)
             return;
+        drag.didMove = true;
         event.preventDefault();
         if (drag.mode === "move") {
             var canvas = nv.canvas || document.getElementById("niiCanvas");
@@ -124,6 +132,7 @@ export function ShapeDraftOverlay(_a) {
         dragRef.current = {
             mode: mode,
             cornerIndex: cornerIndex,
+            didMove: false,
             startClientX: event.clientX,
             startClientY: event.clientY,
             startPtA: __spreadArray([], draft.ptA, 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, penDraftFilled, onApplyPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, penDraftKind, 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;
+    penDraftKind: any;
     penDraftFilled?: boolean | undefined;
     onApplyPenDraft: any;
     onFillPenDraft: any;

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, _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;
+    var expanded = _a.expanded, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, _b = _a.showPenModes, showPenModes = _b === void 0 ? false : _b, _c = _a.penDrawMode, penDrawMode = _c === void 0 ? "freehand" : _c, onPenDrawModeChange = _a.onPenDrawModeChange, _d = _a.polylineVertexCount, polylineVertexCount = _d === void 0 ? 0 : _d, _e = _a.penDraftActive, penDraftActive = _e === void 0 ? false : _e, penDraftKind = _a.penDraftKind, _f = _a.penDraftFilled, penDraftFilled = _f === void 0 ? false : _f, onApplyPenDraft = _a.onApplyPenDraft, 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,7 +53,10 @@ 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: penDraftFilled
+                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each vertex to draw connected line segments" }))), showPenModes &&
+                penDraftActive &&
+                (penDrawMode === "polyline" || penDraftKind === "freehand") &&
+                expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "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",

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, 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
+                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, showPenModes: true, penDrawMode: props.penDrawMode, onPenDrawModeChange: props.onPenDrawModeChange, polylineVertexCount: props.polylineVertexCount, onCancelPolyline: props.onCancelPolyline, penDraftActive: props.penDraftActive, penDraftKind: props.penDraftKind, penDraftFilled: props.penDraftFilled, onApplyPenDraft: props.onApplyPenDraft, 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/package.json

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