copper3d 3.1.1 → 3.2.0

package/dist/bundle.umd.js

@@ -40379,8 +40379,10 @@ void main() {
 	        this.currentCamera.near = this.viewpoint.nearPlane;
 	        this.currentCamera.far = this.viewpoint.farPlane;
 	        this.currentCamera.position.set(this.viewpoint.eyePosition[0], this.viewpoint.eyePosition[1], this.viewpoint.eyePosition[2]);
-	        this.currentCamera.lookAt(this.viewpoint.targetPosition[0], this.viewpoint.targetPosition[1], this.viewpoint.targetPosition[2]);
+	        // up must be set BEFORE lookAt — Three.js lookAt() uses the up vector
+	        // to compute the view orientation matrix
 	        this.currentCamera.up.set(this.viewpoint.upVector[0], this.viewpoint.upVector[1], this.viewpoint.upVector[2]);
+	        this.currentCamera.lookAt(this.viewpoint.targetPosition[0], this.viewpoint.targetPosition[1], this.viewpoint.targetPosition[2]);
 	        this.currentCamera.updateProjectionMatrix();
 	        this.updateDirectionalLight();
 	    }
@@ -49868,6 +49870,7 @@ void main() {
 	        viewpoint.targetPosition = viewpointData.targetPosition;
 	        viewpoint.upVector = viewpointData.upVector;
 	        this.copperControl.updateCameraViewPoint(viewpoint);
+	        this.camera.updateProjectionMatrix();
 	    }
 	    getDefaultViewPoint() {
 	        return this.viewPoint;
@@ -59618,6 +59621,22 @@ void main() {
 	        if (position.z)
 	            model.position.z = position.z;
 	    }
+	    loadView(viewpointData) {
+	        super.loadView(viewpointData);
+	        // Sync TrackballControls with the new viewpoint
+	        if (this.controls) {
+	            const controls = this.controls;
+	            if (viewpointData.targetPosition) {
+	                controls.target.set(viewpointData.targetPosition[0], viewpointData.targetPosition[1], viewpointData.targetPosition[2]);
+	                // Update target0 so controls.reset() returns to this view
+	                controls.target0.copy(controls.target);
+	            }
+	            // Save position0/up0 so controls.reset() returns to this view
+	            controls.position0.copy(this.camera.position);
+	            controls.up0.copy(this.camera.up);
+	            controls.zoom0 = this.camera.zoom;
+	        }
+	    }
 	    resetView() {
 	        this.controls.reset();
 	        this.updateCamera(this.viewPoint);
@@ -60195,6 +60214,10 @@ void main() {
 	        if (this.subCopperControl) {
 	            this.subCopperControl.updateCameraViewPoint(viewpoint);
 	        }
+	        // Sync TrackballControls target with the new viewpoint target position
+	        if (this.controls && viewpointData.targetPosition) {
+	            this.controls.target.set(viewpointData.targetPosition[0], viewpointData.targetPosition[1], viewpointData.targetPosition[2]);
+	        }
 	    }
 	    updateCamera(viewpoint) {
 	        this.cameraPositionFlag = true;
@@ -71940,41 +71963,48 @@ void main() {
 	    setActiveLayer(layer) {
 	        this.activeLayer = layer;
 	    }
-	    /** Push a delta onto the active layer's undo stack and clear the redo stack. */
+	    /** Push a single delta onto the active layer's undo stack and clear the redo stack. */
 	    push(delta) {
+	        this.pushGroup([delta]);
+	    }
+	    /** Push a group of deltas as a single undo unit (e.g. 3D sphere spanning multiple slices). */
+	    pushGroup(deltas) {
 	        var _a, _b;
-	        const stack = (_a = this.undoStacks.get(delta.layerId)) !== null && _a !== void 0 ? _a : this.undoStacks.get("layer1");
-	        stack.push(delta);
+	        if (deltas.length === 0)
+	            return;
+	        const layerId = deltas[0].layerId;
+	        const stack = (_a = this.undoStacks.get(layerId)) !== null && _a !== void 0 ? _a : this.undoStacks.get("layer1");
+	        stack.push(deltas);
 	        if (stack.length > MAX_STACK_SIZE) {
 	            stack.shift();
 	        }
 	        // Any new operation invalidates the redo history for that layer
-	        const redoStack = (_b = this.redoStacks.get(delta.layerId)) !== null && _b !== void 0 ? _b : this.redoStacks.get("layer1");
+	        const redoStack = (_b = this.redoStacks.get(layerId)) !== null && _b !== void 0 ? _b : this.redoStacks.get("layer1");
 	        redoStack.length = 0;
 	    }
 	    /**
 	     * Undo the last operation on the active layer.
-	     * @returns The delta that was undone, or undefined if nothing to undo.
+	     * @returns The delta(s) that were undone, or undefined if nothing to undo.
 	     */
 	    undo() {
 	        const stack = this.undoStacks.get(this.activeLayer);
-	        const delta = stack.pop();
-	        if (delta) {
-	            this.redoStacks.get(this.activeLayer).push(delta);
+	        const entry = stack.pop();
+	        if (entry) {
+	            this.redoStacks.get(this.activeLayer).push(entry);
 	        }
-	        return delta;
+	        return entry;
 	    }
 	    /**
 	     * Redo the last undone operation on the active layer.
-	     * @returns The delta that was redone, or undefined if nothing to redo.
+	     * @returns The delta(s) that were redone, or undefined if nothing to redo.
 	     */
 	    redo() {
 	        const stack = this.redoStacks.get(this.activeLayer);
-	        const delta = stack.pop();
-	        if (delta) {
-	            this.undoStacks.get(this.activeLayer).push(delta);
+	        const entry = stack.pop();
+	        if (entry) {
+	            this.undoStacks.get(this.activeLayer).push(entry);
 	        }
-	        return delta;
+	        return entry;
 	    }
 	    canUndo() {
 	        var _a, _b;
@@ -73343,7 +73373,9 @@ void main() {
 	            // When leaving draw, contrast, or crosshair mode (returning to idle), restore drag mode
 	            // Do NOT restore if sphere mode is active
 	            if ((prev === 'draw' || prev === 'contrast' || prev === 'crosshair') && next === 'idle') {
-	                if (!this.gui_states.mode.sphere) {
+	                if (!this.gui_states.mode.sphere
+	                    && !this.gui_states.mode.sphereBrush
+	                    && !this.gui_states.mode.sphereEraser) {
 	                    this.configDragMode();
 	                }
 	            }
@@ -73882,6 +73914,7 @@ void main() {
 	        if (ev.key === this.keyboardSettings.draw) {
 	            this.state.shiftHeld = true;
 	            // Block draw mode when crosshair or contrast is active (mutual exclusion)
+	            // Also block when sphereBrush or sphereEraser is active
 	            if (DRAWING_TOOLS.has(this.guiTool) && !this.state.ctrlHeld && !this.state.crosshairEnabled) {
 	                this.setMode('draw');
 	            }
@@ -74281,10 +74314,15 @@ void main() {
 	    configMouseZoomWheel() {
 	        let moveDistance = 1;
 	        return (e) => {
-	            var _a;
+	            var _a, _b;
 	            if ((_a = this.ctx.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
 	                return;
 	            }
+	            // Block zoom wheel when sphereBrush/sphereEraser is actively placing (left button held)
+	            if ((this.ctx.gui_states.mode.sphereBrush || this.ctx.gui_states.mode.sphereEraser)
+	                && ((_b = this.ctx.eventRouter) === null || _b === void 0 ? void 0 : _b.isLeftButtonDown())) {
+	                return;
+	            }
 	            e.preventDefault();
 	            const delta = e.detail ? e.detail > 0 : e.wheelDelta < 0;
 	            this.ctx.protectedData.isDrawing = true;
@@ -74886,6 +74924,493 @@ void main() {
 	    }
 	}
 
+	/**
+	 * SphereBrushTool — 3D sphere brush and eraser on layer MaskVolume.
+	 *
+	 * Unlike SphereTool (which uses its own isolated sphereMaskVolume),
+	 * this tool writes/erases directly in the active layer's shared MaskVolume —
+	 * the same volume used by pencil/brush/eraser tools.
+	 *
+	 * Two operation modes handled by one class:
+	 * - **sphereBrush**: Direct click to paint a 3D sphere of the active channel label.
+	 * - **sphereEraser**: Shift+click to erase a 3D sphere (only voxels matching active channel).
+	 *
+	 * Interaction:
+	 * 1. Pointer-down records sphere center, switches wheel to radius mode.
+	 * 2. Scroll wheel adjusts sphereBrushRadius [1, 50].
+	 * 3. Pointer-up writes/erases sphere to volume, captures grouped undo, refreshes canvas.
+	 */
+	class SphereBrushTool extends BaseTool {
+	    constructor(ctx, callbacks) {
+	        super(ctx);
+	        /** Recorded sphere center in canvas mm-space */
+	        this.centerX = 0;
+	        this.centerY = 0;
+	        this.centerSlice = 0;
+	        /** Whether a sphere placement is in progress */
+	        this.active = false;
+	        /** Current operation mode for the active placement */
+	        this.mode = "brush";
+	        /** Cumulative "before" snapshots for drag-erase undo (z-index → slice data) */
+	        this.dragBeforeSnapshots = new Map();
+	        /** Whether a drag-erase has actually moved (vs. simple click-release) */
+	        this.dragMoved = false;
+	        this.callbacks = callbacks;
+	    }
+	    setCallbacks(callbacks) {
+	        this.callbacks = callbacks;
+	    }
+	    // ── Geometry (ported from SphereTool) ──────────────────────────
+	    /**
+	     * Convert canvas mm-space coordinates to 3D voxel coordinates.
+	     */
+	    canvasToVoxelCenter(canvasX, canvasY, sliceIndex, axis) {
+	        const nrrd = this.ctx.nrrd_states;
+	        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,
+	                    z: sliceIndex,
+	                };
+	            case 'y':
+	                return {
+	                    x: canvasX * nrrd.image.nrrd_x_pixel / nrrd.image.nrrd_x_mm,
+	                    y: sliceIndex,
+	                    z: (nrrd.image.nrrd_z_mm - canvasY) * nrrd.image.nrrd_z_pixel / nrrd.image.nrrd_z_mm,
+	                };
+	            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,
+	                };
+	        }
+	    }
+	    /**
+	     * Convert mm radius to per-axis voxel radii.
+	     */
+	    getVoxelRadii(radius) {
+	        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,
+	        };
+	    }
+	    /**
+	     * Compute clamped bounding box for an ellipsoid in voxel space.
+	     */
+	    getBoundingBox(center, radii, dims) {
+	        return {
+	            minX: Math.max(0, Math.floor(center.x - radii.rx)),
+	            maxX: Math.min(dims.width - 1, Math.ceil(center.x + radii.rx)),
+	            minY: Math.max(0, Math.floor(center.y - radii.ry)),
+	            maxY: Math.min(dims.height - 1, Math.ceil(center.y + radii.ry)),
+	            minZ: Math.max(0, Math.floor(center.z - radii.rz)),
+	            maxZ: Math.min(dims.depth - 1, Math.ceil(center.z + radii.rz)),
+	        };
+	    }
+	    // ── 3D Volume Write / Erase ────────────────────────────────────
+	    /**
+	     * Write a 3D sphere of the active channel label into the layer's MaskVolume.
+	     */
+	    write3DSphereToBrush(vol, center, radii, bb, label) {
+	        const { rx, ry, rz } = radii;
+	        for (let z = bb.minZ; z <= bb.maxZ; z++) {
+	            for (let y = bb.minY; y <= bb.maxY; y++) {
+	                for (let x = bb.minX; x <= bb.maxX; x++) {
+	                    const dx = rx > 0 ? (x - center.x) / rx : 0;
+	                    const dy = ry > 0 ? (y - center.y) / ry : 0;
+	                    const dz = rz > 0 ? (z - center.z) / rz : 0;
+	                    if (dx * dx + dy * dy + dz * dz <= 1.0) {
+	                        vol.setVoxel(x, y, z, label);
+	                    }
+	                }
+	            }
+	        }
+	    }
+	    /**
+	     * Erase a 3D sphere from the layer's MaskVolume.
+	     * Only clears voxels whose current value equals the active channel label.
+	     */
+	    erase3DSphereFromVolume(vol, center, radii, bb, label) {
+	        const { rx, ry, rz } = radii;
+	        for (let z = bb.minZ; z <= bb.maxZ; z++) {
+	            for (let y = bb.minY; y <= bb.maxY; y++) {
+	                for (let x = bb.minX; x <= bb.maxX; x++) {
+	                    const dx = rx > 0 ? (x - center.x) / rx : 0;
+	                    const dy = ry > 0 ? (y - center.y) / ry : 0;
+	                    const dz = rz > 0 ? (z - center.z) / rz : 0;
+	                    if (dx * dx + dy * dy + dz * dz <= 1.0) {
+	                        if (vol.getVoxel(x, y, z) === label) {
+	                            vol.setVoxel(x, y, z, 0);
+	                        }
+	                    }
+	                }
+	            }
+	        }
+	    }
+	    // ── Undo Capture ───────────────────────────────────────────────
+	    /**
+	     * Capture slice snapshots for all Z-slices in the bounding box.
+	     * Used before and after the sphere operation to build MaskDelta groups.
+	     *
+	     * We always capture along the Z axis since the 3D sphere spans Z slices.
+	     */
+	    captureSliceSnapshots(vol, minZ, maxZ) {
+	        const snapshots = new Map();
+	        for (let z = minZ; z <= maxZ; z++) {
+	            try {
+	                const { data } = vol.getSliceUint8(z, 'z');
+	                snapshots.set(z, data.slice());
+	            }
+	            catch (_a) {
+	                // slice out of bounds — skip
+	            }
+	        }
+	        return snapshots;
+	    }
+	    /**
+	     * Build MaskDelta group from before/after snapshots.
+	     */
+	    buildUndoGroup(layerId, before, after) {
+	        const deltas = [];
+	        for (const [sliceIndex, oldSlice] of before) {
+	            const newSlice = after.get(sliceIndex);
+	            if (!newSlice)
+	                continue;
+	            // Only include slices that actually changed
+	            let changed = false;
+	            for (let i = 0; i < oldSlice.length; i++) {
+	                if (oldSlice[i] !== newSlice[i]) {
+	                    changed = true;
+	                    break;
+	                }
+	            }
+	            if (changed) {
+	                deltas.push({ layerId, axis: 'z', sliceIndex, oldSlice, newSlice });
+	            }
+	        }
+	        return deltas;
+	    }
+	    // ── Preview Rendering ──────────────────────────────────────────
+	    /**
+	     * Draw a preview circle on the sphere canvas during sphere placement.
+	     */
+	    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;
+	        sphereCtx.beginPath();
+	        sphereCtx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);
+	        if (isEraser) {
+	            // Eraser preview: dashed outline
+	            sphereCtx.strokeStyle = "#ff4444";
+	            sphereCtx.lineWidth = 2;
+	            sphereCtx.setLineDash([4, 4]);
+	            sphereCtx.stroke();
+	            sphereCtx.setLineDash([]);
+	        }
+	        else {
+	            // Brush preview: semi-transparent fill with active channel color
+	            const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+	            const color = this.getActiveChannelColor(channel);
+	            sphereCtx.fillStyle = color;
+	            sphereCtx.globalAlpha = 0.5;
+	            sphereCtx.fill();
+	            sphereCtx.globalAlpha = 1.0;
+	        }
+	        sphereCtx.closePath();
+	    }
+	    /**
+	     * Clear the sphere preview canvas.
+	     */
+	    clearPreview() {
+	        const sphereCanvas = this.ctx.protectedData.canvases.drawingSphereCanvas;
+	        sphereCanvas.width = sphereCanvas.width;
+	    }
+	    /**
+	     * Get the hex color for the active channel from the layer's MaskVolume.
+	     */
+	    getActiveChannelColor(channel) {
+	        var _a;
+	        const layer = this.ctx.gui_states.layerChannel.layer;
+	        const volumes = this.ctx.protectedData.maskData.volumes;
+	        const vol = volumes[layer];
+	        if (vol) {
+	            const rgba = vol.getChannelColor(channel);
+	            const r = rgba.r.toString(16).padStart(2, '0');
+	            const g = rgba.g.toString(16).padStart(2, '0');
+	            const b = rgba.b.toString(16).padStart(2, '0');
+	            return `#${r}${g}${b}`;
+	        }
+	        return (_a = CHANNEL_HEX_COLORS[channel]) !== null && _a !== void 0 ? _a : "#ff0000";
+	    }
+	    // ── Wheel Handler ──────────────────────────────────────────────
+	    /**
+	     * Returns a wheel event handler for adjusting sphereBrushRadius.
+	     * Used in both sphereBrush and sphereEraser modes.
+	     */
+	    configSphereBrushWheel() {
+	        return (e) => {
+	            e.preventDefault();
+	            const sphere = this.ctx.nrrd_states.sphere;
+	            if (e.deltaY < 0) {
+	                sphere.sphereBrushRadius += 1;
+	            }
+	            else {
+	                sphere.sphereBrushRadius -= 1;
+	            }
+	            sphere.sphereBrushRadius = Math.max(1, Math.min(sphere.sphereBrushRadius, 50));
+	            // Redraw preview
+	            if (this.active) {
+	                this.drawPreview(this.centerX, this.centerY, sphere.sphereBrushRadius, this.mode === "eraser");
+	            }
+	        };
+	    }
+	    // ── Sphere Brush Click/PointerUp ───────────────────────────────
+	    /**
+	     * Handle pointer-down in sphereBrush mode (direct click, no Shift needed).
+	     */
+	    onSphereBrushClick(e) {
+	        this.centerX = e.offsetX / this.ctx.nrrd_states.view.sizeFactor;
+	        this.centerY = e.offsetY / this.ctx.nrrd_states.view.sizeFactor;
+	        this.centerSlice = this.ctx.nrrd_states.view.currentSliceIndex;
+	        this.active = true;
+	        this.mode = "brush";
+	        this.drawPreview(this.centerX, this.centerY, this.ctx.nrrd_states.sphere.sphereBrushRadius, false);
+	    }
+	    /**
+	     * Handle pointer-up in sphereBrush mode — write sphere to volume.
+	     */
+	    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.clearPreview();
+	            return;
+	        }
+	        const dims = vol.getDimensions();
+	        const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
+	        const radii = this.getVoxelRadii(radius);
+	        const bb = this.getBoundingBox(center, radii, dims);
+	        // Capture pre-write snapshots
+	        const before = this.captureSliceSnapshots(vol, bb.minZ, bb.maxZ);
+	        // Write sphere
+	        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);
+	        if (deltas.length > 0) {
+	            this.callbacks.pushUndoGroup(deltas);
+	        }
+	        // Refresh display and notify backend of ALL changed slices
+	        this.refreshDisplay(layer, deltas);
+	        this.clearPreview();
+	    }
+	    // ── Sphere Eraser Click/PointerUp ──────────────────────────────
+	    /**
+	     * Handle pointer-down in sphereEraser mode.
+	     * 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.centerSlice = this.ctx.nrrd_states.view.currentSliceIndex;
+	        this.active = true;
+	        this.mode = "eraser";
+	        this.dragMoved = false;
+	        this.dragBeforeSnapshots.clear();
+	        // 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;
+	        try {
+	            const vol = this.callbacks.getVolumeForLayer(layer);
+	            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 bb = this.getBoundingBox(center, radii, dims);
+	            this.expandDragBeforeSnapshots(vol, bb.minZ, bb.maxZ);
+	        }
+	        catch (_a) {
+	            // Volume not ready
+	        }
+	        this.drawPreview(this.centerX, this.centerY, radius, true);
+	    }
+	    /**
+	     * Handle pointer-move in sphereEraser mode — drag to continuously erase.
+	     */
+	    onSphereEraserMove(e) {
+	        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;
+	        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();
+	        const center = this.canvasToVoxelCenter(mouseX, mouseY, sliceIndex, axis);
+	        const radii = this.getVoxelRadii(radius);
+	        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);
+	    }
+	    /**
+	     * Handle pointer-up in sphereEraser mode — finalize erase + push undo group.
+	     * Works for both click-release and drag-release.
+	     */
+	    onSphereEraserPointerUp() {
+	        if (!this.active || this.mode !== "eraser")
+	            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.clearPreview();
+	            this.dragBeforeSnapshots.clear();
+	            return;
+	        }
+	        // If no drag occurred, erase at the click position (original click-release behavior)
+	        if (!this.dragMoved) {
+	            const dims = vol.getDimensions();
+	            const center = this.canvasToVoxelCenter(this.centerX, this.centerY, this.centerSlice, axis);
+	            const radii = this.getVoxelRadii(radius);
+	            const bb = this.getBoundingBox(center, radii, dims);
+	            this.erase3DSphereFromVolume(vol, center, radii, bb, channel);
+	        }
+	        // Build undo group from cumulative "before" snapshots vs current state
+	        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.dragBeforeSnapshots.clear();
+	    }
+	    /**
+	     * Expand cumulative "before" snapshots to cover z range [minZ, maxZ].
+	     * Only captures slices not yet in the map (preserves original state).
+	     */
+	    expandDragBeforeSnapshots(vol, minZ, maxZ) {
+	        for (let z = minZ; z <= maxZ; z++) {
+	            if (!this.dragBeforeSnapshots.has(z)) {
+	                try {
+	                    const { data } = vol.getSliceUint8(z, 'z');
+	                    this.dragBeforeSnapshots.set(z, data.slice());
+	                }
+	                catch (_a) {
+	                    // slice out of bounds
+	                }
+	            }
+	        }
+	    }
+	    /** Get minimum Z index from drag snapshots */
+	    dragMinZ() {
+	        let min = Infinity;
+	        for (const z of this.dragBeforeSnapshots.keys()) {
+	            if (z < min)
+	                min = z;
+	        }
+	        return min === Infinity ? 0 : min;
+	    }
+	    /** Get maximum Z index from drag snapshots */
+	    dragMaxZ() {
+	        let max = -Infinity;
+	        for (const z of this.dragBeforeSnapshots.keys()) {
+	            if (z > max)
+	                max = z;
+	        }
+	        return max === -Infinity ? 0 : max;
+	    }
+	    // ── Post-write Display Refresh ─────────────────────────────────
+	    /**
+	     * After writing/erasing the sphere in the volume, re-render the current
+	     * slice's layer canvas and composite all layers to master.
+	     *
+	     * @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.
+	     */
+	    refreshDisplay(layerId, changedDeltas) {
+	        // Re-render layer canvas from volume for the current slice
+	        const target = this.ctx.protectedData.layerTargets.get(layerId);
+	        if (target) {
+	            const { ctx, canvas } = target;
+	            canvas.width = canvas.width; // clear
+	            const buffer = this.callbacks.getOrCreateSliceBuffer(this.ctx.protectedData.axis);
+	            if (buffer) {
+	                this.callbacks.renderSliceToCanvas(layerId, this.ctx.protectedData.axis, this.ctx.nrrd_states.view.currentSliceIndex, buffer, ctx, this.ctx.nrrd_states.view.changedWidth, this.ctx.nrrd_states.view.changedHeight);
+	            }
+	        }
+	        // Composite all layers to master canvas
+	        this.callbacks.compositeAllLayers();
+	        // 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 {
+	            const vol = this.callbacks.getVolumeForLayer(layerId);
+	            const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+	            if (changedDeltas && changedDeltas.length > 0) {
+	                // Report every changed Z slice
+	                for (const delta of changedDeltas) {
+	                    const { data: sliceData, width, height } = vol.getSliceUint8(delta.sliceIndex, delta.axis);
+	                    this.ctx.callbacks.onMaskChanged(sliceData, layerId, channel, delta.sliceIndex, delta.axis, width, height, false);
+	                }
+	            }
+	            else {
+	                // Fallback: report only the current slice
+	                const axis = this.ctx.protectedData.axis;
+	                const sliceIndex = this.ctx.nrrd_states.view.currentSliceIndex;
+	                const { data: sliceData, width, height } = vol.getSliceUint8(sliceIndex, axis);
+	                this.ctx.callbacks.onMaskChanged(sliceData, layerId, channel, sliceIndex, axis, width, height, false);
+	            }
+	        }
+	        catch (_a) {
+	            // Volume not ready
+	        }
+	    }
+	    /** Whether a sphere placement is currently in progress */
+	    get isActive() {
+	        return this.active;
+	    }
+	}
+
 	/**
 	 * DrawToolCore — Tool orchestration and event routing.
 	 *
@@ -74906,6 +75431,7 @@ void main() {
 	            handleOnDrawingBrushCricleMove: (ev) => { },
 	            handleMouseZoomSliceWheel: (e) => { },
 	            handleSphereWheel: (e) => { },
+	            handleSphereBrushWheel: (e) => { },
 	        };
 	        this.contrastEventPrameters = {
 	            move_x: 0,
@@ -74988,6 +75514,16 @@ void main() {
 	            pushUndoDelta: (delta) => this.undoManager.push(delta),
 	            getEraserUrls: () => this.eraserUrls,
 	        });
+	        this.sphereBrushTool = new SphereBrushTool(toolCtx, {
+	            getVolumeForLayer: (layer) => this.renderer.getVolumeForLayer(layer),
+	            compositeAllLayers: () => this.renderer.compositeAllLayers(),
+	            pushUndoGroup: (deltas) => this.undoManager.pushGroup(deltas),
+	            renderSliceToCanvas: (layer, axis, sliceIndex, buffer, ctx, w, h) => this.renderer.renderSliceToCanvas(layer, axis, sliceIndex, buffer, ctx, w, h),
+	            getOrCreateSliceBuffer: (axis) => this.renderer.getOrCreateSliceBuffer(axis),
+	            setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
+	            reloadMasksFromVolume: () => this.reloadMasksFromVolume(),
+	            getEraserUrls: () => this.eraserUrls,
+	        });
 	    }
 	    initDrawToolCore() {
 	        // Initialize EventRouter for centralized event handling
@@ -75032,12 +75568,28 @@ void main() {
 	            if ((ev.ctrlKey || ev.metaKey) && (ev.key === redoKey || (ev.shiftKey && ev.key === undoKeyUpper))) {
 	                this.redoLastPainting();
 	            }
+	            // Handle mouse wheel mode toggle (Ctrl+1 = Scroll:Zoom, Ctrl+2 = Scroll:Slice)
+	            if ((ev.ctrlKey || ev.metaKey) && ev.key === '1') {
+	                ev.preventDefault();
+	                this.state.keyboardSettings.mouseWheel = 'Scroll:Zoom';
+	                this.updateMouseWheelEvent();
+	                return;
+	            }
+	            if ((ev.ctrlKey || ev.metaKey) && ev.key === '2') {
+	                ev.preventDefault();
+	                this.state.keyboardSettings.mouseWheel = 'Scroll:Slice';
+	                this.updateMouseWheelEvent();
+	                return;
+	            }
 	            // Handle crosshair toggle (allowed in drawing tools AND sphere mode)
 	            if (ev.key === this.state.keyboardSettings.crosshair) {
 	                this.eventRouter.toggleCrosshair();
 	            }
 	            // Handle draw mode (Shift key) - EventRouter already tracks this
-	            if (ev.key === this.state.keyboardSettings.draw && !this.state.gui_states.mode.sphere) {
+	            if (ev.key === this.state.keyboardSettings.draw
+	                && !this.state.gui_states.mode.sphere
+	                && !this.state.gui_states.mode.sphereBrush
+	                && !this.state.gui_states.mode.sphereEraser) {
 	                if (this.eventRouter.isCtrlHeld()) {
 	                    return; // Ctrl takes priority
 	                }
@@ -75089,11 +75641,16 @@ 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);
+	            }
 	        });
 	        this.eventRouter.setPointerUpHandler((e) => {
 	            if (this.drawingTool.isActive || this.drawingTool.painting
 	                || this.panTool.isActive
-	                || (this.state.gui_states.mode.sphere && this.eventRouter.getMode() !== 'crosshair')) {
+	                || (this.state.gui_states.mode.sphere && this.eventRouter.getMode() !== 'crosshair')
+	                || this.sphereBrushTool.isActive) {
 	                this.drawingPrameters.handleOnDrawingMouseUp(e);
 	            }
 	        });
@@ -75108,6 +75665,9 @@ void main() {
 	            else if (this.activeWheelMode === 'sphere') {
 	                this.drawingPrameters.handleSphereWheel(e);
 	            }
+	            else if (this.activeWheelMode === 'sphereBrush') {
+	                this.drawingPrameters.handleSphereBrushWheel(e);
+	            }
 	        });
 	        // Bind all event listeners
 	        this.eventRouter.bindAll();
@@ -75171,6 +75731,8 @@ void main() {
 	        }
 	        // sphere Wheel
 	        this.drawingPrameters.handleSphereWheel = this.configMouseSphereWheel();
+	        // sphere brush Wheel
+	        this.drawingPrameters.handleSphereBrushWheel = this.sphereBrushTool.configSphereBrushWheel();
 	        // brush circle move — delegated to DrawingTool
 	        this.drawingPrameters.handleOnDrawingBrushCricleMove =
 	            this.drawingTool.createBrushTrackingHandler();
@@ -75201,6 +75763,16 @@ void main() {
 	                        e.offsetY / this.state.nrrd_states.view.sizeFactor;
 	                    this.enableCrosshair();
 	                }
+	                else if (this.state.gui_states.mode.sphereBrush && !this.eventRouter.isCrosshairEnabled()) {
+	                    // SphereBrush: direct click (no Shift needed)
+	                    this.activeWheelMode = 'sphereBrush';
+	                    this.sphereBrushTool.onSphereBrushClick(e);
+	                }
+	                else if (this.state.gui_states.mode.sphereEraser && !this.eventRouter.isCrosshairEnabled()) {
+	                    // SphereEraser: direct click (Shift handled at mode level)
+	                    this.activeWheelMode = 'sphereBrush';
+	                    this.sphereBrushTool.onSphereEraserClick(e);
+	                }
 	                else if (this.state.gui_states.mode.sphere && !this.eventRouter.isCrosshairEnabled()) {
 	                    this.handleSphereClick(e);
 	                }
@@ -75222,6 +75794,16 @@ void main() {
 	                    this.drawingTool.onPointerUp(e);
 	                    this.activeWheelMode = 'zoom';
 	                }
+	                else if (this.sphereBrushTool.isActive) {
+	                    // SphereBrush or SphereEraser pointer-up
+	                    if (this.state.gui_states.mode.sphereBrush) {
+	                        this.sphereBrushTool.onSphereBrushPointerUp();
+	                    }
+	                    else if (this.state.gui_states.mode.sphereEraser) {
+	                        this.sphereBrushTool.onSphereEraserPointerUp();
+	                    }
+	                    this.activeWheelMode = 'zoom';
+	                }
 	                else if (this.state.gui_states.mode.sphere &&
 	                    !this.eventRouter.isCrosshairEnabled()) {
 	                    this.sphereTool.onSpherePointerUp();
@@ -75266,7 +75848,9 @@ void main() {
 	                    }
 	                }
 	                this.state.protectedData.ctxes.drawingCtx.drawImage(this.state.protectedData.canvases.drawingCanvasLayerMaster, 0, 0);
-	                if (this.state.gui_states.mode.sphere) {
+	                if (this.state.gui_states.mode.sphere
+	                    || this.state.gui_states.mode.sphereBrush
+	                    || this.state.gui_states.mode.sphereEraser) {
 	                    this.state.protectedData.ctxes.drawingCtx.drawImage(this.state.protectedData.canvases.drawingSphereCanvas, 0, 0, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
 	                }
 	            }
@@ -75453,24 +76037,26 @@ void main() {
 	     * Undo the last drawing operation on the active layer.
 	     */
 	    undoLastPainting() {
-	        const delta = this.undoManager.undo();
-	        if (!delta)
+	        const entry = this.undoManager.undo();
+	        if (!entry)
 	            return;
-	        try {
-	            const vol = this.renderer.getVolumeForLayer(delta.layerId);
-	            vol.setSliceUint8(delta.sliceIndex, delta.oldSlice, delta.axis);
-	        }
-	        catch (_a) {
-	            return;
-	        }
 	        this.state.protectedData.isDrawing = true;
-	        if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
-	            this.applyUndoRedoToCanvas(delta.layerId);
-	        }
-	        if (!this.state.nrrd_states.flags.loadingMaskData) {
-	            const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
-	                .getSliceUint8(delta.sliceIndex, delta.axis);
-	            this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+	        for (const delta of entry) {
+	            try {
+	                const vol = this.renderer.getVolumeForLayer(delta.layerId);
+	                vol.setSliceUint8(delta.sliceIndex, delta.oldSlice, delta.axis);
+	            }
+	            catch (_a) {
+	                continue;
+	            }
+	            if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
+	                this.applyUndoRedoToCanvas(delta.layerId);
+	            }
+	            if (!this.state.nrrd_states.flags.loadingMaskData) {
+	                const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
+	                    .getSliceUint8(delta.sliceIndex, delta.axis);
+	                this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+	            }
 	        }
 	        this.setIsDrawFalse(1000);
 	    }
@@ -75478,24 +76064,26 @@ void main() {
 	     * Redo the last undone operation on the active layer.
 	     */
 	    redoLastPainting() {
-	        const delta = this.undoManager.redo();
-	        if (!delta)
-	            return;
-	        try {
-	            const vol = this.renderer.getVolumeForLayer(delta.layerId);
-	            vol.setSliceUint8(delta.sliceIndex, delta.newSlice, delta.axis);
-	        }
-	        catch (_a) {
+	        const entry = this.undoManager.redo();
+	        if (!entry)
 	            return;
-	        }
 	        this.state.protectedData.isDrawing = true;
-	        if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
-	            this.applyUndoRedoToCanvas(delta.layerId);
-	        }
-	        if (!this.state.nrrd_states.flags.loadingMaskData) {
-	            const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
-	                .getSliceUint8(delta.sliceIndex, delta.axis);
-	            this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+	        for (const delta of entry) {
+	            try {
+	                const vol = this.renderer.getVolumeForLayer(delta.layerId);
+	                vol.setSliceUint8(delta.sliceIndex, delta.newSlice, delta.axis);
+	            }
+	            catch (_a) {
+	                continue;
+	            }
+	            if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
+	                this.applyUndoRedoToCanvas(delta.layerId);
+	            }
+	            if (!this.state.nrrd_states.flags.loadingMaskData) {
+	                const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
+	                    .getSliceUint8(delta.sliceIndex, delta.axis);
+	                this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+	            }
 	        }
 	        this.setIsDrawFalse(1000);
 	    }
@@ -75569,6 +76157,14 @@ void main() {
 	    exitSphereMode() {
 	        throw new Error("exitSphereMode must be provided by NrrdTools");
 	    }
+	    /** Override in NrrdTools */
+	    reloadMasksFromVolume() {
+	        throw new Error("reloadMasksFromVolume must be provided by NrrdTools");
+	    }
+	    /** Override in NrrdTools */
+	    updateMouseWheelEvent() {
+	        throw new Error("updateMouseWheelEvent must be provided by NrrdTools");
+	    }
 	}
 
 	/**
@@ -75632,6 +76228,7 @@ void main() {
 	            nippleSphereOrigin: null,
 	            sphereMaskVolume: null,
 	            sphereRadius: 5,
+	            sphereBrushRadius: 10,
 	        };
 	        this.flags = {
 	            stepClear: 1,
@@ -75653,6 +76250,7 @@ void main() {
 	        this.sphere.nippleSphereOrigin = null;
 	        this.sphere.sphereMaskVolume = null;
 	        this.sphere.sphereRadius = 5;
+	        this.sphere.sphereBrushRadius = 10;
 	    }
 	}
 
@@ -75674,6 +76272,8 @@ void main() {
 	            pencil: true,
 	            eraser: false,
 	            sphere: false,
+	            sphereBrush: false,
+	            sphereEraser: false,
 	            activeSphereType: "tumour",
 	        };
 	        this.drawing = {
@@ -76633,6 +77233,8 @@ void main() {
 	        this.drawCore.enterSphereMode = () => this.enterSphereMode();
 	        this.drawCore.exitSphereMode = () => this.exitSphereMode();
 	        this.drawCore.configMouseSliceWheel = () => this.configMouseSliceWheel();
+	        this.drawCore.reloadMasksFromVolume = () => this.reloadMasksFromVolume();
+	        this.drawCore.updateMouseWheelEvent = () => this.updateMouseWheelEvent();
 	    }
 	    /**
 	     * A initialise function for nrrd_tools
@@ -76753,13 +77355,18 @@ void main() {
 	     * Set the current tool mode.
 	     */
 	    setMode(mode) {
+	        var _a, _b, _c;
 	        if (!this.guiCallbacks)
 	            return;
 	        const prevSphere = this.state.gui_states.mode.sphere;
+	        const prevSphereBrush = this.state.gui_states.mode.sphereBrush;
+	        const prevSphereEraser = this.state.gui_states.mode.sphereEraser;
 	        const prevCalculator = this._calculatorActive;
 	        this.state.gui_states.mode.pencil = false;
 	        this.state.gui_states.mode.eraser = false;
 	        this.state.gui_states.mode.sphere = false;
+	        this.state.gui_states.mode.sphereBrush = false;
+	        this.state.gui_states.mode.sphereEraser = false;
 	        this._calculatorActive = false;
 	        switch (mode) {
 	            case "pencil":
@@ -76780,6 +77387,24 @@ void main() {
 	                this.state.gui_states.mode.sphere = true;
 	                this._calculatorActive = true;
 	                break;
+	            case "sphereBrush":
+	                this.state.gui_states.mode.sphereBrush = true;
+	                this.dragOperator.removeDragMode();
+	                (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setGuiTool('sphereBrush');
+	                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');
+	                break;
+	        }
+	        // Restore drag mode when leaving sphereBrush/sphereEraser
+	        if ((prevSphereBrush || prevSphereEraser)
+	            && !this.state.gui_states.mode.sphereBrush
+	            && !this.state.gui_states.mode.sphereEraser
+	            && !this.state.gui_states.mode.sphere) {
+	            this.dragOperator.configDragMode();
+	            (_c = this.drawCore.eventRouter) === null || _c === void 0 ? void 0 : _c.setGuiTool('pencil');
 	        }
 	        if (prevSphere && !this.state.gui_states.mode.sphere) {
 	            this.guiCallbacks.updateSphereState();
@@ -76792,6 +77417,10 @@ void main() {
 	    getMode() {
 	        if (this._calculatorActive)
 	            return "calculator";
+	        if (this.state.gui_states.mode.sphereBrush)
+	            return "sphereBrush";
+	        if (this.state.gui_states.mode.sphereEraser)
+	            return "sphereEraser";
 	        if (this.state.gui_states.mode.sphere)
 	            return "sphere";
 	        if (this.state.gui_states.mode.eraser)
@@ -76817,6 +77446,12 @@ void main() {
 	    getBrushSize() {
 	        return this.state.gui_states.drawing.brushAndEraserSize;
 	    }
+	    setSphereBrushRadius(radius) {
+	        this.state.nrrd_states.sphere.sphereBrushRadius = Math.max(1, Math.min(50, radius));
+	    }
+	    getSphereBrushRadius() {
+	        return this.state.nrrd_states.sphere.sphereBrushRadius;
+	    }
 	    setWindowHigh(value) {
 	        var _a;
 	        this.state.gui_states.viewConfig.readyToUpdate = false;
@@ -77366,10 +78001,15 @@ void main() {
 	    // ═══════════════════════════════════════════════════════════════════════════
 	    configMouseSliceWheel() {
 	        const handleMouseZoomSliceWheelMove = (e) => {
-	            var _a;
+	            var _a, _b;
 	            if ((_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
 	                return;
 	            }
+	            // Block slice wheel when sphereBrush/sphereEraser is actively placing (left button held)
+	            if ((this.state.gui_states.mode.sphereBrush || this.state.gui_states.mode.sphereEraser)
+	                && ((_b = this.drawCore.eventRouter) === null || _b === void 0 ? void 0 : _b.isLeftButtonDown())) {
+	                return;
+	            }
 	            e.preventDefault();
 	            if (e.deltaY < 0) {
 	                this.setSliceMoving(-1);
@@ -77637,7 +78277,7 @@ void main() {
 	}
 
 	// import * as kiwrious from "copper3d_plugin_heart_k";
-	const REVISION = "v3.1.1-beta";
+	const REVISION = "v3.2.0-beta";
 	console.log(`%cCopper3D Visualisation %cBeta:${REVISION}`, "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 	exports.CHANNEL_COLORS = CHANNEL_COLORS;