This interface can be used to query structural information, it also offers methods that change the structure of the graph and its attributes. Furthermore, a number of events will be triggered if the structure of the graph changes.
The graph is made up of collections of nodes and edges. Each node and edge can be associated with a number of labels and possibly ports to which edges connect. An edge connects to two ports and may consist of zero or more bends. The graph is treated as a directed graph, i.e. edges have a sourcePort and a targetPort. It is up to the algorithms and the visualization to possibly treat them as undirected.
This interface also provides support for hierarchically organized, i.e. grouped graphs. This means that nodes together with their connecting edges can be put into other nodes. The containing node is referred to as a "group node." To create and edit group nodes interactively use the GraphEditorInputMode as input mode and enable the grouping operations.
The edgesAt and edgesAt methods can be used to query adjacency information from the graph's structure.
Each element in the graph can be associated with a style that is used for the visualization of the element. Styles can be shared between multiple instances.
To associate data with the elements in the graph, code can make use of the tag property that all IModelItems provide. In order to associate more than one data element with the graph items, compound data objects can be used. Alternatively additional dictionaries can be used to associate arbitrary data sets with the items in this graph.
This interface provides a number of events that can be used to get notified for changes in the graph structure. These events are raised whenever the corresponding state change occurs, e.g. also when loading the graph from a file. If you are only interested in changes that are triggered interactively, you should subscribe to the corresponding events on the IInputMode implementations that implement the user interaction. Especially, you may not modify the graph structure in handlers for these event, e.g. try to prevent or undo the change that has raised the event.
Examples
New elements can be created either using defaults or with explicitly provided styles:
Creating graph elements
const graph = graphComponent.graph// set defaults for newly created elements// appearance of nodesgraph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.RECTANGLE, fill: Color.ORANGE,})// placement and appearance of node labelsgraph.nodeDefaults.labels.layoutParameter = InteriorNodeLabelModel.CENTERgraph.nodeDefaults.labels.style = new LabelStyle({ backgroundStroke: Stroke.BLACK, backgroundFill: Color.WHITE,})// create some nodes and edgesconst node1 = graph.createNode()const node2 = graph.createNode( new Rect(100, 0, 60, 40), new GroupNodeStyle(), 'some tag',)const edge1 = graph.createEdge( node1, node2, new PolylineEdgeStyle({ targetArrow: new Arrow(ArrowType.STEALTH) }),)
Existing elements can be changed using methods provided by IGraph:
Changing the graph
let index = 0for (const node of graph.nodes) { if (node.labels.size === 0) { // if the node has no label, yet, add one graph.addLabel(node, `New label for node ${index}`) } else { // otherwise change the first label's text graph.setLabelText( node.labels.get(0), `Change text for node ${index}`, ) } // set another style for the node graph.setStyle( node, new ShapeNodeStyle({ shape: ShapeNodeShape.RECTANGLE, fill: Color.GREEN, }), ) index++}
The graph can be traversed along the edges with the help of a number of methods which provide adjacency information from the graph's structure.
Analyzing the graph structure
for (const node of graph.nodes) { const nodeName = node.labels.get(0).text // no predecessors: the node is a root if (!graph.predecessors(node).some()) { console.log(`Node ${nodeName} is a root.`) } // no successor: the node is a leaf if (!graph.successors(node).some()) { console.log(`Node ${nodeName} is a leaf.`) } // list all nodes which are linked to the current node for (const edge of graph.edgesAt(node)) { const otherNode = edge.opposite(node) as INode console.log( `Node ${nodeName} is linked to ${otherNode.labels.get(0).text}.`, ) }}
// IMPORTANT: graph.nodes will throw exception if it is changed during iteration// therefore we have to iterate over a copy of the node collection// while we remove the nodesconst nodesToRemove = graph.nodes.toList()for (const node of nodesToRemove) { graph.remove(node)}// clear the existing graphgraph.clear()
IGraph also provides support for hierarchically organized, i.e. grouped graphs. This means that nodes together with their connecting edges can be put into other nodes.
Grouping features overview
const graph = graphComponent.graph// set the defaults for a newly created group nodegraph.groupNodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ROUND_RECTANGLE, stroke: Stroke.AQUAMARINE, fill: null,})// create a group nodeconst groupNode = graph.createGroupNode()// add existing nodes as childrengraph.groupNodes(groupNode, [node1, node2, node3])// whether the node is a group nodeconsole.log(graph.isGroupNode(groupNode)) // trueconsole.log(graph.isGroupNode(node1)) // false// get the parent of a nodeconsole.log(graph.getParent(node1)) // groupNodeconsole.log(graph.getParent(groupNode)) // null// get the children of a group nodeconst children = graph.getChildren(groupNode) // node1, node2, node3console.log(children.size) // 3
See Also
The graph model with all relevant types and their relationships is presented in detail in the section The Graph Model.
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterward does not influence existing elements.
abstract
Examples
Setting some defaults for newly created edges
// the defaults for edges can be set on the IEdgeDefaults instance// which can be retrieved from the graph's EdgeDefaults propertygraph.edgeDefaults.style = new PolylineEdgeStyle({ stroke: Stroke.BLACK, targetArrow: new Arrow(ArrowType.STEALTH),})// the defaults for edge labels can be set on the ILabelDefaults instance// found at the Labels property of the edge defaultsgraph.edgeDefaults.labels.layoutParameter = new EdgeSegmentLabelModel().createParameterFromSource(0)graph.edgeDefaults.labels.style = new LabelStyle()
This is a live view of the edges that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the edges via a foreach loop.
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterwards does not influence existing elements.
abstract
Examples
Defaults for newly created group nodes
graph.groupNodeDefaults.style = new GroupNodeStyle()graph.groupNodeDefaults.labels.layoutParameter = InteriorNodeLabelModel.TOP
It is possible to set a new INodeDefaults instance here, as well. That way, it is possible to share the same defaults for group nodes and normal nodes:
Sharing node defaults
// use the same defaults for nodes and group nodesgraph.groupNodeDefaults = graph.nodeDefaultsgraph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE, fill: Color.YELLOW,})
or to share only the label defaults:
Sharing label defaults only
// use the different defaults for nodes and group nodesgraph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE, fill: Color.YELLOW,})graph.groupNodeDefaults.style = new GroupNodeStyle({ tabFill: Color.LIGHT_BLUE,})// but use the same label defaultsgraph.groupNodeDefaults.labels = graph.nodeDefaults.labelsgraph.nodeDefaults.labels.style = new LabelStyle({ backgroundFill: Color.DARK_GRAY,})graph.nodeDefaults.labels.layoutParameter = ExteriorNodeLabelModel.BOTTOM
Gets a view of the labels contained in this graph.
This is a live view of the labels that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though labels can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the labels in your own list, if possible. This is not necessary for the first or last element or when iterating over the labels via a foreach loop.
readonlyabstract
Examples
labels provides a view of all labels in the graph.
for (const label of graph.labels) { // ...}
To retrieve only labels at nodes on can either filter labels or use method nodeLabels. The following examples are equivalent:
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterwards does not influence existing elements.
abstract
Examples
The IGraph implementations provided by yFiles for HTML always provide a pre-configured instance in this property. New defaults can be set by changing its properties.
Setting some defaults for newly created nodes
// the defaults for nodes can be set on the INodeDefaults instance// which can be retrieved from the graph's node defaults propertygraph.nodeDefaults.size = new Size(50, 30)graph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE, fill: Color.YELLOW,})// the defaults for node labels can be set on the ILabelDefaults instance// found at the Labels property of the node defaultsgraph.nodeDefaults.labels.layoutParameter = InteriorNodeLabelModel.CENTERgraph.nodeDefaults.labels.style = new LabelStyle()// the defaults for node ports can be set on the IPortDefaults instance// found at the Ports property of the node defaultsgraph.nodeDefaults.ports.autoCleanUp = falsegraph.nodeDefaults.ports.locationParameter = FreeNodePortLocationModel.CENTER
It is possible to set a new INodeDefaults instance here, as well. That way, it is possible to share the same defaults for group nodes and normal nodes:
Sharing node defaults
// use the same defaults for nodes and group nodesgraph.groupNodeDefaults = graph.nodeDefaultsgraph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE, fill: Color.YELLOW,})
or to share only the label defaults:
Sharing label defaults only
// use the different defaults for nodes and group nodesgraph.nodeDefaults.style = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE, fill: Color.YELLOW,})graph.groupNodeDefaults.style = new GroupNodeStyle({ tabFill: Color.LIGHT_BLUE,})// but use the same label defaultsgraph.groupNodeDefaults.labels = graph.nodeDefaults.labelsgraph.nodeDefaults.labels.style = new LabelStyle({ backgroundFill: Color.DARK_GRAY,})graph.nodeDefaults.labels.layoutParameter = ExteriorNodeLabelModel.BOTTOM
or to keep pre-configured defaults:
Providing different defaults
const darkTheme = new NodeDefaults()darkTheme.labels.style = new LabelStyle({ backgroundFill: 'black', backgroundStroke: 'white', textFill: 'light-gray',})darkTheme.style = new ShapeNodeStyle({ fill: 'black', stroke: 'white' })const classicTheme = new NodeDefaults()classicTheme.labels.style = new LabelStyle({ backgroundFill: 'white', backgroundStroke: 'black', textFill: 'black',})classicTheme.style = new ShapeNodeStyle({ fill: 'orange', stroke: 'white',})graph.nodeDefaults = useDarkTheme ? darkTheme : classicTheme
This is a live view of the nodes that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though nodes can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the nodes in your own list, if possible. This is not necessary for the first or last element or when iterating over the nodes via a foreach loop.
This is a live view of the ports that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though ports can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the ports in your own list, if possible. This is not necessary for the first or last element or when iterating over the ports via a foreach loop.
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.
The coordinates to use for the newly created bend. To change the location after the bend has been added, use setBendLocation.
index?: number
The index for the newly added bend; A negative value (which is the default) indicates that the bend should be appended to the end of the list of bends.
Add a label to the given node or edge using the text as the initial label text and label model parameter, style, and tag.
To add labels to IStripes in ITables, you have to use the ITable's addLabel method instead. Even though stripes are ILabelOwners, they don't actually belong to the graph.
The label model parameter instance to use. If omitted the default parameter will be set. To change the parameter after the label has been added, use setLabelLayoutParameter.
The initial values to use for the preferredSize. If omitted size will be determined automatically. To change the preferred size after the label has been added, use setLabelPreferredSize.
owner is not in this graph or preferredSize contains one or more NaN values.
Examples
// add label with given text, default style, and default placement// and determine the preferred size automaticallyconst 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 automaticallyconst label3 = graph.addLabel({ owner: node, text: 'Some Label', style: new LabelStyle(),})
In most cases it is recommended to let yFiles determine the preferred size automatically:
// add label with given text, placement, style, and tag (user object)// however, determine the size automatically (recommended in most cases)const label4 = graph.addLabel({ owner: node, text: 'Some Label', layoutParameter: InteriorNodeLabelModel.CENTER, style: new LabelStyle(), tag: userObject,})
the parameter to use for the port to determine its location. If omitted, the default parameter will be set. To change the parameter after the port has been added, use setPortLocationParameter.
the style to initially assign to the style property. If omitted, the default style will be set, e.g. VOID_PORT_STYLE. To change the style after the port has been added, use setStyle.
// add a port at x,y with default styleconst 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,)
The port's position is determined by the locationParameter. Method addPortAt places the port at the given (absolute) location.
Adding a port at an (absolute) location
// add a port at x,y with default styleconst 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,)
Method addRelativePort adds the port at the given location relative to the given node's top left corner.
Adding a port at a relative location
// add a port at the center of the node with the given style and tag (user object)const port = graph.addRelativePort( node, new Point(node.layout.width / 2, node.layout.height / 2),)
This will resize the group node bounds such that the node requires the least amount of space. If the node does not have any children, its bounds will be left unchanged. This will also respect any INodeSizeConstraintProviders for INodes that are available in the lookup of the groupNode.
// create a group nodeconst group = graph.createGroupNode()// add some child nodesgraph.createNode(group, new Rect(10, 10, 30, 30))graph.createNode(group, new Rect(50, 10, 30, 30))graph.createNode(group, new Rect(50, 50, 30, 30))// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(group)
AdjustGroupNodeLayout only affects the node it is called for. To properly adjust all of its ancestors, too, one has to adjust all of them from the given node to the root:
for (const nodeToAdjust of graph.groupingSupport.getAncestors( innermostGroup,)) { graph.adjustGroupNodeLayout(nodeToAdjust)}
This implementation uses the style's renderer for the label to determine the preferred rendering size. This is useful after the label's content or style have been changed.
For more control over how to apply a layout use LayoutExecutor.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
This method can be used to bracket several undo units. All edits added to the queue after this call and before a call to cancel or commit will be placed into the queue as a single block.
Client code needs to make sure that either the cancel or commit method is called on the returned instance.
This method uses the IMementoSupport returned by the provider to record the state of an item at the beginning of the edit and when commit is called to create an IUndoUnit that can revert the item to the recorded state and back. If no provider is given, this method uses the IMementoSupport returned by the lookup implementation of the items to record the state of an item at the beginning of the edit and when commit is called to create an IUndoUnit that can revert the item to the recorded state and back.
Calling this method will immediately enqueue an IUndoUnit into the undo queue. Subsequent additions to the queue will be added after the created instance, even if they are added to the queue before the commit method has been called.
Parameters
undoName: string
The undoName of the IUndoUnit that will be placed into the undo queue after commit has been called.
redoName: string
The redoName of the IUndoUnit that will be placed into the undo queue after commit has been called.
An implementation of the ICompoundEdit interface whose commit or cancel methods need to be called after the items have been modified.
Examples
The following is an example implementation of an item that is being managed using IMementoSupport:
A sample business object that implements ILookup to return IMementoSupport
class Employee extends BaseClass<ILookup>(ILookup) implements ILookup { _name: string position: string age: number constructor(name: string, position: string, age: number) { super() this._name = name this.position = position this.age = age } get name(): string { return this._name } // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint lookup<T extends any>(type: Constructor<any>): T | null { if (type === IMementoSupport) { return new EmployeeMementoSupport() as T } return null }}
A collection of items from this type can then be watched using the following code snippet:
Using an ICompoundEdit
const edit = graph.beginEdit( undoName, redoName, listWithMyEmployeesToWatch,)// changes to the employees are done hereif (!success) { // if we don't want the changes to be done after all, then we need to cancel the edit edit.cancel()}
Alternatively, when using a specific provider, consider the following examples. The following is an example implementation of an item that is being managed using IMementoSupport:
A sample business object
class SimpleEmployee { private readonly _name: string position: string age: number constructor(name: string, position: string, age: number) { this._name = name this.position = position this.age = age } get name(): string { return this._name }}
A collection of items from this type can then be watched using the following code snippet, using the provider to return an appropriate IMementoSupport implementation:
Using an ICompoundEdit
const edit = graph.beginEdit( undoName, redoName, listWithMyEmployeesToWatch, (item) => new EmployeeMementoSupport(),)// changes to the employees are done hereif (!success) { // if we don't want the changes to be done after all, then we need to cancel the edit edit.cancel()}
Implementing the IMementoSupport interface is quite unrestrained, the type of the state returned by getState method can by anything as long as the applyState and stateEquals methods can deal with it:
Sample implementation of IMementoSupport
class EmployeeMementoSupport extends BaseClass<IMementoSupport>(IMementoSupport) implements IMementoSupport{ getState(subject: any): EmployeeState | null { if (subject instanceof Employee) { return new EmployeeState(subject.position, subject.age) } return null } applyState(subject: any, state: any): void { if (subject instanceof Employee && state instanceof EmployeeState) { subject.position = state.position subject.age = state.age } } stateEquals(state1: any, state2: any): boolean { if ( state1 instanceof EmployeeState && state2 instanceof EmployeeState ) { return ( state1.position === state2.position && state1.age === state2.age ) } return state1 === state2 }}class EmployeeState { _position: string _age: number constructor(position: string, age: number) { this._position = position this._age = age } get position(): string { return this._position } get age(): number { return this._age }}
In summary, use this concept when you want to track the state of items during certain operations for undo/redo. This is efficient if it's easier to handle an item's state than the changes to the item themselves. If you want to focus on the changes or on certain events, you should use custom IUndoUnit
true if this graph contains the specified item; otherwise, false.
Examples
const node = graph.createNode()// an element which is created in a graph is contained in that graphconsole.log(graph.contains(node)) // true// an element which is created in a graph is not contained in another graphconsole.log(anotherGraph.contains(node)) // falsegraph.remove(node)// an element which is removed is not contained in the graph anymoreconsole.log(graph.contains(node)) // false
The generic type arguments of the created layout data are compatible with instances of IGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
Either a location model parameter that matches the location, or the default parameter to use for the IPortOwner as returned by getLocationParameterInstance.
Creates and returns an edge that connects to the given port instances.
The ports must be part of this graph at the time of the invocation. The edge will be a part of this graph after the method returns. This will trigger the corresponding events.
The style instance that will be assigned to the newly created instance. This is done by reference. If omitted the default style will be set. To change the style after the edge has been created, use setStyle.
tag?: IEdge['tag']
The initial value of the tag that will be assigned to the new edge.
const node1 = graph.createNodeAt(new Point(0, 0))const port1 = graph.addPort(node1)const node2 = graph.createNodeAt(new Point(100, 0))const port2 = graph.addPort(node2)// Create an edge between port1 and port2 with default styleconst edge1 = graph.createEdge(port1, port2)// Create an edge between port1 and port2 with the given style and tagconst edge2 = graph.createEdge( port1, port2, new PolylineEdgeStyle({ targetArrow: new Arrow(ArrowType.STEALTH) }), tag,)
Creates and returns an edge that connects to the given node instances using the given style instance.
The nodes must be part of this graph at the time of the invocation, and an implementation can choose the IPort instances to which the edge will be connected. The edge will be a part of this graph after the method returns. This will trigger the corresponding events.
The source node the created edge will connect to. It is up to the implementation to decide which port to use at the given node. An implementation may create a new port of the edge. To change the source port after the edge has been created, use setEdgePorts.
The target node the created edge will connect to. It is up to the implementation to decide which port to use at the given node. An implementation may create a new port of the edge. To change the target port after the edge has been created, use setEdgePorts.
The style instance that will be assigned to the newly created instance. This is done by reference. If omitted the default style will be set. To change the style after the edge has been created, use setStyle.
tag?: IEdge['tag']
The initial value of the tag that will be assigned to the new edge.
const node1 = graph.createNodeAt(new Point(0, 0))const node2 = graph.createNodeAt(new Point(100, 0))// Create an edge between node1 and node2 with default styleconst edge1 = graph.createEdge(node1, node2)// Create an edge between node1 and node2 with the given style and tagconst edge2 = graph.createEdge( node1, node2, new PolylineEdgeStyle({ targetArrow: new Arrow(ArrowType.STEALTH) }), tag,)
The generic type arguments of the created layout data are compatible with instances of IGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
The node to use as the parent in the grouping hierarchy or null if the new node should become a top-level node. To change the parent after the group node has been created, use setParent.
The initial layout to use for the new node. If omitted the node will be placed with its top left corner at 0,0 and the default size. To change the layout after the group node has been created, use setNodeLayout.
// create a group node top level (without parent) at 0,0 with default size and styleconst node1 = graph.createGroupNode()// create a group node as child of the given parent node at 0,0 with default size and styleconst node2 = graph.createGroupNode(parent)// create a group node as child of the given parent node with the given layout, style, and tag (user object)const node3 = graph.createGroupNode( parent, new Rect(x, y, width, height), new ShapeNodeStyle(), userObject,)// create a group node as child of the given parent node at 0,0 with default size and style and the given tagconst node4 = graph.createGroupNode({ parent, tag: userObject })
The newly created node is a group node from the beginning. As such, it takes its defaults from groupNodeDefaults:
graph.nodeDefaults.style = new ShapeNodeStyle()graph.groupNodeDefaults.style = new GroupNodeStyle()const group = graph.createGroupNode()// the newly created node is a group node from the beginningconsole.log(graph.isGroupNode(group)) // true// the newly created node is created with the GroupNodeDefaultsconsole.log(group.style instanceof GroupNodeStyle) // true
The layout to use initially. The values will be copied to the node's layout field. To change the layout after the node has been created, use setNodeLayout.
The style instance that will be assigned to the newly created instance. This is done by reference. If omitted the default style will be set. To change the style after the node has been added, use setStyle.
tag?: INode['tag']
The initial value of the tag that will be assigned to the new node.
// Create a node with default style and size at 0,0const node1 = graph.createNode()// create a node with the given layout and the default styleconst node2 = graph.createNode(new Rect(x, y, width, height))// create a node with the given layout, style, and tag (user object)const node3 = graph.createNode( new Rect(x, y, width, height), new ShapeNodeStyle(), userObject,)// Create a node with default size at 0,0 with the given styleconst node4 = graph.createNode({ style: new ShapeNodeStyle() })// create a node at the given location with default style and sizeconst node5 = graph.createNodeAt(new Point(x, y))// create a node at the given location with default size and the given style and tagconst node6 = graph.createNodeAt( new Point(x, y), new ShapeNodeStyle(), userObject,)
The node to use as the parent in the grouping hierarchy or null if the new node should become a top-level node. To change the parent after the group node has been created, use setParent.
The layout to use initially. The values will be copied to the node's layout field. If omitted the default size will be set and the node's top left corner will be placed at 0,0. To change the layout after the group node has been created, use setNodeLayout.
parent is not in this graph, or layout contains one or more NaN values.
Examples
Creating nodes in a grouping hierarchy
// create a node top level (without parent) at 0,0 with default size and styleconst node1 = graph.createNode()// create a node as child of the given parent node at 0,0 with default size and styleconst node2 = graph.createNode(parent)// create a node as child of the given parent node with the given layout, style, and tag (user object)const node3 = graph.createNode( parent, new Rect(x, y, width, height), new ShapeNodeStyle(), userObject,)// create a node as child of the given parent node at 0,0 with default size and style and the given tagconst node4 = graph.createNode({ parent, tag: userObject })
Returns an IListEnumerable<T> for the incoming, the outgoing, or all edges adjacent to the given port, depending on type.
If the given type is ALL, adjacent self-loops will appear twice in the returned enumerable. For INCOMING or OUTGOING, self-loops will only appear once.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases, it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the adjacent edges via a foreach loop.
for (const edge of graph.edgesAt(port1)) { console.log(edge) // edge1, edge4, edge5}
Iterating over the outgoing edges at port 1
for (const edge of graph.edgesAt(port1, AdjacencyTypes.OUTGOING)) { console.log(edge) // edge4, edge5}// is the same asfor (const edge of graph.outEdgesAt(port1)) { console.log(edge) // edge4, edge5}
Returns an IListEnumerable<T> for the incoming, the outgoing, or all edges adjacent to the given port owner, depending on type.
If the given type is ALL, adjacent self-loops will appear twice in the returned enumerable. For INCOMING or OUTGOING, self-loops will only appear once.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases, it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the adjacent edges via a foreach loop.
for (const edge of graph.edgesAt(center)) { console.log(edge) // edge1, edge4, edge5, edge2, edge3, edge6}
Note that the result is built by iterating over the edges at each port, in this example these are first the edges at port 1 (1, 4, 5), then the edges at port 2 (2, 3, 6)
Iterating over the outgoing edges at the center node
for (const edge of graph.edgesAt(center, AdjacencyTypes.OUTGOING)) { console.log(edge) // edge4, edge5, edge6}// is the same asfor (const edge of graph.outEdgesAt(center)) { console.log(edge) // edge4, edge5, edge6}
// create a group node which contains three existing nodesconst groupNode = graph.groupNodes([node1, node2, node3])// get the children of a group nodeconst children = graph.getChildren(groupNode) // node1, node2, node3const childCount = children.size // 3
// create a group nodeconst groupNode = graph.createGroupNode()// set groupNode as parent of node1graph.setParent(node1, groupNode)// get the parent of a nodeconst node1Parent = graph.getParent(node1) // groupNodeconst groupParent = graph.getParent(groupNode) // null
Groups the nodes in children into the provided group node.
The parent needs to be a group node at the time of the invocation. This operation is basically the same as calling setParent for each node in children whose parent is not part of the set.How to create add multiple children to a group node
// create some nodesconst children = []for (let i = 0; i < 5; i++) { children.push(graph.createNode())}// create a group nodeconst parent = graph.createGroupNode()// add the nodes as children to the groupgraph.groupNodes(parent, children)// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(parent)
Groups the nodes in children into a newly created group node.
The group node will be created at the common ancestor level of all nodes in children.How to create a new group node with multiple children
// create some nodesconst children = []for (let i = 0; i < 5; i++) { children.push(graph.createNode())}// create a group node and add the given nodes as childrenconst group = graph.groupNodes(children)// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(group)
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the incoming edges via a foreach loop.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the incoming edges via a foreach loop.
This method may be called by client code to invalidate all views of the graph that have registered with the displays-invalidated event. Views that need to be informed if non-structural changes have been made to the graph should register with the corresponding event.
// create a node in the graphconst node1 = graph.createNode()// query whether it is a group nodeconst node1IsGroupNode = graph.isGroupNode(node1) // false// create a group node in the graphconst node2 = graph.createGroupNode()// query whether it is a group nodeconst node2IsGroupNode = graph.isGroupNode(node2) // true// convert node1 into a group nodegraph.setIsGroupNode(node1, true)// convert node2 into a normal, i.e. non-group, nodegraph.setIsGroupNode(node2, false)// group is a group node with a childconst group = graph.groupNodes([node1])// you cannot convert a group node with a child into a non-group nodegraph.setIsGroupNode(group, false) // throws exception!
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
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the outgoing edges via a foreach loop.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the outgoing edges via a foreach loop.
If the item is a node, the node-removed event will be triggered. This will remove all adjacent edges and their corresponding ports in proper order before the node will be removed. Also, this will trigger the removal of all labels owned by this instance.
If the item is an edge, the edge-removed event will be triggered. Also, this will trigger the removal of all labels and bends owned by this instance. An implementation may decide to remove the corresponding ports from the node if no other edge connects to them after the given edge has been removed. The implementations provided by yFiles do so according to the value set to autoCleanUp in their IPortDefaults.
If the item is a bend, the bend-removed event will be triggered.
If the item is a port, the port-removed event will be triggered. This will also remove all edges that are currently connected to the port and all labels and bends owned by this instance.
// IMPORTANT: graph.nodes will throw exception if it is changed during iteration// therefore, we have to iterate over a copy of the node collection// while we remove the nodesconst nodesToRemove = graph.nodes.toList()for (const node of nodesToRemove) { graph.remove(node)}
Sets the source and target ports of the given edge to the new values.
This will trigger an edge-ports-changed event if source or target ports differ from the current ones. Both ports and the edge must belong to the current graph instance.
An implementation may decide to remove the corresponding ports if no other edge connects to them after the given edge has its source or target port changed. The implementations provided by yFiles do so according to the value set to autoCleanUp in their IPortDefaults.
To query the current source and target ports, you can use the sourcePort and targetPort properties.
node is null or currently has children and isGroupNode is false.
Examples
How to set or query a node's group node status
// create a node in the graphconst node1 = graph.createNode()// query whether it is a group nodeconst node1IsGroupNode = graph.isGroupNode(node1) // false// create a group node in the graphconst node2 = graph.createGroupNode()// query whether it is a group nodeconst node2IsGroupNode = graph.isGroupNode(node2) // true// convert node1 into a group nodegraph.setIsGroupNode(node1, true)// convert node2 into a normal, i.e. non-group, nodegraph.setIsGroupNode(node2, false)// group is a group node with a childconst group = graph.groupNodes([node1])// you cannot convert a group node with a child into a non-group nodegraph.setIsGroupNode(group, false) // throws exception!
Use null as parent to make node a top-level node for this graph.
This method does not move or enlarge the parent to enclose its new node. Developers have to take care to adjust the node layout after grouping, e.g. by calling adjustGroupNodeLayout.
If parent is not a group node before the call it will be converted into one.
// create a group nodeconst groupNode = graph.createGroupNode()// set groupNode as parent of node1graph.setParent(node1, groupNode)// get the parent of a nodeconst node1Parent = graph.getParent(node1) // groupNodeconst groupParent = graph.getParent(groupNode) // null
Tries to set the absolute coordinates of the given port to the given values.
For full control over the placement of the ports, the setPortLocationParameter method should be used instead. This implementation will use the port's locationParameter's model to obtain a new IPortLocationModelParameter via the createParameter method. This might result in the port using a different location, because the model might not support parameters that result in the given location. This will also trigger an invalidateDisplays call.
Styles are automatically converted between WebGL and SVG rendering modes. Due to differences in feature sets, conversion may not be exact. For better control, apply styles specific to the rendering mode or use a WebGLNodeStyleDecorator style when switching render modes.
Styles are automatically converted between WebGL and SVG rendering modes. Due to differences in feature sets, conversion may not be exact. For better control, apply styles specific to the rendering mode or use a WebGLLabelStyleDecorator style when switching render modes.
Styles are automatically converted between WebGL and SVG rendering modes. Due to differences in feature sets, conversion may not be exact. For better control, apply styles specific to the rendering mode or use a WebGLEdgeStyleDecorator style when switching render modes.
Occurs when a bend has been added to an edge in this graph.
This event is intended to provide notification of low level changes in the graph structure. Please use the bend-created event if you are interested only in bend creation events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the bend creation that has triggered this event.
Occurs when a bend has been removed from an edge in this graph.
This event will be triggered, too, if an edge has been removed from the graph, for each of the bends that belonged to the edge.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in bend removal events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the bend removal that has triggered this event.
This event is intended to provide notification of low level changes in the graph structure. Please use the edge-created event if you are interested only in edge creation events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the edge creation that has triggered this event.
This event will be triggered, too, prior to a node removal.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in edge removal events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the edge removal that has triggered this event.
Occurs when a label has been added to this graph instance.
This event is intended to provide notification of low level changes in the graph structure. Please use the label-added event if you are interested only in label creation events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the label creation that has triggered this event.
Occurs when a label has been removed from this graph instance.
This event will also be triggered, prior to the removal of the owner of the label.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in label removal events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the label removal that has triggered this event.
This event is intended to provide notification of low level changes in the graph structure. Please use the node-created event if you are interested only in node creation events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the node creation that has triggered this event.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in node removal events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the node removal that has triggered this event.
Occurs when a port has been removed from its owner.
This event will also be triggered prior to the removal of the corresponding owner of the port.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in port removal events that result from user interaction.
You may not modify the graph in the event handler for this event. Especially you may not prevent/undo the port removal that has triggered this event.