tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 9.92 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../src/lib/ui/hooks/useKeyboardShortcuts.ts"],
"sourcesContent": ["import {\n\tEditor,\n\tTLPointerEventInfo,\n\tisAccelKey,\n\tpreventDefault,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport hotkeys from 'hotkeys-js'\nimport { useEffect } from 'react'\nimport { useActions } from '../context/actions'\nimport { useReadonly } from './useReadonly'\nimport { useTools } from './useTools'\n\nconst SKIP_KBDS = [\n\t// we set these in useNativeClipboardEvents instead\n\t'copy',\n\t'cut',\n\t'paste',\n\t// There's also an upload asset action, so we don't want to set the kbd twice\n\t'asset',\n]\n\n/** @public */\nexport function useKeyboardShortcuts() {\n\tconst editor = useEditor()\n\n\tconst isReadonlyMode = useReadonly()\n\tconst actions = useActions()\n\tconst tools = useTools()\n\tconst isFocused = useValue('is focused', () => editor.getInstanceState().isFocused, [editor])\n\tuseEffect(() => {\n\t\tif (!isFocused) return\n\n\t\tconst disposables = new Array<() => void>()\n\t\tconst container = editor.getContainer()\n\n\t\tconst hot = (keys: string, callback: (event: KeyboardEvent) => void) => {\n\t\t\thotkeys(keys, { element: container.ownerDocument.body }, callback)\n\t\t\tdisposables.push(() => {\n\t\t\t\thotkeys.unbind(keys, callback)\n\t\t\t})\n\t\t}\n\n\t\tconst hotUp = (keys: string, callback: (event: KeyboardEvent) => void) => {\n\t\t\thotkeys(\n\t\t\t\tkeys,\n\t\t\t\t{ element: container.ownerDocument.body, keyup: true, keydown: false },\n\t\t\t\tcallback\n\t\t\t)\n\t\t\tdisposables.push(() => {\n\t\t\t\thotkeys.unbind(keys, callback)\n\t\t\t})\n\t\t}\n\n\t\t// Add hotkeys for actions and tools.\n\t\t// Except those that in SKIP_KBDS!\n\t\tfor (const action of Object.values(actions)) {\n\t\t\tif (!action.kbd) continue\n\t\t\tif (isReadonlyMode && !action.readonlyOk) continue\n\t\t\tif (SKIP_KBDS.includes(action.id)) continue\n\n\t\t\thot(getHotkeysStringFromKbd(action.kbd), (event) => {\n\t\t\t\tif (areShortcutsDisabled(editor) && !action.isRequiredA11yAction) return\n\t\t\t\tpreventDefault(event)\n\t\t\t\taction.onSelect('kbd')\n\t\t\t})\n\t\t}\n\n\t\tfor (const tool of Object.values(tools)) {\n\t\t\tif (!tool.kbd || (!tool.readonlyOk && editor.getIsReadonly())) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\tif (SKIP_KBDS.includes(tool.id)) continue\n\n\t\t\thot(getHotkeysStringFromKbd(tool.kbd), (event) => {\n\t\t\t\tif (areShortcutsDisabled(editor)) return\n\t\t\t\tpreventDefault(event)\n\t\t\t\ttool.onSelect('kbd')\n\t\t\t})\n\t\t}\n\n\t\thot(',', (e) => {\n\t\t\t// Skip if shortcuts are disabled\n\t\t\tif (areShortcutsDisabled(editor)) return\n\n\t\t\t// Don't press again if already pressed\n\t\t\tif (editor.inputs.keys.has('Comma')) return\n\n\t\t\tpreventDefault(e) // prevent whatever would normally happen\n\t\t\teditor.focus() // Focus if not already focused\n\n\t\t\teditor.inputs.keys.add('Comma')\n\n\t\t\tconst { x, y, z } = editor.inputs.getCurrentPagePoint()\n\t\t\tconst screenpoints = editor.pageToScreen({ x, y })\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\tname: 'pointer_down',\n\t\t\t\tpoint: { x: screenpoints.x, y: screenpoints.y, z },\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t\tpointerId: 0,\n\t\t\t\tbutton: 0,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t\ttarget: 'canvas',\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t})\n\n\t\thotUp(',', (e) => {\n\t\t\tif (areShortcutsDisabled(editor)) return\n\t\t\tif (!editor.inputs.keys.has('Comma')) return\n\n\t\t\teditor.inputs.keys.delete('Comma')\n\n\t\t\tconst { x, y, z } = editor.inputs.getCurrentScreenPoint()\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\tname: 'pointer_up',\n\t\t\t\tpoint: { x, y, z },\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t\tpointerId: 0,\n\t\t\t\tbutton: 0,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t\ttarget: 'canvas',\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t})\n\n\t\treturn () => {\n\t\t\tdisposables.forEach((d) => d())\n\t\t}\n\t}, [actions, tools, isReadonlyMode, editor, isFocused])\n}\n\nexport function areShortcutsDisabled(editor: Editor) {\n\treturn (\n\t\teditor.menus.hasAnyOpenMenus() ||\n\t\teditor.getEditingShapeId() !== null ||\n\t\teditor.getCrashingError() ||\n\t\t!editor.user.getAreKeyboardShortcutsEnabled()\n\t)\n}\n\n// The \"raw\" kbd here will look something like \"a\" or a combination of keys \"del,backspace\".\n// We need to first split them up by comma, then parse each key to ensure backwards compatibility\n// with the old kbd format. We used to have symbols to denote cmd/alt/shift,\n// using ! for shift, $ for cmd, and ? for alt.\nfunction getHotkeysStringFromKbd(kbd: string) {\n\treturn getKeys(kbd)\n\t\t.map((kbd) => {\n\t\t\tlet str = ''\n\n\t\t\tconst shift = kbd.includes('!')\n\t\t\tconst alt = kbd.includes('?')\n\t\t\tconst cmd = kbd.includes('$')\n\n\t\t\t// remove the modifiers; the remaining string are the actual key\n\t\t\tconst k = kbd.replace(/[!?$]/g, '')\n\n\t\t\tif (shift && alt && cmd) {\n\t\t\t\tstr = `cmd+shift+alt+${k},ctrl+shift+alt+${k}`\n\t\t\t} else if (shift && cmd) {\n\t\t\t\tstr = `cmd+shift+${k},ctrl+shift+${k}`\n\t\t\t} else if (alt && cmd) {\n\t\t\t\tstr = `cmd+alt+${k},ctrl+alt+${k}`\n\t\t\t} else if (alt && shift) {\n\t\t\t\tstr = `shift+alt+${k}`\n\t\t\t} else if (shift) {\n\t\t\t\tstr = `shift+${k}`\n\t\t\t} else if (alt) {\n\t\t\t\tstr = `alt+${k}`\n\t\t\t} else if (cmd) {\n\t\t\t\tstr = `cmd+${k},ctrl+${k}`\n\t\t\t} else {\n\t\t\t\tstr = k\n\t\t\t}\n\n\t\t\treturn str\n\t\t})\n\t\t.join(',')\n}\n\n// Logic to split kbd string from hotkeys-js util.\nfunction getKeys(key: string) {\n\tif (typeof key !== 'string') key = ''\n\tkey = key.replace(/\\s/g, '')\n\tconst keys = key.split(',')\n\tlet index = keys.lastIndexOf('')\n\n\tfor (; index >= 0; ) {\n\t\tkeys[index - 1] += ','\n\t\tkeys.splice(index, 1)\n\t\tindex = keys.lastIndexOf('')\n\t}\n\n\treturn keys\n}\n"],
"mappings": "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",
"names": ["kbd"]
}