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 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 and the editActionHandler 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.

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).

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 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 the canvas, objects will be pasted at the cursor position or, 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 is set to true.

Keyboard Shortcut	Action	Description
[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

When focus is on an object (node, comment or link) in the flow editor

The shortcuts in this table are only available when the canvas config field 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 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 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 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 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.

Context toolbar / menu

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