Fix webframe

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx

@@ -9,15 +9,10 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
 import { RightClickMenu } from './right-click';
 import type { WebFrameView } from './web-frame';
-export const GestureScreen = observer(({ frame, webFrameRef }: { frame: WebFrame, webFrameRef: React.RefObject<WebFrameView | null> }) => {
+
+export const GestureScreen = observer(({ frame, webFrame }: { frame: WebFrame, webFrame: WebFrameView }) => {
     const editorEngine = useEditorEngine();
     const isResizing = false;
-    const webFrame = webFrameRef.current;
-
-    if (!webFrame) {
-        console.log('No web frame found in gesture screen for frame', frame.id);
-        return null;
-    }
 
     const getRelativeMousePosition = (e: React.MouseEvent<HTMLDivElement>): ElementPosition => {
         return getRelativeMousePositionToWebview(e, webFrame);

apps/web/client/src/app/project/[id]/_components/canvas/frame/index.tsx

@@ -1,6 +1,6 @@
 import { FrameType, type Frame, type WebFrame } from "@onlook/models";
 import { observer } from "mobx-react-lite";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GestureScreen } from './gesture';
 import { ResizeHandles } from './resize-handles';
 import { TopBar } from "./top-bar";
@@ -13,6 +13,12 @@ export const FrameView = observer(
         frame: Frame;
     }) => {
         const webFrameRef = useRef<WebFrameView>(null);
+        const [webFrame, setWebFrame] = useState<WebFrameView | null>(null);
+
+        useEffect(() => {
+            setWebFrame(webFrameRef.current);
+        }, [webFrameRef.current]);
+
         return (
             <div
                 className="flex flex-col fixed"
@@ -23,7 +29,7 @@ export const FrameView = observer(
                 <div className="relative">
                     <ResizeHandles frame={frame} />
                     {frame.type === FrameType.WEB && <WebFrameComponent frame={frame as WebFrame} ref={webFrameRef} />}
-                    <GestureScreen frame={frame as WebFrame} webFrameRef={webFrameRef} />
+                    {webFrame && <GestureScreen frame={frame as WebFrame} webFrame={webFrame} />}
                     {/* {domFailed && shouldShowDomFailed && renderNotRunning()} */}
                 </div>