Keyboard Support
Keyboard support¶
Common Canvas supports a number of keyboard interactions as follows:
When focus is in the flow editor¶
| Keyboard Shortcut | Action | Description |
|---|---|---|
| Ctrl/Cmnd + a | selectAll | Select All objects |
| delete | deleteSelectedObjects | Delete currently selected objects |
| Ctrl/Cmnd + x | cut | Cut selected objects to the clipboard |
| Ctrl/Cmnd + c | copy | Copy selected objects to the clipboard |
| Ctrl/Cmnd + v | paste | Paste objects from the clipboard. If the mouse cursor is over the canvas, objects will be pasted at the cursor position or, if not, at a default position |
| Ctrl/Cmnd + z | undo | Undo last command |
| Ctrl/Cmnd + Shift + z | redo | Redo last undone command |
| Ctrl/Cmnd + y | redo | Redo last undone command |
Your application can disable any or all of these actions by providing the keyboard config object to the CommonCanvas React component.
When any of the shortcut keys are pressed the common-canvas object model will be updated and then the editActionHandler callback will be called with the data.editType parameter set to the action above and the data.editSource parameter set to “keyboard”.
When focus is on a palette node¶
| Keyboard Shortcut | Action | Description |
|---|---|---|
| space bar | createNodeAttachLinks | Adds the node to the canvas and links it to existing node on canvas. Same as double clicking the node. |
When focus is on the toolbar¶
| Keyboard Shortcut | Description |
|---|---|
| right arrow | Move focus to the button to the right of current focus position |
| left arrow | Move focus to the button to the left of current focus position |
| down arrow | Open sub-area (either a sub-menu or sub-panel) below button, if one is available |
| space bar | Activate the button |
| esc | Close any open associated sub-area (either a sub-menu or sub-panel) |
When focus is on the toolbar overflow menu or sub-area (either a sub-menu or sub-panel)¶
| Keyboard Shortcut | Description |
|---|---|
| down arrow | Move focus to next menu item below current focus position |
| up arrow | Move focus to next menu item above current focus position |
| right arrow | Opens cascade sub-area, if there is one, for the currenty focused item |
| space bar | Activate the current menu item |
| esc | Close the sub-area |