Nested Nodes

Nested nodes (often called Group Nodes) allow you to physically place one node inside another. In yh-flow, this is achieved via the parentId attribute. A child node's coordinates are relative to the top-left corner of its parent, making it easy to move groups of nodes as a single unit.

Nesting Example

Try dragging the outer "Parent Container" node; you'll notice the inner child nodes follow its movement naturally. You can also independently drag the children within the parent's boundaries.

Logical Hierarchy

Mechanics

1. Hierarchy Definition: Establish relationships by pointing a node's parentId to a parent's id.
2. Coordinate Inheritance: Child position values are relative to the parent's top-left origin (0,0). When the parent moves, children move along with it automatically.
3. Rendering Order: The engine optimizes stacking context. Parent nodes are rendered with lower z-index values to ensure they stay behind their children.

TIP

Dynamic Nesting: You can use drag-end events to calculate spatial intersections and dynamically assign/remove parentId to implement "drag-and-drop into group" functionality.