skills.rest
yWorks
yWorksOFFICIAL
Explore all skills by this author →
Website𝕏@yworksGitHub

yfiles-nodestyle-interaction

Override isHit and getOutline for precise hit testing and edge cropping in yFiles.

Updated Feb 10, 2026
Search Tags:#interaction#hit-testing#edge-cropping#nodestyle#yfiles#custom-shapes
One-click install
npx skills add https://github.com/yWorks/yfiles-for-html-claude-plugin --skill yfiles-nodestyle-interaction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yfiles-nodestyle-interaction
Source: https://github.com/yWorks/yfiles-for-html-claude-plugin/tree/main/skills/yfiles-nodestyle-interaction
Command: npx skills add https://github.com/yWorks/yfiles-for-html-claude-plugin --skill yfiles-nodestyle-interaction

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Precise hit testing and edge cropping are essential when implementing non-rectangular node styles. This skill provides a pattern to override isHit and getOutline and ensures accurate user interactions.

Core Features & Use Cases

  • Custom hit testing for non-rectangular shapes using isHit
  • Edge cropping using getOutline to influence where edges connect
  • Robust click detection for complex node shapes and interaction scenarios

Quick Start

Implement InteractiveNodeStyle by extending NodeStyleBase and override isHit and getOutline to match your shape, then test click accuracy in your app.

Frequently Asked Questions about yfiles-nodestyle-interaction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accurate hit testing for custom non-rectangular yFiles node styles?▼

Hit testing for custom yFiles node styles is implemented by extending NodeStyleBase and overriding the isHit method to match your non-rectangular shape's visual outline for precise click detection.

How does edge cropping work for custom shapes in yFiles?▼

Edge cropping in yFiles works by overriding the getOutline method on a NodeStyleBase-derived class to return a GeneralPath, defining the exact boundary where edges connect to the custom node shape.

Why are clicks registering outside my custom yFiles node shape?▼

Clicks register outside custom yFiles node shapes when default rectangular hit testing is used, requiring you to override the isHit method on your NodeStyleBase class to restrict click detection to the visual outline.

Do I need to override getOutline for edge connection points in yFiles?▼

You need to override getOutline for edge connection points in yFiles when using non-rectangular shapes, returning a GeneralPath outline to ensure edge cropping accurately matches the visual node boundary.

What's the best way to handle interaction scenarios with complex node shapes in yFiles?▼

Handling interaction scenarios with complex yFiles node shapes requires extending NodeStyleBase and overriding both isHit for robust click detection and getOutline for accurate edge cropping using a GeneralPath.

Related Skills

Explore More Software Engineering Skills→
utsavm81098utsavm81098

threejs-geometry

Create and manipulate Three.js geometries using BufferGeometry and InstancedMesh.

Community
Intermediate
billh93billh93

harden

Harden user interfaces against edge cases, errors, and internationalization issues.

Community
Advanced
yWorksyWorks

yfiles-layout

Apply yFiles layout algorithms to arrange graph structures automatically.

Official
Advanced
adamhjkadamhjk
2

pixijs-math

Perform geometric calculations and hit testing in PixiJS scenes.

Community
Intermediate