copper3d 1.15.10 → 1.15.12

package/dist/Utils/nrrd_tool.js

@@ -14,6 +14,7 @@ export class nrrd_tools {
             label2: this.paintImagesLabel2,
             label3: this.paintImagesLabel3,
         };
+        // used to store display marks with multiple labels
         this.paintImages = { x: [], y: [], z: [] };
         // store all contrast slices, include x, y, z orientation
         this.allSlicesArray = [];
@@ -41,7 +42,6 @@ export class nrrd_tools {
         this.Is_Shift_Pressed = false;
         this.Is_Draw = false;
         this.sensitiveArray = [];
-        this.handleWheelMove = () => { };
         this.start = () => { };
         this.undoArray = [];
         this.initState = true;
@@ -77,6 +77,10 @@ export class nrrd_tools {
             isCursorSelect: false,
             cursorPageX: 0,
             cursorPageY: 0,
+            // x: [cursorX, cursorY, sliceIndex]
+            sphereOrigin: { x: [0, 0, 0], y: [0, 0, 0], z: [0, 0, 0] },
+            spherePlanB: false,
+            sphereRadius: 10,
             Mouse_Over_x: 0,
             Mouse_Over_y: 0,
             Mouse_Over: false,
@@ -126,12 +130,9 @@ export class nrrd_tools {
             brushAndEraserSize: 15,
             cursor: "dot",
             label: "label1",
+            sphere: false,
             // EraserSize: 25,
             clear: () => {
-                // const text = "Are you sure remove annotations on Current slice?";
-                // if (confirm(text) === true) {
-                //   this.clearPaint();
-                // }
                 this.clearPaint();
             },
             clearAll: () => {
@@ -165,6 +166,36 @@ export class nrrd_tools {
                 this.exportData();
             },
         };
+        this.dragPrameters = {
+            move: 0,
+            y: 0,
+            h: 0,
+            sensivity: 1,
+            handleOnDragMouseUp: (ev) => { },
+            handleOnDragMouseDown: (ev) => { },
+            handleOnDragMouseMove: (ev) => { },
+        };
+        this.drawingPrameters = {
+            handleOnDrawingMouseDown: (ev) => { },
+            handleOnDrawingMouseMove: (ev) => { },
+            handleOnPanMouseMove: (ev) => { },
+            handleOnDrawingMouseUp: (ev) => { },
+            handleOnDrawingMouseLeave: (ev) => { },
+            handleOnDrawingBrushCricleMove: (ev) => { },
+            handleZoomWheel: (e) => { },
+            handleSphereWheel: (e) => { },
+        };
+        this.configDragMode = () => {
+            this.container.style.cursor = "pointer";
+            this.container.addEventListener("pointerdown", this.dragPrameters.handleOnDragMouseDown, true);
+            this.container.addEventListener("pointerup", this.dragPrameters.handleOnDragMouseUp, true);
+        };
+        this.removeDragMode = () => {
+            this.container.style.cursor = "";
+            this.container.removeEventListener("pointerdown", this.dragPrameters.handleOnDragMouseDown, true);
+            this.container.removeEventListener("pointerup", this.dragPrameters.handleOnDragMouseUp, true);
+            this.setIsDrawFalse(1000);
+        };
         this.drawLine = (x1, y1, x2, y2) => {
             this.drawingCtx.beginPath();
             this.drawingCtx.moveTo(x1, y1);
@@ -197,7 +228,7 @@ export class nrrd_tools {
             this.sensitiveArray.push((i + 1) / 20);
         }
         this.container.addEventListener("keydown", (ev) => {
-            if (ev.key === "Shift") {
+            if (ev.key === "Shift" && !this.gui_states.sphere) {
                 this.Is_Shift_Pressed = true;
                 this.nrrd_states.enableCursorChoose = false;
             }
@@ -377,12 +408,94 @@ export class nrrd_tools {
             paintImages.z.push(initMark_z);
         }
     }
+    convertCursorPoint(from, to, cursorNumX, cursorNumY, currentSliceIndex) {
+        const nrrd = this.nrrd_states;
+        const dimensions = nrrd.dimensions;
+        const ratios = nrrd.ratios;
+        const { nrrd_x_mm, nrrd_y_mm, nrrd_z_mm } = nrrd;
+        let currentIndex = 0;
+        let oldIndex = 0;
+        let convertCursorNumX = 0;
+        let convertCursorNumY = 0;
+        const convertIndex = {
+            x: {
+                y: (val) => Math.ceil((val / nrrd_x_mm) * dimensions[0]),
+                z: (val) => Math.ceil((val / nrrd_z_mm) * dimensions[2]),
+            },
+            y: {
+                x: (val) => Math.ceil((val / nrrd_y_mm) * dimensions[1]),
+                z: (val) => Math.ceil((val / nrrd_z_mm) * dimensions[2]),
+            },
+            z: {
+                x: (val) => Math.ceil((val / nrrd_x_mm) * dimensions[0]),
+                y: (val) => Math.ceil((val / nrrd_y_mm) * dimensions[1]),
+            },
+        };
+        const convertCursor = {
+            x: {
+                y: (sliceIndex) => Math.ceil((sliceIndex / dimensions[0]) * nrrd_x_mm),
+                z: (sliceIndex) => Math.ceil((sliceIndex / dimensions[0]) * nrrd_x_mm),
+            },
+            y: {
+                x: (sliceIndex) => Math.ceil((sliceIndex / dimensions[1]) * nrrd_y_mm),
+                z: (sliceIndex) => Math.ceil((sliceIndex / dimensions[1]) * nrrd_y_mm),
+            },
+            z: {
+                x: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
+                y: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
+            },
+        };
+        if (from === to) {
+            return;
+        }
+        if (from === "z" && to === "x") {
+            currentIndex = convertIndex[from][to](cursorNumX);
+            oldIndex = currentIndex * ratios[to];
+            convertCursorNumX = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumY = cursorNumY;
+        }
+        else if (from === "y" && to === "x") {
+            currentIndex = convertIndex[from][to](cursorNumX);
+            oldIndex = currentIndex * ratios.x;
+            convertCursorNumY = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumX = cursorNumY;
+        }
+        else if (from === "z" && to === "y") {
+            currentIndex = convertIndex[from][to](cursorNumY);
+            oldIndex = currentIndex * ratios[to];
+            convertCursorNumY = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumX = cursorNumX;
+        }
+        else if (from === "x" && to === "y") {
+            currentIndex = convertIndex[from][to](cursorNumY);
+            oldIndex = currentIndex * ratios[to];
+            convertCursorNumX = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumY = cursorNumX;
+        }
+        else if (from === "x" && to === "z") {
+            currentIndex = convertIndex[from][to](cursorNumX);
+            oldIndex = currentIndex * ratios[to];
+            convertCursorNumX = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumY = cursorNumY;
+        }
+        else if (from === "y" && to === "z") {
+            currentIndex = convertIndex[from][to](cursorNumY);
+            oldIndex = currentIndex * ratios.z;
+            convertCursorNumY = convertCursor[from][to](currentSliceIndex);
+            convertCursorNumX = cursorNumX;
+        }
+        else {
+            return;
+        }
+        return { currentIndex, oldIndex, convertCursorNumX, convertCursorNumY };
+    }
     /**
      * Switch all contrast slices' orientation
      * @param {string} aixs:"x" | "y" | "z"
      *  */
-    setSliceOrientation(axis) {
-        if (this.nrrd_states.enableCursorChoose) {
+    setSliceOrientation(axisTo) {
+        let convetObj;
+        if (this.nrrd_states.enableCursorChoose || this.gui_states.sphere) {
             if (this.axis === "z") {
                 this.cursorPage.z.index = this.nrrd_states.currentIndex;
                 this.cursorPage.z.cursorPageX = this.nrrd_states.cursorPageX;
@@ -398,27 +511,19 @@ export class nrrd_tools {
                 this.cursorPage.y.cursorPageX = this.nrrd_states.cursorPageX;
                 this.cursorPage.y.cursorPageY = this.nrrd_states.cursorPageY;
             }
-            if (axis === "z") {
+            if (axisTo === "z") {
                 if (this.nrrd_states.isCursorSelect && !this.cursorPage.z.updated) {
                     if (this.axis === "x") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.x.cursorPageX / this.nrrd_states.nrrd_z_mm) *
-                            this.nrrd_states.dimensions[2]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.z;
-                        this.nrrd_states.cursorPageX = Math.ceil((this.cursorPage.x.index / this.nrrd_states.dimensions[0]) *
-                            this.nrrd_states.nrrd_x_mm);
+                        // convert x to z
+                        convetObj = this.convertCursorPoint("x", "z", this.cursorPage.x.cursorPageX, this.cursorPage.x.cursorPageY, this.cursorPage.x.index);
                     }
                     if (this.axis === "y") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.y.cursorPageY / this.nrrd_states.nrrd_z_mm) *
-                            this.nrrd_states.dimensions[2]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.z;
-                        this.nrrd_states.cursorPageY = Math.ceil((this.cursorPage.y.index / this.nrrd_states.dimensions[1]) *
-                            this.nrrd_states.nrrd_y_mm);
+                        // convert y to z
+                        convetObj = this.convertCursorPoint("y", "z", this.cursorPage.y.cursorPageX, this.cursorPage.y.cursorPageY, this.cursorPage.y.index);
                     }
-                    this.cursorPage.z.updated = true;
                 }
                 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;
@@ -426,28 +531,19 @@ export class nrrd_tools {
                     this.nrrd_states.cursorPageY = this.cursorPage.z.cursorPageY;
                 }
             }
-            else if (axis === "x") {
+            else if (axisTo === "x") {
                 if (this.nrrd_states.isCursorSelect && !this.cursorPage.x.updated) {
                     if (this.axis === "z") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.z.cursorPageX / this.nrrd_states.nrrd_x_mm) *
-                            this.nrrd_states.dimensions[0]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.x;
-                        this.nrrd_states.cursorPageX = Math.floor((this.cursorPage.z.index / this.nrrd_states.dimensions[2]) *
-                            this.nrrd_states.nrrd_z_mm);
+                        // convert z to x
+                        convetObj = this.convertCursorPoint("z", "x", this.cursorPage.z.cursorPageX, this.cursorPage.z.cursorPageY, this.cursorPage.z.index);
                     }
                     if (this.axis === "y") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.y.cursorPageX / this.nrrd_states.nrrd_y_mm) *
-                            this.nrrd_states.dimensions[1]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.x;
-                        this.nrrd_states.cursorPageX = this.cursorPage.y.cursorPageY;
-                        this.nrrd_states.cursorPageY = Math.ceil((this.cursorPage.y.index / this.nrrd_states.dimensions[1]) *
-                            this.nrrd_states.nrrd_y_mm);
+                        // convert y to x
+                        convetObj = this.convertCursorPoint("y", "x", this.cursorPage.y.cursorPageX, this.cursorPage.y.cursorPageY, this.cursorPage.y.index);
                     }
-                    this.cursorPage.x.updated = true;
                 }
                 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;
@@ -455,28 +551,19 @@ export class nrrd_tools {
                     this.nrrd_states.cursorPageY = this.cursorPage.x.cursorPageY;
                 }
             }
-            else if (axis === "y") {
+            else if (axisTo === "y") {
                 if (this.nrrd_states.isCursorSelect && !this.cursorPage.y.updated) {
                     if (this.axis === "z") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.z.cursorPageY / this.nrrd_states.nrrd_y_mm) *
-                            this.nrrd_states.dimensions[1]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.y;
-                        this.nrrd_states.cursorPageY = Math.ceil((this.cursorPage.z.index / this.nrrd_states.dimensions[2]) *
-                            this.nrrd_states.nrrd_z_mm);
+                        // convert z to y
+                        convetObj = this.convertCursorPoint("z", "y", this.cursorPage.z.cursorPageX, this.cursorPage.z.cursorPageY, this.cursorPage.z.index);
                     }
                     if (this.axis === "x") {
-                        this.nrrd_states.currentIndex = Math.ceil((this.cursorPage.x.cursorPageY / this.nrrd_states.nrrd_x_mm) *
-                            this.nrrd_states.dimensions[0]);
-                        this.nrrd_states.oldIndex =
-                            this.nrrd_states.currentIndex * this.nrrd_states.ratios.y;
-                        this.nrrd_states.cursorPageX = Math.ceil((this.cursorPage.x.index / this.nrrd_states.dimensions[0]) *
-                            this.nrrd_states.nrrd_x_mm);
-                        this.nrrd_states.cursorPageY = this.cursorPage.x.cursorPageX;
+                        // convert x to y
+                        convetObj = this.convertCursorPoint("x", "y", this.cursorPage.x.cursorPageX, this.cursorPage.x.cursorPageY, this.cursorPage.x.index);
                     }
-                    this.cursorPage.y.updated = true;
                 }
                 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;
@@ -484,14 +571,38 @@ export class nrrd_tools {
                     this.nrrd_states.cursorPageY = this.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;
+                convetObj = undefined;
+                switch (axisTo) {
+                    case "x":
+                        this.cursorPage.x.updated = true;
+                        break;
+                    case "y":
+                        this.cursorPage.y.updated = true;
+                        break;
+                    case "z":
+                        this.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;
             }
         }
-        this.axis = axis;
+        this.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.sphereOrigin[axisTo][1], this.nrrd_states.sphereRadius);
+        }
     }
     addSkip(index) {
         this.skipSlicesDic[index] = this.backUpDisplaySlices[index];
@@ -568,6 +679,15 @@ export class nrrd_tools {
         this.resetPaintArea();
         this.setIsDrawFalse(1000);
     }
+    getContainer() {
+        return this.mainAreaContainer;
+    }
+    getDrawingCanvas() {
+        return this.drawingCanvas;
+    }
+    getNrrdToolsSettings() {
+        return this.nrrd_states;
+    }
     getMaxSliceNum() {
         if (this.nrrd_states.showContrast) {
             return [
@@ -808,62 +928,51 @@ export class nrrd_tools {
         this.mainAreaContainer.appendChild(loadingbar);
     }
     drag(opts) {
-        let move;
-        let y;
-        let h = this.container.offsetHeight;
-        let sensivity = 1;
-        let handleOnMouseUp;
-        let handleOnMouseDown;
-        let handleOnMouseMove;
+        this.dragPrameters.h = this.container.offsetHeight;
         this.sensitiveArray.reverse();
         if (opts === null || opts === void 0 ? void 0 : opts.showNumber) {
             this.container.appendChild(this.showDragNumberDiv);
         }
-        handleOnMouseDown = (ev) => {
+        this.dragPrameters.handleOnDragMouseDown = (ev) => {
             // before start drag event, remove wheel event.
-            this.drawingCanvas.removeEventListener("wheel", this.handleWheelMove);
+            this.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
             if (ev.button === 0) {
                 // this.setSyncsliceNum();
-                y = ev.offsetY / h;
-                this.container.addEventListener("pointermove", handleOnMouseMove, false);
-                sensivity = this.sensitiveArray[this.gui_states.dragSensitivity - 1];
+                this.dragPrameters.y = ev.offsetY / this.dragPrameters.h;
+                this.container.addEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
+                this.dragPrameters.sensivity =
+                    this.sensitiveArray[this.gui_states.dragSensitivity - 1];
             }
         };
-        handleOnMouseMove = throttle((ev) => {
-            if (y - ev.offsetY / h >= 0) {
-                move = -Math.ceil(((y - ev.offsetY / h) * 10) / sensivity);
+        this.dragPrameters.handleOnDragMouseMove = throttle((ev) => {
+            if (this.dragPrameters.y - ev.offsetY / this.dragPrameters.h >= 0) {
+                this.dragPrameters.move = -Math.ceil(((this.dragPrameters.y - ev.offsetY / this.dragPrameters.h) * 10) /
+                    this.dragPrameters.sensivity);
             }
             else {
-                move = -Math.floor(((y - ev.offsetY / h) * 10) / sensivity);
+                this.dragPrameters.move = -Math.floor(((this.dragPrameters.y - ev.offsetY / this.dragPrameters.h) * 10) /
+                    this.dragPrameters.sensivity);
             }
-            this.updateIndex(move);
+            this.updateIndex(this.dragPrameters.move);
             (opts === null || opts === void 0 ? void 0 : opts.getSliceNum) &&
                 opts.getSliceNum(this.nrrd_states.currentIndex, this.nrrd_states.contrastNum);
-            y = ev.offsetY / h;
-        }, sensivity * 200);
-        handleOnMouseUp = (ev) => {
+            this.dragPrameters.y = ev.offsetY / this.dragPrameters.h;
+        }, this.dragPrameters.sensivity * 200);
+        this.dragPrameters.handleOnDragMouseUp = (ev) => {
             // after drag, add the wheel event
-            this.drawingCanvas.addEventListener("wheel", this.handleWheelMove);
+            this.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
             this.setSyncsliceNum();
-            this.container.removeEventListener("pointermove", handleOnMouseMove, false);
-        };
-        const configDragMode = () => {
-            this.container.style.cursor = "pointer";
-            this.container.addEventListener("pointerdown", handleOnMouseDown, true);
-            this.container.addEventListener("pointerup", handleOnMouseUp, true);
+            this.container.removeEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
         };
-        configDragMode();
+        this.configDragMode();
         this.container.addEventListener("keydown", (ev) => {
             if (ev.key === "Shift") {
-                this.container.style.cursor = "";
-                this.container.removeEventListener("pointerdown", handleOnMouseDown, true);
-                this.container.removeEventListener("pointerup", handleOnMouseUp, false);
-                this.setIsDrawFalse(1000);
+                this.removeDragMode();
             }
         });
         this.container.addEventListener("keyup", (ev) => {
-            if (ev.key === "Shift") {
-                configDragMode();
+            if (ev.key === "Shift" && !this.gui_states.sphere) {
+                this.configDragMode();
             }
         });
     }
@@ -1021,6 +1130,7 @@ export class nrrd_tools {
         // draw lines starts position
         let Is_Painting = false;
         let lines = [];
+        const clearArc = this.useEraser();
         this.updateOriginAndChangedWH();
         this.initAllCanvas();
         this.configGui(modeFolder);
@@ -1030,12 +1140,15 @@ export class nrrd_tools {
         (_c = this.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
         this.previousDrawingImage = this.drawingCtx.getImageData(0, 0, this.drawingCanvas.width, this.drawingCanvas.height);
         // let a global variable to store the wheel move event
-        this.handleWheelMove = this.configMouseWheel((_d = this.sceneIn) === null || _d === void 0 ? void 0 : _d.controls);
+        this.drawingPrameters.handleZoomWheel = this.configMouseZoomWheel((_d = this.sceneIn) === null || _d === void 0 ? void 0 : _d.controls);
         // init to add it
-        this.drawingCanvas.addEventListener("wheel", this.handleWheelMove, {
+        this.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
             passive: false,
         });
-        const handleDragPaintPanel = (e) => {
+        // sphere Wheel
+        this.drawingPrameters.handleSphereWheel = this.configMouseSphereWheel();
+        // pan move
+        this.drawingPrameters.handleOnPanMouseMove = (e) => {
             this.drawingCanvas.style.cursor = "grabbing";
             this.nrrd_states.previousPanelL = e.clientX - panelMoveInnerX;
             this.nrrd_states.previousPanelT = e.clientY - panelMoveInnerY;
@@ -1044,8 +1157,9 @@ export class nrrd_tools {
             this.displayCanvas.style.top = this.drawingCanvas.style.top =
                 this.nrrd_states.previousPanelT + "px";
         };
-        // throttle(, 80);
-        const handleDisplayMouseMove = (e) => {
+        // brush circle move
+        this.drawingPrameters.handleOnDrawingBrushCricleMove = (e) => {
+            e.preventDefault();
             this.nrrd_states.Mouse_Over_x = e.offsetX;
             this.nrrd_states.Mouse_Over_y = e.offsetY;
             if (this.nrrd_states.Mouse_Over_x === undefined) {
@@ -1054,21 +1168,31 @@ export class nrrd_tools {
             }
             if (e.type === "mouseout") {
                 this.nrrd_states.Mouse_Over = false;
-                this.drawingCanvas.removeEventListener("mousemove", handleDisplayMouseMove);
+                this.drawingCanvas.removeEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
             }
             else if (e.type === "mouseover") {
                 this.nrrd_states.Mouse_Over = true;
-                this.drawingCanvas.addEventListener("mousemove", handleDisplayMouseMove);
+                this.drawingCanvas.addEventListener("mousemove", this.drawingPrameters.handleOnDrawingBrushCricleMove);
             }
-            e.preventDefault();
         };
-        // add canvas event listeners
-        this.drawingCanvas.addEventListener("mouseover", handleDisplayMouseMove);
-        this.drawingCanvas.addEventListener("mouseout", handleDisplayMouseMove);
-        // disable browser right click menu
-        this.drawingCanvas.addEventListener("pointerdown", (e) => {
+        // drawing move
+        this.drawingPrameters.handleOnDrawingMouseMove = (e) => {
+            this.Is_Draw = true;
+            if (Is_Painting) {
+                if (this.gui_states.Eraser) {
+                    this.nrrd_states.stepClear = 1;
+                    // drawingCtx.clearRect(e.offsetX - 5, e.offsetY - 5, 25, 25);
+                    clearArc(e.offsetX, e.offsetY, this.gui_states.brushAndEraserSize);
+                }
+                else {
+                    lines.push({ x: e.offsetX, y: e.offsetY });
+                    this.paintOnCanvasLayer(e.offsetX, e.offsetY);
+                }
+            }
+        };
+        this.drawingPrameters.handleOnDrawingMouseDown = (e) => {
             if (leftclicked || rightclicked) {
-                this.drawingCanvas.removeEventListener("pointerup", handlePointerUp);
+                this.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 this.drawingLayerMasterCtx.closePath();
                 return;
             }
@@ -1079,7 +1203,7 @@ export class nrrd_tools {
                 currentSliceIndex = this.mainPreSlice.index;
             }
             // remove it when mouse click down
-            this.drawingCanvas.removeEventListener("wheel", this.handleWheelMove);
+            this.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
             if (e.button === 0) {
                 if (this.Is_Shift_Pressed) {
                     leftclicked = true;
@@ -1099,32 +1223,24 @@ export class nrrd_tools {
                     }
                     this.nrrd_states.drawStartPos.set(e.offsetX, e.offsetY);
                     // this.drawingLayerMasterCtx.beginPath();
-                    this.drawingCanvas.addEventListener("pointerup", handlePointerUp);
-                    this.drawingCanvas.addEventListener("pointermove", handleOnPainterMove);
+                    this.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+                    this.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
                 }
                 else if (this.nrrd_states.enableCursorChoose) {
                     this.nrrd_states.cursorPageX =
                         e.offsetX / this.nrrd_states.sizeFoctor;
                     this.nrrd_states.cursorPageY =
                         e.offsetY / this.nrrd_states.sizeFoctor;
-                    this.nrrd_states.isCursorSelect = true;
-                    switch (this.axis) {
-                        case "x":
-                            this.cursorPage.x.updated = true;
-                            this.cursorPage.y.updated = false;
-                            this.cursorPage.z.updated = false;
-                            break;
-                        case "y":
-                            this.cursorPage.x.updated = false;
-                            this.cursorPage.y.updated = true;
-                            this.cursorPage.z.updated = false;
-                            break;
-                        case "z":
-                            this.cursorPage.x.updated = false;
-                            this.cursorPage.y.updated = false;
-                            this.cursorPage.z.updated = true;
-                            break;
-                    }
+                    this.enableCrosshair();
+                }
+                else if (this.gui_states.sphere) {
+                    console.log("sphere down");
+                    let mouseX = e.offsetX;
+                    let mouseY = e.offsetY;
+                    // draw circle
+                    this.drawSphere(mouseX, mouseY, this.nrrd_states.sphereRadius);
+                    this.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
+                    this.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
             }
             else if (e.button === 2) {
@@ -1136,28 +1252,15 @@ export class nrrd_tools {
                 panelMoveInnerX = e.clientX - offsetX;
                 panelMoveInnerY = e.clientY - offsetY;
                 this.drawingCanvas.style.cursor = "grab";
-                this.drawingCanvas.addEventListener("pointerup", handlePointerUp);
-                this.drawingCanvas.addEventListener("pointermove", handleDragPaintPanel);
+                this.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+                this.drawingCanvas.addEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
             }
             else {
                 return;
             }
-        }, true);
-        const clearArc = this.useEraser();
-        const handleOnPainterMove = (e) => {
-            this.Is_Draw = true;
-            if (Is_Painting) {
-                if (this.gui_states.Eraser) {
-                    this.nrrd_states.stepClear = 1;
-                    // drawingCtx.clearRect(e.offsetX - 5, e.offsetY - 5, 25, 25);
-                    clearArc(e.offsetX, e.offsetY, this.gui_states.brushAndEraserSize);
-                }
-                else {
-                    lines.push({ x: e.offsetX, y: e.offsetY });
-                    this.paintOnCanvasLayer(e.offsetX, e.offsetY);
-                }
-            }
         };
+        // disable browser right click menu
+        this.drawingCanvas.addEventListener("pointerdown", this.drawingPrameters.handleOnDrawingMouseDown, true);
         const redrawPreviousImageToLabelCtx = (ctx, label = "default") => {
             var _a;
             let paintImages;
@@ -1184,13 +1287,13 @@ export class nrrd_tools {
             // draw privous image
             ctx.drawImage(this.emptyCanvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
         };
-        const handlePointerUp = (e) => {
+        this.drawingPrameters.handleOnDrawingMouseUp = (e) => {
             if (e.button === 0) {
                 if (this.Is_Shift_Pressed || Is_Painting) {
                     leftclicked = false;
                     let { ctx, canvas } = this.setCurrentLayer();
                     ctx.closePath();
-                    this.drawingCanvas.removeEventListener("pointermove", handleOnPainterMove);
+                    this.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
                     if (!this.gui_states.Eraser) {
                         if (this.gui_states.segmentation) {
                             this.drawingCanvasLayerMaster.width =
@@ -1238,20 +1341,66 @@ export class nrrd_tools {
                         undoObj.layers[this.gui_states.label].push(image);
                         this.undoArray.push(undoObj);
                     }
+                    // add wheel after pointer up
+                    this.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
+                        passive: false,
+                    });
+                }
+                else if (this.gui_states.sphere &&
+                    !this.nrrd_states.enableCursorChoose) {
+                    console.log("sphere up");
+                    let { ctx, canvas } = this.setCurrentLayer();
+                    let mouseX = e.offsetX;
+                    let mouseY = e.offsetY;
+                    this.nrrd_states.sphereOrigin[this.axis] = [
+                        mouseX,
+                        mouseY,
+                        this.nrrd_states.currentIndex,
+                    ];
+                    /************ */
+                    this.setUpSphereOrigins(mouseX, mouseY);
+                    console.log(this.nrrd_states.sphereOrigin);
+                    this.nrrd_states.cursorPageX = mouseX;
+                    this.nrrd_states.cursorPageY = mouseY;
+                    this.enableCrosshair();
+                    // plan B
+                    // findout all index in the sphere radius range in Axial view
+                    if (this.nrrd_states.spherePlanB) {
+                        // clear stroe images
+                        this.clearStoreImages();
+                        for (let i = 0; i < this.nrrd_states.sphereRadius; i++) {
+                            this.setEmptyCanvasSize();
+                            const preIndex = this.nrrd_states.currentIndex - i;
+                            const nextIndex = this.nrrd_states.currentIndex + i;
+                            if (preIndex < this.nrrd_states.minIndex ||
+                                nextIndex > this.nrrd_states.maxIndex)
+                                return;
+                            if (preIndex === nextIndex) {
+                                this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius);
+                                this.drawImageOnEmptyImage(canvas);
+                                this.storeAllImages(preIndex, "");
+                            }
+                            else {
+                                this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius - i);
+                                this.drawImageOnEmptyImage(canvas);
+                                this.storeAllImages(preIndex, "");
+                                this.storeAllImages(nextIndex, "");
+                            }
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        }
+                    }
+                    console.log(this.nrrd_states.sphereRadius);
+                    this.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
                 }
             }
             else if (e.button === 2) {
                 rightclicked = false;
                 this.drawingCanvas.style.cursor = "grab";
-                this.drawingCanvas.removeEventListener("pointermove", handleDragPaintPanel);
+                this.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
             }
             else {
                 return;
             }
-            // add wheel after pointer up
-            this.drawingCanvas.addEventListener("wheel", this.handleWheelMove, {
-                passive: false,
-            });
             if (!this.gui_states.segmentation) {
                 this.setIsDrawFalse(100);
             }
@@ -1262,12 +1411,13 @@ export class nrrd_tools {
             if (leftclicked) {
                 leftclicked = false;
                 this.drawingLayerMasterCtx.closePath();
-                this.drawingCanvas.removeEventListener("pointermove", handleOnPainterMove);
+                this.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnDrawingMouseMove);
+                this.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
             }
             if (rightclicked) {
                 rightclicked = false;
                 this.drawingCanvas.style.cursor = "grab";
-                this.drawingCanvas.removeEventListener("pointermove", handleDragPaintPanel);
+                this.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
             }
             this.setIsDrawFalse(100);
             if (this.gui_states.segmentation) {
@@ -1322,6 +1472,68 @@ export class nrrd_tools {
             }
         });
     }
+    enableCrosshair() {
+        this.nrrd_states.isCursorSelect = true;
+        switch (this.axis) {
+            case "x":
+                this.cursorPage.x.updated = true;
+                this.cursorPage.y.updated = false;
+                this.cursorPage.z.updated = false;
+                break;
+            case "y":
+                this.cursorPage.x.updated = false;
+                this.cursorPage.y.updated = true;
+                this.cursorPage.z.updated = false;
+                break;
+            case "z":
+                this.cursorPage.x.updated = false;
+                this.cursorPage.y.updated = false;
+                this.cursorPage.z.updated = true;
+                break;
+        }
+    }
+    setUpSphereOrigins(mouseX, mouseY) {
+        const convertCursor = (from, to) => {
+            const convertObj = this.convertCursorPoint(from, to, mouseX, mouseY, this.nrrd_states.currentIndex);
+            return {
+                convertCursorNumX: convertObj === null || convertObj === void 0 ? void 0 : convertObj.convertCursorNumX,
+                convertCursorNumY: convertObj === null || convertObj === void 0 ? void 0 : convertObj.convertCursorNumY,
+                currentIndex: convertObj === null || convertObj === void 0 ? void 0 : convertObj.currentIndex,
+            };
+        };
+        const axisConversions = {
+            x: { axisTo1: "y", axisTo2: "z" },
+            y: { axisTo1: "z", axisTo2: "x" },
+            z: { axisTo1: "x", axisTo2: "y" },
+        };
+        const { axisTo1, axisTo2 } = axisConversions[this.axis];
+        this.nrrd_states.sphereOrigin[axisTo1] = [
+            convertCursor(this.axis, axisTo1).convertCursorNumX,
+            convertCursor(this.axis, axisTo1).convertCursorNumY,
+            convertCursor(this.axis, axisTo1).currentIndex,
+        ];
+        this.nrrd_states.sphereOrigin[axisTo2] = [
+            convertCursor(this.axis, axisTo2).convertCursorNumX,
+            convertCursor(this.axis, axisTo2).convertCursorNumY,
+            convertCursor(this.axis, axisTo2).currentIndex,
+        ];
+    }
+    // for sphere
+    drawSphereCore(ctx, x, y, radius) {
+        ctx.beginPath();
+        ctx.arc(x, y, radius * this.nrrd_states.sizeFoctor, 0, 2 * Math.PI);
+        ctx.fillStyle = this.gui_states.fillColor;
+        ctx.fill();
+        ctx.closePath();
+    }
+    drawSphere(mouseX, mouseY, radius) {
+        let { ctx, canvas } = this.setCurrentLayer();
+        // clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        this.drawingLayerMasterCtx.clearRect(0, 0, canvas.width, canvas.height);
+        this.drawSphereCore(ctx, mouseX, mouseY, radius);
+        this.drawingLayerMasterCtx.drawImage(canvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+    }
     // need to update
     undoLastPainting() {
         let { ctx, canvas } = this.setCurrentLayer();
@@ -1339,7 +1551,9 @@ export class nrrd_tools {
             if (layerLen > 0) {
                 // const imageSrc = undo.undos[undo.undos.length - 1];
                 const image = layerUndos[layerLen - 1];
-                ctx.drawImage(image, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+                if (!!image) {
+                    ctx.drawImage(image, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+                }
             }
             if (undo.layers.label1.length > 0) {
                 const image = undo.layers.label1[undo.layers.label1.length - 1];
@@ -1363,9 +1577,29 @@ export class nrrd_tools {
             return item.sliceIndex === this.nrrd_states.currentIndex;
         });
     }
-    configMouseWheel(controls) {
+    // drawing canvas mouse shpere wheel
+    configMouseSphereWheel() {
+        const sphereEvent = (e) => {
+            e.preventDefault();
+            if (e.deltaY < 0) {
+                this.nrrd_states.sphereRadius += 1;
+            }
+            else {
+                this.nrrd_states.sphereRadius -= 1;
+            }
+            // limited the radius max and min
+            this.nrrd_states.sphereRadius = Math.max(1, Math.min(this.nrrd_states.sphereRadius, 50));
+            // get mouse position
+            const mouseX = e.offsetX;
+            const mouseY = e.offsetY;
+            this.drawSphere(mouseX, mouseY, this.nrrd_states.sphereRadius);
+        };
+        return sphereEvent;
+    }
+    // drawing canvas mouse zoom wheel
+    configMouseZoomWheel(controls) {
         let moveDistance = 1;
-        const handleWheelMove = (e) => {
+        const handleZoomWheelMove = (e) => {
             if (this.Is_Shift_Pressed) {
                 return;
             }
@@ -1401,7 +1635,7 @@ export class nrrd_tools {
             }
             this.nrrd_states.sizeFoctor = moveDistance;
         };
-        return handleWheelMove;
+        return handleZoomWheelMove;
     }
     useEraser() {
         const clearArc = (x, y, radius) => {
@@ -1512,155 +1746,6 @@ export class nrrd_tools {
         }
         return { ctx, canvas };
     }
-    configGui(modeFolder) {
-        if (modeFolder.__controllers.length > 0)
-            this.removeGuiFolderChilden(modeFolder);
-        modeFolder.open();
-        const actionsFolder = modeFolder.addFolder("Default Actions");
-        actionsFolder
-            .add(this.gui_states, "label", ["label1", "label2", "label3"])
-            .onChange((val) => {
-            if (val === "label1") {
-                this.gui_states.fillColor = "#00ff00";
-                this.gui_states.brushColor = "#00ff00";
-            }
-            else if (val === "label2") {
-                this.gui_states.fillColor = "#ff0000";
-                this.gui_states.brushColor = "#ff0000";
-            }
-            else if (val === "label3") {
-                this.gui_states.fillColor = "#0000ff";
-                this.gui_states.brushColor = "#0000ff";
-            }
-        });
-        actionsFolder
-            .add(this.gui_states, "cursor", ["crosshair", "pencil", "dot"])
-            .name("cursor icons")
-            .onChange((value) => {
-            if (value === "crosshair") {
-                this.nrrd_states.defaultPaintCursor = "crosshair";
-            }
-            if (value === "pencil") {
-                this.nrrd_states.defaultPaintCursor =
-                    "url(https://raw.githubusercontent.com/LinkunGao/copper3d_icons/main/icons/pencil-black.svg), auto";
-            }
-            if (value === "dot") {
-                this.nrrd_states.defaultPaintCursor =
-                    "url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/dot.svg) 12 12,auto";
-            }
-            this.drawingCanvas.style.cursor = this.nrrd_states.defaultPaintCursor;
-        });
-        actionsFolder
-            .add(this.gui_states, "mainAreaSize")
-            .name("zoom")
-            .min(1)
-            .max(8)
-            .onFinishChange((factor) => {
-            this.resetPaintArea();
-            this.nrrd_states.sizeFoctor = factor;
-            this.resizePaintArea(factor);
-        });
-        actionsFolder.add(this.gui_states, "resetZoom");
-        actionsFolder
-            .add(this.gui_states, "globalAlpha")
-            .name("opacity")
-            .min(0.1)
-            .max(1)
-            .step(0.01);
-        actionsFolder.add(this.gui_states, "segmentation").name("Pencil");
-        actionsFolder
-            .add(this.gui_states, "brushAndEraserSize")
-            .min(5)
-            .max(50)
-            .step(1)
-            .onChange(() => {
-            if (this.gui_states.Eraser) {
-                this.eraserUrls.length > 0
-                    ? (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize, this.eraserUrls))
-                    : (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize));
-            }
-        });
-        actionsFolder.add(this.gui_states, "Eraser").onChange((value) => {
-            this.gui_states.Eraser = value;
-            if (this.gui_states.Eraser) {
-                this.eraserUrls.length > 0
-                    ? (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize, this.eraserUrls))
-                    : (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize));
-            }
-            else {
-                this.drawingCanvas.style.cursor = this.nrrd_states.defaultPaintCursor;
-            }
-        });
-        actionsFolder.add(this.gui_states, "clear");
-        actionsFolder.add(this.gui_states, "clearAll");
-        actionsFolder.add(this.gui_states, "undo");
-        actionsFolder
-            .add(this.mainPreSlice.volume, "windowHigh", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
-            .name("Image contrast")
-            .onChange((value) => {
-            this.nrrd_states.readyToUpdate = false;
-            this.updateSlicesContrast(value, "windowHigh");
-        })
-            .onFinishChange(() => {
-            this.repraintAllContrastSlices();
-            this.nrrd_states.readyToUpdate = true;
-        });
-        actionsFolder.add(this.gui_states, "exportMarks");
-        const advanceFolder = modeFolder.addFolder("Advance settings");
-        advanceFolder
-            .add(this.gui_states, "dragSensitivity")
-            .min(1)
-            .max(this.nrrd_states.Max_sensitive)
-            .step(1);
-        const segmentationFolder = advanceFolder.addFolder("Pencil settings");
-        segmentationFolder
-            .add(this.gui_states, "lineWidth")
-            .name("outerLineWidth")
-            .min(1.7)
-            .max(3)
-            .step(0.01);
-        segmentationFolder.addColor(this.gui_states, "color");
-        segmentationFolder.addColor(this.gui_states, "fillColor");
-        const bushFolder = advanceFolder.addFolder("Brush settings");
-        bushFolder.addColor(this.gui_states, "brushColor");
-        // modeFolder.add(this.stateMode, "EraserSize").min(1).max(50).step(1);
-        advanceFolder.add(this.gui_states, "downloadCurrentMask");
-        const contrastFolder = advanceFolder.addFolder("contrast advance settings");
-        contrastFolder
-            .add(this.mainPreSlice.volume, "lowerThreshold", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
-            .name("Lower Threshold")
-            .onChange((value) => {
-            this.nrrd_states.readyToUpdate = false;
-            this.updateSlicesContrast(value, "lowerThreshold");
-        })
-            .onFinishChange(() => {
-            this.repraintAllContrastSlices();
-            this.nrrd_states.readyToUpdate = true;
-        });
-        contrastFolder
-            .add(this.mainPreSlice.volume, "upperThreshold", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
-            .name("Upper Threshold")
-            .onChange((value) => {
-            this.nrrd_states.readyToUpdate = false;
-            this.updateSlicesContrast(value, "upperThreshold");
-        })
-            .onFinishChange(() => {
-            this.repraintAllContrastSlices();
-            this.nrrd_states.readyToUpdate = true;
-        });
-        contrastFolder
-            .add(this.mainPreSlice.volume, "windowLow", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
-            .name("Window Low")
-            .onChange((value) => {
-            this.nrrd_states.readyToUpdate = false;
-            this.updateSlicesContrast(value, "windowLow");
-        })
-            .onFinishChange(() => {
-            this.repraintAllContrastSlices();
-            this.nrrd_states.readyToUpdate = true;
-        });
-        actionsFolder.open();
-    }
     updateSlicesContrast(value, flag) {
         switch (flag) {
             case "lowerThreshold":
@@ -1839,12 +1924,15 @@ export class nrrd_tools {
             delete dic[key];
         }
     }
+    drawImageOnEmptyImage(canvas) {
+        this.emptyCtx.drawImage(canvas, 0, 0, this.emptyCanvas.width, this.emptyCanvas.height);
+    }
     storeAllImages(index, label) {
         // const image: HTMLImageElement = new Image();
         // resize the drawing image data
-        if (!this.nrrd_states.loadMaskJson) {
+        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere) {
             this.setEmptyCanvasSize();
-            this.emptyCtx.drawImage(this.drawingCanvasLayerMaster, 0, 0, this.emptyCanvas.width, this.emptyCanvas.height);
+            this.drawImageOnEmptyImage(this.drawingCanvasLayerMaster);
         }
         let imageData = this.emptyCtx.getImageData(0, 0, this.emptyCanvas.width, this.emptyCanvas.height);
         // 1.12.23
@@ -1914,7 +2002,7 @@ export class nrrd_tools {
                 break;
         }
         this.storeImageToAxis(index, this.paintImages, imageData);
-        if (!this.nrrd_states.loadMaskJson) {
+        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere) {
             this.storeEachLayerImage(index, label);
         }
     }
@@ -1949,7 +2037,7 @@ export class nrrd_tools {
     storeImageToLabel(index, canvas, paintedImages) {
         if (!this.nrrd_states.loadMaskJson) {
             this.setEmptyCanvasSize();
-            this.emptyCtx.drawImage(canvas, 0, 0, this.emptyCanvas.width, this.emptyCanvas.height);
+            this.drawImageOnEmptyImage(canvas);
         }
         const imageData = this.emptyCtx.getImageData(0, 0, this.emptyCanvas.width, this.emptyCanvas.height);
         this.storeImageToAxis(index, paintedImages, imageData);
@@ -2172,5 +2260,181 @@ export class nrrd_tools {
         //   }
         // };
     }
+    configGui(modeFolder) {
+        if (modeFolder.__controllers.length > 0)
+            this.removeGuiFolderChilden(modeFolder);
+        modeFolder.open();
+        const actionsFolder = modeFolder.addFolder("Default Actions");
+        actionsFolder
+            .add(this.gui_states, "label", ["label1", "label2", "label3"])
+            .onChange((val) => {
+            if (val === "label1") {
+                this.gui_states.fillColor = "#00ff00";
+                this.gui_states.brushColor = "#00ff00";
+            }
+            else if (val === "label2") {
+                this.gui_states.fillColor = "#ff0000";
+                this.gui_states.brushColor = "#ff0000";
+            }
+            else if (val === "label3") {
+                this.gui_states.fillColor = "#0000ff";
+                this.gui_states.brushColor = "#0000ff";
+            }
+        });
+        actionsFolder
+            .add(this.gui_states, "cursor", ["crosshair", "pencil", "dot"])
+            .name("cursor icons")
+            .onChange((value) => {
+            if (value === "crosshair") {
+                this.nrrd_states.defaultPaintCursor = "crosshair";
+            }
+            if (value === "pencil") {
+                this.nrrd_states.defaultPaintCursor =
+                    "url(https://raw.githubusercontent.com/LinkunGao/copper3d_icons/main/icons/pencil-black.svg), auto";
+            }
+            if (value === "dot") {
+                this.nrrd_states.defaultPaintCursor =
+                    "url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/dot.svg) 12 12,auto";
+            }
+            this.drawingCanvas.style.cursor = this.nrrd_states.defaultPaintCursor;
+        });
+        actionsFolder
+            .add(this.gui_states, "mainAreaSize")
+            .name("zoom")
+            .min(1)
+            .max(8)
+            .onFinishChange((factor) => {
+            this.resetPaintArea();
+            this.nrrd_states.sizeFoctor = factor;
+            this.resizePaintArea(factor);
+        });
+        actionsFolder.add(this.gui_states, "resetZoom");
+        actionsFolder
+            .add(this.gui_states, "globalAlpha")
+            .name("opacity")
+            .min(0.1)
+            .max(1)
+            .step(0.01);
+        actionsFolder
+            .add(this.gui_states, "segmentation")
+            .name("Pencil")
+            .onChange(() => {
+            if (this.gui_states.segmentation) {
+                // add canvas brush circle move event listeners
+                this.drawingCanvas.removeEventListener("mouseover", this.drawingPrameters.handleOnDrawingBrushCricleMove);
+                this.drawingCanvas.removeEventListener("mouseout", this.drawingPrameters.handleOnDrawingBrushCricleMove);
+            }
+            else {
+                // add canvas brush circle move event listeners
+                this.drawingCanvas.addEventListener("mouseover", this.drawingPrameters.handleOnDrawingBrushCricleMove);
+                this.drawingCanvas.addEventListener("mouseout", this.drawingPrameters.handleOnDrawingBrushCricleMove);
+            }
+        });
+        actionsFolder
+            .add(this.gui_states, "sphere")
+            .name("Sphere")
+            .onChange(() => {
+            if (this.gui_states.sphere) {
+                this.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+                this.removeDragMode();
+            }
+            else {
+                this.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+                this.configDragMode();
+            }
+        });
+        actionsFolder
+            .add(this.gui_states, "brushAndEraserSize")
+            .min(5)
+            .max(50)
+            .step(1)
+            .onChange(() => {
+            if (this.gui_states.Eraser) {
+                this.eraserUrls.length > 0
+                    ? (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize, this.eraserUrls))
+                    : (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize));
+            }
+        });
+        actionsFolder.add(this.gui_states, "Eraser").onChange((value) => {
+            this.gui_states.Eraser = value;
+            if (this.gui_states.Eraser) {
+                this.eraserUrls.length > 0
+                    ? (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize, this.eraserUrls))
+                    : (this.drawingCanvas.style.cursor = switchEraserSize(this.gui_states.brushAndEraserSize));
+            }
+            else {
+                this.drawingCanvas.style.cursor = this.nrrd_states.defaultPaintCursor;
+            }
+        });
+        actionsFolder.add(this.gui_states, "clear");
+        actionsFolder.add(this.gui_states, "clearAll");
+        actionsFolder.add(this.gui_states, "undo");
+        actionsFolder
+            .add(this.mainPreSlice.volume, "windowHigh", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
+            .name("Image contrast")
+            .onChange((value) => {
+            this.nrrd_states.readyToUpdate = false;
+            this.updateSlicesContrast(value, "windowHigh");
+        })
+            .onFinishChange(() => {
+            this.repraintAllContrastSlices();
+            this.nrrd_states.readyToUpdate = true;
+        });
+        actionsFolder.add(this.gui_states, "exportMarks");
+        const advanceFolder = modeFolder.addFolder("Advance settings");
+        advanceFolder
+            .add(this.gui_states, "dragSensitivity")
+            .min(1)
+            .max(this.nrrd_states.Max_sensitive)
+            .step(1);
+        const segmentationFolder = advanceFolder.addFolder("Pencil settings");
+        segmentationFolder
+            .add(this.gui_states, "lineWidth")
+            .name("outerLineWidth")
+            .min(1.7)
+            .max(3)
+            .step(0.01);
+        segmentationFolder.addColor(this.gui_states, "color");
+        segmentationFolder.addColor(this.gui_states, "fillColor");
+        const bushFolder = advanceFolder.addFolder("Brush settings");
+        bushFolder.addColor(this.gui_states, "brushColor");
+        // modeFolder.add(this.stateMode, "EraserSize").min(1).max(50).step(1);
+        advanceFolder.add(this.gui_states, "downloadCurrentMask");
+        const contrastFolder = advanceFolder.addFolder("contrast advance settings");
+        contrastFolder
+            .add(this.mainPreSlice.volume, "lowerThreshold", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
+            .name("Lower Threshold")
+            .onChange((value) => {
+            this.nrrd_states.readyToUpdate = false;
+            this.updateSlicesContrast(value, "lowerThreshold");
+        })
+            .onFinishChange(() => {
+            this.repraintAllContrastSlices();
+            this.nrrd_states.readyToUpdate = true;
+        });
+        contrastFolder
+            .add(this.mainPreSlice.volume, "upperThreshold", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
+            .name("Upper Threshold")
+            .onChange((value) => {
+            this.nrrd_states.readyToUpdate = false;
+            this.updateSlicesContrast(value, "upperThreshold");
+        })
+            .onFinishChange(() => {
+            this.repraintAllContrastSlices();
+            this.nrrd_states.readyToUpdate = true;
+        });
+        contrastFolder
+            .add(this.mainPreSlice.volume, "windowLow", this.mainPreSlice.volume.min, this.mainPreSlice.volume.max, 1)
+            .name("Window Low")
+            .onChange((value) => {
+            this.nrrd_states.readyToUpdate = false;
+            this.updateSlicesContrast(value, "windowLow");
+        })
+            .onFinishChange(() => {
+            this.repraintAllContrastSlices();
+            this.nrrd_states.readyToUpdate = true;
+        });
+        actionsFolder.open();
+    }
 }
 //# sourceMappingURL=nrrd_tool.js.map