test: logging

gbajs3/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/img/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no"
     />
     <meta
       name="description"

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<Rnd | null>();
@@ -89,15 +89,31 @@ export const Screen = () => {
   useLayoutEffect(() => {
     if (layouts?.screen?.position || layouts?.screen?.size) return;
 
+    console.log(
+      'window/screen',
+      window.innerWidth,
+      window.innerHeight,
+      screen.width,
+      screen.height,
+      document.documentElement.clientWidth,
+      document.documentElement.clientHeight
+    );
+
+    // const width = isMobileLandscape ? screen.height : screen.width;
+    // const height = isMobileLandscape ? screen.width : screen.height;
+
     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
     );
 
+    console.log('x/y/isMobileLandscape', x, y, isMobileLandscape);
+
     if (isMobileLandscape) rndRef?.current?.updatePosition({ x, y });
 
+    clearLayouts();
     setLayout('screen', {
       initialBounds:
         rndRef.current?.resizableElement?.current?.getBoundingClientRect()