Dagre Tree

Description

This example demonstrates automatic graph layout using dagre.js together with Foblex Flow and Angular. The component builds a tree from a set of nodes and edges, computes positions using dagre.layout(graph), and renders nodes and connections on the Flow canvas.

What this example shows

• Switching layout direction: Left→Right and Top→Bottom.
• Auto Layout toggle — when enabled, flow.reset() is called before each recalculation and nodes are repositioned using Dagre results.
• Automatic viewport fitting: fitToScreen(...) after the flow has been loaded.

Technical details

• The graph is built using dagre.graphlib.Graph: nodes come from GRAPH_DATA, edges are defined by parentId.
• After calling dagre.layout, node coordinates are mapped into nodes() with { x, y } positions, and edges into connections().

Example