Feat : allow window size change in interact mode (#790)

onlook-dev · Nov 21, 2024 · e3fca3a · e3fca3a
1 parent 48fb3df
commit e3fca3a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/apps/studio/src/routes/editor/WebviewArea/Frame.tsx b/apps/studio/src/routes/editor/WebviewArea/Frame.tsx
@@ -45,6 +45,7 @@ const Frame = observer(
         const [webviewSrc, setWebviewSrc] = useState<string>(settings.url);
         const [webviewPosition, setWebviewPosition] = useState(settings.position);
         const [isCopied, setIsCopied] = useState<boolean>(false);
+        const [isResizing, setIsResizing] = useState<boolean>(false);
 
         const runProjectCommand = getRunProjectCommand(projectManager?.folderPath || '');
         const iconVariants = {
@@ -240,6 +241,7 @@ const Frame = observer(
                         setSelectedPreset={setSelectedPreset}
                         lockedPreset={lockedPreset}
                         setLockedPreset={setLockedPreset}
+                        setIsResizing={setIsResizing}
                     />
                     <webview
                         id={settings.id}
@@ -261,7 +263,11 @@ const Frame = observer(
                             height: webviewSize.height,
                         }}
                     ></webview>
-                    <GestureScreen webviewRef={webviewRef} setHovered={setHovered} />
+                    <GestureScreen
+                        isResizing={isResizing}
+                        webviewRef={webviewRef}
+                        setHovered={setHovered}
+                    />
                     {domFailed && shouldShowDomFailed && (
                         <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-t from-gray-800/40 via-gray-500/40 to-gray-400/40 border-gray-500 border-[0.5px] space-y-6 rounded-xl">
                             <p className="text-active text-title1 text-center">

diff --git a/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx b/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx
@@ -9,9 +9,10 @@ import RightClickMenu from '../RightClickMenu';
 interface GestureScreenProps {
     webviewRef: React.RefObject<Electron.WebviewTag>;
     setHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isResizing: boolean;
 }
 
-const GestureScreen = observer(({ webviewRef, setHovered }: GestureScreenProps) => {
+const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureScreenProps) => {
     const editorEngine = useEditorEngine();
 
     function selectWebview(webview: Electron.WebviewTag) {
@@ -174,7 +175,7 @@ const GestureScreen = observer(({ webviewRef, setHovered }: GestureScreenProps)
             <div
                 className={cn(
                     'absolute inset-0 bg-transparent',
-                    editorEngine.mode === EditorMode.INTERACT ? 'hidden' : 'visible',
+                    editorEngine.mode === EditorMode.INTERACT && !isResizing ? 'hidden' : 'visible',
                     editorEngine.mode === EditorMode.INSERT_DIV && 'cursor-crosshair',
                     editorEngine.mode === EditorMode.INSERT_TEXT && 'cursor-text',
                 )}

diff --git a/apps/studio/src/routes/editor/WebviewArea/ResizeHandles.tsx b/apps/studio/src/routes/editor/WebviewArea/ResizeHandles.tsx
@@ -15,6 +15,7 @@ interface ResizeHandleProps {
     setSelectedPreset: React.Dispatch<React.SetStateAction<SizePreset | null>>;
     lockedPreset: SizePreset | null;
     setLockedPreset: React.Dispatch<React.SetStateAction<SizePreset | null>>;
+    setIsResizing: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 enum HandleType {
@@ -30,6 +31,7 @@ const ResizeHandles = observer(
         setSelectedPreset,
         lockedPreset,
         setLockedPreset,
+        setIsResizing,
     }: ResizeHandleProps) => {
         const editorEngine = useEditorEngine();
         const resizeHandleRef = useRef(null);
@@ -42,6 +44,8 @@ const ResizeHandles = observer(
             e.preventDefault();
             e.stopPropagation();
 
+            setIsResizing(true);
+
             const startX = e.clientX;
             const startY = e.clientY;
             const startWidth = webviewSize.width;
@@ -65,6 +69,8 @@ const ResizeHandles = observer(
                 e.preventDefault();
                 e.stopPropagation();
 
+                setIsResizing(false);
+
                 window.removeEventListener('mousemove', resize);
                 window.removeEventListener('mouseup', stopResize);
             };
@@ -93,7 +99,7 @@ const ResizeHandles = observer(
             <div
                 className={clsx(
                     'absolute inset-0 opacity-10 transition',
-                    editorEngine.mode === EditorMode.INTERACT ? 'hidden' : 'visible',
+                    editorEngine.mode === EditorMode.INTERACT ? 'visible' : 'visible',
                     { 'hover:opacity-60': !lockedPreset },
                 )}
             >

diff --git a/bun.lockb b/bun.lockb