IGraph

The central interface IGraph defines fundamental graph structure-related functionality including creation and deletion of graph elements, or querying of structural aspects, like, e.g., adjacency lists. Provided is also support for modifying the geometry of graph elements, i.e., their location and size, and for modifications to the visual appearance of model items. Finally, it provides access to the graph items it contains and dispatches events for all kinds of structural changes.

The graph elements INode, IEdge, ILabel, IPort, and IBend consistently provide read-only views of their data. All graph elements are created using the factory pattern, i.e. via corresponding create or add methods on IGraph which do not only return the newly created instance but also register the new item properly at the graph and dispatch the proper creation event.

Neither IGraph nor the model item interfaces are meant to be implemented by application programmers. Instead you should use the implementations provided by yFiles for HTML. In most cases you just work with the IGraph instance which is provided by the graph property of the GraphComponent class.

To change a graph element’s properties, methods defined in IGraph need to be used. IGraph holds responsibility for all changes to the graph model, be it of structural nature, changes of geometry, or regarding the visual appearance of graph elements. Consequently, instances of the graph elements can only be created via IGraph’s creation methods.

Accordingly, elements are removed from the graph using the IGraph’s remove method which removes the items in a consistent order. Before it removes the item itself, all dependent items are removed. Removed events are dispatched for all items in the order they are removed. When a node is removed, for example, all dependent items (the node’s labels and ports, also the adjacent edges) are removed before the node itself is removed.

All items can be removed at once using the clear method, which leaves an empty graph after use. Like the remove method clear removes all items in a consistent order, dispatching Removed events for all items in the order they are removed.

As stated above a graph is defined as consisting of a node set and an edge set. IGraph provides a read-only access to its nodes and edges via properties nodes and edges. The graph item collections are enumerables which provide a fail fast enumerator, i.e. an enumerator which breaks upon concurrent modifications.

Iterating over nodes

// iterating over nodes
for (const node of graph.nodes) {
  // do something with the node
}

// ES-5 style
graph.nodes.forEach((node, index) => {
  // do something with the node
})

// more verbose non-functional style:
for (const en = graph.nodes.getEnumerator(); en.moveNext(); ) {
  const node = en.current
  // do something with the node
}

// avoiding concurrent modifications: iterate over copy
graph.nodes.toList().forEach((node) => {
  // removing a node will modify graph.nodes
  graph.remove(node)
})

IGraph dispatches a number of events to report all changes to the graph and its items. More information about the graph events can be found in section Reacting to Graph Changes.

IGraph provides default values for properties which are not explicitly specified at the creation time of a graph item. These are provided in the properties nodeDefaults or edgeDefaults. See section Setting Defaults for new Items.

The default implementation of IGraph is class DefaultGraph. An instance of DefaultGraph can be created using its default constructor. Also, an instance of DefaultGraph is provided by default in the GraphComponent’s graph property.

The Graph Model Nodes