Custom Styles Tutorial

UpdateVisual and RenderDataCache

This step shows how to implement high-performance rendering of nodes.

To achieve this, you need to implement NodeStyleBase#updateVisual which is called when the container decides to update the visual representation of a node. In contrast to NodeStyleBase#createVisual, we try to re-use the old visual instead of creating a new one.

Method createRenderDataCache() saves the relevant data for creating a visual. NodeStyleBase#updateVisual checks whether this data has changed. If it hasn't changed, the old visual can be returned, otherwise the whole or part of the visual has to be re-rendered.

With the "High Performance" button, you can switch between the custom implementation of updateVisual() and the base implementation which simply calls NodeStyleBase#createVisual.

Things to Try

Click "Animate Nodes" to see the performance of NodeStyleBase#createVisual.
Turn on "High Performance" and click "Start Animation" to see the benefit of implementing NodeStyleBase#updateVisual.
Take a look at the methods updateVisual() and createRenderDataCache() of class MySimpleNodeStyle.

Left to Do

Implement NodeStyleBase#isInside and NodeStyleBase#getOutline, so that the edges end at the node instead of the node's bounding box.
Implement NodeStyleBase#isHit, so that a node won't get selected when clicking on its bounding box but, not on the node itself.
Implement NodeStyleBase#getBounds, so that the drop shadow will be included in the bounds of the node.
Find a way to draw a well-performing drop shadow.
Draw edges from nodes to their labels.
Create a custom label style.
Create a custom edge style.
Create a custom port style for nodes.
Create a custom group node style.