Skip to content

fix(arrows): clamp arrow terminals to frame boundary when bound shape is clipped#7932

Merged
steveruizok merged 2 commits intomainfrom
fix/arrow-clipped-shape-binding
Feb 25, 2026
Merged

fix(arrows): clamp arrow terminals to frame boundary when bound shape is clipped#7932
steveruizok merged 2 commits intomainfrom
fix/arrow-clipped-shape-binding

Conversation

@steveruizok
Copy link
Copy Markdown
Collaborator

@steveruizok steveruizok commented Feb 14, 2026

Fixes #7824. When a shape inside a frame extends beyond the frame boundary, arrows bound to that shape would terminate at the shape's actual boundary rather than at the frame's clip boundary, creating a visual disconnect where the arrow appears to point into empty space.

pr-7932-walkthrough.mp4

This PR adds a clampArrowTerminalToMask() post-processing step that runs after arrow-shape geometry intersection. If the computed terminal point falls outside the bound shape's mask (the frame clip boundary), it casts a ray from the binding anchor through the terminal to find where it crosses the mask polygon, and clamps the terminal to that point.

Change type

  • bugfix

Test plan

  1. Create a frame
  2. Add a shape (e.g. geo or note) inside the frame
  3. Position the shape so it extends beyond the frame boundary (it will be clipped)
  4. Draw a straight arrow from outside the frame, connecting to the shape
  5. Verify the arrow terminates at the frame boundary, not at the shape's invisible clipped edge
  6. Repeat with a curved arrow
  • Unit tests

Release notes

  • Fix arrow endpoints terminating at invisible clipped shape boundaries instead of at the frame edge

… is clipped

When a shape inside a frame extends beyond the frame boundary, arrows
bound to that shape now terminate at the frame's clip boundary instead
of at the shape's actual (invisible) boundary.

Adds clampArrowTerminalToMask() which post-processes arrow terminal
points after shape geometry intersection, checking if the terminal
falls outside the bound shape's mask and clamping it to the nearest
mask boundary crossing.

Closes #7824
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 14, 2026

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

Project Deployment Actions Updated (UTC)
examples Ready Ready Preview Feb 19, 2026 3:59pm
tldraw-docs Ready Ready Preview Feb 19, 2026 3:59pm
4 Skipped Deployments
Project Deployment Actions Updated (UTC)
analytics Ignored Ignored Preview Feb 19, 2026 3:59pm
chat-template Ignored Ignored Preview Feb 19, 2026 3:59pm
tldraw-shader Ignored Ignored Preview Feb 19, 2026 3:59pm
workflow-template Ignored Ignored Preview Feb 19, 2026 3:59pm

Request Review

@huppy-bot huppy-bot bot added the bugfix Bug fix label Feb 14, 2026
@steveruizok steveruizok added the maybe An idea, something to try and see label Feb 15, 2026
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
🔵 In progress
View logs
image-pipeline-template a9811a6 Feb 19 2026, 03:50 PM

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
🔵 In progress
View logs
multiplayer-template a9811a6 Feb 19 2026, 03:50 PM

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Feb 19, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
image-pipeline-template a9811a6 Commit Preview URL

Branch Preview URL
Feb 19 2026, 03:54 PM

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
🔵 In progress
View logs
branching-chat-template a9811a6 Feb 19 2026, 03:50 PM

@kaneel
Copy link
Copy Markdown
Contributor

kaneel commented Feb 24, 2026

Not sure how this should behave so feel free to brush me off

Screen.Recording.2026-02-24.at.14.29.59.mov

@steveruizok
Copy link
Copy Markdown
Collaborator Author

Not sure how this should behave so feel free to brush me off

Screen.Recording.2026-02-24.at.14.29.59.mov

I think we'll have to live with this one: the only alternative I can think of is to extend the arrow past the anchor point, which is usually a one-way ticket to arrow-bug city.

@steveruizok steveruizok added this pull request to the merge queue Feb 25, 2026
Merged via the queue into main with commit 666fcad Feb 25, 2026
22 checks passed
@steveruizok steveruizok deleted the fix/arrow-clipped-shape-binding branch February 25, 2026 19:34
steveruizok added a commit that referenced this pull request Feb 27, 2026
Add 12 new entries from PRs merged since v4.4.0:
- Featured: click-through on transparent image pixels (#7942)
- API: enum-to-const-object refactor (#8084)
- Improvements: SVG sanitizer (#7896), save-on-blur (#8037)
- Bug fixes: cross-origin download (#8090), zero-size draw (#8067),
  rich text toolbar cleanup (#8050), zoom threshold (#8040),
  selection foreground fallback (#8011), sticky note SVG shadow (#7934),
  arrow frame clamping (#7932), zero pressure draw (#5693)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bugfix Bug fix maybe An idea, something to try and see

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Arrow endpoint shows at shape boundary even when shape is clipped by frame

2 participants