Learn how to group nodes in Foblex Flow, organize nested structures, and use smart geometry features like fIncludePadding, fAutoSizeToFitChildren, and fAutoExpandOnChildHit for dynamic, responsive diagrams in Angular.
Grouping helps structure complex diagrams by combining related nodes into logical blocks. Groups can be moved as a whole, resized dynamically, and used to manage nested structures. This example demonstrates:
It also shows how groups can have inputs/outputs like regular nodes, and how connections route accordingly.
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/nodes/grouping/grouping.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/nodes/grouping/grouping.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/nodes/grouping/grouping.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss