cloudmr-ux 4.5.3 → 4.5.6

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

@@ -9,7 +9,7 @@ export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "rois" | "selectedR
     onCancelPolyline?: () => void;
     onApplyPenDraft?: () => void;
     onCancelPenDraft?: () => void;
-    onCloseFillPenDraft?: () => void;
+    onFillPenDraft?: () => void;
     penDraftActive?: boolean;
     shapeDraftActive?: boolean;
     onApplyShapeDraft?: () => void;
@@ -57,6 +57,7 @@ export interface CloudMrNiivuePanelProps {
         penValue: number;
         vertices?: [number, number, number][];
         strokeVoxels?: [number, number, number][];
+        filled?: boolean;
         bounds?: {
             x1: number;
             y1: number;

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, polylineDraftFromNv, syncPolylineDraftToNv, } from './penDraftUtils';
+import { applyPenDraft, cancelPenDraft, fillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, } from './penDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -777,13 +777,12 @@ export default function CloudMrNiivueViewer(props) {
             nvSetDrawingEnabled(true);
         }
     }
-    function applyPenDraftHandler(fillClosed) {
+    function applyPenDraftHandler() {
         var _a;
-        if (fillClosed === void 0) { fillClosed = false; }
         var draft = penDraftRef.current;
         if (!draft)
             return;
-        applyPenDraft(nv, draft, { fillClosed: fillClosed });
+        applyPenDraft(nv, draft);
         if (draft.kind === "polyline") {
             (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
             setPolylineVertexCount(0);
@@ -797,6 +796,13 @@ export default function CloudMrNiivueViewer(props) {
         }
         resampleImage();
     }
+    function fillPolylineDraftHandler() {
+        var draft = penDraftRef.current;
+        if (!draft || draft.kind !== "polyline" || draft.vertices.length < 3)
+            return;
+        var next = fillPolylineDraft(nv, draft);
+        onPenDraftChange(next);
+    }
     function onPenDraftChange(draft) {
         setPenDraft(draft);
         penDraftRef.current = draft;
@@ -814,16 +820,20 @@ export default function CloudMrNiivueViewer(props) {
         nvSetDrawingEnabled(false);
     };
     nv.onPolylineChange = function (count) {
-        var _a;
+        var _a, _b;
         setPolylineVertexCount(count);
         if (penDrawModeRef.current === "polyline" && count >= 2) {
-            var draft = polylineDraftFromNv(nv);
+            var prev = penDraftRef.current;
+            var preserveFill = (prev === null || prev === void 0 ? void 0 : prev.kind) === "polyline" &&
+                prev.filled &&
+                ((_a = prev.vertices) === null || _a === void 0 ? void 0 : _a.length) === count;
+            var draft = polylineDraftFromNv(nv, { filled: preserveFill });
             if (draft) {
                 setPenDraft(draft);
                 penDraftRef.current = draft;
             }
         }
-        else if (((_a = penDraftRef.current) === null || _a === void 0 ? void 0 : _a.kind) === "polyline") {
+        else if (((_b = penDraftRef.current) === null || _b === void 0 ? void 0 : _b.kind) === "polyline") {
             setPenDraft(null);
             penDraftRef.current = null;
         }
@@ -865,6 +875,46 @@ export default function CloudMrNiivueViewer(props) {
         nv._cloudMrShapeDraftActive = true;
         nvSetDrawingEnabled(false);
     };
+    nv.onApplyActiveDraft = function () {
+        if (shapeDraftRef.current) {
+            applyShapeDraft();
+        }
+        else if (penDraftRef.current) {
+            applyPenDraftHandler();
+        }
+    };
+    React.useEffect(function () {
+        nv._cloudMrPenDraftActive = penDraft != null;
+    }, [penDraft]);
+    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;
@@ -886,7 +936,7 @@ export default function CloudMrNiivueViewer(props) {
                     applyShapeDraft();
                 }
                 else if (penDraft) {
-                    applyPenDraftHandler(false);
+                    applyPenDraftHandler();
                 }
             }
         };
@@ -1391,9 +1441,9 @@ export default function CloudMrNiivueViewer(props) {
         onPenDrawModeChange: syncPenDrawMode,
         polylineVertexCount: polylineVertexCount,
         onCancelPolyline: cancelPolylineDraft,
-        onApplyPenDraft: function () { return applyPenDraftHandler(false); },
+        onApplyPenDraft: applyPenDraftHandler,
         onCancelPenDraft: cancelPenDraftHandler,
-        onCloseFillPenDraft: function () { return applyPenDraftHandler(true); },
+        onFillPenDraft: fillPolylineDraftHandler,
         penDraftActive: penDraft != null,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize
@@ -1412,7 +1462,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: function () { return applyPenDraftHandler(false); }, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })));
+                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: applyShapeDraft, onCancelShapeDraft: cancelShapeDraft, penDraft: penDraft, onPenDraftChange: onPenDraftChange, onApplyPenDraft: applyPenDraftHandler, onCancelPenDraft: cancelPenDraftHandler }, "".concat(selectedVolume))] })));
 }
 function niiToVolume(nii) {
     return {

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

@@ -1465,8 +1465,29 @@ 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)) {
+    return false;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  if (typeof nv.onApplyActiveDraft === "function") {
+    nv.onApplyActiveDraft();
+  }
+  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;
@@ -1480,6 +1501,15 @@ Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
   }
 };
 
+const _mouseContextMenuListener = Niivue.prototype.mouseContextMenuListener;
+Niivue.prototype.mouseContextMenuListener = function cloudMrMouseContextMenuListener(e) {
+  if (cloudMrHasApplyableDraft(this)) {
+    e.preventDefault();
+    return;
+  }
+  return _mouseContextMenuListener.call(this, e);
+};
+
 const _mouseClick = Niivue.prototype.mouseClick;
 Niivue.prototype.mouseClick = function cloudMrMouseClick(...args) {
   if (isPolylinePenActive(this)) {

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

@@ -1,5 +1,5 @@
 /**
- * Adjust handles for polyline (vertex drag) or freehand (bbox move/resize) drafts.
+ * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
  */
 export function PenDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
     nv: any;

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

@@ -20,12 +20,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { boundsToFreehandCorners, redrawFreehandDraft, redrawPolylineDraft, resizeFreehandDraft, syncPolylineDraftToNv, translateFreehandDraft, translatePolylineVertices, updatePolylineVertex, } from "./penDraftUtils";
-import { canvasDeltaToVoxDelta, clientToCanvasPos, translatePt, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
+import { boundsToFreehandCorners, redrawFreehandDraft, redrawPolylineDraft, syncPolylineDraftToNv, translateFreehandDraft, translatePolylineVertices, updatePolylineVertex, } from "./penDraftUtils";
+import { canvasDeltaToVoxDelta, clientToCanvasPos, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
 var HANDLE_SIZE = 10;
 var ACCENT = "#580f8b";
+function cloneFreehandDraft(draft) {
+    return __assign(__assign({}, draft), { strokeVoxels: draft.strokeVoxels.map(function (v) { return __spreadArray([], v, true); }), bounds: draft.bounds ? __assign({}, draft.bounds) : draft.bounds });
+}
 /**
- * Adjust handles for polyline (vertex drag) or freehand (bbox move/resize) drafts.
+ * Adjust handles for polyline (vertex drag) or freehand (move only) drafts.
  */
 export function PenDraftOverlay(_a) {
     var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
@@ -55,12 +58,10 @@ export function PenDraftOverlay(_a) {
         return boundsToFreehandCorners(draft.bounds, draft.axCorSag);
     }, [draft, isPolyline, overlayKey]);
     var cornerCss = useMemo(function () {
-        if (isPolyline)
-            return vertexCss;
-        return freehandCorners
-            .map(function (vox) { return voxToOverlayPos(nv, vox, draft.axCorSag); })
-            .filter(Boolean);
-    }, [draft === null || draft === void 0 ? void 0 : draft.axCorSag, freehandCorners, isPolyline, nv, overlayKey, vertexCss]);
+        if (!isPolyline)
+            return [];
+        return vertexCss;
+    }, [isPolyline, vertexCss]);
     var centerCss = useMemo(function () {
         var _a;
         if (!draft)
@@ -82,10 +83,13 @@ export function PenDraftOverlay(_a) {
         return null;
     }, [draft, isPolyline, nv, overlayKey]);
     var boxStyle = useMemo(function () {
-        if (cornerCss.length < 2)
+        var points = isPolyline ? cornerCss : freehandCorners
+            .map(function (vox) { return voxToOverlayPos(nv, vox, draft === null || draft === void 0 ? void 0 : draft.axCorSag); })
+            .filter(Boolean);
+        if (points.length < 2)
             return null;
-        var xs = cornerCss.map(function (p) { return p.x; });
-        var ys = cornerCss.map(function (p) { return p.y; });
+        var xs = points.map(function (p) { return p.x; });
+        var ys = points.map(function (p) { return p.y; });
         var left = Math.min.apply(Math, xs);
         var top = Math.min.apply(Math, ys);
         var width = Math.max.apply(Math, xs) - left;
@@ -93,7 +97,7 @@ export function PenDraftOverlay(_a) {
         if (width < 2 && height < 2)
             return null;
         return { left: left, top: top, width: Math.max(width, 2), height: Math.max(height, 2) };
-    }, [cornerCss]);
+    }, [cornerCss, draft === null || draft === void 0 ? void 0 : draft.axCorSag, freehandCorners, isPolyline, nv, overlayKey]);
     var applyDraft = useCallback(function (nextDraft) {
         if (nextDraft.kind === "polyline") {
             redrawPolylineDraft(nv, nextDraft);
@@ -115,50 +119,50 @@ export function PenDraftOverlay(_a) {
     };
     onPointerMoveRef.current = function (event) {
         var drag = dragRef.current;
-        var current = draftRef.current;
-        if (!drag || !current)
+        if (!drag)
             return;
         event.preventDefault();
+        var canvas = nv.canvas || document.getElementById("niiCanvas");
+        if (!canvas)
+            return;
+        var startCanvas = clientToCanvasPos(canvas, drag.startClientX, drag.startClientY);
+        var endCanvas = clientToCanvasPos(canvas, event.clientX, event.clientY);
+        var delta = canvasDeltaToVoxDelta(nv, startCanvas, endCanvas);
         if (drag.mode === "move") {
-            var canvas = nv.canvas || document.getElementById("niiCanvas");
-            if (!canvas)
-                return;
-            var startCanvas = clientToCanvasPos(canvas, drag.startClientX, drag.startClientY);
-            var endCanvas = clientToCanvasPos(canvas, event.clientX, event.clientY);
-            var delta = canvasDeltaToVoxDelta(nv, startCanvas, endCanvas);
-            if (current.kind === "polyline") {
-                applyDraft(__assign(__assign({}, current), { vertices: translatePolylineVertices(drag.startVertices, delta) }));
+            if (drag.kind === "polyline") {
+                applyDraft(__assign(__assign({}, drag.startDraft), { vertices: translatePolylineVertices(drag.startVertices, delta) }));
             }
             else {
-                applyDraft(translateFreehandDraft(current, delta));
+                applyDraft(translateFreehandDraft(drag.startFreehandDraft, delta));
             }
             return;
         }
         var vox = voxUnderClient(nv, event.clientX, event.clientY);
         if (!vox)
             return;
-        if (current.kind === "polyline") {
-            applyDraft(__assign(__assign({}, current), { vertices: updatePolylineVertex(drag.startVertices, drag.cornerIndex, vox) }));
-        }
-        else {
-            applyDraft(resizeFreehandDraft(current, drag.cornerIndex, vox));
-        }
+        applyDraft(__assign(__assign({}, drag.startDraft), { vertices: updatePolylineVertex(drag.startVertices, drag.cornerIndex, vox) }));
     };
     var startDrag = useCallback(function (event, mode, cornerIndex) {
         var _a, _b;
         if (cornerIndex === void 0) { cornerIndex = -1; }
         event.preventDefault();
         event.stopPropagation();
+        var current = draftRef.current;
+        if (!current)
+            return;
         dragRef.current = {
             mode: mode,
             cornerIndex: cornerIndex,
+            kind: current.kind,
             startClientX: event.clientX,
             startClientY: event.clientY,
-            startVertices: (_b = (_a = draft.vertices) === null || _a === void 0 ? void 0 : _a.map(function (v) { return __spreadArray([], v, true); })) !== null && _b !== void 0 ? _b : []
+            startDraft: current,
+            startVertices: (_b = (_a = current.vertices) === null || _a === void 0 ? void 0 : _a.map(function (v) { return __spreadArray([], v, true); })) !== null && _b !== void 0 ? _b : [],
+            startFreehandDraft: current.kind === "freehand" ? cloneFreehandDraft(current) : null
         };
         window.addEventListener("pointermove", onPointerMoveRef.current);
         window.addEventListener("pointerup", finishDragRef.current);
-    }, [draft.vertices]);
+    }, []);
     useEffect(function () { return function () {
         var _a;
         (_a = finishDragRef.current) === null || _a === void 0 ? void 0 : _a.call(finishDragRef);
@@ -196,6 +200,7 @@ export function PenDraftOverlay(_a) {
                     background: "rgba(88, 15, 139, 0.08)",
                     boxSizing: "border-box",
                     pointerEvents: "none"
-                } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: "Move shape" })), cornerCss.map(function (pos, i) { return (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "corner", i); }, style: __assign(__assign({}, handleStyle), { left: pos.x, top: pos.y, cursor: isPolyline ? "grab" : "nwse-resize" }), title: isPolyline ? "Move vertex" : "Resize shape" }, "handle-".concat(i))); })] })));
+                } }), centerCss && (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "move"); }, style: __assign(__assign({}, handleStyle), { left: centerCss.x, top: centerCss.y, cursor: "move", borderRadius: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6 }), title: "Move shape" })), isPolyline &&
+                cornerCss.map(function (pos, i) { return (_jsx("div", { role: "presentation", onPointerDown: function (e) { return startDrag(e, "corner", i); }, style: __assign(__assign({}, handleStyle), { left: pos.x, top: pos.y, cursor: "grab" }), title: "Move vertex" }, "handle-".concat(i))); })] })));
 }
 export default PenDraftOverlay;

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

@@ -152,13 +152,14 @@ export function ShapeDraftOverlay(_a) {
         boxSizing: "border-box",
         cursor: "pointer",
         zIndex: 3,
-        touchAction: "none"
+        touchAction: "none",
+        pointerEvents: "auto"
     };
     return (_jsxs("div", __assign({ style: {
             position: "absolute",
             inset: 0,
             zIndex: 2,
-            pointerEvents: "auto",
+            pointerEvents: "none",
             overflow: "hidden"
         }, "aria-label": "Adjust ROI shape" }, { children: [_jsx("div", { style: {
                     position: "absolute",

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, onCloseFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
+export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEnabled, showPenModes, penDrawMode, onPenDrawModeChange, polylineVertexCount, penDraftActive, onApplyPenDraft, onCancelPenDraft, onFillPenDraft, brushSize, updateBrushSize, shapeDraftActive, onApplyShapeDraft, onCancelShapeDraft, }: {
     expanded: any;
     updateDrawPen: any;
     setDrawingEnabled: any;
@@ -9,7 +9,7 @@ export default function DrawColorPlatte({ expanded, updateDrawPen, setDrawingEna
     penDraftActive?: boolean | undefined;
     onApplyPenDraft: any;
     onCancelPenDraft: any;
-    onCloseFillPenDraft: any;
+    onFillPenDraft: any;
     brushSize?: number | undefined;
     updateBrushSize: any;
     shapeDraftActive?: boolean | undefined;

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

@@ -37,7 +37,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, onCloseFillPenDraft = _a.onCloseFillPenDraft, _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, 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;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -62,14 +62,14 @@ 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: "Connect last point to first and fill" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "close and fill polyline", onClick: function () { return onCloseFillPenDraft === null || onCloseFillPenDraft === void 0 ? void 0 : onCloseFillPenDraft(); }, sx: {
+                            } }, { 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: "Close & fill" })) }))), _jsx(Tooltip, __assign({ title: "Apply (Enter)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                    } }, { children: "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",
@@ -85,7 +85,7 @@ export default function DrawColorPlatte(_a) {
                                 py: 0.25,
                                 px: 0.75,
                                 "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                            } }, { children: "Cancel" })) })), _jsx(Tooltip, __assign({ title: "Apply shape (Enter)" }, { 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" })) })), _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",

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

@@ -172,7 +172,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, onCloseFillPenDraft: props.onCloseFillPenDraft, 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: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_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 () {
+                                } }, { 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: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_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();
                                                 props.resampleImage();
                                                 props.setDrawingChanged(false);

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

@@ -8,19 +8,10 @@
  * @property {[number, number, number][]} [vertices]
  * @property {[number, number, number][]} [strokeVoxels]
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
+ * @property {boolean} [filled]
  */
 export function isFreehandPenActive(nv: any): any;
 export function shouldDeferFreehandCommit(nv: any): any;
-/**
- * @typedef {Object} PenDraft
- * @property {PenDraftKind} kind
- * @property {Uint8Array} baseBitmap
- * @property {number} axCorSag
- * @property {number} penValue
- * @property {[number, number, number][]} [vertices]
- * @property {[number, number, number][]} [strokeVoxels]
- * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
- */
 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;
@@ -44,16 +35,19 @@ export function redrawFreehandDraft(nv: any, draft: any): void;
 export function translateFreehandDraft(draft: any, delta: any): any;
 export function resizeFreehandDraft(draft: any, cornerIndex: any, newVox: any): any;
 export function boundsToFreehandCorners(bounds: any, axCorSag: any): any[][];
-export function polylineDraftFromNv(nv: any): {
+export function polylineDraftFromNv(nv: any, { filled }?: {
+    filled?: boolean | undefined;
+}): {
     kind: string;
     vertices: any;
     baseBitmap: Uint8Array;
     axCorSag: any;
     penValue: any;
+    filled: boolean;
 } | null;
-export function applyPenDraft(nv: any, draft: any, { fillClosed }?: {
-    fillClosed?: boolean | undefined;
-}): void;
+/** 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;
 export function cancelPenDraft(nv: any, draft: any): void;
 export type PenDraftKind = 'polyline' | 'freehand';
 export type PenDraft = {
@@ -71,4 +65,5 @@ export type PenDraft = {
         z1: number;
         z2: number;
     } | undefined;
+    filled?: boolean | undefined;
 };

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

@@ -30,6 +30,7 @@ import { NI_PEN_TYPE } from "./niivuePenType";
  * @property {[number, number, number][]} [vertices]
  * @property {[number, number, number][]} [strokeVoxels]
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
+ * @property {boolean} [filled]
  */
 export function isFreehandPenActive(nv) {
     return (nv.opts.isFilledPen &&
@@ -40,16 +41,6 @@ export function isFreehandPenActive(nv) {
 export function shouldDeferFreehandCommit(nv) {
     return !!nv.opts.deferFreehandCommit && isFreehandPenActive(nv);
 }
-/**
- * @typedef {Object} PenDraft
- * @property {PenDraftKind} kind
- * @property {Uint8Array} baseBitmap
- * @property {number} axCorSag
- * @property {number} penValue
- * @property {[number, number, number][]} [vertices]
- * @property {[number, number, number][]} [strokeVoxels]
- * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
- */
 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)
@@ -59,6 +50,12 @@ export function redrawPolylineDraft(nv, draft) {
     for (var i = 1; i < draft.vertices.length; i++) {
         nv.drawPenLine(draft.vertices[i], draft.vertices[i - 1], draft.penValue);
     }
+    if (draft.filled && draft.vertices.length >= 3) {
+        nv.drawPenAxCorSag = draft.axCorSag;
+        nv.drawPenFillPts = draft.vertices.map(function (v) { return __spreadArray([], v, true); });
+        nv._cloudMrSkipNextUndoBitmap = true;
+        nv.drawPenFilled();
+    }
     nv.refreshDrawing(false, false);
     nv.drawScene();
 }
@@ -220,7 +217,8 @@ export function boundsToFreehandCorners(bounds, axCorSag) {
         [x, y2, z2],
     ];
 }
-export function polylineDraftFromNv(nv) {
+export function polylineDraftFromNv(nv, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.filled, filled = _c === void 0 ? false : _c;
     var vertices = nv._cloudMrPolylineVertices;
     var baseBitmap = nv._cloudMrPolylineSessionStartBitmap;
     if (!(vertices === null || vertices === void 0 ? void 0 : vertices.length) || vertices.length < 2 || !baseBitmap)
@@ -230,19 +228,28 @@ export function polylineDraftFromNv(nv) {
         vertices: vertices.map(function (v) { return __spreadArray([], v, true); }),
         baseBitmap: new Uint8Array(baseBitmap),
         axCorSag: nv._cloudMrPolylineAxCorSag,
-        penValue: nv.opts.penValue
+        penValue: nv.opts.penValue,
+        filled: filled
     };
 }
-export function applyPenDraft(nv, draft, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.fillClosed, fillClosed = _c === void 0 ? false : _c;
+/** Fill polyline interior without closing the outline or committing the draft. */
+export function fillPolylineDraft(nv, draft) {
+    if (!(draft === null || draft === void 0 ? void 0 : draft.vertices) || draft.vertices.length < 3)
+        return draft;
+    redrawPolylineDraft(nv, __assign(__assign({}, draft), { filled: false }));
+    nv.drawPenAxCorSag = draft.axCorSag;
+    nv.drawPenFillPts = draft.vertices.map(function (v) { return __spreadArray([], v, true); });
+    nv._cloudMrSkipNextUndoBitmap = true;
+    nv.drawPenFilled();
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+    var next = __assign(__assign({}, draft), { filled: true });
+    syncPolylineDraftToNv(nv, next);
+    return next;
+}
+export function applyPenDraft(nv, draft) {
     if (draft.kind === "polyline") {
         redrawPolylineDraft(nv, draft);
-        if (fillClosed && draft.vertices.length >= 3) {
-            nv.drawPenAxCorSag = draft.axCorSag;
-            nv.drawPenLine(draft.vertices[0], draft.vertices[draft.vertices.length - 1], draft.penValue);
-            nv.drawPenFillPts = draft.vertices.map(function (v) { return __spreadArray([], v, true); });
-            nv.drawPenFilled();
-        }
     }
     else {
         redrawFreehandDraft(nv, draft);

package/package.json

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