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.

Project Resources

Web Development

API Services

Integration

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.