# 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
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
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);
```