Flow Editor Overview¶

The Flow Editor displays the flow to the user and allows the user to interact with the flow using the mouse/trackpad and the keyboard and other input devices. Typically, the flow shows a set of nodes connected by links (edges) that represent some flow of data, or flow of control, which is in the problem domain of the application.

The editor displays the following object types which the user can interact with:

Pipeline Flow¶

The defintions of objects displayed within the flow editor are contained in a JavaScript object descibed by the pipeline flow schema. A pipeline flow object can be serialized to, or parsed from, JSON and consequently saved to, or read from, a file.

The storage and mangement of pipeline flow files is handled by the application. The pipeline flow can be read from the canvas controller:

    const pflow = canvasController.getPipelineFlow();

and a previously saved pipeline flow can be provided to Common Canvas also using the canvas controller:

    canvasController.setPipelineFlow(pFlow);

A pipeline flow contains an array of pipelines, one of which is the ‘primary pipeline’. Other pipelines will be sub-flows for supernodes contained within the primary pipeline (or other pipelines).

Each pipeline defines sets of nodes, links and comments with all their associated attributes.

Create nodes¶

Nodes can be created by dragging from the palette and dropping onto the flow editor canvas:

Nodes can also be automatically added to the flow editor canvas by double clicking them in the palette. The node will be added at an appropriate place on the canvas and connected to the preceding node if one is available:

Object Selection¶

Objects (nodes, links and comments) on the flow editor canvas can be selected by single clicking on them. Subsequently, if the user Command/Ctrl + clicks on another object it will be:

Added to the set of selected objects if it is not currently selected or
Removed from the set of selected objects if it is currently selected.

Clicking on the flow editor canvas background will deselect all canvas objects.

A selection region can be pulled out to select multiple objects at once by pressing the Shift key and dragging on the canvas background.

A set of connected nodes through a flow can be selected by, clicking on a node to select it and then, Shift + click another downstream node. If the nodes are joined together through a set of inter-connected nodes, all of those nodes will be selected.

All canvas objects can be selected by displaying the default context menu or context toolbar for the flow-editor background and then clicking the ‘Select All’ option. Note: If the application provides its own canvas menus then it would need to add the selectAll internal action to the menu to enable the ‘select all’ function.

Alternatively, the user can press Ctrl/Command + a keyborad shortcut to select all objects when the keyboard focus is on the canvas.

Create links¶

Links can be created by dragging from one node’s output port to another node:

Reposition Objects¶

The Flow Editor allows direct manipulation of selected objects by dragging them to a new position.

The flow editor can display a context menu or context toolbar (depending on which is enabled) that can show options for the whole flow. It is displayed by the context menu gesture which is either right-clicking the mouse, or the trackpad equivalent, while the mouse cursor is over the canvas.

Zoom Objects¶

The objects on the flow-editor canvas can be zoomed in and out either using the zoomIn or zoomOut toolbar buttons or by performing the zoom gesture using the mouse or trackpad. The canvas background can be panned by dragging the background.

A large flow can be centrally positioned, making all the nodes visible within the viewport, by clicking the zoomToFit button.

Command Stack¶

Command actions that update the objects within the flow editor are added to the command stack and can be undone and then redone. The default toolbar has undo and redo buttons and the default context menu/toolbar for the canvas background has undo and redo options. There are also keyboard shortcuts to undo and redo.

Clipboard¶

Users can cut and copy one or more objects from the canvas onto the clipboard and paste them into the same flow or a different flow. The default canvas toolbar provides buttons for these three actions and they can also be accessed through the default context menus/toolbars for the objects on the canvas.

There are also keyboard shortcuts to cut, copy and paste.