[WIP] Custom keyboard shortcuts

frontend/javascripts/libs/shortcut_component.ts

@@ -3,27 +3,23 @@ import { useEffect } from "react";
 
 // This component provides a lightweight wrapper around the input library.
 // It leverages reacts lifecycle hooks to allow rendering-sensitive activation of shortcuts.
+// TODOM maybe replace with new keystrokes hooks
 type Props = {
   keys: string;
   onTrigger: () => any;
   supportLoop?: boolean;
   supportInputElements?: boolean;
 };
-export default function Shortcut(props: Props) {
+export default function Shortcut({ keys, onTrigger, supportLoop, supportInputElements }: Props) {
   useEffect(() => {
-    const keyboard = new (props.supportLoop ? InputKeyboard : InputKeyboardNoLoop)(
-      {
-        [props.keys]: props.onTrigger,
-      },
-      {
-        supportInputElements: props.supportInputElements,
-      },
-    );
+    const keyboard = supportLoop
+      ? new InputKeyboard({ [keys]: { onPressedWithRepeat: onTrigger } }, { supportInputElements })
+      : new InputKeyboardNoLoop({ [keys]: { onPressed: onTrigger } }, { supportInputElements });
 
     return () => {
       keyboard.destroy();
     };
-  }, [props.keys, props.onTrigger, props.supportLoop, props.supportInputElements]);
+  }, [keys, onTrigger, supportLoop, supportInputElements]);
 
   return null;
 }

frontend/javascripts/test/api/api_skeleton_latest.spec.ts

@@ -221,7 +221,7 @@ describe("API Skeleton", () => {
     const bindSpy = vi.spyOn(Keyboard.prototype, "bind").mockReturnThis();
     const unbindSpy = vi.spyOn(Keyboard.prototype, "unbind").mockReturnThis();
 
-    const binding = api.utils.registerKeyHandler("g", () => {});
+    const binding = api.utils.registerKeyHandler("g", { onPressed: () => {} });
     expect(bindSpy).toHaveBeenCalled();
 
     binding.unregister();

frontend/javascripts/viewer/api/api_latest.ts

@@ -6,7 +6,7 @@ import {
   sendAnalyticsEvent,
 } from "admin/rest_api";
 import PriorityQueue from "js-priority-queue";
-import { InputKeyboardNoLoop } from "libs/input";
+import { InputKeyboardNoLoop, type KeyboardNoLoopHandler } from "libs/input";
 import { M4x4, type Matrix4x4, V3 } from "libs/mjs";
 import Request from "libs/request";
 import type { ToastStyle } from "libs/toast";
@@ -3017,7 +3017,7 @@ class UtilsApi {
   /**
    * Sets a custom handler function for a keyboard shortcut.
    */
-  registerKeyHandler(key: string, handler: () => void): UnregisterHandler {
+  registerKeyHandler(key: string, handler: KeyboardNoLoopHandler): UnregisterHandler {
     const keyboard = new InputKeyboardNoLoop({
       [key]: handler,
     });

frontend/javascripts/viewer/controller.tsx

@@ -7,7 +7,6 @@ import { getUrlParamValue, hasUrlParam, isNoElementFocused } from "libs/utils";
 import window, { document } from "libs/window";
 import { type WithBlockerProps, withBlocker } from "libs/with_blocker_hoc";
 import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
-import extend from "lodash-es/extend";
 import messages from "messages";
 import { PureComponent } from "react";
 import { connect } from "react-redux";
@@ -21,16 +20,23 @@ import { initializeSceneController } from "viewer/controller/scene_controller";
 import UrlManager from "viewer/controller/url_manager";
 import ArbitraryController from "viewer/controller/viewmodes/arbitrary_controller";
 import PlaneController from "viewer/controller/viewmodes/plane_controller";
-import { AnnotationTool } from "viewer/model/accessors/tool_accessor";
 import { wkInitializedAction } from "viewer/model/actions/actions";
 import { redoAction, saveNowAction, undoAction } from "viewer/model/actions/save_actions";
-import { setViewModeAction, updateLayerSettingAction } from "viewer/model/actions/settings_actions";
 import { setIsInAnnotationViewAction } from "viewer/model/actions/ui_actions";
 import { HANDLED_ERROR } from "viewer/model_initialization";
 import { Model } from "viewer/singletons";
 import type { TraceOrViewCommand, WebknossosState } from "viewer/store";
 import Store from "viewer/store";
+import { AnnotationTool } from "./model/accessors/tool_accessor";
+import { setViewModeAction, updateLayerSettingAction } from "./model/actions/settings_actions";
 import type DataLayer from "./model/data_layer";
+import {
+  GeneralEditingKeyboardShortcuts,
+  GeneralKeyboardShortcuts,
+} from "./view/keyboard_shortcuts/keyboard_shortcut_constants";
+import { loadKeyboardShortcuts } from "./view/keyboard_shortcuts/keyboard_shortcut_persistence";
+import type { KeyboardShortcutNoLoopedHandlerMap } from "./view/keyboard_shortcuts/keyboard_shortcut_types";
+import { buildKeyBindingsFromConfigAndMapping } from "./view/keyboard_shortcuts/keyboard_shortcut_utils";
 
 export type ControllerStatus = "loading" | "loaded" | "failedLoading";
 type OwnProps = {
@@ -52,13 +58,23 @@ type State = {
   organizationToSwitchTo: APIOrganization | null | undefined;
 };
 
+type ControllerEditAllowedKeyboardHandlerIdMap = KeyboardShortcutNoLoopedHandlerMap<
+  GeneralKeyboardShortcuts | GeneralEditingKeyboardShortcuts
+>;
+type ControllerViewOnlyKeyboardHandlerIdMap =
+  KeyboardShortcutNoLoopedHandlerMap<GeneralKeyboardShortcuts>;
+type ControllerKeyboardHandlerIdMap =
+  | ControllerEditAllowedKeyboardHandlerIdMap
+  | ControllerViewOnlyKeyboardHandlerIdMap;
+
 class Controller extends PureComponent<PropsWithRouter, State> {
   keyboardNoLoop?: InputKeyboardNoLoop;
   _isMounted: boolean = false;
   state: State = {
     gotUnhandledError: false,
     organizationToSwitchTo: null,
   };
+  unsubscribeKeyboardListener: any = () => {};
 
   // Main controller, responsible for setting modes and everything
   // that has to be controlled in any mode.
@@ -91,6 +107,7 @@ class Controller extends PureComponent<PropsWithRouter, State> {
     this.props.setBlocking({
       shouldBlock: false,
     });
+    this.unsubscribeKeyboardListener();
   }
 
   tryFetchingModel() {
@@ -208,26 +225,85 @@ class Controller extends PureComponent<PropsWithRouter, State> {
     );
   }
 
-  initKeyboard() {
-    // avoid scrolling while pressing space
-    document.addEventListener("keydown", (event: KeyboardEvent) => {
-      if (
-        (event.which === 32 || event.which === 18 || (event.which >= 37 && event.which <= 40)) &&
-        isNoElementFocused()
-      ) {
-        event.preventDefault();
+  getKeyboardShortcutsHandlerMap(): ControllerKeyboardHandlerIdMap {
+    let leastRecentlyUsedSegmentationLayer: DataLayer | null = null;
+    function toggleSegmentationOpacity() {
+      let segmentationLayer = Model.getVisibleSegmentationLayer();
+
+      if (segmentationLayer != null) {
+        // If there is a visible segmentation layer, disable and remember it.
+        leastRecentlyUsedSegmentationLayer = segmentationLayer;
+      } else if (leastRecentlyUsedSegmentationLayer != null) {
+        // If no segmentation layer is visible, use the least recently toggled
+        // layer (note that toggling the layer via the switch-button won't update
+        // the local variable here).
+        segmentationLayer = leastRecentlyUsedSegmentationLayer;
+      } else {
+        // As a fallback, simply use some segmentation layer
+        segmentationLayer = Model.getSomeSegmentationLayer();
       }
-    });
-    const { controlMode } = Store.getState().temporaryConfiguration;
-    const keyboardControls = {};
-
-    if (controlMode !== ControlModeEnum.VIEW) {
-      extend(keyboardControls, {
-        // Set Mode, outcomment for release
-        "shift + 1": () => Store.dispatch(setViewModeAction(constants.MODE_PLANE_TRACING)),
-        "shift + 2": () => Store.dispatch(setViewModeAction(constants.MODE_ARBITRARY)),
-        "shift + 3": () => Store.dispatch(setViewModeAction(constants.MODE_ARBITRARY_PLANE)),
-        m: () => {
+
+      if (segmentationLayer == null) {
+        return;
+      }
+
+      const segmentationLayerName = segmentationLayer.name;
+      const isSegmentationDisabled =
+        Store.getState().datasetConfiguration.layers[segmentationLayerName].isDisabled;
+      Store.dispatch(
+        updateLayerSettingAction(segmentationLayerName, "isDisabled", !isSegmentationDisabled),
+      );
+    }
+
+    const isInViewMode =
+      Store.getState().temporaryConfiguration.controlMode === ControlModeEnum.VIEW;
+
+    const editRelatedHandlers: KeyboardShortcutNoLoopedHandlerMap<GeneralEditingKeyboardShortcuts> =
+      {
+        [GeneralEditingKeyboardShortcuts.SAVE]: {
+          onPressed: (event: KeyboardEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            Model.forceSave();
+          },
+        },
+        // Undo
+        [GeneralEditingKeyboardShortcuts.UNDO]: {
+          onPressed: (event: KeyboardEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            Store.dispatch(undoAction());
+          },
+        },
+        [GeneralEditingKeyboardShortcuts.REDO]: {
+          onPressed: (event: KeyboardEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            Store.dispatch(redoAction());
+          },
+        },
+      };
+
+    // Wrapped in a function to ensure each time the map is used, a new instance of getHandleToggleSegmentation
+    // is created and thus "leastRecentlyUsedSegmentationLayer" not being shared between key binding maps.
+    const keyboardShortcutsHandlerMapForController: ControllerKeyboardHandlerIdMap = {
+      [GeneralKeyboardShortcuts.SWITCH_VIEWMODE_PLANE]: {
+        onPressed: () => {
+          Store.dispatch(setViewModeAction(constants.MODE_PLANE_TRACING));
+        },
+      },
+      [GeneralKeyboardShortcuts.SWITCH_VIEWMODE_ARBITRARY]: {
+        onPressed: () => {
+          Store.dispatch(setViewModeAction(constants.MODE_ARBITRARY));
+        },
+      },
+      [GeneralKeyboardShortcuts.SWITCH_VIEWMODE_ARBITRARY_PLANE]: {
+        onPressed: () => {
+          Store.dispatch(setViewModeAction(constants.MODE_ARBITRARY_PLANE));
+        },
+      },
+      [GeneralKeyboardShortcuts.CYCLE_VIEWMODE]: {
+        onPressed: () => {
           // rotate allowed modes
           const state = Store.getState();
           const isProofreadingActive = state.uiInformation.activeTool === AnnotationTool.PROOFREAD;
@@ -240,65 +316,40 @@ class Controller extends PureComponent<PropsWithRouter, State> {
           const index = (allowedModes.indexOf(currentViewMode) + 1) % allowedModes.length;
           Store.dispatch(setViewModeAction(allowedModes[index]));
         },
-        "super + s": (event: KeyboardEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
-          Model.forceSave();
-        },
-        "ctrl + s": (event: KeyboardEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
-          Model.forceSave();
-        },
-        // Undo
-        "super + z": (event: KeyboardEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
-          Store.dispatch(undoAction());
-        },
-        "ctrl + z": () => Store.dispatch(undoAction()),
-        // Redo
-        "super + y": (event: KeyboardEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
-          Store.dispatch(redoAction());
-        },
-        "ctrl + y": () => Store.dispatch(redoAction()),
-      });
-    }
-
-    let leastRecentlyUsedSegmentationLayer: DataLayer | null = null;
-
-    extend(keyboardControls, {
-      // In the long run this should probably live in a user script
-      "3": function toggleSegmentationOpacity() {
-        let segmentationLayer = Model.getVisibleSegmentationLayer();
-
-        if (segmentationLayer != null) {
-          // If there is a visible segmentation layer, disable and remember it.
-          leastRecentlyUsedSegmentationLayer = segmentationLayer;
-        } else if (leastRecentlyUsedSegmentationLayer != null) {
-          // If no segmentation layer is visible, use the least recently toggled
-          // layer (note that toggling the layer via the switch-button won't update
-          // the local variable here).
-          segmentationLayer = leastRecentlyUsedSegmentationLayer;
-        } else {
-          // As a fallback, simply use some segmentation layer
-          segmentationLayer = Model.getSomeSegmentationLayer();
-        }
-
-        if (segmentationLayer == null) {
-          return;
-        }
-
-        const segmentationLayerName = segmentationLayer.name;
-        const isSegmentationDisabled =
-          Store.getState().datasetConfiguration.layers[segmentationLayerName].isDisabled;
-        Store.dispatch(
-          updateLayerSettingAction(segmentationLayerName, "isDisabled", !isSegmentationDisabled),
-        );
       },
+      [GeneralKeyboardShortcuts.TOGGLE_SEGMENTATION]: {
+        onPressed: toggleSegmentationOpacity,
+        ...(isInViewMode ? {} : editRelatedHandlers),
+      },
+    };
+    return keyboardShortcutsHandlerMapForController;
+  }
+
+  initKeyboard() {
+    // avoid scrolling while pressing space
+    document.addEventListener("keydown", (event: KeyboardEvent) => {
+      if (
+        (event.which === 32 || event.which === 18 || (event.which >= 37 && event.which <= 40)) &&
+        isNoElementFocused()
+      ) {
+        event.preventDefault();
+      }
     });
+    this.reloadKeyboardShortcuts();
+    this.unsubscribeKeyboardListener = app.vent.on("refreshKeyboardShortcuts", () =>
+      this.reloadKeyboardShortcuts(),
+    );
+  }
+
+  reloadKeyboardShortcuts() {
+    if (this.keyboardNoLoop) {
+      this.keyboardNoLoop.destroy();
+    }
+    const keybindingConfig = loadKeyboardShortcuts();
+    const keyboardControls = buildKeyBindingsFromConfigAndMapping(
+      keybindingConfig,
+      this.getKeyboardShortcutsHandlerMap(),
+    );
 
     this.keyboardNoLoop = new InputKeyboardNoLoop(keyboardControls);
   }