Using Data Binding in Node Styles Customizing Arrows

Using Node Styles for Labels and Ports

Although all styles are for a specific type of item, yFiles for HTML offers convenient style adapter classes that allow node styles to be used as label styles and port styles.

The two adapter classes are:

NodeStyleLabelStyleAdapter: Uses a INodeStyle and an ILabelStyle. It delegates to the INodeStyle to render the background of the label and to the ILabelStyle to render the text (or the foreground).
NodeStylePortStyleAdapter: Uses a INodeStyle to render the port visualization.

Nodes are most frequently styled differently because they are very prominent graph items. Therefore, there are often INodeStyles that are more flexible or provide more features than ILabelStyles or IPortStyles. These adapter classes allow you to quickly create custom visualizations for labels or ports by re-using styles that were originally designed for nodes.

The following example shows the usage of those adapter classes to show ports as arched windows, and draw an arrow shape around labels:

Example usage of NodeStyleLabelStyleAdapter and NodeStylePortStyleAdapter

const archedWindowStyle = new RectangleNodeStyle({ corners: 'top' })
const portStyle = new NodeStylePortStyleAdapter(archedWindowStyle)

const arrowStyle = new ArrowNodeStyle({ shaftRatio: 0.7 })
const textStyle = new LabelStyle({ padding: new Insets(5) })
const labelStyle = new NodeStyleLabelStyleAdapter(arrowStyle, textStyle)

custom styles node style adapters — Ports and labels using adapted node styles

Using Data Binding in Node Styles Customizing Arrows