# Canvas

The **Canvas** is the central workspace of the modeler, powered by
[React Flow](https://reactflow.dev/). It is where you visually build and
arrange your workflow.

## Navigation

### Panning

Click and drag on the empty canvas background to pan (scroll) around the
workspace. The canvas is infinite in all directions.

### Zooming

- **Mouse wheel**: Scroll up to zoom in, scroll down to zoom out.
- **Zoom controls**: Use the **+** and **-** buttons in the toolbar.
- **Fit to screen**: Click the fit-to-screen button in the toolbar to
  automatically zoom and pan so that all nodes are visible.

### Vertical and horizontal scrolling

- **Ctrl + Mouse wheel**: Pan vertically.
- **Ctrl + Alt + Mouse wheel**: Pan horizontally.

## Selecting elements

### Single selection

Click on a node or edge to select it. The Property Panel will open
automatically on the right.

### Multi-selection

- **Shift + Click**: Add or remove individual elements from the selection.
- **Shift + Drag**: Draw a selection rectangle to select multiple elements at
  once.

When multiple elements are selected, the Property Panel shows a **Multi-Selection
Panel** with bulk operations (lock/unlock all, delete all).

![Multi-selection showing several nodes and edges selected with the bulk operations panel](assets/screenshots/multi-selection.png){ .screenshot }

### Deselecting

Click on an empty area of the canvas to deselect all elements.

## Adding elements

There are three ways to add elements to the canvas:

### Drag from Component Panel

Drag a component from the Component Panel on the left and drop it onto the
canvas. The node will be placed where you release the mouse.

### Quick-add buttons

Hover over a node to reveal a **+** button. Clicking it opens a popup where you
can choose a successor component. The new node is automatically positioned and
connected.

Similarly, hover over an edge to reveal a **+** button for adding a condition.

### Event button

Click the **+ Event** button in the toolbar to add a new event (start) node.

## Connecting elements

To create an edge (connection) between two nodes:

1. Hover over the source node to reveal its **output port** (a small circle on
   the bottom or right of the node).
2. Click the output port and drag to the **input port** of the target node.
3. Release to create the connection.

## Node types

The canvas displays four visual node types:

| Node Type | Shape | Description |
|-----------|-------|-------------|
| **Event** (start) | Rounded | Triggers that start a workflow (e.g., "Entity insert"). |
| **Element** (action) | Rectangle | Actions that perform work (e.g., "Send email"). |
| **Gateway** | Diamond | Decision points that control flow branching. |
| **Subprocess** | Double-bordered rectangle | References to other workflow models. |

## Edge types

Edges can be:

- **Simple connections**: A direct link from one node to another.
- **Conditional edges**: Edges with a condition attached, shown with a label.
- **Annotated edges**: Edges with an annotation note.

## Snap to grid

All nodes snap to a 20px grid for consistent alignment. This keeps workflows
looking clean and professional.

## Smart node positioning

When you add a node using quick-add, the modeler automatically finds a free
position that:

- Does not overlap with existing nodes.
- Stays within the boundaries of the current workflow flow.
- Shifts neighboring flows if needed to make room.

This means you rarely need to manually reposition nodes.
