Using Vue.js Templates 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 convenience style adapter classes for node styles to label styles and to port styles.

The two adapter classes are:

NodeStyleLabelStyleAdapter: Uses an INodeStyle as well as an ILabelStyle and delegates to the former to render the background of the label and to the latter to render the text (or the foreground, respectively).
NodeStylePortStyleAdapter: Uses an INodeStyle to render the port visualization.

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

The following example shows the usage of those adapter classes to show ports as stars, and draw a border around labels:

Example usage of NodeStyleLabelStyleAdapter and NodeStylePortStyleAdapter

const portShape = new ShapeNodeStyle()
portShape.shape = ShapeNodeShape.STAR6
const portStyle = new NodeStylePortStyleAdapter(portShape)

const labelStyle = new NodeStyleLabelStyleAdapter(new ShapeNodeStyle(), new DefaultLabelStyle())

Using Vue.js Templates in Node Styles Customizing Arrows