Skip to content

fix(tldraw): apply dynamic sizing when dragging shapes from toolbar#8042

Merged
AniKrisn merged 3 commits intomainfrom
ani/dynamic-size-toolbar-drag
Mar 10, 2026
Merged

fix(tldraw): apply dynamic sizing when dragging shapes from toolbar#8042
AniKrisn merged 3 commits intomainfrom
ani/dynamic-size-toolbar-drag

Conversation

@AniKrisn
Copy link
Copy Markdown
Contributor

@AniKrisn AniKrisn commented Feb 19, 2026

In order to make shapes dragged from the toolbar respect dynamic sizing (matching the behavior of click-to-create), this PR applies the same scale calculation to each toolbar onDragStart callback and centralizes the scale factor logic into a new editor.getResizeScaleFactor() method.

When dynamic size mode is enabled, shapes created by clicking with a tool respect the zoom level via the scale prop, but shapes dragged out of the toolbar did not. This adds the same scaling to toolbar drag-create for geo, arrow, line, frame, text, and note tools, and refactors all Pointing states to use the shared helper.

Closes #7998

Change type

  • bugfix

Test plan

  1. Enable dynamic size mode in user preferences
  2. Zoom in/out to a non-1x zoom level
  3. Drag each shape type (geo, arrow, line, frame, text, note) out of the toolbar
  4. Verify the created shapes appear at a consistent screen size regardless of zoom, matching the behavior of click-to-create
  • Unit tests
  • End to end tests

API changes

  • Added Editor.getResizeScaleFactor() — returns 1 / zoomLevel when dynamic sizing is enabled, 1 otherwise

Release notes

  • Fix shapes dragged from the toolbar not respecting dynamic size mode

When dynamic size mode is enabled, shapes created by clicking with a
tool respect the zoom level, but shapes dragged from the toolbar did
not. Apply the same scale calculation in each toolbar onDragStart
callback, matching the pattern used in each tool's Pointing state.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 19, 2026

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

Project Deployment Actions Updated (UTC)
analytics Ready Ready Preview Mar 10, 2026 5:30pm
chat-template Ready Ready Preview Mar 10, 2026 5:30pm
examples Ready Ready Preview Mar 10, 2026 5:30pm
tldraw-docs Ready Ready Preview Mar 10, 2026 5:30pm
tldraw-shader Ready Ready Preview Mar 10, 2026 5:30pm
workflow-template Ready Ready Preview Mar 10, 2026 5:30pm

Request Review

Copy link
Copy Markdown
Member

@mimecuvalo mimecuvalo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is starting to get repetitive across the codebase. let's create a function called editor.getResizeScaleFactor() please! and if you don't mind, let's change the other places you see this in the codebase 🙏

@huppy-bot
Copy link
Copy Markdown
Contributor

huppy-bot bot commented Mar 10, 2026

API Changes Check Passed

Great! The PR description now includes the required "### API changes" section. This helps reviewers and SDK users understand the impact of your changes.

Copy link
Copy Markdown
Member

@mimecuvalo mimecuvalo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@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 a08646b Mar 10 2026, 05:20 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 a08646b Mar 10 2026, 05:20 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
tldraw-mcp-app a08646b Mar 10 2026, 05:20 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
image-pipeline-template a08646b Mar 10 2026, 05:20 PM

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

cloudflare-workers-and-pages bot commented Mar 10, 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 a08646b Commit Preview URL

Branch Preview URL
Mar 10 2026, 05:24 PM

@huppy-bot huppy-bot bot added the bugfix Bug fix label Mar 10, 2026
@AniKrisn AniKrisn added this pull request to the merge queue Mar 10, 2026
Merged via the queue into main with commit be8a80b Mar 10, 2026
31 checks passed
@AniKrisn AniKrisn deleted the ani/dynamic-size-toolbar-drag branch March 10, 2026 18:06
github-merge-queue bot pushed a commit that referenced this pull request Mar 18, 2026
In order to publish the v4.5.0 release notes and record the v4.4.1
patch, this PR archives release notes and resets `next.mdx` for the next
cycle.

**v4.5.0.mdx** (new file):
- Archived from `next.mdx` with full frontmatter, keywords, and GitHub
release link
- Featured sections: click-through on transparent image pixels (#7942),
breaking `EmbedShapeUtil.configure()` change (#8034)
- API changes: `Editor.getResizeScaleFactor()` (#8042),
`TLImageAsset.pixelRatio` (#8163), `sanitizeSvg` (#7896),
`experimental__onDropOnCanvas` (#7911), enum-to-const refactoring
(#8084)
- 6 improvements and 20 bug fixes from production

**v4.4.0.mdx:**
- Add v4.4.1 patch release section with tooltip positioning fix (#8171)
- Add v4.4.1 to keywords

**next.mdx:**
- Reset with `last_version: v4.5.0` and empty content

### Change type

- [x] `other`

### Code changes

| Section       | LOC change    |
| ------------- | ------------- |
| Documentation | +128 / -107   |
huppy-bot bot pushed a commit that referenced this pull request Mar 18, 2026
In order to publish the v4.5.0 release notes and record the v4.4.1
patch, this PR archives release notes and resets `next.mdx` for the next
cycle.

**v4.5.0.mdx** (new file):
- Archived from `next.mdx` with full frontmatter, keywords, and GitHub
release link
- Featured sections: click-through on transparent image pixels (#7942),
breaking `EmbedShapeUtil.configure()` change (#8034)
- API changes: `Editor.getResizeScaleFactor()` (#8042),
`TLImageAsset.pixelRatio` (#8163), `sanitizeSvg` (#7896),
`experimental__onDropOnCanvas` (#7911), enum-to-const refactoring
(#8084)
- 6 improvements and 20 bug fixes from production

**v4.4.0.mdx:**
- Add v4.4.1 patch release section with tooltip positioning fix (#8171)
- Add v4.4.1 to keywords

**next.mdx:**
- Reset with `last_version: v4.5.0` and empty content

### Change type

- [x] `other`

### Code changes

| Section       | LOC change    |
| ------------- | ------------- |
| Documentation | +128 / -107   |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bugfix Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dynamic size is ignored when dragging shapes from the toolbar

2 participants