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) { // 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) { ) useHotkeys( - 'ctrl+-,⌘+-', + 'ctrl+-,⌘+-,ctrl+num_add,⌘+num_add', (e) => { if (!canHandleEvent()) return @@ -249,6 +248,16 @@ export function useKeyboardShortcuts(ref: React.RefObject) { [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) { [app] ) - useHotkeys( - 'shift+0', - () => { - if (!canHandleEvent()) return - app.resetZoom() - }, - undefined, - [app] - ) - // Duplicate useHotkeys(