copper3d 3.3.3 → 3.4.1

package/dist/bundle.umd.js

@@ -72072,6 +72072,175 @@ void main() {
 	    }
 	}
 
+	/**
+	 * 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
 	 *
@@ -73559,35 +73728,54 @@ void main() {
 	        }
 	    }
 	    /**
-	     * 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
 	        }
 	    }
@@ -73672,6 +73860,11 @@ void main() {
 	 * 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 ===
@@ -73802,8 +73995,8 @@ void main() {
 	     */
 	    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');
 	            }
@@ -73815,10 +74008,12 @@ void main() {
 	     * 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;
@@ -73851,6 +74046,19 @@ void main() {
 	    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
 	    // ========================================
@@ -73945,9 +74153,9 @@ void main() {
 	            }
 	        }
 	        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;
 	            }
 	        }
@@ -74018,7 +74226,15 @@ void main() {
 	        }
 	    }
 	    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);
 	        }
@@ -74571,6 +74787,10 @@ void main() {
 	 * 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) {
@@ -74587,6 +74807,8 @@ void main() {
 	        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 */
@@ -74606,6 +74828,7 @@ void main() {
 	        this.isPainting = false;
 	        this.drawingLines = [];
 	        this.clearArcFn = clearArcFn;
+	        this.prevVoxel = null;
 	    }
 	    /**
 	     * Called on left-click pointerdown in draw mode.
@@ -74633,6 +74856,22 @@ void main() {
 	        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.
@@ -74646,10 +74885,16 @@ void main() {
 	                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);
+	            }
 	        }
 	    }
 	    /**
@@ -74662,11 +74907,9 @@ void main() {
 	        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++) {
@@ -74676,12 +74919,26 @@ void main() {
 	                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();
 	    }
@@ -74692,6 +74949,7 @@ void main() {
 	     */
 	    onPointerLeave() {
 	        this.isPainting = false;
+	        this.prevVoxel = null;
 	        if (!this.leftClicked)
 	            return false;
 	        this.leftClicked = false;
@@ -74702,11 +74960,6 @@ void main() {
 	    /**
 	     * 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) => {
@@ -74730,8 +74983,6 @@ void main() {
 	    }
 	    /**
 	     * 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 ||
@@ -74746,6 +74997,195 @@ void main() {
 	        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() {
@@ -74782,27 +75222,18 @@ void main() {
 	    }
 	    /**
 	     * 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);
@@ -74818,17 +75249,13 @@ void main() {
 	        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;
 	    }
 	}
@@ -74968,7 +75395,11 @@ void main() {
 	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;
@@ -74976,10 +75407,24 @@ void main() {
 	        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) {
@@ -74987,41 +75432,66 @@ void main() {
 	    }
 	    // ── 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.
@@ -75126,11 +75596,15 @@ void main() {
 	    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";
@@ -75183,38 +75657,135 @@ void main() {
 	        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;
@@ -75224,26 +75795,56 @@ void main() {
 	            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 ──────────────────────────────
 	    /**
@@ -75251,13 +75852,17 @@ void main() {
 	     * 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;
@@ -75266,7 +75871,7 @@ void main() {
 	            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);
 	        }
@@ -75282,9 +75887,11 @@ void main() {
 	        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;
@@ -75297,17 +75904,18 @@ void main() {
 	            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.
@@ -75326,16 +75934,17 @@ void main() {
 	            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
@@ -75344,10 +75953,20 @@ void main() {
 	        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].
@@ -75392,8 +76011,11 @@ void main() {
 	     * @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) {
@@ -75406,6 +76028,9 @@ void main() {
 	        }
 	        // 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 {
@@ -75434,6 +76059,23 @@ void main() {
 	    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();
+	    }
 	}
 
 	/**
@@ -75538,6 +76180,8 @@ void main() {
 	            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),
@@ -75556,6 +76200,7 @@ void main() {
 	            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;
@@ -75568,6 +76213,10 @@ void main() {
 	                }
 	                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();
 	                }
 	            }
 	        });
@@ -75666,9 +76315,14 @@ void main() {
 	            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) => {
@@ -75967,6 +76621,11 @@ void main() {
 	        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);
 	    }
@@ -77673,11 +78332,15 @@ void main() {
 	                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
@@ -78650,7 +79313,7 @@ void main() {
 	}
 
 	// 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");
 
 	exports.CHANNEL_COLORS = CHANNEL_COLORS;