From e3fca3af703f41700d0241e387bdc4a0ab7515d5 Mon Sep 17 00:00:00 2001
From: Sah!l <97158384+sahil-1729@users.noreply.github.com>
Date: Thu, 21 Nov 2024 08:05:14 +0530
Subject: [PATCH] Feat : allow window size change in interact mode (#790)

---
 apps/studio/src/routes/editor/WebviewArea/Frame.tsx |   8 +++++++-
 .../src/routes/editor/WebviewArea/GestureScreen.tsx |   5 +++--
 .../src/routes/editor/WebviewArea/ResizeHandles.tsx |   8 +++++++-
 bun.lockb                                           | Bin
 4 files changed, 17 insertions(+), 4 deletions(-)
 mode change 100755 => 100644 bun.lockb

diff --git a/apps/studio/src/routes/editor/WebviewArea/Frame.tsx b/apps/studio/src/routes/editor/WebviewArea/Frame.tsx
index 6cade710f..2d5b04de9 100644
--- 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
index 5a3c15da1..a08ccda2a 100644
--- 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
index c5688d076..077e98b16 100644
--- 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
old mode 100755
new mode 100644