copper3d 1.15.11 → 1.15.13

package/dist/bundle.umd.js

@@ -67648,6 +67648,7 @@
 	            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 = [];
@@ -67675,7 +67676,6 @@
 	        this.Is_Shift_Pressed = false;
 	        this.Is_Draw = false;
 	        this.sensitiveArray = [];
-	        this.handleWheelMove = () => { };
 	        this.start = () => { };
 	        this.undoArray = [];
 	        this.initState = true;
@@ -67711,6 +67711,10 @@
 	            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,
@@ -67760,12 +67764,9 @@
 	            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: () => {
@@ -67799,6 +67800,36 @@
 	                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);
@@ -67831,7 +67862,7 @@
 	            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;
 	            }
@@ -68011,12 +68042,94 @@
 	            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;
@@ -68032,27 +68145,19 @@
 	                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;
@@ -68060,28 +68165,19 @@
 	                    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;
@@ -68089,28 +68185,19 @@
 	                    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;
@@ -68118,14 +68205,38 @@
 	                    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];
@@ -68451,62 +68562,51 @@
 	        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();
 	            }
 	        });
 	    }
@@ -68664,6 +68764,7 @@
 	        // draw lines starts position
 	        let Is_Painting = false;
 	        let lines = [];
+	        const clearArc = this.useEraser();
 	        this.updateOriginAndChangedWH();
 	        this.initAllCanvas();
 	        this.configGui(modeFolder);
@@ -68673,12 +68774,15 @@
 	        (_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;
@@ -68687,8 +68791,9 @@
 	            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) {
@@ -68697,21 +68802,31 @@
 	            }
 	            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;
 	            }
@@ -68722,7 +68837,7 @@
 	                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;
@@ -68742,32 +68857,23 @@
 	                    }
 	                    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) {
+	                    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) {
@@ -68779,28 +68885,15 @@
 	                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;
@@ -68827,13 +68920,13 @@
 	            // 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 =
@@ -68881,20 +68974,63 @@
 	                        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) {
+	                    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);
+	                    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);
+	                        }
+	                    }
+	                    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);
 	            }
@@ -68905,12 +69041,13 @@
 	            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) {
@@ -68965,6 +69102,68 @@
 	            }
 	        });
 	    }
+	    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();
@@ -68982,7 +69181,9 @@
 	            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];
@@ -69006,9 +69207,29 @@
 	            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;
 	            }
@@ -69044,7 +69265,7 @@
 	            }
 	            this.nrrd_states.sizeFoctor = moveDistance;
 	        };
-	        return handleWheelMove;
+	        return handleZoomWheelMove;
 	    }
 	    useEraser() {
 	        const clearArc = (x, y, radius) => {
@@ -69155,155 +69376,6 @@
 	        }
 	        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":
@@ -69482,12 +69554,15 @@
 	            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
@@ -69557,7 +69632,7 @@
 	                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);
 	        }
 	    }
@@ -69592,7 +69667,7 @@
 	    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);
@@ -69814,11 +69889,190 @@
 	        //   }
 	        // };
 	    }
+	    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();
+	                // clear canvas
+	                this.clearPaint();
+	                this.clearStoreImages();
+	            }
+	        });
+	        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();
+	    }
 	}
 
 	// import * as kiwrious from "copper3d_plugin_heart_k";
-	const REVISION = "v1.15.11";
-	console.log("%cCopper3D Visualisation %cBeta:v1.15.11", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+	const REVISION = "v1.15.13";
+	console.log("%cCopper3D Visualisation %cBeta:v1.15.13", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 	exports.CameraViewPoint = CameraViewPoint;
 	exports.Copper3dTrackballControls = Copper3dTrackballControls;