Custom Styles Tutorial

Style Decorator

This step shows how to enhance an existing node style by adding visual decorators. In this case the decorating node style adds the "label edges" that were formerly part of MySimpleNodeStyle to the wrapped style's visualization.

For the purpose of this tutorial step, the "label edges" rendering code has been removed from MySimpleNodeStyle.

Other graph item styles can be wrapped in the same fashion by subclassing EdgeStyleBase, LabelStyleBase and PortStyleBase.

Things to Try

  • Take a look at the source code of MyNodeStyleDecorator class.
  • Uncomment the line in SammpleApplication.initializeGraph() that creates an instance of ShinyPlateNodeStyle instead of MySimpleNodeStyle and observe the outcome.

Left to Do

  • Create a custom group node style.
  • Render nodes with HTML5 canvas instead of SVG for improved performance, especially for large graphs.
  • Add bridge support to the edge style.