From 2d420c4337ea187c480fec9153733174f7b8064e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 18 Jul 2023 00:16:49 +0900 Subject: [PATCH 1/2] ResizableFrame: Account for window resizing --- .../edit-site/src/components/layout/index.js | 12 ++++++- .../src/components/resizable-frame/index.js | 35 ++++++------------- 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index cd7890649c60af..6cb265fafdff9e 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -18,7 +18,7 @@ import { useResizeObserver, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { useState, useRef } from '@wordpress/element'; +import { useState, useRef, useMemo } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { @@ -122,6 +122,13 @@ export default function Layout() { const [ isResizing ] = useState( false ); const isEditorLoading = useIsSiteEditorLoading(); + const resizableFrameDefaultSize = useMemo( () => { + return { + width: canvasSize.width - 24 /* $canvas-padding */, + height: canvasSize.height, + }; + }, [ canvasSize.width, canvasSize.height ] ); + // This determines which animation variant should apply to the header. // There is also a `isDistractionFreeHovering` state that gets priority // when hovering the `edit-site-layout__header-container` in distraction @@ -331,6 +338,9 @@ export default function Layout() { ! isEditorLoading } isFullWidth={ isEditing } + defaultSize={ + resizableFrameDefaultSize + } oversizedClassName="edit-site-layout__resizable-frame-oversized" innerContentStyle={ { background: diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index 1bb9315a07e38a..589495aafe1603 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, useRef, useEffect } from '@wordpress/element'; +import { useState, useRef } from '@wordpress/element'; import { ResizableBox, Tooltip, @@ -80,6 +80,8 @@ function ResizableFrame( { isFullWidth, isReady, children, + /** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */ + defaultSize, oversizedClassName, innerContentStyle, } ) { @@ -95,22 +97,13 @@ function ResizableFrame( { [] ); const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const initialAspectRatioRef = useRef( null ); - // The width of the resizable frame on initial render. - const initialComputedWidthRef = useRef( null ); const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 }; const frameRef = useRef( null ); const resizableHandleHelpId = useInstanceId( ResizableFrame, 'edit-site-resizable-frame-handle-help' ); - - // Remember frame dimensions on initial render. - useEffect( () => { - const { offsetWidth, offsetHeight } = frameRef.current.resizable; - initialComputedWidthRef.current = offsetWidth; - initialAspectRatioRef.current = offsetWidth / offsetHeight; - }, [] ); + const defaultAspectRatio = defaultSize.width / defaultSize.height; const handleResizeStart = ( _event, _direction, ref ) => { // Remember the starting width so we don't have to get `ref.offsetWidth` on @@ -126,7 +119,7 @@ function ResizableFrame( { const maxDoubledDelta = delta.width < 0 // is shrinking ? deltaAbs - : ( initialComputedWidthRef.current - startingWidth ) / 2; + : ( defaultSize.width - startingWidth ) / 2; const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta ); const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs; const singleSegment = 1 - doubleSegment; @@ -135,17 +128,14 @@ function ResizableFrame( { const updatedWidth = startingWidth + delta.width; - setIsOversized( updatedWidth > initialComputedWidthRef.current ); + setIsOversized( updatedWidth > defaultSize.width ); // Width will be controlled by the library (via `resizeRatio`), // so we only need to update the height. setFrameSize( { height: isOversized ? '100%' - : calculateNewHeight( - updatedWidth, - initialAspectRatioRef.current - ), + : calculateNewHeight( updatedWidth, defaultAspectRatio ), } ); }; @@ -186,15 +176,12 @@ function ResizableFrame( { FRAME_MIN_WIDTH, frameRef.current.resizable.offsetWidth + delta ), - initialComputedWidthRef.current + defaultSize.width ); setFrameSize( { width: newWidth, - height: calculateNewHeight( - newWidth, - initialAspectRatioRef.current - ), + height: calculateNewHeight( newWidth, defaultAspectRatio ), } ); }; @@ -291,9 +278,7 @@ function ResizableFrame( { undefined } aria-valuemin={ FRAME_MIN_WIDTH } - aria-valuemax={ - initialComputedWidthRef.current - } + aria-valuemax={ defaultSize.width } onKeyDown={ handleResizableHandleKeyDown } initial="hidden" exit="hidden" From 916213e2875d41826d62a943a5a8dd4eda2d47c1 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 18 Jul 2023 00:50:35 +0900 Subject: [PATCH 2/2] Don't memoize --- .../edit-site/src/components/layout/index.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 6cb265fafdff9e..18afbb1aab5eb8 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -18,7 +18,7 @@ import { useResizeObserver, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { useState, useRef, useMemo } from '@wordpress/element'; +import { useState, useRef } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { @@ -122,13 +122,6 @@ export default function Layout() { const [ isResizing ] = useState( false ); const isEditorLoading = useIsSiteEditorLoading(); - const resizableFrameDefaultSize = useMemo( () => { - return { - width: canvasSize.width - 24 /* $canvas-padding */, - height: canvasSize.height, - }; - }, [ canvasSize.width, canvasSize.height ] ); - // This determines which animation variant should apply to the header. // There is also a `isDistractionFreeHovering` state that gets priority // when hovering the `edit-site-layout__header-container` in distraction @@ -338,9 +331,12 @@ export default function Layout() { ! isEditorLoading } isFullWidth={ isEditing } - defaultSize={ - resizableFrameDefaultSize - } + defaultSize={ { + width: + canvasSize.width - + 24 /* $canvas-padding */, + height: canvasSize.height, + } } oversizedClassName="edit-site-layout__resizable-frame-oversized" innerContentStyle={ { background: