This small example demonstrates the interactive layout capabilities of klay.js.
Note that by interactivity we don't mean user interaction but
consideration of previous positions by the layout algorithm.
Fixed
In the initial arrangement, specified by a user or application, node n4 is left of n5 and n6 is at the top.
The positions serve as basis for the following configurations (except automatic).
Our algorithm respects the positions and only re-calculates sizes for the compound nodes root and g0.
Automatic
The algorithm can position every node and edge as it likes.
Layer Preserving
In a top-to-bottom layout, a layer is a row in which nodes are placed.
No pair of connected nodes is allowed to be placed in the same layer.
After layer preserving layout n6 remains above n3 even though the edge points upwards.
The order of the nodes is not preserved though, whereby n6 is on the left of n1 after layout.
Order Preserving
After order preserving layout n4 remains on the left even though the edge (n3, n4)
crosses with (n2, n5).
The layering is not preserved, n6 is at the bottom of n3 now with its edge pointing downwards.
Layer & Order Preserving
The algorithm guarantees that n6 remains at the top
and that n4 remains at the left of n5.