From d25bc23d270b6311d812366222becf7a1ca9979e Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Thu, 28 Nov 2024 23:45:01 +0100 Subject: [PATCH 1/9] set move bbox cursor in bbox tool without moving mouse --- .../combinations/bounding_box_handlers.ts | 2 +- .../controller/viewmodes/plane_controller.tsx | 60 ++++++++++++++++++- 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts b/frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts index 10f39ed3aea..8bba7bd64c9 100644 --- a/frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts +++ b/frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts @@ -265,7 +265,7 @@ export function createBoundingBoxAndGetEdges( } export const highlightAndSetCursorOnHoveredBoundingBox = _.throttle( - (position: Point2, planeId: OrthoView, event: MouseEvent) => { + (position: Point2, planeId: OrthoView, event: MouseEvent | KeyboardEvent) => { const hoveredEdgesInfo = getClosestHoveredBoundingBox(position, planeId); // Access the parent element as that is where the cursor style property is set const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement; diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index 0158940dd1d..133d10e9a2e 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -66,6 +66,10 @@ import { import { showToastWarningForLargestSegmentIdMissing } from "oxalis/view/largest_segment_id_modal"; import { getDefaultBrushSizes } from "oxalis/view/action-bar/toolbar_view"; import { userSettings } from "types/schemas/user_settings.schema"; +import { + getClosestHoveredBoundingBox, + highlightAndSetCursorOnHoveredBoundingBox, +} from "../combinations/bounding_box_handlers"; function ensureNonConflictingHandlers( skeletonControls: Record, @@ -189,6 +193,28 @@ class BoundingBoxKeybindings { static getExtendedKeyboardControls() { return { x: () => setTool(AnnotationToolEnum.BOUNDING_BOX) }; } + + static getLoopedKeyboardControls() { + return { + ctrl: () => { + // TODO_c add meta key, check that ctrl is still pressed, extract method + console.log("ctrl"); + const { viewModeData, temporaryConfiguration } = Store.getState(); + const mousePosition = temporaryConfiguration.mousePosition; + if (mousePosition == null) return; + const planeId = viewModeData.plane.activeViewport; + const hoveredEdgesInfo = getClosestHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + planeId, + ); + const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement; + + if (hoveredEdgesInfo != null && inputCatcher != null) { + inputCatcher.style.cursor = "move"; + } + }, + }; + } } function createDelayAwareMoveHandler(multiplier: number) { @@ -355,6 +381,16 @@ class PlaneController extends React.PureComponent { event.preventDefault(); } }); + document.addEventListener("keyup", (event: KeyboardEvent) => { + const { viewModeData, temporaryConfiguration } = Store.getState(); + const { mousePosition } = temporaryConfiguration; + if (mousePosition == null) return; + highlightAndSetCursorOnHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + viewModeData.plane.activeViewport, + event, + ); + }); this.input.keyboard = new InputKeyboard({ // Move left: (timeFactor) => MoveHandlers.moveU(-getMoveOffset(Store.getState(), timeFactor)), @@ -479,6 +515,22 @@ class PlaneController extends React.PureComponent { q: downloadScreenshot, w: cycleTools, "shift + w": cycleToolsBackwards, + ctrl: () => { + // TODO_c add meta key, extract method + const { viewModeData, temporaryConfiguration } = Store.getState(); + const mousePosition = temporaryConfiguration.mousePosition; + if (mousePosition == null) return; + const planeId = viewModeData.plane.activeViewport; + const hoveredEdgesInfo = getClosestHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + planeId, + ); + const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement; + + if (hoveredEdgesInfo != null && inputCatcher != null) { + inputCatcher.style.cursor = "move"; + } + }, }; let extendedControls = { @@ -532,9 +584,11 @@ class PlaneController extends React.PureComponent { getLoopedKeyboardControls() { // Note that this code needs to be adapted in case the VolumeHandlers also starts to expose // looped keyboard controls. For the hybrid case, these two controls would need t be combined then. - return this.props.tracing.skeleton != null - ? SkeletonKeybindings.getLoopedKeyboardControls() - : {}; + if (this.props.tracing.skeleton != null) return SkeletonKeybindings.getLoopedKeyboardControls(); + else if (this.props.activeTool === AnnotationToolEnum.BOUNDING_BOX) { + return BoundingBoxKeybindings.getLoopedKeyboardControls(); + } + return {}; } init(): void { From c11eee87812a97bd83d0d565a7761dceb6958f53 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 29 Nov 2024 15:57:24 +0100 Subject: [PATCH 2/9] improve code structure by extracting method --- .../controller/viewmodes/plane_controller.tsx | 41 ++++++++----------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index 133d10e9a2e..e8f809744e1 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -382,14 +382,9 @@ class PlaneController extends React.PureComponent { } }); document.addEventListener("keyup", (event: KeyboardEvent) => { - const { viewModeData, temporaryConfiguration } = Store.getState(); - const { mousePosition } = temporaryConfiguration; - if (mousePosition == null) return; - highlightAndSetCursorOnHoveredBoundingBox( - { x: mousePosition[0], y: mousePosition[1] }, - viewModeData.plane.activeViewport, - event, - ); + if (event.key === "Control" || event.key === "Meta") { + this.handleUpdateCursor(event); + } }); this.input.keyboard = new InputKeyboard({ // Move @@ -463,6 +458,17 @@ class PlaneController extends React.PureComponent { } } + handleUpdateCursor(event: KeyboardEvent) { + const { viewModeData, temporaryConfiguration } = Store.getState(); + const { mousePosition } = temporaryConfiguration; + if (mousePosition == null) return; + highlightAndSetCursorOnHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + viewModeData.plane.activeViewport, + event, + ); + } + handleUpdateBrushSize(size: "small" | "medium" | "large") { const brushPresets = this.getBrushPresetsOrSetDefault(); switch (size) { @@ -515,22 +521,9 @@ class PlaneController extends React.PureComponent { q: downloadScreenshot, w: cycleTools, "shift + w": cycleToolsBackwards, - ctrl: () => { - // TODO_c add meta key, extract method - const { viewModeData, temporaryConfiguration } = Store.getState(); - const mousePosition = temporaryConfiguration.mousePosition; - if (mousePosition == null) return; - const planeId = viewModeData.plane.activeViewport; - const hoveredEdgesInfo = getClosestHoveredBoundingBox( - { x: mousePosition[0], y: mousePosition[1] }, - planeId, - ); - const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement; - - if (hoveredEdgesInfo != null && inputCatcher != null) { - inputCatcher.style.cursor = "move"; - } - }, + meta: (event: KeyboardEvent) => this.handleUpdateCursor(event), + ctrl: (event: KeyboardEvent) => this.handleUpdateCursor(event), + // TODO_c add meta key, extract method, }; let extendedControls = { From 2993a8b913792829285f13ca4a7c471f78643a6c Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 29 Nov 2024 16:03:58 +0100 Subject: [PATCH 3/9] remove unnecessary code --- .../controller/viewmodes/plane_controller.tsx | 35 +++---------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index e8f809744e1..916a175362c 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -66,10 +66,7 @@ import { import { showToastWarningForLargestSegmentIdMissing } from "oxalis/view/largest_segment_id_modal"; import { getDefaultBrushSizes } from "oxalis/view/action-bar/toolbar_view"; import { userSettings } from "types/schemas/user_settings.schema"; -import { - getClosestHoveredBoundingBox, - highlightAndSetCursorOnHoveredBoundingBox, -} from "../combinations/bounding_box_handlers"; +import { highlightAndSetCursorOnHoveredBoundingBox } from "../combinations/bounding_box_handlers"; function ensureNonConflictingHandlers( skeletonControls: Record, @@ -193,28 +190,6 @@ class BoundingBoxKeybindings { static getExtendedKeyboardControls() { return { x: () => setTool(AnnotationToolEnum.BOUNDING_BOX) }; } - - static getLoopedKeyboardControls() { - return { - ctrl: () => { - // TODO_c add meta key, check that ctrl is still pressed, extract method - console.log("ctrl"); - const { viewModeData, temporaryConfiguration } = Store.getState(); - const mousePosition = temporaryConfiguration.mousePosition; - if (mousePosition == null) return; - const planeId = viewModeData.plane.activeViewport; - const hoveredEdgesInfo = getClosestHoveredBoundingBox( - { x: mousePosition[0], y: mousePosition[1] }, - planeId, - ); - const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement; - - if (hoveredEdgesInfo != null && inputCatcher != null) { - inputCatcher.style.cursor = "move"; - } - }, - }; - } } function createDelayAwareMoveHandler(multiplier: number) { @@ -577,11 +552,9 @@ class PlaneController extends React.PureComponent { getLoopedKeyboardControls() { // Note that this code needs to be adapted in case the VolumeHandlers also starts to expose // looped keyboard controls. For the hybrid case, these two controls would need t be combined then. - if (this.props.tracing.skeleton != null) return SkeletonKeybindings.getLoopedKeyboardControls(); - else if (this.props.activeTool === AnnotationToolEnum.BOUNDING_BOX) { - return BoundingBoxKeybindings.getLoopedKeyboardControls(); - } - return {}; + return this.props.tracing.skeleton != null + ? SkeletonKeybindings.getLoopedKeyboardControls() + : {}; } init(): void { From 594d8952d0c6755e3f4b6383d280c0089cfe7860 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Mon, 2 Dec 2024 21:44:21 +0100 Subject: [PATCH 4/9] add cursor update to tool specific key handlers --- frontend/javascripts/libs/input.ts | 10 +++- .../controller/viewmodes/plane_controller.tsx | 49 +++++++++++-------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index 19e952ffe9c..4120b897234 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -23,7 +23,10 @@ const MOUSE_MOVE_DELTA_THRESHOLD = 5; export type ModifierKeys = "alt" | "shift" | "ctrlOrMeta"; type KeyboardKey = string; type MouseButton = string; -type KeyboardHandler = (event: KeyboardEvent) => void | Promise; +type KeyboardHandler = { + (event: KeyboardEvent): void | Promise; + keyUpFn?: (event: KeyboardEvent) => void; +}; // Callable Object, see https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures type KeyboardLoopHandler = { (arg0: number, isOriginalEvent: boolean): void; @@ -169,7 +172,10 @@ export class InputKeyboardNoLoop { event.stopPropagation(); } }, - _.noop, + (event: KeyboardEvent) => { + console.log("key up"); + if (callback.keyUpFn != null) callback.keyUpFn(event); + }, ]; if (isExtendedCommand) { KeyboardJS.withContext("extended", () => { diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index 916a175362c..575c51687a2 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -180,10 +180,24 @@ class VolumeKeybindings { } } +const handleUpdateCursor = (event: KeyboardEvent) => { + console.log("handleUpdateCursor"); + const { viewModeData, temporaryConfiguration } = Store.getState(); + const { mousePosition } = temporaryConfiguration; + if (mousePosition == null) return; + highlightAndSetCursorOnHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + viewModeData.plane.activeViewport, + event, + ); +}; + class BoundingBoxKeybindings { static getKeyboardControls() { return { c: () => Store.dispatch(addUserBoundingBoxAction()), + meta: createKeyDownAndUpHandler(), + ctrl: createKeyDownAndUpHandler(), }; } @@ -192,6 +206,12 @@ class BoundingBoxKeybindings { } } +function createKeyDownAndUpHandler() { + const fn = (event: KeyboardEvent) => handleUpdateCursor(event); + fn.keyUpFn = (event: KeyboardEvent) => handleUpdateCursor(event); + return fn; +} + function createDelayAwareMoveHandler(multiplier: number) { // The multiplier can be used for inverting the direction as well as for // speeding up the movement as it's done for shift+f, for example. @@ -356,11 +376,6 @@ class PlaneController extends React.PureComponent { event.preventDefault(); } }); - document.addEventListener("keyup", (event: KeyboardEvent) => { - if (event.key === "Control" || event.key === "Meta") { - this.handleUpdateCursor(event); - } - }); this.input.keyboard = new InputKeyboard({ // Move left: (timeFactor) => MoveHandlers.moveU(-getMoveOffset(Store.getState(), timeFactor)), @@ -371,7 +386,7 @@ class PlaneController extends React.PureComponent { const { baseControls: notLoopedKeyboardControls, extendedControls: extendedNotLoopedKeyboardControls, - } = this.getNotLoopedKeyboardControls(); + } = this.getNotLoopedKeyboardControls(); // const loopedKeyboardControls = this.getLoopedKeyboardControls(); ensureNonConflictingHandlers(notLoopedKeyboardControls, loopedKeyboardControls); this.input.keyboardLoopDelayed = new InputKeyboard( @@ -433,17 +448,6 @@ class PlaneController extends React.PureComponent { } } - handleUpdateCursor(event: KeyboardEvent) { - const { viewModeData, temporaryConfiguration } = Store.getState(); - const { mousePosition } = temporaryConfiguration; - if (mousePosition == null) return; - highlightAndSetCursorOnHoveredBoundingBox( - { x: mousePosition[0], y: mousePosition[1] }, - viewModeData.plane.activeViewport, - event, - ); - } - handleUpdateBrushSize(size: "small" | "medium" | "large") { const brushPresets = this.getBrushPresetsOrSetDefault(); switch (size) { @@ -496,9 +500,6 @@ class PlaneController extends React.PureComponent { q: downloadScreenshot, w: cycleTools, "shift + w": cycleToolsBackwards, - meta: (event: KeyboardEvent) => this.handleUpdateCursor(event), - ctrl: (event: KeyboardEvent) => this.handleUpdateCursor(event), - // TODO_c add meta key, extract method, }; let extendedControls = { @@ -521,7 +522,11 @@ class PlaneController extends React.PureComponent { this.props.tracing.volumes.length > 0 ? VolumeKeybindings.getKeyboardControls() : emptyDefaultHandler; - const { c: boundingBoxCHandler } = BoundingBoxKeybindings.getKeyboardControls(); + const { + c: boundingBoxCHandler, + meta: boundingBoxMetaHandler, + ctrl: boundingBoxCtrlHandler, + } = BoundingBoxKeybindings.getKeyboardControls(); ensureNonConflictingHandlers(skeletonControls, volumeControls); const extendedSkeletonControls = this.props.tracing.skeleton != null ? SkeletonKeybindings.getExtendedKeyboardControls() : {}; @@ -544,6 +549,8 @@ class PlaneController extends React.PureComponent { volumeCHandler, boundingBoxCHandler, ), + ctrl: boundingBoxCtrlHandler, + meta: boundingBoxMetaHandler, }, extendedControls, }; From 4a8b1d96d4c24c79478e185cab2979bed3d5ec54 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 6 Dec 2024 15:29:00 +0100 Subject: [PATCH 5/9] pass keyup map to input ts --- frontend/javascripts/libs/input.ts | 23 +++++++++++-------- .../controller/viewmodes/plane_controller.tsx | 17 +++++++++----- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index 4120b897234..cf0df132325 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -23,10 +23,7 @@ const MOUSE_MOVE_DELTA_THRESHOLD = 5; export type ModifierKeys = "alt" | "shift" | "ctrlOrMeta"; type KeyboardKey = string; type MouseButton = string; -type KeyboardHandler = { - (event: KeyboardEvent): void | Promise; - keyUpFn?: (event: KeyboardEvent) => void; -}; +type KeyboardHandler = (event: KeyboardEvent) => void | Promise; // Callable Object, see https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures type KeyboardLoopHandler = { (arg0: number, isOriginalEvent: boolean): void; @@ -87,6 +84,7 @@ export class InputKeyboardNoLoop { supportInputElements?: boolean; }, extendedCommands?: KeyBindingMap, + keyUpCommands?: KeyBindingMap, ) { if (options) { this.supportInputElements = options.supportInputElements || this.supportInputElements; @@ -103,16 +101,17 @@ export class InputKeyboardNoLoop { document.addEventListener("keydown", this.preventBrowserSearchbarShortcut); this.attach(EXTENDED_COMMAND_KEYS, this.toggleExtendedMode); // Add empty callback in extended mode to deactivate the extended mode via the same EXTENDED_COMMAND_KEYS. - this.attach(EXTENDED_COMMAND_KEYS, _.noop, true); + this.attach(EXTENDED_COMMAND_KEYS, _.noop, _.noop, true); for (const key of Object.keys(extendedCommands)) { const callback = extendedCommands[key]; - this.attach(key, callback, true); + this.attach(key, callback, _.noop, true); } } for (const key of Object.keys(initialBindings)) { const callback = initialBindings[key]; - this.attach(key, callback); + const keyUpCallback = keyUpCommands != null ? keyUpCommands[key] : _.noop; + this.attach(key, callback, keyUpCallback); } } @@ -144,7 +143,12 @@ export class InputKeyboardNoLoop { } } - attach(key: KeyboardKey, callback: KeyboardHandler, isExtendedCommand: boolean = false) { + attach( + key: KeyboardKey, + callback: KeyboardHandler, + callbackKeyUp: KeyboardHandler = _.noop, + isExtendedCommand: boolean = false, + ) { const binding = [ key, (event: KeyboardEvent) => { @@ -173,8 +177,7 @@ export class InputKeyboardNoLoop { } }, (event: KeyboardEvent) => { - console.log("key up"); - if (callback.keyUpFn != null) callback.keyUpFn(event); + callbackKeyUp(event); }, ]; if (isExtendedCommand) { diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index 575c51687a2..65be6850a3a 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -207,9 +207,8 @@ class BoundingBoxKeybindings { } function createKeyDownAndUpHandler() { - const fn = (event: KeyboardEvent) => handleUpdateCursor(event); - fn.keyUpFn = (event: KeyboardEvent) => handleUpdateCursor(event); - return fn; + console.log("createKeyDownAndUpHandler"); + return (event: KeyboardEvent) => handleUpdateCursor(event); } function createDelayAwareMoveHandler(multiplier: number) { @@ -385,8 +384,9 @@ class PlaneController extends React.PureComponent { }); const { baseControls: notLoopedKeyboardControls, + keyUpControls, extendedControls: extendedNotLoopedKeyboardControls, - } = this.getNotLoopedKeyboardControls(); // + } = this.getNotLoopedKeyboardControls(); const loopedKeyboardControls = this.getLoopedKeyboardControls(); ensureNonConflictingHandlers(notLoopedKeyboardControls, loopedKeyboardControls); this.input.keyboardLoopDelayed = new InputKeyboard( @@ -418,6 +418,7 @@ class PlaneController extends React.PureComponent { notLoopedKeyboardControls, {}, extendedNotLoopedKeyboardControls, + keyUpControls, ); this.storePropertyUnsubscribers.push( listenToStoreProperty( @@ -549,8 +550,12 @@ class PlaneController extends React.PureComponent { volumeCHandler, boundingBoxCHandler, ), - ctrl: boundingBoxCtrlHandler, - meta: boundingBoxMetaHandler, + ctrl: this.createToolDependentKeyboardHandler(null, null, boundingBoxCtrlHandler), + meta: this.createToolDependentKeyboardHandler(null, null, boundingBoxMetaHandler), + }, + keyUpControls: { + ctrl: this.createToolDependentKeyboardHandler(null, null, boundingBoxCtrlHandler), + meta: this.createToolDependentKeyboardHandler(null, null, boundingBoxMetaHandler), }, extendedControls, }; From 9d802b351d6e37f4f8823c70e9d712ea6ebef438 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 6 Dec 2024 16:01:39 +0100 Subject: [PATCH 6/9] remove console logs --- frontend/javascripts/libs/input.ts | 4 ++-- .../oxalis/controller/viewmodes/plane_controller.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index cf0df132325..46c27da4e69 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -84,7 +84,7 @@ export class InputKeyboardNoLoop { supportInputElements?: boolean; }, extendedCommands?: KeyBindingMap, - keyUpCommands?: KeyBindingMap, + keyUpBindings?: KeyBindingMap, ) { if (options) { this.supportInputElements = options.supportInputElements || this.supportInputElements; @@ -110,7 +110,7 @@ export class InputKeyboardNoLoop { for (const key of Object.keys(initialBindings)) { const callback = initialBindings[key]; - const keyUpCallback = keyUpCommands != null ? keyUpCommands[key] : _.noop; + const keyUpCallback = keyUpBindings != null ? keyUpBindings[key] : _.noop; this.attach(key, callback, keyUpCallback); } } diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index 65be6850a3a..bc07cf2279b 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -181,7 +181,6 @@ class VolumeKeybindings { } const handleUpdateCursor = (event: KeyboardEvent) => { - console.log("handleUpdateCursor"); const { viewModeData, temporaryConfiguration } = Store.getState(); const { mousePosition } = temporaryConfiguration; if (mousePosition == null) return; @@ -207,7 +206,6 @@ class BoundingBoxKeybindings { } function createKeyDownAndUpHandler() { - console.log("createKeyDownAndUpHandler"); return (event: KeyboardEvent) => handleUpdateCursor(event); } From dc0f7092e6c663a624580ed9e039def9e69d92cd Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 6 Dec 2024 16:07:22 +0100 Subject: [PATCH 7/9] improve arg names --- frontend/javascripts/libs/input.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index 46c27da4e69..cd3d385e518 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -145,8 +145,8 @@ export class InputKeyboardNoLoop { attach( key: KeyboardKey, - callback: KeyboardHandler, - callbackKeyUp: KeyboardHandler = _.noop, + keyDownCallback: KeyboardHandler, + keyUpCallback: KeyboardHandler = _.noop, isExtendedCommand: boolean = false, ) { const binding = [ @@ -170,14 +170,14 @@ export class InputKeyboardNoLoop { } if (!event.repeat) { - callback(event); + keyDownCallback(event); } else { event.preventDefault(); event.stopPropagation(); } }, (event: KeyboardEvent) => { - callbackKeyUp(event); + keyUpCallback(event); }, ]; if (isExtendedCommand) { From cd09bd513cbe8100e34149ae3339b19abd018df7 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Fri, 6 Dec 2024 16:15:46 +0100 Subject: [PATCH 8/9] add changelog --- CHANGELOG.unreleased.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index b9f532e2286..1df898c69dd 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released - Datasets can now be renamed and can have duplicate names. [#8075](https://github.com/scalableminds/webknossos/pull/8075) - Improved the default colors for skeleton trees. [#8228](https://github.com/scalableminds/webknossos/pull/8228) - Allowed to train an AI model using differently sized bounding boxes. We recommend all bounding boxes to have equal dimensions or to have dimensions which are multiples of the smallest bounding box. [#8222](https://github.com/scalableminds/webknossos/pull/8222) +- Within the bounding box tool, the cursor updates immediately after pressing `ctrl`, indicating that a bounding box can be moved instead of resized. [#8253](https://github.com/scalableminds/webknossos/pull/8253) ### Fixed - Fixed that listing datasets with the `api/datasets` route without compression failed due to missing permissions regarding public datasets. [#8249](https://github.com/scalableminds/webknossos/pull/8249) From 584f05d19ae29d323c272e22150df98fe3fe47b1 Mon Sep 17 00:00:00 2001 From: Charlie Meister Date: Thu, 12 Dec 2024 17:35:54 +0100 Subject: [PATCH 9/9] make some methods static members of BoundingBoxKeybindings --- .../controller/viewmodes/plane_controller.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx index bc07cf2279b..99dfb486eea 100644 --- a/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx +++ b/frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx @@ -180,33 +180,33 @@ class VolumeKeybindings { } } -const handleUpdateCursor = (event: KeyboardEvent) => { - const { viewModeData, temporaryConfiguration } = Store.getState(); - const { mousePosition } = temporaryConfiguration; - if (mousePosition == null) return; - highlightAndSetCursorOnHoveredBoundingBox( - { x: mousePosition[0], y: mousePosition[1] }, - viewModeData.plane.activeViewport, - event, - ); -}; - class BoundingBoxKeybindings { static getKeyboardControls() { return { c: () => Store.dispatch(addUserBoundingBoxAction()), - meta: createKeyDownAndUpHandler(), - ctrl: createKeyDownAndUpHandler(), + meta: BoundingBoxKeybindings.createKeyDownAndUpHandler(), + ctrl: BoundingBoxKeybindings.createKeyDownAndUpHandler(), }; } + static handleUpdateCursor = (event: KeyboardEvent) => { + const { viewModeData, temporaryConfiguration } = Store.getState(); + const { mousePosition } = temporaryConfiguration; + if (mousePosition == null) return; + highlightAndSetCursorOnHoveredBoundingBox( + { x: mousePosition[0], y: mousePosition[1] }, + viewModeData.plane.activeViewport, + event, + ); + }; + static getExtendedKeyboardControls() { return { x: () => setTool(AnnotationToolEnum.BOUNDING_BOX) }; } -} -function createKeyDownAndUpHandler() { - return (event: KeyboardEvent) => handleUpdateCursor(event); + static createKeyDownAndUpHandler() { + return (event: KeyboardEvent) => BoundingBoxKeybindings.handleUpdateCursor(event); + } } function createDelayAwareMoveHandler(multiplier: number) {