- I
- I
- I
- I
- I
Remarks
IGraph, edges support the lookup method inherited from the IModelItem interface that can be used to query additional aspects of each instance.Examples
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) // 0console.log(graph.contains(edge)) // true
graph.remove(edge.sourcePort.owner)
console.log(graph.contains(edge)) // falseSee 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
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.
Examples
const bend = graph.addBend(edge, new Point(x, y))const anotherBend = graph.addBend(edge, new Point(x, y), 1)graph.addBends(edge, [
new Point(10, 10),
new Point(20, 20),
new Point(30, 30),
])for (const bend of edge.bends) {
// ...
}graph.remove(bend)graph.clearBends(edge)
console.log(edge.bends.size) // 0// 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)) // trueSee Also
Implemented in
SimpleEdge.bendsDetermines whether an edge is a self-loop, that is, it starts and ends at the same port owner.
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.
Examples
// 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(),
})for (const label of node.labels) {
// ...
}graph.remove(label)See Also
Defined in
ILabelOwner.labelsGets 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.
Examples
// 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,
)for (const port of node.ports) {
// ...
}graph.remove(port)See Also
Defined in
IPortOwner.portsGets the source node for the given edge or null.
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
Throws
- Exception ({ name: 'InvalidOperationError' })
- if the edge has no source port.
Examples
const sourcePort = edge.sourcePortconst sourceNode = edge.sourceNode
// is the same as
const sameSourceNode = edge.sourcePort.ownergraph.setEdgePorts(edge, newSourcePort, newTargetPort)See Also
Developer's Guide
API
- sourceNode, setEdgePorts
Implemented in
SimpleEdge.sourcePortGets 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
Examples
graph.setStyle(edge, new PolylineEdgeStyle())const style = edge.styleSee Also
Developer's Guide
API
- setStyle
Implemented in
SimpleEdge.styleProperty Value
Examples
owner.tag = newTagconst tag = owner.tagSee Also
- Tags are presented in detail in the section The Graph Model.
Developer's Guide
Implements
ITagOwner.tagDefined in
ITagOwner.tagGets the target node for the given edge or null.
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
Throws
- Exception ({ name: 'InvalidOperationError' })
- if the edge has no target port.
Examples
const targetPort = edge.targetPortconst targetNode = edge.targetNode
// is the same as
const sameTargetNode = edge.targetPort.ownergraph.setEdgePorts(edge, newSourcePort, newTargetPort)See Also
Developer's Guide
API
- targetNode, setEdgePorts
Implemented in
SimpleEdge.targetPortMethods
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.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.lookupDefined in
ILookup.lookupGets 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
owneris neither the source nor target of the edge.
See Also
API
- sourcePort, targetPort
Parameters
Return Value
- IPort
- The opposite port.
Throws
- Exception ({ name: 'ArgumentError' })
- If
portis 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.
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.