The interface used to model edges in an IGraph implementation.
ImplementsInheritance Hierarchy

Remarks

This interface provides read-only access to the properties of an edge. In order to modify the state of an instance use the various methods provided by the IGraph this instance belongs to. An edge connects to two ports and may consist of a number of bends. Also it can have zero or more labels. This interface combines the functionality of IPortOwner to get access to the ports that edges can optionally have, ILabelOwner to get access to the labels, and, like all items in an IGraph, edges support the lookup method inherited from the IModelItem interface that can be used to query additional aspects of each instance.

Examples

Working with an edge in the graph
const graph = graphComponent.graph
const node1 = graph.createNodeAt(new Point(0, 0))
const node2 = graph.createNodeAt(new Point(100, 0))

// create an edge between the nodes
const edge = graph.createEdge(
  node1,
  node2,
  new PolylineEdgeStyle({ targetArrow: new Arrow(ArrowType.STEALTH) }),
)

// the newly created edge is part of the graph
console.log(graph.contains(edge)) // true
console.log(graph.edges.size) // 1
console.log(graph.edges.get(0) === edge) // true

// the edge is linked via source and target port
// with its source and target nodes
console.log(edge.sourcePort.owner === node1) // true
console.log(edge.targetPort.owner === node2) // true

// removing the edge removes it from the graph
graph.remove(edge)
console.log(graph.contains(edge)) // false
console.log(graph.edges.size) // 0
Edges cannot live without source or target in graph
console.log(graph.contains(edge)) // true
graph.remove(edge.sourcePort.owner)
console.log(graph.contains(edge)) // false

See Also

The graph model with all relevant types and their relationships is presented in detail in the section The Graph Model.

Using the look-up mechanism is explained in the section Service Locator Pattern: Lookup.

Developer's Guide

Members

Show:

Properties

Gets a collection of bends that describe the geometry of this edge.

This gives access to a read-only live view of the bends, i.e. the collection can change over time, as well as the bends contained in it. If a snapshot of the current state is needed, one needs to copy the collection.

To modify the bend collection for instances of the default implementation that were created via the factory methods on IGraph, use addBend and remove.

readonlyabstract

Examples

Adding a bend to an edge.
const bend = graph.addBend(edge, new Point(x, y))
Inserting a bend at position 1.
const anotherBend = graph.addBend(edge, new Point(x, y), 1)
Adding multiple bends at once
graph.addBends(edge, [
  new Point(10, 10),
  new Point(20, 20),
  new Point(30, 30),
])
Iterating over all bends of an edge.
for (const bend of edge.bends) {
  // ...
}
Removing a bend.
graph.remove(bend)
Removing all bends from an edge.
graph.clearBends(edge)
console.log(edge.bends.size) // 0
Relationship between a bend and its edge
// add a bend to the owner
const bend = graph.addBend(edge, new Point(x, y))

// the bend's Owner property is set to the owner
console.log(bend.owner === edge) // true
// the bend is in its owner's Bends collection
console.log(edge.bends.includes(bend)) // true

See Also

Developer's Guide
API
addBend, remove

Implemented in

SimpleEdge.bends
Determines whether an edge is a self-loop, that is, it starts and ends at the same port owner.
readonly

See Also

Developer's Guide
API
sourceNode, targetNode
Gets a collection of labels that are owned by this instance.

This gives access to a read-only live view of the labels, i.e. the collection can change over time, as well as the labels contained in it. If a snapshot of the current state is needed, one needs to copy the collection and its contents.

To modify the label collection for instances of the default implementations that were created via the factory methods on IGraph, use addLabel and remove.

readonlyabstract

Examples

Adding labels to a node.
// add label with given text, default style, and default placement
// and determine the preferred size automatically

const label1 = graph.addLabel(node, 'Some Label')

// add label with given text, placement, style, size, and tag (user object)
const label2 = graph.addLabel(
  node,
  'Some Label',
  InteriorNodeLabelModel.CENTER,
  new LabelStyle(),
  new Size(10, 150),
  userObject,
)

// add label with given text and style but default placement
// and determine the preferred size automatically
const label3 = graph.addLabel({
  owner: node,
  text: 'Some Label',
  style: new LabelStyle(),
})
Iterating over all labels of a node.
for (const label of node.labels) {
  // ...
}
Removing a label from a node.
graph.remove(label)

See Also

Developer's Guide
API
addLabel, remove, owner
Gets a collection of ports that are owned by this instance.

This gives access to a read-only live view of the ports, i.e. the collection can change over time, as well as the ports contained in it. If a snapshot of the current state is needed, one needs to copy the collection.

To modify the port collection for instances of the default implementations that were created via the factory methods on IGraph, use addPort and remove.

readonlyabstract

Examples

Adding a port to a node.
// add a port at x,y with default style
const port1 = graph.addPortAt(node, new Point(x, y))

const portStyle = new ShapePortStyle({
  shape: ShapeNodeShape.ELLIPSE,
  renderSize: new Size(3, 3),
})

// add a port at x,y with the given style and tag (user object)
const port2 = graph.addPortAt(
  node,
  new Point(x, y),
  portStyle,
  userObject,
)

// add a port at the center of the node with default style
const port3 = graph.addPort(node, FreeNodePortLocationModel.CENTER)

// add a port at the center of the node with the given style and tag (user object)
const port4 = graph.addPort(
  node,
  FreeNodePortLocationModel.CENTER,
  portStyle,
  userObject,
)
Iterating over all ports of a node.
for (const port of node.ports) {
  // ...
}
Removing a port from a node.
graph.remove(port)

See Also

Developer's Guide
API
owner, addPort, remove
Gets the source node for the given edge or null.
Gets the source port instance this edge is connected to.

Although the notion of source and target port is used for directed edges, it is still up to the client to decide whether the edge should be treated as such.

To change the ports for instances of the default implementation that were created via the factory methods on IGraph, use setEdgePorts

Edges which are not in a graph might have no source port. Attempting to read this property for those edges results in an exception.
readonlyabstract

Throws

Exception ({ name: 'InvalidOperationError' })
if the edge has no source port.

Examples

Getting the source port of an edge
const sourcePort = edge.sourcePort
Getting the source node of an edge
const sourceNode = edge.sourceNode
// is the same as
const sameSourceNode = edge.sourcePort.owner
Setting source and target port of an edge
graph.setEdgePorts(edge, newSourcePort, newTargetPort)

See Also

Developer's Guide
API
sourceNode, setEdgePorts

Implemented in

SimpleEdge.sourcePort
Gets the style that is responsible for the visual representation of this edge in a CanvasComponent.

Note that the style instance associated with an edge instance may be shared between multiple edge instances and that the modification of this style will result in a change of the appearance of all edges that are associated with the same style instance.

To change the style for instances of the default implementation that were created via the factory methods on IGraph, use setStyle

readonlyabstract

Examples

Setting the style of an edge
graph.setStyle(edge, new PolylineEdgeStyle())
Obtaining the style of an edge
const style = edge.style

See Also

Developer's Guide
API
setStyle

Implemented in

SimpleEdge.style
Gets or sets the tag object associated with this item instance.
The tag is an optional user-defined object which can be used to store arbitrary data related to this item. The item itself just provides the storage for the object.
abstract

Property Value

The user object associated with this item instance.

Examples

Setting a model item's tag
owner.tag = newTag
Getting the tag from a model item
const tag = owner.tag

See Also

Tags are presented in detail in the section The Graph Model.
Developer's Guide

Implements

ITagOwner.tag

Defined in

ITagOwner.tag
Gets the target node for the given edge or null.
Gets the target port instance this edge is connected to.

Although the notion of source and target port is used for directed edges, it is still up to the client to decide whether the edge should be treated as such.

To change the ports for instances of the default implementation that were created via the factory methods on IGraph, use setEdgePorts

Edges which are not in a graph might have no target port. Attempting to read this property for those edges results in an exception.
readonlyabstract

Throws

Exception ({ name: 'InvalidOperationError' })
if the edge has no target port.

Examples

Getting the target port of an edge
const targetPort = edge.targetPort
Getting the target node of an edge
const targetNode = edge.targetNode
// is the same as
const sameTargetNode = edge.targetPort.owner
Setting source and target port of an edge
graph.setEdgePorts(edge, newSourcePort, newTargetPort)

See Also

Developer's Guide
API
targetNode, setEdgePorts

Implemented in

SimpleEdge.targetPort

Methods

Returns an instance that implements the given type or null.
Typically, this method will be called to obtain a different view or aspect of the current instance. This is quite similar to casting or using a super type or interface of this instance, but is not limited to inheritance or compile-time constraints. An instance implementing this method is not required to return non-null implementations for the types, nor does it have to return the same instance any time. Also, it depends on the type and context whether the instance returned stays up to date or needs to be re-obtained for further use.
abstract

Parameters

type: Constructor<T>
the type for which an instance shall be returned

Return Value

T
an instance that is assignable to the type or null

See Also

Developer's Guide

Implements

ILookup.lookup

Defined in

ILookup.lookup
Gets the opposite port owner of an IEdge.

Parameters

owner: IPortOwner
The owner of the port that the IEdge is connected to.

Return Value

IPortOwner
The owner of the opposite port.

Throws

Exception ({ name: 'ArgumentError' })
If owner is neither the source nor target of the edge.

See Also

API
sourcePort, targetPort
Gets the opposite port of an IEdge.

Parameters

port: IPort
The port that the IEdge is connected to.

Return Value

IPort
The opposite port.

Throws

Exception ({ name: 'ArgumentError' })
If port is neither the source nor target of the edge.

See Also

API
sourcePort, targetPort

Static Methods

Gets a snapshot of the points describing the path of an edge.
The path points of an edge are the location of the source port, followed by the locations of the bends, followed by the location of the target port.
static

Parameters

edge: IEdge
The edge whose path points are returned.

Return Value

IListEnumerable<IPoint>
A list of points which describe the current path of the given edge.