# States

## Summary

### Element states

| Name                                              | Type     | Summary                                                                                                                                                                 |
| ------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [nodes JSON](#nodes-json)                         | `text`   | All nodes currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance.                               |
| [edges JSON](#edges-json)                         | `text`   | All edges (connections) currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance.                 |
| [updated nodes IDs](#updated-nodes-ids)           | `list`   | List of IDs of nodes that were moved in the last position change event. Use with node changed position event to get all nodes that moved together.                      |
| [updated nodes Xs](#updated-nodes-xs)             | `list`   | List of new X coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID.                               |
| [updated nodes Ys](#updated-nodes-ys)             | `list`   | List of new Y coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID.                               |
| [removed nodes IDs](#removed-nodes-ids)           | `list`   | List of IDs of nodes that were deleted in the last node removal event. Use with node removed event to get all nodes that were deleted together.                         |
| [added edge source](#added-edge-source)           | `text`   | ID of the source node for the edge that was created in the last edge addition event. Use with edge added event to get edge details.                                     |
| [added edge target](#added-edge-target)           | `text`   | ID of the target node for the edge that was created in the last edge addition event. Use with edge added event to get edge details.                                     |
| [removed edges IDs](#removed-edges-ids)           | `list`   | Array of edge IDs that were deleted in the last edge removal event. Use with edge removed event to get edge details.                                                    |
| [removed edges sources](#removed-edges-sources)   | `list`   | Array of source nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details.                               |
| [removed edges targets](#removed-edges-targets)   | `list`   | Array of target nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details.                               |
| [clicked node ID](#clicked-node-id)               | `text`   | ID of the node that was clicked in the last node click event. Use with node clicked event to identify which node was selected.                                          |
| [clicked edge ID](#clicked-edge-id)               | `text`   | ID of the edge that was clicked in the last edge click event. Use with edge clicked event to identify which edge was selected.                                          |
| [selected nodes IDs](#selected-nodes-ids)         | `list`   | List of IDs of all currently selected nodes. Updates automatically when selection changes.                                                                              |
| [selected edges IDs](#selected-edges-ids)         | `list`   | List of IDs of all currently selected edges. Updates automatically when selection changes.                                                                              |
| [mouse flow X](#mouse-flow-x)                     | `number` | Current X coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop.                                                         |
| [mouse flow Y](#mouse-flow-y)                     | `number` | Current Y coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop.                                                         |
| [dropped edge source ID](#dropped-edge-source-id) | `text`   | ID of the source node when an edge is dropped on the canvas without connecting to a target. Use with edge dropped on canvas event to handle node creation on edge drop. |

***

## Element states

### nodes JSON

**Type:** `text`

All nodes currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance.

***

### edges JSON

**Type:** `text`

All edges (connections) currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance.

***

### updated nodes IDs

**Type:** `list`

List of IDs of nodes that were moved in the last position change event. Use with node changed position event to get all nodes that moved together.

***

### updated nodes Xs

**Type:** `list`

List of new X coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID.

***

### updated nodes Ys

**Type:** `list`

List of new Y coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID.

***

### removed nodes IDs

**Type:** `list`

List of IDs of nodes that were deleted in the last node removal event. Use with node removed event to get all nodes that were deleted together.

***

### added edge source

**Type:** `text`

ID of the source node for the edge that was created in the last edge addition event. Use with edge added event to get edge details.

***

### added edge target

**Type:** `text`

ID of the target node for the edge that was created in the last edge addition event. Use with edge added event to get edge details.

***

### removed edges IDs

**Type:** `list`

Array of edge IDs that were deleted in the last edge removal event. Use with edge removed event to get edge details.

***

### removed edges sources

**Type:** `list`

Array of source nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details.

***

### removed edges targets

**Type:** `list`

Array of target nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details.

***

### clicked node ID

**Type:** `text`

ID of the node that was clicked in the last node click event. Use with node clicked event to identify which node was selected.

***

### clicked edge ID

**Type:** `text`

ID of the edge that was clicked in the last edge click event. Use with edge clicked event to identify which edge was selected.

***

### selected nodes IDs

**Type:** `list`

List of IDs of all currently selected nodes. Updates automatically when selection changes.

***

### selected edges IDs

**Type:** `list`

List of IDs of all currently selected edges. Updates automatically when selection changes.

***

### mouse flow X

**Type:** `number`

Current X coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop.

***

### mouse flow Y

**Type:** `number`

Current Y coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop.

***

### dropped edge source ID

**Type:** `text`

ID of the source node when an edge is dropped on the canvas without connecting to a target. Use with edge dropped on canvas event to handle node creation on edge drop.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enhancio.gitbook.io/reactflow-for-bubble.io/element-reference/states.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
