copper3d 2.1.2 → 2.2.0

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
@@ -71811,7 +71827,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 +71860,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 +71931,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 +71990,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 +72091,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 +72112,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 +72303,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 +72341,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;
@@ -72558,7 +72586,7 @@ class DrawToolCore extends CommToolsData {
             },
             y: {
                 x: (val) => Math.ceil((val / nrrd_y_mm) * dimensions[1]),
-                z: (val) => Math.ceil((val / nrrd_z_mm) * dimensions[2]),
+                z: (val) => Math.ceil((1 - val / nrrd_z_mm) * dimensions[2]),
             },
             z: {
                 x: (val) => Math.ceil((val / nrrd_x_mm) * dimensions[0]),
@@ -72576,7 +72604,7 @@ class DrawToolCore extends CommToolsData {
             },
             z: {
                 x: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
-                y: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
+                y: (sliceIndex) => Math.ceil((1 - sliceIndex / dimensions[2]) * nrrd_z_mm),
             },
         };
         if (from === to) {
@@ -72592,7 +72620,7 @@ class DrawToolCore extends CommToolsData {
             currentIndex = convertIndex[from][to](cursorNumX);
             oldIndex = currentIndex * ratios.x;
             convertCursorNumY = convertCursor[from][to](currentSliceIndex);
-            convertCursorNumX = cursorNumY;
+            convertCursorNumX = dimensions[2] * ratios.z - cursorNumY;
         }
         else if (from === "z" && to === "y") {
             currentIndex = convertIndex[from][to](cursorNumY);
@@ -72604,7 +72632,7 @@ class DrawToolCore extends CommToolsData {
             currentIndex = convertIndex[from][to](cursorNumY);
             oldIndex = currentIndex * ratios[to];
             convertCursorNumX = convertCursor[from][to](currentSliceIndex);
-            convertCursorNumY = cursorNumX;
+            convertCursorNumY = dimensions[2] * ratios.z - cursorNumX;
         }
         else if (from === "x" && to === "z") {
             currentIndex = convertIndex[from][to](cursorNumX);
@@ -73909,7 +73937,7 @@ class NrrdTools extends DrawToolCore {
      * Under different axis(sagittal, Axial, Coronal), the flip orientation is different.
      */
     flipDisplayImageByAxis() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (this.protectedData.axis === "x") {
             (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.scale(-1, -1);
             (_b = this.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.translate(-this.nrrd_states.changedWidth, -this.nrrd_states.changedHeight);
@@ -73918,6 +73946,10 @@ class NrrdTools extends DrawToolCore {
             (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.scale(1, -1);
             (_d = this.protectedData.ctxes.displayCtx) === null || _d === void 0 ? void 0 : _d.translate(0, -this.nrrd_states.changedHeight);
         }
+        else if (this.protectedData.axis === "y") {
+            (_e = this.protectedData.ctxes.displayCtx) === null || _e === void 0 ? void 0 : _e.scale(1, -1);
+            (_f = this.protectedData.ctxes.displayCtx) === null || _f === void 0 ? void 0 : _f.translate(0, -this.nrrd_states.changedHeight);
+        }
     }
     clearDictionary(dic) {
         for (var key in dic) {
@@ -73973,6 +74005,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 {
@@ -74182,7 +74250,7 @@ function evaluateElement(element, weights) {
 }
 
 // import * as kiwrious from "copper3d_plugin_heart_k";
-const REVISION = "v2.1.2";
-console.log("%cCopper3D Visualisation %cBeta:v2.1.2", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+const REVISION = "v2.2.0";
+console.log("%cCopper3D Visualisation %cBeta:v2.2.0", "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
@@ -71819,7 +71835,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 +71868,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 +71939,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 +71998,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 +72099,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 +72120,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 +72311,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 +72349,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;
@@ -72566,7 +72594,7 @@ void main() {
 	            },
 	            y: {
 	                x: (val) => Math.ceil((val / nrrd_y_mm) * dimensions[1]),
-	                z: (val) => Math.ceil((val / nrrd_z_mm) * dimensions[2]),
+	                z: (val) => Math.ceil((1 - val / nrrd_z_mm) * dimensions[2]),
 	            },
 	            z: {
 	                x: (val) => Math.ceil((val / nrrd_x_mm) * dimensions[0]),
@@ -72584,7 +72612,7 @@ void main() {
 	            },
 	            z: {
 	                x: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
-	                y: (sliceIndex) => Math.ceil((sliceIndex / dimensions[2]) * nrrd_z_mm),
+	                y: (sliceIndex) => Math.ceil((1 - sliceIndex / dimensions[2]) * nrrd_z_mm),
 	            },
 	        };
 	        if (from === to) {
@@ -72600,7 +72628,7 @@ void main() {
 	            currentIndex = convertIndex[from][to](cursorNumX);
 	            oldIndex = currentIndex * ratios.x;
 	            convertCursorNumY = convertCursor[from][to](currentSliceIndex);
-	            convertCursorNumX = cursorNumY;
+	            convertCursorNumX = dimensions[2] * ratios.z - cursorNumY;
 	        }
 	        else if (from === "z" && to === "y") {
 	            currentIndex = convertIndex[from][to](cursorNumY);
@@ -72612,7 +72640,7 @@ void main() {
 	            currentIndex = convertIndex[from][to](cursorNumY);
 	            oldIndex = currentIndex * ratios[to];
 	            convertCursorNumX = convertCursor[from][to](currentSliceIndex);
-	            convertCursorNumY = cursorNumX;
+	            convertCursorNumY = dimensions[2] * ratios.z - cursorNumX;
 	        }
 	        else if (from === "x" && to === "z") {
 	            currentIndex = convertIndex[from][to](cursorNumX);
@@ -73917,7 +73945,7 @@ void main() {
 	     * Under different axis(sagittal, Axial, Coronal), the flip orientation is different.
 	     */
 	    flipDisplayImageByAxis() {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e, _f;
 	        if (this.protectedData.axis === "x") {
 	            (_a = this.protectedData.ctxes.displayCtx) === null || _a === void 0 ? void 0 : _a.scale(-1, -1);
 	            (_b = this.protectedData.ctxes.displayCtx) === null || _b === void 0 ? void 0 : _b.translate(-this.nrrd_states.changedWidth, -this.nrrd_states.changedHeight);
@@ -73926,6 +73954,10 @@ void main() {
 	            (_c = this.protectedData.ctxes.displayCtx) === null || _c === void 0 ? void 0 : _c.scale(1, -1);
 	            (_d = this.protectedData.ctxes.displayCtx) === null || _d === void 0 ? void 0 : _d.translate(0, -this.nrrd_states.changedHeight);
 	        }
+	        else if (this.protectedData.axis === "y") {
+	            (_e = this.protectedData.ctxes.displayCtx) === null || _e === void 0 ? void 0 : _e.scale(1, -1);
+	            (_f = this.protectedData.ctxes.displayCtx) === null || _f === void 0 ? void 0 : _f.translate(0, -this.nrrd_states.changedHeight);
+	        }
 	    }
 	    clearDictionary(dic) {
 	        for (var key in dic) {
@@ -73981,6 +74013,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 {
@@ -74190,8 +74258,8 @@ void main() {
 	}
 
 	// import * as kiwrious from "copper3d_plugin_heart_k";
-	const REVISION = "v2.1.2";
-	console.log("%cCopper3D Visualisation %cBeta:v2.1.2", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
+	const REVISION = "v2.2.0";
+	console.log("%cCopper3D Visualisation %cBeta:v2.2.0", "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 	exports.CameraViewPoint = CameraViewPoint;
 	exports.Copper3dTrackballControls = Copper3dTrackballControls;

package/dist/index.d.ts

@@ -19,6 +19,6 @@ 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 "./css/style.css";
-export declare const REVISION = "v2.1.2";
+export declare const REVISION = "v2.2.0";
 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 };

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