2021-08-10 16:12:55 +00:00
|
|
|
import * as React from 'react'
|
|
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
2021-08-13 09:28:09 +00:00
|
|
|
import { TLDrawShapeType } from '~types'
|
2021-09-02 20:13:54 +00:00
|
|
|
import { useTLDrawContext } from '~hooks'
|
|
|
|
|
2021-09-21 15:47:04 +00:00
|
|
|
export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
|
2021-09-02 20:13:54 +00:00
|
|
|
const { tlstate } = useTLDrawContext()
|
2021-08-10 16:12:55 +00:00
|
|
|
|
2021-09-21 15:47:04 +00:00
|
|
|
const canHandleEvent = React.useCallback(() => {
|
|
|
|
const elm = ref.current
|
|
|
|
return elm && (document.activeElement === elm || elm.contains(document.activeElement))
|
|
|
|
}, [ref])
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
/* ---------------------- Tools --------------------- */
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'v,1',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool('select')
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
2021-09-21 15:47:04 +00:00
|
|
|
[tlstate, ref.current]
|
2021-09-08 10:16:10 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'd,2',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Draw)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'r,3',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Rectangle)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'e,4',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Ellipse)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'a,5',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Arrow)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
't,6',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Text)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
2021-10-13 16:03:33 +00:00
|
|
|
useHotkeys(
|
|
|
|
'n,7',
|
|
|
|
() => {
|
|
|
|
if (canHandleEvent()) tlstate.selectTool(TLDrawShapeType.Sticky)
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
/* ---------------------- Misc ---------------------- */
|
|
|
|
|
2021-09-22 11:28:55 +00:00
|
|
|
// Dark Mode
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'ctrl+shift+d,command+shift+d',
|
|
|
|
(e) => {
|
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.toggleDarkMode()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
// Focus Mode
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'ctrl+.,command+.',
|
|
|
|
() => {
|
|
|
|
if (canHandleEvent()) tlstate.toggleFocusMode()
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
// Save
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
2021-10-10 09:41:45 +00:00
|
|
|
'ctrl+shift+s,command+shift+s',
|
2021-09-08 10:16:10 +00:00
|
|
|
() => {
|
2021-10-10 09:41:45 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.saveProject()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Undo Redo
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'command+z,ctrl+z',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.undo()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'ctrl+shift-z,command+shift+z',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.redo()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
2021-08-15 14:35:23 +00:00
|
|
|
// Undo Redo
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'command+u,ctrl+u',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.undoSelect()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'ctrl+shift-u,command+shift+u',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.redoSelect()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-15 14:35:23 +00:00
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
/* -------------------- Commands -------------------- */
|
|
|
|
|
|
|
|
// Camera
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'ctrl+=,command+=',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.zoomIn()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'ctrl+-,command+-',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.zoomOut()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+1',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.zoomToFit()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+2',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.zoomToSelection()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+0',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.zoomToActual()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Duplicate
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'ctrl+d,command+d',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.duplicate()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Flip
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'shift+h',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.flipHorizontal()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+v',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.flipVertical()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Cancel
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'escape',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.cancel()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Delete
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'backspace',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.delete()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Select All
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'command+a,ctrl+a',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.selectAll()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Nudge
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'up',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([0, -1], false)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'right',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([1, 0], false)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'down',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([0, 1], false)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'left',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([-1, 0], false)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+up',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([0, -1], true)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+right',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([1, 0], true)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+down',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([0, 1], true)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+left',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.nudge([-1, 0], true)
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
// Copy & Paste
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'command+c,ctrl+c',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.copy()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'command+v,ctrl+v',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.paste()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
|
2021-09-02 12:51:39 +00:00
|
|
|
// Group & Ungroup
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'command+g,ctrl+g',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.group()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'command+shift+g,ctrl+shift+g',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.ungroup()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-09-02 12:51:39 +00:00
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
// Move
|
|
|
|
|
2021-09-08 10:16:10 +00:00
|
|
|
useHotkeys(
|
|
|
|
'[',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.moveBackward()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
']',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.moveForward()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+[',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.moveToBack()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'shift+]',
|
|
|
|
() => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) tlstate.moveToFront()
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
|
|
|
|
|
|
|
useHotkeys(
|
|
|
|
'command+shift+backspace',
|
|
|
|
(e) => {
|
2021-09-21 15:47:04 +00:00
|
|
|
if (canHandleEvent()) {
|
|
|
|
tlstate.resetDocument()
|
|
|
|
e.preventDefault()
|
|
|
|
}
|
2021-09-08 10:16:10 +00:00
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
[tlstate]
|
|
|
|
)
|
2021-08-10 16:12:55 +00:00
|
|
|
}
|