GroupNode
A container node for visually organizing collections of related nodes. GroupNode renders as a larger, distinct region on the canvas without a content body, allowing other nodes to sit inside it.
Key Features
- Visual grouping -- acts as a background container for other nodes
- No content area -- the body is intentionally empty to maximize space for child nodes
- Contained node tracking -- maintains a set of node IDs that belong to the group
- Distinct styling via the
group-nodeCSS class - Group icon in the title bar to differentiate from standard nodes
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
width | number | 400 | Width in pixels |
height | number | 300 | Height in pixels |
title | string | 'New Group' | Display title in the title bar |
color | string | 'default' | Color theme variant |
containedNodeIds | string[] | [] | Array of node IDs this group contains |
Usage
Creating a Group
Add a GroupNode from the context menu. It appears as a large, semi-transparent region. Drag it behind other nodes or drag nodes on top of it to create a visual grouping.
Managing Contained Nodes
GroupNode tracks which nodes are contained within it through its containedNodeIds set. When you drag a node into a group's bounding area, the system adds that node's ID to the group. Dragging a node out removes it.
Resizing
Resize the group freely using any of the eight resize handles. The group does not constrain the position of its children -- it serves as a visual organizer, not a strict container.
TIP
Use GroupNode to organize related sections of your graph. For example, group all data-processing nodes together and all output nodes together to keep large graphs navigable.