I

INode

Show Usages
The interface for node entities in an IGraph.
ImplementsInheritance Hierarchy

Remarks

This interface provides read-only access to the properties of a node. In order to modify the state of an instance use the various methods provided by the IGraph this instance belongs to. Nodes and edges are the main entities that make up an IGraph. Nodes have zero or more ports to which zero or more edges can connect. IGraph provides the edgesAt method for querying the edges that connect to nodes. Also it is possible to query the adjacent edges for each port that is owned by nodes. This interface combines the functionality of IPortOwner to get access to the ports, ILabelOwner to get access to the labels, and, like all items in an IGraph, nodes support the lookup method inherited from the IModelItem interface can be used to query additional aspects of each instance.

Examples

Working with a node in the graph
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: Color.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) // 0

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

API

IGraph, IEdge

Members

Show:

Properties

labels

: IListEnumerable<ILabel>
readonlyabstract
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

layout

: IRectangle
readonlyabstract
Gets a rectangle describing the position and size of the node.

The layout of a node is defined as a rectangle in the world coordinate system that describes the bounds 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.

readonlyabstract

Examples

Setting the layout of a node
graph.setNodeLayout(node, new Rect(x, y, width, height))
Obtaining the layout of a node
const layout = node.layout

See Also

Developer's Guide
API
setNodeLayout

Implemented in

SimpleNode.layout

ports

: IListEnumerable<IPort>
readonlyabstract
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

style

: INodeStyle
readonlyabstract
Gets the style that is responsible for the visual representation of this node in a CanvasComponent.

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

readonlyabstract

Examples

Setting the style of a node
graph.setStyle(node, new ShapeNodeStyle())
Obtaining the style of a node
const style = node.style

See Also

Developer's Guide
API
setStyle

Implemented in

SimpleNode.style

tag

: any
abstract
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

Methods

lookup

<T> (type: Constructor<T>): T
abstract
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