documentationfor yFiles for HTML 2.6

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 of the layout part of yFiles. You’ll have to work with this model only if you implement your own ILayoutAlgorithm, ILayoutStage, or another type from the layout part. The section Applying an Automatic Layout describes how to apply an automatic layout to an IGraph or GraphComponent.

The layout and analysis part of the yFiles library uses a different graph API than the IGraph-based viewer part. Its main classes are the graph types Graph and LayoutGraph and the associated graph element types Node and Edge. These do not implement the corresponding interfaces IGraph, INode, IEdge, etc.

The type Graph implements a directed graph model. Its main entities are of type Node. The nodes are connected by directed edges of type Edge, that is, an edge has a distinct source node and a distinct target node. This graph type is used by the analysis algorithms of yFiles.

The type LayoutGraph extends Graph and adds positional and dimensional information to the graph model. In particular, this means the location and size of a node, specified by the type INodeLayout, and the location of the source port, target port, and the control points of the path of an edge, specified by type IEdgeLayout. This extended 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 (the source and target is 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 created and delete nodes and edges, and to iterate the incoming and outgoing edges of a node.
  • Both support grouped nodes, but the realization is quite different.
  • In Graph and 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.