Merge pull request #1827 from OHIF/feat/ohif-127-196

OHIF-127-196-191: Hotkeys config and defaults

platform/viewer/src/App.jsx

@@ -30,7 +30,7 @@ const Router = JSON.parse(process.env.USE_HASH_ROUTER)
   ? HashRouter
   : BrowserRouter;
 
-let commandsManager, extensionManager, servicesManager;
+let commandsManager, extensionManager, servicesManager, hotkeysManager;
 
 function App({ config, defaultExtensions }) {
   const init = appInit(config, defaultExtensions);
@@ -39,17 +39,19 @@ function App({ config, defaultExtensions }) {
   commandsManager = init.commandsManager;
   extensionManager = init.extensionManager;
   servicesManager = init.servicesManager;
+  hotkeysManager = init.hotkeysManager;
 
   // Set appConfig
   const appConfigState = init.appConfig;
   const { routerBasename, modes, dataSources } = appConfigState;
   // Use config to create routes
-  const appRoutes = createRoutes(
+  const appRoutes = createRoutes({
     modes,
     dataSources,
     extensionManager,
-    servicesManager
-  );
+    servicesManager,
+    hotkeysManager
+  });
   const {
     UIDialogService,
     UIModalService,

platform/viewer/src/appInit.js

@@ -2,7 +2,7 @@ import {
   CommandsManager,
   ExtensionManager,
   ServicesManager,
-  // HotkeysManager,
+  HotkeysManager,
   UINotificationService,
   UIModalService,
   UIDialogService,
@@ -31,13 +31,14 @@ function appInit(appConfigOrFunc, defaultExtensions) {
   // TODO: Wire this up to Rodrigo's basic Context "ContextService"
   const commandsManagerConfig = {
     /** Used by commands to inject `viewports` from "redux" */
-    getAppState: () => {},
+    getAppState: () => { },
     /** Used by commands to determine active context */
     getActiveContexts: () => ['VIEWER', 'ACTIVE_VIEWPORT::CORNERSTONE'],
   };
-  const commandsManager = new CommandsManager(commandsManagerConfig);
+
   const servicesManager = new ServicesManager();
-  // const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
+  const commandsManager = new CommandsManager(commandsManagerConfig);
+  const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
   const extensionManager = new ExtensionManager({
     commandsManager,
     servicesManager,
@@ -64,7 +65,6 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     appConfig.dataSources
   );
 
-  // TODO: Init global hotkeys, or the hotkeys manager?
   // TODO: We no longer use `utils.addServer`
   // TODO: We no longer init webWorkers at app level
   // TODO: We no longer init the user Manager
@@ -80,6 +80,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     commandsManager,
     extensionManager,
     servicesManager,
+    hotkeysManager
   };
 }
 

platform/viewer/src/components/ViewportGrid.jsx

@@ -115,15 +115,17 @@ function ViewerViewportGrid(props) {
         viewportComponents
       );
 
+      const onInterationHandler = () => {
+        setActiveViewportIndex(viewportIndex);
+      };
+
       viewportPanes[i] = (
         <ViewportPane
           key={viewportIndex}
           className="m-1"
           acceptDropsFor="displayset"
           onDrop={onDropHandler.bind(null, viewportIndex)}
-          onInteraction={() => {
-            setActiveViewportIndex(viewportIndex);
-          }}
+          onInteraction={onInterationHandler}
           isActive={activeViewportIndex === viewportIndex}
         >
           <ViewportComponent

platform/viewer/src/customHooks/useQuery.js

@@ -6,6 +6,6 @@ import { useLocation } from 'react-router-dom';
  *
  * @name useQuery
  */
-export default function() {
+export default function () {
   return new URLSearchParams(useLocation().search);
 }

platform/viewer/src/routes/Mode/Mode.jsx

@@ -15,6 +15,7 @@ export default function ModeRoute({
   dataSourceName,
   extensionManager,
   servicesManager,
+  hotkeysManager
 }) {
   // Parse route params/querystring
   const query = useQuery();
@@ -26,7 +27,7 @@ export default function ModeRoute({
       ? StudyInstanceUIDs
       : [StudyInstanceUIDs];
 
-  const { extensions, sopClassHandlers } = mode;
+  const { extensions, sopClassHandlers, hotkeys } = mode;
 
   if (dataSourceName === undefined) {
     dataSourceName = extensionManager.defaultDataSourceName;
@@ -74,6 +75,22 @@ export default function ModeRoute({
     return ViewportGrid({ ...props, dataSource });
   }
 
+  useEffect(() => {
+    if (!hotkeys) {
+      console.warn('[hotkeys] No bindings defined for hotkeys hook!');
+      return;
+    }
+
+    console.debug('[hotkeys] Setting up hotkeys...');
+    hotkeysManager.setDefaultHotKeys(hotkeys);
+    hotkeysManager.setHotkeys(hotkeys);
+
+    return () => {
+      console.debug('[hotkeys] Removing hotkeys...');
+      hotkeysManager.destroy();
+    };
+  }, []);
+
   useEffect(() => {
     route.init({ servicesManager, extensionManager });
   }, [
@@ -83,6 +100,7 @@ export default function ModeRoute({
     route,
     servicesManager,
     extensionManager,
+    hotkeysManager
   ]);
 
   // This queries for series, but... What does it do with them?

platform/viewer/src/routes/buildModeRoutes.js

@@ -22,12 +22,13 @@ import { ViewModelProvider } from '@ohif/core';
 
   /:modeId/:modeRoute/?queryParameters=example
  */
-export default function buildModeRoutes(
+export default function buildModeRoutes({
   modes,
   dataSources,
   extensionManager,
-  servicesManager
-) {
+  servicesManager,
+  hotkeysManager
+}) {
   const routes = [];
 
   // const dataSources = Object.keys(extensionManager.dataSourceMap).map(a =>
@@ -58,6 +59,7 @@ export default function buildModeRoutes(
             dataSourceName={dataSourceName}
             extensionManager={extensionManager}
             servicesManager={servicesManager}
+            hotkeysManager={hotkeysManager}
           />
         </ViewModelProvider>
       );
@@ -83,6 +85,7 @@ export default function buildModeRoutes(
           dataSourceName={defaultDataSourceName}
           extensionManager={extensionManager}
           servicesManager={servicesManager}
+          hotkeysManager={hotkeysManager}
         />
       </ViewModelProvider>
     );

platform/viewer/src/routes/index.js

@@ -21,19 +21,25 @@ const bakedInRoutes = [
   { component: NotFound },
 ];
 
-const createRoutes = (
+const createRoutes = ({
   modes,
   dataSources,
   extensionManager,
-  servicesManager
-) => {
-  const routes =
-    buildModeRoutes(modes, dataSources, extensionManager, servicesManager) ||
-    [];
+  servicesManager,
+  hotkeysManager
+}) => {
+  const routes = buildModeRoutes({
+    modes,
+    dataSources,
+    extensionManager,
+    servicesManager,
+    hotkeysManager
+  }) || [];
+
   const allRoutes = [...routes, ...bakedInRoutes];
 
   console.log(
-    'Creating Routes: ',
+    'Creating Routes:',
     modes,
     dataSources,
     routes,