copper3d 3.0.1 → 3.1.0

package/dist/Utils/segmentation/DrawToolCore.js

@@ -1,17 +1,26 @@
-import { CommToolsData } from "./CommToolsData";
-import { switchEraserSize, switchPencilIcon } from "../utils";
+import { RenderingUtils } from "./RenderingUtils";
+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 {
-    constructor(container, options) {
-        const mainAreaContainer = document.createElement("div");
-        super(container, mainAreaContainer, options);
+/**
+ * DrawToolCore — Tool orchestration and event routing.
+ *
+ * Previously extended CommToolsData; now uses composition:
+ * - `state: CanvasState` — pure state container
+ * - `renderer: RenderingUtils` — rendering / slice-buffer helpers
+ *
+ * Created by NrrdTools which passes in a shared CanvasState.
+ */
+export class DrawToolCore {
+    constructor(container, state) {
         this.drawingPrameters = {
             handleOnDrawingMouseDown: (ev) => { },
             handleOnDrawingMouseMove: (ev) => { },
@@ -37,22 +46,12 @@ 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;
+        /** Wheel event dispatch mode — replaces manual wheel add/remove (Phase 2) */
+        this.activeWheelMode = 'zoom';
         // need to return to parent
         this.start = () => { };
-        /*************************************May consider to move outside *******************************************/
-        this.drawLine = (x1, y1, x2, y2) => {
-            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.stroke();
-        };
         this.configContrastDragMode = () => {
             this.contrastTool.configContrastDragMode();
         };
@@ -66,16 +65,19 @@ export class DrawToolCore extends CommToolsData {
             this.contrastTool.repraintCurrentContrastSlice();
         };
         this.container = container;
-        this.mainAreaContainer = mainAreaContainer;
+        this.mainAreaContainer = state.protectedData.mainAreaContainer;
+        this.state = state;
+        this.renderer = new RenderingUtils(state);
         this.initTools();
         this.initDrawToolCore();
     }
     initTools() {
         const toolCtx = {
-            nrrd_states: this.nrrd_states,
-            gui_states: this.gui_states,
-            protectedData: this.protectedData,
-            cursorPage: this.cursorPage,
+            nrrd_states: this.state.nrrd_states,
+            gui_states: this.state.gui_states,
+            protectedData: this.state.protectedData,
+            cursorPage: this.state.cursorPage,
+            callbacks: this.state.annotationCallbacks,
         };
         this.imageStoreHelper = new ImageStoreHelper(toolCtx, {
             setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
@@ -84,7 +86,8 @@ export class DrawToolCore extends CommToolsData {
         this.sphereTool = new SphereTool(toolCtx, {
             setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
             drawImageOnEmptyImage: (canvas) => this.drawImageOnEmptyImage(canvas),
-            storeImageToAxis: (index, imageData, axis) => this.imageStoreHelper.storeImageToAxis(index, imageData, axis),
+            enableCrosshair: () => this.enableCrosshair(),
+            setUpSphereOrigins: (x, y, s) => this.setUpSphereOrigins(x, y, s),
         });
         this.crosshairTool = new CrosshairTool(toolCtx);
         this.contrastTool = new ContrastTool(toolCtx, this.container, this.contrastEventPrameters, {
@@ -97,12 +100,24 @@ 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.renderer.compositeAllLayers(),
+            syncLayerSliceData: (index, layer) => this.syncLayerSliceData(index, layer),
+            filterDrawedImage: (axis, index) => this.renderer.filterDrawedImage(axis, index),
+            getVolumeForLayer: (layer) => this.renderer.getVolumeForLayer(layer),
+            pushUndoDelta: (delta) => this.undoManager.push(delta),
+            getEraserUrls: () => this.eraserUrls,
+        });
     }
     initDrawToolCore() {
         // Initialize EventRouter for centralized event handling
         this.eventRouter = new EventRouter({
             container: this.container,
-            canvas: this.protectedData.canvases.drawingCanvas,
+            canvas: this.state.protectedData.canvases.drawingCanvas,
             onModeChange: (prevMode, newMode) => {
                 // Use string comparison to avoid TypeScript narrowing issues
                 const prev = prevMode;
@@ -112,77 +127,112 @@ export class DrawToolCore extends CommToolsData {
                 }
                 else if (prev === 'contrast') {
                     this.removeContrastDragMode();
-                    this.gui_states.readyToUpdate = true;
+                    this.state.gui_states.viewConfig.readyToUpdate = true;
                 }
                 if (next === 'crosshair') {
-                    this.protectedData.Is_Draw = false;
+                    this.state.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);
+        // Configure keyboard settings from state
+        this.eventRouter.setKeyboardSettings(this.state.keyboardSettings);
         // Track undo flag for Ctrl+Z handling
         let undoFlag = false;
         // Register keyboard handlers with EventRouter
         this.eventRouter.setKeydownHandler((ev) => {
-            var _a, _b;
-            if (this._configKeyBoard)
+            if (this.state.configKeyBoard)
                 return;
             // Handle undo (Ctrl+Z)
-            if ((ev.ctrlKey || ev.metaKey) && ev.key === this._keyboardSettings.undo) {
+            if ((ev.ctrlKey || ev.metaKey) && ev.key === this.state.keyboardSettings.undo) {
                 undoFlag = true;
                 this.undoLastPainting();
             }
             // Handle redo (Ctrl+<redo key> or Ctrl+Shift+<undo key>)
-            const redoKey = this._keyboardSettings.redo;
-            const undoKeyUpper = this._keyboardSettings.undo.toUpperCase();
+            const redoKey = this.state.keyboardSettings.redo;
+            const undoKeyUpper = this.state.keyboardSettings.undo.toUpperCase();
             if ((ev.ctrlKey || ev.metaKey) && (ev.key === redoKey || (ev.shiftKey && ev.key === undoKeyUpper))) {
                 this.redoLastPainting();
             }
-            // Handle crosshair toggle
-            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();
-                }
+            // Handle crosshair toggle (allowed in drawing tools AND sphere mode)
+            if (ev.key === this.state.keyboardSettings.crosshair) {
+                this.eventRouter.toggleCrosshair();
             }
             // Handle draw mode (Shift key) - EventRouter already tracks this
-            // EventRouter's handleKeyDown will enforce mutual exclusion
-            if (ev.key === this._keyboardSettings.draw && !this.gui_states.sphere && !this.gui_states.calculator) {
-                if ((_b = this.eventRouter) === null || _b === void 0 ? void 0 : _b.isCtrlHeld()) {
+            if (ev.key === this.state.keyboardSettings.draw && !this.state.gui_states.mode.sphere) {
+                if (this.eventRouter.isCtrlHeld()) {
                     return; // Ctrl takes priority
                 }
-                // EventRouter will set mode to 'draw' via internal handler
+            }
+            // Handle sphere mode toggle
+            if (ev.key === this.state.keyboardSettings.sphere) {
+                // Block during draw mode or contrast mode
+                if (this.eventRouter.isShiftHeld() || this.eventRouter.isCtrlHeld()) {
+                    return;
+                }
+                this.state.gui_states.mode.sphere = !this.state.gui_states.mode.sphere;
+                if (this.state.gui_states.mode.sphere) {
+                    this.enterSphereMode();
+                }
+                else {
+                    this.exitSphereMode();
+                }
             }
         });
         this.eventRouter.setKeyupHandler((ev) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (this._configKeyBoard)
+            if (this.state.configKeyBoard)
                 return;
             // Handle Ctrl key release (contrast mode toggle)
-            if (this._keyboardSettings.contrast.includes(ev.key)) {
+            if (this.state.keyboardSettings.contrast.includes(ev.key)) {
                 if (undoFlag) {
-                    this.gui_states.readyToUpdate = true;
+                    this.state.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()))
+                if (!this.eventRouter.isContrastEnabled())
+                    return;
+                // Block contrast toggle during crosshair, draw, or sphere (mutual exclusion)
+                if (this.eventRouter.isCrosshairEnabled() || this.eventRouter.getMode() === 'draw')
                     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')
+                if (this.state.gui_states.mode.sphere)
                     return;
                 // Toggle contrast mode manually since it's on keyup
-                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');
+                if (this.eventRouter.getMode() !== 'contrast') {
+                    this.eventRouter.setMode('contrast');
                 }
                 else {
-                    (_f = this.eventRouter) === null || _f === void 0 ? void 0 : _f.setMode('idle');
+                    this.eventRouter.setMode('idle');
                 }
             }
         });
+        // Register pointer handlers with EventRouter
+        this.eventRouter.setPointerMoveHandler((e) => {
+            if (this.drawingTool.isActive || this.panTool.isActive) {
+                this.drawingPrameters.handleOnDrawingMouseMove(e);
+            }
+        });
+        this.eventRouter.setPointerUpHandler((e) => {
+            if (this.drawingTool.isActive || this.drawingTool.painting
+                || this.panTool.isActive
+                || (this.state.gui_states.mode.sphere && this.eventRouter.getMode() !== 'crosshair')) {
+                this.drawingPrameters.handleOnDrawingMouseUp(e);
+            }
+        });
+        this.eventRouter.setPointerLeaveHandler((e) => {
+            this.handlePointerLeave();
+        });
+        // Register wheel handler with EventRouter
+        this.eventRouter.setWheelHandler((e) => {
+            if (this.activeWheelMode === 'zoom') {
+                this.drawingPrameters.handleMouseZoomSliceWheel(e);
+            }
+            else if (this.activeWheelMode === 'sphere') {
+                this.drawingPrameters.handleSphereWheel(e);
+            }
+        });
         // Bind all event listeners
         this.eventRouter.bindAll();
     }
@@ -191,544 +241,225 @@ export class DrawToolCore extends CommToolsData {
     }
     setPencilIconUrls(urls) {
         this.pencilUrls = urls;
-        this.gui_states.defaultPaintCursor = switchPencilIcon("dot", this.pencilUrls);
-        this.protectedData.canvases.drawingCanvas.style.cursor =
-            this.gui_states.defaultPaintCursor;
+        this.state.gui_states.viewConfig.defaultPaintCursor = switchPencilIcon("dot", this.pencilUrls);
+        this.state.protectedData.canvases.drawingCanvas.style.cursor =
+            this.state.gui_states.viewConfig.defaultPaintCursor;
     }
     setCurrentLayer() {
-        const layer = this.gui_states.layer;
-        let target = this.protectedData.layerTargets.get(layer);
+        const layer = this.state.gui_states.layerChannel.layer;
+        let target = this.state.protectedData.layerTargets.get(layer);
         if (!target) {
-            // Fallback to first layer
-            const firstId = this.nrrd_states.layers[0];
-            target = this.protectedData.layerTargets.get(firstId);
+            const firstId = this.state.nrrd_states.image.layers[0];
+            target = this.state.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;
+            if (opts.getMaskData) {
+                this.state.annotationCallbacks.onMaskChanged = opts.getMaskData;
+            }
+            if (opts.onClearLayerVolume) {
+                this.state.annotationCallbacks.onLayerVolumeCleared = opts.onClearLayerVolume;
+            }
+            if (opts.getSphereData) {
+                this.state.annotationCallbacks.onSphereChanged = opts.getSphereData;
+            }
+            if (opts.getCalculateSpherePositionsData) {
+                this.state.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);
-    }
-    clearSpherePrintStoreImages() {
-        this.sphereTool.clearSpherePrintStoreImages();
+        this.activeWheelMode = 'zoom';
     }
     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.state.protectedData.mainPreSlices.index;
         this.updateOriginAndChangedWH();
         this.initAllCanvas();
-        (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.save();
+        (_a = this.state.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);
-        (_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);
-        if (this._keyboardSettings.mouseWheel === "Scroll:Zoom") {
+        (_b = this.state.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.drawImage(this.state.protectedData.canvases.originCanvas, 0, 0, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
+        (_c = this.state.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
+        // Configure wheel handler functions
+        if (this.state.keyboardSettings.mouseWheel === "Scroll:Zoom") {
             this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
         }
         else {
             this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
         }
-        // Keep wheel as direct addEventListener due to dynamic add/remove patterns in handleOnDrawingMouseUp
-        // EventRouter routing would conflict with the dynamic wheel switching (zoom vs sphere wheel)
-        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
-            passive: false,
-        });
         // 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";
-        };
-        // 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;
-            }
-            if (e.type === "mouseout") {
-                this.nrrd_states.Mouse_Over = false;
-                this.protectedData.canvases.drawingCanvas.removeEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
-            }
-            else if (e.type === "mouseover") {
-                this.nrrd_states.Mouse_Over = true;
-                this.protectedData.canvases.drawingCanvas.addEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
-            }
-        };
-        // drawing move
+        // brush circle move — delegated to DrawingTool
+        this.drawingPrameters.handleOnDrawingBrushCricleMove =
+            this.drawingTool.createBrushTrackingHandler();
+        // 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) => {
-            var _a, _b, _c, _d;
-            if (leftclicked || rightclicked) {
-                this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-                this.protectedData.ctxes.drawingLayerMasterCtx.closePath();
+            if (this.drawingTool.isActive || this.panTool.isActive) {
+                this.state.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.state.protectedData.mainPreSlices.index) {
+                this.paintSliceIndex = this.state.protectedData.mainPreSlices.index;
+            }
+            // Suppress wheel only when starting a draw operation
+            if (this.eventRouter.getMode() === 'draw') {
+                this.activeWheelMode = 'none';
             }
-            // remove it when mouse click down
-            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
             if (e.button === 0) {
-                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw') {
-                    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 (_e) {
-                        this.preDrawSlice = null;
-                    }
-                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-                    this.protectedData.canvases.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
+                if (this.eventRouter.getMode() === 'draw') {
+                    this.drawingTool.onPointerDown(e);
                 }
-                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 =
-                        e.offsetY / this.nrrd_states.sizeFoctor;
+                else if (this.eventRouter.isCrosshairEnabled()) {
+                    this.state.nrrd_states.interaction.cursorPageX =
+                        e.offsetX / this.state.nrrd_states.view.sizeFactor;
+                    this.state.nrrd_states.interaction.cursorPageY =
+                        e.offsetY / this.state.nrrd_states.view.sizeFactor;
                     this.enableCrosshair();
-                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
-                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 && !((_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);
+                else if (this.state.gui_states.mode.sphere && !this.eventRouter.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.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
-                this.protectedData.canvases.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
+                this.panTool.onPointerDown(e);
             }
             else {
                 return;
             }
         };
-        // Route pointerdown through EventRouter for centralized event management
-        // The handler is still the existing logic, just registered through EventRouter
-        if (this.eventRouter) {
-            this.eventRouter.setPointerDownHandler((e) => {
-                this.drawingPrameters.handleOnDrawingMouseDown(e);
-            });
-        }
-        else {
-            // 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);
-        };
+        // Route pointerdown through EventRouter
+        this.eventRouter.setPointerDownHandler((e) => {
+            this.drawingPrameters.handleOnDrawingMouseDown(e);
+        });
         this.drawingPrameters.handleOnDrawingMouseUp = (e) => {
-            var _a, _b, _c, _d;
             if (e.button === 0) {
-                if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode()) === 'draw' || Is_Painting) {
-                    leftclicked = false;
-                    let { ctx, canvas } = this.setCurrentLayer();
-                    ctx.closePath();
-                    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 (_e) {
-                            // 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 &&
-                    !((_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) {
-                        // 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);
-                    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);
+                if (this.eventRouter.getMode() === 'draw' || this.drawingTool.painting) {
+                    this.drawingTool.onPointerUp(e);
+                    this.activeWheelMode = 'zoom';
                 }
-                else if ((this.gui_states.sphere || this.gui_states.calculator) &&
-                    ((_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.state.gui_states.mode.sphere &&
+                    !this.eventRouter.isCrosshairEnabled()) {
+                    this.sphereTool.onSpherePointerUp();
+                    this.activeWheelMode = 'zoom';
+                    this.zoomActionAfterDrawSphere();
                 }
-                else if (this.gui_states.calculator &&
-                    !((_d = this.eventRouter) === null || _d === void 0 ? void 0 : _d.isCrosshairEnabled())) {
-                    // When mouse up
-                    this.drawCalSphereUp();
+                else if (this.state.gui_states.mode.sphere &&
+                    this.eventRouter.isCrosshairEnabled()) {
+                    this.activeWheelMode = 'zoom';
                 }
             }
             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.state.gui_states.viewConfig.defaultPaintCursor);
             }
             else {
                 return;
             }
-            if (!this.gui_states.pencil) {
+            if (!this.state.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.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.setIsDrawFalse(100);
-            if (this.gui_states.pencil) {
-                this.setIsDrawFalse(1000);
-            }
-        });
         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 =
-                    this.gui_states.globalAlpha;
-                if (this.protectedData.Is_Draw) {
-                    this.protectedData.ctxes.drawingLayerMasterCtx.lineCap = "round";
-                    this.protectedData.ctxes.drawingLayerMasterCtx.globalAlpha = 1;
-                    for (const [, target] of this.protectedData.layerTargets) {
+            if (this.state.gui_states.viewConfig.readyToUpdate) {
+                this.state.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
+                this.state.protectedData.ctxes.drawingCtx.globalAlpha =
+                    this.state.gui_states.drawing.globalAlpha;
+                if (this.state.protectedData.isDrawing) {
+                    this.state.protectedData.ctxes.drawingLayerMasterCtx.lineCap = "round";
+                    this.state.protectedData.ctxes.drawingLayerMasterCtx.globalAlpha = 1;
+                    for (const [, target] of this.state.protectedData.layerTargets) {
                         target.ctx.lineCap = "round";
                         target.ctx.globalAlpha = 1;
                     }
                 }
                 else {
-                    // Use EventRouter mode for mutually exclusive crosshair vs draw rendering
-                    const currentMode = (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.getMode();
+                    const currentMode = this.eventRouter.getMode();
                     if (currentMode === 'draw') {
-                        // Draw mode: show brush circle preview
-                        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);
-                            this.protectedData.ctxes.drawingCtx.fillStyle =
-                                this.gui_states.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.strokeStyle =
-                                this.gui_states.brushColor;
-                            this.protectedData.ctxes.drawingCtx.stroke();
-                        }
+                        this.drawingTool.renderBrushPreview(this.state.protectedData.ctxes.drawingCtx, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
                     }
-                    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;
-                        this.drawLine(ex, 0, ex, this.nrrd_states.changedWidth);
-                        this.drawLine(0, ey, this.nrrd_states.changedHeight, ey);
+                    else if (currentMode === 'crosshair' || this.eventRouter.isCrosshairEnabled()) {
+                        this.crosshairTool.renderCrosshair(this.state.protectedData.ctxes.drawingCtx, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
                     }
                 }
-                // globalAlpha was set to gui_states.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);
+                this.state.protectedData.ctxes.drawingCtx.drawImage(this.state.protectedData.canvases.drawingCanvasLayerMaster, 0, 0);
+                if (this.state.gui_states.mode.sphere) {
+                    this.state.protectedData.ctxes.drawingCtx.drawImage(this.state.protectedData.canvases.drawingSphereCanvas, 0, 0, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
+                }
             }
             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;
+    /**
+     * Extracted from paintOnCanvas() pointerleave handler.
+     */
+    handlePointerLeave() {
+        const wasDrawing = this.drawingTool.onPointerLeave();
+        if (wasDrawing) {
+            this.activeWheelMode = 'zoom';
         }
-        else {
-            ctx.strokeStyle = this.gui_states.brushColor;
-            ctx.lineWidth = this.gui_states.brushAndEraserSize;
+        this.panTool.onPointerLeave();
+        this.setIsDrawFalse(100);
+        if (this.state.gui_states.mode.pencil) {
+            this.setIsDrawFalse(1000);
         }
-        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;
+    }
+    /** Extracted from paintOnCanvas() — handles sphere placement on left-click */
+    handleSphereClick(e) {
+        this.activeWheelMode = 'sphere';
+        this.sphereTool.onSphereClick(e);
     }
     initAllCanvas() {
         /**
          * display canvas
          */
-        this.protectedData.canvases.displayCanvas.style.position = "absolute";
-        this.protectedData.canvases.displayCanvas.style.zIndex = "9";
-        this.protectedData.canvases.displayCanvas.width =
-            this.nrrd_states.changedWidth;
-        this.protectedData.canvases.displayCanvas.height =
-            this.nrrd_states.changedHeight;
+        this.state.protectedData.canvases.displayCanvas.style.position = "absolute";
+        this.state.protectedData.canvases.displayCanvas.style.zIndex = "9";
+        this.state.protectedData.canvases.displayCanvas.width =
+            this.state.nrrd_states.view.changedWidth;
+        this.state.protectedData.canvases.displayCanvas.height =
+            this.state.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.protectedData.canvases.drawingCanvas.height =
-            this.nrrd_states.changedHeight;
-        this.protectedData.canvases.drawingCanvas.style.cursor =
-            this.gui_states.defaultPaintCursor;
-        this.protectedData.canvases.drawingCanvas.oncontextmenu = () => false;
+        this.state.protectedData.canvases.drawingCanvas.style.zIndex = "10";
+        this.state.protectedData.canvases.drawingCanvas.style.position = "absolute";
+        this.state.protectedData.canvases.drawingCanvas.width =
+            this.state.nrrd_states.view.changedWidth;
+        this.state.protectedData.canvases.drawingCanvas.height =
+            this.state.nrrd_states.view.changedHeight;
+        this.state.protectedData.canvases.drawingCanvas.style.cursor =
+            this.state.gui_states.viewConfig.defaultPaintCursor;
+        this.state.protectedData.canvases.drawingCanvas.oncontextmenu = () => false;
         /**
-         * layer1
-         * it should be hide, so we don't need to add it to mainAreaContainer
+         * layer canvases
          */
-        this.protectedData.canvases.drawingCanvasLayerMaster.width =
-            this.nrrd_states.changedWidth;
-        this.protectedData.canvases.drawingCanvasLayerMaster.height =
-            this.nrrd_states.changedHeight;
-        for (const [, target] of this.protectedData.layerTargets) {
-            target.canvas.width = this.nrrd_states.changedWidth;
-            target.canvas.height = this.nrrd_states.changedHeight;
+        this.state.protectedData.canvases.drawingCanvasLayerMaster.width =
+            this.state.nrrd_states.view.changedWidth;
+        this.state.protectedData.canvases.drawingCanvasLayerMaster.height =
+            this.state.nrrd_states.view.changedHeight;
+        for (const [, target] of this.state.protectedData.layerTargets) {
+            target.canvas.width = this.state.nrrd_states.view.changedWidth;
+            target.canvas.height = this.state.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.originWidth * 8 + "px";
+            this.state.nrrd_states.image.originWidth * 8 + "px";
         this.mainAreaContainer.style.height =
-            this.nrrd_states.originHeight * 8 + "px";
-        this.mainAreaContainer.appendChild(this.protectedData.canvases.displayCanvas);
-        this.mainAreaContainer.appendChild(this.protectedData.canvases.drawingCanvas);
+            this.state.nrrd_states.image.originHeight * 8 + "px";
+        this.mainAreaContainer.appendChild(this.state.protectedData.canvases.displayCanvas);
+        this.mainAreaContainer.appendChild(this.state.protectedData.canvases.drawingCanvas);
     }
     useEraser() {
         return this.eraserTool.createClearArc();
@@ -748,13 +479,9 @@ export class DrawToolCore extends CommToolsData {
         this.crosshairTool.enableCrosshair();
     }
     drawImageOnEmptyImage(canvas) {
-        const ctx = this.protectedData.ctxes.emptyCtx;
-        const w = this.protectedData.canvases.emptyCanvas.width;
-        const h = this.protectedData.canvases.emptyCanvas.height;
-        // No flip needed: the layer canvas screen coordinates already match the
-        // Three.js source coordinate system used by MaskVolume.  Applying a flip
-        // here would invert cross-axis slice indices (e.g. coronal slice 220
-        // becoming 228 when total=448).
+        const ctx = this.state.protectedData.ctxes.emptyCtx;
+        const w = this.state.protectedData.canvases.emptyCanvas.width;
+        const h = this.state.protectedData.canvases.emptyCanvas.height;
         ctx.imageSmoothingEnabled = false;
         ctx.drawImage(canvas, 0, 0, w, h);
     }
@@ -762,9 +489,6 @@ export class DrawToolCore extends CommToolsData {
     drawCalculatorSphereOnEachViews(axis) {
         this.sphereTool.drawCalculatorSphereOnEachViews(axis);
     }
-    drawSphereOnEachViews(decay, axis) {
-        this.sphereTool.drawSphereOnEachViews(decay, axis);
-    }
     configMouseSphereWheel() {
         return this.sphereTool.configMouseSphereWheel();
     }
@@ -774,6 +498,14 @@ 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.
+     */
+    refreshSphereOverlay() {
+        if (this.state.gui_states.mode.sphere) {
+            this.sphereTool.refreshSphereCanvas();
+        }
+    }
     /**
      * Convert cursor point between axis views.
      * Delegated to CrosshairTool.
@@ -786,40 +518,30 @@ export class DrawToolCore extends CommToolsData {
     }
     /****************************layer div controls****************************************************/
     getRestLayer() {
-        const layers = this.nrrd_states.layers;
+        const layers = this.state.nrrd_states.image.layers;
         const restLayer = layers.filter((item) => {
-            return item !== this.gui_states.layer;
+            return item !== this.state.gui_states.layerChannel.layer;
         });
         return restLayer;
     }
     /**************************** Undo/Redo functions (Phase 6 — Delta-based) ****************************/
     /**
-     * Clear mask on current slice canvas.
-     *
-     * 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.
+     * Clear the mask on the current slice canvas for the active layer ONLY.
      */
-    clearPaint() {
-        this.protectedData.Is_Draw = 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);
+    clearActiveSlice() {
+        this.state.protectedData.isDrawing = true;
+        this.state.protectedData.canvases.originCanvas.width =
+            this.state.protectedData.canvases.originCanvas.width;
+        this.state.protectedData.mainPreSlices.repaint.call(this.state.protectedData.mainPreSlices);
         // 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 vol = this.getVolumeForLayer(activeLayer);
-            // Capture old slice for undo before clearing
+            const axis = this.state.protectedData.axis;
+            const idx = this.state.nrrd_states.view.currentSliceIndex;
+            const activeLayer = this.state.gui_states.layerChannel.layer;
+            const vol = this.renderer.getVolumeForLayer(activeLayer);
             const oldSlice = vol.getSliceUint8(idx, axis).data.slice();
-            // 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)
             this.undoManager.push({
                 layerId: activeLayer,
                 axis,
@@ -827,123 +549,149 @@ export class DrawToolCore extends CommToolsData {
                 oldSlice,
                 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.state.nrrd_states.flags.loadingMaskData && !this.state.gui_states.mode.sphere) {
+                const activeChannel = this.state.gui_states.layerChannel.activeChannel || 1;
+                this.state.annotationCallbacks.onMaskChanged(newSlice, activeLayer, activeChannel, idx, axis, width, height, true);
             }
         }
         catch (_a) {
             // 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);
+        const buffer = this.renderer.getOrCreateSliceBuffer(this.state.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);
+            const w = this.state.nrrd_states.view.changedWidth;
+            const h = this.state.nrrd_states.view.changedHeight;
+            for (const layerId of this.state.nrrd_states.image.layers) {
+                const target = this.state.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.renderer.renderSliceToCanvas(layerId, this.state.protectedData.axis, this.state.nrrd_states.view.currentSliceIndex, buffer, target.ctx, w, h);
             }
         }
-        this.compositeAllLayers();
+        this.renderer.compositeAllLayers();
         this.setIsDrawFalse(1000);
     }
     /**
      * Undo the last drawing operation on the active layer.
-     * Restores the MaskVolume slice to its pre-draw state, re-renders
-     * the canvas, and notifies the backend.
      */
     undoLastPainting() {
         const delta = this.undoManager.undo();
         if (!delta)
             return;
         try {
-            const vol = this.getVolumeForLayer(delta.layerId);
+            const vol = this.renderer.getVolumeForLayer(delta.layerId);
             vol.setSliceUint8(delta.sliceIndex, delta.oldSlice, delta.axis);
         }
         catch (_a) {
-            return; // Volume not ready
+            return;
         }
-        this.protectedData.Is_Draw = true;
-        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.currentIndex) {
+        this.state.protectedData.isDrawing = true;
+        if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
             this.applyUndoRedoToCanvas(delta.layerId);
         }
-        if (!this.nrrd_states.loadMaskJson) {
-            const { data: sliceData, width, height } = this.getVolumeForLayer(delta.layerId)
+        if (!this.state.nrrd_states.flags.loadingMaskData) {
+            const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
                 .getSliceUint8(delta.sliceIndex, delta.axis);
-            this.nrrd_states.getMask(sliceData, delta.layerId, this.gui_states.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+            this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
         }
         this.setIsDrawFalse(1000);
     }
     /**
      * Redo the last undone operation on the active layer.
-     * Reapplies the MaskVolume slice to its post-draw state, re-renders
-     * the canvas, and notifies the backend.
      */
     redoLastPainting() {
         const delta = this.undoManager.redo();
         if (!delta)
             return;
         try {
-            const vol = this.getVolumeForLayer(delta.layerId);
+            const vol = this.renderer.getVolumeForLayer(delta.layerId);
             vol.setSliceUint8(delta.sliceIndex, delta.newSlice, delta.axis);
         }
         catch (_a) {
-            return; // Volume not ready
+            return;
         }
-        this.protectedData.Is_Draw = true;
-        if (delta.axis === this.protectedData.axis && delta.sliceIndex === this.nrrd_states.currentIndex) {
+        this.state.protectedData.isDrawing = true;
+        if (delta.axis === this.state.protectedData.axis && delta.sliceIndex === this.state.nrrd_states.view.currentSliceIndex) {
             this.applyUndoRedoToCanvas(delta.layerId);
         }
-        if (!this.nrrd_states.loadMaskJson) {
-            const { data: sliceData, width, height } = this.getVolumeForLayer(delta.layerId)
+        if (!this.state.nrrd_states.flags.loadingMaskData) {
+            const { data: sliceData, width, height } = this.renderer.getVolumeForLayer(delta.layerId)
                 .getSliceUint8(delta.sliceIndex, delta.axis);
-            this.nrrd_states.getMask(sliceData, delta.layerId, this.gui_states.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
+            this.state.annotationCallbacks.onMaskChanged(sliceData, delta.layerId, this.state.gui_states.layerChannel.activeChannel || 1, delta.sliceIndex, delta.axis, width, height, false);
         }
         this.setIsDrawFalse(1000);
     }
     /**
      * Re-render a layer canvas from MaskVolume and composite to master.
-     * Called after writing oldSlice/newSlice back to the volume during undo/redo.
      */
     applyUndoRedoToCanvas(layerId) {
-        let target = this.protectedData.layerTargets.get(layerId);
+        let target = this.state.protectedData.layerTargets.get(layerId);
         if (!target) {
-            const firstId = this.nrrd_states.layers[0];
-            target = this.protectedData.layerTargets.get(firstId);
+            const firstId = this.state.nrrd_states.image.layers[0];
+            target = this.state.protectedData.layerTargets.get(firstId);
         }
         const { ctx, canvas } = target;
-        // Clear and re-render the affected layer canvas from MaskVolume
         canvas.width = canvas.width;
-        const buffer = this.getOrCreateSliceBuffer(this.protectedData.axis);
+        const buffer = this.renderer.getOrCreateSliceBuffer(this.state.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.renderer.renderSliceToCanvas(layerId, this.state.protectedData.axis, this.state.nrrd_states.view.currentSliceIndex, buffer, ctx, this.state.nrrd_states.view.changedWidth, this.state.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);
+        this.renderer.compositeAllLayers();
     }
     /****************************Store images (delegated to ImageStoreHelper)****************************************************/
-    storeAllImages(index, layer) {
-        this.imageStoreHelper.storeAllImages(index, layer);
-    }
-    storeImageToLayer(index, canvas) {
-        return this.imageStoreHelper.storeImageToLayer(index, canvas);
-    }
-    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) {
         this.contrastTool.setupConrastEvents(callback);
     }
+    // ── Pseudo-abstract methods (overridden by NrrdTools via callback injection) ──
+    /** Override in NrrdTools */
+    setIsDrawFalse(target) {
+        throw new Error("setIsDrawFalse must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    setSyncsliceNum() {
+        throw new Error("setSyncsliceNum must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    resetPaintAreaUIPosition(l, t) {
+        throw new Error("resetPaintAreaUIPosition must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    resizePaintArea(factor) {
+        throw new Error("resizePaintArea must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    setEmptyCanvasSize(axis) {
+        throw new Error("setEmptyCanvasSize must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    flipDisplayImageByAxis() {
+        throw new Error("flipDisplayImageByAxis must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    updateOriginAndChangedWH() {
+        throw new Error("updateOriginAndChangedWH must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    resetLayerCanvas() {
+        throw new Error("resetLayerCanvas must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    redrawDisplayCanvas() {
+        throw new Error("redrawDisplayCanvas must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    enterSphereMode() {
+        throw new Error("enterSphereMode must be provided by NrrdTools");
+    }
+    /** Override in NrrdTools */
+    exitSphereMode() {
+        throw new Error("exitSphereMode must be provided by NrrdTools");
+    }
 }
 //# sourceMappingURL=DrawToolCore.js.map