diff --git a/gbajs3/src/components/screen/screen.tsx b/gbajs3/src/components/screen/screen.tsx index d8dfe61d..d65f2f3c 100644 --- a/gbajs3/src/components/screen/screen.tsx +++ b/gbajs3/src/components/screen/screen.tsx @@ -64,7 +64,7 @@ export const Screen = () => { const { setCanvas } = useEmulatorContext(); const { areItemsDraggable } = useDragContext(); const { areItemsResizable } = useResizeContext(); - const { layouts, setLayout, hasSetLayout } = useLayoutContext(); + const { layouts, setLayout, hasSetLayout, clearLayouts } = useLayoutContext(); const screenWrapperXStart = isLargerThanPhone ? NavigationMenuWidth + 10 : 0; const screenWrapperYStart = isLargerThanPhone && !isMobileLandscape ? 15 : 0; const rndRef = useRef(); @@ -89,19 +89,29 @@ export const Screen = () => { useLayoutEffect(() => { if (layouts?.screen?.position || layouts?.screen?.size) return; - const x = Math.floor( - window.innerWidth / 2 - (layouts?.screen?.initialBounds?.width ?? 0) / 2 - ); - const y = Math.floor( - window.innerHeight / 2 - (layouts?.screen?.initialBounds?.height ?? 0) / 2 - ); - - if (isMobileLandscape) rndRef?.current?.updatePosition({ x, y }); - - setLayout('screen', { - initialBounds: - rndRef.current?.resizableElement?.current?.getBoundingClientRect() - }); + const timeout = setTimeout(() => { + const currentDimensions = + rndRef?.current?.resizableElement?.current?.getBoundingClientRect(); + const width = currentDimensions?.width; + const height = currentDimensions?.height; + + const x = Math.floor( + document.documentElement.clientWidth / 2 - (width ?? 0) / 2 + ); + const y = Math.floor( + document.documentElement.clientHeight / 2 - (height ?? 0) / 2 + ); + + if (isMobileLandscape) rndRef?.current?.updatePosition({ x, y }); + + clearLayouts(); + setLayout('screen', { + initialBounds: + rndRef.current?.resizableElement?.current?.getBoundingClientRect() + }); + }, 100); + + return () => clearTimeout(timeout); }, [ isMobileLandscape, layouts?.screen?.initialBounds?.width,