The interface for node entities in an IGraph.
Remarks
IGraph, nodes support the lookup method inherited from the IModelItem interface can be used to query additional aspects of each instance.Examples
const graph = graphComponent.graph
// node creation
const node = graph.createNode(
new Rect(0, 0, 60, 40),
new ShapeNodeStyle({
shape: ShapeNodeShape.RECTANGLE,
stroke: Stroke.BLACK,
fill: Fill.ORANGE
})
)
// the newly created node is part of the graph
console.log(graph.contains(node)) // true
console.log(graph.nodes.size) // 1
console.log(graph.nodes.get(0) === node) // true
// changing node properties have to be done via the graph
console.log(node.layout) // (0, 0, 60, 40)
graph.setNodeLayout(node, new Rect(100, 0, 60, 40))
console.log(node.layout) // (100, 0, 60, 40)
// removing the node removes it from the graph
graph.remove(node)
console.log(graph.contains(node)) // false
console.log(graph.nodes.size) // 0Related Reading in the Developer's Guide
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.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.graph.INode
See Also
Properties
Gets a collection of labels that are owned by this instance.
Remarks
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',
InteriorLabelModel.CENTER,
new DefaultLabelStyle(),
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',
layoutParameter: InteriorLabelModel.CENTER,
style: new DefaultLabelStyle()
})for (const label of node.labels) {
// ...
}graph.remove(label)See Also
Defined in
Gets a rectangle describing the position and size of the node.
Remarks
The layout of a node is defined as a rectangle in the world coordinate system that describes the bounding box of the representation of a node.
To change the layout for instances of the default implementation that were created via the factory methods on IGraph, use setNodeLayout
This method will yield a live view. To obtain a snapshot one has to copy the values of the instance, e.g. by calling toRect on it.
Examples
graph.setNodeLayout(node, new Rect(x, y, width, height))const layout = node.layoutSee Also
Gets a collection of ports that are owned by this instance.
Remarks
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 NodeStylePortStyleAdapter()
portStyle.nodeStyle = new ShapeNodeStyle({ shape: ShapeNodeShape.ELLIPSE })
portStyle.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.NODE_CENTER_ANCHORED
)
// add a port at the center of the node with the given style and tag (user object)
const port4 = graph.addPort(
node,
FreeNodePortLocationModel.NODE_CENTER_ANCHORED,
portStyle,
userObject
)for (const port of node.ports) {
// ...
}graph.remove(port)See Also
Defined in
Gets the style that is responsible for the visual representation of this node in a CanvasComponent.
Remarks
Note that the style instance associated with a node instance may be shared between multiple node instances and that the modification of this style will result in a change of the appearance of all nodes 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(node, new ShapeNodeStyle())const style = node.styleSee Also
Gets or sets the tag associated with this instance.
Remarks
Examples
owner.tag = newTagconst tag = owner.tagSee Also
Implements
Methods
Returns an instance that implements the given type or null.
Remarks
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 reobtained for subsequent use.Type Parameters
- T: any
Parameters
A map of options to pass to the method.
- type - Class<T>
- The type for which an instance shall be returned.
Returns
- ↪T
- an instance that is assignable to type or
null
See Also
$class property on JavaScript classes inheriting from yFiles classes is only valid once an instance of this subclass was created. Call fixType, first or instantiate the class at least once.