fix: allow resizing better in preview (#2585)

Author: Kitenite

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

@@ -10,9 +10,8 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
 import { RightClickMenu } from './right-click';
 
-export const GestureScreen = observer(({ frame }: { frame: WebFrame }) => {
+export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame, isResizing: boolean }) => {
     const editorEngine = useEditorEngine();
-    const isResizing = false;
 
     const getFrameData: () => FrameData | undefined = useCallback(() => {
         return editorEngine.frames.get(frame.id);

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 { useRef, useState } from 'react';
 import { GestureScreen } from './gesture';
 import { ResizeHandles } from './resize-handles';
 import { RightClickMenu } from './right-click';
@@ -9,6 +9,8 @@ import { WebFrameComponent, type WebFrameView } from './web-frame';
 
 export const FrameView = observer(({ frame }: { frame: Frame }) => {
     const webFrameRef = useRef<WebFrameView>(null);
+    const [isResizing, setIsResizing] = useState(false);
+
     return (
         <div
             className="flex flex-col fixed"
@@ -18,11 +20,11 @@ export const FrameView = observer(({ frame }: { frame: Frame }) => {
                 <TopBar frame={frame as WebFrame} />
             </RightClickMenu>
             <div className="relative">
-                <ResizeHandles frame={frame} />
+                <ResizeHandles frame={frame} setIsResizing={setIsResizing} />
                 {frame.type === FrameType.WEB && (
                     <WebFrameComponent frame={frame as WebFrame} ref={webFrameRef} />
                 )}
-                <GestureScreen frame={frame as WebFrame} />
+                <GestureScreen frame={frame as WebFrame} isResizing={isResizing} />
             </div>
         </div>
     );

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

@@ -10,7 +10,8 @@ enum HandleType {
     Bottom = 'bottom',
 }
 
-export const ResizeHandles = observer(({ frame }: { frame: Frame }) => {
+export const ResizeHandles = observer((
+    { frame, setIsResizing }: { frame: Frame, setIsResizing: (isResizing: boolean) => void }) => {
     const editorEngine = useEditorEngine();
     // TODO implement aspect ratio lock
     const aspectRatioLocked = false;
@@ -19,6 +20,7 @@ export const ResizeHandles = observer(({ frame }: { frame: Frame }) => {
     const startResize = (e: MouseEvent, types: HandleType[]) => {
         e.preventDefault();
         e.stopPropagation();
+        setIsResizing(true);
 
         const startX = e.clientX;
         const startY = e.clientY;
@@ -70,7 +72,7 @@ export const ResizeHandles = observer(({ frame }: { frame: Frame }) => {
         const stopResize = (e: MouseEvent) => {
             e.preventDefault();
             e.stopPropagation();
-
+            setIsResizing(false);
             window.removeEventListener('mousemove', resize as unknown as EventListener);
             window.removeEventListener('mouseup', stopResize as unknown as EventListener);
         };