Add useScaleCanvas: Web Animations API for zoom in/out animation#66917

Merged

jeryj merged 64 commits intotrunkfrom fix/iframe-zoom-scroll-position

Nov 26, 2024

+517-360

Commits on Nov 25, 2024

Midway commit. Scaling out is broken

jeryj
authored and
ajlende
committed
Fix zoom in animation

jeryj
authored and
ajlende
committed
Fix scaling by preserving CSS properites

jeryj
authored and
ajlende
committed
Prevent reflow from removing and re adding scrollbar in animation

jeryj
authored and
ajlende
committed
Only rerun zoom out use effects if zoom out has changed.

jeryj
authored and
ajlende
committed
Allow all CSS vars to update when scale changes

jeryj
authored and
ajlende
committed
Midway commit. Math is wrong for addressing top/bottom exceptions

jeryj
authored and
ajlende
committed
Remove usePrevious usage
ajlende
committed
Add prefers-reduced-motion to setTimeout delay
ajlende
committed
WIP Working zoom without frame size
ajlende
committed
Account for changes to client height when determining edge threshold

jeryj
authored and
ajlende
committed
Zoom to center unless it will reveal top or bottom

jeryj
authored and
ajlende
committed
Account for a top threshold when zooming in and out

jeryj
authored and
ajlende
committed
Clean up math and add comments
ajlende
committed
Add event listener instead of timeout
ajlende
committed
Fix reduced motion
ajlende
committed
Remove timeout ref
ajlende
committed
Refactor callback as separate effect
ajlende
committed
Try to add back useEffect cleanups
ajlende
committed
Initialize prevClientHeight in the useEffect
ajlende
committed
use useReducedMotion

jeryj
authored and
ajlende
committed
Add test for zoom in/out location

jeryj
authored and
ajlende
committed
Hack to fix reduced motion
ajlende
committed
Clean up the frameSizeValue and scaleValue calculations
ajlende
committed
Replace TODO comments with HACK comments
ajlende
committed
Add cleanup for raf
ajlende
committed
Simplify CSS diff for 6.7 review
ajlende
committed
Add one more HACK comment
ajlende
committed
Do not allow scrollTopNext to be smaller than 0

jeryj
authored and
ajlende
committed
Fix zoom-out.spec.js
ajlende
committed
Move 6.7 iframe scaling work to trunk

jeryj
authored and
ajlende
committed
Move calculations to useScaleCanvas hook

jeryj
authored and
ajlende
committed
Rename scaleValue to scale

jeryj
authored and
ajlende
committed
Rename frameSizeValue to frameSize

jeryj
authored and
ajlende
committed
Remove iframeWindowInnerHeight

jeryj
authored and
ajlende
committed
Remove unused window resize ref

jeryj
authored and
ajlende
committed
Refactor CSS

jeryj
authored and
ajlende
committed
Move animation to state

jeryj
authored and
ajlende
committed
Fix scaling the canvas when sidebars open/close

jeryj
authored and
ajlende
committed
Recalculate scale before exiting scaled canvas to prevent snapping effect

jeryj
authored and
ajlende
committed
CSS linting

jeryj
authored and
ajlende
committed
Move code into useScaleCanvas that isn't necessary in iframe index

jeryj
authored and
ajlende
committed
Move resize listeners into useScaledCanvas

jeryj
authored and
ajlende
committed
Combine into one useEffect

jeryj
authored and
ajlende
committed
Add useEffect cleanup

jeryj
authored and
ajlende
committed
Fix accidental setting prevScaleRef to scale instead of scaleValue

jeryj
authored and
ajlende
committed
Switch to animations api

jeryj
authored and
ajlende
committed
Reduce rerenders by removing isAnimatingZoomOut state and relying just on the ref

jeryj
authored and
ajlende
committed
Refactor to set scale and frame size on transition end

jeryj
authored and
ajlende
committed
Add reverse animation if zoom state is toggled quickly

jeryj
authored and
ajlende
committed
Refactor step 1 of reverse animation with transitionTo and transitionFrom refs

jeryj
authored and
ajlende
committed
Finish refactor of transitionTo/From refs

jeryj
authored and
ajlende
committed
Refactor: computeScrollTopNext

jeryj
authored and
ajlende
committed
Refactor: getAnimationKeyframes

jeryj
authored and
ajlende
committed
Add missing dependency

jeryj
authored and
ajlende
committed
Refactor: create startZoomOutAnimation and rename scrollTopNext to transitionTo.scrollTop

jeryj
authored and
ajlende
committed
Remove unneeded variables

jeryj
authored and
ajlende
committed
Move CSS back to original location, as it no longer needs to be moved

jeryj
authored and
ajlende
committed
Add comments

jeryj
authored and
ajlende
committed
Fix eslint error
ajlende
committed
Move scrollHeight to animateFrom state
ajlende
committed
Update JSDoc
ajlende
committed

Commits on Nov 26, 2024