# Drag & drop canvas interactions ## Introduction The (new) process flow canvas includes interactive features that will be familiar if you've ever worked with design tools: * [Zoom & pan](#zoom-and-pan) * [Selecting multiple shapes](#selecting-multiple-shapes) * [Using context menus](#using-context-menus) * [Moving shapes](#moving-shapes) * [Disconnecting shapes](#disconnecting-shapes) * [Connecting shapes](#connecting-shapes) * [Copying & pasting shapes](#copying-and-pasting-shapes) * [Deleting shapes](#deleting-shapes) * [Canvas notes](#canvas-notes) ### Zoom & pan To zoom out and make the flow smaller, scroll your mouse forward (i.e. away from you). To zoom in and make the flow larger, scroll backwards (i.e. towards you).
Show me
If you don't want to use the [flow navigator (minimap)](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/the-process-flow-canvas/the-drag-and-drop-canvas/..#flow-navigator-minimap), you can click and drag anywhere on the canvas to pan up/down/left right.
Show me
### Selecting shapes Most interactions detailed on this page can be performed for a single shape or multiple shapes. When a single shape is clicked, you'll notice a solid outline which indicates it's selected. For example:
To select multiple shapes, press and hold the `SHIFT` key, then drag your cursor to select the required shapes. Right-click this selection to display a context menu, with quick access to interactions.
Show me
### Using context menus Having selected a shape or multiple shapes, a right-click context menu provides quick access to interactions. The same applies if no shapes are selected and you click anywhere on the canvas. For example:
Right-click on a single shape:

Right-click on a selected group of shapes:

Right-click on the canvas:

Context menu options vary depending on what is selected and previous actions. For example, if you have copied a shape, you'll see a paste option when any context menu is activated.
Show me
### Moving shapes You can click any shape (or a [multiple-shape selection](#selecting-multiple-shapes)) and drag it to a new location on the canvas (for example, you might want to drag nodes away for subsequent disconnection and isolated testing).
Show me
If you move a single shape and it's associated with 'child' shapes, the child shapes are not included in the move. For this, you would need to [select multiple](#selecting-multiple-shapes) shapes and move that selection. Moving a shape (or a multi-shape selection) may result in a messier-looking flow, but you can use the [auto layout](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/the-process-flow-canvas/the-drag-and-drop-canvas/..#process-flow-actions) action at any time to bring everything back into line.
Show me
{% hint style="info" %} When you move a shape (or a multi-shape selection) that's connected in the flow, the connection is retained. If required, you can [disconnect](#disconnecting-a-shape) it subsequently. {% endhint %} ### Disconnecting shapes It can be useful to disconnect shapes from the main flow, especially for testing. For example, you may want to disconnect a route leg for isolated testing, or 'park' a [manual payload](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/process-flow-shapes/standard-shapes/manual-payload-shape) or [assert](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/process-flow-shapes/standard-shapes/assert-shape) shape once testing is finished. {% hint style="warning" %} To be part of the flow, a shape must have an input connection and also an output connection - i.e. a connection FROM one shape and a connection TO another shape. Disconnected shapes are ignored when a process flow runs, and also when you [switch to the classic canvas](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/the-process-flow-canvas/..#how-do-i-access-the-new-beta-canvas). {% endhint %} To delete a connection between shapes, use the associated 'trash' icon (every connection has one). For example:
When you hover the cursor over this icon, it changes to red - click to confirm the action.
Show me
### Connecting shapes Each shape is associated with input and output anchors, used to create a connection to the flow. When you hover the cursor over a shape anchor, you'll see the cursor change to a cross - for example:
This indicates that you can drag a path between the shape from which the connection will be made and the shape to be connected (or vice versa).
Show me
{% hint style="warning" %} To be part of the flow, a shape must have an input connection and also an output connection - i.e. a connection FROM one shape and a connection TO another shape. Disconnected shapes are ignored when the process flow runs. {% endhint %} If you need to connect a shape at a point where there's an existing connection, you must [delete](#disconnecting-shapes) the existing connection first.
Show me
To tidy the flow after making a new connection, use the [auto layout](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/the-process-flow-canvas/the-drag-and-drop-canvas/..#process-flow-actions) action to bring everything back into line. ### Copying & pasting shapes Copying/pasting shapes and groups of shapes really speeds up the flow creation process. Imagine a [route shape](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/process-flow-shapes/standard-shapes/route-shape) with multiple legs that are all the same except for some config variations; rather than building each leg individually, you can: 1. Build the first leg 2. Copy/paste that leg as many times as needed 3. Connect each leg to the route shape 4. Edit shape settings for each leg, as needed
Show me
{% hint style="info" %} You can copy/paste shapes within the current process flow. Shapes cannot be copied between flows. {% endhint %} To copy/paste a single shape or a [selected group of shapes](#selecting-multiple-shapes), you can:
OptionExample
Use the right-click context menu. Right-click on the shape (or selected group of shapes) and select copy from the context menu.

Then move roughly to the required destination on the canvas, right-click again and select paste from the context menu.

Select the shape (or group of shapes) and press CTRL+C.

Then move roughly to the required destination on the canvas and press CTRL+V.
### Deleting shapes To delete a shape or multiple shapes quickly, you can simply select the required shape(s) and press your delete key. Alternatively, use the [context menu](#using-context-menus). For example:
Select a single shape, then right-click and select the delete option:

Select a group of shapes, then right-click and select the delete option:

{% hint style="warning" %} When a shape or group of shapes is deleted, their associated connections are also removed. Depending on the location in the flow and what you need to achieve, it may be necessary to [reconnect](#connecting-shapes) 'orphaned' shapes. {% endhint %}
Show me
## Canvas notes When working with longer, complex process flows, canvas notes are a great way to keep track of thoughts for flow development, document the logic, list outstanding tasks, etc. Whereas [shape notes](https://doc.wearepatchworks.com/product-documentation/process-flows/building-process-flows/shape-notes) are bound to a particular shape in the flow, canvas notes are general - as the name suggests, they are tied to the canvas as a whole. To add a canvas note, right-click anywhere on the canvas and select the add note option. For example:
The note is added at the current cursor position. For example:
Double-click to edit the note, or use the delete (cross) icon to remove a note. {% hint style="info" %} You can also choose to add a note from the context menu when a group of shapes is selected - for example:\ \ ![](https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F5bbESdKNmdnbsXsBk6Ou%2Fadd%20note%20for%20group%20b.png?alt=media\&token=7e791e54-8e3f-43b0-8560-1583d4ae5cf2)\ \ Adding a note here doesn't bind it to the group in any way; it just places the note conveniently within the group. {% endhint %}