copper3d 3.0.1 → 3.1.0

package/dist/Utils/segmentation/NrrdTools.js

@@ -1,11 +1,24 @@
 import { setupGui } from "./coreTools/gui";
-import { autoFocusDiv } from "./coreTools/divControlTools";
+import { autoFocusDiv, enableDownload } from "./coreTools/divControlTools";
 import { DragOperator } from "./DragOperator";
 import { DrawToolCore } from "./DrawToolCore";
-import { MaskVolume, CHANNEL_HEX_COLORS, rgbaToHex, rgbaToCss } from "./core";
+import { CanvasState } from "./CanvasState";
+import { MaskVolume } from "./core";
+import { LayerChannelManager } from "./tools/LayerChannelManager";
+import { SliceRenderPipeline } from "./tools/SliceRenderPipeline";
+import { DataLoader } from "./tools/DataLoader";
 /**
  * Core NRRD annotation tool for medical image segmentation.
  *
+ * Acts as a **Facade** that delegates to composed modules:
+ * - {@link CanvasState} — pure state container
+ * - {@link DrawToolCore} — tool orchestration, event routing
+ * - {@link LayerChannelManager} — layer/channel/sphere-type management
+ * - {@link SliceRenderPipeline} — slice rendering, canvas flip, mask reload
+ * - {@link DataLoader} — NRRD slice loading, legacy mask loading, NIfTI loading
+ *
+ * No longer extends DrawToolCore — uses composition instead.
+ *
  * @example
  * ```ts
  * // Default 3 layers: layer1, layer2, layer3
@@ -15,54 +28,103 @@ import { MaskVolume, CHANNEL_HEX_COLORS, rgbaToHex, rgbaToCss } from "./core";
  * const tools = new NrrdTools(container, { layers: ["layer1", "layer2"] });
  * ```
  */
-export class NrrdTools extends DrawToolCore {
+export class NrrdTools {
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 1. Constructor + Module Initialisation
+    // ═══════════════════════════════════════════════════════════════════════════
     constructor(container, options) {
-        super(container, options);
-        this.initState = true;
         this._sliceRAFId = null;
         this._pendingSliceStep = 0;
+        /** Whether calculator mode is active (not part of gui_states interface) */
+        this._calculatorActive = false;
+        /** Stored closure callbacks from gui.ts setupGui() */
+        this.guiCallbacks = null;
         this.container = container;
-        this.protectedData.previousDrawingImage =
-            this.protectedData.ctxes.emptyCtx.createImageData(1, 1);
+        // Create shared state
+        const mainAreaContainer = document.createElement("div");
+        this.state = new CanvasState(container, mainAreaContainer, options);
+        // Create DrawToolCore with shared state
+        this.drawCore = new DrawToolCore(container, this.state);
+        // Wire DrawToolCore's overridable methods to NrrdTools implementations
+        this.wireDrawCoreMethods();
+        // Wire RenderingUtils' setEmptyCanvasSize callback
+        this.drawCore.renderer.setEmptyCanvasSize = (axis) => this.setEmptyCanvasSize(axis);
         this.init();
-        this.dragOperator = new DragOperator(this.container, this.nrrd_states, this.gui_states, this.protectedData, this.drawingPrameters, this.setSyncsliceNum.bind(this), this.setIsDrawFalse.bind(this), this.flipDisplayImageByAxis.bind(this), this.setEmptyCanvasSize.bind(this), this.getOrCreateSliceBuffer.bind(this), this.renderSliceToCanvas.bind(this));
+        this.dragOperator = new DragOperator(this.container, this.state.nrrd_states, this.state.gui_states, this.state.protectedData, this.drawCore.drawingPrameters, this.setSyncsliceNum.bind(this), this.setIsDrawFalse.bind(this), this.flipDisplayImageByAxis.bind(this), this.setEmptyCanvasSize.bind(this), this.drawCore.renderer.getOrCreateSliceBuffer.bind(this.drawCore.renderer), this.drawCore.renderer.renderSliceToCanvas.bind(this.drawCore.renderer));
         // Inject EventRouter into DragOperator for centralized event handling
-        if (this.eventRouter) {
-            this.dragOperator.setEventRouter(this.eventRouter);
+        if (this.drawCore.eventRouter) {
+            this.dragOperator.setEventRouter(this.drawCore.eventRouter);
         }
+        // Wire sphere overlay refresh callback into DragOperator → DragSliceTool
+        this.dragOperator.setRefreshSphereOverlay(() => this.refreshSphereOverlay());
+        // Initialize extracted modules
+        this.initNrrdToolsModules();
     }
     /**
-     * core function for drag slices
-     * @param opts
+     * Wire DrawToolCore's overridable methods to NrrdTools implementations.
+     * This replaces the old inheritance approach.
      */
-    drag(opts) {
-        this.dragOperator.drag(opts);
+    wireDrawCoreMethods() {
+        this.drawCore.setIsDrawFalse = (target) => this.setIsDrawFalse(target);
+        this.drawCore.setSyncsliceNum = () => this.setSyncsliceNum();
+        this.drawCore.resetPaintAreaUIPosition = (l, t) => this.resetPaintAreaUIPosition(l, t);
+        this.drawCore.resizePaintArea = (factor) => this.resizePaintArea(factor);
+        this.drawCore.setEmptyCanvasSize = (axis) => this.setEmptyCanvasSize(axis);
+        this.drawCore.flipDisplayImageByAxis = () => this.flipDisplayImageByAxis();
+        this.drawCore.updateOriginAndChangedWH = () => this.updateOriginAndChangedWH();
+        this.drawCore.resetLayerCanvas = () => this.resetLayerCanvas();
+        this.drawCore.redrawDisplayCanvas = () => this.redrawDisplayCanvas();
+        this.drawCore.enterSphereMode = () => this.enterSphereMode();
+        this.drawCore.exitSphereMode = () => this.exitSphereMode();
+        this.drawCore.configMouseSliceWheel = () => this.configMouseSliceWheel();
     }
     /**
-     * Set the Draw Display Canvas base size
-     * @param size number
+     * A initialise function for nrrd_tools
      */
-    setBaseDrawDisplayCanvasesSize(size) {
-        if (size > 8) {
-            this.baseCanvasesSize = 8;
-        }
-        else if (size < 1 || typeof size !== "number") {
-            this.baseCanvasesSize = 1;
-        }
-        else {
-            this.baseCanvasesSize = size;
-        }
-    }
-    setDisplaySliceIndexPanel(panel) {
-        this.dragOperator.setShowDragNumberDiv(panel);
+    init() {
+        this.state.protectedData.mainAreaContainer.classList.add("copper3D_drawingCanvasContainer");
+        this.container.appendChild(this.state.protectedData.mainAreaContainer);
+        autoFocusDiv(this.container);
+        this.setShowInMainArea();
     }
-    /**
-     * Enable the drag function for contrast images window center and window high.
-     * @param callback
-     */
-    enableContrastDragEvents(callback) {
-        this.setupConrastEvents(callback);
+    initNrrdToolsModules() {
+        const toolCtx = {
+            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.layerChannelManager = new LayerChannelManager(toolCtx, {
+            reloadMasksFromVolume: () => this.reloadMasksFromVolume(),
+            getVolumeForLayer: (layer) => this.drawCore.renderer.getVolumeForLayer(layer),
+            onChannelColorChanged: (layerId, ch, color) => this.state.annotationCallbacks.onChannelColorChanged(layerId, ch, color),
+        });
+        this.sliceRenderPipeline = new SliceRenderPipeline(toolCtx, {
+            compositeAllLayers: () => this.drawCore.renderer.compositeAllLayers(),
+            getOrCreateSliceBuffer: (axis) => this.drawCore.renderer.getOrCreateSliceBuffer(axis),
+            renderSliceToCanvas: (layer, axis, sliceIndex, buffer, targetCtx, w, h) => this.drawCore.renderer.renderSliceToCanvas(layer, axis, sliceIndex, buffer, targetCtx, w, h),
+            getVolumeForLayer: (layer) => this.drawCore.renderer.getVolumeForLayer(layer),
+            refreshSphereOverlay: () => this.refreshSphereOverlay(),
+            syncGuiParameterSettings: () => this.syncGuiParameterSettings(),
+            repraintCurrentContrastSlice: () => this.drawCore.repraintCurrentContrastSlice(),
+            clearUndoHistory: () => this.drawCore.undoManager.clearAll(),
+            updateShowNumDiv: (contrastNum) => this.dragOperator.updateShowNumDiv(contrastNum),
+            updateCurrentContrastSlice: () => this.dragOperator.updateCurrentContrastSlice(),
+        });
+        this.dataLoader = new DataLoader(toolCtx, {
+            invalidateSliceBuffer: () => this.drawCore.renderer.invalidateSliceBuffer(),
+            setDisplaySlicesBaseOnAxis: () => this.sliceRenderPipeline.setDisplaySlicesBaseOnAxis(),
+            afterLoadSlice: () => this.sliceRenderPipeline.afterLoadSlice(),
+            setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
+            syncLayerSliceData: (index, mode) => this.drawCore.syncLayerSliceData(index, mode),
+            reloadMasksFromVolume: () => this.reloadMasksFromVolume(),
+            resetZoom: () => this.executeAction("resetZoom"),
+        });
     }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 2. GUI Setup
+    // ═══════════════════════════════════════════════════════════════════════════
     /**
      * Set up GUI for drawing panel
      * @param gui GUI
@@ -73,798 +135,437 @@ export class NrrdTools extends DrawToolCore {
         const guiOptions = {
             modeFolder,
             dragOperator: this.dragOperator,
-            gui_states: this.gui_states,
-            nrrd_states: this.nrrd_states,
-            drawingCanvas: this.protectedData.canvases.drawingCanvas,
-            drawingPrameters: this.drawingPrameters,
-            eraserUrls: this.eraserUrls,
-            pencilUrls: this.pencilUrls,
-            mainPreSlices: this.protectedData.mainPreSlices,
-            protectedData: this.protectedData,
+            gui_states: this.state.gui_states,
+            nrrd_states: this.state.nrrd_states,
+            drawingCanvas: this.state.protectedData.canvases.drawingCanvas,
+            drawingPrameters: this.drawCore.drawingPrameters,
+            eraserUrls: this.drawCore.eraserUrls,
+            pencilUrls: this.drawCore.pencilUrls,
+            mainPreSlices: this.state.protectedData.mainPreSlices,
+            protectedData: this.state.protectedData,
             removeDragMode: this.dragOperator.removeDragMode,
             configDragMode: this.dragOperator.configDragMode,
-            clearPaint: this.clearPaint,
-            clearStoreImages: this.clearStoreImages,
-            updateSlicesContrast: this.updateSlicesContrast,
-            setMainAreaSize: this.setMainAreaSize,
-            resetPaintAreaUIPosition: this.resetPaintAreaUIPosition,
-            resizePaintArea: this.resizePaintArea,
-            repraintCurrentContrastSlice: this.repraintCurrentContrastSlice,
-            setSyncsliceNum: this.setSyncsliceNum,
-            resetLayerCanvas: this.resetLayerCanvas,
-            redrawDisplayCanvas: this.redrawDisplayCanvas,
-            flipDisplayImageByAxis: this.flipDisplayImageByAxis,
-            filterDrawedImage: this.filterDrawedImage,
-            setEmptyCanvasSize: this.setEmptyCanvasSize,
-            storeAllImages: this.storeAllImages,
-            drawImageOnEmptyImage: this.drawImageOnEmptyImage,
-            storeEachLayerImage: this.storeEachLayerImage,
-            storeImageToLayer: this.storeImageToLayer,
-            getRestLayer: this.getRestLayer,
-            setIsDrawFalse: this.setIsDrawFalse,
-            getVolumeForLayer: this.getVolumeForLayer.bind(this),
+            clearActiveLayer: this.clearActiveLayer.bind(this),
+            clearActiveSlice: this.drawCore.clearActiveSlice.bind(this.drawCore),
+            updateSlicesContrast: this.drawCore.updateSlicesContrast,
+            setMainAreaSize: this.setMainAreaSize.bind(this),
+            resetPaintAreaUIPosition: this.resetPaintAreaUIPosition.bind(this),
+            resizePaintArea: this.resizePaintArea.bind(this),
+            repraintCurrentContrastSlice: this.drawCore.repraintCurrentContrastSlice,
+            setSyncsliceNum: this.setSyncsliceNum.bind(this),
+            resetLayerCanvas: this.resetLayerCanvas.bind(this),
+            redrawDisplayCanvas: this.redrawDisplayCanvas.bind(this),
+            flipDisplayImageByAxis: this.flipDisplayImageByAxis.bind(this),
+            setEmptyCanvasSize: this.setEmptyCanvasSize.bind(this),
+            syncLayerSliceData: this.drawCore.syncLayerSliceData.bind(this.drawCore),
+            drawImageOnEmptyImage: this.drawCore.drawImageOnEmptyImage.bind(this.drawCore),
+            getRestLayer: this.drawCore.getRestLayer.bind(this.drawCore),
+            setIsDrawFalse: this.setIsDrawFalse.bind(this),
+            getVolumeForLayer: this.drawCore.renderer.getVolumeForLayer.bind(this.drawCore.renderer),
+            undoLastPainting: this.drawCore.undoLastPainting.bind(this.drawCore),
+            redoLastPainting: this.drawCore.redoLastPainting.bind(this.drawCore),
+            resetZoom: () => this.executeAction("resetZoom"),
+            downloadCurrentMask: () => this.executeAction("downloadCurrentMask"),
         };
         this.guiParameterSettings = setupGui(guiOptions);
-    }
-    getGuiSettings() {
-        if (!!this.guiParameterSettings) {
-            // update image volume
-            this.guiParameterSettings.windowHigh.value = this.guiParameterSettings.windowLow.value = this.protectedData.mainPreSlices.volume;
-            this.guiParameterSettings.windowHigh.max = this.guiParameterSettings.windowLow.max = this.protectedData.mainPreSlices.volume.max;
-            this.guiParameterSettings.windowHigh.min = this.guiParameterSettings.windowLow.min = this.protectedData.mainPreSlices.volume.min;
-        }
-        return {
-            guiState: this.gui_states,
-            guiSetting: this.guiParameterSettings,
+        // Store closure callbacks for programmatic access (Phase 1 Task 1.2)
+        this.guiCallbacks = {
+            updatePencilState: this.guiParameterSettings.pencil.onChange,
+            updateEraserState: this.guiParameterSettings.eraser.onChange,
+            updateBrushAndEraserSize: this.guiParameterSettings.brushAndEraserSize.onChange,
+            updateSphereState: this.guiParameterSettings.sphere.onChange,
+            updateCalDistance: this.guiParameterSettings.activeSphereType.onChange,
+            updateWindowHigh: this.guiParameterSettings.windowHigh.onChange,
+            updateWindowLow: this.guiParameterSettings.windowLow.onChange,
+            finishContrastAdjustment: this.guiParameterSettings.windowHigh.onFinished,
         };
     }
-    // ── Layer & Channel Management API ─────────────────────────────────────
     /**
-     * Set the active layer and update fillColor/brushColor to match the active channel.
+     * Sync guiParameterSettings with current volume metadata.
      */
-    setActiveLayer(layerId) {
-        this.gui_states.layer = layerId;
-        this.syncBrushColor();
-    }
-    /**
-     * Set the active channel (1-8) and update fillColor/brushColor.
-     */
-    setActiveChannel(channel) {
-        this.gui_states.activeChannel = channel;
-        this.syncBrushColor();
+    syncGuiParameterSettings() {
+        if (this.guiParameterSettings && this.state.protectedData.mainPreSlices) {
+            this.guiParameterSettings.windowHigh.value = this.guiParameterSettings.windowLow.value = this.state.protectedData.mainPreSlices.volume;
+            this.guiParameterSettings.windowHigh.max = this.guiParameterSettings.windowLow.max = this.state.protectedData.mainPreSlices.volume.max;
+            this.guiParameterSettings.windowHigh.min = this.guiParameterSettings.windowLow.min = this.state.protectedData.mainPreSlices.volume.min;
+        }
     }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 3. Public API — Mode / Slider / Color / Action
+    // ═══════════════════════════════════════════════════════════════════════════
     /**
-     * Sync brush/fill color from the active layer's volume color map.
-     * Falls back to global CHANNEL_HEX_COLORS if volume not available.
+     * Set the current tool mode.
      */
-    syncBrushColor() {
-        const channel = this.gui_states.activeChannel || 1;
-        const layer = this.gui_states.layer;
-        const volume = this.protectedData.maskData.volumes[layer];
-        if (volume) {
-            const hex = rgbaToHex(volume.getChannelColor(channel));
-            this.gui_states.fillColor = hex;
-            this.gui_states.brushColor = hex;
+    setMode(mode) {
+        if (!this.guiCallbacks)
+            return;
+        const prevSphere = this.state.gui_states.mode.sphere;
+        const prevCalculator = this._calculatorActive;
+        this.state.gui_states.mode.pencil = false;
+        this.state.gui_states.mode.eraser = false;
+        this.state.gui_states.mode.sphere = false;
+        this._calculatorActive = false;
+        switch (mode) {
+            case "pencil":
+                this.state.gui_states.mode.pencil = true;
+                this.guiCallbacks.updatePencilState();
+                break;
+            case "brush":
+                this.guiCallbacks.updatePencilState();
+                break;
+            case "eraser":
+                this.state.gui_states.mode.eraser = true;
+                this.guiCallbacks.updateEraserState();
+                break;
+            case "sphere":
+                this.state.gui_states.mode.sphere = true;
+                break;
+            case "calculator":
+                this.state.gui_states.mode.sphere = true;
+                this._calculatorActive = true;
+                break;
         }
-        else {
-            const hex = CHANNEL_HEX_COLORS[channel] || '#00ff00';
-            this.gui_states.fillColor = hex;
-            this.gui_states.brushColor = hex;
+        if (prevSphere && !this.state.gui_states.mode.sphere) {
+            this.guiCallbacks.updateSphereState();
+        }
+        if (!prevSphere && this.state.gui_states.mode.sphere) {
+            this.guiCallbacks.updateSphereState();
+        }
+        if (prevCalculator && !this._calculatorActive) {
+            // calculator was exited
         }
     }
-    /**
-     * Get the currently active layer id.
-     */
-    getActiveLayer() {
-        return this.gui_states.layer;
+    getMode() {
+        if (this._calculatorActive)
+            return "calculator";
+        if (this.state.gui_states.mode.sphere)
+            return "sphere";
+        if (this.state.gui_states.mode.eraser)
+            return "eraser";
+        if (this.state.gui_states.mode.pencil)
+            return "pencil";
+        return "brush";
     }
-    /**
-     * Get the currently active channel value.
-     */
-    getActiveChannel() {
-        return this.gui_states.activeChannel;
+    isCalculatorActive() {
+        return this._calculatorActive;
     }
-    /**
-     * Set visibility of a layer and re-render.
-     */
-    setLayerVisible(layerId, visible) {
-        this.gui_states.layerVisibility[layerId] = visible;
-        this.reloadMasksFromVolume();
+    setOpacity(value) {
+        this.state.gui_states.drawing.globalAlpha = Math.max(0.1, Math.min(1, value));
     }
-    /**
-     * Check if a layer is visible.
-     */
-    isLayerVisible(layerId) {
-        var _a;
-        return (_a = this.gui_states.layerVisibility[layerId]) !== null && _a !== void 0 ? _a : true;
+    getOpacity() {
+        return this.state.gui_states.drawing.globalAlpha;
     }
-    /**
-     * Set visibility of a specific channel within a layer and re-render.
-     */
-    setChannelVisible(layerId, channel, visible) {
-        if (this.gui_states.channelVisibility[layerId]) {
-            this.gui_states.channelVisibility[layerId][channel] = visible;
-        }
-        this.reloadMasksFromVolume();
+    setBrushSize(size) {
+        var _a;
+        this.state.gui_states.drawing.brushAndEraserSize = Math.max(5, Math.min(50, size));
+        (_a = this.guiCallbacks) === null || _a === void 0 ? void 0 : _a.updateBrushAndEraserSize();
     }
-    /**
-     * Check if a specific channel within a layer is visible.
-     */
-    isChannelVisible(layerId, channel) {
-        var _a, _b;
-        return (_b = (_a = this.gui_states.channelVisibility[layerId]) === null || _a === void 0 ? void 0 : _a[channel]) !== null && _b !== void 0 ? _b : true;
+    getBrushSize() {
+        return this.state.gui_states.drawing.brushAndEraserSize;
     }
-    /**
-     * Get the full layer visibility map.
-     */
-    getLayerVisibility() {
-        return Object.assign({}, this.gui_states.layerVisibility);
+    setWindowHigh(value) {
+        var _a;
+        this.state.gui_states.viewConfig.readyToUpdate = false;
+        (_a = this.guiCallbacks) === null || _a === void 0 ? void 0 : _a.updateWindowHigh(value);
     }
-    /**
-     * Get the full channel visibility map.
-     */
-    getChannelVisibility() {
-        const result = {};
-        for (const layerId of this.nrrd_states.layers) {
-            result[layerId] = Object.assign({}, this.gui_states.channelVisibility[layerId]);
-        }
-        return result;
+    setWindowLow(value) {
+        var _a;
+        this.state.gui_states.viewConfig.readyToUpdate = false;
+        (_a = this.guiCallbacks) === null || _a === void 0 ? void 0 : _a.updateWindowLow(value);
     }
-    /**
-     * Check if a specific layer contains any non-zero mask data.
-     *
-     * This is useful for determining if a layer has actual annotations
-     * before saving or exporting to avoid processing empty layers.
-     *
-     * @param layerId - The layer to check ('layer1', 'layer2', or 'layer3')
-     * @returns True if the layer has any non-zero voxel data, false if empty
-     *
-     * @example
-     * ```ts
-     * if (nrrdTools.hasLayerData('layer1')) {
-     *   await useSaveMasks(caseId, 'layer1');
-     * }
-     * ```
-     */
-    hasLayerData(layerId) {
-        const volume = this.protectedData.maskData.volumes[layerId];
-        if (!volume) {
-            return false;
-        }
-        return volume.hasData();
+    finishWindowAdjustment() {
+        var _a;
+        (_a = this.guiCallbacks) === null || _a === void 0 ? void 0 : _a.finishContrastAdjustment();
     }
-    // ── Custom Channel Color API ────────────────────────────────────────────
-    /**
-     * Set a custom color for a specific channel in a specific layer.
-     * Only affects this layer; other layers remain unchanged.
-     *
-     * @param layerId  Layer to customize (e.g. 'layer1', 'layer2')
-     * @param channel  Channel label (1-8)
-     * @param color    RGBAColor object { r, g, b, a } (each 0-255)
-     *
-     * @example
-     * ```ts
-     * // Make channel 2 in layer2 orange
-     * nrrdTools.setChannelColor('layer2', 2, { r: 255, g: 128, b: 0, a: 255 });
-     * ```
-     */
-    setChannelColor(layerId, channel, color) {
-        const volume = this.protectedData.maskData.volumes[layerId];
-        if (!volume) {
-            console.warn(`setChannelColor: unknown layer "${layerId}"`);
+    adjustContrast(type, delta) {
+        var _a, _b;
+        if (!this.guiParameterSettings)
             return;
+        const setting = this.guiParameterSettings[type];
+        const vol = setting.value;
+        const currentValue = type === "windowHigh"
+            ? ((_a = vol === null || vol === void 0 ? void 0 : vol.windowHigh) !== null && _a !== void 0 ? _a : 0)
+            : ((_b = vol === null || vol === void 0 ? void 0 : vol.windowLow) !== null && _b !== void 0 ? _b : 0);
+        const newValue = currentValue + delta;
+        if (newValue >= setting.max || newValue <= 0)
+            return;
+        if (type === "windowHigh") {
+            this.setWindowHigh(newValue);
         }
-        volume.setChannelColor(channel, color);
-        if (layerId === this.gui_states.layer && channel === this.gui_states.activeChannel) {
-            this.syncBrushColor();
-        }
-        this.reloadMasksFromVolume();
-        this.nrrd_states.onChannelColorChanged(layerId, channel, color);
-    }
-    /**
-     * Get the current color for a specific channel in a specific layer.
-     *
-     * @param layerId  Layer to query
-     * @param channel  Channel label (1-8)
-     * @returns RGBAColor object (copy, safe to mutate)
-     */
-    getChannelColor(layerId, channel) {
-        const volume = this.protectedData.maskData.volumes[layerId];
-        if (!volume) {
-            return { r: 0, g: 255, b: 0, a: 255 };
+        else {
+            this.setWindowLow(newValue);
         }
-        return volume.getChannelColor(channel);
     }
-    /**
-     * Get a hex color string for a channel in a layer (e.g. '#ff8000').
-     */
-    getChannelHexColor(layerId, channel) {
-        return rgbaToHex(this.getChannelColor(layerId, channel));
-    }
-    /**
-     * Get a CSS rgba() color string for a channel in a layer.
-     */
-    getChannelCssColor(layerId, channel) {
-        return rgbaToCss(this.getChannelColor(layerId, channel));
-    }
-    /**
-     * Batch-set multiple channel colors for a single layer (single re-render).
-     *
-     * @param layerId  Layer to customize
-     * @param colorMap Partial map of channel -> RGBAColor
-     *
-     * @example
-     * ```ts
-     * nrrdTools.setChannelColors('layer2', {
-     *   2: { r: 255, g: 128, b: 0, a: 255 },
-     *   3: { r: 100, g: 200, b: 50, a: 255 },
-     * });
-     * ```
-     */
-    setChannelColors(layerId, colorMap) {
-        const volume = this.protectedData.maskData.volumes[layerId];
-        if (!volume) {
-            console.warn(`setChannelColors: unknown layer "${layerId}"`);
-            return;
+    getSliderMeta(key) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!this.guiParameterSettings)
+            return null;
+        const setting = this.guiParameterSettings[key];
+        if (!setting)
+            return null;
+        let value;
+        if (key === "windowHigh") {
+            value = (_b = (_a = setting.value) === null || _a === void 0 ? void 0 : _a.windowHigh) !== null && _b !== void 0 ? _b : 0;
         }
-        for (const [ch, color] of Object.entries(colorMap)) {
-            volume.setChannelColor(Number(ch), color);
+        else if (key === "windowLow") {
+            value = (_d = (_c = setting.value) === null || _c === void 0 ? void 0 : _c.windowLow) !== null && _d !== void 0 ? _d : 0;
         }
-        if (layerId === this.gui_states.layer) {
-            this.syncBrushColor();
+        else {
+            value = (_e = this.state.gui_states.drawing[key]) !== null && _e !== void 0 ? _e : 0;
         }
-        this.reloadMasksFromVolume();
+        return {
+            min: (_f = setting.min) !== null && _f !== void 0 ? _f : 0,
+            max: (_g = setting.max) !== null && _g !== void 0 ? _g : 100,
+            step: (_h = setting.step) !== null && _h !== void 0 ? _h : 1,
+            value,
+        };
     }
-    /**
-     * Set the same color for a specific channel across ALL layers (single re-render).
-     *
-     * @param channel  Channel label (1-8)
-     * @param color    RGBAColor object
-     */
-    setAllLayersChannelColor(channel, color) {
-        for (const layerId of this.nrrd_states.layers) {
-            const volume = this.protectedData.maskData.volumes[layerId];
-            if (volume) {
-                volume.setChannelColor(channel, color);
-            }
-        }
-        if (channel === this.gui_states.activeChannel) {
-            this.syncBrushColor();
-        }
-        this.reloadMasksFromVolume();
+    setPencilColor(hex) {
+        this.state.gui_states.drawing.color = hex;
     }
-    /**
-     * Reset channel colors to system defaults.
-     *
-     * @param layerId  Optional. If omitted, resets all layers.
-     * @param channel  Optional. If omitted, resets all channels in the layer(s).
-     *
-     * @example
-     * ```ts
-     * nrrdTools.resetChannelColors('layer2', 2);  // Reset only ch2 in layer2
-     * nrrdTools.resetChannelColors('layer2');       // Reset all channels in layer2
-     * nrrdTools.resetChannelColors();               // Reset all layers
-     * ```
-     */
-    resetChannelColors(layerId, channel) {
-        const layers = layerId ? [layerId] : this.nrrd_states.layers;
-        for (const lid of layers) {
-            const volume = this.protectedData.maskData.volumes[lid];
-            if (volume) {
-                volume.resetChannelColors(channel);
+    getPencilColor() {
+        return this.state.gui_states.drawing.color;
+    }
+    executeAction(action) {
+        switch (action) {
+            case "undo":
+                this.undo();
+                break;
+            case "redo":
+                this.redo();
+                break;
+            case "clearActiveSliceMask":
+                this.drawCore.clearActiveSlice();
+                break;
+            case "clearActiveLayerMask": {
+                const text = "Are you sure remove annotations on All slice?";
+                if (confirm(text) === true) {
+                    this.state.nrrd_states.flags.clearAllFlag = true;
+                    this.drawCore.clearActiveSlice();
+                    this.clearActiveLayer();
+                }
+                this.state.nrrd_states.flags.clearAllFlag = false;
+                break;
+            }
+            case "resetZoom":
+                this.state.nrrd_states.view.sizeFactor = this.state.baseCanvasesSize;
+                this.state.gui_states.viewConfig.mainAreaSize = this.state.baseCanvasesSize;
+                this.resizePaintArea(this.state.nrrd_states.view.sizeFactor);
+                this.resetPaintAreaUIPosition();
+                break;
+            case "downloadCurrentMask": {
+                const config = {
+                    axis: this.state.protectedData.axis,
+                    currentSliceIndex: this.state.nrrd_states.view.currentSliceIndex,
+                    drawingCanvas: this.state.protectedData.canvases.drawingCanvas,
+                    originWidth: this.state.nrrd_states.image.originWidth,
+                    originHeight: this.state.nrrd_states.image.originHeight,
+                };
+                enableDownload(config);
+                break;
             }
         }
-        this.syncBrushColor();
-        this.reloadMasksFromVolume();
     }
-    // ── Keyboard & History API ──────────────────────────────────────────────
-    /**
-     * Programmatically trigger an undo operation.
-     *
-     * Equivalent to pressing Ctrl+Z. Reverts the most recent drawing stroke
-     * on the currently active layer and syncs the result to the backend via
-     * the `getMask` callback.
-     *
-     * @example
-     * ```ts
-     * undoBtn.addEventListener('click', () => nrrdTools.undo());
-     * ```
-     */
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 4. Public API — Keyboard & History
+    // ═══════════════════════════════════════════════════════════════════════════
     undo() {
-        this.undoLastPainting();
+        this.drawCore.undoLastPainting();
     }
-    /**
-     * Programmatically trigger a redo operation.
-     *
-     * Equivalent to pressing Ctrl+Y. Re-applies the most recently undone
-     * drawing stroke on the currently active layer and syncs the result to
-     * the backend via the `getMask` callback.
-     *
-     * @example
-     * ```ts
-     * redoBtn.addEventListener('click', () => nrrdTools.redo());
-     * ```
-     */
     redo() {
-        this.redoLastPainting();
+        this.drawCore.redoLastPainting();
     }
-    /**
-     * Enter keyboard-configuration mode.
-     *
-     * While active, every keydown/keyup handler in DrawToolCore and DragOperator
-     * is suppressed so the user can press arbitrary keys in the settings dialog
-     * without accidentally triggering drawing, undo, or contrast shortcuts.
-     *
-     * Always pair with {@link exitKeyboardConfig} when the dialog closes.
-     *
-     * @example
-     * ```ts
-     * dialog.addEventListener('open', () => nrrdTools.enterKeyboardConfig());
-     * ```
-     */
     enterKeyboardConfig() {
-        this._configKeyBoard = true;
+        this.state.configKeyBoard = true;
     }
-    /**
-     * Exit keyboard-configuration mode and resume normal shortcut handling.
-     *
-     * @example
-     * ```ts
-     * dialog.addEventListener('close', () => nrrdTools.exitKeyboardConfig());
-     * ```
-     */
     exitKeyboardConfig() {
-        this._configKeyBoard = false;
+        this.state.configKeyBoard = false;
     }
-    /**
-     * Enable or disable the contrast window/level shortcut (Ctrl/Meta key).
-     *
-     * When disabled:
-     * - Holding Ctrl no longer enters contrast mode
-     * - If contrast mode is currently active it is immediately exited
-     * - All other Ctrl-based shortcuts (Ctrl+Z undo, Ctrl+Y redo) are
-     *   unaffected because they are checked in the keydown handler before
-     *   the contrast guard runs
-     *
-     * @param enabled - Pass `false` to disable, `true` to re-enable.
-     *
-     * @example
-     * ```ts
-     * // Disable contrast when sphere tool is active
-     * nrrdTools.setContrastShortcutEnabled(false);
-     *
-     * // Re-enable when returning to draw mode
-     * nrrdTools.setContrastShortcutEnabled(true);
-     * ```
-     */
     setContrastShortcutEnabled(enabled) {
         var _a;
-        (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.setContrastEnabled(enabled);
+        (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setContrastEnabled(enabled);
     }
-    /**
-     * Returns whether the contrast shortcut is currently enabled.
-     */
     isContrastShortcutEnabled() {
         var _a, _b;
-        return (_b = (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isContrastEnabled()) !== null && _b !== void 0 ? _b : true;
+        return (_b = (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.isContrastEnabled()) !== null && _b !== void 0 ? _b : true;
     }
-    /**
-     * Update keyboard shortcut bindings.
-     *
-     * Synchronises both the internal class field (read by every keydown handler)
-     * and the EventRouter's internal copy (used for modifier-key mode tracking)
-     * so the two never drift apart.  If `mouseWheel` is changed the wheel event
-     * listener is automatically re-bound via {@link updateMouseWheelEvent}.
-     *
-     * Only the fields you supply are updated; omitted fields keep their
-     * current values.
-     *
-     * @param settings - Partial keyboard settings to override.
-     *
-     * @example
-     * ```ts
-     * nrrdTools.setKeyboardSettings({
-     *   undo: 'z',
-     *   redo: 'y',
-     *   crosshair: 'c',
-     *   mouseWheel: 'Scroll:Slice',
-     * });
-     * ```
-     */
     setKeyboardSettings(settings) {
         var _a;
         const mouseWheelChanged = settings.mouseWheel !== undefined
-            && settings.mouseWheel !== this._keyboardSettings.mouseWheel;
-        Object.assign(this._keyboardSettings, settings);
-        (_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.setKeyboardSettings(settings);
+            && settings.mouseWheel !== this.state.keyboardSettings.mouseWheel;
+        Object.assign(this.state.keyboardSettings, settings);
+        (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setKeyboardSettings(settings);
         if (mouseWheelChanged) {
             this.updateMouseWheelEvent();
         }
     }
-    /**
-     * Get a snapshot of the current keyboard shortcut bindings.
-     *
-     * Returns a shallow copy so callers cannot accidentally mutate internal
-     * state. To update settings use {@link setKeyboardSettings} instead.
-     *
-     * @returns Current keyboard settings.
-     *
-     * @example
-     * ```ts
-     * const { undo, redo } = nrrdTools.getKeyboardSettings();
-     * console.log(`Undo: Ctrl+${undo}, Redo: Ctrl+${redo}`);
-     * ```
-     */
     getKeyboardSettings() {
-        return Object.assign({}, this._keyboardSettings);
+        return Object.assign({}, this.state.keyboardSettings);
     }
-    /**
-     * A initialise function for nrrd_tools
-     */
-    init() {
-        this.protectedData.mainAreaContainer.classList.add("copper3D_drawingCanvasContainer");
-        this.container.appendChild(this.protectedData.mainAreaContainer);
-        autoFocusDiv(this.container);
-        this.setShowInMainArea();
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 5. Public API — View Control (drag, zoom, pan, slice navigation)
+    // ═══════════════════════════════════════════════════════════════════════════
+    drag(opts) {
+        this.dragOperator.drag(opts);
     }
     /**
-     *
-     * entry function
-     *   * {
-     *    x:slice,
-     *    y:slice,
-     *    z:slice
-     * }
-     *
-     * @param allSlices - all nrrd contrast slices
-   
+     * Core drawing entry point.
      */
-    setAllSlices(allSlices) {
-        this.protectedData.allSlicesArray = [...allSlices];
-        const randomSlice = this.protectedData.allSlicesArray[0];
-        this.nrrd_states.nrrd_x_mm = randomSlice.z.canvas.width;
-        this.nrrd_states.nrrd_y_mm = randomSlice.z.canvas.height;
-        this.nrrd_states.nrrd_z_mm = randomSlice.x.canvas.width;
-        this.nrrd_states.nrrd_x_pixel = randomSlice.x.volume.dimensions[0];
-        this.nrrd_states.nrrd_y_pixel = randomSlice.x.volume.dimensions[1];
-        this.nrrd_states.nrrd_z_pixel = randomSlice.x.volume.dimensions[2];
-        this.nrrd_states.voxelSpacing = randomSlice.x.volume.spacing;
-        this.nrrd_states.ratios.x = randomSlice.x.volume.spacing[0];
-        this.nrrd_states.ratios.y = randomSlice.x.volume.spacing[1];
-        this.nrrd_states.ratios.z = randomSlice.x.volume.spacing[2];
-        this.nrrd_states.dimensions = randomSlice.x.volume.dimensions;
-        // Phase 2 Day 9: Re-initialize MaskVolume with real NRRD dimensions.
-        // This replaces the 1×1×1 placeholders from CommToolsData constructor
-        // and "turns on" all Day 7/8 volume read/write paths.
-        // Invalidate reusable buffer from previous dataset
-        this.invalidateSliceBuffer();
-        const [vw, vh, vd] = this.nrrd_states.dimensions;
-        this.protectedData.maskData.volumes = this.nrrd_states.layers.reduce((acc, id) => {
-            acc[id] = new MaskVolume(vw, vh, vd, 1);
-            return acc;
-        }, {});
-        this.nrrd_states.spaceOrigin = randomSlice.x.volume.header.space_origin.map((item) => {
-            return item * 1;
-        });
-        this.protectedData.allSlicesArray.forEach((item, index) => {
-            item.x.contrastOrder = index;
-            item.y.contrastOrder = index;
-            item.z.contrastOrder = index;
-        });
-        // Phase 3: initPaintImages removed (MaskVolume initialized separately)
-        // this.initPaintImages(this.nrrd_states.dimensions);
-        // init displayslices array, the axis default is "z"
-        this.setDisplaySlicesBaseOnAxis();
-        this.afterLoadSlice();
-    }
-    loadingMaskByLayer(masks, index, imageData) {
-        let imageDataLable = this.protectedData.ctxes.emptyCtx.createImageData(this.nrrd_states.nrrd_x_pixel, this.nrrd_states.nrrd_y_pixel);
-        this.setEmptyCanvasSize();
-        for (let j = 0; j < masks[index].data.length; j++) {
-            imageDataLable.data[j] = masks[index].data[j];
-            imageData.data[j] += masks[index].data[j];
-        }
-        return imageDataLable;
-    }
-    // need to remove
-    setMasksData(masksData, loadingBar) {
-        if (!!masksData) {
-            this.nrrd_states.loadMaskJson = true;
-            if (loadingBar) {
-                let { loadingContainer, progress } = loadingBar;
-                loadingContainer.style.display = "flex";
-                progress.innerText = "Loading masks data......";
-            }
-            this.setEmptyCanvasSize();
-            const len = masksData["layer1"].length;
-            for (let i = 0; i < len; i++) {
-                let imageData = this.protectedData.ctxes.emptyCtx.createImageData(this.nrrd_states.nrrd_x_pixel, this.nrrd_states.nrrd_y_pixel);
-                let imageDataLayer1, imageDataLayer2, imageDataLayer3;
-                if (masksData["layer1"][i].data.length > 0) {
-                    this.setEmptyCanvasSize();
-                    imageDataLayer1 = this.loadingMaskByLayer(masksData["layer1"], i, imageData);
-                    this.protectedData.ctxes.emptyCtx.putImageData(imageDataLayer1, 0, 0);
-                    this.storeEachLayerImage(i, "layer1");
-                }
-                if (masksData["layer2"][i].data.length > 0) {
-                    this.setEmptyCanvasSize();
-                    imageDataLayer2 = this.loadingMaskByLayer(masksData["layer2"], i, imageData);
-                    this.protectedData.ctxes.emptyCtx.putImageData(imageDataLayer2, 0, 0);
-                    this.storeEachLayerImage(i, "layer2");
-                }
-                if (masksData["layer3"][i].data.length > 0) {
-                    this.setEmptyCanvasSize();
-                    imageDataLayer3 = this.loadingMaskByLayer(masksData["layer3"], i, imageData);
-                    this.protectedData.ctxes.emptyCtx.putImageData(imageDataLayer3, 0, 0);
-                    this.storeEachLayerImage(i, "layer3");
-                }
-                this.setEmptyCanvasSize();
-                this.protectedData.ctxes.emptyCtx.putImageData(imageData, 0, 0);
-                this.storeAllImages(i, "default");
-            }
-            this.nrrd_states.loadMaskJson = false;
-            this.gui_states.resetZoom();
-            if (loadingBar) {
-                loadingBar.loadingContainer.style.display = "none";
-            }
-        }
+    draw(opts) {
+        this.drawCore.draw(opts);
     }
     /**
-     * Load raw voxel data into MaskVolume layers.
-     *
-     * Expects pre-extracted voxel bytes (e.g. from useNiftiVoxelData).
-     *
-     * @param layerVoxels Map of layer ID to raw voxel Uint8Array
-     *   Keys should be 'layer1', 'layer2', 'layer3'
-     * @param loadingBar Optional loading bar UI
+     * Set the Draw Display Canvas base size
      */
-    setMasksFromNIfTI(layerVoxels, loadingBar) {
-        if (!layerVoxels || layerVoxels.size === 0)
-            return;
-        if (loadingBar) {
-            loadingBar.loadingContainer.style.display = "flex";
-            loadingBar.progress.innerText = "Loading mask layers from NIfTI...";
-        }
-        try {
-            for (const [layerId, rawData] of layerVoxels) {
-                const volume = this.protectedData.maskData.volumes[layerId];
-                if (!volume) {
-                    console.warn(`setMasksFromNIfTI: unknown layer "${layerId}", skipping`);
-                    continue;
-                }
-                const expectedLen = volume.getRawData().length;
-                // Ensure we copy exactly the right number of bytes
-                if (rawData.length >= expectedLen) {
-                    volume.setRawData(rawData.slice(0, expectedLen));
-                }
-                else {
-                    const padded = new Uint8Array(expectedLen);
-                    padded.set(rawData);
-                    volume.setRawData(padded);
-                }
-            }
-            // Reload the current slice from MaskVolume to canvas
-            this.reloadMasksFromVolume();
-            this.gui_states.resetZoom();
+    setBaseDrawDisplayCanvasesSize(size) {
+        if (size > 8) {
+            this.state.baseCanvasesSize = 8;
         }
-        catch (error) {
-            console.error("Error loading NIfTI masks:", error);
+        else if (size < 1 || typeof size !== "number") {
+            this.state.baseCanvasesSize = 1;
         }
-        finally {
-            if (loadingBar) {
-                loadingBar.loadingContainer.style.display = "none";
-            }
+        else {
+            this.state.baseCanvasesSize = size;
         }
     }
-    setShowInMainArea() {
-        this.nrrd_states.showContrast = true;
-    }
-    getCurrentImageDimension() {
-        return this.nrrd_states.dimensions;
-    }
-    getVoxelSpacing() {
-        return this.nrrd_states.voxelSpacing;
+    setDisplaySliceIndexPanel(panel) {
+        this.dragOperator.setShowDragNumberDiv(panel);
     }
-    getSpaceOrigin() {
-        return this.nrrd_states.spaceOrigin;
+    enableContrastDragEvents(callback) {
+        this.drawCore.setupConrastEvents(callback);
     }
-    getMaskData() {
-        return this.protectedData.maskData;
+    setEraserUrls(urls) {
+        this.drawCore.setEraserUrls(urls);
     }
-    // set calculate distance sphere position
-    setCalculateDistanceSphere(x, y, sliceIndex, cal_position) {
-        this.nrrd_states.sphereRadius = 5;
-        // move to tumour slice
-        const steps = sliceIndex - this.nrrd_states.currentIndex;
-        this.setSliceMoving(steps * this.protectedData.displaySlices.length);
-        // mock mouse down
-        // if user zoom the panel, we need to consider the size factor 
-        this.drawCalSphereDown(x * this.nrrd_states.sizeFoctor, y * this.nrrd_states.sizeFoctor, sliceIndex, cal_position);
-        // mock mouse up
-        this.drawCalSphereUp();
+    setPencilIconUrls(urls) {
+        this.drawCore.setPencilIconUrls(urls);
     }
     /**
      * Switch all contrast slices' orientation
-     * @param {string} aixs:"x" | "y" | "z"
-     *  */
+     */
     setSliceOrientation(axisTo) {
         var _a;
         let convetObj;
-        if (((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isCrosshairEnabled()) || this.gui_states.sphere) {
-            if (this.protectedData.axis === "z") {
-                this.cursorPage.z.index = this.nrrd_states.currentIndex;
-                this.cursorPage.z.cursorPageX = this.nrrd_states.cursorPageX;
-                this.cursorPage.z.cursorPageY = this.nrrd_states.cursorPageY;
+        if (((_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.isCrosshairEnabled()) || this.state.gui_states.mode.sphere) {
+            if (this.state.protectedData.axis === "z") {
+                this.state.cursorPage.z.index = this.state.nrrd_states.view.currentSliceIndex;
+                this.state.cursorPage.z.cursorPageX = this.state.nrrd_states.interaction.cursorPageX;
+                this.state.cursorPage.z.cursorPageY = this.state.nrrd_states.interaction.cursorPageY;
             }
-            else if (this.protectedData.axis === "x") {
-                this.cursorPage.x.index = this.nrrd_states.currentIndex;
-                this.cursorPage.x.cursorPageX = this.nrrd_states.cursorPageX;
-                this.cursorPage.x.cursorPageY = this.nrrd_states.cursorPageY;
+            else if (this.state.protectedData.axis === "x") {
+                this.state.cursorPage.x.index = this.state.nrrd_states.view.currentSliceIndex;
+                this.state.cursorPage.x.cursorPageX = this.state.nrrd_states.interaction.cursorPageX;
+                this.state.cursorPage.x.cursorPageY = this.state.nrrd_states.interaction.cursorPageY;
             }
-            else if (this.protectedData.axis === "y") {
-                this.cursorPage.y.index = this.nrrd_states.currentIndex;
-                this.cursorPage.y.cursorPageX = this.nrrd_states.cursorPageX;
-                this.cursorPage.y.cursorPageY = this.nrrd_states.cursorPageY;
+            else if (this.state.protectedData.axis === "y") {
+                this.state.cursorPage.y.index = this.state.nrrd_states.view.currentSliceIndex;
+                this.state.cursorPage.y.cursorPageX = this.state.nrrd_states.interaction.cursorPageX;
+                this.state.cursorPage.y.cursorPageY = this.state.nrrd_states.interaction.cursorPageY;
             }
             if (axisTo === "z") {
-                if (this.nrrd_states.isCursorSelect && !this.cursorPage.z.updated) {
-                    if (this.protectedData.axis === "x") {
-                        // convert x to z
-                        convetObj = this.convertCursorPoint("x", "z", this.cursorPage.x.cursorPageX, this.cursorPage.x.cursorPageY, this.cursorPage.x.index);
+                if (this.state.nrrd_states.interaction.isCursorSelect && !this.state.cursorPage.z.updated) {
+                    if (this.state.protectedData.axis === "x") {
+                        convetObj = this.drawCore.convertCursorPoint("x", "z", this.state.cursorPage.x.cursorPageX, this.state.cursorPage.x.cursorPageY, this.state.cursorPage.x.index);
                     }
-                    if (this.protectedData.axis === "y") {
-                        // convert y to z
-                        convetObj = this.convertCursorPoint("y", "z", this.cursorPage.y.cursorPageX, this.cursorPage.y.cursorPageY, this.cursorPage.y.index);
+                    if (this.state.protectedData.axis === "y") {
+                        convetObj = this.drawCore.convertCursorPoint("y", "z", this.state.cursorPage.y.cursorPageX, this.state.cursorPage.y.cursorPageY, this.state.cursorPage.y.index);
                     }
                 }
                 else {
-                    // not cursor select, freedom to switch x -> z or y -> z and z -> x or z -> y
-                    this.nrrd_states.currentIndex = this.cursorPage.z.index;
-                    this.nrrd_states.oldIndex =
-                        this.cursorPage.z.index * this.nrrd_states.ratios.z;
-                    this.nrrd_states.cursorPageX = this.cursorPage.z.cursorPageX;
-                    this.nrrd_states.cursorPageY = this.cursorPage.z.cursorPageY;
+                    this.state.nrrd_states.view.currentSliceIndex = this.state.cursorPage.z.index;
+                    this.state.nrrd_states.view.preSliceIndex =
+                        this.state.cursorPage.z.index * this.state.nrrd_states.image.ratios.z;
+                    this.state.nrrd_states.interaction.cursorPageX = this.state.cursorPage.z.cursorPageX;
+                    this.state.nrrd_states.interaction.cursorPageY = this.state.cursorPage.z.cursorPageY;
                 }
             }
             else if (axisTo === "x") {
-                if (this.nrrd_states.isCursorSelect && !this.cursorPage.x.updated) {
-                    if (this.protectedData.axis === "z") {
-                        // convert z to x
-                        convetObj = this.convertCursorPoint("z", "x", this.cursorPage.z.cursorPageX, this.cursorPage.z.cursorPageY, this.cursorPage.z.index);
+                if (this.state.nrrd_states.interaction.isCursorSelect && !this.state.cursorPage.x.updated) {
+                    if (this.state.protectedData.axis === "z") {
+                        convetObj = this.drawCore.convertCursorPoint("z", "x", this.state.cursorPage.z.cursorPageX, this.state.cursorPage.z.cursorPageY, this.state.cursorPage.z.index);
                     }
-                    if (this.protectedData.axis === "y") {
-                        // convert y to x
-                        convetObj = this.convertCursorPoint("y", "x", this.cursorPage.y.cursorPageX, this.cursorPage.y.cursorPageY, this.cursorPage.y.index);
+                    if (this.state.protectedData.axis === "y") {
+                        convetObj = this.drawCore.convertCursorPoint("y", "x", this.state.cursorPage.y.cursorPageX, this.state.cursorPage.y.cursorPageY, this.state.cursorPage.y.index);
                     }
                 }
                 else {
-                    // not cursor select, freedom to switch z -> x or y -> x and x -> z or x -> y
-                    this.nrrd_states.currentIndex = this.cursorPage.x.index;
-                    this.nrrd_states.oldIndex =
-                        this.cursorPage.x.index * this.nrrd_states.ratios.x;
-                    this.nrrd_states.cursorPageX = this.cursorPage.x.cursorPageX;
-                    this.nrrd_states.cursorPageY = this.cursorPage.x.cursorPageY;
+                    this.state.nrrd_states.view.currentSliceIndex = this.state.cursorPage.x.index;
+                    this.state.nrrd_states.view.preSliceIndex =
+                        this.state.cursorPage.x.index * this.state.nrrd_states.image.ratios.x;
+                    this.state.nrrd_states.interaction.cursorPageX = this.state.cursorPage.x.cursorPageX;
+                    this.state.nrrd_states.interaction.cursorPageY = this.state.cursorPage.x.cursorPageY;
                 }
             }
             else if (axisTo === "y") {
-                if (this.nrrd_states.isCursorSelect && !this.cursorPage.y.updated) {
-                    if (this.protectedData.axis === "z") {
-                        // convert z to y
-                        convetObj = this.convertCursorPoint("z", "y", this.cursorPage.z.cursorPageX, this.cursorPage.z.cursorPageY, this.cursorPage.z.index);
+                if (this.state.nrrd_states.interaction.isCursorSelect && !this.state.cursorPage.y.updated) {
+                    if (this.state.protectedData.axis === "z") {
+                        convetObj = this.drawCore.convertCursorPoint("z", "y", this.state.cursorPage.z.cursorPageX, this.state.cursorPage.z.cursorPageY, this.state.cursorPage.z.index);
                     }
-                    if (this.protectedData.axis === "x") {
-                        // convert x to y
-                        convetObj = this.convertCursorPoint("x", "y", this.cursorPage.x.cursorPageX, this.cursorPage.x.cursorPageY, this.cursorPage.x.index);
+                    if (this.state.protectedData.axis === "x") {
+                        convetObj = this.drawCore.convertCursorPoint("x", "y", this.state.cursorPage.x.cursorPageX, this.state.cursorPage.x.cursorPageY, this.state.cursorPage.x.index);
                     }
                 }
                 else {
-                    // not cursor select, freedom to switch z -> y or x -> y and y -> z or y -> x
-                    this.nrrd_states.currentIndex = this.cursorPage.y.index;
-                    this.nrrd_states.oldIndex =
-                        this.cursorPage.y.index * this.nrrd_states.ratios.y;
-                    this.nrrd_states.cursorPageX = this.cursorPage.y.cursorPageX;
-                    this.nrrd_states.cursorPageY = this.cursorPage.y.cursorPageY;
+                    this.state.nrrd_states.view.currentSliceIndex = this.state.cursorPage.y.index;
+                    this.state.nrrd_states.view.preSliceIndex =
+                        this.state.cursorPage.y.index * this.state.nrrd_states.image.ratios.y;
+                    this.state.nrrd_states.interaction.cursorPageX = this.state.cursorPage.y.cursorPageX;
+                    this.state.nrrd_states.interaction.cursorPageY = this.state.cursorPage.y.cursorPageY;
                 }
             }
             if (convetObj) {
-                // update convert cursor point, when cursor select
-                this.nrrd_states.currentIndex = convetObj.currentIndex;
-                this.nrrd_states.oldIndex = convetObj.oldIndex;
-                this.nrrd_states.cursorPageX = convetObj.convertCursorNumX;
-                this.nrrd_states.cursorPageY = convetObj.convertCursorNumY;
+                this.state.nrrd_states.view.currentSliceIndex = convetObj.currentNewSliceIndex;
+                this.state.nrrd_states.view.preSliceIndex = convetObj.preSliceIndex;
+                this.state.nrrd_states.interaction.cursorPageX = convetObj.convertCursorNumX;
+                this.state.nrrd_states.interaction.cursorPageY = convetObj.convertCursorNumY;
                 convetObj = undefined;
                 switch (axisTo) {
                     case "x":
-                        this.cursorPage.x.updated = true;
+                        this.state.cursorPage.x.updated = true;
                         break;
                     case "y":
-                        this.cursorPage.y.updated = true;
+                        this.state.cursorPage.y.updated = true;
                         break;
                     case "z":
-                        this.cursorPage.z.updated = true;
+                        this.state.cursorPage.z.updated = true;
                         break;
                 }
             }
-            if (this.cursorPage.x.updated &&
-                this.cursorPage.y.updated &&
-                this.cursorPage.z.updated) {
-                // one point convert to all axis, reset all updated status
-                this.nrrd_states.isCursorSelect = false;
+            if (this.state.cursorPage.x.updated &&
+                this.state.cursorPage.y.updated &&
+                this.state.cursorPage.z.updated) {
+                this.state.nrrd_states.interaction.isCursorSelect = false;
             }
         }
-        this.protectedData.axis = axisTo;
-        this.resetDisplaySlicesStatus();
-        // for sphere plan a
-        if (this.gui_states.sphere && !this.nrrd_states.spherePlanB) {
-            this.drawSphere(this.nrrd_states.sphereOrigin[axisTo][0] * this.nrrd_states.sizeFoctor, this.nrrd_states.sphereOrigin[axisTo][1] * this.nrrd_states.sizeFoctor, this.nrrd_states.sphereRadius);
-        }
+        this.state.protectedData.axis = axisTo;
+        this.sliceRenderPipeline.resetDisplaySlicesStatus();
     }
     addSkip(index) {
-        this.protectedData.skipSlicesDic[index] =
-            this.protectedData.backUpDisplaySlices[index];
-        if (index >= this.protectedData.displaySlices.length) {
-            this.nrrd_states.contrastNum = this.protectedData.displaySlices.length;
+        this.state.protectedData.skipSlicesDic[index] =
+            this.state.protectedData.backUpDisplaySlices[index];
+        if (index >= this.state.protectedData.displaySlices.length) {
+            this.state.nrrd_states.view.contrastNum = this.state.protectedData.displaySlices.length;
         }
         else {
-            this.nrrd_states.contrastNum = index;
+            this.state.nrrd_states.view.contrastNum = index;
         }
-        this.resetDisplaySlicesStatus();
+        this.sliceRenderPipeline.resetDisplaySlicesStatus();
     }
     removeSkip(index) {
-        this.protectedData.skipSlicesDic[index] = undefined;
-        this.nrrd_states.contrastNum = 0;
-        this.resetDisplaySlicesStatus();
-    }
-    clear() {
-        // To effectively reduce the js memory garbage
-        this.protectedData.allSlicesArray.length = 0;
-        this.protectedData.displaySlices.length = 0;
-        // Phase 6: Clear all undo/redo stacks
-        this.undoManager.clearAll();
-        // Phase 3: Reset MaskVolume storage to 1×1×1 placeholders
-        this.protectedData.maskData.volumes = this.nrrd_states.layers.reduce((acc, id) => {
-            acc[id] = new MaskVolume(1, 1, 1, 1);
-            return acc;
-        }, {});
-        // Invalidate reusable slice buffer
-        this.invalidateSliceBuffer();
-        this.clearDictionary(this.protectedData.skipSlicesDic);
-        // this.nrrd_states.previousPanelL = this.nrrd_states.previousPanelT = -99999;
-        this.protectedData.canvases.displayCanvas.style.left =
-            this.protectedData.canvases.drawingCanvas.style.left = "";
-        this.protectedData.canvases.displayCanvas.style.top =
-            this.protectedData.canvases.drawingCanvas.style.top = "";
-        this.protectedData.backUpDisplaySlices.length = 0;
-        this.protectedData.mainPreSlices = undefined;
-        this.protectedData.currentShowingSlice = undefined;
-        this.protectedData.previousDrawingImage =
-            this.protectedData.ctxes.emptyCtx.createImageData(1, 1);
-        this.initState = true;
-        this.protectedData.axis = "z";
-        this.nrrd_states.sizeFoctor = this.baseCanvasesSize;
-        this.gui_states.mainAreaSize = this.baseCanvasesSize;
-        this.resetLayerCanvas();
-        this.protectedData.canvases.drawingCanvas.width =
-            this.protectedData.canvases.drawingCanvas.width;
-        this.protectedData.canvases.displayCanvas.width =
-            this.protectedData.canvases.displayCanvas.width;
-        this.nrrd_states.tumourSphereOrigin = null;
-        this.nrrd_states.ribSphereOrigin = null;
-        this.nrrd_states.skinSphereOrigin = null;
-        this.nrrd_states.nippleSphereOrigin = null;
+        this.state.protectedData.skipSlicesDic[index] = undefined;
+        this.state.nrrd_states.view.contrastNum = 0;
+        this.sliceRenderPipeline.resetDisplaySlicesStatus();
     }
     setSliceMoving(step) {
-        if (this.protectedData.mainPreSlices) {
-            // Accumulate steps so no keydown events are lost
+        if (this.state.protectedData.mainPreSlices) {
             this._pendingSliceStep += step;
-            // RAF throttle: render at most once per frame, but apply ALL accumulated steps
             if (this._sliceRAFId !== null)
                 return;
             this._sliceRAFId = requestAnimationFrame(() => {
                 this._sliceRAFId = null;
                 const totalStep = this._pendingSliceStep;
                 this._pendingSliceStep = 0;
-                this.protectedData.Is_Draw = true;
+                this.state.protectedData.isDrawing = true;
                 this.setSyncsliceNum();
                 this.dragOperator.updateIndex(totalStep);
                 this.setIsDrawFalse(1000);
@@ -872,423 +573,233 @@ export class NrrdTools extends DrawToolCore {
         }
     }
     setMainAreaSize(factor) {
-        this.nrrd_states.sizeFoctor = factor;
-        if (this.nrrd_states.sizeFoctor >= 8) {
-            this.nrrd_states.sizeFoctor = 8;
+        this.state.nrrd_states.view.sizeFactor = factor;
+        if (this.state.nrrd_states.view.sizeFactor >= 8) {
+            this.state.nrrd_states.view.sizeFactor = 8;
         }
-        else if (this.nrrd_states.sizeFoctor <= 1) {
-            this.nrrd_states.sizeFoctor = 1;
+        else if (this.state.nrrd_states.view.sizeFactor <= 1) {
+            this.state.nrrd_states.view.sizeFactor = 1;
         }
-        this.resizePaintArea(this.nrrd_states.sizeFoctor);
+        this.resizePaintArea(this.state.nrrd_states.view.sizeFactor);
         this.resetPaintAreaUIPosition();
-        // this.setIsDrawFalse(1000);
+    }
+    switchAllSlicesArrayData(allSlices) {
+        this.state.protectedData.allSlicesArray.length = 0;
+        this.state.protectedData.allSlicesArray = [...allSlices];
+        this.sliceRenderPipeline.resetDisplaySlicesStatus();
+    }
+    appendLoadingbar(loadingbar) {
+        this.state.protectedData.mainAreaContainer.appendChild(loadingbar);
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 6. Public API — Data Getters
+    // ═══════════════════════════════════════════════════════════════════════════
+    getCurrentImageDimension() {
+        return this.state.nrrd_states.image.dimensions;
+    }
+    getVoxelSpacing() {
+        return this.state.nrrd_states.image.voxelSpacing;
+    }
+    getSpaceOrigin() {
+        return this.state.nrrd_states.image.spaceOrigin;
+    }
+    getMaskData() {
+        return this.state.protectedData.maskData;
     }
     getContainer() {
-        return this.protectedData.mainAreaContainer;
+        return this.state.protectedData.mainAreaContainer;
     }
     getDrawingCanvas() {
-        return this.protectedData.canvases.drawingCanvas;
+        return this.state.protectedData.canvases.drawingCanvas;
     }
     getNrrdToolsSettings() {
-        return this.nrrd_states;
+        return this.state.nrrd_states;
     }
     getMaxSliceNum() {
-        if (this.nrrd_states.showContrast) {
+        if (this.state.nrrd_states.view.showContrast) {
             return [
-                this.nrrd_states.maxIndex,
-                this.nrrd_states.maxIndex * this.protectedData.displaySlices.length,
+                this.state.nrrd_states.view.maxIndex,
+                this.state.nrrd_states.view.maxIndex * this.state.protectedData.displaySlices.length,
             ];
         }
         else {
-            return [this.nrrd_states.maxIndex];
+            return [this.state.nrrd_states.view.maxIndex];
         }
     }
     getCurrentSlicesNumAndContrastNum() {
         return {
-            currentIndex: this.nrrd_states.currentIndex,
-            contrastIndex: this.nrrd_states.contrastNum,
+            currentSliceIndex: this.state.nrrd_states.view.currentSliceIndex,
+            contrastIndex: this.state.nrrd_states.view.contrastNum,
         };
     }
     getCurrentSliceIndex() {
-        return Math.ceil(this.protectedData.mainPreSlices.index / this.nrrd_states.RSARatio);
+        return Math.ceil(this.state.protectedData.mainPreSlices.index / this.state.nrrd_states.image.RSARatio);
     }
     getIsShowContrastState() {
-        return this.nrrd_states.showContrast;
-    }
-    /**
-     * Give a delay time to finish the last drawing before upcoming interrupt opreations.
-     * Give a delay time number (ms) to disable the draw function,
-     * After your interrupt opeartion, you should enable the draw fucntion.
-     * @param target number
-     */
-    setIsDrawFalse(target) {
-        this.preTimer = setTimeout(() => {
-            this.protectedData.Is_Draw = false;
-            if (this.preTimer) {
-                window.clearTimeout(this.preTimer);
-                this.preTimer = undefined;
-            }
-        }, target);
-    }
-    setDisplaySlicesBaseOnAxis() {
-        this.protectedData.displaySlices.length = 0;
-        this.protectedData.backUpDisplaySlices.length = 0;
-        this.protectedData.allSlicesArray.forEach((slices) => {
-            this.protectedData.backUpDisplaySlices.push(slices[this.protectedData.axis]);
-        });
-        this.loadDisplaySlicesArray();
-    }
-    loadDisplaySlicesArray() {
-        const remainSlices = Object.values(this.protectedData.skipSlicesDic);
-        if (remainSlices.length === 0) {
-            // load all display slices
-            this.protectedData.backUpDisplaySlices.forEach((slice, index) => {
-                this.protectedData.skipSlicesDic[index] = slice;
-                this.protectedData.displaySlices.push(slice);
-            });
-        }
-        else {
-            remainSlices.forEach((slice, index) => {
-                if (!!slice) {
-                    this.protectedData.displaySlices.push(this.protectedData.backUpDisplaySlices[index]);
-                    this.protectedData.skipSlicesDic[index] =
-                        this.protectedData.backUpDisplaySlices[index];
-                }
-            });
-        }
-    }
-    switchAllSlicesArrayData(allSlices) {
-        this.protectedData.allSlicesArray.length = 0;
-        this.protectedData.allSlicesArray = [...allSlices];
-        this.resetDisplaySlicesStatus();
-    }
-    resetDisplaySlicesStatus() {
-        // reload slice data
-        this.setDisplaySlicesBaseOnAxis();
-        // reset canvas attribute for drag and draw
-        this.setupConfigs();
-    }
-    setupConfigs() {
-        // reset main slice
-        this.setMainPreSlice();
-        // update the max index for drag and slider
-        this.updateMaxIndex();
-        // reset origin canvas and the nrrd_states origin Width/height
-        // reset the current index
-        // (also calls resizePaintArea → reloads masks, resizes canvases)
-        this.setOriginCanvasAndPre();
-        // update the show number div on top area
-        this.dragOperator.updateShowNumDiv(this.nrrd_states.contrastNum);
-        // repaint all contrast images
-        this.repraintCurrentContrastSlice();
-        // Refresh display after contrast repaint (no need for full resizePaintArea
-        // since canvases were already resized in setOriginCanvasAndPre above)
-        this.redrawDisplayCanvas();
-        this.compositeAllLayers();
-    }
-    setMainPreSlice() {
-        this.protectedData.mainPreSlices = this.protectedData.displaySlices[0];
-        if (this.protectedData.mainPreSlices) {
-            this.nrrd_states.RSARatio = this.protectedData.mainPreSlices.RSARatio;
-        }
-    }
-    setOriginCanvasAndPre() {
-        if (this.protectedData.mainPreSlices) {
-            if (this.nrrd_states.oldIndex > this.nrrd_states.maxIndex)
-                this.nrrd_states.oldIndex = this.nrrd_states.maxIndex;
-            if (this.initState) {
-                this.nrrd_states.oldIndex =
-                    this.protectedData.mainPreSlices.initIndex *
-                        this.nrrd_states.RSARatio;
-                this.nrrd_states.currentIndex =
-                    this.protectedData.mainPreSlices.initIndex;
-            }
-            else {
-                // !need to change
-                // todo
-                this.protectedData.mainPreSlices.index = this.nrrd_states.oldIndex;
-            }
-            this.protectedData.canvases.originCanvas =
-                this.protectedData.mainPreSlices.canvas;
-            this.updateOriginAndChangedWH();
-        }
-    }
-    afterLoadSlice() {
-        this.setMainPreSlice();
-        this.setOriginCanvasAndPre();
-        this.protectedData.currentShowingSlice = this.protectedData.mainPreSlices;
-        this.nrrd_states.oldIndex =
-            this.protectedData.mainPreSlices.initIndex * this.nrrd_states.RSARatio;
-        this.nrrd_states.currentIndex = this.protectedData.mainPreSlices.initIndex;
-        // Phase 6: Reset undo/redo stacks on new dataset load
-        this.undoManager.clearAll();
-        // compute max index
-        this.updateMaxIndex();
-        this.dragOperator.updateShowNumDiv(this.nrrd_states.contrastNum);
-        this.initState = false;
-    }
-    updateMaxIndex() {
-        if (this.protectedData.mainPreSlices) {
-            this.nrrd_states.maxIndex = this.protectedData.mainPreSlices.MaxIndex;
-        }
-    }
-    /**
-     * Update the original canvas size, allow set to threejs load one (pixel distance not the mm).
-     * Then update the changedWidth and changedHeight based on the sizeFoctor.
-     */
-    updateOriginAndChangedWH() {
-        this.nrrd_states.originWidth =
-            this.protectedData.canvases.originCanvas.width;
-        this.nrrd_states.originHeight =
-            this.protectedData.canvases.originCanvas.height;
-        // Let resizePaintArea be the sole setter of changedWidth/changedHeight.
-        // Setting them here would defeat the sizeChanged detection in resizePaintArea,
-        // causing canvas elements to keep stale dimensions after axis switches.
-        this.resizePaintArea(this.nrrd_states.sizeFoctor);
-        this.resetPaintAreaUIPosition();
-    }
-    /**
-     * Keep all contrast slice index to same.
-     * Synchronize the slice indexes of all the contrasts so that they are consistent with the main slice's index.
-     */
-    setSyncsliceNum() {
-        this.protectedData.displaySlices.forEach((slice, index) => {
-            if (index !== 0) {
-                slice.index = this.protectedData.mainPreSlices.index;
-            }
-        });
-    }
-    appendLoadingbar(loadingbar) {
-        this.protectedData.mainAreaContainer.appendChild(loadingbar);
-    }
-    clearStoreImages() {
-        // Phase 3 Task 3.1: Only clear the active layer's MaskVolume
-        if (this.nrrd_states.dimensions.length === 3) {
-            const [w, h, d] = this.nrrd_states.dimensions;
-            const activeLayer = this.gui_states.layer;
-            // Re-init only the active layer's MaskVolume
-            this.protectedData.maskData.volumes[activeLayer] = new MaskVolume(w, h, d, 1);
-            // Phase 6 Task 6.6: Clear undo/redo stack for this layer (volume too large to snapshot)
-            this.undoManager.clearLayer(activeLayer);
-            // Phase 3 Task 3.2: Notify external that this layer's volume was cleared
-            this.nrrd_states.onClearLayerVolume(activeLayer);
+        return this.state.nrrd_states.view.showContrast;
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 7. Delegated — LayerChannelManager
+    // ═══════════════════════════════════════════════════════════════════════════
+    setActiveLayer(layerId) { this.layerChannelManager.setActiveLayer(layerId); }
+    getActiveLayer() { return this.layerChannelManager.getActiveLayer(); }
+    setActiveChannel(channel) { this.layerChannelManager.setActiveChannel(channel); }
+    getActiveChannel() { return this.layerChannelManager.getActiveChannel(); }
+    setActiveSphereType(type) { this.layerChannelManager.setActiveSphereType(type); }
+    getActiveSphereType() { return this.layerChannelManager.getActiveSphereType(); }
+    setLayerVisible(layerId, visible) { this.layerChannelManager.setLayerVisible(layerId, visible); }
+    isLayerVisible(layerId) { return this.layerChannelManager.isLayerVisible(layerId); }
+    setChannelVisible(layerId, channel, visible) { this.layerChannelManager.setChannelVisible(layerId, channel, visible); }
+    isChannelVisible(layerId, channel) { return this.layerChannelManager.isChannelVisible(layerId, channel); }
+    getLayerVisibility() { return this.layerChannelManager.getLayerVisibility(); }
+    getChannelVisibility() { return this.layerChannelManager.getChannelVisibility(); }
+    hasLayerData(layerId) { return this.layerChannelManager.hasLayerData(layerId); }
+    setChannelColor(layerId, channel, color) { this.layerChannelManager.setChannelColor(layerId, channel, color); }
+    getChannelColor(layerId, channel) { return this.layerChannelManager.getChannelColor(layerId, channel); }
+    getChannelHexColor(layerId, channel) { return this.layerChannelManager.getChannelHexColor(layerId, channel); }
+    getChannelCssColor(layerId, channel) { return this.layerChannelManager.getChannelCssColor(layerId, channel); }
+    setChannelColors(layerId, colorMap) { this.layerChannelManager.setChannelColors(layerId, colorMap); }
+    setAllLayersChannelColor(channel, color) { this.layerChannelManager.setAllLayersChannelColor(channel, color); }
+    resetChannelColors(layerId, channel) { this.layerChannelManager.resetChannelColors(layerId, channel); }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 8. Delegated — SliceRenderPipeline
+    // ═══════════════════════════════════════════════════════════════════════════
+    updateOriginAndChangedWH() { this.sliceRenderPipeline.updateOriginAndChangedWH(); }
+    setSyncsliceNum() { this.sliceRenderPipeline.setSyncsliceNum(); }
+    resetPaintAreaUIPosition(l, t) { this.sliceRenderPipeline.resetPaintAreaUIPosition(l, t); }
+    resetLayerCanvas() { this.sliceRenderPipeline.resetLayerCanvas(); }
+    redrawMianPreOnDisplayCanvas() { this.sliceRenderPipeline.redrawMianPreOnDisplayCanvas(); }
+    resizePaintArea(factor) { this.sliceRenderPipeline.resizePaintArea(factor); }
+    flipDisplayImageByAxis() { this.sliceRenderPipeline.flipDisplayImageByAxis(); }
+    setEmptyCanvasSize(axis) { this.sliceRenderPipeline.setEmptyCanvasSize(axis); }
+    redrawDisplayCanvas() { this.sliceRenderPipeline.redrawDisplayCanvas(); }
+    reloadMasksFromVolume() { this.sliceRenderPipeline.reloadMasksFromVolume(); }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 9. Delegated — DataLoader
+    // ═══════════════════════════════════════════════════════════════════════════
+    setAllSlices(allSlices) { this.dataLoader.setAllSlices(allSlices); }
+    setMasksData(masksData, loadingBar) { this.dataLoader.setMasksData(masksData, loadingBar); }
+    setMasksFromNIfTI(layerVoxels, loadingBar) { this.dataLoader.setMasksFromNIfTI(layerVoxels, loadingBar); }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 10. Sphere Orchestration
+    // ═══════════════════════════════════════════════════════════════════════════
+    setCalculateDistanceSphere(x, y, sliceIndex, cal_position) {
+        this.state.nrrd_states.sphere.sphereRadius = 5;
+        const steps = sliceIndex - this.state.nrrd_states.view.currentSliceIndex;
+        this.setSliceMoving(steps * this.state.protectedData.displaySlices.length);
+        const mouseX = x * this.state.nrrd_states.view.sizeFactor;
+        const mouseY = y * this.state.nrrd_states.view.sizeFactor;
+        this.state.nrrd_states.sphere.sphereOrigin[this.state.protectedData.axis] = [
+            mouseX, mouseY, sliceIndex,
+        ];
+        this.drawCore.crosshairTool.setUpSphereOrigins(mouseX, mouseY, sliceIndex);
+        const originCopy = JSON.parse(JSON.stringify(this.state.nrrd_states.sphere.sphereOrigin));
+        switch (cal_position) {
+            case "tumour":
+                this.state.nrrd_states.sphere.tumourSphereOrigin = originCopy;
+                break;
+            case "skin":
+                this.state.nrrd_states.sphere.skinSphereOrigin = originCopy;
+                break;
+            case "nipple":
+                this.state.nrrd_states.sphere.nippleSphereOrigin = originCopy;
+                break;
+            case "ribcage":
+                this.state.nrrd_states.sphere.ribSphereOrigin = originCopy;
+                break;
         }
-        // Invalidate reusable slice buffer
-        this.invalidateSliceBuffer();
-        // Reload all layers to canvas (restores other layers' visuals)
-        this.reloadMasksFromVolume();
+        this.drawCore.drawCalculatorSphere(this.state.nrrd_states.sphere.sphereRadius);
+        this.drawCore.sphereTool.writeAllCalculatorSpheresToVolume();
+        this.drawCore.sphereTool.refreshSphereCanvas();
     }
     /**
-     * Reset the draw and display canvases layout after mouse pan.
-     * If no params in, then center the draw and display canvases.
-     * @param l number, Offset to the left
-     * @param t number, Offset to the top
+     * Refresh sphere canvas from sphereMaskVolume for the current slice/axis.
      */
-    resetPaintAreaUIPosition(l, t) {
-        if (l && t) {
-            this.protectedData.canvases.displayCanvas.style.left =
-                this.protectedData.canvases.drawingCanvas.style.left = l + "px";
-            this.protectedData.canvases.displayCanvas.style.top =
-                this.protectedData.canvases.drawingCanvas.style.top = t + "px";
-        }
-        else {
-            this.protectedData.canvases.displayCanvas.style.left =
-                this.protectedData.canvases.drawingCanvas.style.left = "";
-            this.protectedData.canvases.displayCanvas.style.top =
-                this.protectedData.canvases.drawingCanvas.style.top = "";
-            this.protectedData.mainAreaContainer.style.justifyContent = "center";
-            this.protectedData.mainAreaContainer.style.alignItems = "center";
-        }
+    refreshSphereOverlay() {
+        this.drawCore.refreshSphereOverlay();
     }
     /**
-     * Clear masks on drawingCanvas layers.
+     * Enter sphere mode.
      */
-    resetLayerCanvas() {
-        this.protectedData.canvases.drawingCanvasLayerMaster.width =
-            this.protectedData.canvases.drawingCanvasLayerMaster.width;
-        for (const [, target] of this.protectedData.layerTargets) {
-            target.canvas.width = target.canvas.width;
-        }
-    }
-    redrawMianPreOnDisplayCanvas() {
+    enterSphereMode() {
         var _a;
-        this.protectedData.canvases.displayCanvas.width =
-            this.protectedData.canvases.displayCanvas.width;
-        this.protectedData.canvases.displayCanvas.height =
-            this.protectedData.canvases.displayCanvas.height;
-        this.protectedData.canvases.originCanvas.width =
-            this.protectedData.canvases.originCanvas.width;
-        if (this.protectedData.mainPreSlices) {
-            this.protectedData.mainPreSlices.repaint.call(this.protectedData.mainPreSlices);
-            this.flipDisplayImageByAxis();
-            (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.drawImage(this.protectedData.canvases.originCanvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
-            this.resizePaintArea(this.nrrd_states.sizeFoctor);
-        }
-    }
-    /**
-     * Resize the draw and display canvas size based on the input size factor number.
-     * @param factor number
-     */
-    resizePaintArea(factor) {
-        const newWidth = Math.floor(this.nrrd_states.originWidth * factor);
-        const newHeight = Math.floor(this.nrrd_states.originHeight * factor);
-        const sizeChanged = newWidth !== this.nrrd_states.changedWidth ||
-            newHeight !== this.nrrd_states.changedHeight;
-        // Always clear display/drawing/origin canvases (needed for contrast updates)
-        this.protectedData.canvases.originCanvas.width =
-            this.protectedData.canvases.originCanvas.width;
-        this.protectedData.canvases.displayCanvas.width =
-            this.protectedData.canvases.displayCanvas.width;
-        this.protectedData.canvases.drawingCanvas.width =
-            this.protectedData.canvases.drawingCanvas.width;
-        if (sizeChanged) {
-            // Only clear and resize layer canvases when size actually changes.
-            // Skipping this avoids the expensive reloadMasksFromVolume() call
-            // during contrast toggle (where size stays the same).
-            this.resetLayerCanvas();
-            this.nrrd_states.changedWidth = newWidth;
-            this.nrrd_states.changedHeight = newHeight;
-            this.protectedData.canvases.displayCanvas.width = newWidth;
-            this.protectedData.canvases.displayCanvas.height = newHeight;
-            this.protectedData.canvases.drawingCanvas.width = newWidth;
-            this.protectedData.canvases.drawingCanvas.height = newHeight;
-            this.protectedData.canvases.drawingCanvasLayerMaster.width = newWidth;
-            this.protectedData.canvases.drawingCanvasLayerMaster.height = newHeight;
-            for (const [, target] of this.protectedData.layerTargets) {
-                target.canvas.width = newWidth;
-                target.canvas.height = newHeight;
+        this.dragOperator.removeDragMode();
+        (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setGuiTool('sphere');
+        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) {
+                target.ctx.clearRect(0, 0, target.canvas.width, target.canvas.height);
             }
         }
-        this.redrawDisplayCanvas();
-        if (sizeChanged) {
-            // Phase 3: Reload masks from MaskVolume only when canvas size changed
-            this.reloadMasksFromVolume();
-        }
-        else {
-            // Size unchanged (e.g. contrast toggle): layer canvases still have
-            // valid data, just recomposite to master for the start() render loop.
-            this.compositeAllLayers();
-        }
-    }
-    /**
-     * Phase 3: Reload all mask layers from MaskVolume using buffer reuse
-     * Replaces the old reloadMaskToLayer approach
-     */
-    reloadMasksFromVolume() {
-        const axis = this.protectedData.axis;
-        let sliceIndex = this.nrrd_states.currentIndex;
-        // Clamp sliceIndex to valid range for current axis
-        // (currentIndex may not be updated yet when switching axes)
-        try {
-            const vol = this.getVolumeForLayer(this.nrrd_states.layers[0]);
-            const dims = vol.getDimensions();
-            const maxSlice = axis === "x" ? dims.width : axis === "y" ? dims.height : dims.depth;
-            if (sliceIndex >= maxSlice)
-                sliceIndex = maxSlice - 1;
-            if (sliceIndex < 0)
-                sliceIndex = 0;
-        }
-        catch ( /* volume not ready */_a) { /* volume not ready */ }
-        // Get a single reusable buffer shared across all layer renders
-        const buffer = this.getOrCreateSliceBuffer(axis);
-        if (!buffer)
-            return;
-        const w = this.nrrd_states.changedWidth;
-        const h = this.nrrd_states.changedHeight;
-        // Clear and render each layer using the shared buffer
-        for (const layerId of this.nrrd_states.layers) {
-            const target = this.protectedData.layerTargets.get(layerId);
-            if (!target)
-                continue;
-            target.ctx.clearRect(0, 0, w, h);
-            this.renderSliceToCanvas(layerId, axis, sliceIndex, buffer, target.ctx, w, h);
-        }
-        // Composite all layers to master canvas
-        this.compositeAllLayers();
+        this.state.protectedData.ctxes.drawingLayerMasterCtx.clearRect(0, 0, w, h);
+        this.refreshSphereOverlay();
     }
-    // compositeAllLayers() is inherited from CommToolsData
     /**
-     * flip the canvas to a correct position.
-     * This is because the slice canvas from threejs is not in a correct 2D postion.
-     * Thus, everytime when we redraw the display canvas, we need to flip to draw the origin canvas from threejs.
-     * Under different axis(sagittal, Axial, Coronal), the flip orientation is different.
+     * Exit sphere mode.
      */
-    flipDisplayImageByAxis() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.protectedData.axis === "x") {
-            (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.scale(-1, -1);
-            (_b = this.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.translate(-this.nrrd_states.changedWidth, -this.nrrd_states.changedHeight);
-        }
-        else if (this.protectedData.axis === "z") {
-            (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.scale(1, -1);
-            (_d = this.protectedData.ctxes.displayCtx) === null || _d === void 0 ? void 0 : _d.translate(0, -this.nrrd_states.changedHeight);
-        }
-        else if (this.protectedData.axis === "y") {
-            (_e = this.protectedData.ctxes.displayCtx) === null || _e === void 0 ? void 0 : _e.scale(1, -1);
-            (_f = this.protectedData.ctxes.displayCtx) === null || _f === void 0 ? void 0 : _f.translate(0, -this.nrrd_states.changedHeight);
-        }
-    }
-    clearDictionary(dic) {
-        for (var key in dic) {
-            delete dic[key];
-        }
-    }
-    /**
-     * Set the empty canvas width and height based on the axis (pixel distance not the mm), to reduce duplicate codes.
-     *
-     * @param axis
-     */
-    setEmptyCanvasSize(axis) {
-        switch (!!axis ? axis : this.protectedData.axis) {
-            case "x":
-                this.protectedData.canvases.emptyCanvas.width =
-                    this.nrrd_states.nrrd_z_pixel;
-                this.protectedData.canvases.emptyCanvas.height =
-                    this.nrrd_states.nrrd_y_pixel;
-                break;
-            case "y":
-                this.protectedData.canvases.emptyCanvas.width =
-                    this.nrrd_states.nrrd_x_pixel;
-                this.protectedData.canvases.emptyCanvas.height =
-                    this.nrrd_states.nrrd_z_pixel;
-                break;
-            case "z":
-                this.protectedData.canvases.emptyCanvas.width =
-                    this.nrrd_states.nrrd_x_pixel;
-                this.protectedData.canvases.emptyCanvas.height =
-                    this.nrrd_states.nrrd_y_pixel;
-                break;
-        }
+    exitSphereMode() {
+        var _a;
+        this.dragOperator.configDragMode();
+        (_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.setGuiTool('pencil');
+        this.state.protectedData.ctxes.drawingSphereCtx.clearRect(0, 0, this.state.protectedData.canvases.drawingSphereCanvas.width, this.state.protectedData.canvases.drawingSphereCanvas.height);
+        this.resetLayerCanvas();
+        this.reloadMasksFromVolume();
     }
-    /******************************** redraw display canvas  ***************************************/
-    /**
-     * Redraw current contrast image to display canvas.
-     * It is more related to change the contrast slice image's window width or center.
-     */
-    redrawDisplayCanvas() {
-        var _a, _b, _c;
-        this.dragOperator.updateCurrentContrastSlice();
-        this.protectedData.canvases.displayCanvas.width =
-            this.protectedData.canvases.displayCanvas.width;
-        this.protectedData.canvases.displayCanvas.height =
-            this.protectedData.canvases.displayCanvas.height;
-        this.protectedData.canvases.originCanvas.width =
-            this.protectedData.canvases.originCanvas.width;
-        if (this.protectedData.currentShowingSlice) {
-            this.protectedData.currentShowingSlice.repaint.call(this.protectedData.currentShowingSlice);
-            (_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.currentShowingSlice.canvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
-            (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
-        }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 11. Clear / Reset
+    // ═══════════════════════════════════════════════════════════════════════════
+    clearActiveLayer() {
+        if (this.state.nrrd_states.image.dimensions.length === 3) {
+            const [w, h, d] = this.state.nrrd_states.image.dimensions;
+            const activeLayer = this.state.gui_states.layerChannel.layer;
+            this.state.protectedData.maskData.volumes[activeLayer] = new MaskVolume(w, h, d, 1);
+            this.drawCore.undoManager.clearLayer(activeLayer);
+            this.state.annotationCallbacks.onLayerVolumeCleared(activeLayer);
+        }
+        this.drawCore.renderer.invalidateSliceBuffer();
+        this.reloadMasksFromVolume();
     }
-    /**
-     * Config mouse slice wheel event.
-     */
+    reset() {
+        this.state.protectedData.allSlicesArray.length = 0;
+        this.state.protectedData.displaySlices.length = 0;
+        this.drawCore.undoManager.clearAll();
+        this.state.protectedData.maskData.volumes = this.state.nrrd_states.image.layers.reduce((acc, id) => {
+            acc[id] = new MaskVolume(1, 1, 1, 1);
+            return acc;
+        }, {});
+        this.state.nrrd_states.sphere.sphereMaskVolume = null;
+        this.drawCore.renderer.invalidateSliceBuffer();
+        this.clearDictionary(this.state.protectedData.skipSlicesDic);
+        this.state.protectedData.canvases.displayCanvas.style.left =
+            this.state.protectedData.canvases.drawingCanvas.style.left = "";
+        this.state.protectedData.canvases.displayCanvas.style.top =
+            this.state.protectedData.canvases.drawingCanvas.style.top = "";
+        this.state.protectedData.backUpDisplaySlices.length = 0;
+        this.state.protectedData.mainPreSlices = undefined;
+        this.state.protectedData.currentShowingSlice = undefined;
+        this.sliceRenderPipeline.resetInitState();
+        this.state.protectedData.axis = "z";
+        this.state.nrrd_states.view.sizeFactor = this.state.baseCanvasesSize;
+        this.state.gui_states.viewConfig.mainAreaSize = this.state.baseCanvasesSize;
+        this.resetLayerCanvas();
+        this.state.protectedData.canvases.drawingCanvas.width =
+            this.state.protectedData.canvases.drawingCanvas.width;
+        this.state.protectedData.canvases.displayCanvas.width =
+            this.state.protectedData.canvases.displayCanvas.width;
+        this.state.nrrd_states.sphere.tumourSphereOrigin = null;
+        this.state.nrrd_states.sphere.ribSphereOrigin = null;
+        this.state.nrrd_states.sphere.skinSphereOrigin = null;
+        this.state.nrrd_states.sphere.nippleSphereOrigin = null;
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 12. Internal — Input Events
+    // ═══════════════════════════════════════════════════════════════════════════
     configMouseSliceWheel() {
         const handleMouseZoomSliceWheelMove = (e) => {
             var _a;
-            if ((_a = this.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
+            if ((_a = this.drawCore.eventRouter) === null || _a === void 0 ? void 0 : _a.isShiftHeld()) {
                 return;
             }
             e.preventDefault();
@@ -1301,23 +812,53 @@ export class NrrdTools extends DrawToolCore {
         };
         return handleMouseZoomSliceWheelMove;
     }
-    /**
-     * Update mouse wheel event.
-     */
     updateMouseWheelEvent() {
-        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
-        switch (this._keyboardSettings.mouseWheel) {
+        this.state.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawCore.drawingPrameters.handleMouseZoomSliceWheel);
+        switch (this.state.keyboardSettings.mouseWheel) {
             case "Scroll:Zoom":
-                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+                this.drawCore.drawingPrameters.handleMouseZoomSliceWheel = this.drawCore.configMouseZoomWheel();
                 break;
             case "Scroll:Slice":
-                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
+                this.drawCore.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
                 break;
             default:
-                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+                this.drawCore.drawingPrameters.handleMouseZoomSliceWheel = this.drawCore.configMouseZoomWheel();
                 break;
         }
-        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+        this.state.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawCore.drawingPrameters.handleMouseZoomSliceWheel);
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 13. Internal — Utility
+    // ═══════════════════════════════════════════════════════════════════════════
+    setIsDrawFalse(target) {
+        this.preTimer = setTimeout(() => {
+            this.state.protectedData.isDrawing = false;
+            if (this.preTimer) {
+                window.clearTimeout(this.preTimer);
+                this.preTimer = undefined;
+            }
+        }, target);
+    }
+    setShowInMainArea() {
+        this.state.nrrd_states.view.showContrast = true;
+    }
+    clearDictionary(dic) {
+        for (var key in dic) {
+            delete dic[key];
+        }
+    }
+    /**
+     * Get the DrawToolCore's start() render loop callback.
+     * This is called by DragSliceTool's requestAnimationFrame loop.
+     */
+    get start() {
+        return this.drawCore.start;
+    }
+    /**
+     * Expose drawCalculatorSphereOnEachViews for external use.
+     */
+    drawCalculatorSphereOnEachViews(axis) {
+        this.drawCore.drawCalculatorSphereOnEachViews(axis);
     }
 }
 //# sourceMappingURL=NrrdTools.js.map