Customizing Automatic Layout

Here we discuss the graph model which is used internally by the layout algorithms. We also show how to implement custom layout stages.

This section describes the graph model used by the layout part of yFiles. You only need to understand this model if you implement your own ILayoutAlgorithm, ILayoutStage, or another type from the layout part. Applying an Automatic Layout describes how to apply an automatic layout to an IGraph or GraphComponent.

The layout part of the yFiles library uses a different graph API than the IGraph-based viewer part. Its main class is the graph type LayoutGraph and the associated graph element types LayoutNode and LayoutEdge. These types do not implement the corresponding interfaces IGraph, INode, IEdge, etc.

The type LayoutGraph implements a directed graph model. Its main entities are of type LayoutNode. The nodes are connected by directed edges of type LayoutEdge; each edge has a distinct source node and a distinct target node. In a LayoutGraph, nodes have a location and a size, specified by type NodeLayout. The layout of an edge is defined by its sourcePortLocation, targetPortLocation and bends (control points). Both nodes and edges can optionally own one or more labels of type LayoutNodeLabel or LayoutEdgeLabel. This graph type is used by the automatic layouts of yFiles.

Compared to IGraph, the most important similarities and differences of the layout graph are:

• Both implement a directed graph with nodes and directed edges. Edges can be self-loops (where the source and target are the same), and there is no restriction on the number of edges connecting the same two nodes from a graph.
• Both provide similar methods to work with the graph structure, for example, to create and delete nodes and edges, and to iterate the incoming and outgoing edges of a node.
• Both support grouped nodes, but the realization is somewhat different.
• In LayoutGraph, ports are not distinct graph elements. Instead, the location of ports are part of the path of an edge, and the desired placement can be specified with Port Candidates.

To learn about the most important migration aspects when upgrading from yFiles for HTML 2.6 to yFiles for HTML 3.0 with respect to the layout graph model, please see Changes to the Layout Graph Model.