IPort

Show usages

The interface used in an IGraph implementation for IEdges to connect to.

Inheritance Hierarchy

IPort

SimplePort

Implemented Interfaces

Remarks

This interface provides read-only access to the properties of a port. In order to modify the state of an instance use the various methods provided by the IGraph this instance belongs to. Ports are owned by IPortOwners, normally an INode, but this can also be an IEdge in special graph implementations. To obtain the IEdge instances that are connected to a certain port instance, applications need to use the edgesAt method provided by IGraph. Zero or more edges may be connected to a port, depending on the implementation of the graph. A port is also an ILabelOwner, hence it may own labels. Like all items in an IGraph, this item supports the lookup method that can be used to query additional aspects of the item.

Examples

Working with a port in the graph

const graph = graphComponent.graph
const node = graph.createNodeAt(new Point(0, 0))

// add a port to the node: at the center with default style (invisible)
const port = graph.addPort(
  node,
  FreeNodePortLocationModel.NODE_CENTER_ANCHORED
)

// the newly created port is part of the graph
console.log(graph.contains(port)) // true
console.log(graph.ports.size) // 1

// the port belongs to its owner
console.log(port.owner === node) // true
console.log(node.ports.size) // 1
console.log(node.ports.get(0) === port) // true

// removing the port removes it from the graph
graph.remove(port)
console.log(graph.contains(port)) // false
console.log(graph.ports.size) // 0
// and from its owner
console.log(port.owner === null) // true
console.log(node.ports.size) // 0

Ports cannot live without an owner in the graph

console.log(graph.contains(port)) // true
graph.remove(port.owner)
console.log(graph.contains(port)) // falseconsole.log(graph.contains(port)) // true
graph.remove(port.owner!)
console.log(graph.contains(port)) // false

Unused ports may be removed automatically

const node1 = graph.createNode()
const node2 = graph.createNode()
const port1_1 = graph.addPort(node1)
const port1_2 = graph.addPort(node1)
const port2 = graph.addPort(node2)
const edge1 = graph.createEdge(port1_1, port2)
const edge2 = graph.createEdge(port1_2, port2)

// enable auto cleanup
graph.nodeDefaults.ports.autoCleanUp = true
graph.remove(edge1)
// port1_1 is removed with the edge
console.log(graph.contains(port1_1)) // false
// port2 is not removed since edge2 still is linked to it
console.log(graph.contains(port2))
// disable auto cleanup
graph.nodeDefaults.ports.autoCleanUp = false
graph.remove(edge2)
// no port is removed with the edge now
console.log(graph.contains(port1_2)) // true
console.log(graph.contains(port2)) // true

Type Details

yfiles module: view-component
yfiles-umd modules: All view modules
Legacy UMD name: yfiles.graph.IPort

Properties

dynamicLocation

: IPoint

Gets a live view of the location of the port in world coordinates.

Remarks

The location is the anchor for the edges, that connect to this port, however it is up to the visualization logic where exactly the visual part of an edge will end. As this will yield a live view, it is up to the client to copy the values if a snapshot of the state is needed. In order to modify the location of a port, use the setPortLocationParameter in IGraph.

labels

: IListEnumerable<ILabel>

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

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',
  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()
})

Iterating over all labels of a node.

for (const label of node.labels) {
  // ...
}

Removing a label from a node.

graph.remove(label)

Defined in

ILabelOwner

location

: Point

Gets a snapshot of the current location of the port.

Remarks

Unlike dynamicLocation this does not return a dynamic point that always refers to the current location.

locationParameter

: IPortLocationModelParameter

Gets the IPortLocationModelParameter that is used to determine the location of this port.

Remarks

The port location can be calculated using the model's getLocation method or the methods location and dynamicLocation.

To change the port location parameter for instances of the default implementation that were created via the factory methods on IGraph, use setPortLocationParameter

Note that parameters may be shared across port instances.

Examples

Setting the location parameter to a port

graph.setPortLocationParameter(
  port,
  FreeNodePortLocationModel.NODE_CENTER_ANCHORED
)

Obtaining the location parameter from a port

const parameter = port.locationParameter

Setting the location of a port

graph.setPortLocation(port, new Point(x, y))

Obtaining the location of a port

const location = port.location

owner

: IPortOwner

Gets the owner of this port.

Remarks

In traditional IGraph implementations, this will be an INode and can safely be cast to one. In order to get to the IEdges that connect to this instance, use IGraph's edgesAt method.

Note that for instances of the default implementation that were created via the factory methods on IGraph, the owner can't be changed after creation and the port has to be deleted and recreated with a new owner.

Examples

Relationship between port and port owner

// add a port to the owner
const port = graph.addPort(owner)

// the port's Owner property is set to the owner
console.log(port.owner === owner) // true
// the port is in its owner's Ports collection
console.log(owner.ports.includes(port)) // true

style

: IPortStyle

Gets the style that is responsible for the visual representation of this port in a CanvasComponent.

Remarks

Note that the style instance associated with a port instance may be shared between multiple port instances and that the modification of this style will result in a change of the appearance of all ports 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

Setting the style of a port

graph.setStyle(port, portStyle)

Obtaining the style of a port

const style = port.style

tag

: any

Gets or sets the tag associated with this instance.

Remarks

The tag is an optional user-defined object which can be used to store arbitrary data related to this item. The item itself does not normally depend on the tag associated with it. It serves as storage for the object only.

Examples

Setting a model item's tag

owner.tag = newTag

Getting the tag from a model item

const tag = owner.tag

Implements

ITagOwner

Methods

lookup

<Textends any>(type: Class<T>) : T

Returns an instance that implements the given type or null.

Remarks

Typically, this method will be called in order 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 reobtained for subsequent use.

Type Parameters

T: any

Parameters

options - Object
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

Implements

ILookup

IPort

Remarks

Examples

Related Reading in the Developer's Guide

Type Details

See Also

Properties

dynamicLocation

Remarks

See Also

labels

Remarks

Examples

See Also

Defined in

location

Remarks

See Also

locationParameter

Remarks

Examples

See Also

owner

Remarks

Examples

See Also

style

Remarks

Examples

See Also

tag

Remarks

Examples

See Also

Implements

Methods

lookup

Remarks

Type Parameters

Parameters

Returns

See Also

Implements