Zoom in/out to correct location #66618
Open
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
jeryj
added
[Feature] Zoom Out
[Type] Bug
|
Size Change: +271 B (+0.02%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in ab88dfa. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11618713629
|
2 tasks
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
jeryj
commented
Nov 7, 2024
Comment on lines
+428
to
+431
| iframeDocument.documentElement.addEventListener( | ||
| 'transitionend', | ||
| onZoomOutTransitionEnd, | ||
| { once: true } |
There was a problem hiding this comment.
Awesome. transitionend is a much better way to handle this!
Comment on lines
+326
to
+327
| // TODO: What should this condition be? | ||
| ( scaleValue === 1 ) === ( prevScaleRef.current === 1 ) |
There was a problem hiding this comment.
To name it, we want it to be when zoom mode changes. That's the only time we want to animate the transition. Otherwise it will animate when transitioning between scale values when opening/closing sidebars, which we do not want.
There was a problem hiding this comment.
The consumer is switching the scale prop between 1 and 'default', so maybe it should be tied to the scale prop instead of the value then? The current condition is effectively that, but probably less readable. I'm thinking instead it would probably be best to add just the iframeDocument and scale prop to the dependencies instead of everything would be sufficient.
jeryj
commented
Nov 7, 2024
Comment on lines
+468
to
+469
| // TODO: Removing this causes issues with the zoom out animation. | ||
| // iframeDocument.documentElement.classList.remove( 'is-zoomed-out' ); |
There was a problem hiding this comment.
When does it cause issues? zoom out seems to be working fine for me.
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.
Fixes #65884
Also fixes a minor bug where setting the scroll position was still delayed even when there was no animation due to reduced motion settings.
What?
Maintain the visible content of the editor canvas when zooming in/out.
Why?
It's disorienting to zoom in/out and lose your frame of reference.
How?
When changing scale (zoom in/out):
It will always attempt to scale to the center unless we are at the top of the canvas. In which case, it will scale to keep the top of the canvas visible.
Known bugs
Testing Instructions
Zooming from Top
Screen.Recording.2024-11-06.at.2.38.52.PM.mov
Zooming from below Top
Screen.Recording.2024-11-06.at.2.39.17.PM.mov
Open/close sidebar scaling animations
Try to break it :)
Testing Instructions for Keyboard
Screenshots or screencast
Before
Screen.Recording.2024-11-06.at.3.29.26.PM.mov
After
Screen.Recording.2024-11-06.at.12.27.31.PM.mov