# Editing a Model

## Adding components

### Quick-add (recommended)

The fastest way to build a workflow is using **quick-add buttons**:

- **Node quick-add**: Hover over any node to reveal a **+** button. Click it to
  open a popup with available successor components. Select one, and the new node
  is placed and connected automatically.

- **Condition quick-add**: Hover over any edge to reveal a **+** button. Click
  it to add a condition to that edge.

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

![Quick-add button appearing on hover over a node](../assets/screenshots/quick-add.png){ .screenshot }

!!! note "Context-aware filtering"
    Quick-add popups only show components that are valid in the current context.
    If a workflow context is selected, only components defined for that context
    appear. Additionally, dependency rules may hide components that require
    specific predecessor types not present in the workflow.

### Drag and drop

Drag a component from the Component Panel on the left and drop it onto the
canvas. You will then need to manually connect it to other nodes using edges.

### Connecting nodes

To connect two nodes:

1. Hover over the source node to reveal its output port (a circle).
2. Click and drag from the output port to the target node's input port.
3. Release to create the edge.

## Configuring components

Click any node or edge to select it. The Property Panel opens on the right with:

### Label

The display label shown on the canvas. Click it to edit it inline. The label
is also editable directly on the canvas by double-clicking the node.

### Configuration form

A dynamic form with fields specific to the selected component's plugin. Common
field types include text fields, select lists, checkboxes, numbers, and text
areas.

!!! tip "Token fields"
    Some fields accept **tokens** (dynamic values). During a token drag from
    the Replay Panel, eligible fields glow to indicate they accept drops, while
    non-eligible fields dim. See [Tokens & Data](../replay/tokens.md).

### Annotations

Add a documentation note to any node or edge. The annotation appears as a
label on the canvas when annotations are visible (toggle via the toolbar).

## Moving and arranging

### Dragging nodes

Click and drag any node to reposition it on the canvas. Nodes snap to a 20px
grid.

### Auto-positioning

When adding nodes via quick-add, the modeler automatically finds an optimal
position that avoids overlapping existing nodes and respects flow boundaries.

## Selecting multiple elements

- **Shift + Click**: Add or remove individual elements from the selection.
- **Shift + Drag**: Draw a selection rectangle to select all elements within it.

The multi-selection panel lets you:

- **Lock/Unlock** all selected elements.
- **Delete all** selected elements (with confirmation).

## Locking elements

Locked elements cannot be moved, deleted, or edited. This is useful for
protecting parts of a workflow from accidental changes. Lock a node by toggling
the lock icon in its Property Panel.

## Deleting elements

- **Single element**: Select it and press `Delete`, or use the delete option
  in the Property Panel.
- **Multiple elements**: Select them and press `Delete`, or use the
  "Delete All" button in the Multi-Selection Panel.

Deletions of multiple elements always require **confirmation** through a
dialog.

## Copy and paste

- **Copy**: Select elements and press `Ctrl+C` (or `Cmd+C` on Mac).
- **Paste**: Press `Ctrl+V` (or `Cmd+V` on Mac) to paste copied elements.

Pasted elements are offset from the originals so they don't overlap.

## Undo

!!! warning
    The modeler does not currently have an undo function. Deleted elements
    cannot be recovered unless you close without saving and reopen the model.
