What is isHit used for?

isHit determines whether a given location interacts with the node, which is essential for non-rectangular shapes.

When should I implement getOutline?

Implement getOutline when edges must crop at the node's visible boundary to terminate at the shape edge.

Do I need to wrap with BaseClass()?

Yes. When implementing yFiles interfaces, use the BaseClass() wrapper rather than TypeScript implements to satisfy the eslint plugin.

Yfiles Nodestyle Interaction

Scanned

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

Files (1)

SKILL.md

2.5 KB

Node Style Interaction

Implement custom hit testing and edge cropping for accurate user interaction with non-rectangular node shapes.

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_by_description(query="hit testing")
yfiles:yfiles_get_symbol_details(name="GeneralPath")

Quick Start

export class InteractiveNodeStyle extends NodeStyleBase {
  protected isHit(
    context: IInputModeContext,
    location: Point,
    node: INode
  ): boolean {
    return node.layout.toRect().contains(location, context.hitTestRadius)
  }

  protected getOutline(node: INode): GeneralPath | null {
    const { x, y, width, height } = node.layout
    const path = new GeneralPath()
    path.appendRectangle(new Rect(x, y, width, height), false)
    return path
  }
}

Core Concepts

isHit(): Determines whether a point hits the node — implement for non-rectangular shapes
getOutline(): Defines the node boundary for edge cropping — implement when edges should terminate at the custom shape edge
hitTestRadius: Tolerance area around shape edges, provided by context.hitTestRadius
GeneralPath: Arbitrary shape definition for outlines and hit regions

When to Implement Each Method

isHit(): Node shape is not rectangular (ellipses, polygons, custom paths)
getOutline(): Edges should crop cleanly at the visible shape boundary

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 — Hit testing for custom shapes, exclusion areas, circular/elliptical hit testing, complex outlines
references/reference.md — Method signatures, GeneralPath API, geometric utilities

Related Skills

/yfiles-nodestyle-basic — Basic rendering
/yfiles-nodestyle-configure — Configuration
/yfiles-nodestyle-advanced — Performance and group nodes

Source

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

Overview

This skill enables implementing hit testing, custom click areas, and edge cropping for non-rectangular node shapes in yFiles. It covers isHit, getOutline, hitTestRadius, and using GeneralPath to define outlines.

How This Skill Works

Extend NodeStyleBase and override isHit to detect hits within non-rectangular shapes. Implement getOutline to define the node boundary for edge cropping using a GeneralPath. The framework uses context.hitTestRadius for tolerance and requires returning a GeneralPath|null to describe the hit region.

When to Use It

When node shapes are non-rectangular (ellipses, polygons, or custom paths) and you need accurate hit detection.
When edges should crop cleanly at the visible shape boundary rather than terminating inside the node.
When implementing custom hit testing or getOutline in a node style within yFiles.
When you need a defined hit region with a GeneralPath for complex outlines.
When following yFiles guidance to use the BaseClass wrapper instead of implements for node style classes.

Quick Start

Step 1: Create a class InteractiveNodeStyle that extends NodeStyleBase and override isHit(context, location, node) to return node.layout.toRect().contains(location, context.hitTestRadius).
Step 2: Override getOutline(node) to build and return a GeneralPath describing the node boundary (e.g., using Rect or custom shape).
Step 3: Apply the style and ensure you follow the BaseClass() pattern for yFiles interfaces as recommended by the plugin guidelines.

Best Practices

Override isHit() for non-rectangular shapes to return a boolean indicating a hit.
Implement getOutline() to provide the node boundary for edge cropping when necessary.
Use context.hitTestRadius to improve hit-detection tolerance around the shape.
Draw outlines with GeneralPath for arbitrary shapes and return null if no outline is needed.
Follow the BaseClass() wrapper pattern instead of TypeScript implements to align with the plugin rules.

Example Use Cases

A speech-bubble shaped node where interaction should respect the bubble boundary.
A circular badge with edges cropping to avoid overlapping with connecting edges.
A logo-like node with irregular outline requiring precise hit testing.
A workflow diagram node that is an irregular polygon with edges terminating at its edge.
A map marker with a custom hit area that differs from its visual rectangle.

Frequently Asked Questions

Add this skill to your agents