Custom Layout Stage Demo

Layout Stages provide a way of separating a complete layout into different parts. This often involves changing the graph in certain ways before another stage acts on it, post-processing the graph after another stage, or even both. Layout stages are designed to be chained, in that they each have a so-called “core” layout that performs the actual work after pre- or before post-processing.

yFiles for HTML ships with a large variety of layout stages, all sharing the interface ILayoutStage. If a specific use case is not covered by existing stages, it is easy to write own custom stages by extending class LayoutStageBase. When writing custom stages it is necessary to work with the Layout Graph Model.

This demo application shows three simple custom layout stages, which demonstrate different problems and possible solutions with a custom layout stage.

Temporarily removes the blue nodes, runs its core layout, and re-inserts the blues nodes as a vertical stack on the right side.

Inserts temporary edges, along with certain constraints to help the core HierarchicalLayout align the green nodes. The nodes are selected via an IMapper registered with the graph under a certain key.

A pure post-processing stage that changes the edge paths produced by the core layout to a zig-zag shape.

See the sources for details.