copper3d 2.1.3 → 2.2.1

package/dist/bundle.esm.js

@@ -71146,7 +71146,7 @@ class DragOperator {
         }
         this.dragPrameters.handleOnDragMouseDown = (ev) => {
             // before start drag event, remove wheel event.
-            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
             if (ev.button === 0) {
                 this.dragPrameters.y = ev.offsetY / this.dragPrameters.h;
                 this.container.addEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
@@ -71170,18 +71170,22 @@ class DragOperator {
         }, this.dragPrameters.sensivity * 200);
         this.dragPrameters.handleOnDragMouseUp = (ev) => {
             // after drag, add the wheel event
-            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
             this.setSyncsliceNum();
             this.container.removeEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
         };
         this.configDragMode();
         this.container.addEventListener("keydown", (ev) => {
-            if (ev.key === "Shift") {
+            if (this.nrrd_states.configKeyBoard)
+                return;
+            if (ev.key === this.nrrd_states.keyboardSettings.draw) {
                 this.removeDragMode();
             }
         });
         this.container.addEventListener("keyup", (ev) => {
-            if (ev.key === 'Control' || ev.key === 'Meta') {
+            if (this.nrrd_states.configKeyBoard)
+                return;
+            if (this.nrrd_states.keyboardSettings.contrast.includes(ev.key)) {
                 /**
                  * if ctrl pressed remove the drag mode
                  */
@@ -71192,7 +71196,7 @@ class DragOperator {
                     this.configDragMode();
                 }
             }
-            if (ev.key === "Shift" && !this.gui_states.sphere) {
+            if (ev.key === this.nrrd_states.keyboardSettings.draw && !this.gui_states.sphere) {
                 if (this.protectedData.Is_Ctrl_Pressed) {
                     return;
                 }
@@ -71394,6 +71398,14 @@ class CommToolsData {
             previousPanelT: -99999,
             switchSliceFlag: false,
             labels: ["label1", "label2", "label3"],
+            configKeyBoard: false,
+            keyboardSettings: {
+                draw: "Shift",
+                undo: "z",
+                contrast: ["Control", "Meta"],
+                crosshair: "s",
+                mouseWheel: "Scroll:Zoom",
+            },
             getMask: (mask, sliceId, label, width, height, clearAllFlag) => { },
             getSphere: (sphereOrigin, sphereRadius) => { },
             getCalculateSpherePositions: (tumourSphereOrigin, skinSphereOrigin, ribSphereOrigin, nippleSphereOrigin, aixs) => { },
@@ -71636,7 +71648,7 @@ class DrawToolCore extends CommToolsData {
             handleOnDrawingMouseUp: (ev) => { },
             handleOnDrawingMouseLeave: (ev) => { },
             handleOnDrawingBrushCricleMove: (ev) => { },
-            handleZoomWheel: (e) => { },
+            handleMouseZoomSliceWheel: (e) => { },
             handleSphereWheel: (e) => { },
         };
         this.contrastEventPrameters = {
@@ -71684,7 +71696,9 @@ class DrawToolCore extends CommToolsData {
     initDrawToolCore() {
         let undoFlag = false;
         this.container.addEventListener("keydown", (ev) => {
-            if (ev.key === "Shift" && !this.gui_states.sphere && !this.gui_states.calculator) {
+            if (this.nrrd_states.configKeyBoard)
+                return;
+            if (ev.key === this.nrrd_states.keyboardSettings.draw && !this.gui_states.sphere && !this.gui_states.calculator) {
                 if (this.protectedData.Is_Ctrl_Pressed) {
                     this.protectedData.Is_Shift_Pressed = false;
                     return;
@@ -71692,18 +71706,20 @@ class DrawToolCore extends CommToolsData {
                 this.protectedData.Is_Shift_Pressed = true;
                 this.nrrd_states.enableCursorChoose = false;
             }
-            if (ev.key === "s") {
+            if (ev.key === this.nrrd_states.keyboardSettings.crosshair) {
                 this.protectedData.Is_Draw = false;
                 this.nrrd_states.enableCursorChoose =
                     !this.nrrd_states.enableCursorChoose;
             }
-            if ((ev.ctrlKey || ev.metaKey) && ev.code === "KeyZ") {
+            if ((ev.ctrlKey || ev.metaKey) && ev.key === this.nrrd_states.keyboardSettings.undo) {
                 undoFlag = true;
                 this.undoLastPainting();
             }
         });
         this.container.addEventListener("keyup", (ev) => {
-            if (ev.key === 'Control' || ev.key === 'Meta') {
+            if (this.nrrd_states.configKeyBoard)
+                return;
+            if (this.nrrd_states.keyboardSettings.contrast.includes(ev.key)) {
                 if (undoFlag) {
                     this.gui_states.readyToUpdate = true;
                     undoFlag = false;
@@ -71720,7 +71736,7 @@ class DrawToolCore extends CommToolsData {
                     this.gui_states.readyToUpdate = true;
                 }
             }
-            if (ev.key === "Shift") {
+            if (ev.key === this.nrrd_states.keyboardSettings.draw) {
                 this.protectedData.Is_Shift_Pressed = false;
             }
         });
@@ -71767,7 +71783,7 @@ class DrawToolCore extends CommToolsData {
     }
     drawCalSphereDown(x, y, sliceIndex, cal_position) {
         this.nrrd_states.sphereRadius = 5;
-        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
         let mouseX = x / this.nrrd_states.sizeFoctor;
         let mouseY = y / this.nrrd_states.sizeFoctor;
         //  record mouseX,Y, and enable crosshair function
@@ -71777,6 +71793,8 @@ class DrawToolCore extends CommToolsData {
             sliceIndex,
         ];
         this.setUpSphereOrigins(mouseX, mouseY, sliceIndex);
+        // Note the sphere origin here is x, y, z
+        // x: pixel x, y: pixel y, z: slice index (mm)
         switch (cal_position) {
             case "tumour":
                 this.nrrd_states.tumourSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
@@ -71811,7 +71829,7 @@ class DrawToolCore extends CommToolsData {
         this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
     }
     zoomActionAfterDrawSphere() {
-        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
     }
     clearSpherePrintStoreImages() {
         this.protectedData.maskData.paintImages.x.length = 0;
@@ -71844,9 +71862,14 @@ class DrawToolCore extends CommToolsData {
         this.protectedData.previousDrawingImage =
             this.protectedData.ctxes.drawingCtx.getImageData(0, 0, this.protectedData.canvases.drawingCanvas.width, this.protectedData.canvases.drawingCanvas.height);
         // let a global variable to store the wheel move event
-        this.drawingPrameters.handleZoomWheel = this.configMouseZoomWheel();
+        if (this.nrrd_states.keyboardSettings.mouseWheel === "Scroll:Zoom") {
+            this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+        }
+        else {
+            this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
+        }
         // init to add it
-        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
+        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
             passive: false,
         });
         // sphere Wheel
@@ -71910,7 +71933,7 @@ class DrawToolCore extends CommToolsData {
                 currentSliceIndex = this.protectedData.mainPreSlices.index;
             }
             // remove it when mouse click down
-            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
             if (e.button === 0) {
                 if (this.protectedData.Is_Shift_Pressed) {
                     leftclicked = true;
@@ -71969,7 +71992,7 @@ class DrawToolCore extends CommToolsData {
         const sphere = (e) => {
             // set sphere size
             this.nrrd_states.sphereRadius = 10;
-            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
             let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
             let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
             //  record mouseX,Y, and enable crosshair function
@@ -72070,7 +72093,7 @@ class DrawToolCore extends CommToolsData {
                         this.undoArray.push(undoObj);
                     }
                     // add wheel after pointer up
-                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
+                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
                         passive: false,
                     });
                 }
@@ -72091,12 +72114,12 @@ 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.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
-                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
                 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.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
                     this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
                 }
                 else if (this.gui_states.calculator &&
@@ -72282,7 +72305,7 @@ class DrawToolCore extends CommToolsData {
     // drawing canvas mouse zoom wheel
     configMouseZoomWheel() {
         let moveDistance = 1;
-        const handleZoomWheelMove = (e) => {
+        const handleMouseZoomSliceWheelMove = (e) => {
             if (this.protectedData.Is_Shift_Pressed) {
                 return;
             }
@@ -72320,7 +72343,14 @@ class DrawToolCore extends CommToolsData {
             this.setIsDrawFalse(1000);
             this.nrrd_states.sizeFoctor = moveDistance;
         };
-        return handleZoomWheelMove;
+        return handleMouseZoomSliceWheelMove;
+    }
+    configMouseSliceWheel() {
+        /**
+         * Interface for slice wheel
+         * Implement in the NrrdTools class
+         *  */
+        throw new Error("Child class must implement abstract redrawDisplayCanvas, currently you can find it in NrrdTools.");
     }
     enableCrosshair() {
         this.nrrd_states.isCursorSelect = true;
@@ -73977,6 +74007,42 @@ class NrrdTools extends DrawToolCore {
             (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
         }
     }
+    /**
+     * Config mouse slice wheel event.
+     */
+    configMouseSliceWheel() {
+        const handleMouseZoomSliceWheelMove = (e) => {
+            if (this.protectedData.Is_Shift_Pressed) {
+                return;
+            }
+            e.preventDefault();
+            if (e.deltaY < 0) {
+                this.setSliceMoving(-1);
+            }
+            else if (e.deltaY > 0) {
+                this.setSliceMoving(1);
+            }
+        };
+        return handleMouseZoomSliceWheelMove;
+    }
+    /**
+     * Update mouse wheel event.
+     */
+    updateMouseWheelEvent() {
+        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+        switch (this.nrrd_states.keyboardSettings.mouseWheel) {
+            case "Scroll:Zoom":
+                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+                break;
+            case "Scroll:Slice":
+                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
+                break;
+            default:
+                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+                break;
+        }
+        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+    }
 }
 
 class Node {
@@ -74186,7 +74252,7 @@ function evaluateElement(element, weights) {
 }
 
 // import * as kiwrious from "copper3d_plugin_heart_k";
-const REVISION = "v2.1.3";
-console.log("%cCopper3D Visualisation %cBeta:v2.1.3", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+const REVISION = "v2.2.1";
+console.log("%cCopper3D Visualisation %cBeta:v2.2.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 };

package/dist/bundle.umd.js

@@ -71154,7 +71154,7 @@ void main() {
 	        }
 	        this.dragPrameters.handleOnDragMouseDown = (ev) => {
 	            // before start drag event, remove wheel event.
-	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	            if (ev.button === 0) {
 	                this.dragPrameters.y = ev.offsetY / this.dragPrameters.h;
 	                this.container.addEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
@@ -71178,18 +71178,22 @@ void main() {
 	        }, this.dragPrameters.sensivity * 200);
 	        this.dragPrameters.handleOnDragMouseUp = (ev) => {
 	            // after drag, add the wheel event
-	            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	            this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	            this.setSyncsliceNum();
 	            this.container.removeEventListener("pointermove", this.dragPrameters.handleOnDragMouseMove, false);
 	        };
 	        this.configDragMode();
 	        this.container.addEventListener("keydown", (ev) => {
-	            if (ev.key === "Shift") {
+	            if (this.nrrd_states.configKeyBoard)
+	                return;
+	            if (ev.key === this.nrrd_states.keyboardSettings.draw) {
 	                this.removeDragMode();
 	            }
 	        });
 	        this.container.addEventListener("keyup", (ev) => {
-	            if (ev.key === 'Control' || ev.key === 'Meta') {
+	            if (this.nrrd_states.configKeyBoard)
+	                return;
+	            if (this.nrrd_states.keyboardSettings.contrast.includes(ev.key)) {
 	                /**
 	                 * if ctrl pressed remove the drag mode
 	                 */
@@ -71200,7 +71204,7 @@ void main() {
 	                    this.configDragMode();
 	                }
 	            }
-	            if (ev.key === "Shift" && !this.gui_states.sphere) {
+	            if (ev.key === this.nrrd_states.keyboardSettings.draw && !this.gui_states.sphere) {
 	                if (this.protectedData.Is_Ctrl_Pressed) {
 	                    return;
 	                }
@@ -71402,6 +71406,14 @@ void main() {
 	            previousPanelT: -99999,
 	            switchSliceFlag: false,
 	            labels: ["label1", "label2", "label3"],
+	            configKeyBoard: false,
+	            keyboardSettings: {
+	                draw: "Shift",
+	                undo: "z",
+	                contrast: ["Control", "Meta"],
+	                crosshair: "s",
+	                mouseWheel: "Scroll:Zoom",
+	            },
 	            getMask: (mask, sliceId, label, width, height, clearAllFlag) => { },
 	            getSphere: (sphereOrigin, sphereRadius) => { },
 	            getCalculateSpherePositions: (tumourSphereOrigin, skinSphereOrigin, ribSphereOrigin, nippleSphereOrigin, aixs) => { },
@@ -71644,7 +71656,7 @@ void main() {
 	            handleOnDrawingMouseUp: (ev) => { },
 	            handleOnDrawingMouseLeave: (ev) => { },
 	            handleOnDrawingBrushCricleMove: (ev) => { },
-	            handleZoomWheel: (e) => { },
+	            handleMouseZoomSliceWheel: (e) => { },
 	            handleSphereWheel: (e) => { },
 	        };
 	        this.contrastEventPrameters = {
@@ -71692,7 +71704,9 @@ void main() {
 	    initDrawToolCore() {
 	        let undoFlag = false;
 	        this.container.addEventListener("keydown", (ev) => {
-	            if (ev.key === "Shift" && !this.gui_states.sphere && !this.gui_states.calculator) {
+	            if (this.nrrd_states.configKeyBoard)
+	                return;
+	            if (ev.key === this.nrrd_states.keyboardSettings.draw && !this.gui_states.sphere && !this.gui_states.calculator) {
 	                if (this.protectedData.Is_Ctrl_Pressed) {
 	                    this.protectedData.Is_Shift_Pressed = false;
 	                    return;
@@ -71700,18 +71714,20 @@ void main() {
 	                this.protectedData.Is_Shift_Pressed = true;
 	                this.nrrd_states.enableCursorChoose = false;
 	            }
-	            if (ev.key === "s") {
+	            if (ev.key === this.nrrd_states.keyboardSettings.crosshair) {
 	                this.protectedData.Is_Draw = false;
 	                this.nrrd_states.enableCursorChoose =
 	                    !this.nrrd_states.enableCursorChoose;
 	            }
-	            if ((ev.ctrlKey || ev.metaKey) && ev.code === "KeyZ") {
+	            if ((ev.ctrlKey || ev.metaKey) && ev.key === this.nrrd_states.keyboardSettings.undo) {
 	                undoFlag = true;
 	                this.undoLastPainting();
 	            }
 	        });
 	        this.container.addEventListener("keyup", (ev) => {
-	            if (ev.key === 'Control' || ev.key === 'Meta') {
+	            if (this.nrrd_states.configKeyBoard)
+	                return;
+	            if (this.nrrd_states.keyboardSettings.contrast.includes(ev.key)) {
 	                if (undoFlag) {
 	                    this.gui_states.readyToUpdate = true;
 	                    undoFlag = false;
@@ -71728,7 +71744,7 @@ void main() {
 	                    this.gui_states.readyToUpdate = true;
 	                }
 	            }
-	            if (ev.key === "Shift") {
+	            if (ev.key === this.nrrd_states.keyboardSettings.draw) {
 	                this.protectedData.Is_Shift_Pressed = false;
 	            }
 	        });
@@ -71775,7 +71791,7 @@ void main() {
 	    }
 	    drawCalSphereDown(x, y, sliceIndex, cal_position) {
 	        this.nrrd_states.sphereRadius = 5;
-	        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	        let mouseX = x / this.nrrd_states.sizeFoctor;
 	        let mouseY = y / this.nrrd_states.sizeFoctor;
 	        //  record mouseX,Y, and enable crosshair function
@@ -71785,6 +71801,8 @@ void main() {
 	            sliceIndex,
 	        ];
 	        this.setUpSphereOrigins(mouseX, mouseY, sliceIndex);
+	        // Note the sphere origin here is x, y, z
+	        // x: pixel x, y: pixel y, z: slice index (mm)
 	        switch (cal_position) {
 	            case "tumour":
 	                this.nrrd_states.tumourSphereOrigin = JSON.parse(JSON.stringify(this.nrrd_states.sphereOrigin));
@@ -71819,7 +71837,7 @@ void main() {
 	        this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	    }
 	    zoomActionAfterDrawSphere() {
-	        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	    }
 	    clearSpherePrintStoreImages() {
 	        this.protectedData.maskData.paintImages.x.length = 0;
@@ -71852,9 +71870,14 @@ void main() {
 	        this.protectedData.previousDrawingImage =
 	            this.protectedData.ctxes.drawingCtx.getImageData(0, 0, this.protectedData.canvases.drawingCanvas.width, this.protectedData.canvases.drawingCanvas.height);
 	        // let a global variable to store the wheel move event
-	        this.drawingPrameters.handleZoomWheel = this.configMouseZoomWheel();
+	        if (this.nrrd_states.keyboardSettings.mouseWheel === "Scroll:Zoom") {
+	            this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+	        }
+	        else {
+	            this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
+	        }
 	        // init to add it
-	        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
+	        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
 	            passive: false,
 	        });
 	        // sphere Wheel
@@ -71918,7 +71941,7 @@ void main() {
 	                currentSliceIndex = this.protectedData.mainPreSlices.index;
 	            }
 	            // remove it when mouse click down
-	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	            if (e.button === 0) {
 	                if (this.protectedData.Is_Shift_Pressed) {
 	                    leftclicked = true;
@@ -71977,7 +72000,7 @@ void main() {
 	        const sphere = (e) => {
 	            // set sphere size
 	            this.nrrd_states.sphereRadius = 10;
-	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	            this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	            let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
 	            let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
 	            //  record mouseX,Y, and enable crosshair function
@@ -72078,7 +72101,7 @@ void main() {
 	                        this.undoArray.push(undoObj);
 	                    }
 	                    // add wheel after pointer up
-	                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel, {
+	                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel, {
 	                        passive: false,
 	                    });
 	                }
@@ -72099,12 +72122,12 @@ 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.removeEventListener("wheel", this.drawingPrameters.handleSphereWheel, true);
-	                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleZoomWheel);
+	                    this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                }
 	                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.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
 	                    this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", this.drawingPrameters.handleOnDrawingMouseUp);
 	                }
 	                else if (this.gui_states.calculator &&
@@ -72290,7 +72313,7 @@ void main() {
 	    // drawing canvas mouse zoom wheel
 	    configMouseZoomWheel() {
 	        let moveDistance = 1;
-	        const handleZoomWheelMove = (e) => {
+	        const handleMouseZoomSliceWheelMove = (e) => {
 	            if (this.protectedData.Is_Shift_Pressed) {
 	                return;
 	            }
@@ -72328,7 +72351,14 @@ void main() {
 	            this.setIsDrawFalse(1000);
 	            this.nrrd_states.sizeFoctor = moveDistance;
 	        };
-	        return handleZoomWheelMove;
+	        return handleMouseZoomSliceWheelMove;
+	    }
+	    configMouseSliceWheel() {
+	        /**
+	         * Interface for slice wheel
+	         * Implement in the NrrdTools class
+	         *  */
+	        throw new Error("Child class must implement abstract redrawDisplayCanvas, currently you can find it in NrrdTools.");
 	    }
 	    enableCrosshair() {
 	        this.nrrd_states.isCursorSelect = true;
@@ -73985,6 +74015,42 @@ void main() {
 	            (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.restore();
 	        }
 	    }
+	    /**
+	     * Config mouse slice wheel event.
+	     */
+	    configMouseSliceWheel() {
+	        const handleMouseZoomSliceWheelMove = (e) => {
+	            if (this.protectedData.Is_Shift_Pressed) {
+	                return;
+	            }
+	            e.preventDefault();
+	            if (e.deltaY < 0) {
+	                this.setSliceMoving(-1);
+	            }
+	            else if (e.deltaY > 0) {
+	                this.setSliceMoving(1);
+	            }
+	        };
+	        return handleMouseZoomSliceWheelMove;
+	    }
+	    /**
+	     * Update mouse wheel event.
+	     */
+	    updateMouseWheelEvent() {
+	        this.protectedData.canvases.drawingCanvas.removeEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+	        switch (this.nrrd_states.keyboardSettings.mouseWheel) {
+	            case "Scroll:Zoom":
+	                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+	                break;
+	            case "Scroll:Slice":
+	                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseSliceWheel();
+	                break;
+	            default:
+	                this.drawingPrameters.handleMouseZoomSliceWheel = this.configMouseZoomWheel();
+	                break;
+	        }
+	        this.protectedData.canvases.drawingCanvas.addEventListener("wheel", this.drawingPrameters.handleMouseZoomSliceWheel);
+	    }
 	}
 
 	class Node {
@@ -74194,8 +74260,8 @@ void main() {
 	}
 
 	// import * as kiwrious from "copper3d_plugin_heart_k";
-	const REVISION = "v2.1.3";
-	console.log("%cCopper3D Visualisation %cBeta:v2.1.3", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+	const REVISION = "v2.2.1";
+	console.log("%cCopper3D Visualisation %cBeta:v2.2.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, ICommXYZ } from "./Utils/segmentation/coreTools/coreType";
+import { IPaintImage, ICommXYZ, IGUIStates, IGuiParameterSettings, INrrdStates } from "./Utils/segmentation/coreTools/coreType";
 import "./css/style.css";
-export declare const REVISION = "v2.1.3";
+export declare const REVISION = "v2.2.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, ICommXYZ };
+export type { positionType, screenPosType, optsType, nrrdMeshesType, nrrdSliceType, SensorDecodedValue_kiwrious, SensorReadResult_kiwrious, HeartRateResult_kiwrious, loadingBarType, IPaintImage, exportPaintImageType, IOptVTKLoader, ICommXYZ, IGUIStates, IGuiParameterSettings, INrrdStates };

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.1.3";
-console.log("%cCopper3D Visualisation %cBeta:v2.1.3", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+export const REVISION = "v2.2.1";
+console.log("%cCopper3D Visualisation %cBeta:v2.2.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/DrawToolCore.d.ts

@@ -26,7 +26,8 @@ export declare class DrawToolCore extends CommToolsData {
     private paintOnCanvasLayer;
     private initAllCanvas;
     private useEraser;
-    private configMouseZoomWheel;
+    configMouseZoomWheel(): (e: WheelEvent) => void;
+    configMouseSliceWheel(): void;
     private enableCrosshair;
     drawImageOnEmptyImage(canvas: HTMLCanvasElement): void;
     /****************************Sphere calculate distance functions****************************************************/

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

@@ -160,4 +160,12 @@ export declare class NrrdTools extends DrawToolCore {
      * It is more related to change the contrast slice image's window width or center.
      */
     redrawDisplayCanvas(): void;
+    /**
+     * Config mouse slice wheel event.
+     */
+    configMouseSliceWheel(): (e: WheelEvent) => void;
+    /**
+     * Update mouse wheel event.
+     */
+    updateMouseWheelEvent(): void;
 }

package/dist/types/Utils/segmentation/coreTools/coreType.d.ts

@@ -39,7 +39,7 @@ interface IDrawingEvents {
     handleOnDrawingMouseUp: (ev: MouseEvent) => void;
     handleOnDrawingMouseLeave: (ev: MouseEvent) => void;
     handleOnDrawingBrushCricleMove: (ev: MouseEvent) => void;
-    handleZoomWheel: (e: WheelEvent) => void;
+    handleMouseZoomSliceWheel: (e: WheelEvent) => void;
     handleSphereWheel: (e: WheelEvent) => void;
 }
 interface IContrastEvents {
@@ -136,6 +136,13 @@ interface IGUIStates {
     downloadCurrentMask: () => void;
     resetZoom: () => void;
 }
+interface IKeyBoardSettings {
+    draw: string;
+    undo: string;
+    contrast: string[];
+    crosshair: string;
+    mouseWheel: "Scroll:Zoom" | "Scroll:Slice";
+}
 interface INrrdStates {
     originWidth: number;
     originHeight: number;
@@ -185,6 +192,8 @@ interface INrrdStates {
     previousPanelT: number;
     switchSliceFlag: boolean;
     labels: ["label1", "label2", "label3"];
+    configKeyBoard: boolean;
+    keyboardSettings: IKeyBoardSettings;
     getMask: (mask: ImageData, sliceId: number, label: string, width: number, height: number, clearAllFlag: boolean) => void;
     getSphere: (sphereOrigin: number[], sphereRadius: number) => void;
     getCalculateSpherePositions: (tumourSphereOrigin: ICommXYZ | null, skinSphereOrigin: ICommXYZ | null, ribSphereOrigin: ICommXYZ | null, nippleSphereOrigin: ICommXYZ | null, aixs: "x" | "y" | "z") => void;

package/dist/types/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, ICommXYZ } from "./Utils/segmentation/coreTools/coreType";
+import { IPaintImage, ICommXYZ, IGUIStates, IGuiParameterSettings, INrrdStates } from "./Utils/segmentation/coreTools/coreType";
 import "./css/style.css";
-export declare const REVISION = "v2.1.3";
+export declare const REVISION = "v2.2.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, ICommXYZ };
+export type { positionType, screenPosType, optsType, nrrdMeshesType, nrrdSliceType, SensorDecodedValue_kiwrious, SensorReadResult_kiwrious, HeartRateResult_kiwrious, loadingBarType, IPaintImage, exportPaintImageType, IOptVTKLoader, ICommXYZ, IGUIStates, IGuiParameterSettings, INrrdStates };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "copper3d",
   "description": "A 3d visualisation package base on threejs provides multiple scenes and Nrrd image load funtion.",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "main": "dist/bundle.umd.js",
   "moudle": "dist/bundle.esm.js",
   "types": "dist/types/index.d.ts",