Description

Description

This step shows how to implement a special node style for group nodes. The style provides custom INodeSizeConstraintProvider and INodeInsetsProvider implementations to customize the minimum size as well as the insets that are used to calculate the group node bounds.

The rendering of the tab visual on the group's top side depends on the node width. The tab text is not a label, but is rendered by the node style.

This sample also demonstrates how to customize the collapse and expand buttons by implementing a custom CollapsibleNodeStyleDecoratorRenderer.

Things to Try

  • Move nodes around inside the group node to see how the group automatically adjusts its size while respecting the insets and minimum size.
  • Resize a group to see how the tab visual adjusts to the node size.
  • Take a look at the source code of MyGroupNodeStyle and MyCollapsibleNodeStyleDecoratorRenderer.

Left to Do

  • Include node labels in the group node bounds and find a way to specify insets for a collapse button.
  • Render nodes with HTML5 canvas instead of SVG for improved performance, especially for large graphs.
  • Add bridge support to the edge style.
Legal Disclosure | Privacy Policy | View on GitHub