tldraw/tldraw

Edge resize hit areas overlap corner hit areas on small shapes

Closed

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

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (47,037 star) (3,212 fork)batch import
bugfixgood first issuesdk

描述

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.

貢獻者指南