cloudmr-ux 4.8.5 → 4.8.7

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

@@ -636,20 +636,9 @@ export default function CloudMrNiivueViewer(props) {
                 if (next.kind === "polyline") {
                     var count = (_c = (_b = next.vertices) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
                     if (count >= 2) {
-                        // Redraw segments in the new color, then update the base so the
-                        // rubber-band preview also uses the new color.
                         redrawPolylineDraft(nv, __assign(__assign({}, next), { filled: false }));
                         if (nv.drawBitmap)
                             nv._cloudMrPolylineBaseBitmap = nv.drawBitmap.slice();
-                        // Re-apply fill on top when polygon is closeable (base stays segments-only).
-                        if (count >= 3) {
-                            nv.drawPenAxCorSag = next.axCorSag;
-                            nv.drawPenFillPts = next.vertices.map(function (v) { return __spreadArray([], v, true); });
-                            nv._cloudMrSkipNextUndoBitmap = true;
-                            nv.drawPenFilled();
-                            nv.refreshDrawing(false, false);
-                            nv.drawScene();
-                        }
                     }
                 }
                 else if (next.kind === "freehand") {
@@ -943,8 +932,8 @@ export default function CloudMrNiivueViewer(props) {
         }
     }
     function applyPenDraftHandler(_a) {
-        var _b, _c, _d, _e, _f;
-        var _g = _a === void 0 ? {} : _a, _h = _g.keepTool, keepTool = _h === void 0 ? false : _h;
+        var _b, _c, _d, _e, _f, _g;
+        var _h = _a === void 0 ? {} : _a, _j = _h.keepTool, keepTool = _j === void 0 ? false : _j;
         var draft = penDraftRef.current;
         if (!draft)
             return;
@@ -973,9 +962,37 @@ export default function CloudMrNiivueViewer(props) {
             setPolylineVertexCount(0);
         }
         else if (draft._registryId && nv._cloudMrPolylineRegistry) {
-            // Was a committed polyline reopened as a freehand draft (move-only).
-            // Remove the stale registry entry so it is not matched on future clicks.
-            nv._cloudMrPolylineRegistry = nv._cloudMrPolylineRegistry.filter(function (e) { return e.id !== draft._registryId; });
+            // Was a committed polyline reopened as a freehand draft (move-only, possibly recolored).
+            // Re-register with the current penValue and voxel positions so future clicks
+            // open it with the correct (possibly changed) color.
+            var entryIdx = nv._cloudMrPolylineRegistry.findIndex(function (e) { return e.id === draft._registryId; });
+            if (entryIdx >= 0) {
+                var old = nv._cloudMrPolylineRegistry[entryIdx];
+                // Collect the newly committed voxel positions using the draft's current penValue.
+                var newIndices = new Set();
+                if (nv.drawBitmap && draft.baseBitmap) {
+                    var pv = draft.penValue;
+                    for (var i = 0; i < nv.drawBitmap.length; i++) {
+                        if (nv.drawBitmap[i] === pv && draft.baseBitmap[i] !== pv)
+                            newIndices.add(i);
+                    }
+                }
+                // Fall back to stroke voxel positions if bitmap diff returned nothing.
+                if (newIndices.size === 0 && draft.strokeVoxels && ((_g = nv.back) === null || _g === void 0 ? void 0 : _g.dims)) {
+                    var dx = nv.back.dims[1];
+                    var dy = nv.back.dims[2];
+                    for (var _i = 0, _k = draft.strokeVoxels; _i < _k.length; _i++) {
+                        var _l = _k[_i], x = _l[0], y = _l[1], z = _l[2];
+                        newIndices.add(x + y * dx + z * dx * dy);
+                    }
+                }
+                if (newIndices.size > 0) {
+                    nv._cloudMrPolylineRegistry[entryIdx] = __assign(__assign({}, old), { penValue: draft.penValue, voxelIndices: newIndices });
+                }
+                else {
+                    nv._cloudMrPolylineRegistry = nv._cloudMrPolylineRegistry.filter(function (e) { return e.id !== draft._registryId; });
+                }
+            }
         }
         setPenDraft(null);
         penDraftRef.current = null;
@@ -1051,27 +1068,23 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.deferFreehandCommit = false;
         nv.opts.polylinePenMode = false;
         nvSetDrawingEnabled(false);
+        // Sync palette to the reopened ROI's color so the user can change it.
+        if (draft.penValue != null) {
+            setDrawPen(draft.penValue);
+            nv.setPenValue(draft.penValue, false);
+        }
     };
     nv.onPolylineChange = function (count) {
-        var _a, _b;
+        var _a;
         setPolylineVertexCount(count);
         if (drawShapeToolRef.current === "polyline" && count >= 2) {
-            var draft = polylineDraftFromNv(nv, { filled: count >= 3 });
+            var draft = polylineDraftFromNv(nv, { filled: false });
             if (draft) {
-                if (count >= 3) {
-                    // Show fill live on canvas after each vertex commit.
-                    // Save/restore _cloudMrPolylineBaseBitmap (segments-only) so the
-                    // rubber-band preview still works correctly on mouse move.
-                    var savedBase = (_a = nv._cloudMrPolylineBaseBitmap) === null || _a === void 0 ? void 0 : _a.slice();
-                    redrawPolylineDraft(nv, draft);
-                    if (savedBase)
-                        nv._cloudMrPolylineBaseBitmap = savedBase;
-                }
                 setPenDraft(draft);
                 penDraftRef.current = draft;
             }
         }
-        else if (((_b = penDraftRef.current) === null || _b === void 0 ? void 0 : _b.kind) === "polyline") {
+        else if (((_a = penDraftRef.current) === null || _a === void 0 ? void 0 : _a.kind) === "polyline") {
             setPenDraft(null);
             penDraftRef.current = null;
         }
@@ -1294,6 +1307,11 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.penType = draft.penType;
         nv.opts.deferShapeCommit = true;
         nvSetDrawingEnabled(false);
+        // Sync palette to the reopened shape's color so the user can change it.
+        if (draft.penValue != null) {
+            setDrawPen(draft.penValue);
+            nv.setPenValue(draft.penValue, false);
+        }
     };
     nv.onApplyActiveDraft = function () {
         applyActiveDraftIfAny();
@@ -1309,34 +1327,25 @@ export default function CloudMrNiivueViewer(props) {
             return undefined;
         }
         var canvas = document.getElementById("niiCanvas");
+        if (!canvas) {
+            return undefined;
+        }
         var applyOnRightClick = function (event) {
             var _a;
             event.preventDefault();
             event.stopPropagation();
             (_a = nv.onApplyActiveDraft) === null || _a === void 0 ? void 0 : _a.call(nv);
         };
-        // Right-click on canvas: apply via Niivue's own handler.
-        if (canvas) {
-            canvas.addEventListener("contextmenu", applyOnRightClick, true);
-        }
-        // Any mousedown outside the canvas exits editing mode.
-        // Clicks on the canvas are handled by Niivue's own mouseUpListener,
-        // so we skip them here to avoid a double-apply race.
-        var onDocMouseDown = function (event) {
-            var _a;
-            var target = event.target;
-            var onCanvas = target === canvas || (canvas && canvas.contains(target));
-            if (onCanvas)
-                return;
-            // Left or right click anywhere outside the canvas → apply draft.
-            (_a = nv.onApplyActiveDraft) === null || _a === void 0 ? void 0 : _a.call(nv);
+        var onMouseDown = function (event) {
+            if (event.button === 2) {
+                applyOnRightClick(event);
+            }
         };
-        document.addEventListener("mousedown", onDocMouseDown, true);
+        canvas.addEventListener("mousedown", onMouseDown, true);
+        canvas.addEventListener("contextmenu", applyOnRightClick, true);
         return function () {
-            if (canvas) {
-                canvas.removeEventListener("contextmenu", applyOnRightClick, true);
-            }
-            document.removeEventListener("mousedown", onDocMouseDown, true);
+            canvas.removeEventListener("mousedown", onMouseDown, true);
+            canvas.removeEventListener("contextmenu", applyOnRightClick, true);
         };
     }, [shapeDraft, penDraft]);
     React.useEffect(function () {

package/dist/CmrComponents/tk-dualrange/TKDualRange.js

@@ -10,12 +10,71 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import "./tk-dual-range.css";
 var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
+// Display REAL-space values; use scientific notation for small non-zero values
+// so they don't display as "0.000". Use type="text" because type="number" can
+// show "0" for very small values instead of scientific notation.
+function fmt(v, precision) {
+    if (!Number.isFinite(v))
+        return "";
+    return v !== 0 && Math.abs(v) < 0.01
+        ? Number(v).toExponential(precision)
+        : v.toFixed(precision);
+}
+function parse(s) {
+    var n = Number(s);
+    return Number.isFinite(n) ? n : NaN;
+}
+/**
+ * A text input that holds a local string draft while the user is typing,
+ * committing only on blur or Enter. This lets the user type multi-digit and
+ * decimal values without mid-entry validation snapping the field.
+ * Shows a small red "Out of range" message when the committed value falls
+ * outside [lo, hi].
+ */
+function DeferredInput(_a) {
+    var committed = _a.committed, onCommit = _a.onCommit, lo = _a.lo, hi = _a.hi, className = _a.className;
+    var _b = useState(committed), draft = _b[0], setDraft = _b[1];
+    var _c = useState(false), focused = _c[0], setFocused = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    // Sync external changes into the field only when the user is not typing.
+    useEffect(function () {
+        if (!focused)
+            setDraft(committed);
+    }, [committed, focused]);
+    var commit = function (value) {
+        var n = Number(value);
+        if (!Number.isFinite(n)) {
+            setError("\"".concat(value, "\" is not a valid number"));
+        }
+        else if (n < lo || n > hi) {
+            setError("".concat(value.trim(), " is out of range"));
+        }
+        else {
+            setError(null);
+        }
+        onCommit(value);
+        // After commit the parent re-formats, so sync back to avoid a stale draft.
+        setDraft(committed);
+    };
+    return (_jsxs("div", __assign({ className: "tkdr__input-wrap" }, { children: [_jsx("input", { className: "".concat(className !== null && className !== void 0 ? className : "").concat(error ? " tkdr__num--error" : ""), type: "text", inputMode: "decimal", value: draft, onChange: function (e) { return setDraft(e.target.value); }, onFocus: function () {
+                    setFocused(true);
+                    setError(null);
+                }, onBlur: function (e) {
+                    setFocused(false);
+                    commit(e.target.value);
+                }, onKeyDown: function (e) {
+                    if (e.key === "Enter") {
+                        e.target.blur();
+                    }
+                } }), error && _jsx("span", __assign({ className: "tkdr__error" }, { children: error }))] })));
+}
 export default function TKDualRange(_a) {
     var _b;
     var _c = _a.name, name = _c === void 0 ? "Values" : _c, minDomain = _a.minDomain, maxDomain = _a.maxDomain, valueLow = _a.valueLow, valueHigh = _a.valueHigh, onChangeLow = _a.onChangeLow, onChangeHigh = _a.onChangeHigh, _d = _a.transform, transform = _d === void 0 ? function (x) { return x; } : _d, _e = _a.inverse, inverse = _e === void 0 ? function (y) { return y; } : _e, step = _a.step, _f = _a.precision, precision = _f === void 0 ? 3 : _f, _g = _a.accentColor, accentColor = _g === void 0 ? "#580f8b" : _g;
-    // Map domain & current values into RENDER space (like TestKarts)
+    // Map domain & current values into RENDER space
     var tMin = transform(minDomain);
     var tMax = transform(maxDomain);
     var tLow = transform(valueLow);
@@ -23,7 +82,7 @@ export default function TKDualRange(_a) {
     var span = Math.max(1e-12, tMax - tMin);
     var pct = function (t) { return ((t - tMin) / span) * 100; };
     var s = step !== null && step !== void 0 ? step : Math.max(span * 0.001, Number.EPSILON);
-    // Keep ends from crossing; clamp in REAL space against the other end
+    // Keep ends from crossing; clamp in REAL space against the other end.
     var handleLowRender = function (nextRender) {
         var nextReal = clamp(inverse(nextRender), minDomain, valueHigh);
         onChangeLow(nextReal);
@@ -32,37 +91,13 @@ export default function TKDualRange(_a) {
         var nextReal = clamp(inverse(nextRender), valueLow, maxDomain);
         onChangeHigh(nextReal);
     };
-    // Display REAL-space values (matching the color bar); use scientific notation for
-    // small non-zero values so they don't display as "0.000". Use type="text" because
-    // type="number" can show "0" for very small values instead of scientific notation.
-    var fmt = function (v) {
-        return Number.isFinite(v)
-            ? v !== 0 && Math.abs(v) < 0.01
-                ? Number(v).toExponential(precision)
-                : v.toFixed(precision)
-            : "";
-    };
-    var parse = function (s) {
-        var n = Number(s);
-        return Number.isFinite(n) ? n : NaN;
-    };
-    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx("input", { className: "tkdr__num", type: "text", inputMode: "decimal", value: fmt(valueLow), onChange: function (e) {
-                                    var n = parse(e.target.value);
-                                    if (!Number.isFinite(n))
-                                        return;
-                                    onChangeLow(clamp(n, minDomain, valueHigh));
-                                }, onBlur: function (e) {
-                                    var n = parse(e.target.value);
+    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueLow, precision), lo: minDomain, hi: valueHigh, onCommit: function (raw) {
+                                    var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
                                     onChangeLow(clamp(n, minDomain, valueHigh));
-                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx("input", { className: "tkdr__num", type: "text", inputMode: "decimal", value: fmt(valueHigh), onChange: function (e) {
-                                    var n = parse(e.target.value);
-                                    if (!Number.isFinite(n))
-                                        return;
-                                    onChangeHigh(clamp(n, valueLow, maxDomain));
-                                }, onBlur: function (e) {
-                                    var n = parse(e.target.value);
+                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueHigh, precision), lo: valueLow, hi: maxDomain, onCommit: function (raw) {
+                                    var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
                                     onChangeHigh(clamp(n, valueLow, maxDomain));

package/dist/CmrComponents/tk-dualrange/tk-dual-range.css

@@ -140,3 +140,25 @@
   font-weight: 400;
   font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
+
+/* wrapper that stacks the input + error text */
+.tkdr__input-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+/* red outline when the value is invalid */
+.tkdr__num--error {
+  border-color: #d32f2f;
+  outline-color: #d32f2f;
+}
+
+/* small red validation message */
+.tkdr__error {
+  font-size: 0.7rem;
+  color: #d32f2f;
+  line-height: 1;
+  white-space: nowrap;
+}

package/package.json

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