Merge pull request #296 from LinkunGao/feat/v2.0.7

Feat/v2.0.7

docs/source/conf.py

@@ -23,7 +23,7 @@
 
 # The full version, including alpha/beta/rc tags
 
-release = 'v2.0.6'
+release = 'v2.0.7'
 
 
 

docs/source/release/release.md

@@ -1947,3 +1947,12 @@ Fixed cursor not switch issue when user click eraser and pencil buttons.
 - Fix sphere and crosshair function
   - all based on sizeFactor:1
   - after zoom, scale them.
+
+## Release v2.0.7
+
+- add an enableContrastDragEvents(callback:(step:number, towards:"horizental"|"vertical")=>void) function in NrrdTools class.
+  - Allow user to use drag function to change the image contrast: windowHigh and windowCenter.
+  - Horizental: windowCenter, left to right increase, right to left decrease.
+  - Vertical: windowHigh, top to bottom increase, bottom to top decrease.
+- fixed guiparameter image volume not change bug.
+- more clear log error in copperScene loadObj function.

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.0.6",
+  "version": "2.0.7",
   "main": "dist/bundle.umd.js",
   "moudle": "dist/bundle.esm.js",
   "types": "dist/types/index.d.ts",

src/Scene/commonSceneMethod.ts

@@ -369,7 +369,7 @@ export class commonScene {
       (xhr: any) => {},
       // called when loading has errors
       (error: any) => {
-        console.log("An error happened");
+        console.log("An error happened: ", error);
       }
     );
   }

src/Utils/segmentation/CommToolsData.ts

@@ -151,6 +151,7 @@ export class CommToolsData {
       currentShowingSlice: undefined,
       mainPreSlices: undefined,
       Is_Shift_Pressed: false,
+      Is_Ctrl_Pressed:false,
       Is_Draw: false,
       axis: "z",
       maskData: {

src/Utils/segmentation/DragOperator.ts

@@ -169,9 +169,19 @@ export class DragOperator {
       if (ev.key === "Shift") {
         this.removeDragMode();
       }
+      if (ev.key === 'Control' || ev.key === 'Meta') {
+        if(this.protectedData.Is_Ctrl_Pressed){
+          this.removeDragMode();
+        }else{
+          this.configDragMode();
+        }
+      }
     });
     this.container.addEventListener("keyup", (ev: KeyboardEvent) => {
       if (ev.key === "Shift" && !this.gui_states.sphere) {
+        if(this.protectedData.Is_Ctrl_Pressed){
+          return
+        }
         this.configDragMode();
       }
     });

src/Utils/segmentation/DrawToolCore.ts

@@ -1,14 +1,15 @@
 import {
   IConvertObjType,
   IDrawingEvents,
+  IContrastEvents,
   IDrawOpts,
   IPaintImage,
   IPaintImages,
   ICommXY,
   IUndoType,
 } from "./coreTools/coreType";
 import { CommToolsData } from "./CommToolsData";
-import { switchEraserSize, switchPencilIcon } from "../utils";
+import { switchEraserSize, switchPencilIcon, throttle } from "../utils";
 
 export class DrawToolCore extends CommToolsData {
   container: HTMLElement;
@@ -24,6 +25,19 @@ export class DrawToolCore extends CommToolsData {
     handleSphereWheel: (e: WheelEvent) => {},
   };
 
+  contrastEventPrameters:IContrastEvents = {
+    move_x:0,
+    move_y:0,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    handleOnContrastMouseDown: (ev: MouseEvent) => {},
+    handleOnContrastMouseMove: (ev: MouseEvent) => {},
+    handleOnContrastMouseUp: (ev: MouseEvent) => {},
+    handleOnContrastMouseLeave:(ev: MouseEvent) => {},
+  }
+
   eraserUrls: string[] = [];
   pencilUrls: string[] = [];
   undoArray: Array<IUndoType> = [];
@@ -43,9 +57,23 @@ export class DrawToolCore extends CommToolsData {
   private initDrawToolCore() {
     this.container.addEventListener("keydown", (ev: KeyboardEvent) => {
       if (ev.key === "Shift" && !this.gui_states.sphere) {
+        if(this.protectedData.Is_Ctrl_Pressed){
+          this.protectedData.Is_Shift_Pressed = false;
+          return;
+        }
         this.protectedData.Is_Shift_Pressed = true;
         this.nrrd_states.enableCursorChoose = false;
       }
+      if (ev.key === 'Control' || ev.key === 'Meta') {
+        // Ctrl key pressed on either Windows or macOS
+        this.protectedData.Is_Shift_Pressed = false;
+        this.protectedData.Is_Ctrl_Pressed = !this.protectedData.Is_Ctrl_Pressed; 
+        if(this.protectedData.Is_Ctrl_Pressed){
+          this.configContrastDragMode();
+        }else{
+          this.removeContrastDragMode();
+        }
+      }
       if (ev.key === "s") {
         this.protectedData.Is_Draw = false;
         this.nrrd_states.enableCursorChoose =
@@ -1739,7 +1767,103 @@ findSliceInSharedPlace() {
 
   /******************************** Utils gui related functions ***************************************/
 
+  /**
+   * Set up root container events fns for drag function
+   * @param callback 
+   */
+  setupConrastEvents(callback:(step:number, towards:"horizental"|"vertical")=>void){
+
+    this.contrastEventPrameters.w = this.container.offsetWidth;
+    this.contrastEventPrameters.h = this.container.offsetHeight;
+
+    this.contrastEventPrameters.handleOnContrastMouseDown = (ev: MouseEvent) => {
+      if(ev.button === 0){
+        this.contrastEventPrameters.x = ev.offsetX / this.contrastEventPrameters.x;
+        this.contrastEventPrameters.y = ev.offsetY / this.contrastEventPrameters.h;
+        this.container.addEventListener(
+          "pointermove",
+          this.contrastEventPrameters.handleOnContrastMouseMove)
+      }
+    }
+    this.contrastEventPrameters.handleOnContrastMouseUp = (ev: MouseEvent) => {
+      this.container.removeEventListener(
+        "pointermove",
+        this.contrastEventPrameters.handleOnContrastMouseMove)
+    }
+
+    this.contrastEventPrameters.handleOnContrastMouseMove = throttle((ev: MouseEvent) => {
+      if (this.contrastEventPrameters.y - ev.offsetY / this.contrastEventPrameters.h >= 0) {
+        this.contrastEventPrameters.move_y = -Math.ceil(
+          (this.contrastEventPrameters.y - ev.offsetY / this.contrastEventPrameters.h) * 10
+          );
+      } else {
+        this.contrastEventPrameters.move_y = -Math.floor(
+          (this.contrastEventPrameters.y - ev.offsetY / this.contrastEventPrameters.h) * 10
+        );
+      }
+
+      if(this.contrastEventPrameters.move_y !==0 && Math.abs(this.contrastEventPrameters.move_y)===1){
+        callback(this.contrastEventPrameters.move_y, "vertical");
+      }
+      if (this.contrastEventPrameters.x - ev.offsetX / this.contrastEventPrameters.w >= 0) {
+        this.contrastEventPrameters.move_x = -Math.ceil(
+          (this.contrastEventPrameters.x - ev.offsetX / this.contrastEventPrameters.w) * 10
+          );
+      } else {
+        this.contrastEventPrameters.move_x = -Math.floor(
+          (this.contrastEventPrameters.x - ev.offsetX / this.contrastEventPrameters.w) * 10
+        );
+      }
+      if(this.contrastEventPrameters.move_x !==0 && Math.abs(this.contrastEventPrameters.move_x)===1){
+        callback(this.contrastEventPrameters.move_x, "horizental");
+      }
+
+      this.contrastEventPrameters.x = ev.offsetX / this.contrastEventPrameters.w;
+      this.contrastEventPrameters.y = ev.offsetY / this.contrastEventPrameters.h;
+
+    },100)
+  }
+
+  configContrastDragMode = () => {
+    this.container.style.cursor = "pointer";
+    this.container.addEventListener(
+      "pointerdown",
+      this.contrastEventPrameters.handleOnContrastMouseDown,
+      true
+    );
+    this.container.addEventListener(
+      "pointerup",
+      this.contrastEventPrameters.handleOnContrastMouseUp,
+      true
+    );
+  };
+
+  removeContrastDragMode = () => {
+    this.container.style.cursor = "";
+    this.container.removeEventListener(
+      "pointerdown",
+      this.contrastEventPrameters.handleOnContrastMouseDown,
+      true
+    );
+    this.container.removeEventListener(
+      "pointermove",
+      this.contrastEventPrameters.handleOnContrastMouseMove,
+      true);
+    this.container.removeEventListener(
+      "pointerup",
+      this.contrastEventPrameters.handleOnContrastMouseUp,
+      true
+    );
+    this.container.removeEventListener(
+      "pointerleave",
+      this.contrastEventPrameters.handleOnContrastMouseLeave,
+      true
+    );
+    this.setIsDrawFalse(1000);
+  };
+
   updateSlicesContrast(value: number, flag: string) {
+
     switch (flag) {
       case "lowerThreshold":
         this.protectedData.displaySlices.forEach((slice, index) => {

src/Utils/segmentation/NrrdTools.ts

@@ -15,6 +15,7 @@ import {
   ISkipSlicesDictType,
   IMaskData,
   IDragOpts,
+  IGuiParameterSettings
 } from "./coreTools/coreType";
 import { DragOperator } from "./DragOperator";
 import { DrawToolCore } from "./DrawToolCore";
@@ -30,7 +31,7 @@ export class NrrdTools extends DrawToolCore {
 
   private initState: boolean = true;
   private preTimer: any;
-  private guiParameterSettings: any;
+  private guiParameterSettings: IGuiParameterSettings|undefined;
 
   constructor(container: HTMLDivElement) {
     super(container);
@@ -93,6 +94,14 @@ export class NrrdTools extends DrawToolCore {
     this.dragOperator.setShowDragNumberDiv(panel);
   }
 
+  /**
+   * Enable the drag function for contrast images window center and window high.
+   * @param callback 
+   */
+  enableContrastDragEvents(callback:(step:number, towards:"horizental"|"vertical")=>void){
+    this.setupConrastEvents(callback)
+  }
+
   /**
    * Set up GUI for drawing panel
    * @param gui GUI
@@ -148,6 +157,13 @@ export class NrrdTools extends DrawToolCore {
   }
 
   getGuiSettings() {
+    if(!!this.guiParameterSettings){
+      // update image volume
+      this.guiParameterSettings.windowHigh.value = this.guiParameterSettings.windowLow.value = this.protectedData.mainPreSlices.volume;
+      this.guiParameterSettings.windowHigh.max = this.guiParameterSettings.windowLow.max = this.protectedData.mainPreSlices.volume.max;
+      this.guiParameterSettings.windowHigh.min = this.guiParameterSettings.windowLow.min = this.protectedData.mainPreSlices.volume.min;
+    }
+
     return {
       guiState: this.gui_states,
       guiSetting: this.guiParameterSettings,