cloudmr-ux 4.5.0 → 4.5.2

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

@@ -7,8 +7,10 @@ export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "rois" | "selectedR
     onPenDrawModeChange?: (mode: "freehand" | "polyline") => void;
     polylineVertexCount?: number;
     onCancelPolyline?: () => void;
-    onFinishPolyline?: () => void;
-    onCloseFillPolyline?: () => void;
+    onApplyPenDraft?: () => void;
+    onCancelPenDraft?: () => void;
+    onCloseFillPenDraft?: () => void;
+    penDraftActive?: boolean;
     shapeDraftActive?: boolean;
     onApplyShapeDraft?: () => void;
     onCancelShapeDraft?: () => void;
@@ -48,5 +50,24 @@ export interface CloudMrNiivuePanelProps {
     onShapeDraftChange: (draft: import("./shapeDraftUtils").ShapeDraft) => void;
     onApplyShapeDraft: () => void;
     onCancelShapeDraft: () => void;
+    penDraft: {
+        kind: "polyline" | "freehand";
+        baseBitmap: Uint8Array;
+        axCorSag: number;
+        penValue: number;
+        vertices?: [number, number, number][];
+        strokeVoxels?: [number, number, number][];
+        bounds?: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+            z1: number;
+            z2: number;
+        };
+    } | null;
+    onPenDraftChange: (draft: NonNullable<CloudMrNiivuePanelProps["penDraft"]>) => void;
+    onApplyPenDraft: () => void;
+    onCancelPenDraft: () => void;
 }
 export declare function CloudMrNiivuePanel(props: CloudMrNiivuePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -56,6 +56,7 @@ import { NiivueContrastAdjustments } from "../niivue-contrast-adjustments/Niivue
 import { NiivueRoiTable } from "../niivue-roi-table/NiivueRoiTable";
 import { MroDrawToolkit } from "./mro-draw-toolkit/MroDrawToolkit";
 import { ShapeDraftOverlay } from "./ShapeDraftOverlay";
+import { PenDraftOverlay } from "./PenDraftOverlay";
 export function CloudMrNiivuePanel(props) {
     var _this = this;
     var canvas = React.useRef(null);
@@ -110,12 +111,17 @@ export function CloudMrNiivuePanel(props) {
         if (props.shapeDraft) {
             props.onCancelShapeDraft();
         }
+        if (props.penDraft) {
+            props.onCancelPenDraft();
+        }
         if (tool !== "pen") {
             (_b = (_a = props.drawToolkitProps).onPenDrawModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, "freehand");
         }
         props.setDrawShapeTool(tool);
         var nv = props.nv;
         nv.opts.deferShapeCommit = tool === "rectangle" || tool === "ellipse";
+        nv.opts.deferFreehandCommit =
+            tool === "pen" && props.drawToolkitProps.penDrawMode === "freehand";
         nv.opts.penType =
             tool === "rectangle"
                 ? NI_PEN_TYPE.RECTANGLE
@@ -150,8 +156,11 @@ export function CloudMrNiivuePanel(props) {
                             if (props.shapeDraft) {
                                 props.onCancelShapeDraft();
                             }
+                            if (props.penDraft) {
+                                props.onCancelPenDraft();
+                            }
                             props.setDrawShapeTool(null);
-                        }, shapeDraftActive: props.shapeDraft != null, onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft, style: {
+                        }, shapeDraftActive: props.shapeDraft != null, penDraftActive: props.penDraft != null, onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft, style: {
                             marginBottom: 0,
                             width: "100%",
                             flexShrink: 0
@@ -182,7 +191,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 }))] }))] })), _jsxs(Box, __assign({ sx: {
+                                } }), 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: {
                     width: {
                         xs: "100%",
                         md: "35%"

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

@@ -63,6 +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 { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -172,17 +173,22 @@ export default function CloudMrNiivueViewer(props) {
     var _23 = useState(null), shapeDraft = _23[0], setShapeDraft = _23[1];
     var _24 = useState("freehand"), penDrawMode = _24[0], setPenDrawMode = _24[1];
     var _25 = useState(0), polylineVertexCount = _25[0], setPolylineVertexCount = _25[1];
-    var _26 = useState(1), brushSize = _26[0], setBrushSize = _26[1];
+    var _26 = useState(null), penDraft = _26[0], setPenDraft = _26[1];
+    var _27 = useState(1), brushSize = _27[0], setBrushSize = _27[1];
     var shapeDraftRef = React.useRef(null);
+    var penDraftRef = React.useRef(null);
     var drawShapeToolRef = React.useRef(null);
+    var penDrawModeRef = React.useRef("freehand");
     drawShapeToolRef.current = drawShapeTool;
     shapeDraftRef.current = shapeDraft;
+    penDraftRef.current = penDraft;
+    penDrawModeRef.current = penDrawMode;
     React.useEffect(function () {
         nv.opts.penBounds = 0;
         nv.opts.penSize = 1;
     }, []);
-    var _27 = React.useState(1.0), gamma = _27[0], setGamma = _27[1];
-    var _28 = React.useState(0), gammaKey = _28[0], setGammaKey = _28[1];
+    var _28 = React.useState(1.0), gamma = _28[0], setGamma = _28[1];
+    var _29 = React.useState(0), gammaKey = _29[0], setGammaKey = _29[1];
     // Niivue → React bridge so other places (Toolbar) can force the UI to reset
     nv.onResetGamma = function () {
         setGamma(1.0);
@@ -227,13 +233,13 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _29 = useState(0), rangeKey = _29[0], setRangeKey = _29[1];
+    var _30 = useState(0), rangeKey = _30[0], setRangeKey = _30[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _30 = useState([0, 0, 0]), boundMins = _30[0], setBoundMins = _30[1];
-    var _31 = useState([1, 1, 1]), boundMaxs = _31[0], setBoundMaxs = _31[1];
-    var _32 = useState([0.5, 0.5, 0.5]), mms = _32[0], setMMs = _32[1];
+    var _31 = useState([0, 0, 0]), boundMins = _31[0], setBoundMins = _31[1];
+    var _32 = useState([1, 1, 1]), boundMaxs = _32[0], setBoundMaxs = _32[1];
+    var _33 = useState([0.5, 0.5, 0.5]), mms = _33[0], setMMs = _33[1];
     nv.onImageLoaded = function () {
         var _a, _b;
         var oldCrosshairPos = __spreadArray([], nv.scene.crosshairPos, true);
@@ -516,7 +522,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _33 = useState("pan"), dragMode = _33[0], setDragMode = _33[1];
+    var _34 = useState("pan"), dragMode = _34[0], setDragMode = _34[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -729,7 +735,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _34 = useState({}), labelMapping = _34[0], setLabelMapping = _34[1];
+    var _35 = useState({}), labelMapping = _35[0], setLabelMapping = _35[1];
     function resampleImage(mapping) {
         if (mapping === void 0) { mapping = labelMapping; }
         var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
@@ -745,30 +751,82 @@ export default function CloudMrNiivueViewer(props) {
     function syncPenDrawMode(mode) {
         var _a;
         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);
         }
     }
-    function cancelPolylineDraft() {
+    function cancelPenDraftHandler() {
         var _a;
-        (_a = nv.cloudMrCancelPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+        var draft = penDraftRef.current;
+        if (!draft)
+            return;
+        cancelPenDraft(nv, draft);
+        if (draft.kind === "polyline") {
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            setPolylineVertexCount(0);
+        }
+        setPenDraft(null);
+        penDraftRef.current = null;
+        nv._cloudMrPenDraftActive = false;
+        if (drawShapeToolRef.current === "pen") {
+            nvSetDrawingEnabled(true);
+        }
     }
-    function finishPolylineOpen() {
-        if (nv.cloudMrFinishPolyline(false)) {
-            setDrawingChanged(true);
-            resampleImage();
+    function applyPenDraftHandler(fillClosed) {
+        var _a;
+        if (fillClosed === void 0) { fillClosed = false; }
+        var draft = penDraftRef.current;
+        if (!draft)
+            return;
+        applyPenDraft(nv, draft, { fillClosed: fillClosed });
+        if (draft.kind === "polyline") {
+            (_a = nv.cloudMrResetPolyline) === null || _a === void 0 ? void 0 : _a.call(nv);
+            setPolylineVertexCount(0);
         }
+        setPenDraft(null);
+        penDraftRef.current = null;
+        nv._cloudMrPenDraftActive = false;
+        setDrawingChanged(true);
+        if (drawShapeToolRef.current === "pen") {
+            nvSetDrawingEnabled(true);
+        }
+        resampleImage();
     }
-    function finishPolylineClosed() {
-        if (nv.cloudMrFinishPolyline(true)) {
-            setDrawingChanged(true);
-            resampleImage();
+    function onPenDraftChange(draft) {
+        setPenDraft(draft);
+        penDraftRef.current = draft;
+        if (draft.kind === "polyline") {
+            syncPolylineDraftToNv(nv, draft);
         }
     }
+    function cancelPolylineDraft() {
+        cancelPenDraftHandler();
+    }
+    nv.onPenDraftReady = function (draft) {
+        setPenDraft(draft);
+        penDraftRef.current = draft;
+        nv._cloudMrPenDraftActive = true;
+        nvSetDrawingEnabled(false);
+    };
     nv.onPolylineChange = function (count) {
+        var _a;
         setPolylineVertexCount(count);
+        if (penDrawModeRef.current === "polyline" && count >= 2) {
+            var draft = polylineDraftFromNv(nv);
+            if (draft) {
+                setPenDraft(draft);
+                penDraftRef.current = draft;
+            }
+        }
+        else if (((_a = penDraftRef.current) === null || _a === void 0 ? void 0 : _a.kind) === "polyline") {
+            setPenDraft(null);
+            penDraftRef.current = null;
+        }
     };
     function cancelShapeDraft() {
         var draft = shapeDraftRef.current;
@@ -808,7 +866,7 @@ export default function CloudMrNiivueViewer(props) {
         nvSetDrawingEnabled(false);
     };
     React.useEffect(function () {
-        if (!shapeDraft && !(penDrawMode === "polyline" && polylineVertexCount >= 2)) {
+        if (!shapeDraft && !penDraft) {
             return undefined;
         }
         var onKeyDown = function (event) {
@@ -817,8 +875,8 @@ export default function CloudMrNiivueViewer(props) {
                 if (shapeDraft) {
                     cancelShapeDraft();
                 }
-                else if (polylineVertexCount >= 2) {
-                    cancelPolylineDraft();
+                else if (penDraft) {
+                    cancelPenDraftHandler();
                 }
                 return;
             }
@@ -827,19 +885,19 @@ export default function CloudMrNiivueViewer(props) {
                 if (shapeDraft) {
                     applyShapeDraft();
                 }
-                else if (penDrawMode === "polyline" && polylineVertexCount >= 2) {
-                    finishPolylineOpen();
+                else if (penDraft) {
+                    applyPenDraftHandler(false);
                 }
             }
         };
         window.addEventListener("keydown", onKeyDown);
         return function () { return window.removeEventListener("keydown", onKeyDown); };
-    }, [shapeDraft, penDrawMode, polylineVertexCount]);
+    }, [shapeDraft, penDraft]);
     function nvUpdateSelectionBoxColor(rgb01) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _35 = React.useState('axial'), sliceType = _35[0], setSliceType = _35[1];
+    var _36 = React.useState('axial'), sliceType = _36[0], setSliceType = _36[1];
     function nvUpdateSliceType(newSliceType) {
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
@@ -979,14 +1037,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _36 = useState(''), selectedROI = _36[0], setSelectedDrawingLayer = _36[1];
-    var _37 = useState(false), saveDialogOpen = _37[0], setSaveDialogOpen = _37[1];
-    var _38 = useState(function () {
-    }), saveConfirmCallback = _38[0], setSaveConfirmCallback = _38[1];
-    var _39 = useState(false), confirmationOpen = _39[0], setConfirmationOpen = _39[1];
-    var _40 = useState(function () { }), warningConfirmationCallback = _40[0], setWarningConfirmationCallback = _40[1];
-    var _41 = useState(function () { }), warningCancelCallback = _41[0], setWarningCancelCallback = _41[1];
-    var _42 = useState(false), drawingChanged = _42[0], setDrawingChanged = _42[1];
+    var _37 = useState(''), selectedROI = _37[0], setSelectedDrawingLayer = _37[1];
+    var _38 = useState(false), saveDialogOpen = _38[0], setSaveDialogOpen = _38[1];
+    var _39 = useState(function () {
+    }), saveConfirmCallback = _39[0], setSaveConfirmCallback = _39[1];
+    var _40 = useState(false), confirmationOpen = _40[0], setConfirmationOpen = _40[1];
+    var _41 = useState(function () { }), warningConfirmationCallback = _41[0], setWarningConfirmationCallback = _41[1];
+    var _42 = useState(function () { }), warningCancelCallback = _42[0], setWarningCancelCallback = _42[1];
+    var _43 = useState(false), drawingChanged = _43[0], setDrawingChanged = _43[1];
     // When new drawing strokes are made on top of a saved ROI, reset the dropdown
     // so it shows the "ROI Layer" placeholder instead of the stale saved name.
     React.useEffect(function () {
@@ -1313,8 +1371,8 @@ export default function CloudMrNiivueViewer(props) {
                 cancelShapeDraft();
                 return;
             }
-            if (polylineVertexCount > 0) {
-                cancelPolylineDraft();
+            if (penDraftRef.current) {
+                cancelPenDraftHandler();
                 return;
             }
             nv.drawUndo();
@@ -1333,8 +1391,10 @@ export default function CloudMrNiivueViewer(props) {
         onPenDrawModeChange: syncPenDrawMode,
         polylineVertexCount: polylineVertexCount,
         onCancelPolyline: cancelPolylineDraft,
-        onFinishPolyline: finishPolylineOpen,
-        onCloseFillPolyline: finishPolylineClosed,
+        onApplyPenDraft: function () { return applyPenDraftHandler(false); },
+        onCancelPenDraft: cancelPenDraftHandler,
+        onCloseFillPenDraft: function () { return applyPenDraftHandler(true); },
+        penDraftActive: penDraft != null,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize
     };
@@ -1352,7 +1412,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 }, "".concat(selectedVolume))] })));
+                }, 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))] })));
 }
 function niiToVolume(nii) {
     return {

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

@@ -9,6 +9,7 @@ import {
 } from "./shapeDraftUtils.js";
 import {
   addPolylineVertex,
+  axCorSagFromMouse,
   cancelPolyline,
   finishPolyline,
   isClickWithoutDrag,
@@ -16,6 +17,10 @@ import {
   previewPolylineSegment,
   resetPolylineState,
 } from "./polylinePenUtils.js";
+import {
+  captureFreehandDraft,
+  shouldDeferFreehandCommit,
+} from "./penDraftUtils.js";
 
 /*
  * bitmapOverlay — in-browser state only: remembers each voxel's label *before* Group
@@ -496,6 +501,31 @@ Niivue.prototype.drawPenFilled = function () {
                 this.drawBitmap[index] = value;
             }
         })
+    if (shouldDeferFreehandCommit(this) && this._cloudMrFreehandSessionStartBitmap) {
+        this._cloudMrSkipNextUndoBitmap = true;
+        this.hiddenBitmap = new Uint8Array(this.drawBitmap.length);
+        for (let i = 0; i < this.drawBitmap.length; i++) {
+            let pen = this.drawBitmap[i];
+            if (!this.getLabelVisibility(pen)) {
+                this.hiddenBitmap[i] = this.drawBitmap[i];
+                this.drawBitmap[i] = 0;
+            }
+        }
+        this.refreshDrawing(false);
+        this.drawScene();
+        const axCorSag =
+            this.drawPenAxCorSag >= 0 ? this.drawPenAxCorSag : this._cloudMrFreehandAxCorSag;
+        const draft = captureFreehandDraft(
+            this,
+            this._cloudMrFreehandSessionStartBitmap,
+            axCorSag,
+        );
+        this._cloudMrFreehandSessionStartBitmap = null;
+        if (draft && typeof this.onPenDraftReady === "function") {
+            this.onPenDraftReady(draft);
+        }
+        return;
+    }
     this.drawAddUndoBitmap()
     // Post-processing to hide hidden voxels
     this.hiddenBitmap = new Uint8Array(this.drawBitmap.length);
@@ -1435,6 +1465,21 @@ Niivue.prototype.cloudMrResetPolyline = function cloudMrResetPolyline() {
   resetPolylineState(this);
 };
 
+const _mouseDownListener = Niivue.prototype.mouseDownListener;
+Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
+  if (shouldDeferFreehandCommit(this) && this.drawBitmap) {
+    this._cloudMrFreehandSessionStartBitmap = this.drawBitmap.slice();
+    this._cloudMrFreehandAxCorSag = -1;
+  }
+  _mouseDownListener.call(this, e);
+  if (shouldDeferFreehandCommit(this) && this._cloudMrFreehandSessionStartBitmap) {
+    const axCorSag = axCorSagFromMouse(this);
+    if (axCorSag >= 0) {
+      this._cloudMrFreehandAxCorSag = axCorSag;
+    }
+  }
+};
+
 const _mouseClick = Niivue.prototype.mouseClick;
 Niivue.prototype.mouseClick = function cloudMrMouseClick(...args) {
   if (isPolylinePenActive(this)) {

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

@@ -0,0 +1,10 @@
+/**
+ * Adjust handles for polyline (vertex drag) or freehand (bbox move/resize) drafts.
+ */
+export function PenDraftOverlay({ nv, draft, onDraftChange, overlayKey }: {
+    nv: any;
+    draft: any;
+    onDraftChange: any;
+    overlayKey: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export default PenDraftOverlay;

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

@@ -0,0 +1,201 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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";
+var HANDLE_SIZE = 10;
+var ACCENT = "#580f8b";
+/**
+ * Adjust handles for polyline (vertex drag) or freehand (bbox move/resize) drafts.
+ */
+export function PenDraftOverlay(_a) {
+    var nv = _a.nv, draft = _a.draft, onDraftChange = _a.onDraftChange, overlayKey = _a.overlayKey;
+    var dragRef = useRef(null);
+    var draftRef = useRef(draft);
+    draftRef.current = draft;
+    var onPointerMoveRef = useRef(null);
+    var finishDragRef = useRef(null);
+    var _b = useState(0), setTick = _b[1];
+    var bump = useCallback(function () { return setTick(function (t) { return t + 1; }); }, []);
+    useEffect(function () {
+        var onMove = function () { return bump(); };
+        window.addEventListener("resize", onMove);
+        return function () { return window.removeEventListener("resize", onMove); };
+    }, [bump]);
+    var isPolyline = (draft === null || draft === void 0 ? void 0 : draft.kind) === "polyline";
+    var vertexCss = useMemo(function () {
+        if (!isPolyline || !(draft === null || draft === void 0 ? void 0 : draft.vertices))
+            return [];
+        return draft.vertices
+            .map(function (vox) { return voxToOverlayPos(nv, vox, draft.axCorSag); })
+            .filter(Boolean);
+    }, [draft, isPolyline, nv, overlayKey]);
+    var freehandCorners = useMemo(function () {
+        if (isPolyline || !(draft === null || draft === void 0 ? void 0 : draft.bounds))
+            return [];
+        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]);
+    var centerCss = useMemo(function () {
+        var _a;
+        if (!draft)
+            return null;
+        if (isPolyline && ((_a = draft.vertices) === null || _a === void 0 ? void 0 : _a.length)) {
+            var xs = draft.vertices.map(function (v) { return v[0]; });
+            var ys = draft.vertices.map(function (v) { return v[1]; });
+            var zs = draft.vertices.map(function (v) { return v[2]; });
+            return voxToOverlayPos(nv, [
+                (Math.min.apply(Math, xs) + Math.max.apply(Math, xs)) / 2,
+                (Math.min.apply(Math, ys) + Math.max.apply(Math, ys)) / 2,
+                (Math.min.apply(Math, zs) + Math.max.apply(Math, zs)) / 2,
+            ], draft.axCorSag);
+        }
+        if (draft.bounds) {
+            var b = draft.bounds;
+            return voxToOverlayPos(nv, [(b.x1 + b.x2) / 2, (b.y1 + b.y2) / 2, (b.z1 + b.z2) / 2], draft.axCorSag);
+        }
+        return null;
+    }, [draft, isPolyline, nv, overlayKey]);
+    var boxStyle = useMemo(function () {
+        if (cornerCss.length < 2)
+            return null;
+        var xs = cornerCss.map(function (p) { return p.x; });
+        var ys = cornerCss.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;
+        var height = Math.max.apply(Math, ys) - top;
+        if (width < 2 && height < 2)
+            return null;
+        return { left: left, top: top, width: Math.max(width, 2), height: Math.max(height, 2) };
+    }, [cornerCss]);
+    var applyDraft = useCallback(function (nextDraft) {
+        if (nextDraft.kind === "polyline") {
+            redrawPolylineDraft(nv, nextDraft);
+            syncPolylineDraftToNv(nv, nextDraft);
+        }
+        else {
+            redrawFreehandDraft(nv, nextDraft);
+        }
+        onDraftChange(nextDraft);
+    }, [nv, onDraftChange]);
+    finishDragRef.current = function () {
+        dragRef.current = null;
+        if (onPointerMoveRef.current) {
+            window.removeEventListener("pointermove", onPointerMoveRef.current);
+        }
+        if (finishDragRef.current) {
+            window.removeEventListener("pointerup", finishDragRef.current);
+        }
+    };
+    onPointerMoveRef.current = function (event) {
+        var drag = dragRef.current;
+        var current = draftRef.current;
+        if (!drag || !current)
+            return;
+        event.preventDefault();
+        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) }));
+            }
+            else {
+                applyDraft(translateFreehandDraft(current, 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));
+        }
+    };
+    var startDrag = useCallback(function (event, mode, cornerIndex) {
+        var _a, _b;
+        if (cornerIndex === void 0) { cornerIndex = -1; }
+        event.preventDefault();
+        event.stopPropagation();
+        dragRef.current = {
+            mode: mode,
+            cornerIndex: cornerIndex,
+            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 : []
+        };
+        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);
+    }; }, []);
+    if (!draft || !boxStyle)
+        return null;
+    var handleStyle = {
+        position: "absolute",
+        width: HANDLE_SIZE,
+        height: HANDLE_SIZE,
+        marginLeft: -HANDLE_SIZE / 2,
+        marginTop: -HANDLE_SIZE / 2,
+        borderRadius: "50%",
+        background: "#fff",
+        border: "2px solid ".concat(ACCENT),
+        boxSizing: "border-box",
+        cursor: "pointer",
+        zIndex: 3,
+        touchAction: "none",
+        pointerEvents: "auto"
+    };
+    return (_jsxs("div", __assign({ style: {
+            position: "absolute",
+            inset: 0,
+            zIndex: 2,
+            pointerEvents: "none",
+            overflow: "hidden"
+        }, "aria-label": "Adjust pen ROI" }, { children: [_jsx("div", { style: {
+                    position: "absolute",
+                    left: boxStyle.left,
+                    top: boxStyle.top,
+                    width: boxStyle.width,
+                    height: boxStyle.height,
+                    border: "2px dashed ".concat(ACCENT),
+                    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))); })] })));
+}
+export default PenDraftOverlay;

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

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

@@ -11,8 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Shared ROI label color row (NiiVue pen indices 1–6). Used by pen, rectangle, and ellipse tools.
- * Pen palette adds freehand vs straight-line mode; rectangle/ellipse show Apply/Cancel while adjusting.
+ * Pen palette adds freehand vs polyline mode; pen/shape drafts show Apply/Cancel while adjusting.
  */
 import { Stack, IconButton, Button, Tooltip, Typography } from "@mui/material";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
@@ -38,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, onCancelPolyline = _a.onCancelPolyline, onFinishPolyline = _a.onFinishPolyline, onCloseFillPolyline = _a.onCloseFillPolyline, _e = _a.brushSize, brushSize = _e === void 0 ? 1 : _e, updateBrushSize = _a.updateBrushSize, _f = _a.shapeDraftActive, shapeDraftActive = _f === void 0 ? false : _f, 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, 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;
     return (_jsxs(Stack, __assign({ style: {
             position: "absolute",
             top: "100%",
@@ -52,10 +51,10 @@ export default function DrawColorPlatte(_a) {
             borderTopLeftRadius: "6pt",
             borderTopRightRadius: "6pt",
             background: "#333"
-        }, 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: "Straight lines" }))] }))), 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 () {
+        }, 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 corner to draw connected straight lines" }))), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount >= 2 && (_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: "Discard current outline" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel polyline", onClick: function () { return onCancelPolyline === null || onCancelPolyline === void 0 ? void 0 : onCancelPolyline(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each vertex to draw connected line segments" }))), showPenModes && penDraftActive && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [_jsx(Tooltip, __assign({ title: "Cancel (Esc)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "cancel pen draft", onClick: function () { return onCancelPenDraft === null || onCancelPenDraft === void 0 ? void 0 : onCancelPenDraft(); }, startIcon: _jsx(CloseIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
                                 color: "#ccc",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
@@ -63,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: [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 onCloseFillPolyline === null || onCloseFillPolyline === void 0 ? void 0 : onCloseFillPolyline(); }, sx: {
+                            } }, { 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: {
                                         color: "#c9a0e8",
                                         fontSize: ACTION_FONT_SIZE,
                                         textTransform: "none",
                                         minWidth: 0,
                                         py: 0.25,
                                         px: 0.75
-                                    } }, { children: "Close & fill" })) }))), _jsx(Tooltip, __assign({ title: "Keep outline only (Enter)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "finish polyline", onClick: function () { return onFinishPolyline === null || onFinishPolyline === void 0 ? void 0 : onFinishPolyline(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                                    } }, { 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: {
                                         color: "#c9a0e8",
                                         fontSize: ACTION_FONT_SIZE,
                                         textTransform: "none",
@@ -78,7 +77,7 @@ export default function DrawColorPlatte(_a) {
                                         py: 0.25,
                                         px: 0.75,
                                         "& .MuiButton-startIcon": { mr: 0.5, ml: 0 }
-                                    } }, { children: "Done" })) }))] }))] }))), 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: {
+                                    } }, { 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",

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

@@ -71,13 +71,15 @@ export function MroDrawToolkit(props) {
     var _d = useState(undefined), setMaskColor = _d[1];
     var filled = props.drawPen > 7;
     useEffect(function () {
-        if (!props.shapeDraftActive)
+        if (!props.shapeDraftActive && !props.penDraftActive)
             return;
         if (drawShapeTool === "rectangle")
             setExpandedOption("r");
         else if (drawShapeTool === "ellipse")
             setExpandedOption("l");
-    }, [props.shapeDraftActive, drawShapeTool]);
+        else if (drawShapeTool === "pen")
+            setExpandedOption("d");
+    }, [props.shapeDraftActive, props.penDraftActive, drawShapeTool]);
     var shapeSelectedSx = function (shape) {
         return drawShapeTool === shape
             ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
@@ -149,7 +151,7 @@ export function MroDrawToolkit(props) {
             var _a;
             if (clickTargetIsNiivueCanvas(event.target))
                 return;
-            if (props.shapeDraftActive)
+            if (props.shapeDraftActive || props.penDraftActive)
                 return;
             setExpandedOption("n");
             setExpandOpacityOptions(false);
@@ -170,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, onFinishPolyline: props.onFinishPolyline, onCloseFillPolyline: props.onCloseFillPolyline, 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, 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 () {
                                                 props.nv.clearDrawing();
                                                 props.resampleImage();
                                                 props.setDrawingChanged(false);

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

@@ -0,0 +1,74 @@
+/** @typedef {'polyline' | 'freehand'} PenDraftKind */
+/**
+ * @typedef {Object} PenDraft
+ * @property {PenDraftKind} kind
+ * @property {Uint8Array} baseBitmap
+ * @property {number} axCorSag
+ * @property {number} penValue
+ * @property {[number, number, number][]} [vertices]
+ * @property {[number, number, number][]} [strokeVoxels]
+ * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
+ */
+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;
+export function syncPolylineDraftToNv(nv: any, draft: any): void;
+export function captureFreehandDraft(nv: any, sessionStartBitmap: any, axCorSag: any): {
+    kind: string;
+    baseBitmap: Uint8Array;
+    axCorSag: any;
+    penValue: any;
+    strokeVoxels: number[][];
+    bounds: {
+        x1: number;
+        y1: number;
+        z1: number;
+        x2: number;
+        y2: number;
+        z2: number;
+    };
+} | null;
+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): {
+    kind: string;
+    vertices: any;
+    baseBitmap: Uint8Array;
+    axCorSag: any;
+    penValue: any;
+} | null;
+export function applyPenDraft(nv: any, draft: any, { fillClosed }?: {
+    fillClosed?: boolean | undefined;
+}): void;
+export function cancelPenDraft(nv: any, draft: any): void;
+export type PenDraftKind = 'polyline' | 'freehand';
+export type PenDraft = {
+    kind: PenDraftKind;
+    baseBitmap: Uint8Array;
+    axCorSag: number;
+    penValue: number;
+    vertices?: [number, number, number][] | undefined;
+    strokeVoxels?: [number, number, number][] | undefined;
+    bounds?: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        z1: number;
+        z2: number;
+    } | undefined;
+};

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

@@ -0,0 +1,261 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { translatePt } from "./shapeDraftUtils";
+import { NI_PEN_TYPE } from "./niivuePenType";
+/** @typedef {'polyline' | 'freehand'} PenDraftKind */
+/**
+ * @typedef {Object} PenDraft
+ * @property {PenDraftKind} kind
+ * @property {Uint8Array} baseBitmap
+ * @property {number} axCorSag
+ * @property {number} penValue
+ * @property {[number, number, number][]} [vertices]
+ * @property {[number, number, number][]} [strokeVoxels]
+ * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
+ */
+export function isFreehandPenActive(nv) {
+    return (nv.opts.isFilledPen &&
+        nv.opts.drawingEnabled &&
+        nv.opts.penType === NI_PEN_TYPE.PEN &&
+        !nv.opts.polylinePenMode);
+}
+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)
+        return;
+    nv.drawBitmap.set(draft.baseBitmap);
+    nv.drawPenAxCorSag = draft.axCorSag;
+    for (var i = 1; i < draft.vertices.length; i++) {
+        nv.drawPenLine(draft.vertices[i], draft.vertices[i - 1], draft.penValue);
+    }
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+}
+export function translatePolylineVertices(vertices, delta) {
+    return vertices.map(function (v) { return translatePt(v, delta); });
+}
+export function updatePolylineVertex(vertices, index, newVox) {
+    var next = vertices.map(function (v) { return __spreadArray([], v, true); });
+    next[index] = __spreadArray([], newVox, true);
+    return next;
+}
+export function syncPolylineDraftToNv(nv, draft) {
+    nv._cloudMrPolylineVertices = draft.vertices.map(function (v) { return __spreadArray([], v, true); });
+    if (nv.drawBitmap) {
+        nv._cloudMrPolylineBaseBitmap = nv.drawBitmap.slice();
+    }
+    nv._cloudMrPolylineAxCorSag = draft.axCorSag;
+}
+export function captureFreehandDraft(nv, sessionStartBitmap, axCorSag) {
+    var _a;
+    if (!nv.drawBitmap || !sessionStartBitmap)
+        return null;
+    var penValue = nv.opts.penValue;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims)
+        return null;
+    var strokeVoxels = [];
+    for (var i = 0; i < nv.drawBitmap.length; i++) {
+        if (nv.drawBitmap[i] === penValue && sessionStartBitmap[i] !== penValue) {
+            var z = Math.floor(i / (dims[1] * dims[2]));
+            var rem = i - z * dims[1] * dims[2];
+            var y = Math.floor(rem / dims[1]);
+            var x = rem % dims[1];
+            strokeVoxels.push([x, y, z]);
+        }
+    }
+    if (strokeVoxels.length === 0)
+        return null;
+    var x1 = Infinity;
+    var y1 = Infinity;
+    var z1 = Infinity;
+    var x2 = -Infinity;
+    var y2 = -Infinity;
+    var z2 = -Infinity;
+    for (var _i = 0, strokeVoxels_1 = strokeVoxels; _i < strokeVoxels_1.length; _i++) {
+        var _b = strokeVoxels_1[_i], x = _b[0], y = _b[1], z = _b[2];
+        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);
+    }
+    return {
+        kind: "freehand",
+        baseBitmap: new Uint8Array(sessionStartBitmap),
+        axCorSag: axCorSag,
+        penValue: penValue,
+        strokeVoxels: strokeVoxels,
+        bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 }
+    };
+}
+export function redrawFreehandDraft(nv, draft) {
+    var _a;
+    if (!((_a = draft === null || draft === void 0 ? void 0 : draft.strokeVoxels) === null || _a === void 0 ? void 0 : _a.length) || !draft.baseBitmap)
+        return;
+    nv.drawBitmap.set(draft.baseBitmap);
+    for (var _i = 0, _b = draft.strokeVoxels; _i < _b.length; _i++) {
+        var _c = _b[_i], x = _c[0], y = _c[1], z = _c[2];
+        nv.drawPt(x, y, z, draft.penValue);
+    }
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+}
+export function translateFreehandDraft(draft, delta) {
+    return __assign(__assign({}, draft), { strokeVoxels: draft.strokeVoxels.map(function (v) { return translatePt(v, delta); }), bounds: draft.bounds
+            ? {
+                x1: draft.bounds.x1 + delta[0],
+                y1: draft.bounds.y1 + delta[1],
+                z1: draft.bounds.z1 + delta[2],
+                x2: draft.bounds.x2 + delta[0],
+                y2: draft.bounds.y2 + delta[1],
+                z2: draft.bounds.z2 + delta[2]
+            }
+            : draft.bounds });
+}
+export function resizeFreehandDraft(draft, cornerIndex, newVox) {
+    if (!draft.bounds)
+        return draft;
+    var axCorSag = draft.axCorSag;
+    var b = __assign({}, draft.bounds);
+    var corners = boundsToFreehandCorners(b, axCorSag);
+    corners[cornerIndex] = __spreadArray([], newVox, true);
+    var xs = corners.map(function (c) { return c[0]; });
+    var ys = corners.map(function (c) { return c[1]; });
+    var zs = corners.map(function (c) { return c[2]; });
+    var nextBounds = {
+        x1: Math.min.apply(Math, xs),
+        y1: Math.min.apply(Math, ys),
+        z1: Math.min.apply(Math, zs),
+        x2: Math.max.apply(Math, xs),
+        y2: Math.max.apply(Math, ys),
+        z2: Math.max.apply(Math, zs)
+    };
+    var oldW = Math.max(1, b.x2 - b.x1);
+    var oldH = Math.max(1, b.y2 - b.y1);
+    var newW = Math.max(1, nextBounds.x2 - nextBounds.x1);
+    var newH = Math.max(1, nextBounds.y2 - nextBounds.y1);
+    var scaled = draft.strokeVoxels.map(function (v) {
+        var relH = (v[0] - b.x1) / oldW;
+        var relV = (v[1] - b.y1) / oldH;
+        if (axCorSag === 0) {
+            return [
+                Math.round(nextBounds.x1 + relH * newW),
+                Math.round(nextBounds.y1 + relV * newH),
+                v[2],
+            ];
+        }
+        if (axCorSag === 1) {
+            return [
+                Math.round(nextBounds.x1 + relH * newW),
+                v[1],
+                Math.round(nextBounds.y1 + relV * newH),
+            ];
+        }
+        return [
+            v[0],
+            Math.round(nextBounds.x1 + relH * newW),
+            Math.round(nextBounds.y1 + relV * newH),
+        ];
+    });
+    return __assign(__assign({}, draft), { strokeVoxels: scaled, bounds: nextBounds });
+}
+export function boundsToFreehandCorners(bounds, axCorSag) {
+    var x1 = bounds.x1, y1 = bounds.y1, z1 = bounds.z1, x2 = bounds.x2, y2 = bounds.y2, z2 = bounds.z2;
+    if (axCorSag === 0) {
+        var z = Math.round((z1 + z2) / 2);
+        return [
+            [x1, y1, z],
+            [x2, y1, z],
+            [x1, y2, z],
+            [x2, y2, z],
+        ];
+    }
+    if (axCorSag === 1) {
+        var y = Math.round((y1 + y2) / 2);
+        return [
+            [x1, y, z1],
+            [x2, y, z1],
+            [x1, y, z2],
+            [x2, y, z2],
+        ];
+    }
+    var x = Math.round((x1 + x2) / 2);
+    return [
+        [x, y1, z1],
+        [x, y2, z1],
+        [x, y1, z2],
+        [x, y2, z2],
+    ];
+}
+export function polylineDraftFromNv(nv) {
+    var vertices = nv._cloudMrPolylineVertices;
+    var baseBitmap = nv._cloudMrPolylineSessionStartBitmap;
+    if (!(vertices === null || vertices === void 0 ? void 0 : vertices.length) || vertices.length < 2 || !baseBitmap)
+        return null;
+    return {
+        kind: "polyline",
+        vertices: vertices.map(function (v) { return __spreadArray([], v, true); }),
+        baseBitmap: new Uint8Array(baseBitmap),
+        axCorSag: nv._cloudMrPolylineAxCorSag,
+        penValue: nv.opts.penValue
+    };
+}
+export function applyPenDraft(nv, draft, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.fillClosed, fillClosed = _c === void 0 ? false : _c;
+    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);
+    }
+    nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+    if (typeof nv.onDrawingChanged === "function") {
+        nv.onDrawingChanged("draw");
+    }
+}
+export function cancelPenDraft(nv, draft) {
+    if (draft === null || draft === void 0 ? void 0 : draft.baseBitmap) {
+        nv.drawBitmap.set(draft.baseBitmap);
+        nv.refreshDrawing(true, false);
+        nv.drawScene();
+    }
+}

package/package.json

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