Update Cursor Right Away When Bounding Box Is Hovered

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<void>;
+type KeyboardHandler = {
+  (event: KeyboardEvent): void | Promise<void>;
+  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", () => {

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;

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx

@@ -66,6 +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 { highlightAndSetCursorOnHoveredBoundingBox } from "../combinations/bounding_box_handlers";
 
 function ensureNonConflictingHandlers(
   skeletonControls: Record<string, any>,
@@ -179,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(),
     };
   }
 
@@ -191,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.
@@ -365,7 +386,7 @@ class PlaneController extends React.PureComponent<Props> {
     const {
       baseControls: notLoopedKeyboardControls,
       extendedControls: extendedNotLoopedKeyboardControls,
-    } = this.getNotLoopedKeyboardControls();
+    } = this.getNotLoopedKeyboardControls(); //
     const loopedKeyboardControls = this.getLoopedKeyboardControls();
     ensureNonConflictingHandlers(notLoopedKeyboardControls, loopedKeyboardControls);
     this.input.keyboardLoopDelayed = new InputKeyboard(
@@ -501,7 +522,11 @@ class PlaneController extends React.PureComponent<Props> {
       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() : {};
@@ -524,6 +549,8 @@ class PlaneController extends React.PureComponent<Props> {
           volumeCHandler,
           boundingBoxCHandler,
         ),
+        ctrl: boundingBoxCtrlHandler,
+        meta: boundingBoxMetaHandler,
       },
       extendedControls,
     };