-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: CTomlyn <[email protected]>
- Loading branch information
Showing
5 changed files
with
132 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,145 @@ | ||
| # Keyboard support | ||
|
|
||
| Common Canvas supports a number of keyboard interactions as described below. Some keyboard shortcuts are only available if the config field `enableKeyboardNavigation` is set to `true`. Some others, shown with an asterisk below are always availble. | ||
| Common Canvas supports a number of keyboard interactions as described below. Some keyboard shortcuts are only available if the config field `enableKeyboardNavigation` is set to `true` as indictaed above each table. | ||
|
|
||
| When any of the shortcut keys are pressed, if the shortcut has an action (listed below), Common Canvas will follow the same procedure as if the action was initiated from a context menu or from the canvas toolbar or by direct manipulation on the canvas. That is, it will: call the [beforeEditActionHandler](03.03.02-before-edit-action-handler.md) and the [editActionHandler](03.03.03-edit-action-handler.md) callbacks, with the `data.editType` parameter set to the action name and the `data.editSource` parameter set to "keyboard"; it will then update the object model with the change and refresh the flow editor display. | ||
|
|
||
| ## Flow Editoor | ||
| Note: In the tables below: | ||
| * "Meta" means either the Command key (⌘) on the Mac or, on Windows, the Windows key (⊞) or Control key (Ctrl). | ||
| * "Alt" means either the Option key (⌥) on the Mac or, on Windows, the Alternative key (Alt). | ||
|
|
||
| ### When focus is in the flow editor background | ||
| ## Flow Editor | ||
|
|
||
| ### When focus is in the flow editor, either on the background or on a flow editor object | ||
|
|
||
| The shortcuts in this table are always available. The application can disable these actions by providing the [keyboard config object](03.02.05-keyboard-config.md) to the common-canvas React component. | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |Meta + a |selectAll| Selects alll objects| | ||
| |Meta + Shift + a |deselectAll| Deselects all objects| | ||
| |[delete key] |deleteSelectedObjects| Delete currently selected objects| | ||
| |[backspace key] |deleteSelectedObjects| Delete currently selected objects| | ||
| |Meta + x |cut| Cut selected objects to the clipboard| | ||
| |Meta + c |copy| Copy selected objects to the clipboard| | ||
| |Meta + v |paste| Paste objects from the clipboard. If the mouse cursor is over <br>the canvas, objects will be pasted at the cursor position or, <br>if not, at a default position| | ||
| |Meta + z |undo| Undo last command| | ||
| |Meta + Shift + z |redo| Redo last undone command| | ||
| |Meta + y |redo| Redo last undone command| | ||
|
|
||
| The shortcuts in this table are only available when the canvas config field [enableKeyboardNavigation](03.02.01-canvas-config.md#enablekeyboardnavigation) is set to `true`. | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |Meta + a|selectAll|Selects alll objects| | ||
| |Meta + Shift + a|deselectAll|Deselects all objects| | ||
| |delete|deleteSelectedObjects|Delete currently selected objects| | ||
| |Meta + x|cut|Cut selected objects to the clipboard| | ||
| |Meta + c|copy|Copy selected objects to the clipboard| | ||
| |Meta + v|paste|Paste objects from the clipboard. If the mouse cursor is over <br>the canvas, objects will be pasted at the cursor position or, <br>if not, at a default position| | ||
| |Meta + z|undo|Undo last command| | ||
| |Meta + Shift + z|redo|Redo last undone command| | ||
| |Meta + y|redo|Redo last undone command| | ||
| |[tab key] |-| Moves keyboard focus to the next group of objects in the flow editor| | ||
| |Shift + [tab key] |-| Moves keyboard focus to the previous group of objects in the flow editor| | ||
| |Meta + Shift + [plus key] |zoomIn| Zoom in the flow editor| | ||
| |Meta + Shift + [minus key] |zoomOut| Zoom out the flow editor| | ||
| |Meta + Shift + [zero key] |zoomToFit| Zooms to fit the flow obejcts within the flow editor viewport| | ||
| |Meta + Shift + [up arrow key] |-| Pans the flow obejcts within the flow editor viewport upwards| | ||
| |Meta + Shift + [down arrow key] |-| Pans the flow obejcts within the flow editor viewport downwards| | ||
| |Meta + Shift + [left arrow key] |-| Pans the flow obejcts within the flow editor viewport to the left| | ||
| |Meta + Shift + [right arrow key] |-| Pans the flow obejcts within the flow editor viewport to the right| | ||
| |Meta + [slash key] |-| Displays a content menu or context toolbar (depending on which is enabled) for the focused object| | ||
|
|
||
| Your application can disable any or all of these actions by providing the [keyboard config object](03.02.05-keyboard-config.md) to the CommonCanvas React component. | ||
| ### When focus is on an object (node, comment or link) in the flow editor | ||
|
|
||
| When any of the shortcut keys are pressed the common-canvas object model will be updated and then the [editActionHandler](03.03-callbacks.md#editactionhandler) callback will be called with the `data.editType` parameter set to the action above and the `data.editSource` parameter set to "keyboard". | ||
| The shortcuts in this table are only available when the canvas config field [enableKeyboardNavigation](03.02.01-canvas-config.md#enablekeyboardnavigation) is set to `true`. | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |[right arrow key] |-| Moves focus to next object in the group| | ||
| |[left arrow key ] |-| Moves focus to previous object in the group| | ||
| |[return key] |-| Selects the focused object| | ||
| |Meta + [return key] |-| Selects the focused object and adds it to the current set of selected objects| | ||
| |Shift + [return key] |-| Selects a range of nodes through from from the currently selected object to the focused object| | ||
| |[up arrow key] |-| When the focused object is a link, moves focus to the previous sibling link| | ||
| |[down arrow key] |-| When the focused object is a link, moves focus to the next sibling link| | ||
| |Meta + [slash key] |-| Displays a content menu or context toolbar (depending on which is enabled) for the focused object| | ||
| |Meta + [up arrow key] |moveObjects| Moves the focused object, with any other selected objects, upwards| | ||
| |Meta + [down arrow key] |moveObjects| Moves the focused object, with any other selected objects, downwards| | ||
| |Meta + [left arrow key] |moveObjects| Moves the focused object, with any other selected objects, to the left| | ||
| |Meta + [right arrow key] |moveObjects| Moves the focused object, with any other selected objects, to the right| | ||
| |Shift + [up arrow key] |resizeObjects| Reduces the height of the focused comment or node (if `enableResizableNodes` is true)| | ||
| |Shift + [down arrow key] |resizeObjects| Increases the height of the focused comment or node (if `enableResizableNodes` is true)| | ||
| |Shift + [left arrow key] |resizeObjects| Reduces the width of the focused comment or node (if `enableResizableNodes` is true)| | ||
| |Shift + [right arrow key] |resizeObjects| Increases the width of the focused comment or node (if `enableResizableNodes` is true)| | ||
| |Meta + Shift + [right angle bracket key] |-| When the focused object is a node, creates a link to it from the currently selected node or comment| | ||
| |Alt + [up arrow key] |-| When the focused object is a comment and contains scrollable text, scrolls the text down| | ||
| |Alt + [down arrow key] |-| When the focused object is a comment and contains scrollable text, scrolls the text up| | ||
|
|
||
| ### Text Entry | ||
|
|
||
| The shortcuts in this table are only available when the canvas config field [enableKeyboardNavigation](03.02.01-canvas-config.md#enablekeyboardnavigation) is set to `true`. | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |[esc key] |-| Cancels the text entry and discards any changes| | ||
| |Shift + [return key] |-| Completes the text entry and saves the changes made| | ||
| |[return key] |-| When allowReturnKey is set to "save", completes the text entry and saves the changes made. Otherwise, it enters a new line into the text| | ||
| |[tab key] |-| When focus is on the text entry area, moves focus to the text toolbar| | ||
| |[tab key] |-| When focus is on the text toolbar, moves focus to the text entry area| | ||
| |Markdown text | || | ||
| |Meta + b |-| Insert 'bold' syntax around the selected text| | ||
| |Meta + i |-| Insert 'italics' syntax around the selected text| | ||
| |Meta + Shift + x |-| Insert 'strikethrough' syntax around the selected text| | ||
| |Meta + Shift + 7 |-| Insert 'numbered list' syntax around the selected text| | ||
| |Meta + Shift + 8 |-| Insert 'bulleted list' syntax around the selected text| | ||
| |Meta + e |-| Insert 'code' syntax around the selected text| | ||
| |Meta + k |-| Insert 'link' syntax around the selected text| | ||
| |Meta + Shift + [right angle bracket] |-| Insert 'quote' syntax around the selected text| | ||
| |Meta + [right angle bracket] |-| Increases number of hashes in front of the selected text| | ||
| |Meta + [left angle bracket] |-| Decreases number of hashes in front of the selected text| | ||
|
|
||
| ## Toolbar | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |[right arrow key] |-| When focus is on a button in the toolbar, move focus to the button to the right of current focus position. When focus in on a menu item, opens any available sub-menu or sub-panel| | ||
| |[left arrow key] |-| When focus is on a button in the toolbar, move focus to the button to the left of current focus position. When focus is on a sub-menu or sub-panel, closes the area and moves focs to the parent menu. | | ||
| |[down arrow key] |-| When focus is on a button in the toolbar, opens sub-area (either a sub-menu or sub-panel) below button, if one is available. When focus is on a sub-menu, moves focus to the next menu entry. | | ||
| |[up arrow key] |-| When focus is on a sub-menu, moves focus to the previous menu entry. | | ||
| |[space bar] |-| Activate the button | | ||
| |[return key] |-| Activate the button | | ||
| |[esc key] |-| Close any open associated sub-area (either a sub-menu or sub-panel) | | ||
|
|
||
| ## Palette | ||
|
|
||
| ### When focus is on the Search area | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |Tab | | Moves focus to first category. | | ||
| |Shift + Tab | | Moves focus out of the palette. | | ||
| |[tab key] |-| Moves focus to first category. | | ||
| |Shift + [tab key] |-| Moves focus out of the palette. | | ||
|
|
||
| ### When focus is on a category | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |Tab | | Moves focus to the next category. | | ||
| |Shift + Tab | | Moves focus to the previous category. | | ||
| |Down arrow | | When the category is open, moves focus to first node in the category.| | ||
| |[tab key] |-| Moves focus to the next category. | | ||
| |Shift + [tab key] |-| Moves focus to the previous category. | | ||
| |[down arrow key] |-| When the category is open, moves focus to first node in the category.| | ||
|
|
||
| ### When focus is on node in a category | ||
|
|
||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |Tab | | Moves focus to the next category. | | ||
| |Shift + Tab | | Moves focus to the parent category. | | ||
| |Down arrow | | Moves the focus down to next node in the category.| | ||
| |Up arrow | | Moves focus up to previous node in the category.| | ||
| |space bar|createNodeAttachLinks | Adds the node to the canvas and links it to an available existing node on canvas. Same as double clicking the node. | | ||
| |Shift + space bar|createNodeAttachLinks (addLinks: false) | Adds the node to the canvas and does not create any links. Same as dragging a node onto the canvas. | | ||
| |Tab |-| Moves focus to the next category. | | ||
| |Shift + [tab key] |-| Moves focus to the parent category. | | ||
| |[down arrow] |-| Moves the focus down to next node in the category.| | ||
| |[up arrow] |-| Moves focus up to previous node in the category.| | ||
| |[space bar] |createNodeAttachLinks | Adds the node to the canvas and links it to an available existing node on canvas. Same as double clicking the node| | ||
| |Shift + [space bar]|createNodeAttachLinks (addLinks: false) | Adds the node to the canvas and does not create any links. Same as dragging a node onto the canvas. | | ||
|
|
||
|
|
||
| ## Toolbar | ||
| ## Context toolbar / menu | ||
|
|
||
| |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 | | ||
| |Keyboard Shortcut|Action|Description| | ||
| |---|---|---| | ||
| |[down arrow key] |-| Move focus to next menu item below current focus position | | ||
| |[up arrow key] |-| Move focus to next menu item above current focus position | | ||
| |[right arrow key] |-| Opens cascade sub-area, if there is one, for the currenty focused item | | ||
| |[space bar key] |-| Activate the current menu item | | ||
| |[esc key] |-| Close the sub-area | | ||
|
|
||
|
|