AgentSkillsCN

yfiles-nodestyle-interaction

通过重写 isHit 和 getOutline 方法，为节点样式实现自定义命中检测与边缘裁剪功能。无论是自定义形状的精确点击检测，还是边缘连接的准确处理，此技能都能游刃有余。当您需要实现命中检测、自定义点击区域、边缘裁剪，或当用户提到“isHit”“命中检测”“getOutline”“边缘裁剪”“边缘连接点”时，此技能将助您高效完成相关开发。

SKILL.md
--- frontmatter
name: yfiles-nodestyle-interaction
description: Implements custom hit testing and edge cropping for node styles by overriding isHit and getOutline methods. Handles accurate click detection for custom shapes and proper edge connections. Use when implementing hit testing, custom click areas, edge cropping, or when user mentions "isHit", "hit testing", "getOutline", "edge cropping", or "edge connection points".

Node Style Interaction

Implement custom hit testing and edge cropping for accurate user interaction.

Quick Start

typescript
export class InteractiveNodeStyle extends NodeStyleBase {
  protected isHit(
    context: IInputModeContext,
    location: Point,
    node: INode
  ): boolean {
    // Check if click is within node bounds
    return node.layout.toRect().contains(location, context.hitTestRadius)
  }

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

Before Implementing

Always query yFiles MCP for current API:

code
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")

Core Concepts

  • •isHit(): Determines if point hits the node
  • •getOutline(): Defines shape for edge cropping
  • •hitTestRadius: Tolerance area around edges
  • •GeneralPath: Defines arbitrary shapes

When to Implement

  • •isHit(): When node shape isn't rectangular
  • •getOutline(): When edges should crop at custom 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.

Code Examples

See examples.md for:

  • •Basic hit testing for custom shapes
  • •Hit testing with exclusion areas
  • •getOutline for edge cropping
  • •Complex shape outlines
  • •Circular and elliptical hit testing

Reference

See reference.md for:

  • •isHit() method signature and parameters
  • •getOutline() implementation patterns
  • •GeneralPath API
  • •Geometric utilities

Related Skills

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

MCP Tools

  • •yfiles:yfiles_get_symbol_details(name="GeneralPath") - Path construction API
  • •yfiles:yfiles_get_symbol_details(name="GeometryUtilities") - Geometry helpers
  • •yfiles:yfiles_search_by_description(query="hit testing") - Documentation