Example of Keyboard Interaction in Blazor Diagram Component
This sample demonstrates keyboard interaction with the Diagram component through shortcut keys, managed by the command manager.
Built-In Commands
Command |
Gesture |
| Select All | Ctrl + A |
| Cut | Ctrl + X |
| Copy | Ctrl + C |
| Paste | Ctrl + V |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Delete | Delete |
| Edit Annotation | F2 |
| Cancel | Esc |
Custom Commands
Command |
Gesture |
| NodeGroup | Ctrl + G |
| Ungroup | Ctrl + U |
Modified Commands
Command |
Gesture |
| Navigate to Parent Node | Up Arrow |
| Navigate to Child Node | Down Arrow |
| Navigate to Previous Child | Left Arrow |
| Navigate to Next Child | Right Arrow |
This example shows how to interact with the Diagram component using shortcut keys. The CommandManager property maps KeyboardCommands to key gestures. Alongside the built-in commands, several custom commands are added, and some default commands (e.g., nudge) are overridden. For instance, pressing the arrow keys moves the selection to the next node rather than shifting selected objects. The property panel lists various interactions and their associated key gestures.