copper3d 2.0.9 → 2.1.1

package/dist/bundle.umd.js

@@ -49844,7 +49844,7 @@ void main() {
 
 	class baseRenderer {
 	    constructor(container, options) {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e;
 	        this.visualCtrls = [];
 	        this.container = container;
 	        this.options = options;
@@ -49874,7 +49874,7 @@ void main() {
 	            });
 	        }
 	        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,
@@ -49906,6 +49906,9 @@ void main() {
 	        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();
@@ -58729,7 +58732,9 @@ void main() {
 	                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;
 	        }
@@ -69682,6 +69687,12 @@ void main() {
 	        .onChange(() => {
 	        updateGuiSphereState();
 	    });
+	    actionsFolder
+	        .add(configs.gui_states, "calculator")
+	        .name("Calculator")
+	        .onChange(() => {
+	        updateCalculatorState();
+	    });
 	    actionsFolder
 	        .add(configs.gui_states, "brushAndEraserSize")
 	        .name("BrushAndEraserSize")
@@ -69708,6 +69719,12 @@ void main() {
 	        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")
@@ -69854,6 +69871,43 @@ void main() {
 	            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");
@@ -69892,6 +69946,14 @@ void main() {
 	            name: "Eraser",
 	            onChange: updateGuiEraserState,
 	        },
+	        calculator: {
+	            name: "Calculator",
+	            onChange: updateCalculatorState,
+	        },
+	        cal_distance: {
+	            name: "CalculatorDistance",
+	            onChange: updateCalDistance
+	        },
 	        clear: {
 	            name: "Clear",
 	        },
@@ -70316,6 +70378,14 @@ void main() {
 	            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,
@@ -70330,6 +70400,7 @@ void main() {
 	            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 = {
@@ -70365,7 +70436,9 @@ void main() {
 	            brushAndEraserSize: 15,
 	            cursor: "dot",
 	            label: "label1",
+	            cal_distance: "tumour",
 	            sphere: false,
+	            calculator: false,
 	            readyToUpdate: true,
 	            defaultPaintCursor: switchPencilIcon("dot"),
 	            max_sensitive: 100,
@@ -70475,6 +70548,12 @@ void main() {
 	    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
 	     */
@@ -70609,7 +70688,7 @@ void main() {
 	    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;
@@ -70686,9 +70765,64 @@ void main() {
 	        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;
 	        /**
@@ -70811,25 +70945,13 @@ void main() {
 	                    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) {
@@ -70848,6 +70970,27 @@ void main() {
 	        };
 	        // 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;
@@ -70941,7 +71084,8 @@ void main() {
 	                    // 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");
@@ -70950,18 +71094,31 @@ void main() {
 	                    }
 	                    !!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;
@@ -71023,8 +71180,8 @@ void main() {
 	                        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);
@@ -71154,15 +71311,17 @@ void main() {
 	            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;
@@ -71190,6 +71349,60 @@ void main() {
 	    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) {
@@ -71209,21 +71422,29 @@ void main() {
 	        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();
 	    }
@@ -71268,17 +71489,46 @@ void main() {
 	        };
 	        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.
@@ -71376,9 +71626,9 @@ void main() {
 	        }
 	        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,
@@ -71505,7 +71755,7 @@ void main() {
 	    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);
 	        }
@@ -71577,7 +71827,7 @@ void main() {
 	                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);
 	        }
 	    }
@@ -72052,6 +72302,18 @@ void main() {
 	    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 = [];
@@ -72277,6 +72539,10 @@ void main() {
 	            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) {
@@ -72458,10 +72724,13 @@ void main() {
 	            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();
 	    }
@@ -72559,8 +72828,8 @@ void main() {
 	        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
 	         */
@@ -72916,8 +73185,8 @@ void main() {
 	}
 
 	// 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");
 
 	exports.CameraViewPoint = CameraViewPoint;
 	exports.Copper3dTrackballControls = Copper3dTrackballControls;

package/dist/index.d.ts

@@ -17,8 +17,8 @@ import { Copper3dTrackballControls } from "./Controls/Copper3dTrackballControls"
 import { MeshNodeTool } from "./Utils/MeshNodeTool";
 import { removeGuiFolderChilden } from "./Utils/segmentation/coreTools/gui";
 import { nrrdMeshesType, nrrdSliceType, SensorDecodedValue_kiwrious, SensorReadResult_kiwrious, HeartRateResult_kiwrious, loadingBarType, exportPaintImageType, IOptVTKLoader } from "./types/types";
-import { IPaintImage } from "./Utils/segmentation/coreTools/coreType";
+import { IPaintImage, ICommXYZ } from "./Utils/segmentation/coreTools/coreType";
 import "./css/style.css";
-export declare const REVISION = "v2.0.9";
+export declare const REVISION = "v2.1.1";
 export { copperRenderer, copperRendererOnDemond, copperMSceneRenderer, setHDRFilePath, addLabelToScene, convert3DPostoScreenPos, convertScreenPosto3DPos, addBoxHelper, fullScreenListenner, configKiwriousHeart, copperScene, copperSceneOnDemond, copperMScene, CameraViewPoint, kiwrious, NrrdTools, loading, Copper3dTrackballControls, createTexture2D_NRRD, MeshNodeTool, throttle, removeGuiFolderChilden, };
-export type { positionType, screenPosType, optsType, nrrdMeshesType, nrrdSliceType, SensorDecodedValue_kiwrious, SensorReadResult_kiwrious, HeartRateResult_kiwrious, loadingBarType, IPaintImage, exportPaintImageType, IOptVTKLoader, };
+export type { positionType, screenPosType, optsType, nrrdMeshesType, nrrdSliceType, SensorDecodedValue_kiwrious, SensorReadResult_kiwrious, HeartRateResult_kiwrious, loadingBarType, IPaintImage, exportPaintImageType, IOptVTKLoader, ICommXYZ };

package/dist/index.js

@@ -18,7 +18,7 @@ import { Copper3dTrackballControls } from "./Controls/Copper3dTrackballControls"
 import { MeshNodeTool } from "./Utils/MeshNodeTool";
 import { removeGuiFolderChilden } from "./Utils/segmentation/coreTools/gui";
 import "./css/style.css";
-export 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");
+export 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 { copperRenderer, copperRendererOnDemond, copperMSceneRenderer, setHDRFilePath, addLabelToScene, convert3DPostoScreenPos, convertScreenPosto3DPos, addBoxHelper, fullScreenListenner, configKiwriousHeart, copperScene, copperSceneOnDemond, copperMScene, CameraViewPoint, kiwrious, NrrdTools, loading, Copper3dTrackballControls, createTexture2D_NRRD, MeshNodeTool, throttle, removeGuiFolderChilden, };
 //# sourceMappingURL=index.js.map

package/dist/types/Utils/segmentation/CommToolsData.d.ts

@@ -19,6 +19,10 @@ export declare class CommToolsData {
      * Rewrite this {clearStoreImages} function under NrrdTools
      */
     clearStoreImages(): void;
+    /**
+     * Rewrite this {createEmptyPaintImage} function under NrrdTools
+     */
+    createEmptyPaintImage(dimensions: Array<number>, paintImages: IPaintImages): void;
     /**
      * Rewrite this {resizePaintArea} function under NrrdTools
      */