Advanced Node Style Features

Implement viewport culling, custom bounds, and group node styles.

Quick Start

export class AdvancedNodeStyle extends NodeStyleBase {
  protected isVisible(
    context: ICanvasContext,
    rectangle: Rect,
    node: INode
  ): boolean {
    // Only render if node intersects viewport
    return node.layout.toRect().intersects(rectangle)
  }

  protected getBounds(context: ICanvasContext, node: INode): Rect {
    // Return actual rendering bounds (including badges, etc.)
    return node.layout.toRect().getEnlarged(10)
  }
}

Before Implementing

Always query yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="NodeStyleBase")
yfiles:yfiles_list_members(name="NodeStyleBase")
yfiles:yfiles_search_documentation(query="group node style")
yfiles:yfiles_get_symbol_details(name="INode")

Core Concepts

• •isVisible(): Viewport culling for performance
• •getBounds(): Actual rendering bounds
• •Group nodes: Hierarchical container nodes
• •Folding: Collapsible groups

When to Implement

• •isVisible(): Custom shapes extending beyond layout
• •getBounds(): Rendering beyond layout bounds (badges, shadows)
• •Group styles: Hierarchical graph visualization

Note: When implementing yFiles interfaces, always use BaseClass() wrapper instead of TypeScript implements. The @yfiles/eslint-plugin rule @yfiles/fix-implements-using-baseclass enforces this pattern.

Code Examples

See examples.md for:

• •Viewport culling optimization
• •Custom bounds with badges
• •Group node styles
• •Folder tab rendering

Reference

See reference.md for:

• •isVisible() optimization strategies
• •getBounds() calculation patterns
• •Group node API
• •Performance considerations

Related Skills

• •/yfiles-nodestyle-basic - Start here
• •/yfiles-nodestyle-configure - Configuration
• •/yfiles-nodestyle-interaction - Hit testing

MCP Tools

• •yfiles:yfiles_get_symbol_details(name="INode") - Node API
• •yfiles:yfiles_search_by_description(query="group node") - Group nodes
• •yfiles:yfiles_search_documentation(query="folding") - Collapsible groups