cloudmr-ux 4.4.3 → 4.4.4

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

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Toolbar.scss";
+import "./Toolbar.css";
 import type { DrawToolkitProps } from "../draw-toolkit/DrawToolkit";
 /** Props for {@link DrawToolkit} minus brush controls when using {@link MroDrawToolkit}. */
 export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "brushSize" | "updateBrushSize">;
@@ -34,5 +34,9 @@ export interface CloudMrNiivuePanelProps {
     gamma: number;
     gammaKey: number;
     setGamma: (val: number) => void;
+    shapeDraft: import("./shapeDraftUtils").ShapeDraft | null;
+    onShapeDraftChange: (draft: import("./shapeDraftUtils").ShapeDraft) => void;
+    onApplyShapeDraft: () => void;
+    onCancelShapeDraft: () => void;
 }
 export declare function CloudMrNiivuePanel(props: CloudMrNiivuePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -50,11 +50,12 @@ import React from "react";
 import { Box } from "@mui/material";
 import { NI_PEN_TYPE } from "./niivuePenType";
 import LocationTable from "../../core/common/components/NiivueTools/components/LocationTable";
-import "./Toolbar.scss";
+import "./Toolbar.css";
 import { NiivueSlicePosition } from "../niivue-slice-position/NiivueSlicePosition";
 import { NiivueContrastAdjustments } from "../niivue-contrast-adjustments/NiivueContrastAdjustments";
 import { NiivueRoiTable } from "../niivue-roi-table/NiivueRoiTable";
 import { MroDrawToolkit } from "./mro-draw-toolkit/MroDrawToolkit";
+import { ShapeDraftOverlay } from "./ShapeDraftOverlay";
 export function CloudMrNiivuePanel(props) {
     var _this = this;
     var canvas = React.useRef(null);
@@ -105,8 +106,12 @@ export function CloudMrNiivuePanel(props) {
         props.resampleImage();
     }, [histogram]);
     function applyDrawShapeTool(tool) {
+        if (props.shapeDraft) {
+            props.onCancelShapeDraft();
+        }
         props.setDrawShapeTool(tool);
         var nv = props.nv;
+        nv.opts.deferShapeCommit = tool === "rectangle" || tool === "ellipse";
         nv.opts.penType =
             tool === "rectangle"
                 ? NI_PEN_TYPE.RECTANGLE
@@ -137,7 +142,12 @@ export function CloudMrNiivuePanel(props) {
                     alignItems: "stretch",
                     justifyContent: "flex-start",
                     mb: { xs: 2, md: 0 }
-                } }, { children: [_jsx(MroDrawToolkit, __assign({}, props.drawToolkitProps, { drawShapeTool: props.drawShapeTool, onDrawShapeToolChange: applyDrawShapeTool, onExitDrawMode: function () { return props.setDrawShapeTool(null); }, style: {
+                } }, { children: [_jsx(MroDrawToolkit, __assign({}, props.drawToolkitProps, { drawShapeTool: props.drawShapeTool, onDrawShapeToolChange: applyDrawShapeTool, onExitDrawMode: function () {
+                            if (props.shapeDraft) {
+                                props.onCancelShapeDraft();
+                            }
+                            props.setDrawShapeTool(null);
+                        }, shapeDraftActive: props.shapeDraft != null, onApplyShapeDraft: props.onApplyShapeDraft, onCancelShapeDraft: props.onCancelShapeDraft, style: {
                             marginBottom: 0,
                             width: "100%",
                             flexShrink: 0
@@ -148,7 +158,7 @@ export function CloudMrNiivuePanel(props) {
                             color: "white",
                             background: "black",
                             flexShrink: 0
-                        } }), _jsx(Box, __assign({ sx: {
+                        } }), _jsxs(Box, __assign({ sx: {
                             position: "relative",
                             width: "100%",
                             flexShrink: 0,
@@ -162,13 +172,13 @@ export function CloudMrNiivuePanel(props) {
                                 sm: 400,
                                 md: 1035
                             }
-                        } }, { children: _jsx("canvas", { id: "niiCanvas", ref: canvas, style: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                width: "100%",
-                                height: "100%"
-                            } }) }))] })), _jsxs(Box, __assign({ sx: {
+                        } }, { children: [_jsx("canvas", { id: "niiCanvas", ref: canvas, style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    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: {
                     width: {
                         xs: "100%",
                         md: "35%"

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

@@ -168,11 +168,16 @@ export default function CloudMrNiivueViewer(props) {
     var _20 = useState({ a: 1, b: 0 }), transformFactors = _20[0], setTransformFactors = _20[1];
     var _21 = useState(false), saving = _21[0], setSaving = _21[1];
     var _22 = useState(null), drawShapeTool = _22[0], setDrawShapeTool = _22[1];
+    var _23 = useState(null), shapeDraft = _23[0], setShapeDraft = _23[1];
+    var shapeDraftRef = React.useRef(null);
+    var drawShapeToolRef = React.useRef(null);
+    drawShapeToolRef.current = drawShapeTool;
+    shapeDraftRef.current = shapeDraft;
     React.useEffect(function () {
         nv.opts.penBounds = 0;
     }, []);
-    var _23 = React.useState(1.0), gamma = _23[0], setGamma = _23[1];
-    var _24 = React.useState(0), gammaKey = _24[0], setGammaKey = _24[1];
+    var _24 = React.useState(1.0), gamma = _24[0], setGamma = _24[1];
+    var _25 = React.useState(0), gammaKey = _25[0], setGammaKey = _25[1];
     // Niivue → React bridge so other places (Toolbar) can force the UI to reset
     nv.onResetGamma = function () {
         setGamma(1.0);
@@ -217,13 +222,13 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _25 = useState(0), rangeKey = _25[0], setRangeKey = _25[1];
+    var _26 = useState(0), rangeKey = _26[0], setRangeKey = _26[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _26 = useState([0, 0, 0]), boundMins = _26[0], setBoundMins = _26[1];
-    var _27 = useState([1, 1, 1]), boundMaxs = _27[0], setBoundMaxs = _27[1];
-    var _28 = useState([0.5, 0.5, 0.5]), mms = _28[0], setMMs = _28[1];
+    var _27 = useState([0, 0, 0]), boundMins = _27[0], setBoundMins = _27[1];
+    var _28 = useState([1, 1, 1]), boundMaxs = _28[0], setBoundMaxs = _28[1];
+    var _29 = useState([0.5, 0.5, 0.5]), mms = _29[0], setMMs = _29[1];
     nv.onImageLoaded = function () {
         var _a, _b;
         var oldCrosshairPos = __spreadArray([], nv.scene.crosshairPos, true);
@@ -414,8 +419,12 @@ export default function CloudMrNiivueViewer(props) {
         // }
         // console.log(nv.scene.pan2Dxyzmm);
     };
-    nv.onMouseUp = function (data) {
-        if (drawingEnabled) {
+    nv.onMouseUp = function () {
+        if (nv._cloudMrSuppressDrawingChangedMouseUp) {
+            nv._cloudMrSuppressDrawingChangedMouseUp = false;
+            return;
+        }
+        if (nv.opts.drawingEnabled) {
             setDrawingChanged(true);
             resampleImage();
         }
@@ -502,7 +511,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _29 = useState("pan"), dragMode = _29[0], setDragMode = _29[1];
+    var _30 = useState("pan"), dragMode = _30[0], setDragMode = _30[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -711,7 +720,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _30 = useState({}), labelMapping = _30[0], setLabelMapping = _30[1];
+    var _31 = useState({}), labelMapping = _31[0], setLabelMapping = _31[1];
     function resampleImage(mapping) {
         if (mapping === void 0) { mapping = labelMapping; }
         var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
@@ -724,11 +733,64 @@ export default function CloudMrNiivueViewer(props) {
             setROIs(next);
         }
     }
+    function cancelShapeDraft() {
+        var draft = shapeDraftRef.current;
+        if (!draft)
+            return;
+        nv.drawBitmap.set(draft.baseBitmap);
+        nv.refreshDrawing(true, false);
+        nv.drawScene();
+        setShapeDraft(null);
+        shapeDraftRef.current = null;
+        nv._cloudMrShapeDraftActive = false;
+        if (drawShapeToolRef.current) {
+            nvSetDrawingEnabled(true);
+        }
+    }
+    function applyShapeDraft() {
+        if (!shapeDraftRef.current)
+            return;
+        nv.drawAddUndoBitmap(nv.drawFillOverwrites);
+        setDrawingChanged(true);
+        setShapeDraft(null);
+        shapeDraftRef.current = null;
+        nv._cloudMrShapeDraftActive = false;
+        if (drawShapeToolRef.current) {
+            nvSetDrawingEnabled(true);
+        }
+        resampleImage();
+    }
+    function onShapeDraftChange(draft) {
+        setShapeDraft(draft);
+        shapeDraftRef.current = draft;
+    }
+    nv.onShapeDraftReady = function (draft) {
+        setShapeDraft(draft);
+        shapeDraftRef.current = draft;
+        nv._cloudMrShapeDraftActive = true;
+        nvSetDrawingEnabled(false);
+    };
+    React.useEffect(function () {
+        if (!shapeDraft)
+            return undefined;
+        var onKeyDown = function (event) {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                applyShapeDraft();
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                cancelShapeDraft();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return function () { return window.removeEventListener("keydown", onKeyDown); };
+    }, [shapeDraft]);
     function nvUpdateSelectionBoxColor(rgb01) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _31 = React.useState('axial'), sliceType = _31[0], setSliceType = _31[1];
+    var _32 = React.useState('axial'), sliceType = _32[0], setSliceType = _32[1];
     function nvUpdateSliceType(newSliceType) {
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
@@ -868,14 +930,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _32 = useState(''), selectedROI = _32[0], setSelectedDrawingLayer = _32[1];
-    var _33 = useState(false), saveDialogOpen = _33[0], setSaveDialogOpen = _33[1];
-    var _34 = useState(function () {
-    }), saveConfirmCallback = _34[0], setSaveConfirmCallback = _34[1];
-    var _35 = useState(false), confirmationOpen = _35[0], setConfirmationOpen = _35[1];
-    var _36 = useState(function () { }), warningConfirmationCallback = _36[0], setWarningConfirmationCallback = _36[1];
-    var _37 = useState(function () { }), warningCancelCallback = _37[0], setWarningCancelCallback = _37[1];
-    var _38 = useState(false), drawingChanged = _38[0], setDrawingChanged = _38[1];
+    var _33 = useState(''), selectedROI = _33[0], setSelectedDrawingLayer = _33[1];
+    var _34 = useState(false), saveDialogOpen = _34[0], setSaveDialogOpen = _34[1];
+    var _35 = useState(function () {
+    }), saveConfirmCallback = _35[0], setSaveConfirmCallback = _35[1];
+    var _36 = useState(false), confirmationOpen = _36[0], setConfirmationOpen = _36[1];
+    var _37 = useState(function () { }), warningConfirmationCallback = _37[0], setWarningConfirmationCallback = _37[1];
+    var _38 = useState(function () { }), warningCancelCallback = _38[0], setWarningCancelCallback = _38[1];
+    var _39 = useState(false), drawingChanged = _39[0], setDrawingChanged = _39[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 () {
@@ -1198,6 +1260,10 @@ export default function CloudMrNiivueViewer(props) {
         changesMade: drawingChanged,
         // toggleSampleDistribution,
         drawUndo: function () {
+            if (shapeDraftRef.current) {
+                cancelShapeDraft();
+                return;
+            }
             nv.drawUndo();
             resampleImage();
             if (nv.drawBitmap && nv.drawBitmap.every(function (v) { return v === 0; })) {
@@ -1225,7 +1291,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 }, "".concat(selectedVolume))] })));
+                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma, shapeDraft: shapeDraft, onShapeDraftChange: onShapeDraftChange, onApplyShapeDraft: applyShapeDraft, onCancelShapeDraft: cancelShapeDraft }, "".concat(selectedVolume))] })));
 }
 function niiToVolume(nii) {
     return {

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

@@ -2,6 +2,11 @@
  * This file patches the original NiiVue library to produce customized behaviors and effects.
  */
 import { Niivue, NVImage, NVImageFromUrlOptions } from "@niivue/niivue";
+import {
+  captureDeferredShapeDraft,
+  isDraftTooSmall,
+  shouldDeferShapeCommit,
+} from "./shapeDraftUtils.js";
 
 /*
  * bitmapOverlay — in-browser state only: remembers each voxel's label *before* Group
@@ -1399,4 +1404,37 @@ Niivue.prototype.drawCrossLinesMM = function (sliceIndex, axCorSag, axiMM, corMM
 //     );
 //     gl.bindVertexArray(this.unusedVAO);
 // }
+
+const _drawAddUndoBitmap = Niivue.prototype.drawAddUndoBitmap;
+Niivue.prototype.drawAddUndoBitmap = function cloudMrDrawAddUndoBitmap(...args) {
+  if (this._cloudMrSkipNextUndoBitmap) {
+    this._cloudMrSkipNextUndoBitmap = false;
+    return;
+  }
+  return _drawAddUndoBitmap.apply(this, args);
+};
+
+const _mouseUpListener = Niivue.prototype.mouseUpListener;
+Niivue.prototype.mouseUpListener = function cloudMrMouseUpListener() {
+  let pendingDraft = null;
+  if (shouldDeferShapeCommit(this)) {
+    this._cloudMrSkipNextUndoBitmap = true;
+    pendingDraft = captureDeferredShapeDraft(this);
+  }
+  _mouseUpListener.call(this);
+  if (!pendingDraft?.baseBitmap) {
+    return;
+  }
+  if (isDraftTooSmall(pendingDraft.ptA, pendingDraft.ptB)) {
+    this.drawBitmap.set(pendingDraft.baseBitmap);
+    this.refreshDrawing(true, false);
+    this.drawScene();
+    return;
+  }
+  this._cloudMrSuppressDrawingChangedMouseUp = true;
+  if (typeof this.onShapeDraftReady === "function") {
+    this.onShapeDraftReady(pendingDraft);
+  }
+};
+
 export { Niivue };

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

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

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

@@ -0,0 +1,175 @@
+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 { boundsToCorners, canvasDeltaToVoxDelta, clientToCanvasPos, normalizeBounds, redrawDraftShape, resizeDraftCorner, translatePt, voxToOverlayPos, voxUnderClient, } from "./shapeDraftUtils";
+var HANDLE_SIZE = 10;
+var ACCENT = "#580f8b";
+/**
+ * Overlay handles for adjusting a rectangle/ellipse draft before commit.
+ * @param {{ nv: any, draft: import('./shapeDraftUtils').ShapeDraft, onDraftChange: (d: any) => void, overlayKey?: unknown }} props
+ */
+export function ShapeDraftOverlay(_a) {
+    var _b;
+    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 _c = useState(0), setTick = _c[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 dims = (_b = nv === null || nv === void 0 ? void 0 : nv.back) === null || _b === void 0 ? void 0 : _b.dims;
+    var bounds = useMemo(function () {
+        if (!dims || !draft)
+            return null;
+        return normalizeBounds(draft.ptA, draft.ptB, dims);
+    }, [dims, draft, overlayKey]);
+    var corners = useMemo(function () {
+        if (!bounds || draft == null)
+            return [];
+        return boundsToCorners(bounds, draft.axCorSag);
+    }, [bounds, draft === null || draft === void 0 ? void 0 : draft.axCorSag, overlayKey]);
+    var cornerCss = useMemo(function () {
+        return corners
+            .map(function (vox) { return voxToOverlayPos(nv, vox, draft.axCorSag); })
+            .filter(Boolean);
+    }, [corners, draft === null || draft === void 0 ? void 0 : draft.axCorSag, nv, overlayKey]);
+    var centerCss = useMemo(function () {
+        if (!bounds || !draft)
+            return null;
+        var cx = (bounds.x1 + bounds.x2) / 2;
+        var cy = (bounds.y1 + bounds.y2) / 2;
+        var cz = (bounds.z1 + bounds.z2) / 2;
+        return voxToOverlayPos(nv, [cx, cy, cz], draft.axCorSag);
+    }, [bounds, draft === null || draft === void 0 ? void 0 : draft.axCorSag, nv, overlayKey]);
+    var boxStyle = useMemo(function () {
+        if (cornerCss.length < 4)
+            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: width, height: height };
+    }, [cornerCss]);
+    var applyDraft = useCallback(function (nextDraft) {
+        redrawDraftShape(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 currentDraft = draftRef.current;
+        if (!drag || !currentDraft)
+            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);
+            var next = __assign(__assign({}, currentDraft), { ptA: translatePt(drag.startPtA, delta), ptB: translatePt(drag.startPtB, delta) });
+            applyDraft(next);
+            return;
+        }
+        if (drag.mode === "corner") {
+            var vox = voxUnderClient(nv, event.clientX, event.clientY);
+            if (!vox)
+                return;
+            var next = resizeDraftCorner(nv, currentDraft, drag.cornerIndex, vox);
+            applyDraft(next);
+        }
+    };
+    var startDrag = useCallback(function (event, mode, cornerIndex) {
+        if (cornerIndex === void 0) { cornerIndex = -1; }
+        event.preventDefault();
+        event.stopPropagation();
+        dragRef.current = {
+            mode: mode,
+            cornerIndex: cornerIndex,
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            startPtA: __spreadArray([], draft.ptA, true),
+            startPtB: __spreadArray([], draft.ptB, true)
+        };
+        window.addEventListener("pointermove", onPointerMoveRef.current);
+        window.addEventListener("pointerup", finishDragRef.current);
+    }, [applyDraft, draft]);
+    useEffect(function () { return function () {
+        if (finishDragRef.current) {
+            finishDragRef.current();
+        }
+    }; }, []);
+    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"
+    };
+    return (_jsxs("div", __assign({ style: {
+            position: "absolute",
+            inset: 0,
+            zIndex: 2,
+            pointerEvents: "auto",
+            overflow: "hidden"
+        }, "aria-label": "Adjust ROI shape" }, { 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: "nwse-resize" }), title: "Resize shape" }, "corner-".concat(i))); })] })));
+}
+export default ShapeDraftOverlay;

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * MROptimum fork of cloudmr-ux DrawToolkit.
  * Click-away exits drawing mode when you focus elsewhere (slice controls, histogram, etc.),
@@ -31,7 +31,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import OpacityIcon from "@mui/icons-material/Opacity";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
 import DrawColorPlatte from "./DrawColorPlatte";
 import EraserPlatte from "./EraserPlatte";
 import MaskPlatte from "./MaskPlatte";
@@ -141,6 +142,8 @@ export function MroDrawToolkit(props) {
             var _a;
             if (clickTargetIsNiivueCanvas(event.target))
                 return;
+            if (props.shapeDraftActive)
+                return;
             setExpandedOption("n");
             setExpandOpacityOptions(false);
             props.setDrawingEnabled(false);
@@ -160,7 +163,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 })] })), _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 })] })), _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 })] })), _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 })] })), _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 })] })), _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 })] })), _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 })] })), _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 })] })), _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 } }) })) })), props.shapeDraftActive && (_jsxs(_Fragment, { children: [_jsx(Tooltip, __assign({ title: "Apply shape (Enter)" }, { children: _jsx(IconButton, __assign({ "aria-label": "apply shape", size: "small", onClick: function () { var _a; return (_a = props.onApplyShapeDraft) === null || _a === void 0 ? void 0 : _a.call(props); }, sx: __assign(__assign({}, toolBtnSx), { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }) }, { children: _jsx(CheckIcon, { sx: { color: "inherit" } }) })) })), _jsx(Tooltip, __assign({ title: "Cancel shape (Esc)" }, { children: _jsx(IconButton, __assign({ "aria-label": "cancel shape", size: "small", onClick: function () { var _a; return (_a = props.onCancelShapeDraft) === null || _a === void 0 ? void 0 : _a.call(props); }, sx: toolBtnSx }, { children: _jsx(CloseIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.72rem", color: "#580f8b", userSelect: "none", ml: 0.5 } }, { children: "Adjust shape, then Apply" }))] })), _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/shapeDraftUtils.d.ts

@@ -0,0 +1,60 @@
+/** @typedef {'rectangle' | 'ellipse'} ShapeDraftKind */
+/**
+ * @typedef {Object} ShapeDraft
+ * @property {[number, number, number]} ptA
+ * @property {[number, number, number]} ptB
+ * @property {number} penValue
+ * @property {number} axCorSag
+ * @property {number} penType
+ * @property {Uint8Array} baseBitmap
+ */
+export function penTypeToKind(penType: any): "rectangle" | "ellipse";
+export function normalizeBounds(ptA: any, ptB: any, dims: any): {
+    x1: number;
+    y1: number;
+    z1: number;
+    x2: number;
+    y2: number;
+    z2: number;
+};
+/** @returns {[number, number, number][]} four corners on the draft slice plane */
+export function boundsToCorners(bounds: any, axCorSag: any): [number, number, number][];
+export function cornersToPtAB(corners: any): {
+    ptA: any[];
+    ptB: any[];
+};
+export function isDraftTooSmall(ptA: any, ptB: any): boolean;
+/** @param {ShapeDraft} draft */
+export function redrawDraftShape(nv: any, draft: ShapeDraft): void;
+export function clientToCanvasPos(canvas: any, clientX: any, clientY: any): number[];
+export function canvasDeltaToVoxDelta(nv: any, startCanvas: any, endCanvas: any): number[];
+export function translatePt(pt: any, delta: any): any[];
+export function voxUnderClient(nv: any, clientX: any, clientY: any): any[] | null;
+/** @returns {{ x: number, y: number } | null} CSS pixels relative to canvas element */
+export function voxToOverlayPos(nv: any, vox: any, axCorSag: any): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Move one corner while keeping the opposite corner fixed.
+ * @param {number} cornerIndex 0..3 matching boundsToCorners order
+ */
+export function resizeDraftCorner(nv: any, draft: any, cornerIndex: number, newVox: any): any;
+export function captureDeferredShapeDraft(nv: any): {
+    ptA: any[];
+    ptB: any[];
+    penValue: any;
+    axCorSag: any;
+    penType: any;
+    baseBitmap: Uint8Array | null;
+};
+export function shouldDeferShapeCommit(nv: any): any;
+export type ShapeDraftKind = 'rectangle' | 'ellipse';
+export type ShapeDraft = {
+    ptA: [number, number, number];
+    ptB: [number, number, number];
+    penValue: number;
+    axCorSag: number;
+    penType: number;
+    baseBitmap: Uint8Array;
+};

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

@@ -0,0 +1,188 @@
+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 { NI_PEN_TYPE } from "./niivuePenType";
+/** @typedef {'rectangle' | 'ellipse'} ShapeDraftKind */
+/**
+ * @typedef {Object} ShapeDraft
+ * @property {[number, number, number]} ptA
+ * @property {[number, number, number]} ptB
+ * @property {number} penValue
+ * @property {number} axCorSag
+ * @property {number} penType
+ * @property {Uint8Array} baseBitmap
+ */
+export function penTypeToKind(penType) {
+    return penType === NI_PEN_TYPE.ELLIPSE ? "ellipse" : "rectangle";
+}
+export function normalizeBounds(ptA, ptB, dims) {
+    var dx = dims[1];
+    var dy = dims[2];
+    var dz = dims[3];
+    return {
+        x1: Math.min(Math.max(Math.min(ptA[0], ptB[0]), 0), dx - 1),
+        y1: Math.min(Math.max(Math.min(ptA[1], ptB[1]), 0), dy - 1),
+        z1: Math.min(Math.max(Math.min(ptA[2], ptB[2]), 0), dz - 1),
+        x2: Math.min(Math.max(Math.max(ptA[0], ptB[0]), 0), dx - 1),
+        y2: Math.min(Math.max(Math.max(ptA[1], ptB[1]), 0), dy - 1),
+        z2: Math.min(Math.max(Math.max(ptA[2], ptB[2]), 0), dz - 1)
+    };
+}
+/** @returns {[number, number, number][]} four corners on the draft slice plane */
+export function boundsToCorners(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 cornersToPtAB(corners) {
+    return {
+        ptA: __spreadArray([], corners[0], true),
+        ptB: __spreadArray([], corners[3], true)
+    };
+}
+export function isDraftTooSmall(ptA, ptB) {
+    return (Math.abs(ptA[0] - ptB[0]) < 1 &&
+        Math.abs(ptA[1] - ptB[1]) < 1 &&
+        Math.abs(ptA[2] - ptB[2]) < 1);
+}
+/** @param {ShapeDraft} draft */
+export function redrawDraftShape(nv, draft) {
+    if (!(nv === null || nv === void 0 ? void 0 : nv.drawBitmap) || !(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+        return;
+    nv.drawBitmap.set(draft.baseBitmap);
+    nv.drawPenAxCorSag = draft.axCorSag;
+    if (draft.penType === NI_PEN_TYPE.RECTANGLE) {
+        nv.drawRectangleMask(draft.ptA, draft.ptB, draft.penValue);
+    }
+    else {
+        nv.drawEllipseMask(draft.ptA, draft.ptB, draft.penValue);
+    }
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+}
+export function clientToCanvasPos(canvas, clientX, clientY) {
+    var rect = canvas.getBoundingClientRect();
+    var scaleX = canvas.width / rect.width;
+    var scaleY = canvas.height / rect.height;
+    return [(clientX - rect.left) * scaleX, (clientY - rect.top) * scaleY];
+}
+export function canvasDeltaToVoxDelta(nv, startCanvas, endCanvas) {
+    var f0 = nv.canvasPos2frac(startCanvas);
+    var f1 = nv.canvasPos2frac(endCanvas);
+    if (!f0 || !f1 || f0[0] < 0 || f1[0] < 0) {
+        return [0, 0, 0];
+    }
+    var v0 = nv.frac2vox(f0);
+    var v1 = nv.frac2vox(f1);
+    return [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]];
+}
+export function translatePt(pt, delta) {
+    return [pt[0] + delta[0], pt[1] + delta[1], pt[2] + delta[2]];
+}
+export function voxUnderClient(nv, clientX, clientY) {
+    var canvas = nv.canvas || document.getElementById("niiCanvas");
+    if (!canvas)
+        return null;
+    var canvasPos = clientToCanvasPos(canvas, clientX, clientY);
+    var frac = nv.canvasPos2frac(canvasPos);
+    if (!frac || frac[0] < 0)
+        return null;
+    var vox = nv.frac2vox(frac);
+    return [vox[0], vox[1], vox[2]];
+}
+/** @returns {{ x: number, y: number } | null} CSS pixels relative to canvas element */
+export function voxToOverlayPos(nv, vox, axCorSag) {
+    var canvas = nv.canvas || document.getElementById("niiCanvas");
+    if (!canvas)
+        return null;
+    var frac = nv.vox2frac(vox);
+    var hit = nv.frac2canvasPosWithTile(frac, axCorSag);
+    if (!hit)
+        return null;
+    var rect = canvas.getBoundingClientRect();
+    return {
+        x: (hit.pos[0] / canvas.width) * rect.width,
+        y: (hit.pos[1] / canvas.height) * rect.height
+    };
+}
+/**
+ * Move one corner while keeping the opposite corner fixed.
+ * @param {number} cornerIndex 0..3 matching boundsToCorners order
+ */
+export function resizeDraftCorner(nv, draft, cornerIndex, newVox) {
+    var _a;
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims)
+        return draft;
+    var bounds = normalizeBounds(draft.ptA, draft.ptB, dims);
+    var corners = boundsToCorners(bounds, draft.axCorSag);
+    corners[cornerIndex] = __spreadArray([], newVox, true);
+    var next = cornersToPtAB(corners);
+    return __assign(__assign({}, draft), { ptA: next.ptA, ptB: next.ptB });
+}
+export function captureDeferredShapeDraft(nv) {
+    var frac = nv.canvasPos2frac(nv.mousePos);
+    var ptB = __spreadArray([], nv.drawShapeStartLocation, true);
+    if (frac && frac[0] >= 0) {
+        var vox = nv.frac2vox(frac);
+        ptB = [vox[0], vox[1], vox[2]];
+    }
+    return {
+        ptA: __spreadArray([], nv.drawShapeStartLocation, true),
+        ptB: ptB,
+        penValue: nv.opts.penValue,
+        axCorSag: nv.drawPenAxCorSag,
+        penType: nv.opts.penType,
+        baseBitmap: nv.drawShapePreviewBitmap
+            ? new Uint8Array(nv.drawShapePreviewBitmap)
+            : null
+    };
+}
+export function shouldDeferShapeCommit(nv) {
+    var penType = nv.opts.penType;
+    return (nv.opts.deferShapeCommit &&
+        nv.opts.drawingEnabled &&
+        !Number.isNaN(nv.drawShapeStartLocation[0]) &&
+        (penType === NI_PEN_TYPE.RECTANGLE || penType === NI_PEN_TYPE.ELLIPSE) &&
+        nv.drawShapePreviewBitmap);
+}

package/package.json

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