cloudmr-ux 4.7.2 → 4.7.3

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

@@ -63,7 +63,7 @@ import { SettingsPanel } from './SettingsPanel';
 import { NumberPicker } from './NumberPicker';
 import { ColorPicker } from './ColorPicker';
 import { LayersPanel } from './LayersPanel';
-import { applyPenDraft, cancelPenDraft, fillPolylineDraft, polylineDraftFromNv, syncPolylineDraftToNv, } from './penDraftUtils';
+import { applyPenDraft, cancelPenDraft, fillPolylineDraft, fillFreehandDraft, polylineDraftFromNv, syncPolylineDraftToNv, } from './penDraftUtils';
 import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
 import { Niivue } from './NiivuePatcher';
 import NVSwitch from './Switch';
@@ -104,7 +104,7 @@ export var nv = new Niivue({
     crosshairColor: [1, 1, 0],
     fontColor: [0.00, 0.94, 0.37, 1],
     isNearestInterpolation: true,
-    isFilledPen: true,
+    isFilledPen: false,
     penValue: 1,
     penType: NI_PEN_TYPE.PEN
 });
@@ -595,7 +595,7 @@ export default function CloudMrNiivueViewer(props) {
         else if (drawShapeToolRef.current === "pen") {
             nv.opts.deferFreehandCommit = penDrawModeRef.current === "freehand";
             nv.opts.polylinePenMode = penDrawModeRef.current === "polyline";
-            nv.opts.isFilledPen = penDrawModeRef.current === "freehand";
+            nv.opts.isFilledPen = false;
         }
     }
     function deactivateDrawTools() {
@@ -825,7 +825,7 @@ export default function CloudMrNiivueViewer(props) {
         setPenDrawMode(mode);
         penDrawModeRef.current = mode;
         nv.opts.polylinePenMode = mode === "polyline";
-        nv.opts.isFilledPen = mode === "freehand";
+        nv.opts.isFilledPen = false;
         nv.opts.deferFreehandCommit =
             drawShapeToolRef.current === "pen" && mode === "freehand";
         if (mode === "freehand") {
@@ -874,12 +874,20 @@ export default function CloudMrNiivueViewer(props) {
         }
         resampleImage();
     }
-    function fillPolylineDraftHandler() {
+    function fillPenDraftHandler() {
         var draft = penDraftRef.current;
-        if (!draft || draft.kind !== "polyline" || draft.vertices.length < 3)
+        if (!draft)
             return;
-        var next = fillPolylineDraft(nv, draft);
-        onPenDraftChange(next);
+        if (draft.kind === "polyline") {
+            if (draft.vertices.length < 3)
+                return;
+            onPenDraftChange(fillPolylineDraft(nv, draft));
+        }
+        else if (draft.kind === "freehand") {
+            if (!draft.pathVertices || draft.pathVertices.length < 3)
+                return;
+            onPenDraftChange(fillFreehandDraft(nv, draft));
+        }
     }
     function onPenDraftChange(draft) {
         setPenDraft(draft);
@@ -951,6 +959,7 @@ export default function CloudMrNiivueViewer(props) {
         nv._cloudMrPolylineVertices = null;
         nv._cloudMrPolylineBaseBitmap = null;
         nv._cloudMrPolylineSessionStartBitmap = null;
+        nv._cloudMrFreehandPath = null;
         nv._cloudMrToolKindBitmap = null;
     }
     function clearDrawingHandler() {
@@ -1619,7 +1628,7 @@ export default function CloudMrNiivueViewer(props) {
         onCancelPolyline: cancelPolylineDraft,
         onApplyPenDraft: applyPenDraftHandler,
         onCancelPenDraft: cancelPenDraftHandler,
-        onFillPenDraft: fillPolylineDraftHandler,
+        onFillPenDraft: fillPenDraftHandler,
         penDraftActive: penDraft != null,
         brushSize: brushSize,
         updateBrushSize: nvUpdateBrushSize,

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

@@ -1560,6 +1560,7 @@ Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
   if (shouldDeferFreehandCommit(this) && this.drawBitmap) {
     this._cloudMrFreehandSessionStartBitmap = this.drawBitmap.slice();
     this._cloudMrFreehandAxCorSag = -1;
+    this._cloudMrFreehandPath = [];
   }
   _mouseDownListener.call(this, e);
   if (shouldDeferFreehandCommit(this) && this._cloudMrFreehandSessionStartBitmap) {
@@ -1567,6 +1568,10 @@ Niivue.prototype.mouseDownListener = function cloudMrMouseDownListener(e) {
     if (axCorSag >= 0) {
       this._cloudMrFreehandAxCorSag = axCorSag;
     }
+    const vox = voxFromMouse(this);
+    if (vox && this._cloudMrFreehandPath) {
+      this._cloudMrFreehandPath.push([vox[0], vox[1], vox[2]]);
+    }
   }
 };
 
@@ -1593,6 +1598,19 @@ Niivue.prototype.mouseClick = function cloudMrMouseClick(...args) {
 const _mouseMoveListener = Niivue.prototype.mouseMoveListener;
 Niivue.prototype.mouseMoveListener = function cloudMrMouseMoveListener(event) {
   const result = _mouseMoveListener.call(this, event);
+  if (shouldDeferFreehandCommit(this) && this.uiData?.isDragging) {
+    const vox = voxFromMouse(this);
+    if (vox) {
+      if (!this._cloudMrFreehandPath) {
+        this._cloudMrFreehandPath = [];
+      }
+      const path = this._cloudMrFreehandPath;
+      const last = path[path.length - 1];
+      if (!last || last[0] !== vox[0] || last[1] !== vox[1] || last[2] !== vox[2]) {
+        path.push([vox[0], vox[1], vox[2]]);
+      }
+    }
+  }
   if (isPolylinePenActive(this) && this._cloudMrPolylineVertices?.length > 0) {
     previewPolylineSegment(this);
   }

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

@@ -53,14 +53,15 @@ export default function DrawColorPlatte(_a) {
         }, direction: "column", spacing: 0.5, sx: { py: expanded ? 0.5 : 0 } }, { children: [showPenModes && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.75, pt: 0.25 } }, { children: [_jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("freehand"); }, sx: modeBtnSx(penDrawMode === "freehand") }, { children: "Freehand" })), _jsx(Button, __assign({ size: "small", onClick: function () { return onPenDrawModeChange === null || onPenDrawModeChange === void 0 ? void 0 : onPenDrawModeChange("polyline"); }, sx: modeBtnSx(penDrawMode === "polyline") }, { children: "Polyline" }))] }))), showPenModes && expanded && updateBrushSize && (_jsx(BrushSizeSlider, { label: "Line thickness", brushSize: brushSize, updateBrushSize: updateBrushSize })), _jsx(Stack, __assign({ direction: "row" }, { children: FILLED_COLORS.map(function (color, index) { return (_jsx(IconButton, __assign({ onClick: function () {
                         updateDrawPen({ target: { value: index + 1 } });
                         setDrawingEnabled(true);
-                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each vertex to draw connected line segments" }))), showPenModes && penDraftActive && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [penDrawMode === "polyline" && polylineVertexCount >= 3 && (_jsx(Tooltip, __assign({ title: "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "fill polyline", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
+                    } }, { children: _jsx(FiberManualRecordIcon, { sx: color.sx }) }), index)); }) })), showPenModes && penDrawMode === "polyline" && expanded && polylineVertexCount === 0 && (_jsx(Typography, __assign({ sx: { px: 1, pb: 0.5, fontSize: "0.68rem", color: "#aaa", userSelect: "none" } }, { children: "Click each vertex to draw connected line segments" }))), showPenModes && penDraftActive && expanded && (_jsxs(Stack, __assign({ direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, sx: { px: 1, py: 0.5, borderTop: "1px solid #555", width: "100%" } }, { children: [(penDrawMode === "polyline" && polylineVertexCount >= 3) ||
+                        (penDrawMode === "freehand" && penDraftActive) ? (_jsx(Tooltip, __assign({ title: "Fill interior (keeps outline editable until Apply)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "fill pen draft", onClick: function () { return onFillPenDraft === null || onFillPenDraft === void 0 ? void 0 : onFillPenDraft(); }, sx: {
                                 color: "#c9a0e8",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",
                                 minWidth: 0,
                                 py: 0.25,
                                 px: 0.75
-                            } }, { children: "Fill" })) }))), _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
+                            } }, { children: "Fill" })) }))) : null, _jsx(Tooltip, __assign({ title: "Apply shape (enter or right-click)" }, { children: _jsx(Button, __assign({ size: "small", "aria-label": "apply pen draft", onClick: function () { return onApplyPenDraft === null || onApplyPenDraft === void 0 ? void 0 : onApplyPenDraft(); }, startIcon: _jsx(CheckIcon, { sx: { fontSize: ACTION_ICON_SIZE } }), sx: {
                                 color: "#c9a0e8",
                                 fontSize: ACTION_FONT_SIZE,
                                 textTransform: "none",

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

@@ -7,6 +7,7 @@
  * @property {number} penValue
  * @property {[number, number, number][]} [vertices]
  * @property {[number, number, number][]} [strokeVoxels]
+ * @property {[number, number, number][]} [pathVertices]
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
  * @property {boolean} [filled]
  */
@@ -23,6 +24,7 @@ export function captureFreehandDraft(nv: any, sessionStartBitmap: any, axCorSag:
     axCorSag: any;
     penValue: any;
     strokeVoxels: number[][];
+    pathVertices: any;
     bounds: {
         x1: number;
         y1: number;
@@ -46,6 +48,8 @@ export function polylineDraftFromNv(nv: any, { filled }?: {
     penValue: any;
     filled: boolean;
 } | null;
+/** Fill freehand interior from the traced stroke path (outline stays editable until Apply). */
+export function fillFreehandDraft(nv: any, draft: any): any;
 /** Fill polyline interior without closing the outline or committing the draft. */
 export function fillPolylineDraft(nv: any, draft: any): any;
 export function applyPenDraft(nv: any, draft: any): void;
@@ -70,6 +74,7 @@ export type PenDraft = {
     penValue: number;
     vertices?: [number, number, number][] | undefined;
     strokeVoxels?: [number, number, number][] | undefined;
+    pathVertices?: [number, number, number][] | undefined;
     bounds?: {
         x1: number;
         y1: number;

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

@@ -30,6 +30,7 @@ import { voxFromMouse } from "./polylinePenUtils";
  * @property {number} penValue
  * @property {[number, number, number][]} [vertices]
  * @property {[number, number, number][]} [strokeVoxels]
+ * @property {[number, number, number][]} [pathVertices]
  * @property {{ x1: number, y1: number, x2: number, y2: number, z1: number, z2: number }} [bounds]
  * @property {boolean} [filled]
  */
@@ -39,8 +40,7 @@ export function isEraserActive(nv) {
         nv.opts.penValue === 0);
 }
 export function isFreehandPenActive(nv) {
-    return (nv.opts.isFilledPen &&
-        nv.opts.drawingEnabled &&
+    return (nv.opts.drawingEnabled &&
         nv.opts.penType === NI_PEN_TYPE.PEN &&
         !nv.opts.polylinePenMode &&
         nv.opts.penValue > 0);
@@ -82,7 +82,7 @@ export function syncPolylineDraftToNv(nv, draft) {
     nv._cloudMrPolylineAxCorSag = draft.axCorSag;
 }
 export function captureFreehandDraft(nv, sessionStartBitmap, axCorSag) {
-    var _a;
+    var _a, _b;
     if (!nv.drawBitmap || !sessionStartBitmap)
         return null;
     var penValue = nv.opts.penValue;
@@ -108,7 +108,7 @@ export function captureFreehandDraft(nv, sessionStartBitmap, axCorSag) {
     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];
+        var _c = strokeVoxels_1[_i], x = _c[0], y = _c[1], z = _c[2];
         x1 = Math.min(x1, x);
         y1 = Math.min(y1, y);
         z1 = Math.min(z1, z);
@@ -116,23 +116,86 @@ export function captureFreehandDraft(nv, sessionStartBitmap, axCorSag) {
         y2 = Math.max(y2, y);
         z2 = Math.max(z2, z);
     }
+    var pathVertices = ((_b = nv._cloudMrFreehandPath) === null || _b === void 0 ? void 0 : _b.length)
+        ? nv._cloudMrFreehandPath.map(function (v) { return __spreadArray([], v, true); })
+        : undefined;
+    nv._cloudMrFreehandPath = [];
     return {
         kind: "freehand",
         baseBitmap: new Uint8Array(sessionStartBitmap),
         axCorSag: axCorSag,
         penValue: penValue,
         strokeVoxels: strokeVoxels,
+        pathVertices: pathVertices,
         bounds: { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 }
     };
 }
-export function redrawFreehandDraft(nv, draft) {
+function collectStrokeVoxelsFromBitmap(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)
+    var dims = (_a = nv.back) === null || _a === void 0 ? void 0 : _a.dims;
+    if (!dims || !nv.drawBitmap || !(draft === null || draft === void 0 ? void 0 : draft.baseBitmap))
+        return draft.strokeVoxels || [];
+    var strokeVoxels = [];
+    for (var i = 0; i < nv.drawBitmap.length; i++) {
+        if (nv.drawBitmap[i] === draft.penValue && draft.baseBitmap[i] !== draft.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]);
+        }
+    }
+    return strokeVoxels;
+}
+function boundsFromVoxels(voxels) {
+    var x1 = Infinity;
+    var y1 = Infinity;
+    var z1 = Infinity;
+    var x2 = -Infinity;
+    var y2 = -Infinity;
+    var z2 = -Infinity;
+    for (var _i = 0, voxels_1 = voxels; _i < voxels_1.length; _i++) {
+        var _a = voxels_1[_i], x = _a[0], y = _a[1], z = _a[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 { x1: x1, y1: y1, z1: z1, x2: x2, y2: y2, z2: z2 };
+}
+export function redrawFreehandDraft(nv, draft) {
+    var _a, _b, _c;
+    if (!(draft === null || draft === void 0 ? void 0 : 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.drawPenAxCorSag = draft.axCorSag;
+    if (!draft.filled) {
+        if (!((_a = draft.strokeVoxels) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        for (var _i = 0, _d = draft.strokeVoxels; _i < _d.length; _i++) {
+            var _e = _d[_i], x = _e[0], y = _e[1], z = _e[2];
+            nv.drawPt(x, y, z, draft.penValue);
+        }
+    }
+    else if (((_b = draft.pathVertices) === null || _b === void 0 ? void 0 : _b.length) >= 3) {
+        for (var _f = 0, _g = draft.strokeVoxels || []; _f < _g.length; _f++) {
+            var _h = _g[_f], x = _h[0], y = _h[1], z = _h[2];
+            nv.drawPt(x, y, z, draft.penValue);
+        }
+        nv.drawPenFillPts = draft.pathVertices.map(function (v) { return __spreadArray([], v, true); });
+        nv._cloudMrSkipNextUndoBitmap = true;
+        nv.drawPenFilled();
+    }
+    else if ((_c = draft.strokeVoxels) === null || _c === void 0 ? void 0 : _c.length) {
+        for (var _j = 0, _k = draft.strokeVoxels; _j < _k.length; _j++) {
+            var _l = _k[_j], x = _l[0], y = _l[1], z = _l[2];
+            nv.drawPt(x, y, z, draft.penValue);
+        }
+    }
+    else {
+        return;
     }
     nv.refreshDrawing(false, false);
     nv.drawScene();
@@ -239,6 +302,21 @@ export function polylineDraftFromNv(nv, _a) {
         filled: filled
     };
 }
+/** Fill freehand interior from the traced stroke path (outline stays editable until Apply). */
+export function fillFreehandDraft(nv, draft) {
+    var path = draft.pathVertices;
+    if (!path || path.length < 3)
+        return draft;
+    redrawFreehandDraft(nv, __assign(__assign({}, draft), { filled: false }));
+    nv.drawPenAxCorSag = draft.axCorSag;
+    nv.drawPenFillPts = path.map(function (v) { return __spreadArray([], v, true); });
+    nv._cloudMrSkipNextUndoBitmap = true;
+    nv.drawPenFilled();
+    nv.refreshDrawing(false, false);
+    nv.drawScene();
+    var strokeVoxels = collectStrokeVoxelsFromBitmap(nv, draft);
+    return __assign(__assign({}, draft), { filled: true, strokeVoxels: strokeVoxels, bounds: boundsFromVoxels(strokeVoxels) });
+}
 /** Fill polyline interior without closing the outline or committing the draft. */
 export function fillPolylineDraft(nv, draft) {
     if (!(draft === null || draft === void 0 ? void 0 : draft.vertices) || draft.vertices.length < 3)

package/package.json

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