Port Styles
Similar to the other graph items, the way ports are rendered is determined by their style.
Note that ports are points, i.e. they have a location but no size. The visual size of a port therefore is determined entirely by the style implementation.
Using a node style as port visualization
yFiles for HTML provides a large number of styles for rendering nodes. The NodeStylePortStyleAdapter allows for using these to visualize ports. The exact size and location can be set using renderSize and offset.
graph.addPort(
node1,
new FreeNodePortLocationModel().createParameter(node1, new Point(0.5, 0.0)),
new NodeStylePortStyleAdapter({
offset: { x: 0, y: -5 },
renderSize: { width: 10, height: 10 },
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'triangle'
})
})
)
graph.addPort(
node2,
new FreeNodePortLocationModel().createParameter(node1, new Point(0.5, 1.0)),
new NodeStylePortStyleAdapter({
offset: { x: 0, y: -5 },
renderSize: { width: 10, height: 10 },
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'triangle2'
})
})
)
graph.setStyle(
edge.sourcePort,
new NodeStylePortStyleAdapter({
renderSize: new Size(10, 10),
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'diamond'
})
})
)
graph.setStyle(
edge.targetPort,
new NodeStylePortStyleAdapter({
renderSize: new Size(10, 10),
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'diamond'
})
})
)
graph.addPort(
node1,
new FreeNodePortLocationModel().createParameter(node1, new Point(0.5, 0.0)),
new NodeStylePortStyleAdapter({
offset: { x: 0, y: -5 },
renderSize: { width: 10, height: 10 },
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'triangle'
})
})
)
graph.addPort(
node2,
new FreeNodePortLocationModel().createParameter(node1, new Point(0.5, 1.0)),
new NodeStylePortStyleAdapter({
offset: { x: 0, y: -5 },
renderSize: { width: 10, height: 10 },
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'triangle2'
})
})
)
graph.setStyle(
edge.sourcePort!,
new NodeStylePortStyleAdapter({
renderSize: new Size(10, 10),
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'diamond'
})
})
)
graph.setStyle(
edge.targetPort!,
new NodeStylePortStyleAdapter({
renderSize: new Size(10, 10),
nodeStyle: new ShapeNodeStyle({
fill: 'lightgray',
shape: 'diamond'
})
})
)
Templates
The TemplatePortStyle allows for using an SVG snippet as a template for the visual representation of ports. Using this style is discussed in detail in the customizing styles section.
Custom Styles
yFiles for HTML offers an abstract style implementation, the PortStyleBase<TVisual>. Creating custom styles using this class as base class is discussed in detail in section Customizing Styles.
Invisible Ports
The VoidPortStyle can be used to render a port invisible, while the port is still in the graph. Additionally, the port is not visible to any interactions like mouse clicks.
VoidPortStyle.INSTANCE provides a singleton of the VoidPortStyle.
graph.setStyle(invisiblePort, VoidPortStyle.INSTANCE)
In yFiles for HTML this is the default style for ports.