copper3d 3.3.3 → 3.4.1

package/dist/bundle.esm.js

@@ -72064,6 +72064,175 @@ class UndoManager {
     }
 }
 
+/**
+ * MarchingSquares — Extract vector contours from a 2D voxel label grid.
+ *
+ * For each label, produces a `Path2D` whose subpaths are small per-cell
+ * polygons. The polygons tile the region occupied by the target label; the
+ * union (via `ctx.fill(path, 'nonzero')`) is the label's silhouette on the
+ * voxel grid.
+ *
+ * Coordinate convention:
+ *   - Voxel (i, j) occupies the unit square [i, i+1] × [j, j+1] in render
+ *     space, with its center at (i+0.5, j+0.5). This matches ITK-SNAP /
+ *     standard imaging viewers and the existing `renderSliceToCanvas`
+ *     `scale(scaledW / W, scaledH / H)` mapping.
+ *   - Marching squares treats voxels as point samples at their centers:
+ *     cell (i, j) has corners at voxel centers (i+0.5, j+0.5),
+ *     (i+1.5, j+0.5), (i+1.5, j+1.5), (i+0.5, j+1.5).
+ *   - This produces 45°-cut contours (diamonds for isolated voxels, rounded
+ *     corners for connected regions) that stay within the voxel-square
+ *     bounds, so the rendered silhouette is a slightly-inset version of the
+ *     ITK-SNAP silhouette with smooth diagonals.
+ *
+ * Saddle cases (5 and 10) use a fixed convention: the two in-corners are
+ * treated as disconnected within the cell (4-connectivity interpretation).
+ */
+/**
+ * Per-cell polygon lookup for the 16 marching-squares cases.
+ *
+ * Corner bit layout:  TL=8, TR=4, BR=2, BL=1
+ *
+ * Coordinates are within the unit cell, 0 ≤ x ≤ 1, 0 ≤ y ≤ 1,
+ * where (0, 0) is the TL corner of the cell. Add (i, j) to get absolute.
+ *
+ * Each case may emit 0, 1, or 2 polygons (saddles → 2).
+ * Polygon vertices are listed in a CCW order in screen space (y-down),
+ * which corresponds to CW in math coords. Path2D `fill(nonzero)` handles
+ * this consistently.
+ */
+const CELL_POLYGONS = [
+    /* 0  (empty) */ [],
+    /* 1  (BL)    */ [[[0, 0.5], [0.5, 1], [0, 1]]],
+    /* 2  (BR)    */ [[[0.5, 1], [1, 0.5], [1, 1]]],
+    /* 3  (BR+BL) */ [[[0, 0.5], [1, 0.5], [1, 1], [0, 1]]],
+    /* 4  (TR)    */ [[[0.5, 0], [1, 0], [1, 0.5]]],
+    /* 5  (TR+BL saddle) */ [
+        [[0.5, 0], [1, 0], [1, 0.5]],
+        [[0, 0.5], [0.5, 1], [0, 1]],
+    ],
+    /* 6  (TR+BR) */ [[[0.5, 0], [1, 0], [1, 1], [0.5, 1]]],
+    /* 7  (TR+BR+BL, !TL) */ [[[0.5, 0], [1, 0], [1, 1], [0, 1], [0, 0.5]]],
+    /* 8  (TL)    */ [[[0, 0], [0.5, 0], [0, 0.5]]],
+    /* 9  (TL+BL) */ [[[0, 0], [0.5, 0], [0.5, 1], [0, 1]]],
+    /* 10 (TL+BR saddle) */ [
+        [[0, 0], [0.5, 0], [0, 0.5]],
+        [[0.5, 1], [1, 0.5], [1, 1]],
+    ],
+    /* 11 (TL+BR+BL, !TR) */ [[[0, 0], [0.5, 0], [1, 0.5], [1, 1], [0, 1]]],
+    /* 12 (TL+TR) */ [[[0, 0], [1, 0], [1, 0.5], [0, 0.5]]],
+    /* 13 (TL+TR+BL, !BR) */ [[[0, 0], [1, 0], [1, 0.5], [0.5, 1], [0, 1]]],
+    /* 14 (TL+TR+BR, !BL) */ [[[0, 0], [1, 0], [1, 1], [0.5, 1], [0, 0.5]]],
+    /* 15 (full)  */ [[[0, 0], [1, 0], [1, 1], [0, 1]]],
+];
+/**
+ * Emit all per-cell polygons covering the voxels where `labels === targetLabel`.
+ * Pure geometry function — no Canvas dependency. Consumers can build a Path2D
+ * (see {@link extractLabelContours}) or walk the vertex arrays directly
+ * (tests, export, stroke rendering).
+ */
+function extractLabelPolygons(labels, width, height, targetLabel, stride = 1, channelOffset = 0, bbox) {
+    var _a, _b, _c, _d;
+    const out = [];
+    const cx0 = ((_a = bbox === null || bbox === void 0 ? void 0 : bbox.x0) !== null && _a !== void 0 ? _a : 0) - 1;
+    const cy0 = ((_b = bbox === null || bbox === void 0 ? void 0 : bbox.y0) !== null && _b !== void 0 ? _b : 0) - 1;
+    const cx1 = (_c = bbox === null || bbox === void 0 ? void 0 : bbox.x1) !== null && _c !== void 0 ? _c : width;
+    const cy1 = (_d = bbox === null || bbox === void 0 ? void 0 : bbox.y1) !== null && _d !== void 0 ? _d : height;
+    const i0 = Math.max(-1, cx0);
+    const j0 = Math.max(-1, cy0);
+    const i1 = Math.min(width, cx1);
+    const j1 = Math.min(height, cy1);
+    const sample = (x, y) => {
+        if (x < 0 || x >= width || y < 0 || y >= height)
+            return false;
+        return labels[(y * width + x) * stride + channelOffset] === targetLabel;
+    };
+    // Shift output by +0.5 so that marching-squares samples (voxel positions)
+    // map to voxel-square CENTERS in render space. Voxel (i, j) occupies
+    // render square [i, i+1] × [j, j+1]; its center is (i+0.5, j+0.5).
+    const SHIFT = 0.5;
+    for (let j = j0; j < j1; j++) {
+        for (let i = i0; i < i1; i++) {
+            const tl = sample(i, j);
+            const tr = sample(i + 1, j);
+            const br = sample(i + 1, j + 1);
+            const bl = sample(i, j + 1);
+            const code = (tl ? 8 : 0) |
+                (tr ? 4 : 0) |
+                (br ? 2 : 0) |
+                (bl ? 1 : 0);
+            if (code === 0)
+                continue;
+            const polygons = CELL_POLYGONS[code];
+            for (let p = 0; p < polygons.length; p++) {
+                const poly = polygons[p];
+                const abs = new Array(poly.length);
+                for (let k = 0; k < poly.length; k++) {
+                    abs[k] = [i + poly[k][0] + SHIFT, j + poly[k][1] + SHIFT];
+                }
+                out.push(abs);
+            }
+        }
+    }
+    return out;
+}
+/**
+ * Extract a `Path2D` covering all voxels equal to `targetLabel`.
+ *
+ * @param labels      Flat label array. Addressed as
+ *                    `labels[(y * width + x) * stride + channelOffset]`.
+ * @param width       Grid width in voxels.
+ * @param height      Grid height in voxels.
+ * @param targetLabel Label value to extract (1..255; 0 is background).
+ * @param stride      Bytes per voxel (default 1). Use MaskVolume.numChannels
+ *                    when reading interleaved slices.
+ * @param channelOffset Offset within each voxel's channels to sample.
+ *                    Default 0 (first channel = label id).
+ * @param bbox        Optional voxel-space bbox to limit extraction.
+ *                    Cells in a 1-voxel halo around the bbox are still
+ *                    visited so the contour closes correctly at the bbox edges.
+ */
+function extractLabelContours(labels, width, height, targetLabel, stride = 1, channelOffset = 0, bbox) {
+    const polygons = extractLabelPolygons(labels, width, height, targetLabel, stride, channelOffset, bbox);
+    const path = new Path2D();
+    for (let p = 0; p < polygons.length; p++) {
+        const poly = polygons[p];
+        path.moveTo(poly[0][0], poly[0][1]);
+        for (let k = 1; k < poly.length; k++) {
+            path.lineTo(poly[k][0], poly[k][1]);
+        }
+        path.closePath();
+    }
+    return path;
+}
+/**
+ * Detect the distinct non-zero labels present in a slice region.
+ *
+ * @param labels        Flat label array (see {@link extractLabelContours}).
+ * @param width         Grid width.
+ * @param height        Grid height.
+ * @param stride        Bytes per voxel.
+ * @param channelOffset Offset within each voxel.
+ * @param bbox          Optional region to scan (defaults to full grid).
+ * @returns Sorted array of distinct label values (0 omitted).
+ */
+function findLabelsInSlice(labels, width, height, stride = 1, channelOffset = 0, bbox) {
+    var _a, _b, _c, _d;
+    const x0 = (_a = bbox === null || bbox === void 0 ? void 0 : bbox.x0) !== null && _a !== void 0 ? _a : 0;
+    const y0 = (_b = bbox === null || bbox === void 0 ? void 0 : bbox.y0) !== null && _b !== void 0 ? _b : 0;
+    const x1 = (_c = bbox === null || bbox === void 0 ? void 0 : bbox.x1) !== null && _c !== void 0 ? _c : width;
+    const y1 = (_d = bbox === null || bbox === void 0 ? void 0 : bbox.y1) !== null && _d !== void 0 ? _d : height;
+    const seen = new Set();
+    for (let y = y0; y < y1; y++) {
+        for (let x = x0; x < x1; x++) {
+            const v = labels[(y * width + x) * stride + channelOffset];
+            if (v !== 0)
+                seen.add(v);
+        }
+    }
+    return Array.from(seen).sort((a, b) => a - b);
+}
+
 /**
  * BaseTool - Abstract base for extracted DrawToolCore tools
  *
@@ -73551,35 +73720,54 @@ class RenderingUtils {
         }
     }
     /**
-     * Render a layer's slice into a reusable buffer and draw to the target canvas.
+     * Render a layer's slice onto the target canvas as vector contours.
+     *
+     * Uses marching-squares to extract voxel-truthful Path2D contours per
+     * label, then `ctx.fill()` them at the display canvas resolution. This
+     * eliminates the bilinear-upscale blur and zoom-dependent shape drift
+     * that plagued the old putImageData → drawImage pipeline.
      *
-     * Uses MaskVolume.renderLabelSliceInto() for zero-allocation rendering.
+     * The `buffer` parameter is kept for backward-compatible signature but
+     * is no longer used on this path — callers may pass any valid ImageData.
      */
-    renderSliceToCanvas(layer, axis, sliceIndex, buffer, targetCtx, scaledWidth, scaledHeight) {
+    renderSliceToCanvas(layer, axis, sliceIndex, _buffer, targetCtx, scaledWidth, scaledHeight) {
         try {
             const volume = this.getVolumeForLayer(layer);
             if (!volume)
                 return;
-            // Get channel visibility for this layer
             const channelVis = this.state.gui_states.layerChannel.channelVisibility[layer];
-            // Render label slice at full alpha — globalAlpha applied during compositeAllLayers
-            volume.renderLabelSliceInto(sliceIndex, axis, buffer, channelVis, 1.0);
-            this.setEmptyCanvasSize(axis);
-            this.state.protectedData.ctxes.emptyCtx.putImageData(buffer, 0, 0);
+            const slice = volume.getSliceUint8(sliceIndex, axis);
+            const W = slice.width;
+            const H = slice.height;
+            const stride = volume.getChannels();
+            const labels = findLabelsInSlice(slice.data, W, H, stride, 0);
+            if (labels.length === 0)
+                return;
+            targetCtx.save();
+            // Vector fill — imageSmoothingEnabled is irrelevant here, but keep
+            // it off to match the rest of the pipeline.
             targetCtx.imageSmoothingEnabled = false;
-            // Coronal (axis='y') Z-flip: vertically flip the rendered mask to match
-            // the Z-flip applied during the write path (syncLayerSliceData).
+            // Coronal (axis='y') Z-flip: mirrors the flip applied by the write
+            // path (syncLayerSliceData). Apply BEFORE the voxel→display scale
+            // so the flip operates in display coordinates.
             if (axis === 'y') {
-                targetCtx.save();
                 targetCtx.scale(1, -1);
                 targetCtx.translate(0, -scaledHeight);
             }
-            targetCtx.drawImage(this.state.protectedData.canvases.emptyCanvas, 0, 0, scaledWidth, scaledHeight);
-            if (axis === 'y') {
-                targetCtx.restore();
+            // Voxel coord (x ∈ [0, W], y ∈ [0, H]) → display coord.
+            targetCtx.scale(scaledWidth / W, scaledHeight / H);
+            for (const lbl of labels) {
+                if (channelVis && channelVis[lbl] === false)
+                    continue;
+                const color = volume.getChannelColor(lbl);
+                const path = extractLabelContours(slice.data, W, H, lbl, stride, 0);
+                targetCtx.fillStyle =
+                    `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;
+                targetCtx.fill(path, 'nonzero');
             }
+            targetCtx.restore();
         }
-        catch (err) {
+        catch (_a) {
             // Slice out of bounds or volume not ready — skip silently
         }
     }
@@ -73664,6 +73852,11 @@ const DEFAULT_KEYBOARD_SETTINGS = {
  * Drawing tools that can be used with Shift+drag
  */
 const DRAWING_TOOLS = new Set(['pencil', 'brush', 'eraser']);
+/**
+ * Sphere-family tools (single-placement sphere + brush/eraser variants).
+ * All three participate in the same crosshair / contrast mutual-exclusion rules.
+ */
+const SPHERE_TOOLS = new Set(['sphere', 'sphereBrush', 'sphereEraser']);
 class EventRouter {
     constructor(config) {
         // === State ===
@@ -73794,8 +73987,8 @@ class EventRouter {
      */
     setGuiTool(tool) {
         this.guiTool = tool;
-        // When entering sphere mode, keep crosshair if active, otherwise idle
-        if (tool === 'sphere') {
+        // When entering any sphere-family tool, keep crosshair if active, otherwise idle
+        if (SPHERE_TOOLS.has(tool)) {
             if (!this.state.crosshairEnabled) {
                 this.setMode('idle');
             }
@@ -73807,10 +74000,12 @@ class EventRouter {
      * Blocked when draw or contrast mode is active, or left button is held (mutual exclusion).
      */
     toggleCrosshair() {
-        // Allow crosshair in drawing tools and sphere mode
-        if (!DRAWING_TOOLS.has(this.guiTool) && this.guiTool !== 'sphere')
+        // Allow crosshair in drawing tools and all sphere-family tools (sphere / sphereBrush / sphereEraser)
+        if (!DRAWING_TOOLS.has(this.guiTool) && !SPHERE_TOOLS.has(this.guiTool))
             return;
-        // Block crosshair activation during draw, contrast, or while left button held
+        // Block crosshair activation during draw, contrast, or while left button held.
+        // The leftButtonDown guard also enforces "once a sphere preview is on screen,
+        // S is ignored until mouseup" for sphereBrush/sphereEraser.
         if (this.state.shiftHeld || this.state.leftButtonDown || this.mode === 'draw' || this.mode === 'contrast')
             return;
         this.state.crosshairEnabled = !this.state.crosshairEnabled;
@@ -73843,6 +74038,19 @@ class EventRouter {
     isRightButtonDown() {
         return this.state.rightButtonDown;
     }
+    /**
+     * Whether the user is currently performing a slice-drag (left-button held
+     * in idle mode with a non-sphere tool). In this state the mouse wheel is
+     * suppressed so that slice switching via drag and slice/zoom via wheel
+     * cannot fight each other. Draw / contrast / crosshair set `mode` away
+     * from 'idle', and sphere-family tools use left-drag for their own
+     * purposes, so both are correctly excluded.
+     */
+    isDragSliceActive() {
+        return (this.state.leftButtonDown &&
+            this.mode === 'idle' &&
+            !SPHERE_TOOLS.has(this.guiTool));
+    }
     // ========================================
     // Configuration
     // ========================================
@@ -73937,9 +74145,9 @@ class EventRouter {
             }
         }
         if (this.contrastEnabled && this.keyboardSettings.contrast.includes(ev.key)) {
-            // Block contrast state when crosshair, draw, or sphere is active (mutual exclusion)
+            // Block contrast state when crosshair, draw, or any sphere-family tool is active (mutual exclusion)
             if (!this.state.crosshairEnabled && this.mode !== 'draw'
-                && this.guiTool !== 'sphere') {
+                && !SPHERE_TOOLS.has(this.guiTool)) {
                 this.state.ctrlHeld = true;
             }
         }
@@ -74010,7 +74218,15 @@ class EventRouter {
         }
     }
     handleWheel(ev) {
-        // Route to external handler
+        // Mutual exclusion: slice-drag wins over wheel. While the left button
+        // is held in a slice-drag context, swallow wheel events so the image
+        // cannot scroll/zoom at the same time the user is dragging slices.
+        // Re-checked on every event, so pressing the left button mid-scroll
+        // flips us into drag mode on the very next wheel tick.
+        if (this.isDragSliceActive()) {
+            ev.preventDefault();
+            return;
+        }
         if (this.wheelHandler) {
             this.wheelHandler(ev);
         }
@@ -74563,6 +74779,10 @@ class PanTool extends BaseTool {
  * Extracted from DrawToolCore.paintOnCanvas() closure (Phase 3).
  * Handles left-click drawing operations: pencil stroke + fill, brush strokes,
  * eraser, and undo snapshot capture/push.
+ *
+ * Phase B: Brush mode now writes voxels directly during mousemove and
+ * re-renders via marching squares, eliminating the visual "snap" between
+ * the smooth canvas stroke and the voxel-based post-release render.
  */
 class DrawingTool extends BaseTool {
     constructor(ctx, callbacks) {
@@ -74579,6 +74799,8 @@ class DrawingTool extends BaseTool {
         this.preDrawSlice = null;
         this.preDrawAxis = "z";
         this.preDrawSliceIndex = 0;
+        /** Previous voxel-space position for Bresenham interpolation (brush mode) */
+        this.prevVoxel = null;
         this.callbacks = callbacks;
     }
     /** Whether a draw operation is currently active */
@@ -74598,6 +74820,7 @@ class DrawingTool extends BaseTool {
         this.isPainting = false;
         this.drawingLines = [];
         this.clearArcFn = clearArcFn;
+        this.prevVoxel = null;
     }
     /**
      * Called on left-click pointerdown in draw mode.
@@ -74625,6 +74848,22 @@ class DrawingTool extends BaseTool {
         this.ctx.nrrd_states.interaction.drawStartPos.y = e.offsetY;
         // Capture pre-draw slice snapshot for undo
         this.capturePreDrawSnapshot();
+        // Brush mode: initialize voxel tracking and write first dot
+        if (!this.ctx.gui_states.mode.pencil && !this.ctx.gui_states.mode.eraser) {
+            const voxel = this.canvasToVoxel3D(e.offsetX, e.offsetY);
+            this.prevVoxel = voxel;
+            try {
+                const vol = this.callbacks.getVolumeForLayer(this.ctx.gui_states.layerChannel.layer);
+                const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+                const axis = this.ctx.protectedData.axis;
+                const { rH, rV } = this.getVoxelBrushRadius();
+                this.paintVoxelEllipse(vol, voxel, rH, rV, channel, axis);
+                this.refreshLayerFromVolume();
+            }
+            catch (_a) {
+                // Volume not ready
+            }
+        }
     }
     /**
      * Called on pointermove during an active drawing operation.
@@ -74638,10 +74877,16 @@ class DrawingTool extends BaseTool {
                 this.ctx.nrrd_states.flags.stepClear = 1;
                 (_a = this.clearArcFn) === null || _a === void 0 ? void 0 : _a.call(this, e.offsetX, e.offsetY, this.ctx.gui_states.drawing.brushAndEraserSize);
             }
-            else {
+            else if (this.ctx.gui_states.mode.pencil) {
+                // Pencil mode: accumulate points and draw visual lines on canvas
                 this.drawingLines.push({ x: e.offsetX, y: e.offsetY });
                 this.paintOnCanvasLayer(e.offsetX, e.offsetY);
             }
+            else {
+                // Brush mode: write voxels directly + re-render via marching squares
+                this.drawingLines.push({ x: e.offsetX, y: e.offsetY });
+                this.paintBrushVoxelMove(e.offsetX, e.offsetY);
+            }
         }
     }
     /**
@@ -74654,11 +74899,9 @@ class DrawingTool extends BaseTool {
         ctx.closePath();
         if (!this.ctx.gui_states.mode.eraser) {
             if (this.ctx.gui_states.mode.pencil) {
-                // Clear only the current layer canvas (NOT master)
+                // Pencil mode: fill polygon then bake to voxels
                 canvas.width = canvas.width;
-                // Redraw previous layer data from volume
                 this.redrawPreviousImageToLayerCtx(ctx);
-                // Draw new pencil strokes on current layer canvas
                 ctx.beginPath();
                 ctx.moveTo(this.drawingLines[0].x, this.drawingLines[0].y);
                 for (let i = 1; i < this.drawingLines.length; i++) {
@@ -74668,12 +74911,26 @@ class DrawingTool extends BaseTool {
                 ctx.lineWidth = 1;
                 ctx.fillStyle = this.ctx.gui_states.drawing.fillColor;
                 ctx.fill();
-                // Composite ALL layers to master (not just current layer)
                 this.callbacks.compositeAllLayers();
+                // Pencil still needs canvas→voxel bake
+                this.callbacks.syncLayerSliceData(this.ctx.nrrd_states.view.currentSliceIndex, this.ctx.gui_states.layerChannel.layer);
+                // Re-render from voxels to eliminate pencil snap
+                this.refreshLayerFromVolume();
             }
+            else {
+                // Brush mode: voxels already written during mousemove
+                // Just re-render final state and composite
+                this.refreshLayerFromVolume();
+            }
+        }
+        else {
+            // Eraser mode: still needs canvas→voxel bake
+            this.callbacks.syncLayerSliceData(this.ctx.nrrd_states.view.currentSliceIndex, this.ctx.gui_states.layerChannel.layer);
+            // Re-render from voxels for eraser too
+            this.refreshLayerFromVolume();
         }
-        this.callbacks.syncLayerSliceData(this.ctx.nrrd_states.view.currentSliceIndex, this.ctx.gui_states.layerChannel.layer);
         this.isPainting = false;
+        this.prevVoxel = null;
         // Push undo delta
         this.pushUndoDelta();
     }
@@ -74684,6 +74941,7 @@ class DrawingTool extends BaseTool {
      */
     onPointerLeave() {
         this.isPainting = false;
+        this.prevVoxel = null;
         if (!this.leftClicked)
             return false;
         this.leftClicked = false;
@@ -74694,11 +74952,6 @@ class DrawingTool extends BaseTool {
     /**
      * Create a self-managing mouseover/mouseout/mousemove handler
      * that tracks brush hover position for the preview circle.
-     *
-     * The returned function should be registered on drawingCanvas for
-     * "mouseover" and "mouseout" events.  It adds/removes a "mousemove"
-     * listener on itself to keep mouseOverX/Y up-to-date while the
-     * cursor is inside the canvas.
      */
     createBrushTrackingHandler() {
         const handler = (e) => {
@@ -74722,8 +74975,6 @@ class DrawingTool extends BaseTool {
     }
     /**
      * Render brush circle preview on the drawing context.
-     * Called from the start() render loop when in draw mode and not
-     * actively painting.  Skipped in pencil/eraser mode.
      */
     renderBrushPreview(ctx, width, height) {
         if (this.ctx.gui_states.mode.pencil ||
@@ -74738,6 +74989,195 @@ class DrawingTool extends BaseTool {
         ctx.strokeStyle = this.ctx.gui_states.drawing.brushColor;
         ctx.stroke();
     }
+    // ── Brush mode: direct voxel write ────────────────────────────
+    /**
+     * Convert display (zoomed) coordinates to 3D voxel coordinates.
+     * Same logic as SphereBrushTool.canvasToVoxelCenter.
+     */
+    canvasToVoxel3D(displayX, displayY) {
+        const nrrd = this.ctx.nrrd_states;
+        const axis = this.ctx.protectedData.axis;
+        const cw = nrrd.view.changedWidth;
+        const ch = nrrd.view.changedHeight;
+        const sliceIndex = nrrd.view.currentSliceIndex;
+        switch (axis) {
+            case 'z':
+                return {
+                    x: displayX * nrrd.image.nrrd_x_pixel / cw,
+                    y: displayY * nrrd.image.nrrd_y_pixel / ch,
+                    z: sliceIndex,
+                };
+            case 'y':
+                return {
+                    x: displayX * nrrd.image.nrrd_x_pixel / cw,
+                    y: sliceIndex,
+                    z: (ch - displayY) * nrrd.image.nrrd_z_pixel / ch,
+                };
+            case 'x':
+                return {
+                    x: sliceIndex,
+                    y: displayY * nrrd.image.nrrd_y_pixel / ch,
+                    z: displayX * nrrd.image.nrrd_z_pixel / cw,
+                };
+        }
+    }
+    /**
+     * Get voxel-space brush radius for visible axes.
+     * Converts display-pixel brush size to voxel units.
+     */
+    getVoxelBrushRadius() {
+        const nrrd = this.ctx.nrrd_states;
+        const axis = this.ctx.protectedData.axis;
+        const cw = nrrd.view.changedWidth;
+        const ch = nrrd.view.changedHeight;
+        const displayRadius = this.ctx.gui_states.drawing.brushAndEraserSize / 2;
+        switch (axis) {
+            case 'z':
+                return {
+                    rH: displayRadius * nrrd.image.nrrd_x_pixel / cw,
+                    rV: displayRadius * nrrd.image.nrrd_y_pixel / ch,
+                };
+            case 'y':
+                return {
+                    rH: displayRadius * nrrd.image.nrrd_x_pixel / cw,
+                    rV: displayRadius * nrrd.image.nrrd_z_pixel / ch,
+                };
+            case 'x':
+                return {
+                    rH: displayRadius * nrrd.image.nrrd_z_pixel / cw,
+                    rV: displayRadius * nrrd.image.nrrd_y_pixel / ch,
+                };
+        }
+    }
+    /**
+     * Paint a 2D ellipse of voxels on the current slice.
+     * Only the two visible axes are iterated; the slice-direction axis is fixed.
+     */
+    paintVoxelEllipse(vol, center, rH, rV, label, axis) {
+        const dims = vol.getDimensions();
+        switch (axis) {
+            case 'z': {
+                const minX = Math.max(0, Math.floor(center.x - rH));
+                const maxX = Math.min(dims.width - 1, Math.ceil(center.x + rH));
+                const minY = Math.max(0, Math.floor(center.y - rV));
+                const maxY = Math.min(dims.height - 1, Math.ceil(center.y + rV));
+                const z = Math.round(center.z);
+                for (let y = minY; y <= maxY; y++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const dx = rH > 0 ? (x - center.x) / rH : 0;
+                        const dy = rV > 0 ? (y - center.y) / rV : 0;
+                        if (dx * dx + dy * dy <= 1.0) {
+                            vol.setVoxel(x, y, z, label);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'y': {
+                const minX = Math.max(0, Math.floor(center.x - rH));
+                const maxX = Math.min(dims.width - 1, Math.ceil(center.x + rH));
+                const minZ = Math.max(0, Math.floor(center.z - rV));
+                const maxZ = Math.min(dims.depth - 1, Math.ceil(center.z + rV));
+                const y = Math.round(center.y);
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const dx = rH > 0 ? (x - center.x) / rH : 0;
+                        const dz = rV > 0 ? (z - center.z) / rV : 0;
+                        if (dx * dx + dz * dz <= 1.0) {
+                            vol.setVoxel(x, y, z, label);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'x': {
+                const minZ = Math.max(0, Math.floor(center.z - rH));
+                const maxZ = Math.min(dims.depth - 1, Math.ceil(center.z + rH));
+                const minY = Math.max(0, Math.floor(center.y - rV));
+                const maxY = Math.min(dims.height - 1, Math.ceil(center.y + rV));
+                const x = Math.round(center.x);
+                for (let yy = minY; yy <= maxY; yy++) {
+                    for (let zz = minZ; zz <= maxZ; zz++) {
+                        const dz = rH > 0 ? (zz - center.z) / rH : 0;
+                        const dy = rV > 0 ? (yy - center.y) / rV : 0;
+                        if (dz * dz + dy * dy <= 1.0) {
+                            vol.setVoxel(x, yy, zz, label);
+                        }
+                    }
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * Brush mode mousemove: write voxels along stroke segment, then re-render.
+     * Uses linear interpolation between prev and current positions to ensure
+     * no gaps when the mouse moves fast.
+     */
+    paintBrushVoxelMove(displayX, displayY) {
+        try {
+            const vol = this.callbacks.getVolumeForLayer(this.ctx.gui_states.layerChannel.layer);
+            const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+            const axis = this.ctx.protectedData.axis;
+            const { rH, rV } = this.getVoxelBrushRadius();
+            const current = this.canvasToVoxel3D(displayX, displayY);
+            if (this.prevVoxel) {
+                // Interpolate from prev to current to fill gaps
+                const prev = this.prevVoxel;
+                let steps;
+                switch (axis) {
+                    case 'z':
+                        steps = Math.max(Math.abs(current.x - prev.x), Math.abs(current.y - prev.y));
+                        break;
+                    case 'y':
+                        steps = Math.max(Math.abs(current.x - prev.x), Math.abs(current.z - prev.z));
+                        break;
+                    case 'x':
+                        steps = Math.max(Math.abs(current.z - prev.z), Math.abs(current.y - prev.y));
+                        break;
+                }
+                steps = Math.max(1, Math.ceil(steps));
+                for (let i = 0; i <= steps; i++) {
+                    const t = steps === 0 ? 0 : i / steps;
+                    const pt = {
+                        x: prev.x + (current.x - prev.x) * t,
+                        y: prev.y + (current.y - prev.y) * t,
+                        z: prev.z + (current.z - prev.z) * t,
+                    };
+                    this.paintVoxelEllipse(vol, pt, rH, rV, channel, axis);
+                }
+            }
+            else {
+                this.paintVoxelEllipse(vol, current, rH, rV, channel, axis);
+            }
+            this.prevVoxel = current;
+            // Re-render the layer canvas from volume (marching squares)
+            this.refreshLayerFromVolume();
+        }
+        catch (_a) {
+            // Volume not ready — fall back to canvas drawing
+            this.paintOnCanvasLayer(displayX, displayY);
+        }
+    }
+    /**
+     * Re-render the active layer's canvas from MaskVolume via marching squares,
+     * then composite all layers to master.
+     */
+    refreshLayerFromVolume() {
+        const layer = this.ctx.gui_states.layerChannel.layer;
+        const target = this.ctx.protectedData.layerTargets.get(layer);
+        if (!target)
+            return;
+        const { ctx, canvas } = target;
+        canvas.width = canvas.width; // clear
+        const axis = this.ctx.protectedData.axis;
+        const buffer = this.callbacks.getOrCreateSliceBuffer(axis);
+        if (buffer) {
+            this.callbacks.renderSliceToCanvas(layer, axis, this.ctx.nrrd_states.view.currentSliceIndex, buffer, ctx, this.ctx.nrrd_states.view.changedWidth, this.ctx.nrrd_states.view.changedHeight);
+        }
+        this.callbacks.compositeAllLayers();
+        this.ctx.protectedData.mainPreSlices.mesh.material.map.needsUpdate = true;
+    }
     // ── Private helpers ────────────────────────────────────────
     /** Capture pre-draw slice snapshot for undo */
     capturePreDrawSnapshot() {
@@ -74774,27 +75214,18 @@ class DrawingTool extends BaseTool {
     }
     /**
      * Redraws persisted layer data onto ctx before new pencil fill.
-     * Extracted from DrawToolCore.
+     * Delegates to the host's vector renderSliceToCanvas for consistency.
      */
     redrawPreviousImageToLayerCtx(ctx) {
-        var _a;
-        const tempPreImg = (_a = this.callbacks.filterDrawedImage(this.ctx.protectedData.axis, this.ctx.nrrd_states.view.currentSliceIndex)) === null || _a === void 0 ? void 0 : _a.image;
-        this.ctx.protectedData.canvases.emptyCanvas.width =
-            this.ctx.protectedData.canvases.emptyCanvas.width;
-        this.ctx.protectedData.ctxes.emptyCtx.putImageData(tempPreImg, 0, 0);
-        ctx.imageSmoothingEnabled = false;
-        // Coronal (axis='y') Z-flip: same as renderSliceToCanvas.
-        if (this.ctx.protectedData.axis === 'y') {
-            ctx.save();
-            ctx.scale(1, -1);
-            ctx.translate(0, -this.ctx.nrrd_states.view.changedHeight);
-        }
-        ctx.drawImage(this.ctx.protectedData.canvases.emptyCanvas, 0, 0, this.ctx.nrrd_states.view.changedWidth, this.ctx.nrrd_states.view.changedHeight);
-        if (this.ctx.protectedData.axis === 'y') {
-            ctx.restore();
-        }
+        const axis = this.ctx.protectedData.axis;
+        const W = this.ctx.nrrd_states.view.changedWidth;
+        const H = this.ctx.nrrd_states.view.changedHeight;
+        const buffer = this.callbacks.getOrCreateSliceBuffer(axis);
+        if (!buffer)
+            return;
+        this.callbacks.renderSliceToCanvas(this.ctx.gui_states.layerChannel.layer, axis, this.ctx.nrrd_states.view.currentSliceIndex, buffer, ctx, W, H);
     }
-    /** Draw a line segment on a layer canvas */
+    /** Draw a line segment on a layer canvas (pencil mode only) */
     drawLinesOnLayer(ctx, x, y) {
         ctx.beginPath();
         ctx.moveTo(this.ctx.nrrd_states.interaction.drawStartPos.x, this.ctx.nrrd_states.interaction.drawStartPos.y);
@@ -74810,17 +75241,13 @@ class DrawingTool extends BaseTool {
         ctx.stroke();
         ctx.closePath();
     }
-    /** Paint a segment on the current layer canvas and composite to master */
+    /** Paint a segment on the current layer canvas and composite to master (pencil mode) */
     paintOnCanvasLayer(x, y) {
         const { ctx } = this.callbacks.setCurrentLayer();
-        // Draw only on the current layer canvas (not master directly)
         this.drawLinesOnLayer(ctx, x, y);
-        // Composite all layers to master to preserve other layers' data
         this.callbacks.compositeAllLayers();
-        // Reset drawing start position to current position
         this.ctx.nrrd_states.interaction.drawStartPos.x = x;
         this.ctx.nrrd_states.interaction.drawStartPos.y = y;
-        // Flag the map as needing updating
         this.ctx.protectedData.mainPreSlices.mesh.material.map.needsUpdate = true;
     }
 }
@@ -74960,7 +75387,11 @@ class ImageStoreHelper extends BaseTool {
 class SphereBrushTool extends BaseTool {
     constructor(ctx, callbacks) {
         super(ctx);
-        /** Recorded sphere center in canvas mm-space */
+        /**
+         * Recorded sphere center in display (zoomed) coordinates.
+         * Used for both preview redraw and voxel calculation — the voxel conversion
+         * uses `changedWidth/Height` as the display scale, so no mm detour is needed.
+         */
         this.centerX = 0;
         this.centerY = 0;
         this.centerSlice = 0;
@@ -74968,10 +75399,24 @@ class SphereBrushTool extends BaseTool {
         this.active = false;
         /** Current operation mode for the active placement */
         this.mode = "brush";
-        /** Cumulative "before" snapshots for drag-erase undo (z-index → slice data) */
+        /** Cumulative "before" snapshots for drag undo (z-index → slice data) — used by both brush and eraser drag */
         this.dragBeforeSnapshots = new Map();
-        /** Whether a drag-erase has actually moved (vs. simple click-release) */
+        /** Whether a drag has actually moved (vs. simple click-release) */
         this.dragMoved = false;
+        /**
+         * Latest cursor position in display (zoomed) coords. Used by the wheel
+         * handler to redraw the preview at the cursor, not the original mousedown
+         * point, during mid-drag radius changes.
+         */
+        this.lastDisplayX = 0;
+        this.lastDisplayY = 0;
+        this.lastSliceIndex = 0;
+        /**
+         * All sphere centers written during the current stroke. The wheel handler
+         * retroactively re-renders the entire stroke at the new radius by restoring
+         * `dragBeforeSnapshots` and replaying every entry here.
+         */
+        this.strokeCenters = [];
         this.callbacks = callbacks;
     }
     setCallbacks(callbacks) {
@@ -74979,41 +75424,66 @@ class SphereBrushTool extends BaseTool {
     }
     // ── Geometry (ported from SphereTool) ──────────────────────────
     /**
-     * Convert canvas mm-space coordinates to 3D voxel coordinates.
+     * Convert display (zoomed) coordinates to 3D voxel coordinates.
+     *
+     * Uses `changedWidth/Height` as the display scale directly (instead of
+     * going through mm via `/sizeFactor`). This keeps the write pixel-exact
+     * with the preview circle, which is drawn on a `changedWidth x changedHeight`
+     * sized sphere canvas — avoiding floating-point drift at high zoom levels.
      */
-    canvasToVoxelCenter(canvasX, canvasY, sliceIndex, axis) {
+    canvasToVoxelCenter(displayX, displayY, sliceIndex, axis) {
         const nrrd = this.ctx.nrrd_states;
+        const cw = nrrd.view.changedWidth;
+        const ch = nrrd.view.changedHeight;
         switch (axis) {
             case 'z':
                 return {
-                    x: canvasX * nrrd.image.nrrd_x_pixel / nrrd.image.nrrd_x_mm,
-                    y: canvasY * nrrd.image.nrrd_y_pixel / nrrd.image.nrrd_y_mm,
+                    x: displayX * nrrd.image.nrrd_x_pixel / cw,
+                    y: displayY * nrrd.image.nrrd_y_pixel / ch,
                     z: sliceIndex,
                 };
             case 'y':
                 return {
-                    x: canvasX * nrrd.image.nrrd_x_pixel / nrrd.image.nrrd_x_mm,
+                    x: displayX * nrrd.image.nrrd_x_pixel / cw,
                     y: sliceIndex,
-                    z: (nrrd.image.nrrd_z_mm - canvasY) * nrrd.image.nrrd_z_pixel / nrrd.image.nrrd_z_mm,
+                    // Coronal vertical flip: display Y=0 is top, voxel Z increases downward in mm-space
+                    z: (ch - displayY) * nrrd.image.nrrd_z_pixel / ch,
                 };
             case 'x':
                 return {
                     x: sliceIndex,
-                    y: canvasY * nrrd.image.nrrd_y_pixel / nrrd.image.nrrd_y_mm,
-                    z: canvasX * nrrd.image.nrrd_z_pixel / nrrd.image.nrrd_z_mm,
+                    y: displayY * nrrd.image.nrrd_y_pixel / ch,
+                    z: displayX * nrrd.image.nrrd_z_pixel / cw,
                 };
         }
     }
     /**
      * Convert mm radius to per-axis voxel radii.
+     *
+     * For the two axes visible in the current view, scale via
+     * `changedWidth/Height` so the rendered ellipsoid cross-section matches
+     * the preview pixel radius exactly. The third (slice-direction) axis is
+     * not visible, so it uses the plain mm-based ratio.
      */
-    getVoxelRadii(radius) {
+    getVoxelRadii(radius, axis) {
         const nrrd = this.ctx.nrrd_states;
-        return {
-            rx: radius * nrrd.image.nrrd_x_pixel / nrrd.image.nrrd_x_mm,
-            ry: radius * nrrd.image.nrrd_y_pixel / nrrd.image.nrrd_y_mm,
-            rz: radius * nrrd.image.nrrd_z_pixel / nrrd.image.nrrd_z_mm,
-        };
+        const sf = nrrd.view.sizeFactor;
+        const cw = nrrd.view.changedWidth;
+        const ch = nrrd.view.changedHeight;
+        // pixel-exact voxel radius for the visible horizontal/vertical dims
+        const rxView = radius * sf * nrrd.image.nrrd_x_pixel / cw;
+        const ryView = radius * sf * nrrd.image.nrrd_y_pixel / ch;
+        const rzHoriz = radius * sf * nrrd.image.nrrd_z_pixel / cw;
+        const rzVert = radius * sf * nrrd.image.nrrd_z_pixel / ch;
+        // mm-based fallback for the slice-direction (perpendicular) dim
+        const rxMm = radius * nrrd.image.nrrd_x_pixel / nrrd.image.nrrd_x_mm;
+        const ryMm = radius * nrrd.image.nrrd_y_pixel / nrrd.image.nrrd_y_mm;
+        const rzMm = radius * nrrd.image.nrrd_z_pixel / nrrd.image.nrrd_z_mm;
+        switch (axis) {
+            case 'z': return { rx: rxView, ry: ryView, rz: rzMm };
+            case 'y': return { rx: rxView, ry: ryMm, rz: rzVert };
+            case 'x': return { rx: rxMm, ry: ryView, rz: rzHoriz };
+        }
     }
     /**
      * Compute clamped bounding box for an ellipsoid in voxel space.
@@ -75118,11 +75588,15 @@ class SphereBrushTool extends BaseTool {
     drawPreview(mouseX, mouseY, radius, isEraser) {
         const sphereCanvas = this.ctx.protectedData.canvases.drawingSphereCanvas;
         const sphereCtx = this.ctx.protectedData.ctxes.drawingSphereCtx;
-        // Clear and resize sphere canvas
-        sphereCanvas.width = this.ctx.protectedData.canvases.originCanvas.width;
-        sphereCanvas.height = this.ctx.protectedData.canvases.originCanvas.height;
+        // Size sphere canvas to the zoomed display size so start() draws it 1:1 —
+        // no scaling step, eliminating any zoom-dependent positioning error.
+        const sf = this.ctx.nrrd_states.view.sizeFactor;
+        sphereCanvas.width = this.ctx.nrrd_states.view.changedWidth;
+        sphereCanvas.height = this.ctx.nrrd_states.view.changedHeight;
+        // mouseX/mouseY are already in zoomed display coords; scale radius to match.
+        const scaledRadius = radius * sf;
         sphereCtx.beginPath();
-        sphereCtx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);
+        sphereCtx.arc(mouseX, mouseY, scaledRadius, 0, 2 * Math.PI);
         if (isEraser) {
             // Eraser preview: dashed outline
             sphereCtx.strokeStyle = "#ff4444";
@@ -75175,38 +75649,135 @@ class SphereBrushTool extends BaseTool {
         return (e) => {
             e.preventDefault();
             const sphere = this.ctx.nrrd_states.sphere;
-            if (e.deltaY < 0) {
-                sphere.sphereBrushRadius += 1;
+            sphere.sphereBrushRadius = Math.max(1, Math.min(sphere.sphereBrushRadius + (e.deltaY < 0 ? 1 : -1), 50));
+            // 3D Slicer-style retroactive resize: if the user has already started
+            // painting/erasing a stroke, re-render the entire stroke at the new
+            // radius so the whole pipe/erase-path resizes together.
+            if (this.active && this.dragMoved && this.strokeCenters.length > 0) {
+                this.replayStrokeWithCurrentRadius();
             }
-            else {
-                sphere.sphereBrushRadius -= 1;
-            }
-            sphere.sphereBrushRadius = Math.max(1, Math.min(sphere.sphereBrushRadius, 50));
-            // Redraw preview
+            // Preview always follows the latest cursor position, not the mousedown
+            // point — otherwise the preview circle appears stuck on click-down when
+            // the user scrolls after dragging elsewhere.
             if (this.active) {
-                this.drawPreview(this.centerX, this.centerY, sphere.sphereBrushRadius, this.mode === "eraser");
+                this.drawPreview(this.lastDisplayX, this.lastDisplayY, sphere.sphereBrushRadius, this.mode === "eraser");
             }
         };
     }
+    /**
+     * Retroactively re-render the current stroke at the current radius.
+     *
+     * Step 1: walk every recorded stroke center and expand
+     *   `dragBeforeSnapshots` to cover the new (larger) bounding box. Slices
+     *   newly included here are still pristine because the original stroke
+     *   never touched them.
+     * Step 2: restore every snapshotted slice from its pristine backup.
+     * Step 3: replay every stroke center at the new radius.
+     *
+     * Step 3 produces the same final state as if the user had used the new
+     * radius from the start. Undo still captures the full stroke as one group
+     * at pointerup.
+     */
+    replayStrokeWithCurrentRadius() {
+        if (this.strokeCenters.length === 0)
+            return;
+        const layer = this.ctx.gui_states.layerChannel.layer;
+        const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+        const axis = this.ctx.protectedData.axis;
+        const radius = this.ctx.nrrd_states.sphere.sphereBrushRadius;
+        let vol;
+        try {
+            vol = this.callbacks.getVolumeForLayer(layer);
+        }
+        catch (_a) {
+            return;
+        }
+        const dims = vol.getDimensions();
+        // 1. Expand snapshot coverage using the new radius so any newly-exposed
+        //    Z slices are captured while still pristine.
+        for (const sc of this.strokeCenters) {
+            const center = this.canvasToVoxelCenter(sc.x, sc.y, sc.sliceIndex, axis);
+            const radii = this.getVoxelRadii(radius, axis);
+            const bb = this.getBoundingBox(center, radii, dims);
+            this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
+        }
+        // 2. Restore every snapshotted slice from pristine backup.
+        for (const [z, pristine] of this.dragBeforeSnapshots) {
+            try {
+                vol.setSliceUint8(z, pristine, 'z');
+            }
+            catch (_b) {
+                // Slice write failed — skip silently so a single bad slice doesn't break the replay.
+            }
+        }
+        // 3. Replay every stroke center with the new radius.
+        for (const sc of this.strokeCenters) {
+            const center = this.canvasToVoxelCenter(sc.x, sc.y, sc.sliceIndex, axis);
+            const radii = this.getVoxelRadii(radius, axis);
+            const bb = this.getBoundingBox(center, radii, dims);
+            if (this.mode === "brush") {
+                this.write3DSphereToBrush(vol, center, radii, bb, channel);
+            }
+            else {
+                this.erase3DSphereFromVolume(vol, center, radii, bb, channel);
+            }
+        }
+        this.refreshDisplay(layer, undefined, false);
+    }
     // ── Sphere Brush Click/PointerUp ───────────────────────────────
     /**
-     * Handle pointer-down in sphereBrush mode (direct click, no Shift needed).
+     * Handle pointer-down in sphereBrush mode (3D Slicer-style).
+     *
+     * Captures pristine snapshots at the mousedown location but does NOT
+     * write any voxels yet — the user may wheel-adjust the radius before
+     * dragging. The first sphere is written either by the first pointermove
+     * or by pointerup (single-click fallback).
      */
     onSphereBrushClick(e) {
-        this.centerX = e.offsetX / this.ctx.nrrd_states.view.sizeFactor;
-        this.centerY = e.offsetY / this.ctx.nrrd_states.view.sizeFactor;
+        this.centerX = e.offsetX;
+        this.centerY = e.offsetY;
         this.centerSlice = this.ctx.nrrd_states.view.currentSliceIndex;
+        this.lastDisplayX = this.centerX;
+        this.lastDisplayY = this.centerY;
+        this.lastSliceIndex = this.centerSlice;
         this.active = true;
         this.mode = "brush";
-        this.drawPreview(this.centerX, this.centerY, this.ctx.nrrd_states.sphere.sphereBrushRadius, false);
+        this.dragMoved = false;
+        this.dragBeforeSnapshots.clear();
+        this.strokeCenters = [{ x: this.centerX, y: this.centerY, sliceIndex: this.centerSlice }];
+        const layer = this.ctx.gui_states.layerChannel.layer;
+        const axis = this.ctx.protectedData.axis;
+        const radius = this.ctx.nrrd_states.sphere.sphereBrushRadius;
+        try {
+            const vol = this.callbacks.getVolumeForLayer(layer);
+            const dims = vol.getDimensions();
+            const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
+            const radii = this.getVoxelRadii(radius, axis);
+            const bb = this.getBoundingBox(center, radii, dims);
+            this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
+        }
+        catch (_a) {
+            // Volume not ready — preview still shown so user gets visual feedback
+        }
+        this.drawPreview(this.centerX, this.centerY, radius, false);
     }
     /**
-     * Handle pointer-up in sphereBrush mode — write sphere to volume.
+     * Handle pointer-move in sphereBrush mode — drag to continuously paint.
+     *
+     * Mirrors sphereEraser drag: writes a new sphere at each move position,
+     * extends the cumulative before-snapshot to cover any newly-touched Z
+     * slices, and repaints the preview. Never notifies the backend; pointerup
+     * does that once for the whole stroke.
      */
-    onSphereBrushPointerUp() {
+    onSphereBrushMove(e) {
         if (!this.active || this.mode !== "brush")
             return;
-        this.active = false;
+        this.dragMoved = true;
+        const sliceIndex = this.ctx.nrrd_states.view.currentSliceIndex;
+        this.lastDisplayX = e.offsetX;
+        this.lastDisplayY = e.offsetY;
+        this.lastSliceIndex = sliceIndex;
+        this.strokeCenters.push({ x: e.offsetX, y: e.offsetY, sliceIndex });
         const layer = this.ctx.gui_states.layerChannel.layer;
         const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
         const axis = this.ctx.protectedData.axis;
@@ -75216,26 +75787,56 @@ class SphereBrushTool extends BaseTool {
             vol = this.callbacks.getVolumeForLayer(layer);
         }
         catch (_a) {
-            this.clearPreview();
             return;
         }
         const dims = vol.getDimensions();
-        const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
-        const radii = this.getVoxelRadii(radius);
+        const center = this.canvasToVoxelCenter(e.offsetX, e.offsetY, sliceIndex, axis);
+        const radii = this.getVoxelRadii(radius, axis);
         const bb = this.getBoundingBox(center, radii, dims);
-        // Capture pre-write snapshots
-        const before = this.captureSliceSnapshots(vol, bb.minZ, bb.maxZ);
-        // Write sphere
+        this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
         this.write3DSphereToBrush(vol, center, radii, bb, channel);
-        // Capture post-write snapshots and push undo group
-        const after = this.captureSliceSnapshots(vol, bb.minZ, bb.maxZ);
-        const deltas = this.buildUndoGroup(layer, before, after);
+        this.drawPreview(e.offsetX, e.offsetY, radius, false);
+        this.refreshDisplay(layer, undefined, false);
+    }
+    /**
+     * Handle pointer-up in sphereBrush mode — finalize stroke + push undo group
+     * + single batched backend notify for all Z slices touched during the drag.
+     */
+    onSphereBrushPointerUp() {
+        if (!this.active || this.mode !== "brush")
+            return;
+        this.active = false;
+        const layer = this.ctx.gui_states.layerChannel.layer;
+        const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+        const axis = this.ctx.protectedData.axis;
+        const radius = this.ctx.nrrd_states.sphere.sphereBrushRadius;
+        let vol;
+        try {
+            vol = this.callbacks.getVolumeForLayer(layer);
+        }
+        catch (_a) {
+            this.finalizeStrokeState();
+            return;
+        }
+        // Click-without-drag: write the single sphere now so a plain click still
+        // paints something. onSphereBrushClick intentionally skipped this so the
+        // user could wheel-adjust radius first.
+        if (!this.dragMoved && this.strokeCenters.length > 0) {
+            const sc = this.strokeCenters[0];
+            const dims = vol.getDimensions();
+            const center = this.canvasToVoxelCenter(sc.x, sc.y, sc.sliceIndex, axis);
+            const radii = this.getVoxelRadii(radius, axis);
+            const bb = this.getBoundingBox(center, radii, dims);
+            this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
+            this.write3DSphereToBrush(vol, center, radii, bb, channel);
+        }
+        const after = this.captureSliceSnapshots(vol, this.dragMinZ(), this.dragMaxZ());
+        const deltas = this.buildUndoGroup(layer, this.dragBeforeSnapshots, after);
         if (deltas.length > 0) {
             this.callbacks.pushUndoGroup(deltas);
         }
-        // Refresh display and notify backend of ALL changed slices
-        this.refreshDisplay(layer, deltas);
-        this.clearPreview();
+        this.refreshDisplay(layer, deltas, true);
+        this.finalizeStrokeState();
     }
     // ── Sphere Eraser Click/PointerUp ──────────────────────────────
     /**
@@ -75243,13 +75844,17 @@ class SphereBrushTool extends BaseTool {
      * Initializes drag tracking for cumulative undo.
      */
     onSphereEraserClick(e) {
-        this.centerX = e.offsetX / this.ctx.nrrd_states.view.sizeFactor;
-        this.centerY = e.offsetY / this.ctx.nrrd_states.view.sizeFactor;
+        this.centerX = e.offsetX;
+        this.centerY = e.offsetY;
         this.centerSlice = this.ctx.nrrd_states.view.currentSliceIndex;
+        this.lastDisplayX = this.centerX;
+        this.lastDisplayY = this.centerY;
+        this.lastSliceIndex = this.centerSlice;
         this.active = true;
         this.mode = "eraser";
         this.dragMoved = false;
         this.dragBeforeSnapshots.clear();
+        this.strokeCenters = [{ x: this.centerX, y: this.centerY, sliceIndex: this.centerSlice }];
         // Capture initial "before" snapshots for the first sphere position
         const layer = this.ctx.gui_states.layerChannel.layer;
         const radius = this.ctx.nrrd_states.sphere.sphereBrushRadius;
@@ -75258,7 +75863,7 @@ class SphereBrushTool extends BaseTool {
             const dims = vol.getDimensions();
             const axis = this.ctx.protectedData.axis;
             const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
-            const radii = this.getVoxelRadii(radius);
+            const radii = this.getVoxelRadii(radius, axis);
             const bb = this.getBoundingBox(center, radii, dims);
             this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
         }
@@ -75274,9 +75879,11 @@ class SphereBrushTool extends BaseTool {
         if (!this.active || this.mode !== "eraser")
             return;
         this.dragMoved = true;
-        const mouseX = e.offsetX / this.ctx.nrrd_states.view.sizeFactor;
-        const mouseY = e.offsetY / this.ctx.nrrd_states.view.sizeFactor;
         const sliceIndex = this.ctx.nrrd_states.view.currentSliceIndex;
+        this.lastDisplayX = e.offsetX;
+        this.lastDisplayY = e.offsetY;
+        this.lastSliceIndex = sliceIndex;
+        this.strokeCenters.push({ x: e.offsetX, y: e.offsetY, sliceIndex });
         const layer = this.ctx.gui_states.layerChannel.layer;
         const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
         const axis = this.ctx.protectedData.axis;
@@ -75289,17 +75896,18 @@ class SphereBrushTool extends BaseTool {
             return;
         }
         const dims = vol.getDimensions();
-        const center = this.canvasToVoxelCenter(mouseX, mouseY, sliceIndex, axis);
-        const radii = this.getVoxelRadii(radius);
+        const center = this.canvasToVoxelCenter(e.offsetX, e.offsetY, sliceIndex, axis);
+        const radii = this.getVoxelRadii(radius, axis);
         const bb = this.getBoundingBox(center, radii, dims);
         // Expand "before" snapshots to cover any new Z slices
         this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
         // Erase sphere at current position
         this.erase3DSphereFromVolume(vol, center, radii, bb, channel);
-        // Update preview position
-        this.drawPreview(mouseX, mouseY, radius, true);
-        // Refresh display so user sees the erase in real-time
-        this.refreshDisplay(layer);
+        // Update preview position (pass display/zoomed coords)
+        this.drawPreview(e.offsetX, e.offsetY, radius, true);
+        // Refresh display locally — skip backend notify to avoid per-frame HTTP.
+        // onSphereEraserPointerUp batches all deltas into a single notify.
+        this.refreshDisplay(layer, undefined, false);
     }
     /**
      * Handle pointer-up in sphereEraser mode — finalize erase + push undo group.
@@ -75318,16 +75926,17 @@ class SphereBrushTool extends BaseTool {
             vol = this.callbacks.getVolumeForLayer(layer);
         }
         catch (_a) {
-            this.clearPreview();
-            this.dragBeforeSnapshots.clear();
+            this.finalizeStrokeState();
             return;
         }
-        // If no drag occurred, erase at the click position (original click-release behavior)
-        if (!this.dragMoved) {
+        // Click-without-drag: erase at the click position (click-release behavior).
+        if (!this.dragMoved && this.strokeCenters.length > 0) {
+            const sc = this.strokeCenters[0];
             const dims = vol.getDimensions();
-            const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
-            const radii = this.getVoxelRadii(radius);
+            const center = this.canvasToVoxelCenter(sc.x, sc.y, sc.sliceIndex, axis);
+            const radii = this.getVoxelRadii(radius, axis);
             const bb = this.getBoundingBox(center, radii, dims);
+            this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
             this.erase3DSphereFromVolume(vol, center, radii, bb, channel);
         }
         // Build undo group from cumulative "before" snapshots vs current state
@@ -75336,10 +75945,20 @@ class SphereBrushTool extends BaseTool {
         if (deltas.length > 0) {
             this.callbacks.pushUndoGroup(deltas);
         }
-        // Refresh display and notify backend of ALL changed slices
-        this.refreshDisplay(layer, deltas);
+        // Refresh display and notify backend of ALL changed slices — single HTTP batch
+        this.refreshDisplay(layer, deltas, true);
+        this.finalizeStrokeState();
+    }
+    /**
+     * Clear per-stroke state after pointerup or cancel. Kept as a helper so
+     * brush/eraser pointerup and cancelActivePlacement all reset the same set
+     * of fields — if a new drag-state field is added, only one place to update.
+     */
+    finalizeStrokeState() {
         this.clearPreview();
         this.dragBeforeSnapshots.clear();
+        this.strokeCenters = [];
+        this.dragMoved = false;
     }
     /**
      * Expand cumulative "before" snapshots to cover z range [minZ, maxZ].
@@ -75384,8 +76003,11 @@ class SphereBrushTool extends BaseTool {
      * @param changedDeltas - If provided, fire onMaskChanged for ALL changed
      *   slices (not just the current view slice) so the backend receives the
      *   full 3D sphere data for NII/GLTF export.
+     * @param notifyBackend - When false, only refresh the local canvas and skip
+     *   the onMaskChanged callback. Used during drag to avoid per-frame HTTP;
+     *   pointerup then calls with `true` to send a single batched update.
      */
-    refreshDisplay(layerId, changedDeltas) {
+    refreshDisplay(layerId, changedDeltas, notifyBackend = true) {
         // Re-render layer canvas from volume for the current slice
         const target = this.ctx.protectedData.layerTargets.get(layerId);
         if (target) {
@@ -75398,6 +76020,9 @@ class SphereBrushTool extends BaseTool {
         }
         // Composite all layers to master canvas
         this.callbacks.compositeAllLayers();
+        // Skip backend notify during drag — pointerup batches a single notify for the whole stroke.
+        if (!notifyBackend)
+            return;
         // Fire onMaskChanged for ALL changed slices (not just the current view slice)
         // This ensures the backend receives the full 3D sphere data for export.
         try {
@@ -75426,6 +76051,23 @@ class SphereBrushTool extends BaseTool {
     get isActive() {
         return this.active;
     }
+    /**
+     * Defensively cancel any in-progress sphere placement and clear the preview.
+     *
+     * Called when crosshair mode is entered so any lingering sphere preview
+     * (e.g. red dashed eraser outline) is wiped immediately. In normal flow
+     * `leftButtonDown === true` blocks crosshair toggle, so this shouldn't
+     * fire mid-stroke — but if it ever does, we drop the drag snapshot
+     * rather than committing a partial undo entry.
+     */
+    cancelActivePlacement() {
+        if (!this.active) {
+            this.clearPreview();
+            return;
+        }
+        this.active = false;
+        this.finalizeStrokeState();
+    }
 }
 
 /**
@@ -75530,6 +76172,8 @@ class DrawToolCore {
             getVolumeForLayer: (layer) => this.renderer.getVolumeForLayer(layer),
             pushUndoDelta: (delta) => this.undoManager.push(delta),
             getEraserUrls: () => this.eraserUrls,
+            renderSliceToCanvas: (layer, axis, sliceIndex, buffer, ctx, w, h) => this.renderer.renderSliceToCanvas(layer, axis, sliceIndex, buffer, ctx, w, h),
+            getOrCreateSliceBuffer: (axis) => this.renderer.getOrCreateSliceBuffer(axis),
         });
         this.sphereBrushTool = new SphereBrushTool(toolCtx, {
             getVolumeForLayer: (layer) => this.renderer.getVolumeForLayer(layer),
@@ -75548,6 +76192,7 @@ class DrawToolCore {
             container: this.container,
             canvas: this.state.protectedData.canvases.drawingCanvas,
             onModeChange: (prevMode, newMode) => {
+                var _a;
                 // Use string comparison to avoid TypeScript narrowing issues
                 const prev = prevMode;
                 const next = newMode;
@@ -75560,6 +76205,10 @@ class DrawToolCore {
                 }
                 if (next === 'crosshair') {
                     this.state.protectedData.isDrawing = false;
+                    // Wipe any lingering sphere preview (red dashed eraser outline /
+                    // filled brush preview) when the user toggles into crosshair from
+                    // sphereBrush/sphereEraser. Safe no-op when no placement is active.
+                    (_a = this.sphereBrushTool) === null || _a === void 0 ? void 0 : _a.cancelActivePlacement();
                 }
             }
         });
@@ -75658,9 +76307,14 @@ class DrawToolCore {
             if (this.drawingTool.isActive || this.panTool.isActive) {
                 this.drawingPrameters.handleOnDrawingMouseMove(e);
             }
-            // Drag-erase: route move to sphereBrushTool when sphereEraser is active
-            if (this.sphereBrushTool.isActive && this.state.gui_states.mode.sphereEraser) {
-                this.sphereBrushTool.onSphereEraserMove(e);
+            // Drag: route move to sphereBrushTool for both brush and eraser
+            if (this.sphereBrushTool.isActive) {
+                if (this.state.gui_states.mode.sphereEraser) {
+                    this.sphereBrushTool.onSphereEraserMove(e);
+                }
+                else if (this.state.gui_states.mode.sphereBrush) {
+                    this.sphereBrushTool.onSphereBrushMove(e);
+                }
             }
         });
         this.eventRouter.setPointerUpHandler((e) => {
@@ -75959,6 +76613,11 @@ class DrawToolCore {
         const ctx = this.state.protectedData.ctxes.emptyCtx;
         const w = this.state.protectedData.canvases.emptyCanvas.width;
         const h = this.state.protectedData.canvases.emptyCanvas.height;
+        // Bake step: downscale layer canvas (display resolution) to emptyCanvas
+        // (voxel resolution) before label extraction. Use nearest-neighbor
+        // (smoothing=false) so voxel occupancy is determined directly by the
+        // drawn pixels on the layer canvas, without blending that could shift
+        // the alpha>=128 threshold decision in setSliceLabelsFromImageData.
         ctx.imageSmoothingEnabled = false;
         ctx.drawImage(canvas, 0, 0, w, h);
     }
@@ -77665,11 +78324,15 @@ class NrrdTools {
                 this.state.gui_states.mode.sphereBrush = true;
                 this.dragOperator.removeDragMode();
                 (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setGuiTool('sphereBrush');
+                this.state.protectedData.canvases.drawingCanvas.style.cursor =
+                    this.state.gui_states.viewConfig.defaultPaintCursor;
                 break;
             case "sphereEraser":
                 this.state.gui_states.mode.sphereEraser = true;
                 this.dragOperator.removeDragMode();
                 (_b = this.drawCore.eventRouter) === null || _b === void 0 ? void 0 : _b.setGuiTool('sphereEraser');
+                this.state.protectedData.canvases.drawingCanvas.style.cursor =
+                    this.state.gui_states.viewConfig.defaultPaintCursor;
                 break;
         }
         // Restore drag mode when leaving sphereBrush/sphereEraser
@@ -78642,7 +79305,7 @@ function evaluateElement(element, weights) {
 }
 
 // import * as kiwrious from "copper3d_plugin_heart_k";
-const REVISION = "v3.3.3-beta";
+const REVISION = "v3.4.1-beta";
 console.log(`%cCopper3D Visualisation %cBeta:${REVISION}`, "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 export { CHANNEL_COLORS, CHANNEL_HEX_COLORS, CameraViewPoint, Copper3dTrackballControls, GaussianSmoother, MeshNodeTool, NrrdTools, REVISION, addBoxHelper, addLabelToScene, configKiwriousHeart, convert3DPostoScreenPos, convertScreenPosto3DPos, copperMScene, copperMSceneRenderer, copperRenderer, copperRendererOnDemond, copperScene, copperSceneOnDemond, createTexture2D_NRRD, fullScreenListenner, kiwrious, loading, removeGuiFolderChilden, rgbaToCss, rgbaToHex, setHDRFilePath, throttle };