Edges

An edge is a graph element that represents a connection between two entities. It is modeled by the interface IEdge. An edge always has a source port and a target port which link the edge to their owners, the source and target node or edge. Furthermore, the source and target port’s locations provide the geometric information for the edge’s start and end point.

The IEdge interface provides a number of read-only properties which define the edge’s characteristics. You can set their values using IGraph’s methods.

Don’t confuse the edge’s sourcePort and targetPort with the edge’s ports collection: the source and target port connect the edge with the nodes or edges which are the owners of these ports. For the edge’s ports on the other hand the edge itself is the owner. These ports can be connection points (i.e. source and target ports) for other edges.

You don’t have to explicitly create or remove ports. For use cases which don’t require explicit port objects yFiles for HTML can automatically create and remove ports as required: Creating an edge using createEdge(INode, INode, IEdgeStyle, Object) will implicitly create ports at the source and target nodes. Enabling the auto-cleanup feature for ports will automatically remove a port if the last edge connecting to it has been removed.

You can create or remove edges using IGraph’s methods. Furthermore, you can re-connect an existing edge to new source and target ports:

createEdge(sourcePort: IPort, targetPort: IPort, style: IEdgeStyle, tag: Object): IEdge

Creates a new edge between two ports. The new edge’s properties will get the default values as defined in the edge defaults if they are not passed as parameters.

createEdge(source: INode, target: INode, style: IEdgeStyle, tag: Object): IEdge

Creates a new edge between two nodes. Since an edge always connects to ports this method will add a new port to each of the source and target node, first, then create the new edge between the new ports.

remove(item: IModelItem): void

Removes the given edge from the graph. Before the edge is removed all dependent items (the edge’s labels and ports, also the adjacent edges) are removed.

setEdgePorts(edge: IEdge, sourcePort: IPort, targetPort: IPort): void

Re-connects an edge to new source and target ports.

Bends

An edge does not necessarily have to be a straight line between its source and target port. It can have an arbitrary number of bends. Bends are points that subdivide edges into segments. An edge’s path is the sum of all of its segments. A bend is defined by the interface IBend. Although IBend also extends IModelItem like the other graph items, a bend is more limited. It can only exist as part of an edge, and it has no own style. Like the other model items, though, you can only add, remove, or modify bends using IGraph’s methods:

addBend(edge: IEdge, location: Point, index: number): IBend

Adds a new bend to an edge at the given location.

remove(item: IModelItem): void

Removes a bend from the edge.

setBendLocation(bend: IBend, location: Point): void

Moves the given bend to the new location.

You can only modify or remove edges or bends which are part of the current graph instance. Trying to modify or remove an edge or bend which already has been removed will result in an exception. Also, if your use case involves several IGraph instances (especially if you are using filtering or folding) take care to modify and remove edges or bends only with the graph they belong to.

Self-loops

An edge where the source and the target port owner are the same, is called a loop, or self-loop.

Self-loops may have bends, just like other edges (as seen in the image above). However, if they don’t have any, the edge style creates a default path for them, because they would otherwise start and end within the node, and thus have no visible path at all.

You can check whether an edge is a self-loop with the isSelfloop default method.

A self-loop is counted twice for the degree of a node. It is counted once for bothin-degree and out-degree of a node.

Edge to Edge Connections

An IEdge is also an IPortOwner. Since an edge’s source or target port can be an arbitrary port (contained in the same graph as the edge, of course) it does not necessarily have to be owned by a node. Thus, it is possible to let an edge start and/or end at other edges. There are some limitations, however:

• The automatic layout algorithms don’t support edge-to-edge connections.
• Edge-to-edge connections are not supported if folding is enabled.
• A graph which consists only of edges is not possible. All edges must at least indirectly connect to a node.