From fa1ef36f78a92e28ad4fa58a3fe98f8964d96b8a Mon Sep 17 00:00:00 2001
From: thenick775 <nvancisedev@gmail.com>
Date: Wed, 18 Dec 2024 17:55:39 -0800
Subject: [PATCH] test: remove timeout

---
 .../src/components/controls/control-panel.tsx |  6 +-
 gbajs3/src/components/screen/screen.spec.tsx  |  4 +-
 gbajs3/src/components/screen/screen.tsx       | 60 +++++++------------
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/gbajs3/src/components/controls/control-panel.tsx b/gbajs3/src/components/controls/control-panel.tsx
index e1cb12d5..fc487a96 100644
--- a/gbajs3/src/components/controls/control-panel.tsx
+++ b/gbajs3/src/components/controls/control-panel.tsx
@@ -306,7 +306,7 @@ export const ControlPanel = () => {
   const { isRunning } = useRunningContext();
   const { areItemsDraggable, setAreItemsDraggable } = useDragContext();
   const { areItemsResizable, setAreItemsResizable } = useResizeContext();
-  const { layouts, setLayout } = useLayoutContext();
+  const { layouts, setLayout, hasSetLayout } = useLayoutContext();
   const theme = useTheme();
   const isLargerThanPhone = useMediaQuery(theme.isLargerThanPhone);
   const isMobileLandscape = useMediaQuery(theme.isMobileLandscape);
@@ -329,12 +329,12 @@ export const ControlPanel = () => {
 
   const refSetLayout = useCallback(
     (node: Rnd | null) => {
-      if (!layouts?.controlPanel?.initialBounds && node)
+      if (!hasSetLayout && node)
         setLayout('controlPanel', {
           initialBounds: node.resizableElement.current?.getBoundingClientRect()
         });
     },
-    [setLayout, layouts]
+    [setLayout, hasSetLayout]
   );
 
   const canvasBounds = layouts?.screen?.initialBounds;
diff --git a/gbajs3/src/components/screen/screen.spec.tsx b/gbajs3/src/components/screen/screen.spec.tsx
index 1c2434ec..65074663 100644
--- a/gbajs3/src/components/screen/screen.spec.tsx
+++ b/gbajs3/src/components/screen/screen.spec.tsx
@@ -110,7 +110,7 @@ describe('<Screen />', () => {
     expect(screenWrapper).toMatchSnapshot();
   });
 
-  it.skip('sets layout on drag', async () => {
+  it('sets layout on drag', async () => {
     const setLayoutSpy = vi.fn();
     const { useLayoutContext: originalLayout, useDragContext: originalDrag } =
       await vi.importActual<typeof contextHooks>('../../hooks/context.tsx');
@@ -143,7 +143,7 @@ describe('<Screen />', () => {
     });
   });
 
-  it.skip('sets layout on resize', async () => {
+  it('sets layout on resize', async () => {
     const setLayoutSpy = vi.fn();
     const {
       useLayoutContext: originalLayout,
diff --git a/gbajs3/src/components/screen/screen.tsx b/gbajs3/src/components/screen/screen.tsx
index d65f2f3c..b723fe7d 100644
--- a/gbajs3/src/components/screen/screen.tsx
+++ b/gbajs3/src/components/screen/screen.tsx
@@ -1,4 +1,5 @@
 import { useMediaQuery } from '@mui/material';
+import { useOrientation } from '@uidotdev/usehooks';
 import { useCallback, useLayoutEffect, useRef } from 'react';
 import { Rnd, type Props as RndProps } from 'react-rnd';
 import { styled, useTheme } from 'styled-components';
@@ -64,10 +65,11 @@ export const Screen = () => {
   const { setCanvas } = useEmulatorContext();
   const { areItemsDraggable } = useDragContext();
   const { areItemsResizable } = useResizeContext();
-  const { layouts, setLayout, hasSetLayout, clearLayouts } = useLayoutContext();
+  const { layouts, setLayout, hasSetLayout } = useLayoutContext();
   const screenWrapperXStart = isLargerThanPhone ? NavigationMenuWidth + 10 : 0;
   const screenWrapperYStart = isLargerThanPhone && !isMobileLandscape ? 15 : 0;
   const rndRef = useRef<Rnd | null>();
+  const orientation = useOrientation();
 
   const refUpdateDefaultPosition = useCallback(
     (node: Rnd | null) => {
@@ -76,62 +78,44 @@ export const Screen = () => {
         node?.resizableElement?.current?.style?.removeProperty('height');
       }
 
-      if (!layouts?.screen?.initialBounds && node)
+      if (!hasSetLayout && node)
         setLayout('screen', {
           initialBounds: node.resizableElement.current?.getBoundingClientRect()
         });
 
       if (!rndRef.current) rndRef.current = node;
     },
-    [hasSetLayout, layouts, setLayout]
+    [hasSetLayout, setLayout]
   );
 
   useLayoutEffect(() => {
-    if (layouts?.screen?.position || layouts?.screen?.size) return;
-
-    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();
+    if (!hasSetLayout && [0, 90, 270].includes(orientation.angle))
       setLayout('screen', {
         initialBounds:
           rndRef.current?.resizableElement?.current?.getBoundingClientRect()
       });
-    }, 100);
-
-    return () => clearTimeout(timeout);
-  }, [
-    isMobileLandscape,
-    layouts?.screen?.initialBounds?.width,
-    layouts?.screen?.initialBounds?.height,
-    layouts?.screen?.position,
-    layouts?.screen?.size,
-    setLayout
-  ]);
+  }, [hasSetLayout, isMobileLandscape, setLayout, orientation.angle]);
 
   const refSetCanvas = useCallback(
     (node: HTMLCanvasElement | null) => setCanvas(node),
     [setCanvas]
   );
 
-  const position = isMobileLandscape
-    ? undefined
-    : layouts?.screen?.position ?? {
-        x: screenWrapperXStart,
-        y: screenWrapperYStart
-      };
+  const currentDimensions =
+    rndRef?.current?.resizableElement?.current?.getBoundingClientRect();
+  const width = currentDimensions?.width ?? 0;
+  const height = currentDimensions?.height ?? 0;
+  const position =
+    layouts?.screen?.position ??
+    (isMobileLandscape
+      ? {
+          x: Math.floor(document.documentElement.clientWidth / 2 - width / 2),
+          y: Math.floor(document.documentElement.clientHeight / 2 - height / 2)
+        }
+      : {
+          x: screenWrapperXStart,
+          y: screenWrapperYStart
+        });
   const size = layouts?.screen?.size ?? defaultSize;
 
   return (