copper3d 3.0.0 → 3.0.2

package/dist/Utils/segmentation/DrawToolCore.js

@@ -1,11 +1,13 @@
 import { CommToolsData } from "./CommToolsData";
-import { switchEraserSize, switchPencilIcon } from "../utils";
+import { switchPencilIcon } from "../utils";
 import { EventRouter } from "./eventRouter";
 import { SphereTool } from "./tools/SphereTool";
 import { CrosshairTool } from "./tools/CrosshairTool";
 import { ContrastTool } from "./tools/ContrastTool";
 import { ZoomTool } from "./tools/ZoomTool";
 import { EraserTool } from "./tools/EraserTool";
+import { PanTool } from "./tools/PanTool";
+import { DrawingTool } from "./tools/DrawingTool";
 import { ImageStoreHelper } from "./tools/ImageStoreHelper";
 import { UndoManager } from "./core";
 export class DrawToolCore extends CommToolsData {
@@ -37,12 +39,10 @@ export class DrawToolCore extends CommToolsData {
         this.eraserUrls = [];
         this.pencilUrls = [];
         this.undoManager = new UndoManager();
-        /** Snapshot of the active layer's slice captured on mouse-down (before drawing). */
-        this.preDrawSlice = null;
-        this.preDrawAxis = "z";
-        this.preDrawSliceIndex = 0;
         // Centralized event router
         this.eventRouter = null;
+        /** Slice index recorded when paintOnCanvas() starts, guards stale-click */
+        this.paintSliceIndex = 0;
         // need to return to parent
         this.start = () => { };
         /*************************************May consider to move outside *******************************************/
@@ -50,7 +50,7 @@ export class DrawToolCore extends CommToolsData {
             this.protectedData.ctxes.drawingCtx.beginPath();
             this.protectedData.ctxes.drawingCtx.moveTo(x1, y1);
             this.protectedData.ctxes.drawingCtx.lineTo(x2, y2);
-            this.protectedData.ctxes.drawingCtx.strokeStyle = this.gui_states.color;
+            this.protectedData.ctxes.drawingCtx.strokeStyle = this.gui_states.drawing.color;
             this.protectedData.ctxes.drawingCtx.stroke();
         };
         this.configContrastDragMode = () => {
@@ -76,6 +76,7 @@ export class DrawToolCore extends CommToolsData {
             gui_states: this.gui_states,
             protectedData: this.protectedData,
             cursorPage: this.cursorPage,
+            callbacks: this.annotationCallbacks,
         };
         this.imageStoreHelper = new ImageStoreHelper(toolCtx, {
             setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
@@ -84,8 +85,6 @@ export class DrawToolCore extends CommToolsData {
         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),
         });
         this.crosshairTool = new CrosshairTool(toolCtx);
         this.contrastTool = new ContrastTool(toolCtx, this.container, this.contrastEventPrameters, {
@@ -98,6 +97,18 @@ export class DrawToolCore extends CommToolsData {
             setIsDrawFalse: (target) => this.setIsDrawFalse(target),
         });
         this.eraserTool = new EraserTool(toolCtx);
+        this.panTool = new PanTool(toolCtx, {
+            zoomActionAfterDrawSphere: () => this.zoomActionAfterDrawSphere(),
+        });
+        this.drawingTool = new DrawingTool(toolCtx, {
+            setCurrentLayer: () => this.setCurrentLayer(),
+            compositeAllLayers: () => this.compositeAllLayers(),
+            syncLayerSliceData: (index, layer) => this.syncLayerSliceData(index, layer),
+            filterDrawedImage: (axis, index) => this.filterDrawedImage(axis, index),
+            getVolumeForLayer: (layer) => this.getVolumeForLayer(layer),
+            pushUndoDelta: (delta) => this.undoManager.push(delta),
+            getEraserUrls: () => this.eraserUrls,
+        });
     }
     initDrawToolCore() {
         // Initialize EventRouter for centralized event handling
@@ -108,40 +119,28 @@ export class DrawToolCore extends CommToolsData {
                 // 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;
+                    this.gui_states.viewConfig.readyToUpdate = true;
                 }
                 if (next === 'crosshair') {
-                    this.nrrd_states.enableCursorChoose = true;
-                    this.protectedData.Is_Draw = false;
-                }
-                else if (prev === 'crosshair') {
-                    this.nrrd_states.enableCursorChoose = false;
+                    this.protectedData.isDrawing = 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, _c, _d;
             if (this._configKeyBoard)
                 return;
             // Handle undo (Ctrl+Z)
@@ -155,40 +154,58 @@ export class DrawToolCore extends CommToolsData {
             if ((ev.ctrlKey || ev.metaKey) && (ev.key === redoKey || (ev.shiftKey && ev.key === undoKeyUpper))) {
                 this.redoLastPainting();
             }
-            // Handle crosshair toggle
+            // Handle crosshair toggle (allowed in drawing tools AND sphere mode)
             if (ev.key === this._keyboardSettings.crosshair) {
-                if (!this.gui_states.sphere && !this.gui_states.calculator) {
-                    (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.toggleCrosshair();
-                }
+                (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.toggleCrosshair();
             }
             // Handle draw mode (Shift key) - EventRouter already tracks this
-            if (ev.key === this._keyboardSettings.draw && !this.gui_states.sphere && !this.gui_states.calculator) {
-                if (this.protectedData.Is_Ctrl_Pressed) {
+            // EventRouter's handleKeyDown will enforce mutual exclusion
+            if (ev.key === this._keyboardSettings.draw && !this.gui_states.mode.sphere) {
+                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
             }
+            // Handle sphere mode toggle
+            if (ev.key === this._keyboardSettings.sphere) {
+                // Block during draw mode or contrast mode
+                if (((_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.isShiftHeld()) || ((_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.isCtrlHeld())) {
+                    return;
+                }
+                this.gui_states.mode.sphere = !this.gui_states.mode.sphere;
+                if (this.gui_states.mode.sphere) {
+                    this.enterSphereMode();
+                }
+                else {
+                    this.exitSphereMode();
+                }
+            }
         });
         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)
             if (this._keyboardSettings.contrast.includes(ev.key)) {
                 if (undoFlag) {
-                    this.gui_states.readyToUpdate = true;
+                    this.gui_states.viewConfig.readyToUpdate = true;
                     undoFlag = false;
                     return;
                 }
                 // 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, draw, or sphere (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;
+                if (this.gui_states.mode.sphere)
+                    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');
                 }
             }
         });
@@ -200,78 +217,38 @@ export class DrawToolCore extends CommToolsData {
     }
     setPencilIconUrls(urls) {
         this.pencilUrls = urls;
-        this.gui_states.defaultPaintCursor = switchPencilIcon("dot", this.pencilUrls);
+        this.gui_states.viewConfig.defaultPaintCursor = switchPencilIcon("dot", this.pencilUrls);
         this.protectedData.canvases.drawingCanvas.style.cursor =
-            this.gui_states.defaultPaintCursor;
+            this.gui_states.viewConfig.defaultPaintCursor;
     }
     setCurrentLayer() {
-        const layer = this.gui_states.layer;
+        const layer = this.gui_states.layerChannel.layer;
         let target = this.protectedData.layerTargets.get(layer);
         if (!target) {
             // Fallback to first layer
-            const firstId = this.nrrd_states.layers[0];
+            const firstId = this.nrrd_states.image.layers[0];
             target = this.protectedData.layerTargets.get(firstId);
         }
         return { ctx: target.ctx, canvas: target.canvas };
     }
     draw(opts) {
         if (!!opts) {
-            this.nrrd_states.getMask = opts === null || opts === void 0 ? void 0 : opts.getMaskData;
-            if (opts === null || opts === void 0 ? void 0 : opts.onClearLayerVolume) {
-                this.nrrd_states.onClearLayerVolume = opts.onClearLayerVolume;
+            // Phase 2: Store callbacks in annotationCallbacks instead of nrrd_states
+            if (opts.getMaskData) {
+                this.annotationCallbacks.onMaskChanged = opts.getMaskData;
+            }
+            if (opts.onClearLayerVolume) {
+                this.annotationCallbacks.onLayerVolumeCleared = opts.onClearLayerVolume;
+            }
+            if (opts.getSphereData) {
+                this.annotationCallbacks.onSphereChanged = opts.getSphereData;
+            }
+            if (opts.getCalculateSpherePositionsData) {
+                this.annotationCallbacks.onCalculatorPositionsChanged = opts.getCalculateSpherePositionsData;
             }
-            this.nrrd_states.getSphere = opts === null || opts === void 0 ? void 0 : opts.getSphereData;
-            this.nrrd_states.getCalculateSpherePositions = opts === null || opts === void 0 ? void 0 : opts.getCalculateSpherePositionsData;
         }
         this.paintOnCanvas();
     }
-    drawCalSphereDown(x, y, sliceIndex, cal_position) {
-        this.nrrd_states.sphereRadius = 5;
-        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
-        let mouseX = x / this.nrrd_states.sizeFoctor;
-        let mouseY = y / this.nrrd_states.sizeFoctor;
-        //  record mouseX,Y, and enable crosshair function
-        this.nrrd_states.sphereOrigin[this.protectedData.axis] = [
-            mouseX,
-            mouseY,
-            sliceIndex,
-        ];
-        this.setUpSphereOrigins(mouseX, mouseY, sliceIndex);
-        // Note the sphere origin here is x, y, z
-        // x: pixel x, y: pixel y, z: slice index (mm)
-        switch (cal_position) {
-            case "tumour":
-                this.nrrd_states.tumourSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
-                break;
-            case "skin":
-                this.nrrd_states.skinSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
-                break;
-            case "nipple":
-                this.nrrd_states.nippleSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
-                break;
-            case "ribcage":
-                this.nrrd_states.ribSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
-                break;
-        }
-        this.nrrd_states.cursorPageX = mouseX;
-        this.nrrd_states.cursorPageY = mouseY;
-        this.enableCrosshair();
-        // draw circle setup width/height for sphere canvas
-        this.drawCalculatorSphere(this.nrrd_states.sphereRadius);
-        this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-    }
-    drawCalSphereUp() {
-        // TODO send data to outside
-        // this.clearStoreImages();
-        this.clearSpherePrintStoreImages();
-        this.drawCalculatorSphereOnEachViews("x");
-        this.drawCalculatorSphereOnEachViews("y");
-        this.drawCalculatorSphereOnEachViews("z");
-        !!this.nrrd_states.getCalculateSpherePositions &&
-            this.nrrd_states.getCalculateSpherePositions(this.nrrd_states.tumourSphereOrigin, this.nrrd_states.skinSphereOrigin, this.nrrd_states.ribSphereOrigin, this.nrrd_states.nippleSphereOrigin, this.protectedData.axis);
-        this.zoomActionAfterDrawSphere();
-        this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-    }
     zoomActionAfterDrawSphere() {
         this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
     }
@@ -280,28 +257,16 @@ export class DrawToolCore extends CommToolsData {
     }
     paintOnCanvas() {
         var _a, _b, _c;
-        /**
-         * drag paint panel
-         */
-        let leftclicked = false;
-        let rightclicked = false;
-        let panelMoveInnerX = 0;
-        let panelMoveInnerY = 0;
-        // todo
-        // let currentSliceIndex = this.protectedData.mainPreSlices.index;
-        let currentSliceIndex = this.protectedData.mainPreSlices.index;
-        // draw lines starts position
-        let Is_Painting = false;
-        let lines = [];
-        const clearArc = this.useEraser();
+        // Initialize tools for this paint cycle
+        this.drawingTool.reset(this.useEraser());
+        this.panTool.reset();
+        this.paintSliceIndex = this.protectedData.mainPreSlices.index;
         this.updateOriginAndChangedWH();
         this.initAllCanvas();
         (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.save();
         this.flipDisplayImageByAxis();
-        (_b = this.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.drawImage(this.protectedData.canvases.originCanvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+        (_b = this.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.drawImage(this.protectedData.canvases.originCanvas, 0, 0, this.nrrd_states.view.changedWidth, this.nrrd_states.view.changedHeight);
         (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
-        this.protectedData.previousDrawingImage =
-            this.protectedData.ctxes.drawingCtx.getImageData(0, 0, this.protectedData.canvases.drawingCanvas.width, this.protectedData.canvases.drawingCanvas.height);
         // let a global variable to store the wheel move event
         // Remove existing listener before creating a new one to prevent leaks
         this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
@@ -318,124 +283,62 @@ export class DrawToolCore extends CommToolsData {
         });
         // sphere Wheel
         this.drawingPrameters.handleSphereWheel = this.configMouseSphereWheel();
-        // pan move
-        this.drawingPrameters.handleOnPanMouseMove = (e) => {
-            this.protectedData.canvases.drawingCanvas.style.cursor = "grabbing";
-            this.nrrd_states.previousPanelL = e.clientX - panelMoveInnerX;
-            this.nrrd_states.previousPanelT = e.clientY - panelMoveInnerY;
-            this.protectedData.canvases.displayCanvas.style.left =
-                this.protectedData.canvases.drawingCanvas.style.left =
-                    this.nrrd_states.previousPanelL + "px";
-            this.protectedData.canvases.displayCanvas.style.top =
-                this.protectedData.canvases.drawingCanvas.style.top =
-                    this.nrrd_states.previousPanelT + "px";
-        };
+        // pan move — now handled by PanTool (listeners managed internally)
         // brush circle move
         this.drawingPrameters.handleOnDrawingBrushCricleMove = (e) => {
             e.preventDefault();
-            this.nrrd_states.Mouse_Over_x = e.offsetX;
-            this.nrrd_states.Mouse_Over_y = e.offsetY;
-            if (this.nrrd_states.Mouse_Over_x === undefined) {
-                this.nrrd_states.Mouse_Over_x = e.clientX;
-                this.nrrd_states.Mouse_Over_y = e.clientY;
+            this.nrrd_states.interaction.mouseOverX = e.offsetX;
+            this.nrrd_states.interaction.mouseOverY = e.offsetY;
+            if (this.nrrd_states.interaction.mouseOverX === undefined) {
+                this.nrrd_states.interaction.mouseOverX = e.clientX;
+                this.nrrd_states.interaction.mouseOverY = e.clientY;
             }
             if (e.type === "mouseout") {
-                this.nrrd_states.Mouse_Over = false;
+                this.nrrd_states.interaction.mouseOver = false;
                 this.protectedData.canvases.drawingCanvas.removeEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
             }
             else if (e.type === "mouseover") {
-                this.nrrd_states.Mouse_Over = true;
+                this.nrrd_states.interaction.mouseOver = true;
                 this.protectedData.canvases.drawingCanvas.addEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
             }
         };
-        // drawing move
+        // drawing move — delegated to DrawingTool
         this.drawingPrameters.handleOnDrawingMouseMove = (e) => {
-            this.protectedData.Is_Draw = true;
-            if (Is_Painting) {
-                if (this.gui_states.Eraser) {
-                    this.nrrd_states.stepClear = 1;
-                    // drawingCtx.clearRect(e.offsetX - 5, e.offsetY - 5, 25, 25);
-                    clearArc(e.offsetX, e.offsetY, this.gui_states.brushAndEraserSize);
-                }
-                else {
-                    lines.push({ x: e.offsetX, y: e.offsetY });
-                    this.paintOnCanvasLayer(e.offsetX, e.offsetY);
-                }
-            }
+            this.drawingTool.onPointerMove(e);
         };
         this.drawingPrameters.handleOnDrawingMouseDown = (e) => {
-            if (leftclicked || rightclicked) {
+            var _a, _b, _c;
+            if (this.drawingTool.isActive || this.panTool.isActive) {
                 this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 this.protectedData.ctxes.drawingLayerMasterCtx.closePath();
                 return;
             }
-            // when switch slice, clear previousDrawingImage
-            // todo
-            if (currentSliceIndex !== this.protectedData.mainPreSlices.index) {
-                this.protectedData.previousDrawingImage =
-                    this.protectedData.ctxes.emptyCtx.createImageData(1, 1);
-                currentSliceIndex = this.protectedData.mainPreSlices.index;
+            if (this.paintSliceIndex !== this.protectedData.mainPreSlices.index) {
+                this.paintSliceIndex = this.protectedData.mainPreSlices.index;
             }
             // 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) {
-                    leftclicked = true;
-                    lines = [];
-                    Is_Painting = true;
-                    this.protectedData.Is_Draw = true;
-                    if (this.gui_states.Eraser) {
-                        // this.protectedData.canvases.drawingCanvas.style.cursor =
-                        //   "url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_48.png) 48 48, crosshair";
-                        this.eraserUrls.length > 0
-                            ? (this.protectedData.canvases.drawingCanvas.style.cursor =
-                                switchEraserSize(this.gui_states.brushAndEraserSize, this.eraserUrls))
-                            : (this.protectedData.canvases.drawingCanvas.style.cursor =
-                                switchEraserSize(this.gui_states.brushAndEraserSize));
-                    }
-                    else {
-                        this.protectedData.canvases.drawingCanvas.style.cursor =
-                            this.gui_states.defaultPaintCursor;
-                    }
-                    this.nrrd_states.drawStartPos.x = e.offsetX;
-                    this.nrrd_states.drawStartPos.y = e.offsetY;
-                    // Capture pre-draw slice snapshot for undo
-                    try {
-                        this.preDrawAxis = this.protectedData.axis;
-                        this.preDrawSliceIndex = this.nrrd_states.currentIndex;
-                        const vol = this.getVolumeForLayer(this.gui_states.layer);
-                        this.preDrawSlice = vol.getSliceUint8(this.preDrawSliceIndex, this.preDrawAxis).data.slice();
-                    }
-                    catch (_a) {
-                        this.preDrawSlice = null;
-                    }
+                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw') {
+                    this.drawingTool.onPointerDown(e);
                     this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                     this.protectedData.canvases.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
                 }
-                else if (this.nrrd_states.enableCursorChoose) {
-                    this.nrrd_states.cursorPageX =
-                        e.offsetX / this.nrrd_states.sizeFoctor;
-                    this.nrrd_states.cursorPageY =
-                        e.offsetY / this.nrrd_states.sizeFoctor;
+                else if ((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled()) {
+                    this.nrrd_states.interaction.cursorPageX =
+                        e.offsetX / this.nrrd_states.view.sizeFactor;
+                    this.nrrd_states.interaction.cursorPageY =
+                        e.offsetY / this.nrrd_states.view.sizeFactor;
                     this.enableCrosshair();
                     this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
-                else if (this.gui_states.sphere && !this.nrrd_states.enableCursorChoose) {
-                    sphere(e);
-                }
-                else if (this.gui_states.calculator && !this.nrrd_states.enableCursorChoose) {
-                    this.drawCalSphereDown(e.offsetX, e.offsetY, this.nrrd_states.currentIndex, this.gui_states.cal_distance);
+                else if (this.gui_states.mode.sphere && !((_c = this.eventRouter) === null || _c === void 0 ? void 0 : _c.isCrosshairEnabled())) {
+                    this.handleSphereClick(e);
                 }
             }
             else if (e.button === 2) {
-                rightclicked = true;
-                let offsetX = this.protectedData.canvases.drawingCanvas.offsetLeft;
-                let offsetY = this.protectedData.canvases.drawingCanvas.offsetTop;
-                panelMoveInnerX = e.clientX - offsetX;
-                panelMoveInnerY = e.clientY - offsetY;
-                this.protectedData.canvases.drawingCanvas.style.cursor = "grab";
+                this.panTool.onPointerDown(e);
                 this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-                this.protectedData.canvases.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
             }
             else {
                 return;
@@ -452,174 +355,65 @@ export class DrawToolCore extends CommToolsData {
             // Fallback for legacy mode without EventRouter
             this.protectedData.canvases.drawingCanvas.addEventListener("pointerdown", this.drawingPrameters.handleOnDrawingMouseDown, true);
         }
-        const sphere = (e) => {
-            // set sphere size
-            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
-            let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
-            let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
-            //  record mouseX,Y, and enable crosshair function
-            this.nrrd_states.sphereOrigin[this.protectedData.axis] = [
-                mouseX,
-                mouseY,
-                this.nrrd_states.currentIndex,
-            ];
-            this.setUpSphereOrigins(mouseX, mouseY, this.nrrd_states.currentIndex);
-            this.nrrd_states.cursorPageX = mouseX;
-            this.nrrd_states.cursorPageY = mouseY;
-            this.enableCrosshair();
-            // draw circle setup width/height for sphere canvas
-            this.drawSphere(mouseX, mouseY, this.nrrd_states.sphereRadius);
-            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
-            this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-        };
-        const redrawPreviousImageToLayerCtx = (ctx) => {
-            var _a;
-            const tempPreImg = (_a = this.filterDrawedImage(this.protectedData.axis, this.nrrd_states.currentIndex)) === null || _a === void 0 ? void 0 : _a.image;
-            this.protectedData.canvases.emptyCanvas.width =
-                this.protectedData.canvases.emptyCanvas.width;
-            if (tempPreImg) {
-                this.protectedData.previousDrawingImage = tempPreImg;
-            }
-            this.protectedData.ctxes.emptyCtx.putImageData(tempPreImg, 0, 0);
-            // No flip needed: MaskVolume stores in source coordinates (matching the
-            // Three.js / layer canvas convention).  The layer canvas is in screen
-            // coordinates, which already match the source coordinate system.
-            ctx.imageSmoothingEnabled = false;
-            ctx.drawImage(this.protectedData.canvases.emptyCanvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
-        };
         this.drawingPrameters.handleOnDrawingMouseUp = (e) => {
+            var _a, _b, _c;
             if (e.button === 0) {
-                if (this.protectedData.Is_Shift_Pressed || Is_Painting) {
-                    leftclicked = false;
-                    let { ctx, canvas } = this.setCurrentLayer();
-                    ctx.closePath();
+                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw' || this.drawingTool.painting) {
+                    this.drawingTool.onPointerUp(e);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
-                    if (!this.gui_states.Eraser) {
-                        if (this.gui_states.pencil) {
-                            // Clear only the current layer canvas (NOT master)
-                            canvas.width = canvas.width;
-                            // Redraw previous layer data from volume
-                            redrawPreviousImageToLayerCtx(ctx);
-                            // Draw new pencil strokes on current layer canvas
-                            ctx.beginPath();
-                            ctx.moveTo(lines[0].x, lines[0].y);
-                            for (let i = 1; i < lines.length; i++) {
-                                ctx.lineTo(lines[i].x, lines[i].y);
-                            }
-                            ctx.closePath();
-                            ctx.lineWidth = 1;
-                            ctx.fillStyle = this.gui_states.fillColor;
-                            ctx.fill();
-                            // Composite ALL layers to master (not just current layer)
-                            this.compositeAllLayers();
-                        }
-                    }
-                    this.protectedData.previousDrawingImage =
-                        this.protectedData.ctxes.drawingLayerMasterCtx.getImageData(0, 0, this.protectedData.canvases.drawingCanvasLayerMaster.width, this.protectedData.canvases.drawingCanvasLayerMaster.height);
-                    this.storeAllImages(this.nrrd_states.currentIndex, this.gui_states.layer);
-                    if (this.gui_states.Eraser) {
-                        const restLayers = this.getRestLayer();
-                        this.storeEachLayerImage(this.nrrd_states.currentIndex, restLayers[0]);
-                        this.storeEachLayerImage(this.nrrd_states.currentIndex, restLayers[1]);
-                    }
-                    Is_Painting = false;
-                    // Push delta to UndoManager (new Delta-based undo system)
-                    if (this.preDrawSlice) {
-                        try {
-                            const vol = this.getVolumeForLayer(this.gui_states.layer);
-                            const { data: newSlice } = vol.getSliceUint8(this.preDrawSliceIndex, this.preDrawAxis);
-                            const delta = {
-                                layerId: this.gui_states.layer,
-                                axis: this.preDrawAxis,
-                                sliceIndex: this.preDrawSliceIndex,
-                                oldSlice: this.preDrawSlice,
-                                newSlice: newSlice.slice(),
-                            };
-                            this.undoManager.push(delta);
-                        }
-                        catch (_a) {
-                            // Volume not ready — skip
-                        }
-                        this.preDrawSlice = null;
-                    }
                     // add wheel after pointer up
                     this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
                         passive: false,
                     });
                 }
-                else if (this.gui_states.sphere &&
-                    !this.nrrd_states.enableCursorChoose) {
-                    // plan B
-                    // findout all index in the sphere radius range in Axial view
-                    if (this.nrrd_states.spherePlanB) {
-                        // clear stroe images
-                        // this.clearStoreImages();
-                        this.clearSpherePrintStoreImages();
-                        for (let i = 0; i < this.nrrd_states.sphereRadius; i++) {
-                            this.drawSphereOnEachViews(i, "x");
-                            this.drawSphereOnEachViews(i, "y");
-                            this.drawSphereOnEachViews(i, "z");
-                        }
-                    }
-                    !!this.nrrd_states.getSphere &&
-                        this.nrrd_states.getSphere(this.nrrd_states.sphereOrigin.z, this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor);
+                else if (this.gui_states.mode.sphere &&
+                    !((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCrosshairEnabled())) {
+                    // Write all placed calculator spheres to volume
+                    this.sphereTool.writeAllCalculatorSpheresToVolume();
+                    // Render current slice from volume to sphere canvas
+                    this.sphereTool.refreshSphereCanvas();
+                    this.annotationCallbacks.onSphereChanged(this.nrrd_states.sphere.sphereOrigin.z, this.nrrd_states.sphere.sphereRadius / this.nrrd_states.view.sizeFactor);
+                    this.annotationCallbacks.onCalculatorPositionsChanged(this.nrrd_states.sphere.tumourSphereOrigin, this.nrrd_states.sphere.skinSphereOrigin, this.nrrd_states.sphere.ribSphereOrigin, this.nrrd_states.sphere.nippleSphereOrigin, this.protectedData.axis);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
                     this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+                    this.zoomActionAfterDrawSphere();
                 }
-                else if ((this.gui_states.sphere || this.gui_states.calculator) &&
-                    this.nrrd_states.enableCursorChoose) {
+                else if (this.gui_states.mode.sphere &&
+                    ((_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) {
-                    // When mouse up
-                    this.drawCalSphereUp();
-                }
             }
             else if (e.button === 2) {
-                rightclicked = false;
-                this.protectedData.canvases.drawingCanvas.style.cursor = "grab";
-                setTimeout(() => {
-                    this.protectedData.canvases.drawingCanvas.style.cursor = this.gui_states.defaultPaintCursor;
-                }, 2000);
-                this.protectedData.canvases.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
-                if (this.gui_states.sphere || this.gui_states.calculator) {
-                    this.zoomActionAfterDrawSphere();
-                }
+                this.panTool.onPointerUp(e, this.gui_states.viewConfig.defaultPaintCursor);
             }
             else {
                 return;
             }
-            if (!this.gui_states.pencil) {
+            if (!this.gui_states.mode.pencil) {
                 this.setIsDrawFalse(100);
             }
         };
-        this.protectedData.canvases.drawingCanvas.addEventListener("pointerleave", (e) => {
-            Is_Painting = false;
-            if (leftclicked) {
-                leftclicked = false;
-                this.protectedData.ctxes.drawingLayerMasterCtx.closePath();
+        this.protectedData.canvases.drawingCanvas.addEventListener("pointerleave", () => {
+            const wasDrawing = this.drawingTool.onPointerLeave();
+            if (wasDrawing) {
                 this.protectedData.canvases.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
                 this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
             }
-            if (rightclicked) {
-                rightclicked = false;
-                this.protectedData.canvases.drawingCanvas.style.cursor = "grab";
-                this.protectedData.canvases.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
-            }
+            this.panTool.onPointerLeave();
             this.setIsDrawFalse(100);
-            if (this.gui_states.pencil) {
+            if (this.gui_states.mode.pencil) {
                 this.setIsDrawFalse(1000);
             }
         });
         this.start = () => {
-            if (this.gui_states.readyToUpdate) {
-                this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+            var _a, _b;
+            if (this.gui_states.viewConfig.readyToUpdate) {
+                this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.view.changedWidth, this.nrrd_states.view.changedHeight);
                 this.protectedData.ctxes.drawingCtx.globalAlpha =
-                    this.gui_states.globalAlpha;
-                if (this.protectedData.Is_Draw) {
+                    this.gui_states.drawing.globalAlpha;
+                if (this.protectedData.isDrawing) {
                     this.protectedData.ctxes.drawingLayerMasterCtx.lineCap = "round";
                     this.protectedData.ctxes.drawingLayerMasterCtx.globalAlpha = 1;
                     for (const [, target] of this.protectedData.layerTargets) {
@@ -628,63 +422,82 @@ export class DrawToolCore extends CommToolsData {
                     }
                 }
                 else {
-                    if (this.protectedData.Is_Shift_Pressed) {
-                        if (!this.gui_states.pencil &&
-                            !this.gui_states.Eraser &&
-                            this.nrrd_states.Mouse_Over) {
-                            this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+                    // 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.mode.pencil &&
+                            !this.gui_states.mode.eraser &&
+                            this.nrrd_states.interaction.mouseOver) {
+                            this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.view.changedWidth, this.nrrd_states.view.changedHeight);
                             this.protectedData.ctxes.drawingCtx.fillStyle =
-                                this.gui_states.brushColor;
+                                this.gui_states.drawing.brushColor;
                             this.protectedData.ctxes.drawingCtx.beginPath();
-                            this.protectedData.ctxes.drawingCtx.arc(this.nrrd_states.Mouse_Over_x, this.nrrd_states.Mouse_Over_y, this.gui_states.brushAndEraserSize / 2 + 1, 0, Math.PI * 2);
+                            this.protectedData.ctxes.drawingCtx.arc(this.nrrd_states.interaction.mouseOverX, this.nrrd_states.interaction.mouseOverY, this.gui_states.drawing.brushAndEraserSize / 2 + 1, 0, Math.PI * 2);
                             this.protectedData.ctxes.drawingCtx.strokeStyle =
-                                this.gui_states.brushColor;
+                                this.gui_states.drawing.brushColor;
                             this.protectedData.ctxes.drawingCtx.stroke();
                         }
                     }
-                    if (this.nrrd_states.enableCursorChoose) {
-                        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;
-                        this.drawLine(ex, 0, ex, this.nrrd_states.changedWidth);
-                        this.drawLine(0, ey, this.nrrd_states.changedHeight, ey);
+                    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.view.changedWidth, this.nrrd_states.view.changedHeight);
+                        const ex = this.nrrd_states.interaction.cursorPageX * this.nrrd_states.view.sizeFactor;
+                        const ey = this.nrrd_states.interaction.cursorPageY * this.nrrd_states.view.sizeFactor;
+                        this.drawLine(ex, 0, ex, this.nrrd_states.view.changedWidth);
+                        this.drawLine(0, ey, this.nrrd_states.view.changedHeight, ey);
                     }
                 }
-                // globalAlpha was set to gui_states.globalAlpha at the top of start().
+                // globalAlpha was set to gui_states.drawing.globalAlpha at the top of start().
                 // Master stores full-alpha pixels; transparency applied here only.
                 this.protectedData.ctxes.drawingCtx.drawImage(this.protectedData.canvases.drawingCanvasLayerMaster, 0, 0);
+                // Draw sphere overlay from cached sphere canvas (separate from master).
+                // During preview: drawSphere/drawCalculatorSphere update the sphere canvas.
+                // After placement: refreshSphereCanvas renders from sphereMaskVolume.
+                if (this.gui_states.mode.sphere) {
+                    this.protectedData.ctxes.drawingCtx.drawImage(this.protectedData.canvases.drawingSphereCanvas, 0, 0, this.nrrd_states.view.changedWidth, this.nrrd_states.view.changedHeight);
+                }
             }
             else {
                 this.redrawDisplayCanvas();
             }
         };
     }
-    drawLinesOnLayer(ctx, x, y) {
-        ctx.beginPath();
-        ctx.moveTo(this.nrrd_states.drawStartPos.x, this.nrrd_states.drawStartPos.y);
-        if (this.gui_states.pencil) {
-            ctx.strokeStyle = this.gui_states.color;
-            ctx.lineWidth = this.gui_states.lineWidth;
-        }
-        else {
-            ctx.strokeStyle = this.gui_states.brushColor;
-            ctx.lineWidth = this.gui_states.brushAndEraserSize;
+    /** Extracted from paintOnCanvas() — handles sphere placement on left-click */
+    handleSphereClick(e) {
+        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+        let mouseX = e.offsetX / this.nrrd_states.view.sizeFactor;
+        let mouseY = e.offsetY / this.nrrd_states.view.sizeFactor;
+        //  record mouseX,Y, and enable crosshair function
+        this.nrrd_states.sphere.sphereOrigin[this.protectedData.axis] = [
+            mouseX,
+            mouseY,
+            this.nrrd_states.view.currentSliceIndex,
+        ];
+        this.setUpSphereOrigins(mouseX, mouseY, this.nrrd_states.view.currentSliceIndex);
+        // Store origin for the active sphere type
+        const calPos = this.gui_states.mode.activeSphereType;
+        switch (calPos) {
+            case "tumour":
+                this.nrrd_states.sphere.tumourSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphere.sphereOrigin));
+                break;
+            case "skin":
+                this.nrrd_states.sphere.skinSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphere.sphereOrigin));
+                break;
+            case "nipple":
+                this.nrrd_states.sphere.nippleSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphere.sphereOrigin));
+                break;
+            case "ribcage":
+                this.nrrd_states.sphere.ribSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphere.sphereOrigin));
+                break;
         }
-        ctx.lineTo(x, y);
-        ctx.stroke();
-        ctx.closePath();
-    }
-    paintOnCanvasLayer(x, y) {
-        let { ctx, canvas } = this.setCurrentLayer();
-        // Draw only on the current layer canvas (not master directly)
-        this.drawLinesOnLayer(ctx, x, y);
-        // Composite all layers to master to preserve other layers' data
-        this.compositeAllLayers();
-        // reset drawing start position to current position.
-        this.nrrd_states.drawStartPos.x = x;
-        this.nrrd_states.drawStartPos.y = y;
-        // need to flag the map as needing updating.
-        this.protectedData.mainPreSlices.mesh.material.map.needsUpdate = true;
+        this.nrrd_states.interaction.cursorPageX = mouseX;
+        this.nrrd_states.interaction.cursorPageY = mouseY;
+        this.enableCrosshair();
+        // draw circle setup width/height for sphere canvas
+        this.drawCalculatorSphere(this.nrrd_states.sphere.sphereRadius);
+        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
+        this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
     }
     initAllCanvas() {
         /**
@@ -693,42 +506,42 @@ export class DrawToolCore extends CommToolsData {
         this.protectedData.canvases.displayCanvas.style.position = "absolute";
         this.protectedData.canvases.displayCanvas.style.zIndex = "9";
         this.protectedData.canvases.displayCanvas.width =
-            this.nrrd_states.changedWidth;
+            this.nrrd_states.view.changedWidth;
         this.protectedData.canvases.displayCanvas.height =
-            this.nrrd_states.changedHeight;
+            this.nrrd_states.view.changedHeight;
         /**
          * drawing canvas
          */
         this.protectedData.canvases.drawingCanvas.style.zIndex = "10";
         this.protectedData.canvases.drawingCanvas.style.position = "absolute";
         this.protectedData.canvases.drawingCanvas.width =
-            this.nrrd_states.changedWidth;
+            this.nrrd_states.view.changedWidth;
         this.protectedData.canvases.drawingCanvas.height =
-            this.nrrd_states.changedHeight;
+            this.nrrd_states.view.changedHeight;
         this.protectedData.canvases.drawingCanvas.style.cursor =
-            this.gui_states.defaultPaintCursor;
+            this.gui_states.viewConfig.defaultPaintCursor;
         this.protectedData.canvases.drawingCanvas.oncontextmenu = () => false;
         /**
          * layer1
          * it should be hide, so we don't need to add it to mainAreaContainer
          */
         this.protectedData.canvases.drawingCanvasLayerMaster.width =
-            this.nrrd_states.changedWidth;
+            this.nrrd_states.view.changedWidth;
         this.protectedData.canvases.drawingCanvasLayerMaster.height =
-            this.nrrd_states.changedHeight;
+            this.nrrd_states.view.changedHeight;
         for (const [, target] of this.protectedData.layerTargets) {
-            target.canvas.width = this.nrrd_states.changedWidth;
-            target.canvas.height = this.nrrd_states.changedHeight;
+            target.canvas.width = this.nrrd_states.view.changedWidth;
+            target.canvas.height = this.nrrd_states.view.changedHeight;
         }
         /**
          * display and drawing canvas container
          */
-        // this.mainAreaContainer.style.width = this.nrrd_states.changedWidth + "px";
-        // this.mainAreaContainer.style.height = this.nrrd_states.changedHeight + "px";
+        // this.mainAreaContainer.style.width = this.nrrd_states.view.changedWidth + "px";
+        // this.mainAreaContainer.style.height = this.nrrd_states.view.changedHeight + "px";
         this.mainAreaContainer.style.width =
-            this.nrrd_states.originWidth * 8 + "px";
+            this.nrrd_states.image.originWidth * 8 + "px";
         this.mainAreaContainer.style.height =
-            this.nrrd_states.originHeight * 8 + "px";
+            this.nrrd_states.image.originHeight * 8 + "px";
         this.mainAreaContainer.appendChild(this.protectedData.canvases.displayCanvas);
         this.mainAreaContainer.appendChild(this.protectedData.canvases.drawingCanvas);
     }
@@ -776,6 +589,15 @@ export class DrawToolCore extends CommToolsData {
     drawSphere(mouseX, mouseY, radius) {
         this.sphereTool.drawSphere(mouseX, mouseY, radius);
     }
+    /**
+     * Refresh sphere canvas from sphereMaskVolume for the current slice/axis.
+     * Called after view changes (slice switch, zoom, contrast, axis switch).
+     */
+    refreshSphereOverlay() {
+        if (this.gui_states.mode.sphere) {
+            this.sphereTool.refreshSphereCanvas();
+        }
+    }
     /**
      * Convert cursor point between axis views.
      * Delegated to CrosshairTool.
@@ -788,44 +610,42 @@ export class DrawToolCore extends CommToolsData {
     }
     /****************************layer div controls****************************************************/
     getRestLayer() {
-        const layers = this.nrrd_states.layers;
+        const layers = this.nrrd_states.image.layers;
         const restLayer = layers.filter((item) => {
-            return item !== this.gui_states.layer;
+            return item !== this.gui_states.layerChannel.layer;
         });
         return restLayer;
     }
     /**************************** Undo/Redo functions (Phase 6 — Delta-based) ****************************/
     /**
-     * Clear mask on current slice canvas.
+     * Clear the mask on the current slice canvas for the active layer ONLY.
+     *
+     * This method only clears the active layer's MaskVolume slice data for the
+     * currently viewed slice index. Other slices in the same layer remain intact.
+     * Other background layers are also left untouched.
+     * After clearing, all layer canvases are re-rendered from the `MaskVolume`
+     * to keep the visuals in sync.
      *
-     * 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.
+     * The operation is recorded to the UndoManager to allow for user rollback.
      */
-    clearPaint() {
-        this.protectedData.Is_Draw = true;
-        this.resetLayerCanvas();
+    clearActiveSlice() {
+        this.protectedData.isDrawing = true;
         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;
-            const activeLayer = this.gui_states.layer;
+            const idx = this.nrrd_states.view.currentSliceIndex;
+            const activeLayer = this.gui_states.layerChannel.layer;
             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)
+            // Push clearActiveSlice delta to UndoManager (supports undo)
             this.undoManager.push({
                 layerId: activeLayer,
                 axis,
@@ -834,19 +654,30 @@ export class DrawToolCore extends CommToolsData {
                 newSlice: newSlice.slice(),
             });
             // Notify external that slice was cleared
-            if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere && !this.gui_states.calculator) {
-                const activeChannel = this.gui_states.activeChannel || 1;
-                this.nrrd_states.getMask(newSlice, activeLayer, activeChannel, idx, axis, width, height, true // clearFlag = true
+            if (!this.nrrd_states.flags.loadingMaskData && !this.gui_states.mode.sphere) {
+                const activeChannel = this.gui_states.layerChannel.activeChannel || 1;
+                this.annotationCallbacks.onMaskChanged(newSlice, activeLayer, activeChannel, idx, axis, width, height, true // clearFlag = true
                 );
             }
         }
         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.view.changedWidth;
+            const h = this.nrrd_states.view.changedHeight;
+            for (const layerId of this.nrrd_states.image.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.view.currentSliceIndex, 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);
     }
     /**
@@ -865,14 +696,14 @@ export class DrawToolCore extends CommToolsData {
         catch (_a) {
             return; // Volume not ready
         }
-        this.protectedData.Is_Draw = true;
-        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.currentIndex) {
+        this.protectedData.isDrawing = true;
+        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.view.currentSliceIndex) {
             this.applyUndoRedoToCanvas(delta.layerId);
         }
-        if (!this.nrrd_states.loadMaskJson) {
+        if (!this.nrrd_states.flags.loadingMaskData) {
             const { data: sliceData, width, height } = this.getVolumeForLayer(delta.layerId)
                 .getSliceUint8(delta.sliceIndex, delta.axis);
-            this.nrrd_states.getMask(sliceData, delta.layerId, this.gui_states.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+            this.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
         }
         this.setIsDrawFalse(1000);
     }
@@ -892,14 +723,14 @@ export class DrawToolCore extends CommToolsData {
         catch (_a) {
             return; // Volume not ready
         }
-        this.protectedData.Is_Draw = true;
-        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.currentIndex) {
+        this.protectedData.isDrawing = true;
+        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.view.currentSliceIndex) {
             this.applyUndoRedoToCanvas(delta.layerId);
         }
-        if (!this.nrrd_states.loadMaskJson) {
+        if (!this.nrrd_states.flags.loadingMaskData) {
             const { data: sliceData, width, height } = this.getVolumeForLayer(delta.layerId)
                 .getSliceUint8(delta.sliceIndex, delta.axis);
-            this.nrrd_states.getMask(sliceData, delta.layerId, this.gui_states.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+            this.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
         }
         this.setIsDrawFalse(1000);
     }
@@ -910,7 +741,7 @@ export class DrawToolCore extends CommToolsData {
     applyUndoRedoToCanvas(layerId) {
         let target = this.protectedData.layerTargets.get(layerId);
         if (!target) {
-            const firstId = this.nrrd_states.layers[0];
+            const firstId = this.nrrd_states.image.layers[0];
             target = this.protectedData.layerTargets.get(firstId);
         }
         const { ctx, canvas } = target;
@@ -918,26 +749,14 @@ export class DrawToolCore extends CommToolsData {
         canvas.width = canvas.width;
         const buffer = this.getOrCreateSliceBuffer(this.protectedData.axis);
         if (buffer) {
-            this.renderSliceToCanvas(layerId, this.protectedData.axis, this.nrrd_states.currentIndex, buffer, ctx, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+            this.renderSliceToCanvas(layerId, this.protectedData.axis, this.nrrd_states.view.currentSliceIndex, buffer, ctx, this.nrrd_states.view.changedWidth, this.nrrd_states.view.changedHeight);
         }
         // Re-composite all layers to master
         this.compositeAllLayers();
-        // Update previousDrawingImage from master
-        this.protectedData.previousDrawingImage =
-            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);
-    }
-    storeEachLayerImage(index, layer) {
-        this.imageStoreHelper.storeEachLayerImage(index, layer);
+    syncLayerSliceData(index, layer) {
+        this.imageStoreHelper.syncLayerSliceData(index, layer);
     }
     /******************************** Utils gui related functions (delegated to ContrastTool) ***************************************/
     setupConrastEvents(callback) {