Working frame

Author: Kitenite

apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx renamed to apps/web/src/app/project/[id]/_components/canvas/frame/gesture.tsx

@@ -179,20 +179,15 @@ export const GestureScreen = observer(() => {
     }, [editorEngine.state.editorMode, isResizing]);
 
     const handleMouseOut = () => {
-        setHovered(false);
         editorEngine.elements.clearHoveredElement();
         editorEngine.overlay.state.updateHoverRect(null);
     }
 
-    const setHovered = (hovered: boolean) => {
-        return;
-    }
     return (
         <RightClickMenu>
             <div
                 className={gestureScreenClassName}
                 onClick={handleClick}
-                onMouseOver={() => setHovered(true)}
                 onMouseOut={handleMouseOut}
                 onMouseLeave={handleMouseUp}
                 onMouseMove={throttledMouseMove}

apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx renamed to apps/web/src/app/project/[id]/_components/canvas/frame/index.tsx

@@ -1,8 +1,9 @@
 import { FrameType, type Frame, type WebFrame } from "@onlook/models";
 import { observer } from "mobx-react-lite";
-import { GestureScreen } from '../gesture';
-import { ResizeHandles } from '../resize-handles';
-import { WebFrameComponent } from "./web";
+import { GestureScreen } from './gesture';
+import { ResizeHandles } from './resize-handles';
+import { TopBar } from "./top-bar";
+import { WebFrameComponent } from "./web-frame";
 
 export const FrameView = observer(
     ({
@@ -15,19 +16,8 @@ export const FrameView = observer(
                 className="flex flex-col fixed"
                 style={{ transform: `translate(${frame.position.x}px, ${frame.position.y}px)` }}
             >
-                {/* <BrowserControls
-                    webviewRef={domReady ? webviewRef : null}
-                    webviewSrc={webviewSrc}
-                    setWebviewSrc={setWebviewSrc}
-                    selected={selected}
-                    hovered={hovered}
-                    setHovered={setHovered}
-                    setDarkmode={setDarkmode}
-                    settings={settings}
-                    startMove={startMove}
-                    domState={domState}
-                    webviewSize={webviewSize}
-                /> */}
+                <TopBar frame={frame}>
+                </TopBar>
                 <div className="relative">
                     <ResizeHandles frame={frame} />
                     {frame.type === FrameType.WEB && <WebFrameComponent frame={frame as WebFrame} />}

apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx renamed to apps/web/src/app/project/[id]/_components/canvas/frame/resize-handles.tsx

@@ -0,0 +1,61 @@
+import { useEditorEngine } from '@/components/store';
+import type { Frame } from '@onlook/models';
+import { observer } from 'mobx-react-lite';
+
+export const TopBar = observer(
+    ({
+        frame,
+        children
+    }: {
+        frame: Frame;
+        children?: React.ReactNode;
+    }) => {
+        const editorEngine = useEditorEngine();
+
+        const startMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const startPositionX = frame.position.x;
+            const startPositionY = frame.position.y;
+
+            const handleMove = (e: MouseEvent) => {
+                const scale = editorEngine.canvas.scale;
+                const deltaX = (e.clientX - startX) / scale;
+                const deltaY = (e.clientY - startY) / scale;
+
+                frame.position = {
+                    x: startPositionX + deltaX,
+                    y: startPositionY + deltaY,
+                };
+            };
+
+            const endMove = (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                window.removeEventListener('mousemove', handleMove);
+                window.removeEventListener('mouseup', endMove);
+            };
+
+            window.addEventListener('mousemove', handleMove);
+            window.addEventListener('mouseup', endMove);
+        };
+
+        return (
+            <div
+                className='rounded bg-foreground-primary/10 hover:shadow h-6 m-auto flex flex-row items-center backdrop-blur-sm overflow-hidden relative shadow-sm border-input text-foreground'
+                style={{
+                    transform: `scale(${1 / editorEngine.canvas.scale})`,
+                    width: `${frame.dimension.width * editorEngine.canvas.scale}px`,
+                    marginBottom: `${20 / editorEngine.canvas.scale}px`,
+                }}
+                onMouseDown={startMove}
+            >
+                {children}
+            </div>
+        );
+    },
+);