copper3d 3.0.0 → 3.0.1

package/dist/bundle.umd.js

@@ -71146,127 +71146,6 @@ void main() {
 	            }
 	        }
 	    }
-	    /**
-	     * Extract a 2D slice as raw RGBA ImageData (lossless round-trip).
-	     *
-	     * Requires the volume to have **≥ 4 channels** (ch0=R, ch1=G, ch2=B, ch3=A).
-	     * Returns the exact pixel data that was stored via `setSliceFromImageData`,
-	     * bypassing all render modes.
-	     *
-	     * @param sliceIndex Index along the specified axis.
-	     * @param axis       `'x'`, `'y'`, or `'z'` (default `'z'`).
-	     * @returns ImageData with the stored RGBA values.
-	     *
-	     * @throws {RangeError} If sliceIndex is out of bounds.
-	     * @throws {Error}      If the volume has fewer than 4 channels.
-	     */
-	    getSliceRawImageData(sliceIndex, axis = 'z') {
-	        if (this.numChannels < 4) {
-	            throw new Error(`getSliceRawImageData requires ≥ 4 channels, volume has ${this.numChannels}`);
-	        }
-	        this.validateSliceIndex(sliceIndex, axis);
-	        const { width, height } = this.dims;
-	        const ch = this.numChannels;
-	        const [sliceWidth, sliceHeight] = this.getSliceDimensions(axis);
-	        const imageData = new ImageData(sliceWidth, sliceHeight);
-	        const pixels = imageData.data;
-	        const volData = this.data;
-	        if (axis === 'z') {
-	            // Z-axis (axial): slice data is contiguous in memory — direct bulk copy
-	            const offset = sliceIndex * this.bytesPerSlice;
-	            pixels.set(volData.subarray(offset, offset + this.bytesPerSlice));
-	        }
-	        else if (axis === 'y') {
-	            // Y-axis (coronal): each row (fixed z, fixed y, varying x) is contiguous
-	            // mapping: (i → x, sliceIndex → y, j → z)
-	            const rowBytes = width * ch;
-	            let px = 0;
-	            for (let j = 0; j < sliceHeight; j++) {
-	                const rowStart = j * height * width * ch + sliceIndex * width * ch;
-	                pixels.set(volData.subarray(rowStart, rowStart + rowBytes), px);
-	                px += rowBytes;
-	            }
-	        }
-	        else {
-	            // X-axis (sagittal): pixels not contiguous, but avoid function call overhead
-	            // After dimension fix: sliceWidth = depth (Z), sliceHeight = height (Y)
-	            // j → y (rows), i → z (columns)
-	            let px = 0;
-	            for (let j = 0; j < sliceHeight; j++) {
-	                const yOffset = j * width * ch;
-	                for (let i = 0; i < sliceWidth; i++) {
-	                    const baseIdx = i * height * width * ch + yOffset + sliceIndex * ch;
-	                    pixels[px] = volData[baseIdx];
-	                    pixels[px + 1] = volData[baseIdx + 1];
-	                    pixels[px + 2] = volData[baseIdx + 2];
-	                    pixels[px + 3] = volData[baseIdx + 3];
-	                    px += 4;
-	                }
-	            }
-	        }
-	        return imageData;
-	    }
-	    /**
-	     * Write slice data into an existing ImageData buffer (zero-allocation).
-	     *
-	     * Same semantics as {@link getSliceRawImageData} but avoids creating a new
-	     * ImageData object on every call.  The caller is responsible for providing
-	     * a buffer whose dimensions match the expected slice size.
-	     *
-	     * All pixels are fully overwritten — no clearing is needed beforehand.
-	     *
-	     * @param sliceIndex Index along the specified axis.
-	     * @param axis       `'x'`, `'y'`, or `'z'` (default `'z'`).
-	     * @param target     Pre-allocated ImageData to write into.
-	     *
-	     * @throws {Error}      If the volume has fewer than 4 channels.
-	     * @throws {RangeError} If sliceIndex is out of bounds.
-	     * @throws {Error}      If target dimensions don't match the slice.
-	     */
-	    getSliceRawImageDataInto(sliceIndex, axis = 'z', target) {
-	        if (this.numChannels < 4) {
-	            throw new Error(`getSliceRawImageDataInto requires ≥ 4 channels, volume has ${this.numChannels}`);
-	        }
-	        this.validateSliceIndex(sliceIndex, axis);
-	        const [sliceWidth, sliceHeight] = this.getSliceDimensions(axis);
-	        if (target.width !== sliceWidth || target.height !== sliceHeight) {
-	            throw new Error(`Buffer size mismatch: expected ${sliceWidth}×${sliceHeight}, ` +
-	                `got ${target.width}×${target.height}`);
-	        }
-	        const { width, height } = this.dims;
-	        const ch = this.numChannels;
-	        const pixels = target.data;
-	        const volData = this.data;
-	        if (axis === 'z') {
-	            const offset = sliceIndex * this.bytesPerSlice;
-	            pixels.set(volData.subarray(offset, offset + this.bytesPerSlice));
-	        }
-	        else if (axis === 'y') {
-	            const rowBytes = width * ch;
-	            let px = 0;
-	            for (let j = 0; j < sliceHeight; j++) {
-	                const rowStart = j * height * width * ch + sliceIndex * width * ch;
-	                pixels.set(volData.subarray(rowStart, rowStart + rowBytes), px);
-	                px += rowBytes;
-	            }
-	        }
-	        else {
-	            // X-axis (sagittal): sliceWidth = depth (Z), sliceHeight = height (Y)
-	            // j → y (rows), i → z (columns)
-	            let px = 0;
-	            for (let j = 0; j < sliceHeight; j++) {
-	                const yOffset = j * width * ch;
-	                for (let i = 0; i < sliceWidth; i++) {
-	                    const baseIdx = i * height * width * ch + yOffset + sliceIndex * ch;
-	                    pixels[px] = volData[baseIdx];
-	                    pixels[px + 1] = volData[baseIdx + 1];
-	                    pixels[px + 2] = volData[baseIdx + 2];
-	                    pixels[px + 3] = volData[baseIdx + 3];
-	                    px += 4;
-	                }
-	            }
-	        }
-	    }
 	    // ── Label-based storage (1-channel volumes) ────────────────────────
 	    /**
 	    /**
@@ -72789,12 +72668,12 @@ void main() {
 	        this.eventRouter.subscribeModeChange((prevMode, newMode) => {
 	            const prev = prevMode;
 	            const next = newMode;
-	            // When entering draw or contrast mode, remove drag mode
-	            if (next === 'draw' || next === 'contrast') {
+	            // When entering draw, contrast, or crosshair mode, remove drag mode
+	            if (next === 'draw' || next === 'contrast' || next === 'crosshair') {
 	                this.removeDragMode();
 	            }
-	            // When leaving draw or contrast mode (returning to idle), restore drag mode
-	            if ((prev === 'draw' || prev === 'contrast') && next === 'idle') {
+	            // When leaving draw, contrast, or crosshair mode (returning to idle), restore drag mode
+	            if ((prev === 'draw' || prev === 'contrast' || prev === 'crosshair') && next === 'idle') {
 	                if (!this.gui_states.sphere) {
 	                    this.configDragMode();
 	                }
@@ -72897,7 +72776,6 @@ void main() {
 	            ratios: { x: 1, y: 1, z: 1 },
 	            contrastNum: 0,
 	            showContrast: false,
-	            enableCursorChoose: false,
 	            isCursorSelect: false,
 	            cursorPageX: 0,
 	            cursorPageY: 0,
@@ -73037,8 +72915,6 @@ void main() {
 	            skipSlicesDic: {},
 	            currentShowingSlice: undefined,
 	            mainPreSlices: undefined,
-	            Is_Shift_Pressed: false,
-	            Is_Ctrl_Pressed: false,
 	            Is_Draw: false,
 	            axis: "z",
 	            maskData: {
@@ -73188,12 +73064,6 @@ void main() {
 	    clearStoreImages() {
 	        throw new Error("Child class must implement abstract clearStoreImages, currently you can find it in NrrdTools.");
 	    }
-	    /**
-	     * Rewrite this {createEmptyPaintImage} function under NrrdTools
-	     */
-	    createEmptyPaintImage(dimensions, paintImages) {
-	        throw new Error("Child class must implement abstract clearStoreImages, currently you can find it in NrrdTools.");
-	    }
 	    /**
 	     * Rewrite this {resizePaintArea} function under NrrdTools
 	     */
@@ -73255,13 +73125,13 @@ void main() {
 	        throw new Error("Child class must implement abstract redrawDisplayCanvas, currently you can find it in NrrdTools.");
 	    }
 	    /**
-	     * Get a painted mask image (IPaintImage) based on current axis and input slice index.
+	     * Get a painted mask image based on current axis and input slice index.
 	     *
-	     * Phase 3: Reads directly from MaskVolume (no caching needed — reads are fast).
+	     * Phase 3: Reads directly from MaskVolume.
 	     *
 	     * @param axis "x" | "y" | "z"
 	     * @param sliceIndex number
-	     * @returns IPaintImage with the mask for the given slice, or undefined if not found
+	     * @returns Object with index and image, or undefined
 	     */
 	    filterDrawedImage(axis, sliceIndex) {
 	        try {
@@ -73318,7 +73188,7 @@ void main() {
 	    /**
 	     * Render a layer's slice into a reusable buffer and draw to the target canvas.
 	     *
-	     * Uses MaskVolume.getSliceRawImageDataInto() for zero-allocation rendering.
+	     * Uses MaskVolume.renderLabelSliceInto() for zero-allocation rendering.
 	     * The caller should obtain the buffer via getOrCreateSliceBuffer() and reuse
 	     * it across multiple layer renders.
 	     *
@@ -73574,11 +73444,13 @@ void main() {
 	    }
 	    /**
 	     * Toggle crosshair mode.
+	     * Blocked when draw or contrast mode is active (mutual exclusion).
 	     */
 	    toggleCrosshair() {
 	        if (!DRAWING_TOOLS.has(this.guiTool))
 	            return;
-	        if (this.state.shiftHeld || this.state.ctrlHeld)
+	        // Block crosshair activation during draw or contrast
+	        if (this.state.shiftHeld || this.mode === 'draw' || this.mode === 'contrast')
 	            return;
 	        this.state.crosshairEnabled = !this.state.crosshairEnabled;
 	        this.setMode(this.state.crosshairEnabled ? 'crosshair' : 'idle');
@@ -73697,12 +73569,16 @@ void main() {
 	        // Update state based on modifier keys
 	        if (ev.key === this.keyboardSettings.draw) {
 	            this.state.shiftHeld = true;
-	            if (DRAWING_TOOLS.has(this.guiTool) && !this.state.ctrlHeld) {
+	            // Block draw mode when crosshair or contrast is active (mutual exclusion)
+	            if (DRAWING_TOOLS.has(this.guiTool) && !this.state.ctrlHeld && !this.state.crosshairEnabled) {
 	                this.setMode('draw');
 	            }
 	        }
 	        if (this.contrastEnabled && this.keyboardSettings.contrast.includes(ev.key)) {
-	            this.state.ctrlHeld = true;
+	            // Block contrast state when crosshair or draw is active (mutual exclusion)
+	            if (!this.state.crosshairEnabled && this.mode !== 'draw') {
+	                this.state.ctrlHeld = true;
+	            }
 	        }
 	        // Route to external handler
 	        if (this.keydownHandler) {
@@ -73862,7 +73738,7 @@ void main() {
 	        this.callbacks.setEmptyCanvasSize(axis);
 	        this.callbacks.drawImageOnEmptyImage(this.ctx.protectedData.canvases.drawingSphereCanvas);
 	        const imageData = this.ctx.protectedData.ctxes.emptyCtx.getImageData(0, 0, this.ctx.protectedData.canvases.emptyCanvas.width, this.ctx.protectedData.canvases.emptyCanvas.height);
-	        this.callbacks.storeImageToAxis(index, { x: [], y: [], z: [] }, imageData, axis);
+	        this.callbacks.storeImageToAxis(index, imageData, axis);
 	    }
 	    // ===== Multi-View Sphere =====
 	    drawSphereOnEachViews(decay, axis) {
@@ -74259,7 +74135,8 @@ void main() {
 	    configMouseZoomWheel() {
 	        let moveDistance = 1;
 	        return (e) => {
-	            if (this.ctx.protectedData.Is_Shift_Pressed) {
+	            var _a;
+	            if ((_a = this.ctx.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
 	                return;
 	            }
 	            e.preventDefault();
@@ -74396,8 +74273,7 @@ void main() {
 	 * Extracted from DrawToolCore.ts:
 	 * - storeAllImages / storeImageToAxis / storeImageToLayer / storeEachLayerImage
 	 *
-	 * Phase 2 Day 7: Updated to write/read MaskVolume alongside legacy IPaintImages.
-	 * Volume is the primary storage; IPaintImages kept for backward compatibility.
+	 * Phase 3: MaskVolume is the sole storage backend. All IPaintImages params removed.
 	 */
 	class ImageStoreHelper extends BaseTool {
 	    constructor(ctx, callbacks) {
@@ -74414,12 +74290,12 @@ void main() {
 	     */
 	    getVolumeForLayer(layer) {
 	        const { volumes } = this.ctx.protectedData.maskData;
-	        switch (layer) {
-	            case "layer1": return volumes.layer1;
-	            case "layer2": return volumes.layer2;
-	            case "layer3": return volumes.layer3;
-	            default: return volumes.layer1;
-	        }
+	        const vol = volumes[layer];
+	        if (vol)
+	            return vol;
+	        const firstLayerId = this.ctx.nrrd_states.layers[0];
+	        console.warn(`ImageStoreHelper: unknown layer "${layer}", falling back to "${firstLayerId}"`);
+	        return volumes[firstLayerId];
 	    }
 	    /**
 	     * Get MaskVolume for the currently active layer.
@@ -74438,19 +74314,17 @@ void main() {
 	    }
 	    // ===== Store Image To Axis =====
 	    /**
-	     * Phase 3: Simplified to be a no-op.
-	     * MaskVolume storage happens in storeAllImages via setSliceFromImageData.
-	     * This method kept for backward compatibility with existing call sites.
+	     * Phase 3: No-op — MaskVolume storage happens in storeAllImages.
 	     */
-	    storeImageToAxis(_index, _paintedImages, _imageData, _axis) {
+	    storeImageToAxis(_index, _imageData, _axis) {
 	        // No-op: MaskVolume is the primary storage, updated in storeAllImages
 	    }
 	    /**
 	     * Retrieve the drawn image for a given axis and slice.
 	     *
-	     * Phase 3: Reads exclusively from MaskVolume (no legacy fallback).
+	     * Phase 3: Reads exclusively from MaskVolume.
 	     */
-	    filterDrawedImage(axis, sliceIndex, _paintedImages) {
+	    filterDrawedImage(axis, sliceIndex) {
 	        try {
 	            const volume = this.getCurrentVolume();
 	            if (volume) {
@@ -74539,10 +74413,9 @@ void main() {
 	        }
 	    }
 	    /**
-	     * Phase 3: Simplified - extracts ImageData from canvas but no longer stores to paintImages.
-	     * Kept for backward compatibility with existing call sites.
+	     * Extract ImageData from canvas (MaskVolume storage is handled in storeAllImages).
 	     */
-	    storeImageToLayer(_index, canvas, _paintedImages) {
+	    storeImageToLayer(_index, canvas) {
 	        if (!this.ctx.nrrd_states.loadMaskJson) {
 	            this.callbacks.setEmptyCanvasSize();
 	            this.callbacks.drawImageOnEmptyImage(canvas);
@@ -74551,16 +74424,6 @@ void main() {
 	        // No longer stores to paintedImages - MaskVolume is primary storage
 	        return imageData;
 	    }
-	    // ===== Helper Methods =====
-	    hasNonZeroPixels(imageData) {
-	        const data = imageData.data;
-	        for (let i = 0; i < data.length; i += 4) {
-	            if (data[i] !== 0 || data[i + 1] !== 0 || data[i + 2] !== 0 || data[i + 3] !== 0) {
-	                return true;
-	            }
-	        }
-	        return false;
-	    }
 	}
 
 	class DrawToolCore extends CommToolsData {
@@ -74639,8 +74502,7 @@ void main() {
 	        this.sphereTool = new SphereTool(toolCtx, {
 	            setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
 	            drawImageOnEmptyImage: (canvas) => this.drawImageOnEmptyImage(canvas),
-	            storeImageToAxis: (index, paintedImages, imageData, axis) => this.imageStoreHelper.storeImageToAxis(index, paintedImages, imageData, axis),
-	            createEmptyPaintImage: (dimensions, paintImages) => this.createEmptyPaintImage(dimensions, paintImages),
+	            storeImageToAxis: (index, imageData, axis) => this.imageStoreHelper.storeImageToAxis(index, imageData, axis),
 	        });
 	        this.crosshairTool = new CrosshairTool(toolCtx);
 	        this.contrastTool = new ContrastTool(toolCtx, this.container, this.contrastEventPrameters, {
@@ -74663,40 +74525,28 @@ void main() {
 	                // Use string comparison to avoid TypeScript narrowing issues
 	                const prev = prevMode;
 	                const next = newMode;
-	                // Sync EventRouter mode changes with existing state flags
-	                if (next === 'draw') {
-	                    this.protectedData.Is_Shift_Pressed = true;
-	                    this.nrrd_states.enableCursorChoose = false;
-	                }
-	                else if (prev === 'draw') {
-	                    this.protectedData.Is_Shift_Pressed = false;
-	                }
 	                if (next === 'contrast') {
-	                    this.protectedData.Is_Ctrl_Pressed = true;
-	                    this.protectedData.Is_Shift_Pressed = false;
 	                    this.configContrastDragMode();
 	                }
 	                else if (prev === 'contrast') {
-	                    this.protectedData.Is_Ctrl_Pressed = false;
 	                    this.removeContrastDragMode();
 	                    this.gui_states.readyToUpdate = true;
 	                }
 	                if (next === 'crosshair') {
-	                    this.nrrd_states.enableCursorChoose = true;
 	                    this.protectedData.Is_Draw = false;
 	                }
-	                else if (prev === 'crosshair') {
-	                    this.nrrd_states.enableCursorChoose = false;
-	                }
 	            }
 	        });
+	        // Inject eventRouter into ToolContext so tools can query mode/state
+	        const toolCtx = this.sphereTool['ctx'];
+	        toolCtx.eventRouter = this.eventRouter;
 	        // Configure keyboard settings from class field
 	        this.eventRouter.setKeyboardSettings(this._keyboardSettings);
 	        // Track undo flag for Ctrl+Z handling
 	        let undoFlag = false;
 	        // Register keyboard handlers with EventRouter
 	        this.eventRouter.setKeydownHandler((ev) => {
-	            var _a;
+	            var _a, _b;
 	            if (this._configKeyBoard)
 	                return;
 	            // Handle undo (Ctrl+Z)
@@ -74717,15 +74567,16 @@ void main() {
 	                }
 	            }
 	            // Handle draw mode (Shift key) - EventRouter already tracks this
+	            // EventRouter's handleKeyDown will enforce mutual exclusion
 	            if (ev.key === this._keyboardSettings.draw && !this.gui_states.sphere && !this.gui_states.calculator) {
-	                if (this.protectedData.Is_Ctrl_Pressed) {
+	                if ((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCtrlHeld()) {
 	                    return; // Ctrl takes priority
 	                }
 	                // EventRouter will set mode to 'draw' via internal handler
 	            }
 	        });
 	        this.eventRouter.setKeyupHandler((ev) => {
-	            var _a, _b, _c, _d;
+	            var _a, _b, _c, _d, _e, _f;
 	            if (this._configKeyBoard)
 	                return;
 	            // Handle Ctrl key release (contrast mode toggle)
@@ -74738,12 +74589,15 @@ void main() {
 	                // Skip mode toggle when contrast shortcut is disabled
 	                if (!((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isContrastEnabled()))
 	                    return;
+	                // Block contrast toggle during crosshair or draw (mutual exclusion)
+	                if (((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled()) || ((_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.getMode()) === 'draw')
+	                    return;
 	                // Toggle contrast mode manually since it's on keyup
-	                if (((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.getMode()) !== 'contrast') {
-	                    (_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.setMode('contrast');
+	                if (((_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.getMode()) !== 'contrast') {
+	                    (_e = this.eventRouter) === null || _e === void 0 ? void 0 : _e.setMode('contrast');
 	                }
 	                else {
-	                    (_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.setMode('idle');
+	                    (_f = this.eventRouter) === null || _f === void 0 ? void 0 : _f.setMode('idle');
 	                }
 	            }
 	        });
@@ -74919,6 +74773,7 @@ void main() {
 	            }
 	        };
 	        this.drawingPrameters.handleOnDrawingMouseDown = (e) => {
+	            var _a, _b, _c, _d;
 	            if (leftclicked || rightclicked) {
 	                this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                this.protectedData.ctxes.drawingLayerMasterCtx.closePath();
@@ -74934,7 +74789,7 @@ void main() {
 	            // remove it when mouse click down
 	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	            if (e.button === 0) {
-	                if (this.protectedData.Is_Shift_Pressed) {
+	                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw') {
 	                    leftclicked = true;
 	                    lines = [];
 	                    Is_Painting = true;
@@ -74961,13 +74816,13 @@ void main() {
 	                        const vol = this.getVolumeForLayer(this.gui_states.layer);
 	                        this.preDrawSlice = vol.getSliceUint8(this.preDrawSliceIndex, this.preDrawAxis).data.slice();
 	                    }
-	                    catch (_a) {
+	                    catch (_e) {
 	                        this.preDrawSlice = null;
 	                    }
 	                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                    this.protectedData.canvases.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
 	                }
-	                else if (this.nrrd_states.enableCursorChoose) {
+	                else if ((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled()) {
 	                    this.nrrd_states.cursorPageX =
 	                        e.offsetX / this.nrrd_states.sizeFoctor;
 	                    this.nrrd_states.cursorPageY =
@@ -74975,10 +74830,10 @@ void main() {
 	                    this.enableCrosshair();
 	                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                }
-	                else if (this.gui_states.sphere && !this.nrrd_states.enableCursorChoose) {
+	                else if (this.gui_states.sphere && !((_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.isCrosshairEnabled())) {
 	                    sphere(e);
 	                }
-	                else if (this.gui_states.calculator && !this.nrrd_states.enableCursorChoose) {
+	                else if (this.gui_states.calculator && !((_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.isCrosshairEnabled())) {
 	                    this.drawCalSphereDown(e.offsetX, e.offsetY, this.nrrd_states.currentIndex, this.gui_states.cal_distance);
 	                }
 	            }
@@ -75043,8 +74898,9 @@ void main() {
 	            ctx.drawImage(this.protectedData.canvases.emptyCanvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
 	        };
 	        this.drawingPrameters.handleOnDrawingMouseUp = (e) => {
+	            var _a, _b, _c, _d;
 	            if (e.button === 0) {
-	                if (this.protectedData.Is_Shift_Pressed || Is_Painting) {
+	                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw' || Is_Painting) {
 	                    leftclicked = false;
 	                    let { ctx, canvas } = this.setCurrentLayer();
 	                    ctx.closePath();
@@ -75092,7 +74948,7 @@ void main() {
 	                            };
 	                            this.undoManager.push(delta);
 	                        }
-	                        catch (_a) {
+	                        catch (_e) {
 	                            // Volume not ready — skip
 	                        }
 	                        this.preDrawSlice = null;
@@ -75103,7 +74959,7 @@ void main() {
 	                    });
 	                }
 	                else if (this.gui_states.sphere &&
-	                    !this.nrrd_states.enableCursorChoose) {
+	                    !((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled())) {
 	                    // plan B
 	                    // findout all index in the sphere radius range in Axial view
 	                    if (this.nrrd_states.spherePlanB) {
@@ -75123,12 +74979,12 @@ void main() {
 	                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                }
 	                else if ((this.gui_states.sphere || this.gui_states.calculator) &&
-	                    this.nrrd_states.enableCursorChoose) {
+	                    ((_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.isCrosshairEnabled())) {
 	                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                }
 	                else if (this.gui_states.calculator &&
-	                    !this.nrrd_states.enableCursorChoose) {
+	                    !((_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.isCrosshairEnabled())) {
 	                    // When mouse up
 	                    this.drawCalSphereUp();
 	                }
@@ -75170,6 +75026,7 @@ void main() {
 	            }
 	        });
 	        this.start = () => {
+	            var _a, _b;
 	            if (this.gui_states.readyToUpdate) {
 	                this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
 	                this.protectedData.ctxes.drawingCtx.globalAlpha =
@@ -75183,7 +75040,10 @@ void main() {
 	                    }
 	                }
 	                else {
-	                    if (this.protectedData.Is_Shift_Pressed) {
+	                    // Use EventRouter mode for mutually exclusive crosshair vs draw rendering
+	                    const currentMode = (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode();
+	                    if (currentMode === 'draw') {
+	                        // Draw mode: show brush circle preview
 	                        if (!this.gui_states.pencil &&
 	                            !this.gui_states.Eraser &&
 	                            this.nrrd_states.Mouse_Over) {
@@ -75197,7 +75057,8 @@ void main() {
 	                            this.protectedData.ctxes.drawingCtx.stroke();
 	                        }
 	                    }
-	                    if (this.nrrd_states.enableCursorChoose) {
+	                    else if (currentMode === 'crosshair' || ((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled())) {
+	                        // Crosshair mode: show red cross lines (mutually exclusive with draw)
 	                        this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
 	                        const ex = this.nrrd_states.cursorPageX * this.nrrd_states.sizeFoctor;
 	                        const ey = this.nrrd_states.cursorPageY * this.nrrd_states.sizeFoctor;
@@ -75353,19 +75214,18 @@ void main() {
 	    /**
 	     * Clear mask on current slice canvas.
 	     *
-	     * Phase 2: Clears the MaskVolume slice for all three layers,
-	     * re-stores, and notifies external via getMask callback with clearFlag=true.
-	     * Phase 6: Also records a MaskDelta for undo support.
+	     * Only clears the active layer's MaskVolume slice data.
+	     * Other layers are left untouched. After clearing, all layer canvases
+	     * are re-rendered from MaskVolume to keep visuals in sync.
 	     */
 	    clearPaint() {
 	        this.protectedData.Is_Draw = true;
-	        this.resetLayerCanvas();
 	        this.protectedData.canvases.originCanvas.width =
 	            this.protectedData.canvases.originCanvas.width;
 	        this.protectedData.mainPreSlices.repaint.call(this.protectedData.mainPreSlices);
 	        this.protectedData.previousDrawingImage =
 	            this.protectedData.ctxes.emptyCtx.createImageData(1, 1);
-	        // Phase 2 + 6: Clear volume slices and record undo delta
+	        // Clear only the active layer's MaskVolume slice and record undo delta
 	        try {
 	            const axis = this.protectedData.axis;
 	            const idx = this.nrrd_states.currentIndex;
@@ -75373,11 +75233,8 @@ void main() {
 	            const vol = this.getVolumeForLayer(activeLayer);
 	            // Capture old slice for undo before clearing
 	            const oldSlice = vol.getSliceUint8(idx, axis).data.slice();
-	            // Clear only the active layer (clear also clears all for canvas consistency)
-	            const { layer1, layer2, layer3 } = this.protectedData.maskData.volumes;
-	            layer1.clearSlice(idx, axis);
-	            layer2.clearSlice(idx, axis);
-	            layer3.clearSlice(idx, axis);
+	            // Clear only the active layer's MaskVolume slice
+	            vol.clearSlice(idx, axis);
 	            // New (all-zero) slice for undo newSlice
 	            const { data: newSlice, width, height } = vol.getSliceUint8(idx, axis);
 	            // Push clearPaint delta to UndoManager (supports undo)
@@ -75396,12 +75253,23 @@ void main() {
 	            }
 	        }
 	        catch (_a) {
-	            // Volume not ready (1×1×1 placeholder) — continue with legacy path
+	            // Volume not ready (1×1×1 placeholder)
+	        }
+	        // Re-render ALL layers from MaskVolume to canvas (rebuilds visuals from source of truth)
+	        this.resetLayerCanvas();
+	        const buffer = this.getOrCreateSliceBuffer(this.protectedData.axis);
+	        if (buffer) {
+	            const w = this.nrrd_states.changedWidth;
+	            const h = this.nrrd_states.changedHeight;
+	            for (const layerId of this.nrrd_states.layers) {
+	                const target = this.protectedData.layerTargets.get(layerId);
+	                if (!target)
+	                    continue;
+	                target.ctx.clearRect(0, 0, w, h);
+	                this.renderSliceToCanvas(layerId, this.protectedData.axis, this.nrrd_states.currentIndex, buffer, target.ctx, w, h);
+	            }
 	        }
-	        this.storeAllImages(this.nrrd_states.currentIndex, this.gui_states.layer);
-	        const restLayers = this.getRestLayer();
-	        this.storeEachLayerImage(this.nrrd_states.currentIndex, restLayers[0]);
-	        this.storeEachLayerImage(this.nrrd_states.currentIndex, restLayers[1]);
+	        this.compositeAllLayers();
 	        this.setIsDrawFalse(1000);
 	    }
 	    /**
@@ -75482,14 +75350,11 @@ void main() {
 	            this.protectedData.ctxes.drawingLayerMasterCtx.getImageData(0, 0, this.protectedData.canvases.drawingCanvasLayerMaster.width, this.protectedData.canvases.drawingCanvasLayerMaster.height);
 	    }
 	    /****************************Store images (delegated to ImageStoreHelper)****************************************************/
-	    storeImageToAxis(index, paintedImages, imageData, axis) {
-	        this.imageStoreHelper.storeImageToAxis(index, paintedImages, imageData, axis);
-	    }
 	    storeAllImages(index, layer) {
 	        this.imageStoreHelper.storeAllImages(index, layer);
 	    }
-	    storeImageToLayer(index, canvas, paintedImages) {
-	        return this.imageStoreHelper.storeImageToLayer(index, canvas, paintedImages);
+	    storeImageToLayer(index, canvas) {
+	        return this.imageStoreHelper.storeImageToLayer(index, canvas);
 	    }
 	    storeEachLayerImage(index, layer) {
 	        this.imageStoreHelper.storeEachLayerImage(index, layer);
@@ -76185,8 +76050,9 @@ void main() {
 	     * @param {string} aixs:"x" | "y" | "z"
 	     *  */
 	    setSliceOrientation(axisTo) {
+	        var _a;
 	        let convetObj;
-	        if (this.nrrd_states.enableCursorChoose || this.gui_states.sphere) {
+	        if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isCrosshairEnabled()) || this.gui_states.sphere) {
 	            if (this.protectedData.axis === "z") {
 	                this.cursorPage.z.index = this.nrrd_states.currentIndex;
 	                this.cursorPage.z.cursorPageX = this.nrrd_states.cursorPageX;
@@ -76571,6 +76437,8 @@ void main() {
 	        }
 	        // Invalidate reusable slice buffer
 	        this.invalidateSliceBuffer();
+	        // Reload all layers to canvas (restores other layers' visuals)
+	        this.reloadMasksFromVolume();
 	    }
 	    /**
 	     * Reset the draw and display canvases layout after mouse pan.
@@ -76781,7 +76649,8 @@ void main() {
 	     */
 	    configMouseSliceWheel() {
 	        const handleMouseZoomSliceWheelMove = (e) => {
-	            if (this.protectedData.Is_Shift_Pressed) {
+	            var _a;
+	            if ((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
 	                return;
 	            }
 	            e.preventDefault();
@@ -77021,7 +76890,7 @@ void main() {
 	}
 
 	// import * as kiwrious from "copper3d_plugin_heart_k";
-	const REVISION = "v3.0.0-beta";
+	const REVISION = "v3.0.1-beta";
 	console.log(`%cCopper3D Visualisation %cBeta:${REVISION}`, "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 	exports.CHANNEL_COLORS = CHANNEL_COLORS;