fixes hotkeys on Windows by adding a custom hook

Ironclad · Dec 14, 2023 · fdff37b · fdff37b
1 parent b24c69e
commit fdff37b
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/packages/app/src/components/RivetApp.tsx b/packages/app/src/components/RivetApp.tsx
@@ -1,3 +1,4 @@
+import { useWindowsHotfix } from '../hooks/useWindowsHotfix';
 import { GraphBuilder } from './GraphBuilder.js';
 import { OverlayTabs } from './OverlayTabs.js';
 import { type FC, useEffect } from 'react';
@@ -49,6 +50,8 @@ export const RivetApp: FC = () => {
     onRunGraph: tryRunGraph,
   });
 
+  useWindowsHotfix();
+
   const checkForUpdate = useCheckForUpdate();
 
   useAsyncEffect(async () => {

diff --git a/packages/app/src/hooks/useMenuCommands.ts b/packages/app/src/hooks/useMenuCommands.ts
@@ -14,7 +14,7 @@ import { useToggleRemoteDebugger } from '../components/DebuggerConnectPanel';
 import { lastRunDataByNodeState } from '../state/dataFlow';
 import { useImportGraph } from './useImportGraph';
 
-type MenuIds =
+export type MenuIds =
   | 'settings'
   | 'quit'
   | 'new_project'

diff --git a/packages/app/src/hooks/useWindowsHotfix.tsx b/packages/app/src/hooks/useWindowsHotfix.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { type MenuIds, useRunMenuCommand } from './useMenuCommands';
+
+interface HotfixWindow extends Window {
+    __tauri_hotfix?: boolean;
+}
+declare let window: HotfixWindow;
+
+const isWindowsPlatform = typeof navigator !== 'undefined' && navigator.userAgent.includes('Win64');
+
+if(isWindowsPlatform) {
+    console.warn('Hotfix applied for Windows platform');
+}
+
+/**
+ * Applies a keyboard shortcut hotfix for Windows platform.
+ */
+export const useWindowsHotfix = () => {
+    const runMenuCommandImpl = useRunMenuCommand();
+
+    // @see https://github.com/Ironclad/rivet/issues/261
+    useEffect(() => {
+        if (typeof window === 'undefined' || !isWindowsPlatform || window.__tauri_hotfix) {
+            return;
+        }
+
+        const onKeyUp = ({ key, ctrlKey, shiftKey }: KeyboardEvent) => {
+            const code = `${ctrlKey ? 'CmdOrCtrl+' : ''}${shiftKey ? 'Shift+' : ''}${key.toUpperCase()}`;
+            const codeToMenuId: Record<string, MenuIds> = {
+                F5: 'remote_debugger',
+                'CmdOrCtrl+Shift+O': 'load_recording',
+                'CmdOrCtrl+N': 'new_project',
+                'CmdOrCtrl+O': 'open_project',
+                'CmdOrCtrl+S': 'save_project',
+                'CmdOrCtrl+Shift+E': 'export_graph',
+                'CmdOrCtrl+Shift+I': 'import_graph',
+                'CmdOrCtrl+Shift+S': 'save_project_as',
+                'CmdOrCtrl+ENTER': 'run',
+            };
+            if (codeToMenuId[code]) {
+                console.warn(`Hotfix: ${code} -> ${codeToMenuId[code]}`);
+                runMenuCommandImpl(codeToMenuId[code]!);
+            }
+        };
+
+        window.__tauri_hotfix = true; // protects against double usage of hook by mistake
+        window.addEventListener('keyup', onKeyUp);
+
+        return () => {
+            window.removeEventListener('keyup', onKeyUp);
+            window.__tauri_hotfix = false;
+        };
+    }, [runMenuCommandImpl]);
+
+    return isWindowsPlatform;
+};