tldraw/tldraw

Edge resize hit areas overlap corner hit areas on small shapes

已關閉

#8,840 建立於 2026年5月13日

 (1 則留言) (0 個反應) (0 位負責人)TypeScript (3,212 個分叉)batch import
bugfixgood first issuesdk

倉庫指標

星標
 (47,037 顆星)
PR 合併指標
 (平均合併 5天 4小時) (30 天內合併 227 個 PR)

描述

Description

On small shapes, the edge resize handle hit areas overlap with the corner resize handle hit areas, so it is hard to reliably grab a specific handle near a corner.

Background

In packages/tldraw/src/lib/overlays/SelectionForegroundOverlayUtil.ts:

  • Corner handles are a filled 3s × 3s polygon centered at each corner, where s = max(targetSizeX, targetSizeY) * 1.5. They extend 1.5s along each edge away from the corner.
  • Edge handles are an Edge2d line that runs the full length of the edge, corner to corner, with the default 8 screen px hit margin applied perpendicular to the line.

On a small shape (e.g. ~30 screen px in the narrow dimension), the two corner polygons on a single edge can extend most or all of the way along that edge, eating the edge's hit area. The reverse is also true: the edge line passes through the corner location, so the edge hit area overlaps the corner square itself.

Today the conflict is resolved purely by declaration order in getOverlays() — corners are pushed first, so corners win ties (_collectResizeCornerOverlays then _collectResizeEdgeOverlays, lines 113-114). That means corners get prioritized, but the edge handle effectively has very little (or no) hit area on small shapes.

Reproduction

  1. Create a rectangle.
  2. Resize so the narrow dimension is ~25-40 screen px.
  3. Try to grab the edge handle on the narrow dimension between the two corners — the available area is tiny or non-existent.

Notes

This is closely related to #8839. Both stem from corner hit polygons extending inward at sizes where the shape is too small to absorb them. Possible directions:

  • Clamp the corner polygon's inward extent (along each edge) to a fraction of the shape's dimension on that axis, so the corner cannot consume the whole edge.
  • Lower the size threshold at which edge handles drop out entirely, so we do not pretend to have edge handles when they are unreachable.

貢獻者指南