kopia lustrzana https://github.com/Tldraw/Tldraw
70 wiersze
2.2 KiB
XML
70 wiersze
2.2 KiB
XML
import { TLUiActionsContextType, TLUiOverrides, TLUiToolsContextType, Tldraw } from 'tldraw'
|
|
import 'tldraw/tldraw.css'
|
|
|
|
// There's a guide at the bottom of this file!
|
|
|
|
// [1]
|
|
const overrides: TLUiOverrides = {
|
|
//[a]
|
|
actions(_editor, actions): TLUiActionsContextType {
|
|
const newActions = {
|
|
...actions,
|
|
'toggle-grid': { ...actions['toggle-grid'], kbd: 'x' },
|
|
'copy-as-png': { ...actions['copy-as-png'], kbd: '$1' },
|
|
}
|
|
|
|
return newActions
|
|
},
|
|
//[b]
|
|
tools(_editor, tools): TLUiToolsContextType {
|
|
const newTools = { ...tools, draw: { ...tools.draw, kbd: 'p' } }
|
|
return newTools
|
|
},
|
|
}
|
|
|
|
// [2]
|
|
export default function KeyboardShortcuts() {
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw overrides={overrides} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/*
|
|
This example shows how you can replace tldraw's default keyboard shortcuts with your own,
|
|
or add a shortcut for an action that doesn't have one. An example of how to add shortcuts
|
|
for custom tools can be found in the custom-config example.
|
|
|
|
In this case we are overriding the toggle grid and draw tool shortcuts, and creating a
|
|
shortcut for copy-as-png. An override of an existing shortcut will automatically update
|
|
the keyboard shortcuts dialog. However, adding a new shortcut won't, we'll need to add it
|
|
ourselves.
|
|
|
|
You can describe modifier keys with the following syntax:
|
|
|
|
shift: !
|
|
ctrl/cmd: $
|
|
alt: ?
|
|
|
|
[1]
|
|
We start by defining our overrides, this is an object with functions that we can use to
|
|
change the ui. Keyboard shortcuts are associated with either tools (draw, eraser, etc) or
|
|
actions (group, undo/redo etc). We're going to override two actions [a], one tool [b], and
|
|
add a new shortcut to the keyboard shortcuts dialog [c].
|
|
|
|
[a] actions
|
|
There are two actions we're modifying here, copy-as-png and toggle-grid. copy-as-png
|
|
doesn't have an existing shortcut, but we can still add the property and later add it
|
|
to the keyboard shortcuts dialog [c].
|
|
|
|
[b] tools
|
|
We're overriding the draw tool's shortcut to 'p', maybe we want to rename it to the pen
|
|
tool or something.
|
|
|
|
[2]
|
|
Finally, we pass our overrides object into the Tldraw component's overrides prop. Now when
|
|
the component mounts, our overrides will be applied. If you open the keyboard shortcuts
|
|
dialog, you'll see the changes we made.
|
|
*/
|