copper3d 3.1.1 → 3.2.0

package/dist/bundle.esm.js

@@ -40371,8 +40371,10 @@ class Controls {
         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();
     }
@@ -49860,6 +49862,7 @@ class baseScene extends commonScene {
         viewpoint.targetPosition = viewpointData.targetPosition;
         viewpoint.upVector = viewpointData.upVector;
         this.copperControl.updateCameraViewPoint(viewpoint);
+        this.camera.updateProjectionMatrix();
     }
     getDefaultViewPoint() {
         return this.viewPoint;
@@ -59610,6 +59613,22 @@ class copperScene extends baseScene {
         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);
@@ -60187,6 +60206,10 @@ class copperMScene extends commonScene {
         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;
@@ -71932,41 +71955,48 @@ class UndoManager {
     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;
@@ -73335,7 +73365,9 @@ class DragOperator {
             // 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();
                 }
             }
@@ -73874,6 +73906,7 @@ class EventRouter {
         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');
             }
@@ -74273,10 +74306,15 @@ class ZoomTool extends BaseTool {
     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;
@@ -74878,6 +74916,493 @@ class ImageStoreHelper extends BaseTool {
     }
 }
 
+/**
+ * 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.
  *
@@ -74898,6 +75423,7 @@ class DrawToolCore {
             handleOnDrawingBrushCricleMove: (ev) => { },
             handleMouseZoomSliceWheel: (e) => { },
             handleSphereWheel: (e) => { },
+            handleSphereBrushWheel: (e) => { },
         };
         this.contrastEventPrameters = {
             move_x: 0,
@@ -74980,6 +75506,16 @@ class DrawToolCore {
             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
@@ -75024,12 +75560,28 @@ class DrawToolCore {
             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
                 }
@@ -75081,11 +75633,16 @@ class DrawToolCore {
             if (this.drawingTool.isActive || this.panTool.isActive) {
                 this.drawingPrameters.handleOnDrawingMouseMove(e);
             }
+            // Drag-erase: route move to sphereBrushTool when sphereEraser is active
+            if (this.sphereBrushTool.isActive && this.state.gui_states.mode.sphereEraser) {
+                this.sphereBrushTool.onSphereEraserMove(e);
+            }
         });
         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);
             }
         });
@@ -75100,6 +75657,9 @@ class DrawToolCore {
             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();
@@ -75163,6 +75723,8 @@ class DrawToolCore {
         }
         // 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();
@@ -75193,6 +75755,16 @@ class DrawToolCore {
                         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);
                 }
@@ -75214,6 +75786,16 @@ class DrawToolCore {
                     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();
@@ -75258,7 +75840,9 @@ class DrawToolCore {
                     }
                 }
                 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);
                 }
             }
@@ -75445,24 +76029,26 @@ class DrawToolCore {
      * 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);
     }
@@ -75470,24 +76056,26 @@ class DrawToolCore {
      * 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);
     }
@@ -75561,6 +76149,14 @@ class DrawToolCore {
     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");
+    }
 }
 
 /**
@@ -75624,6 +76220,7 @@ class NrrdState {
             nippleSphereOrigin: null,
             sphereMaskVolume: null,
             sphereRadius: 5,
+            sphereBrushRadius: 10,
         };
         this.flags = {
             stepClear: 1,
@@ -75645,6 +76242,7 @@ class NrrdState {
         this.sphere.nippleSphereOrigin = null;
         this.sphere.sphereMaskVolume = null;
         this.sphere.sphereRadius = 5;
+        this.sphere.sphereBrushRadius = 10;
     }
 }
 
@@ -75666,6 +76264,8 @@ class GuiState {
             pencil: true,
             eraser: false,
             sphere: false,
+            sphereBrush: false,
+            sphereEraser: false,
             activeSphereType: "tumour",
         };
         this.drawing = {
@@ -76625,6 +77225,8 @@ class NrrdTools {
         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
@@ -76745,13 +77347,18 @@ class NrrdTools {
      * 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":
@@ -76772,6 +77379,24 @@ class NrrdTools {
                 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();
@@ -76784,6 +77409,10 @@ class NrrdTools {
     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)
@@ -76809,6 +77438,12 @@ class NrrdTools {
     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;
@@ -77358,10 +77993,15 @@ class NrrdTools {
     // ═══════════════════════════════════════════════════════════════════════════
     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);
@@ -77629,7 +78269,7 @@ function evaluateElement(element, weights) {
 }
 
 // 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");
 
 export { CHANNEL_COLORS, CHANNEL_HEX_COLORS, CameraViewPoint, Copper3dTrackballControls, MeshNodeTool, NrrdTools, REVISION, addBoxHelper, addLabelToScene, configKiwriousHeart, convert3DPostoScreenPos, convertScreenPosto3DPos, copperMScene, copperMSceneRenderer, copperRenderer, copperRendererOnDemond, copperScene, copperSceneOnDemond, createTexture2D_NRRD, fullScreenListenner, kiwrious, loading, removeGuiFolderChilden, rgbaToCss, rgbaToHex, setHDRFilePath, throttle };