What is isVisible() used for?

Skips rendering when the node is outside the viewport to improve performance and visuals when content extends beyond its layout.

When should I override getBounds()?

When badges, decorators, or shadows extend beyond node.layout, so the actual rendered box is reported correctly.

Why use BaseClass instead of implements?

Following the yFiles ESLint plugin pattern ensures correct wiring and compatibility with yFiles APIs.

Yfiles Nodestyle Advanced

Scanned

npx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-nodestyle-advanced --openclaw

Files (1)

SKILL.md

2.7 KB

Advanced Node Style Features

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

Before Implementing

Always query the 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")

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, shadows, etc.)
    return node.layout.toRect().getEnlarged(10)
  }
}

Core Concepts

isVisible(): Skips rendering when the node is outside the viewport — implement when the node renders outside its layout bounds (e.g. shadows, glows)
getBounds(): Returns the actual rendered bounding box — implement when visual elements extend beyond node.layout (badges, decorators)
Group node styles: Style class for container/parent nodes in hierarchical graphs
Folding: Collapsible group nodes

When to Implement Each Method

isVisible(): Node renders content beyond its layout rectangle
getBounds(): Badges, drop shadows, or other decorators extend outside the layout rect
Group styles: Hierarchical graph with parent/child node relationships

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.

Additional Resources

references/examples.md — Viewport culling, custom bounds with badges, group node styles, folder tab rendering
references/reference.md — isVisible() strategies, getBounds() patterns, group node API, performance considerations

Related Skills

/yfiles-nodestyle-basic — Start here for rendering fundamentals
/yfiles-nodestyle-configure — Data-driven configuration
/yfiles-nodestyle-interaction — Hit testing and edge cropping

Source

git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-nodestyle-advanced/SKILL.mdView on GitHub

Overview

This skill enables advanced nodestyle features like viewport culling, accurate rendering bounds, and group node styles. It guides implementing isVisible to skip rendering outside the viewport, getBounds to cover badges and shadows, and creating group styles for hierarchical graphs.

How This Skill Works

You extend NodeStyleBase and implement isVisible and getBounds to tailor rendering behavior. Follow guidance from the MCP and prefer using a BaseClass wrapper instead of TypeScript implements, then optimize rendering by returning correct bounds and performing viewport checks.

When to Use It

Rendering large graphs where you want to skip nodes outside the viewport (viewport culling).
When a node's visuals extend beyond its layout (badges, shadows, decorators) and you need accurate bounds.
Creating a dedicated group/parent node style for hierarchical graphs with folding.
Performance tuning to reduce rendering work and improve frame rates.
Implementing isVisible and getBounds as part of a custom NodeStyleBase.

Quick Start

Step 1: export class AdvancedNodeStyle extends NodeStyleBase {
Step 2: protected isVisible(context, rectangle, node): boolean { return node.layout.toRect().intersects(rectangle) }
Step 3: protected getBounds(context, node): Rect { return node.layout.toRect().getEnlarged(10) }

Best Practices

Before coding, query the current API with the MCP (e.g., yfiles_get_symbol_details, yfiles_list_members).
Always use the BaseClass wrapper instead of directly implementing interfaces.
In getBounds(), return the actual rendered bounds, including badges and shadows.
In isVisible(), render only nodes that intersect the viewport rectangle.
Document performance implications and use folding/group styles where appropriate.

Example Use Cases

Viewport culling for large diagrams to skip offscreen nodes.
getBounds returns enlarged bounds to account for shadows and badges.
Group node style to visually distinguish folders in hierarchical graphs.
Folder tab rendering within group styles for better UX.
Performance tuning by avoiding rendering of nodes outside the visible area.

Frequently Asked Questions

Add this skill to your agents