Polygon

A polygon is a closed shape 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 edge in real-time
4. Press Enter to confirm and complete drawing (auto-closes), or press Esc to cancel
5. Press Backspace to delete the last point

Note: A polygon requires at least 3 points. If drawing ends with fewer than 3 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 polygon, 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 (polygon must keep at least 3 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 PolygonData extends ShapeData {
	shapeName: 'polygon'
	points: number[]
}