From fe831c325dc1048aac2ff5615ca3893387e7b522 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sat, 20 Nov 2021 13:25:41 +0000
Subject: [PATCH] [fix] zoom shortcuts (#323)

* Adds overrides for zoom in / out / reset commands

* Add reset command, numpad keys

* Remove unused shortcuts

* Update package.json
---
 apps/vscode/extension/package.json            | 41 ++++++++++++++++++-
 .../extension/src/TldrawEditorProvider.ts     | 12 ++++++
 .../tldraw/src/hooks/useKeyboardShortcuts.tsx | 25 ++++++-----
 3 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/apps/vscode/extension/package.json b/apps/vscode/extension/package.json
index acf7579ff..609f7b69c 100644
--- a/apps/vscode/extension/package.json
+++ b/apps/vscode/extension/package.json
@@ -51,10 +51,47 @@
 				]
 			}
 		],
+		"keybindings": [
+			{
+				"key": "cmd+numpad_add",
+				"title": "Zoom In",
+				"command": "tldraw.tldr.zoomIn",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			},
+			{
+				"key": "cmd+=",
+				"title": "Zoom In",
+				"command": "tldraw.tldr.zoomIn",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			},
+			{
+				"key": "cmd+numpad_subtract",
+				"title": "Zoom Out",
+				"command": "tldraw.tldr.zoomOut",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			},
+			{
+				"key": "cmd+-",
+				"title": "Zoom Out",
+				"command": "tldraw.tldr.zoomOut",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			},
+			{
+				"key": "cmd+numpad0",
+				"title": "Zoom Out",
+				"command": "tldraw.tldr.resetZoom",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			}
+		],
 		"commands": [
 			{
 				"command": "tldraw.tldr.new",
-				"title": "New tldraw File",
+				"title": "New File",
 				"category": "tldraw"
 			}
 		]
@@ -82,4 +119,4 @@
 		"vsce": "^2.2.0"
 	},
 	"gitHead": "325008ff82bd27b63d625ad1b760f8871fb71af9"
-}
+}
\ No newline at end of file
diff --git a/apps/vscode/extension/src/TldrawEditorProvider.ts b/apps/vscode/extension/src/TldrawEditorProvider.ts
index 902f5dd3e..eab64a18a 100644
--- a/apps/vscode/extension/src/TldrawEditorProvider.ts
+++ b/apps/vscode/extension/src/TldrawEditorProvider.ts
@@ -31,6 +31,18 @@ export class TldrawEditorProvider implements vscode.CustomTextEditorProvider {
       )
     })
 
+    vscode.commands.registerCommand('tldraw.tldr.zoomIn', () => {
+      // Noop
+    })
+
+    vscode.commands.registerCommand('tldraw.tldr.zoomOut', () => {
+      // Noop
+    })
+
+    vscode.commands.registerCommand('tldraw.tldr.resetZoom', () => {
+      // Noop
+    })
+
     // Register our editor provider, indicating to VS Code that we can
     // handle files with the .tldr extension.
     return vscode.window.registerCustomEditorProvider(
diff --git a/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx b/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
index 7e20cfc2a..c1221553e 100644
--- a/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
+++ b/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
@@ -226,10 +226,9 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   // Camera
 
   useHotkeys(
-    'ctrl+=,⌘+=',
+    'ctrl+=,⌘+=,ctrl+num_subtract,⌘+num_subtract',
     (e) => {
       if (!canHandleEvent()) return
-
       app.zoomIn()
       e.preventDefault()
     },
@@ -238,7 +237,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   )
 
   useHotkeys(
-    'ctrl+-,⌘+-',
+    'ctrl+-,⌘+-,ctrl+num_add,⌘+num_add',
     (e) => {
       if (!canHandleEvent()) return
 
@@ -249,6 +248,16 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
     [app]
   )
 
+  useHotkeys(
+    'shift+0,ctrl+numpad_0,⌘+numpad_0',
+    () => {
+      if (!canHandleEvent()) return
+      app.resetZoom()
+    },
+    undefined,
+    [app]
+  )
+
   useHotkeys(
     'shift+1',
     () => {
@@ -269,16 +278,6 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
     [app]
   )
 
-  useHotkeys(
-    'shift+0',
-    () => {
-      if (!canHandleEvent()) return
-      app.resetZoom()
-    },
-    undefined,
-    [app]
-  )
-
   // Duplicate
 
   useHotkeys(