Skip to content

Commit

Permalink
add customize keyboard settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@LinkunGao
LinkunGao committed Dec 11, 2024
1 parent 427585e commit df1e7c3
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 27 deletions.
9 changes: 9 additions & 0 deletions src/Utils/segmentation/CommToolsData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,15 @@ export class CommToolsData {
switchSliceFlag: false,
labels: ["label1", "label2", "label3"],

configKeyBoard: false,
keyboardSettings:{
draw: "Shift",
undo: "z",
contrast: ["Control", "Meta"],
crosshair: "s",
mouseWheel: "Scroll:Zoom",
},

getMask: (
mask: ImageData,
sliceId: number,
Expand Down
16 changes: 10 additions & 6 deletions src/Utils/segmentation/DragOperator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export class DragOperator {
// before start drag event, remove wheel event.
this.protectedData.canvases.drawingCanvas.removeEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
if (ev.button === 0) {
this.dragPrameters.y = ev.offsetY / this.dragPrameters.h;
Expand Down Expand Up @@ -153,7 +153,7 @@ export class DragOperator {
// after drag, add the wheel event
this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
this.setSyncsliceNum();
this.container.removeEventListener(
Expand All @@ -166,14 +166,18 @@ export class DragOperator {
this.configDragMode();

this.container.addEventListener("keydown", (ev: KeyboardEvent) => {
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: KeyboardEvent) => {

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
*/
Expand All @@ -183,7 +187,7 @@ export 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
}
Expand Down
55 changes: 37 additions & 18 deletions src/Utils/segmentation/DrawToolCore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class DrawToolCore extends CommToolsData {
handleOnDrawingMouseUp: (ev: MouseEvent) => {},
handleOnDrawingMouseLeave: (ev: MouseEvent) => {},
handleOnDrawingBrushCricleMove: (ev: MouseEvent) => {},
handleZoomWheel: (e: WheelEvent) => {},
handleMouseZoomSliceWheel: (e: WheelEvent) => {},
handleSphereWheel: (e: WheelEvent) => {},
};

Expand Down Expand Up @@ -58,7 +58,10 @@ export class DrawToolCore extends CommToolsData {
private initDrawToolCore() {
let undoFlag = false;
this.container.addEventListener("keydown", (ev: KeyboardEvent) => {
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;
Expand All @@ -67,19 +70,21 @@ export class DrawToolCore extends CommToolsData {
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: KeyboardEvent) => {

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;
Expand All @@ -97,7 +102,7 @@ export class DrawToolCore extends CommToolsData {
}
}

if (ev.key === "Shift") {
if (ev.key === this.nrrd_states.keyboardSettings.draw) {
this.protectedData.Is_Shift_Pressed = false;
}
});
Expand Down Expand Up @@ -153,7 +158,7 @@ export class DrawToolCore extends CommToolsData {
this.nrrd_states.sphereRadius = 5
this.protectedData.canvases.drawingCanvas.removeEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
let mouseX = x / this.nrrd_states.sizeFoctor;
let mouseY = y / this.nrrd_states.sizeFoctor;
Expand Down Expand Up @@ -218,7 +223,7 @@ export class DrawToolCore extends CommToolsData {
private zoomActionAfterDrawSphere(){
this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
}

Expand Down Expand Up @@ -275,11 +280,15 @@ export class DrawToolCore extends CommToolsData {
);

// 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() as any;
}
// init to add it
this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel,
this.drawingPrameters.handleMouseZoomSliceWheel,
{
passive: false,
}
Expand Down Expand Up @@ -359,7 +368,7 @@ export class DrawToolCore extends CommToolsData {
// remove it when mouse click down
this.protectedData.canvases.drawingCanvas.removeEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);

if (e.button === 0) {
Expand Down Expand Up @@ -451,7 +460,7 @@ export class DrawToolCore extends CommToolsData {

this.protectedData.canvases.drawingCanvas.removeEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
let mouseX = e.offsetX / this.nrrd_states.sizeFoctor;
let mouseY = e.offsetY / this.nrrd_states.sizeFoctor;
Expand Down Expand Up @@ -615,7 +624,7 @@ export class DrawToolCore extends CommToolsData {
// add wheel after pointer up
this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel,
this.drawingPrameters.handleMouseZoomSliceWheel,
{
passive: false,
}
Expand Down Expand Up @@ -651,7 +660,7 @@ export class DrawToolCore extends CommToolsData {

this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
this.protectedData.canvases.drawingCanvas.removeEventListener(
"pointerup",
Expand All @@ -662,7 +671,7 @@ export class DrawToolCore extends CommToolsData {
this.nrrd_states.enableCursorChoose){
this.protectedData.canvases.drawingCanvas.addEventListener(
"wheel",
this.drawingPrameters.handleZoomWheel
this.drawingPrameters.handleMouseZoomSliceWheel
);
this.protectedData.canvases.drawingCanvas.removeEventListener(
"pointerup",
Expand Down Expand Up @@ -960,9 +969,9 @@ export class DrawToolCore extends CommToolsData {
return clearArc;
}
// drawing canvas mouse zoom wheel
private configMouseZoomWheel() {
configMouseZoomWheel() {
let moveDistance = 1;
const handleZoomWheelMove = (e: WheelEvent) => {
const handleMouseZoomSliceWheelMove = (e: WheelEvent) => {
if (this.protectedData.Is_Shift_Pressed) {
return;
}
Expand Down Expand Up @@ -1013,7 +1022,17 @@ export 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."
);
}

private enableCrosshair() {
Expand Down
45 changes: 45 additions & 0 deletions src/Utils/segmentation/NrrdTools.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1202,4 +1202,49 @@ export class NrrdTools extends DrawToolCore {
this.protectedData.ctxes.displayCtx?.restore();
}
}


/**
* Config mouse slice wheel event.
*/
configMouseSliceWheel(){
const handleMouseZoomSliceWheelMove = (e: WheelEvent) => {
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
);
}
}
13 changes: 12 additions & 1 deletion src/Utils/segmentation/coreTools/coreType.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,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;
}

Expand Down Expand Up @@ -153,6 +153,14 @@ interface IGUIStates {
// exportMarks: () => void;
}

interface IKeyBoardSettings {
draw: string;
undo: string;
contrast: string[];
crosshair: string;
mouseWheel: "Scroll:Zoom" | "Scroll:Slice";
}

interface INrrdStates {
originWidth: number;
originHeight: number;
Expand Down Expand Up @@ -203,6 +211,9 @@ interface INrrdStates {
switchSliceFlag: boolean;
labels: ["label1", "label2", "label3"];

configKeyBoard: boolean;
keyboardSettings: IKeyBoardSettings;

getMask: (
mask: ImageData,
sliceId: number,
Expand Down
4 changes: 2 additions & 2 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ import { IPaintImage, ICommXYZ } from "./Utils/segmentation/coreTools/coreType";

import "./css/style.css";

export const REVISION = "v2.1.3";
export const REVISION = "v2.2.0";

console.log(
"%cCopper3D Visualisation %cBeta:v2.1.3",
"%cCopper3D Visualisation %cBeta:v2.2.0",
"padding: 3px;color:white; background:#023047",
"padding: 3px;color:white; background:#f50a25"
);
Expand Down

0 comments on commit df1e7c3

Please sign in to comment.