copper3d 2.0.9 → 2.1.1

package/dist/bundle.esm.js

@@ -49836,7 +49836,7 @@ var Stats$1 = Stats;
 
 class baseRenderer {
     constructor(container, options) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.visualCtrls = [];
         this.container = container;
         this.options = options;
@@ -49866,7 +49866,7 @@ class baseRenderer {
             });
         }
         this.currentScene.sceneName = "default";
-        !!this.currentScene.vignette &&
+        (!!this.currentScene.vignette && !(!!((_e = this.options) === null || _e === void 0 ? void 0 : _e.alpha))) &&
             this.updateEnvironment(this.currentScene.vignette);
         this.state = {
             playbackSpeed: 1.0,
@@ -49898,6 +49898,9 @@ class baseRenderer {
         this.container.appendChild(this.renderer.domElement);
     }
     updateEnvironment(vignette) {
+        var _a;
+        if (!!((_a = this.options) === null || _a === void 0 ? void 0 : _a.alpha))
+            return;
         const environment = environments.filter((entry) => entry.name === "Venice Sunset")[0];
         this.getCubeMapTexture(environment).then((envMap) => {
             const currentScene = this.getCurrentScene();
@@ -58721,7 +58724,9 @@ class copperRenderer extends baseRenderer {
                 alpha: alpha,
             });
             new_scene.sceneName = name;
-            this.updateEnvironment(new_scene.vignette);
+            if (!alpha) {
+                this.updateEnvironment(new_scene.vignette);
+            }
             this.sceneMap[name] = new_scene;
             return new_scene;
         }
@@ -69674,6 +69679,12 @@ function setupGui(configs) {
         .onChange(() => {
         updateGuiSphereState();
     });
+    actionsFolder
+        .add(configs.gui_states, "calculator")
+        .name("Calculator")
+        .onChange(() => {
+        updateCalculatorState();
+    });
     actionsFolder
         .add(configs.gui_states, "brushAndEraserSize")
         .name("BrushAndEraserSize")
@@ -69700,6 +69711,12 @@ function setupGui(configs) {
         updateGuiImageContrastOnFinished();
     });
     const advanceFolder = configs.modeFolder.addFolder("AdvanceSettings");
+    advanceFolder
+        .add(configs.gui_states, "cal_distance", ["tumour", "skin", "ribcage", "nipple"])
+        .name("Label")
+        .onChange((val) => {
+        updateCalDistance(val);
+    });
     advanceFolder
         .add(configs.gui_states, "label", ["label1", "label2", "label3"])
         .name("Label")
@@ -69846,6 +69863,43 @@ function setupGui(configs) {
             configs.clearStoreImages();
         }
     };
+    const updateCalculatorState = () => {
+        if (configs.gui_states.calculator) {
+            // disable mouse to drag slices
+            configs.removeDragMode();
+        }
+        else {
+            // enable mouse to drag slices
+            configs.configDragMode();
+            // clear canvas
+            configs.clearPaint();
+            configs.clearStoreImages();
+        }
+    };
+    const updateCalDistance = (val) => {
+        switch (val) {
+            case "tumour":
+                configs.gui_states.fillColor = configs.nrrd_states.tumourColor;
+                configs.gui_states.brushColor = configs.nrrd_states.tumourColor;
+                break;
+            case "skin":
+                configs.gui_states.fillColor = configs.nrrd_states.skinColor;
+                configs.gui_states.brushColor = configs.nrrd_states.skinColor;
+                break;
+            case "ribcage":
+                configs.gui_states.fillColor = configs.nrrd_states.ribcageColor;
+                configs.gui_states.brushColor = configs.nrrd_states.ribcageColor;
+                break;
+            case "nipple":
+                configs.gui_states.fillColor = configs.nrrd_states.nippleColor;
+                configs.gui_states.brushColor = configs.nrrd_states.nippleColor;
+                break;
+            default:
+                configs.gui_states.fillColor = configs.nrrd_states.tumourColor;
+                configs.gui_states.brushColor = configs.nrrd_states.tumourColor;
+                break;
+        }
+    };
     const updateGuiImageWindowLowOnChange = (value) => {
         configs.gui_states.readyToUpdate = false;
         configs.updateSlicesContrast(value, "windowLow");
@@ -69884,6 +69938,14 @@ function setupGui(configs) {
             name: "Eraser",
             onChange: updateGuiEraserState,
         },
+        calculator: {
+            name: "Calculator",
+            onChange: updateCalculatorState,
+        },
+        cal_distance: {
+            name: "CalculatorDistance",
+            onChange: updateCalDistance
+        },
         clear: {
             name: "Clear",
         },
@@ -70308,6 +70370,14 @@ class CommToolsData {
             cursorPageX: 0,
             cursorPageY: 0,
             sphereOrigin: { x: [0, 0, 0], y: [0, 0, 0], z: [0, 0, 0] },
+            tumourSphereOrigin: null,
+            skinSphereOrigin: null,
+            ribSphereOrigin: null,
+            nippleSphereOrigin: null,
+            tumourColor: "#00ff00",
+            skinColor: "#FFEB3B",
+            ribcageColor: "#2196F3",
+            nippleColor: "#E91E63",
             spherePlanB: true,
             sphereRadius: 10,
             Mouse_Over_x: 0,
@@ -70322,6 +70392,7 @@ class CommToolsData {
             labels: ["label1", "label2", "label3"],
             getMask: (mask, sliceId, label, width, height, clearAllFlag) => { },
             getSphere: (sphereOrigin, sphereRadius) => { },
+            getCalculateSpherePositions: (tumourSphereOrigin, skinSphereOrigin, ribSphereOrigin, nippleSphereOrigin, aixs) => { },
             drawStartPos: { x: 1, y: 1 },
         };
         this.cursorPage = {
@@ -70357,7 +70428,9 @@ class CommToolsData {
             brushAndEraserSize: 15,
             cursor: "dot",
             label: "label1",
+            cal_distance: "tumour",
             sphere: false,
+            calculator: false,
             readyToUpdate: true,
             defaultPaintCursor: switchPencilIcon("dot"),
             max_sensitive: 100,
@@ -70467,6 +70540,12 @@ class CommToolsData {
     clearStoreImages() {
         throw new Error("Child class must implement abstract clearStoreImages, currently you can find it in NrrdTools.");
     }
+    /**
+     * Rewrite this {createEmptyPaintImage} function under NrrdTools
+     */
+    createEmptyPaintImage(dimensions, paintImages) {
+        throw new Error("Child class must implement abstract clearStoreImages, currently you can find it in NrrdTools.");
+    }
     /**
      * Rewrite this {resizePaintArea} function under NrrdTools
      */
@@ -70601,7 +70680,7 @@ class DrawToolCore extends CommToolsData {
     initDrawToolCore() {
         let undoFlag = false;
         this.container.addEventListener("keydown", (ev) => {
-            if (ev.key === "Shift" && !this.gui_states.sphere) {
+            if (ev.key === "Shift" && !this.gui_states.sphere && !this.gui_states.calculator) {
                 if (this.protectedData.Is_Ctrl_Pressed) {
                     this.protectedData.Is_Shift_Pressed = false;
                     return;
@@ -70678,9 +70757,64 @@ class DrawToolCore extends CommToolsData {
         if (!!opts) {
             this.nrrd_states.getMask = opts === null || opts === void 0 ? void 0 : opts.getMaskData;
             this.nrrd_states.getSphere = opts === null || opts === void 0 ? void 0 : opts.getSphereData;
+            this.nrrd_states.getCalculateSpherePositions = opts === null || opts === void 0 ? void 0 : opts.getCalculateSpherePositionsData;
         }
         this.paintOnCanvas();
     }
+    drawCalSphereDown(x, y, sliceIndex, cal_position) {
+        this.nrrd_states.sphereRadius = 5;
+        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+        let mouseX = x / this.nrrd_states.sizeFoctor;
+        let mouseY = y / this.nrrd_states.sizeFoctor;
+        //  record mouseX,Y, and enable crosshair function
+        this.nrrd_states.sphereOrigin[this.protectedData.axis] = [
+            mouseX,
+            mouseY,
+            sliceIndex,
+        ];
+        this.setUpSphereOrigins(mouseX, mouseY, sliceIndex);
+        switch (cal_position) {
+            case "tumour":
+                this.nrrd_states.tumourSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
+                break;
+            case "skin":
+                this.nrrd_states.skinSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
+                break;
+            case "nipple":
+                this.nrrd_states.nippleSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
+                break;
+            case "ribcage":
+                this.nrrd_states.ribSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
+                break;
+        }
+        this.nrrd_states.cursorPageX = mouseX;
+        this.nrrd_states.cursorPageY = mouseY;
+        this.enableCrosshair();
+        // draw circle setup width/height for sphere canvas
+        this.drawCalculatorSphere(this.nrrd_states.sphereRadius);
+        this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+    }
+    drawCalSphereUp() {
+        // TODO send data to outside
+        // this.clearStoreImages();
+        this.clearSpherePrintStoreImages();
+        this.drawCalculatorSphereOnEachViews("x");
+        this.drawCalculatorSphereOnEachViews("y");
+        this.drawCalculatorSphereOnEachViews("z");
+        !!this.nrrd_states.getCalculateSpherePositions &&
+            this.nrrd_states.getCalculateSpherePositions(this.nrrd_states.tumourSphereOrigin, this.nrrd_states.skinSphereOrigin, this.nrrd_states.ribSphereOrigin, this.nrrd_states.nippleSphereOrigin, this.protectedData.axis);
+        this.zoomActionAfterDrawSphere();
+        this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+    }
+    zoomActionAfterDrawSphere() {
+        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+    }
+    clearSpherePrintStoreImages() {
+        this.protectedData.maskData.paintImages.x.length = 0;
+        this.protectedData.maskData.paintImages.y.length = 0;
+        this.protectedData.maskData.paintImages.z.length = 0;
+        this.createEmptyPaintImage(this.nrrd_states.dimensions, this.protectedData.maskData.paintImages);
+    }
     paintOnCanvas() {
         var _a, _b, _c;
         /**
@@ -70803,25 +70937,13 @@ class DrawToolCore extends CommToolsData {
                     this.nrrd_states.cursorPageY =
                         e.offsetY / this.nrrd_states.sizeFoctor;
                     this.enableCrosshair();
+                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
                 else if (this.gui_states.sphere && !this.nrrd_states.enableCursorChoose) {
-                    this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
-                    let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
-                    let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
-                    //  record mouseX,Y, and enable crosshair function
-                    this.nrrd_states.sphereOrigin[this.protectedData.axis] = [
-                        mouseX,
-                        mouseY,
-                        this.nrrd_states.currentIndex,
-                    ];
-                    this.setUpSphereOrigins(mouseX, mouseY);
-                    this.nrrd_states.cursorPageX = mouseX;
-                    this.nrrd_states.cursorPageY = mouseY;
-                    this.enableCrosshair();
-                    // draw circle setup width/height for sphere canvas
-                    this.drawSphere(e.offsetX, e.offsetY, this.nrrd_states.sphereRadius);
-                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
-                    this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+                    sphere(e);
+                }
+                else if (this.gui_states.calculator && !this.nrrd_states.enableCursorChoose) {
+                    this.drawCalSphereDown(e.offsetX, e.offsetY, this.nrrd_states.currentIndex, this.gui_states.cal_distance);
                 }
             }
             else if (e.button === 2) {
@@ -70840,6 +70962,27 @@ class DrawToolCore extends CommToolsData {
         };
         // disable browser right click menu
         this.protectedData.canvases.drawingCanvas.addEventListener("pointerdown", this.drawingPrameters.handleOnDrawingMouseDown, true);
+        const sphere = (e) => {
+            // set sphere size
+            this.nrrd_states.sphereRadius = 10;
+            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+            let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
+            let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
+            //  record mouseX,Y, and enable crosshair function
+            this.nrrd_states.sphereOrigin[this.protectedData.axis] = [
+                mouseX,
+                mouseY,
+                this.nrrd_states.currentIndex,
+            ];
+            this.setUpSphereOrigins(mouseX, mouseY, this.nrrd_states.currentIndex);
+            this.nrrd_states.cursorPageX = mouseX;
+            this.nrrd_states.cursorPageY = mouseY;
+            this.enableCrosshair();
+            // draw circle setup width/height for sphere canvas
+            this.drawSphere(mouseX, mouseY, this.nrrd_states.sphereRadius);
+            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
+            this.protectedData.canvases.drawingCanvas.addEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+        };
         const redrawPreviousImageToLabelCtx = (ctx, label = "default") => {
             var _a;
             let paintImages;
@@ -70933,7 +71076,8 @@ class DrawToolCore extends CommToolsData {
                     // findout all index in the sphere radius range in Axial view
                     if (this.nrrd_states.spherePlanB) {
                         // clear stroe images
-                        this.clearStoreImages();
+                        // this.clearStoreImages();
+                        this.clearSpherePrintStoreImages();
                         for (let i = 0; i < this.nrrd_states.sphereRadius; i++) {
                             this.drawSphereOnEachViews(i, "x");
                             this.drawSphereOnEachViews(i, "y");
@@ -70942,18 +71086,31 @@ class DrawToolCore extends CommToolsData {
                     }
                     !!this.nrrd_states.getSphere &&
                         this.nrrd_states.getSphere(this.nrrd_states.sphereOrigin.z, this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor);
-                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
+                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
-                else if (this.gui_states.sphere &&
+                else if ((this.gui_states.sphere || this.gui_states.calculator) &&
                     this.nrrd_states.enableCursorChoose) {
                     this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
+                }
+                else if (this.gui_states.calculator &&
+                    !this.nrrd_states.enableCursorChoose) {
+                    // When mouse up
+                    this.drawCalSphereUp();
                 }
             }
             else if (e.button === 2) {
                 rightclicked = false;
                 this.protectedData.canvases.drawingCanvas.style.cursor = "grab";
+                setTimeout(() => {
+                    this.protectedData.canvases.drawingCanvas.style.cursor = this.gui_states.defaultPaintCursor;
+                }, 2000);
                 this.protectedData.canvases.drawingCanvas.removeEventListener("pointermove", this.drawingPrameters.handleOnPanMouseMove);
+                if (this.gui_states.sphere || this.gui_states.calculator) {
+                    this.zoomActionAfterDrawSphere();
+                }
             }
             else {
                 return;
@@ -71015,8 +71172,8 @@ class DrawToolCore extends CommToolsData {
                         this.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
                         const ex = this.nrrd_states.cursorPageX * this.nrrd_states.sizeFoctor;
                         const ey = this.nrrd_states.cursorPageY * this.nrrd_states.sizeFoctor;
-                        this.drawLine(ex, 0, ex, this.protectedData.canvases.drawingCanvas.height);
-                        this.drawLine(0, ey, this.protectedData.canvases.drawingCanvas.width, ey);
+                        this.drawLine(ex, 0, ex, this.nrrd_states.changedWidth);
+                        this.drawLine(0, ey, this.nrrd_states.changedHeight, ey);
                     }
                 }
                 this.protectedData.ctxes.drawingCtx.drawImage(this.protectedData.canvases.drawingCanvasLayerMaster, 0, 0);
@@ -71146,15 +71303,17 @@ class DrawToolCore extends CommToolsData {
             moveDistance = w / this.nrrd_states.originWidth;
             if (moveDistance > 8) {
                 moveDistance = 8;
+                this.resetPaintAreaUIPosition();
             }
             else if (moveDistance < 1) {
                 moveDistance = 1;
+                this.resetPaintAreaUIPosition();
             }
             else {
-                this.resizePaintArea(moveDistance);
                 this.resetPaintAreaUIPosition(l, t);
-                this.setIsDrawFalse(1000);
             }
+            this.resizePaintArea(moveDistance);
+            this.setIsDrawFalse(1000);
             this.nrrd_states.sizeFoctor = moveDistance;
         };
         return handleZoomWheelMove;
@@ -71182,6 +71341,60 @@ class DrawToolCore extends CommToolsData {
     drawImageOnEmptyImage(canvas) {
         this.protectedData.ctxes.emptyCtx.drawImage(canvas, 0, 0, this.protectedData.canvases.emptyCanvas.width, this.protectedData.canvases.emptyCanvas.height);
     }
+    /****************************Sphere calculate distance functions****************************************************/
+    getSpherePosition(position, axis) {
+        const mouseX = position[axis][0];
+        const mouseY = position[axis][1];
+        const sliceIndex = position[axis][2];
+        return { x: mouseX, y: mouseY, z: sliceIndex };
+    }
+    drawCalculatorSphereOnEachViews(axis) {
+        // init sphere canvas width and height
+        this.setSphereCanvasSize(axis);
+        // get drawingSphere canvas for storing 
+        const ctx = this.protectedData.ctxes.drawingSphereCtx;
+        const canvas = this.protectedData.canvases.drawingSphereCanvas;
+        let tumourPosition = !!this.nrrd_states.tumourSphereOrigin ? Object.assign(this.getSpherePosition(this.nrrd_states.tumourSphereOrigin, axis), { color: this.nrrd_states.tumourColor }) : null;
+        let skinPosition = !!this.nrrd_states.skinSphereOrigin ? Object.assign(this.getSpherePosition(this.nrrd_states.skinSphereOrigin, axis), { color: this.nrrd_states.skinColor }) : null;
+        let ribcagePosition = !!this.nrrd_states.ribSphereOrigin ? Object.assign(this.getSpherePosition(this.nrrd_states.ribSphereOrigin, axis), { color: this.nrrd_states.ribcageColor }) : null;
+        let nipplePosition = !!this.nrrd_states.nippleSphereOrigin ? Object.assign(this.getSpherePosition(this.nrrd_states.nippleSphereOrigin, axis), { color: this.nrrd_states.nippleColor }) : null;
+        let positionGroup = [];
+        if (!!tumourPosition)
+            positionGroup.push(tumourPosition);
+        if (!!skinPosition)
+            positionGroup.push(skinPosition);
+        if (!!ribcagePosition)
+            positionGroup.push(ribcagePosition);
+        if (!!nipplePosition)
+            positionGroup.push(nipplePosition);
+        let copyPosition = JSON.parse(JSON.stringify(positionGroup));
+        let rePositionGroup = [];
+        // group same slice points
+        positionGroup.forEach((p) => {
+            let temp = [];
+            let sameIndex = [];
+            for (let i = 0; i < copyPosition.length; i++) {
+                if (p.z == copyPosition[i].z) {
+                    temp.push(copyPosition[i]);
+                    sameIndex.push(i);
+                }
+            }
+            sameIndex.reverse();
+            sameIndex.forEach(i => copyPosition.splice(i, 1));
+            if (temp.length > 0)
+                rePositionGroup.push(temp);
+            if (copyPosition.length == 0) {
+                return;
+            }
+        });
+        rePositionGroup.forEach((group) => {
+            group.forEach(p => {
+                this.drawSphereCore(ctx, p.x, p.y, this.nrrd_states.sphereRadius, p.color);
+            });
+            this.storeSphereImages(group[0].z, axis);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        });
+    }
     /****************************Sphere functions****************************************************/
     // for sphere
     storeSphereImages(index, axis) {
@@ -71201,21 +71414,29 @@ class DrawToolCore extends CommToolsData {
         const ctx = this.protectedData.ctxes.drawingSphereCtx;
         const canvas = this.protectedData.canvases.drawingSphereCanvas;
         if (preIndex === nextIndex) {
-            this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor);
+            this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius, this.gui_states.fillColor);
             this.storeSphereImages(preIndex, axis);
         }
         else {
-            this.drawSphereCore(ctx, mouseX, mouseY, (this.nrrd_states.sphereRadius - decay) / this.nrrd_states.sizeFoctor);
+            this.drawSphereCore(ctx, mouseX, mouseY, (this.nrrd_states.sphereRadius - decay), this.gui_states.fillColor);
             this.drawImageOnEmptyImage(canvas);
             this.storeSphereImages(preIndex, axis);
             this.storeSphereImages(nextIndex, axis);
         }
         ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
-    drawSphereCore(ctx, x, y, radius) {
+    /**
+     *
+     * @param ctx draw sphere canvas ctx
+     * @param x width must be match the origin size, size factor 1, ignore the size factor
+     * @param y height must be match the origin size, size factor 1, ignore the size factor
+     * @param radius radius must be match the origin size, size factor 1, ignore the size factor
+     * @param color sphere color
+     */
+    drawSphereCore(ctx, x, y, radius, color) {
         ctx.beginPath();
         ctx.arc(x, y, radius, 0, 2 * Math.PI);
-        ctx.fillStyle = this.gui_states.fillColor;
+        ctx.fillStyle = color;
         ctx.fill();
         ctx.closePath();
     }
@@ -71260,17 +71481,46 @@ class DrawToolCore extends CommToolsData {
         };
         return sphereEvent;
     }
+    drawCalculatorSphere(radius) {
+        // clear canvas
+        const [canvas, ctx] = this.clearSphereCanvas();
+        if (!!this.nrrd_states.tumourSphereOrigin && this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][2] === this.nrrd_states.currentIndex) {
+            this.drawSphereCore(ctx, this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][0], this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.tumourColor);
+        }
+        if (!!this.nrrd_states.skinSphereOrigin && this.nrrd_states.skinSphereOrigin[this.protectedData.axis][2] === this.nrrd_states.currentIndex) {
+            this.drawSphereCore(ctx, this.nrrd_states.skinSphereOrigin[this.protectedData.axis][0], this.nrrd_states.skinSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.skinColor);
+        }
+        if (!!this.nrrd_states.ribSphereOrigin && this.nrrd_states.ribSphereOrigin[this.protectedData.axis][2] === this.nrrd_states.currentIndex) {
+            this.drawSphereCore(ctx, this.nrrd_states.ribSphereOrigin[this.protectedData.axis][0], this.nrrd_states.ribSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.ribcageColor);
+        }
+        if (!!this.nrrd_states.nippleSphereOrigin && this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][2] === this.nrrd_states.currentIndex) {
+            this.drawSphereCore(ctx, this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][0], this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.nippleColor);
+        }
+        this.protectedData.ctxes.drawingLayerMasterCtx.drawImage(canvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+    }
     drawSphere(mouseX, mouseY, radius) {
         // clear canvas
-        this.protectedData.canvases.drawingSphereCanvas.width =
-            this.protectedData.canvases.drawingCanvasLayerMaster.width;
-        this.protectedData.canvases.drawingSphereCanvas.height =
-            this.protectedData.canvases.drawingCanvasLayerMaster.height;
+        const [canvas, ctx] = this.clearSphereCanvas();
+        this.drawSphereCore(ctx, mouseX, mouseY, radius, this.gui_states.fillColor);
+        console.log("when drawing shpere on canvas");
+        console.log("Line 1256 mastercanvasesize:", this.protectedData.canvases.drawingCanvasLayerMaster.width, this.protectedData.canvases.drawingCanvasLayerMaster.height);
+        console.log("current xy:", mouseX, mouseY);
+        console.log("current changed width:", this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+        this.protectedData.ctxes.drawingLayerMasterCtx.drawImage(canvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+    }
+    clearSphereCanvas() {
+        // this.protectedData.canvases.drawingSphereCanvas.width =
+        //   this.protectedData.canvases.drawingCanvasLayerMaster.width;
+        // this.protectedData.canvases.drawingSphereCanvas.height =
+        //   this.protectedData.canvases.drawingCanvasLayerMaster.height;
+        // clear drawingCanvasLayerMaster
+        this.protectedData.canvases.drawingCanvasLayerMaster.width = this.protectedData.canvases.drawingCanvasLayerMaster.width;
+        // resize sphere canvas size to original size
+        this.protectedData.canvases.drawingSphereCanvas.width = this.protectedData.canvases.originCanvas.width;
+        this.protectedData.canvases.drawingSphereCanvas.height = this.protectedData.canvases.originCanvas.height;
         const canvas = this.protectedData.canvases.drawingSphereCanvas;
         const ctx = this.protectedData.ctxes.drawingSphereCtx;
-        this.protectedData.ctxes.drawingLayerMasterCtx.clearRect(0, 0, canvas.width, canvas.height);
-        this.drawSphereCore(ctx, mouseX, mouseY, radius);
-        this.protectedData.ctxes.drawingLayerMasterCtx.drawImage(canvas, 0, 0, this.nrrd_states.changedWidth, this.nrrd_states.changedHeight);
+        return [canvas, ctx];
     }
     /**
     * We generate the MRI slice from threejs based on mm, but when we display it is based on pixel size/distance.
@@ -71368,9 +71618,9 @@ class DrawToolCore extends CommToolsData {
         }
         return { currentIndex, oldIndex, convertCursorNumX, convertCursorNumY };
     }
-    setUpSphereOrigins(mouseX, mouseY) {
+    setUpSphereOrigins(mouseX, mouseY, sliceIndex) {
         const convertCursor = (from, to) => {
-            const convertObj = this.convertCursorPoint(from, to, mouseX, mouseY, this.nrrd_states.currentIndex);
+            const convertObj = this.convertCursorPoint(from, to, mouseX, mouseY, sliceIndex);
             return {
                 convertCursorNumX: convertObj === null || convertObj === void 0 ? void 0 : convertObj.convertCursorNumX,
                 convertCursorNumY: convertObj === null || convertObj === void 0 ? void 0 : convertObj.convertCursorNumY,
@@ -71497,7 +71747,7 @@ class DrawToolCore extends CommToolsData {
     storeAllImages(index, label) {
         // const image: HTMLImageElement = new Image();
         // resize the drawing image data
-        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere) {
+        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere && !this.gui_states.calculator) {
             this.setEmptyCanvasSize();
             this.drawImageOnEmptyImage(this.protectedData.canvases.drawingCanvasLayerMaster);
         }
@@ -71569,7 +71819,7 @@ class DrawToolCore extends CommToolsData {
                 break;
         }
         this.storeImageToAxis(index, this.protectedData.maskData.paintImages, imageData);
-        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere) {
+        if (!this.nrrd_states.loadMaskJson && !this.gui_states.sphere && !this.gui_states.calculator) {
             this.storeEachLayerImage(index, label);
         }
     }
@@ -72044,6 +72294,18 @@ class NrrdTools extends DrawToolCore {
     getMaskData() {
         return this.protectedData.maskData;
     }
+    // set calculate distance sphere position
+    setCalculateDistanceSphere(x, y, sliceIndex, cal_position) {
+        this.nrrd_states.sphereRadius = 5;
+        // move to tumour slice
+        const steps = sliceIndex - this.nrrd_states.currentIndex;
+        this.setSliceMoving(steps * this.protectedData.displaySlices.length);
+        // mock mouse down
+        // if user zoom the panel, we need to consider the size factor 
+        this.drawCalSphereDown(x * this.nrrd_states.sizeFoctor, y * this.nrrd_states.sizeFoctor, sliceIndex, cal_position);
+        // mock mouse up
+        this.drawCalSphereUp();
+    }
     getSharedPlace(len, ratio) {
         let old = -1;
         let same = [];
@@ -72269,6 +72531,10 @@ class NrrdTools extends DrawToolCore {
             this.protectedData.canvases.drawingCanvas.width;
         this.protectedData.canvases.displayCanvas.width =
             this.protectedData.canvases.displayCanvas.width;
+        this.nrrd_states.tumourSphereOrigin = null;
+        this.nrrd_states.ribSphereOrigin = null;
+        this.nrrd_states.skinSphereOrigin = null;
+        this.nrrd_states.nippleSphereOrigin = null;
     }
     setSliceMoving(step) {
         if (this.protectedData.mainPreSlices) {
@@ -72450,10 +72716,13 @@ class NrrdTools extends DrawToolCore {
             this.protectedData.canvases.originCanvas.width;
         this.nrrd_states.originHeight =
             this.protectedData.canvases.originCanvas.height;
+        // In html the width and height is pixels,
+        // So the value must be int
+        // Therefore, we must use Math.floor rather than using Math.ceil
         this.nrrd_states.changedWidth =
-            this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor);
+            Math.floor(this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor));
         this.nrrd_states.changedHeight =
-            this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor);
+            Math.floor(this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor));
         this.resizePaintArea(this.nrrd_states.sizeFoctor);
         this.resetPaintAreaUIPosition();
     }
@@ -72551,8 +72820,8 @@ class NrrdTools extends DrawToolCore {
         this.protectedData.canvases.drawingCanvas.width =
             this.protectedData.canvases.drawingCanvas.width;
         this.resetLayerCanvas();
-        this.nrrd_states.changedWidth = this.nrrd_states.originWidth * factor;
-        this.nrrd_states.changedHeight = this.nrrd_states.originHeight * factor;
+        this.nrrd_states.changedWidth = Math.floor(this.nrrd_states.originWidth * factor);
+        this.nrrd_states.changedHeight = Math.floor(this.nrrd_states.originHeight * factor);
         /**
          * resize canvas
          */
@@ -72908,7 +73177,7 @@ function evaluateElement(element, weights) {
 }
 
 // import * as kiwrious from "copper3d_plugin_heart_k";
-const REVISION = "v2.0.9";
-console.log("%cCopper3D Visualisation %cBeta:v2.0.9", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+const REVISION = "v2.1.1";
+console.log("%cCopper3D Visualisation %cBeta:v2.1.1", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 export { CameraViewPoint, Copper3dTrackballControls, MeshNodeTool, NrrdTools, REVISION, addBoxHelper, addLabelToScene, configKiwriousHeart, convert3DPostoScreenPos, convertScreenPosto3DPos, copperMScene, copperMSceneRenderer, copperRenderer, copperRendererOnDemond, copperScene, copperSceneOnDemond, createTexture2D_NRRD, fullScreenListenner, kiwrious, loading, removeGuiFolderChilden, setHDRFilePath, throttle };