test: remove timeout

thenick775 · Dec 19, 2024 · 5794aeb · 5794aeb
1 parent 36170e6
commit 5794aeb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 39 deletions.
diff --git 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,7 +329,7 @@ export const ControlPanel = () => {
 
   const refSetLayout = useCallback(
     (node: Rnd | null) => {
-      if (!layouts?.controlPanel?.initialBounds && node)
+      if (!hasSetLayout && node)
         setLayout('controlPanel', {
           initialBounds: node.resizableElement.current?.getBoundingClientRect()
         });

diff --git 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,7 +78,7 @@ export const Screen = () => {
         node?.resizableElement?.current?.style?.removeProperty('height');
       }
 
-      if (!layouts?.screen?.initialBounds && node)
+      if (!hasSetLayout && node)
         setLayout('screen', {
           initialBounds: node.resizableElement.current?.getBoundingClientRect()
         });
@@ -87,51 +89,37 @@ export const Screen = () => {
   );
 
   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;
+  const height = currentDimensions?.height;
+  const position =
+    layouts?.screen?.position ??
+    (isMobileLandscape
+      ? {
+          x: Math.floor(
+            document.documentElement.clientWidth / 2 - (width ?? 0) / 2
+          ),
+          y: Math.floor(
+            document.documentElement.clientHeight / 2 - (height ?? 0) / 2
+          )
+        }
+      : layouts?.screen?.position ?? {
+          x: screenWrapperXStart,
+          y: screenWrapperYStart
+        });
   const size = layouts?.screen?.size ?? defaultSize;
 
   return (