Custom Styles Tutorial

Custom Group Bounds

This step shows how to customize the way that the group insets are calculated by implementing an ILayoutGroupBoundsCalculator. This implementation takes the labels of the child nodes into account and also considers the insets as specified by the INodeInsetsProvider of the group node.

Please note that ILayoutGroupBoundsCalculator replaces INodeInsetsProvider. If the INodeInsetsProvider should also be respected, this has to be done explicitly by the ILayoutGroupBoundsCalculator like demonstrated in this sample.

If a label is moved to another position of a node, the group bounds are not adjusted automatically. This sample contains code that adjusts the group size when a label is moved.

This sample also shows how to draw the group differently in the collapsed state and how to customize the position of the collapse and expand buttons using an ILabelModelParameter.

Things to Try

  • Move the node with the label and see how the group size is adjusted.
  • Move the node label to another position on the node. Select it using "Shift-Click" and drag it with the mouse.
  • Take a look at MyGroupNodeStyle.lookup().
  • Take a look at SampleApplication.createEditorMode().

Left to Do

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