2021-08-10 16:12:55 +00:00
|
|
|
import * as React from 'react'
|
|
|
|
import { inputs } from '@tldraw/core'
|
|
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
2021-08-13 09:28:09 +00:00
|
|
|
import { TLDrawShapeType } from '~types'
|
|
|
|
import type { TLDrawState } from '~state'
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
export function useKeyboardShortcuts(tlstate: TLDrawState) {
|
|
|
|
React.useEffect(() => {
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
|
|
const info = inputs.keydown(e)
|
|
|
|
tlstate.onKeyDown(e.key, info)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleKeyUp = (e: KeyboardEvent) => {
|
|
|
|
const info = inputs.keyup(e)
|
|
|
|
tlstate.onKeyUp(e.key, info)
|
|
|
|
}
|
|
|
|
|
|
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
|
|
window.addEventListener('keyup', handleKeyUp)
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener('keydown', handleKeyDown)
|
|
|
|
window.removeEventListener('keyup', handleKeyUp)
|
|
|
|
}
|
|
|
|
}, [tlstate])
|
|
|
|
|
|
|
|
/* ---------------------- Tools --------------------- */
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('v,1', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool('select')
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('d,2', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool(TLDrawShapeType.Draw)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('r,3', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool(TLDrawShapeType.Rectangle)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('e,4', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool(TLDrawShapeType.Ellipse)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('a,5', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool(TLDrawShapeType.Arrow)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('t,6', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectTool(TLDrawShapeType.Text)
|
|
|
|
})
|
|
|
|
|
|
|
|
/* ---------------------- Misc ---------------------- */
|
|
|
|
|
|
|
|
// Save
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('ctrl+s,command+s', () => {
|
|
|
|
tlstate.saveProject()
|
2021-08-10 16:12:55 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
// Undo Redo
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('command+z,ctrl+z', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.undo()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('ctrl+shift-z,command+shift+z', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.redo()
|
|
|
|
})
|
|
|
|
|
2021-08-15 14:35:23 +00:00
|
|
|
// Undo Redo
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('command+u,ctrl+u', () => {
|
2021-08-15 14:35:23 +00:00
|
|
|
tlstate.undoSelect()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('ctrl+shift-u,command+shift+u', () => {
|
2021-08-15 14:35:23 +00:00
|
|
|
tlstate.redoSelect()
|
|
|
|
})
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
/* -------------------- Commands -------------------- */
|
|
|
|
|
|
|
|
// Camera
|
|
|
|
|
|
|
|
useHotkeys('ctrl+=,command+=', (e) => {
|
|
|
|
tlstate.zoomIn()
|
|
|
|
e.preventDefault()
|
|
|
|
})
|
|
|
|
|
|
|
|
useHotkeys('ctrl+-,command+-', (e) => {
|
|
|
|
tlstate.zoomOut()
|
|
|
|
e.preventDefault()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+1', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.zoomToFit()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+2', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.zoomToSelection()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+0', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.zoomToActual()
|
|
|
|
})
|
|
|
|
|
|
|
|
// Duplicate
|
|
|
|
|
2021-09-02 12:51:39 +00:00
|
|
|
useHotkeys('ctrl+d,command+d', (e) => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.duplicate()
|
2021-09-02 12:51:39 +00:00
|
|
|
e.preventDefault()
|
2021-08-10 16:12:55 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
// Flip
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+h', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.flipHorizontal()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+v', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.flipVertical()
|
|
|
|
})
|
|
|
|
|
|
|
|
// Cancel
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('escape', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.cancel()
|
|
|
|
})
|
|
|
|
|
|
|
|
// Delete
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('backspace', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.delete()
|
|
|
|
})
|
|
|
|
|
|
|
|
// Select All
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('command+a,ctrl+a', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.selectAll()
|
|
|
|
})
|
|
|
|
|
|
|
|
// Nudge
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('up', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([0, -1], false)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('right', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([1, 0], false)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('down', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([0, 1], false)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('left', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([-1, 0], false)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+up', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([0, -1], true)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+right', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([1, 0], true)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+down', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([0, 1], true)
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+left', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.nudge([-1, 0], true)
|
|
|
|
})
|
|
|
|
|
|
|
|
// Copy & Paste
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('command+c,ctrl+c', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.copy()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('command+v,ctrl+v', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.paste()
|
|
|
|
})
|
|
|
|
|
2021-09-02 12:51:39 +00:00
|
|
|
// Group & Ungroup
|
|
|
|
|
|
|
|
useHotkeys('command+g,ctrl+g', (e) => {
|
|
|
|
tlstate.group()
|
|
|
|
e.preventDefault()
|
|
|
|
})
|
|
|
|
|
|
|
|
useHotkeys('command+shift+g,ctrl+shift+g', (e) => {
|
|
|
|
tlstate.ungroup()
|
|
|
|
e.preventDefault()
|
|
|
|
})
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
// Move
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('[', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.moveBackward()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys(']', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.moveForward()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+[', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.moveToBack()
|
|
|
|
})
|
|
|
|
|
2021-08-29 13:33:43 +00:00
|
|
|
useHotkeys('shift+]', () => {
|
2021-08-10 16:12:55 +00:00
|
|
|
tlstate.moveToFront()
|
|
|
|
})
|
|
|
|
|
2021-08-30 13:04:12 +00:00
|
|
|
useHotkeys('command+shift+backspace', (e) => {
|
2021-09-02 12:51:39 +00:00
|
|
|
tlstate.resetDocument()
|
2021-08-30 13:04:12 +00:00
|
|
|
e.preventDefault()
|
2021-08-10 16:12:55 +00:00
|
|
|
})
|
|
|
|
}
|