feat(edgeless): add center anchor point on shapes for connectors

[formicoidea]

Summary

• Add a center anchor point [0.5, 0.5] on eligible shapes (Rect, roundedRect, Ellipse, Diamond, Triangle) so
  connectors can originate from or target the shape center
• Connector endpoints anchored at center visually terminate at the shape perimeter (not the geometric center) using
  shape-specific line intersection math. An approach where the connector does not stop at the edge of the shape would require automatic management of connectors within a layer, which is not the current design philosophy in Blocksuite. Furthermore, manually managing the z-index of connectors would be too time-consuming because it would have to be done for every new shape added.
• Feature is toggleable via EditPropsStore (connectorCenterAnchor) and defaults to enabled
• Add playground debug menu toggle for easy testing

Changes

Core logic (connector-manager.ts):

• ConnectorEndpointLocationsWithCenter — 5-point endpoint set (4 edges + center)
• ConnectorEndpointLocationsOnTriangle — updated with center point
• isCenterAnchorEligible(ele) — checks if a shape supports center anchoring
• isCenterAnchorEnabled(std) — reads the global toggle from EditPropsStore
• computePerimeterPointForCenterAnchor() — ray-casts from the other endpoint through the shape center to find the
  perimeter exit point, using the shape's own getLineIntersections method

Connector tool (connector-tool.ts):

• When hovering a shape, show 5 endpoint locations (including center) if the feature is enabled and the shape is
  eligible

Storage (edit-props-store.ts):

• New connectorCenterAnchor boolean storage key (persisted in localStorage)

Playground (starter-debug-menu.ts):

• "Toggle Connector Center Anchor" menu item for manual testing

Tests (connector-center-anchor.spec.ts):

• 9 browser integration tests: eligibility, anchor count, toggle, path generation (all 3 routing modes), perimeter
  endpoint validation, mixed shape types, DOM/SVG rendering

Test plan

• yarn workspace @blocksuite/integration-test vitest run src/tests/edgeless/connector-center-anchor.spec.ts
  --browser.headless — 9/9 passing
• Manual: create connectors from center anchor in playground, verify visual endpoint is on shape edge
• Manual: toggle feature off via debug menu, verify center anchor disappears
• CI green

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocksuite	Ready	Preview, Comment	Mar 15, 2026 10:04pm

[vercel]

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

A member of the Team first needs to authorize it.