Freeshapes

[formicoidea]

Summary

Adds a new freeform polygon shape to the edgeless editor, allowing users to draw custom polygon
shapes with arbitrary vertices, Bézier curve smoothing (when a vertex is selected, press the "B" key to activate smoothing), and full integration with the existing shape system (connectors, styling, collaborative editing via CRDT).

This feature extends the shape toolbox with a dedicated polygon drawing tool that supports click-to-place vertices, double-click/Enter to finalize, and a post-creation vertex editing mode with drag, insert, delete, and smooth/curve toggle capabilities.

Changes

New shape type & model (packages/affine/model/)

• Added polygon to the ShapeType enum
• Extended ShapeElementModel with vertices (number[][]), smoothFlags (boolean[]), and controlPoints ((number[] | null)[]) fields
• Implemented full polygon shape API: hit-testing (winding number), bounding box, nearest point, line intersections, Bézier-aware geometry

Polygon drawing tool (packages/affine/gfx/shape/src/polygon-tool.ts)

• Click-to-place vertex workflow with close-snap detection (click near first vertex to close)
• Minimum vertex distance enforcement, degenerate polygon guard, clockwise winding normalization
• Keyboard support: Escape to cancel, Enter to finish, double-click to close

Vertex editing overlay (packages/affine/gfx/shape/src/overlay/polygon-vertex-editing-overlay.ts)

• Post-creation interactive vertex editing: drag vertices, insert at midpoints, delete vertices
• Bézier handle manipulation with smooth/sharp toggle per vertex
• Rotation-aware hit testing, snap guides, canvas rendering of handles and control points

Connector integration (packages/affine/gfx/connector/)

• Polygon-aware anchor point calculation for connector attachment
• Bézier curve support in connector intersection computation
• Fixed anticlockwise winding bug on connector anchor connections

Rendering (packages/affine/gfx/shape/src/element-renderer/)

• Canvas renderer for polygon shapes with stroke, fill, and Bézier curve support
• DOM/SVG renderer with clip-path polygon support
• Drawing overlay for real-time preview during vertex placement

Toolbar & UI (packages/affine/gfx/shape/src/toolbar/, draggable/)

• Polygon icon and menu entry in the shape toolbox
• Shape menu button activation state and color selection support

Math utilities (packages/framework/global/src/gfx/math.ts)

• pointInPolygon (winding number algorithm), pointOnPolygonStoke (distance-to-edge hit-testing)
• Point rotation and tangent computation helpers

Documentation (docs/)

• Updated edgeless data structure docs with polygon vertex storage model
• Added polygon freeshape mention in surface block and editor docs

Test plan

Unit tests (94 tests, all passing)

• math-utils.unit.spec.ts — 37 tests: pointInPolygon (convex, concave, L-shape, star), pointOnPolygonStoke, line/ellipse/polygon intersections, point rotation
• polygon-crdt.unit.spec.ts — 12 tests: CRDT convergence for vertex data across 2-3 peers, concurrent edits (same/different vertices), vertex add+remove conflicts, smoothFlags sync, createYProxy integration
• polygon-vertex-ops.unit.spec.ts — 38+ tests: vertex insert/delete/move operations, smoothFlags toggle, bounding box recomputation, hit-testing (vertex + midpoint), degenerate polygon handling, normalized coordinate invariants

Manual testing checklist

• Draw a polygon with 3+ vertices via click, finalize with double-click or Enter
• Close polygon by clicking near the first vertex (snap detection)
• Cancel drawing with Escape
• Edit vertices post-creation: drag, insert at midpoint, delete (right-click)
• Toggle smooth/sharp on vertices (Bézier curves) => select vertex + key B
• Attach connectors to polygon edges — verify anchor points
• Apply fill color, stroke color, stroke width changes
• Copy/paste polygon shapes
• Verify persistence: reload page, verify polygon shape restored
• Collaborative editing: two peers editing vertices simultaneously

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocksuite	Error		Mar 22, 2026 9:58am

[vercel]

@formicoidea is attempting to deploy a commit to the toeverything Team on Vercel.

A member of the Team first needs to authorize it.