From 93e151010280db4d8422c1a3bb2a80cb60e7c5a2 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 8 Apr 2025 17:16:08 +0200
Subject: [PATCH] Add touch interaction

---
 src/lib/layout/shellStudio.svelte                  | 12 +++++++++---
 .../project-[project]/studio/+page.svelte          | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte
index 432ec1497..23d7a191c 100644
--- a/src/lib/layout/shellStudio.svelte
+++ b/src/lib/layout/shellStudio.svelte
@@ -42,7 +42,7 @@
     });
 
     const showChat = writable(false);
-    
+
     $: if (page.url.pathname.endsWith('studio')) {
         showChat.set(true);
     }
@@ -58,6 +58,8 @@
         isResizing = true;
         window.addEventListener('mousemove', resize);
         window.addEventListener('mouseup', stopResize);
+        window.addEventListener('touchmove', resize);
+        window.addEventListener('touchend', stopResize);
         document.body.style.userSelect = 'none';
         document.getElementById('preview-iframe').style.pointerEvents = 'none';
     }
@@ -66,7 +68,8 @@
         if (!isResizing) return;
 
         if (resizer) {
-            resizerLeftPosition = page.data?.subNavigation ? event.clientX - 280 : event.clientX;
+            const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+            resizerLeftPosition = page.data?.subNavigation ? clientX - 280 : clientX;
             const maxSize = page.data?.subNavigation
                 ? window.innerWidth - 660
                 : window.innerWidth - 460;
@@ -85,6 +88,8 @@
         isResizing = false;
         window.removeEventListener('mousemove', resize);
         window.removeEventListener('mouseup', stopResize);
+        window.removeEventListener('touchmove', resize);
+        window.removeEventListener('touchend', stopResize);
         document.body.style.userSelect = '';
         document.getElementById('preview-iframe').style.pointerEvents = '';
     }
@@ -142,7 +147,8 @@
                                 class="resizer"
                                 style:left={`${resizerLeftPosition}px`}
                                 bind:this={resizer}
-                                onmousedown={startResize}>
+                                onmousedown={startResize}
+                                ontouchmove={startResize}>
                             </div>
                         {/if}
                     {/if}
diff --git a/src/routes/(console)/project-[project]/studio/+page.svelte b/src/routes/(console)/project-[project]/studio/+page.svelte
index b47cd802c..a236eb202 100644
--- a/src/routes/(console)/project-[project]/studio/+page.svelte
+++ b/src/routes/(console)/project-[project]/studio/+page.svelte
@@ -42,6 +42,8 @@
         isResizing = true;
         window.addEventListener('mousemove', resize);
         window.addEventListener('mouseup', stopResize);
+        window.addEventListener('touchmove', resize);
+        window.addEventListener('touchend', stopResize);
         document.body.style.userSelect = 'none';
         document.getElementById('preview-iframe').style.pointerEvents = 'none';
     }
@@ -49,9 +51,11 @@
     function resize(event) {
         if (!isResizing) return;
 
+        const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+
         terminalHeight =
             asideRef.getBoundingClientRect().y -
-            event.clientY +
+            clientY +
             asideRef.getBoundingClientRect().height -
             32;
     }
@@ -60,6 +64,8 @@
         isResizing = false;
         window.removeEventListener('mousemove', resize);
         window.removeEventListener('mouseup', stopResize);
+        window.removeEventListener('touchmove', resize);
+        window.removeEventListener('touchend', stopResize);
         document.body.style.userSelect = '';
         document.getElementById('preview-iframe').style.pointerEvents = '';
     }
@@ -93,7 +99,11 @@
         <iframe src={frameUrl} id="preview-iframe"></iframe>
     </div>
     <div></div>
-    {#if terminalOpen}<div class="terminal-slider" on:mousedown={startResize}></div>
+    {#if terminalOpen}<div
+            class="terminal-slider"
+            on:mousedown={startResize}
+            on:touchmove={startResize}>
+        </div>
     {/if}
     <aside bind:this={asideRef}>
         <details bind:open={terminalOpen}>