|
2 | 2 | * WordPress dependencies |
3 | 3 | */ |
4 | 4 | import { useEffect, useRef, useCallback } from '@wordpress/element'; |
5 | | -import { |
6 | | - usePrevious, |
7 | | - useReducedMotion, |
8 | | - useResizeObserver, |
9 | | -} from '@wordpress/compose'; |
| 5 | +import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; |
10 | 6 |
|
11 | 7 | /** |
12 | 8 | * @typedef {Object} TransitionState |
@@ -284,28 +280,35 @@ export function useScaleCanvas( { |
284 | 280 | transitionFromRef.current = transitionToRef.current; |
285 | 281 | }, [ iframeDocument ] ); |
286 | 282 |
|
287 | | - const previousIsZoomedOut = usePrevious( isZoomedOut ); |
| 283 | + const previousIsZoomedOut = useRef( false ); |
| 284 | + |
288 | 285 | /** |
289 | 286 | * Runs when zoom out mode is toggled, and sets the startAnimation flag |
290 | 287 | * so the animation will start when the next useEffect runs. We _only_ |
291 | 288 | * want to animate when the zoom out mode is toggled, not when the scale |
292 | 289 | * changes due to the container resizing. |
293 | 290 | */ |
294 | 291 | useEffect( () => { |
295 | | - if ( ! iframeDocument || previousIsZoomedOut === isZoomedOut ) { |
296 | | - return; |
297 | | - } |
| 292 | + const trigger = |
| 293 | + iframeDocument && previousIsZoomedOut.current !== isZoomedOut; |
298 | 294 |
|
299 | | - if ( isZoomedOut ) { |
300 | | - iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); |
| 295 | + previousIsZoomedOut.current = isZoomedOut; |
| 296 | + |
| 297 | + if ( ! trigger ) { |
| 298 | + return; |
301 | 299 | } |
302 | 300 |
|
303 | 301 | startAnimationRef.current = true; |
304 | 302 |
|
| 303 | + if ( ! isZoomedOut ) { |
| 304 | + return; |
| 305 | + } |
| 306 | + |
| 307 | + iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); |
305 | 308 | return () => { |
306 | 309 | iframeDocument.documentElement.classList.remove( 'is-zoomed-out' ); |
307 | 310 | }; |
308 | | - }, [ iframeDocument, isZoomedOut, previousIsZoomedOut ] ); |
| 311 | + }, [ iframeDocument, isZoomedOut ] ); |
309 | 312 |
|
310 | 313 | /** |
311 | 314 | * This handles: |
|
0 commit comments