ControlPointEditor

Import it from @grafloria/renderer.

ControlPointEditor provides functionality for editing bezier curve control points

Features:

• Detect and track control points from path segments
• Hit testing for control point handles
• Move control points via drag
• Auto-generate smooth bezier curves from points
• Grid snapping support
• Symmetric control point mirroring
• Visual rendering of control handles and lines

ts
Copy
class ControlPointEditor

Methods

• constructor(config: ControlPointEditorConfig)
• getControlPoints(segments: PathSegment[]): ControlPoint[] — Get all control points from path segments
• hitTestControlPoint( mouseX: number, mouseY: number, segments: PathSegment[], hitSlop = 0 ): ControlPointHitResult | null — Hit test for control point handles Optimized to avoid allocations on hot path (mousemove)
• moveControlPoint( segmentIndex: number, controlType: 'control1' | 'control2', newPosition: Point, segments: PathSegment[] ): PathSegment[] | null — Move a control point to a new position
• generateBezierSegments(points: Point[]): PathSegment[] — Auto-generate bezier curve segments from an array of points

Uses Catmull-Rom algorithm to generate smooth curves

• snapToGrid(point: Point): Point — Snap a point to the grid
• calculateDistance(p1: Point, p2: Point): number — Calculate Euclidean distance between two points
• renderControlPointHandle(controlPoint: ControlPoint, linkId: string): VNode — Render a control point handle as a VNode
• renderControlLine(controlPoint: ControlPoint, linkId: string): VNode — Render a control line (from anchor to control point) as a VNode
• renderControlPointHandles(segments: PathSegment[], linkId: string): VNode[] — Render all control point handles for a link
• updateConfig(partialConfig: Partial<ControlPointEditorConfig>): void — Update configuration (partial update)
• getConfig(): Readonly<ControlPointEditorConfig> — Get current configuration

Example

typescript
Copy
const editor = new ControlPointEditor(config);

// Detect control points from segments
const controlPoints = editor.getControlPoints(link.segments);

// Hit test for click
const hit = editor.hitTestControlPoint(mouseX, mouseY, link.segments);

// Move control point
const newSegments = editor.moveControlPoint(hit.segmentIndex, hit.controlType, newPos, link.segments);

// Render visual handles
const handles = editor.renderControlPointHandles(link.segments, link.id);