Custom Node Style - Custom Styles Tutorial [yFiles for HTML]

This step shows how to create a custom node style.

Things to Try

Resize a node and make it bigger.
Move it around to feel the rendering performance of this initial implementation.
Zoom in using the mouse wheel and move it around again.
While moving the node observe how the edges are cropped at the node's bounding box and how the bounding box doesn't include the drop shadow.

Use node's ITagOwner#tag as background color.
Implement high-performance rendering of nodes.
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.