PolyLine

A polyline is an open line segment formed by connecting multiple points, created by clicking multiple times to add nodes.

Drawing Method

Click multiple times to complete drawing:

1. Click on the canvas to add the first point
2. Continue clicking to add more nodes
3. Move mouse to preview the next line segment in real-time
4. Press Enter to confirm and complete drawing, or press Esc to cancel
5. Press Backspace to delete the last point

Note: A polyline requires at least 2 points. If drawing ends with fewer than 2 points, the drawing is discarded and no shape is created.

You can hold the space key to pan the canvas while drawing.

Editing

After selecting a polyline, it enters edit mode:

1. Click a vertex once to start moving it, and click again to finish moving
2. Midpoint controls with a plus sign are displayed between adjacent vertices. Click a midpoint to insert a new vertex at that position
3. Right-click a vertex to delete it (polyline must keep at least 2 vertices)
4. Use ShapeOptions.enableEditAddMidPoint to control whether midpoints are displayed
5. Use ShapeOptions.enableEditDropPoint to control whether right-click to delete vertex is enabled

Data

export interface PolyLineData extends ShapeData {
	shapeName: 'polyline'
	points: number[]
}