Image Block: Ensure drag handle matches cursor position when resizing a center aligned image #46497
Conversation
This file contains 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
talldan
added
[Type] Bug
|
Size Change: +10 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
glendaviesnz
approved these changes
Dec 14, 2022
ryanwelcher
changed the title
dmsnell
pushed a commit
that referenced
this pull request
Dec 15, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
This fixes a small bug when resizing a center aligned image. Previously the drag handle wasn't following the mouse position for center aligned images.
Why?
The reason the bug happens is that for a center aligned image, the width is resized on both the left and the right sides of the image, so the drag handle only moves at half the speed of the cursor.
How?
The ResizableBox component accepts a
resizeRatioprop for fixing this issue. For center aligned images it's set to2to indicate that the drag handle should move at double its normal speed. In all other instances this is set to the default of1.Testing Instructions
In this PR - the drag handle follows the cursor position
In trunk - the drag handle doesn't follow the cursor position
Testing Instructions for Keyboard
This particular feature can't be accessed via a keyboard, so there's no way to test it. There are keyboard accessible ways to resize an image, but they don't have this bug.
Screenshots or screencast
Before
Kapture.2022-12-13.at.17.00.34.mp4
After
Kapture.2022-12-13.at.16.59.04.mp4