Add useScaleCanvas: Web Animations API for zoom in/out animation #66917
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
|
Size Change: +117 B (+0.01%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
jeryj
force-pushed
the
fix/iframe-zoom-scroll-position
branch
from
035b913 to
f0f90e8
Compare
|
Flaky tests detected in fb16c4f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12018296199
|
jeryj
changed the title
|
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
added
[Feature] Zoom Out
[Type] Bug
ajlende
changed the base branch from
trunk
to
backport/try/zoom-scroll-position
ajlende
force-pushed
the
fix/iframe-zoom-scroll-position
branch
from
5e23644 to
a74987a
Compare
|
#66618, which is applying the correct zoom in/out on |
ajlende
force-pushed
the
backport/try/zoom-scroll-position
branch
from
201b18a to
857ca64
Compare
|
@cbravobernal - This will be the hopeful final state of the scaling animation. It has a large improvement over the one that got merged into 6.7 (but also has a lot more code). |
It isn't necessary to set the previous values at the beginning of the useEffect, because that is handled by the starting frame of the web animations api.
…ansitionTo.scrollTop
ajlende
force-pushed
the
fix/iframe-zoom-scroll-position
branch
from
b06c369 to
b41d282
Compare
jeryj
commented
Nov 25, 2024
Comment on lines
-44
to
-48
|
|
||
| @mixin editor-canvas-resize-animation($additional-transition-rules...) { | ||
| transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), $additional-transition-rules; | ||
| @include reduce-motion("transition"); | ||
| } |
There was a problem hiding this comment.
Removed the mixin, as it's only used once.
packages/block-editor/src/components/iframe/use-scale-canvas.js
Outdated
Show resolved
Hide resolved
draganescu
reviewed
Nov 26, 2024
| // so we need to adjust the height of the content to match the scale by using negative margins. | ||
| $extra-content-height: calc(#{$content-height} * (1 - #{$scale})); | ||
| $total-frame-height: calc(2 * #{$frame-size} / #{$scale}); | ||
| $total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px); |
There was a problem hiding this comment.
It's the same 2px from before; the line just got moved.
I'm not entirely sure what it does, but I assume it's a 1px border somewhere that isn't accounted for in the height.
draganescu
approved these changes
Nov 26, 2024
ajlende
approved these changes
Nov 26, 2024
This was referenced Nov 28, 2024
ellatrix
changed the title
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?
Use web animation api to handle the zoom animation in a more performant way. Also allows for reversing the animation during the zoom animation if you click the zoom button twice quickly.
Fixes zooming out scaling from wrong point when sidebars have been opened after zoom out was initiated.
Why?
Improve implementation for maintainability, performance, and fix edge cases.
How?
When changing scale (zoom in/out):
useScaleCanvashook to manage zoom level and animationsis-zoomed-outclass to the iframe document htmlstartAnimationRefto trueuseEffectruns that:transitionFromandtransitionTorefs with the properties of{ scaleValue, frameSize, clientHeight, scrollTop }. This gives the animation everything it needs to know to transition to/from the values.transitionFrom.scrollTopso that the canvas visually stays in the same positiontransitionTo.scrollTopvalue so everything looks seamless.transitionFromandtransitionTorefs are swapped, and the animation is reversed.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
Zooming out after scale container has changed sizes
On
trunk, this snaps to a much smaller size.Before
Screen.Recording.2024-11-14.at.11.43.56.AM.mov
After
Screen.Recording.2024-11-14.at.11.32.29.AM.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