feat(editor): add zoom direction preference for mouse input#7732
Merged
kostyafarber merged 10 commits intomainfrom Jan 22, 2026
Merged
feat(editor): add zoom direction preference for mouse input#7732kostyafarber merged 10 commits intomainfrom
kostyafarber merged 10 commits intomainfrom
Conversation
Add a new user preference to control whether mouse wheel zoom direction should be inverted. This preference allows users who prefer different scrolling behavior (e.g., "natural" scrolling on Mac) to invert the zoom direction when using a mouse. - Add isZoomDirectionInverted to TLUserPreferences interface - Add validation and migration support - Add getter method to UserPreferencesManager - Default value is false (standard zoom behavior)
Apply the zoom direction inversion preference when the user is using mouse input mode. The inversion only takes effect when: 1. The user has enabled isZoomDirectionInverted preference 2. The user has explicitly set their input mode to 'mouse' This ensures trackpad users are not affected and the behavior change only applies when the user has made a deliberate choice about their input device.
Add a new action and menu item to toggle the zoom direction inversion preference. The toggle: - Appears in the Input Device menu (under Preferences) - Is disabled when input mode is not set to 'mouse' - Includes proper translations and event tracking - Is exported for use by consumers of the tldraw package
Update button CSS selectors to also match elements with the data-disabled attribute. This is needed for menu items that should appear disabled (like the invert zoom option when not in mouse mode) but cannot use the native disabled attribute because they're still interactive for accessibility purposes.
Rename the "Input mode" submenu to "Input device" for clarity since it now contains both the input device selection and the zoom direction inversion option. Also reorder submenus in preferences to place Input device after Accessibility.
Add the zoom direction preference to the dotcom user schema and include a database migration to add the column to the user table. This allows the preference to be synced across devices for logged-in users.
Update test fixtures and regenerate the fetchEverythingSql snapshot to include the new isZoomDirectionInverted column in the user table.
Add comprehensive test coverage for the new isZoomDirectionInverted user preference: - Update TLUserPreferences consistency tests to include new field - Add UserPreferencesManager tests for getIsZoomDirectionInverted - Add camera zoom tests verifying inversion behavior: - Inverts zoom when mouse mode + preference enabled - Does NOT invert when input mode is auto (null) - Zooms normally when mouse mode + preference disabled
Update all translation files to use 'menu.input-device' key instead of 'menu.input-mode', and add new toggle-invert-zoom translation keys to main.json.
Contributor
|
Sorry @kostyafarber, we're not accepting pull requests from external contributors at this time. See discussion here. If you'd like to report a bug or suggest a feature, please open an issue instead. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
kostyafarber
temporarily deployed
to
bemo-canary
GitHub Actions
Inactive
kostyafarber
temporarily deployed
to
e2e-dotcom
GitHub Actions
Inactive
Contributor
Author
|
jammed with @steveruizok on this, landing this (clean pr) in favour of #7552 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds a new user preference to invert mouse wheel zoom direction. Some users prefer "natural" scrolling behavior where scrolling down zooms out (like on macOS trackpads), but this conflicts with traditional mouse wheel zoom behavior.
This is a clean reimplementation of the original branch
kostya/scroll-direction-preferencewith a narrative-quality commit history.closes #6164
Change type
featureTest plan
Release notes
API changes
isZoomDirectionInvertedtoTLUserPreferencesinterfaceUserPreferencesManager.getIsZoomDirectionInverted()methodToggleInvertZoomItemcomponent export from@tldraw/tldrawtoggle-invert-zoomaction and eventNote
Introduces a mouse-only preference to invert wheel zoom and wires it end‑to‑end across editor, storage, and UI.
isZoomDirectionInvertedtoTLUserPreferences; DB migration + sync SQL and schema/types updatedinputMode === 'mouse'; exposesgetIsZoomDirectionInverted()ToggleInvertZoomItemunder Preferences →menu.input-device(renamed frommenu.input-mode); action/eventtoggle-invert-zoom; translations updated across localesToggleInvertZoomItemfrom@tldraw/tldraw; API reports regenerated; tests added for preferences and zoom behavior[data-disabled]alongside:disabledWritten by Cursor Bugbot for commit 2929950. This will update automatically on new commits. Configure here.