From fb0fab29433b3d87ba44f73843e032f3f4011ee0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 18 Apr 2022 12:42:38 +0100 Subject: [PATCH] Fix animation --- .../src/components/block-list/style.scss | 2 +- .../block-list/use-block-props/index.js | 5 ++- .../block-tools/selected-block-popover.js | 6 +-- .../components/use-moving-animation/index.js | 40 +++++++------------ packages/dom/src/dom/get-scroll-container.js | 5 +++ 5 files changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index e4fb672549ab0..2c820d9e31c0f 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -416,7 +416,7 @@ .is-root-container.is-exploded-mode > .wp-block { transform: scale(0.8); - transform-origin: top center; + transform-origin: center center; position: relative; overflow: hidden; diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index a6187c74c9cd0..a08a2a5386c81 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -75,6 +75,7 @@ export function useBlockProps( adjustScrolling, enableAnimation, isExplodedMode, + isRootBlock, } = useSelect( ( select ) => { const { @@ -88,6 +89,7 @@ export function useBlockProps( isAncestorMultiSelected, isFirstMultiSelectedBlock, __unstableGetEditorMode, + getBlockRootClientId, } = select( blockEditorStore ); const isSelected = isBlockSelected( clientId ); const isPartOfMultiSelection = @@ -109,6 +111,7 @@ export function useBlockProps( ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, isExplodedMode: __unstableGetEditorMode() === 'exploded', + isRootBlock: ! getBlockRootClientId( clientId ), }; }, [ clientId ] @@ -131,7 +134,7 @@ export function useBlockProps( adjustScrolling, enableAnimation, triggerAnimationOnChange: index, - scale: isExplodedMode ? 0.8 : 1, + scale: isExplodedMode && isRootBlock ? 0.8 : 1, } ), useDisabled( { isDisabled: ! __unstableIsDisabled } ), ] ); diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index d3e60c1b1195e..e2fd286a9b3e2 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -79,18 +79,18 @@ function SelectedBlockPopover( { const { stopTyping } = useDispatch( blockEditorStore ); const showEmptyBlockSideInserter = - ! isTyping && ! editorMode === 'visual' && isEmptyDefaultBlock; + ! isTyping && ! editorMode === 'edit' && isEmptyDefaultBlock; const shouldShowBreadcrumb = editorMode === 'navigation' || editorMode === 'exploded'; const shouldShowContextualToolbar = - editorMode === 'visual' && + editorMode === 'edit' && ! hasFixedToolbar && isLargeViewport && ! isMultiSelecting && ! showEmptyBlockSideInserter && ! isTyping; const canFocusHiddenToolbar = - editorMode === 'visual' && + editorMode === 'edit' && ! shouldShowContextualToolbar && ! hasFixedToolbar && ! isEmptyDefaultBlock; diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js index fb01159cff702..503a83aeafb67 100644 --- a/packages/block-editor/src/components/use-moving-animation/index.js +++ b/packages/block-editor/src/components/use-moving-animation/index.js @@ -63,7 +63,7 @@ function useMovingAnimation( { 0 ); const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 ); - const [ transform, setTransform ] = useState( { x: 0, y: 0 } ); + const [ transform, setTransform ] = useState( { x: 0, y: 0, scale: 1 } ); const previous = useMemo( () => ( ref.current ? getAbsolutePosition( ref.current ) : null ), [ triggerAnimationOnChange ] @@ -111,56 +111,44 @@ function useMovingAnimation( { return; } - ref.current.style.transform = ''; + ref.current.style.transform = `scale( ${ scale } )`; const destination = getAbsolutePosition( ref.current ); triggerAnimation(); setTransform( { x: Math.round( previous.left - destination.left ), y: Math.round( previous.top - destination.top ), + scale, } ); }, [ triggerAnimationOnChange ] ); - // Only called when either the x or y value changes. - function onFrameChange( { x, y } ) { + function onChange( { value } ) { if ( ! ref.current ) { return; } - - const isMoving = x === 0 && y === 0; - ref.current.style.transformOrigin = 'center'; - ref.current.style.transform = isMoving - ? `scale(${ scale })` - : `translate3d(${ x }px,${ y }px,0) scale(${ scale })`; - ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1'; - - preserveScrollPosition(); - } - - // Called for every frame computed by useSpring. - function onChange( { value } ) { - let { x, y } = value; + let { x, y, scale: currentScale } = value; x = Math.round( x ); y = Math.round( y ); + const finishedMoving = x === 0 && y === 0 && currentScale === scale; + ref.current.style.transformOrigin = 'center center'; + ref.current.style.transform = finishedMoving + ? `scale( ${ scale } )` + : `translate3d(${ x }px,${ y }px,0) scale(${ currentScale })`; + ref.current.style.zIndex = isSelected ? '1' : ''; - if ( x !== onChange.x || y !== onChange.y ) { - onFrameChange( { x, y } ); - onChange.x = x; - onChange.y = y; - } + preserveScrollPosition(); } - onChange.x = 0; - onChange.y = 0; - useSpring( { from: { x: transform.x, y: transform.y, + scale: transform.scale, }, to: { x: 0, y: 0, + scale, }, reset: triggeredAnimation !== finishedAnimation, config: { mass: 5, tension: 2000, friction: 200 }, diff --git a/packages/dom/src/dom/get-scroll-container.js b/packages/dom/src/dom/get-scroll-container.js index 276b080ab9253..3646572503e2f 100644 --- a/packages/dom/src/dom/get-scroll-container.js +++ b/packages/dom/src/dom/get-scroll-container.js @@ -19,11 +19,16 @@ export default function getScrollContainer( node ) { if ( node.scrollHeight > node.clientHeight ) { // ...except when overflow is defined to be hidden or visible const { overflowY } = getComputedStyle( node ); + if ( /(auto|scroll)/.test( overflowY ) ) { return node; } } + if ( node.ownerDocument === node.parentNode ) { + return node; + } + // Continue traversing. return getScrollContainer( /** @type {Element} */ ( node.parentNode ) ); }