From 585c9a8f6227dd1e9f5fbe47822fd5fba2571534 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 6 Feb 2025 16:36:39 +0000
Subject: [PATCH] Support scrolling while dragging components

---
 .../src/components/preview/GridDNDHandler.svelte   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index aa5187dec1..e5297e9208 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -53,6 +53,7 @@
   ghost.src =
     "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
 
+  let scrollElement: HTMLElement
   let dragInfo: GridDragInfo | undefined
   let styles = memo<Record<string, number> | undefined>()
 
@@ -75,6 +76,8 @@
   // Reset when not dragging new components
   $: !$dndIsDragging && stopDragging()
 
+  const scrollOffset = () => scrollElement?.scrollTop || 0
+
   const applyStyles = async (
     instance: any,
     styles: Record<string, number> | undefined
@@ -113,7 +116,7 @@
     }
     const diffX = mouseX - startX
     let deltaX = Math.round(diffX / colSize)
-    const diffY = mouseY - startY
+    const diffY = mouseY - startY + scrollOffset()
     let deltaY = Math.round(diffY / GridRowHeight)
     if (mode === GridDragMode.Move) {
       deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
@@ -186,7 +189,7 @@
       mode: GridDragMode.Move,
       grid: {
         startX: bounds.left + bounds.width / 2,
-        startY: bounds.top + bounds.height / 2,
+        startY: bounds.top + bounds.height / 2 + scrollOffset(),
         rowStart: parseInt(styles.gridRowStart),
         rowEnd: parseInt(styles.gridRowEnd),
         colStart: parseInt(styles.gridColumnStart),
@@ -249,7 +252,7 @@
       side,
       grid: {
         startX: e.clientX,
-        startY: e.clientY,
+        startY: e.clientY + scrollOffset(),
         rowStart: parseInt(styles.gridRowStart),
         rowEnd: parseInt(styles.gridRowEnd),
         colStart: parseInt(styles.gridColumnStart),
@@ -295,12 +298,17 @@
   }
 
   onMount(() => {
+    scrollElement = document.getElementsByClassName(
+      "screen-wrapper"
+    )[0] as HTMLElement
     document.addEventListener("dragstart", onDragStart, false)
     document.addEventListener("dragover", onDragOver, false)
+    document.addEventListener("scroll", processEvent)
   })
 
   onDestroy(() => {
     document.removeEventListener("dragstart", onDragStart, false)
     document.removeEventListener("dragover", onDragOver, false)
+    document.removeEventListener("scroll", processEvent)
   })
 </script>