Tree Layout Demo
Demonstrates the tree layout style and the different ways in which this layout can arrange
a node and its children.
With tree layout, each node can have a separate
ITreeLayoutNodePlacer
which is responsible for the arrangement of its children in a certain style.
Configure the Node Placers
You can configure the node placer of the selected nodes in the right side panel. Changing
an option in the panel immediately updates the layout of the graph. A preview demonstrates
the chosen subtree style in a smaller context.
- Some node placers offer rotation and mirroring of the subtree.
-
Toggle the
Assistant
marking for a single node by
double-clicking
on it. They will show their effect when their parent node has
AssistantNodePlacer
assigned.
-
DefaultNodePlacer
is used for nodes without an explicit assignment.
Sample Graphs
-
Default Tree
is a regular tree which is arranged using a combination of
LeftRightNodePlacer
and
DefaultNodePlacer
for each subtree.
-
Wide Tree
has the same structure as the
DefaultTree
but is arranged only using
DefaultNodePlacer
.
-
Category Tree
uses
DefaultNodePlacer
to place the categories in columns and arranges the nodes of each category stacked
left-right.
-
General Graph
is not a tree and uses the
TreeReductionStage
to prepare the graph for
TreeLayout
. In this sample, non-tree edges are routed with organic style.
-
Large Tree
uses
CompactNodePlacer
for some sub-trees to get a compact layout.
Change the Graph
Changing the graph in this demo will keep its tree structure intact, and each change will
trigger a layout calculation.
- Add nodes (and edges) by dragging from an unselected node.
-
Removing selected nodes will remove their whole subtrees. The root node cannot be
deleted.
- Resize nodes to see how the layout changes.
-
Change the order of children by adding number labels using the
F2
key.