From 0a1070a4f260166ff6cc1be578eb2bd69f51be53 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Sep 2023 16:10:16 +0100
Subject: [PATCH] Update grid to support dragging to scroll via touch events

---
 .../components/grid/layout/GridBody.svelte    |  2 +-
 .../grid/layout/GridScrollWrapper.svelte      | 54 ++++++++++++++++---
 .../src/components/grid/layout/NewRow.svelte  |  2 +-
 .../grid/layout/StickyColumn.svelte           |  2 +-
 4 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index bbd36a0e6d..762985a4db 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div bind:this={body} class="grid-body">
-  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
+  <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
       <GridRow
         {row}
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index 7599135c63..05bd261721 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -17,7 +17,11 @@
 
   export let scrollVertically = false
   export let scrollHorizontally = false
-  export let wheelInteractive = false
+  export let attachHandlers = false
+
+  // Used for tracking touch events
+  let initialTouchX
+  let initialTouchY
 
   $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
 
@@ -27,17 +31,47 @@
     return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
   }
 
-  // Handles a wheel even and updates the scroll offsets
+  // Handles a mouse wheel event and updates scroll state
   const handleWheel = e => {
     e.preventDefault()
-    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+    updateScroll(e.deltaX, e.deltaY, e.clientY)
 
     // If a context menu was visible, hide it
     if ($menu.visible) {
       menu.actions.close()
     }
   }
-  const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
+
+  // Handles touch start events
+  const handleTouchStart = e => {
+    if (!e.touches?.[0]) return
+    initialTouchX = e.touches[0].clientX
+    initialTouchY = e.touches[0].clientY
+  }
+
+  // Handles touch move events and updates scroll state
+  const handleTouchMove = e => {
+    if (!e.touches?.[0]) return
+    e.preventDefault()
+
+    // Compute delta from previous event, and update scroll
+    const deltaX = initialTouchX - e.touches[0].clientX
+    const deltaY = initialTouchY - e.touches[0].clientY
+    updateScroll(deltaX, deltaY)
+
+    // Store position to reference in next event
+    initialTouchX = e.touches[0].clientX
+    initialTouchY = e.touches[0].clientY
+
+    // If a context menu was visible, hide it
+    if ($menu.visible) {
+      menu.actions.close()
+    }
+  }
+
+  // Updates the scroll offset by a certain delta, and ensure scrolling
+  // stays within sensible bounds. Debounced for performance.
+  const updateScroll = domDebounce((deltaX, deltaY, clientY) => {
     const { top, left } = $scroll
 
     // Calculate new scroll top
@@ -55,15 +89,19 @@
     })
 
     // Hover row under cursor
-    const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
-    const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
-    hoveredRowId.set(hoveredRow?._id)
+    if (clientY != null) {
+      const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
+      const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
+      hoveredRowId.set(hoveredRow?._id)
+    }
   })
 </script>
 
 <div
   class="outer"
-  on:wheel={wheelInteractive ? handleWheel : null}
+  on:wheel={attachHandlers ? handleWheel : null}
+  on:touchstart={attachHandlers ? handleTouchStart : null}
+  on:touchmove={attachHandlers ? handleTouchMove : null}
   on:click|self={() => ($focusedCellId = null)}
 >
   <div {style} class="inner">
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 6a926ca02c..7a1aed14ba 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -205,7 +205,7 @@
       {/if}
     </div>
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
-      <GridScrollWrapper scrollHorizontally wheelInteractive>
+      <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
           {#each $renderedColumns as column, columnIdx}
             {@const cellId = `new-${column.name}`}
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index f3af0d9362..01e27932e9 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -64,7 +64,7 @@
   </div>
 
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically wheelInteractive>
+    <GridScrollWrapper scrollVertically attachHandlers>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}