WaypointEditor

Import it from @grafloria/renderer.

WaypointEditor

Handles interactive waypoint editing on link paths:

• Add waypoints by clicking on path
• Move waypoints by dragging
• Remove waypoints by double-click
• Grid snapping
• Distance constraints

Architecture: Modular tool that can be enabled/disabled via InteractionConfig

ts
Copy
class WaypointEditor

Methods

• constructor(config: WaypointEditorConfig)
• getWaypointAt(index: number, points: Point[]): Waypoint | null — Get waypoint at specific index
• isWaypoint(index: number, points: Point[]): boolean — Check if point at index is a waypoint (not an endpoint)
• getWaypoints(points: Point[]): Waypoint[] — Get all waypoints (excluding endpoints)
• hitTestWaypoint( mouseX: number, mouseY: number, points: Point[], hitSlop = 0 ): WaypointHitResult | null — Hit test for clicking on a waypoint handle Optimized to avoid allocations on hot path (mousemove)
• hitTestPath( mouseX: number, mouseY: number, points: Point[], hitSlop = 0 ): PathHitResult | null — Hit test for clicking on a path segment (to add waypoint)
• addWaypointAtPosition( clickX: number, clickY: number, points: Point[] ): AddWaypointResult | null — Add waypoint at click position on path
• moveWaypoint( waypointIndex: number, newPosition: Point, points: Point[], pathType?: 'direct' | 'orthogonal' | 'smooth' | 'bezier' | 'straight' ): Point[] | null — Move waypoint to new position For orthogonal paths, just move the waypoint - the rendering will use orthogonal routing
• removeWaypoint(waypointIndex: number, points: Point[]): Point[] | null — Remove waypoint at index
• snapToGrid(point: Point): Point — Snap point to grid
• distanceToSegment(point: Point, segmentStart: Point, segmentEnd: Point): number — Calculate distance from point to line segment
• distance(p1: Point, p2: Point): number — Calculate Euclidean distance between two points
• getConfig(): WaypointEditorConfig — Get current configuration
• updateConfig(updates: Partial<WaypointEditorConfig>): void — Update configuration
• renderWaypointHandle(waypoint: Waypoint, linkId: string): VNode — Render waypoint handle as VNode
• renderWaypointHandles(points: Point[], linkId: string): VNode[] — Render all waypoint handles for a link