From 2afe040332de143fbcf2600f91396195a8a24140 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 16:36:19 +0100
Subject: [PATCH] Update scrolling to selected component so that it works when
 adding components

---
 .../client/src/components/Component.svelte    | 31 ++++++++++++-------
 .../components/preview/GridDNDHandler.svelte  |  2 +-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8f24f2f330..d25daf7bf9 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import { getContext, setContext, onMount } from "svelte"
+  import { getContext, setContext, onMount, tick } from "svelte"
   import { writable, get } from "svelte/store"
   import {
     enrichProps,
@@ -206,9 +206,10 @@
   }
 
   // Metadata to pass into grid action to apply CSS
+  const insideGrid =
+    parent?._component.endsWith("/container") && parent?.layout === "grid"
   $: gridMetadata = {
-    insideGrid:
-      parent?._component.endsWith("/container") && parent?.layout === "grid",
+    insideGrid,
     ignoresLayout: definition?.ignoresLayout === true,
     id,
     interactive,
@@ -583,19 +584,22 @@
     }
   }
 
-  const scrollIntoView = () => {
-    // Don't scroll into view if we selected this component because we were
-    // starting dragging on it
-    if (get(dndIsDragging)) {
-      return
-    }
-    const node = document.getElementsByClassName(id)?.[0]?.children[0]
+  const scrollIntoView = async () => {
+    const className = insideGrid ? id : `${id}-dom`
+    const node = document.getElementsByClassName(className)[0]
     if (!node) {
       return
     }
-    node.style.scrollMargin = "100px"
+    // Don't scroll into view if we selected this component because we were
+    // starting dragging on it
+    if (
+      get(dndIsDragging) ||
+      (insideGrid && node.classList.contains("dragging"))
+    ) {
+      return
+    }
     node.scrollIntoView({
-      behavior: "smooth",
+      behavior: "instant",
       block: "nearest",
       inline: "start",
     })
@@ -642,6 +646,9 @@
         })
       }
     }
+
+    console.log("mounted")
+
     return () => {
       // Unregister component
       if (componentStore.actions.isComponentRegistered(id)) {
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 97b262562a..71cac69c88 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -134,9 +134,9 @@
     const styles = getComputedStyle(domComponent)
 
     // Show as active
-    builderStore.actions.selectComponent(id)
     domComponent.classList.add("dragging")
     domGrid.classList.add("highlight")
+    builderStore.actions.selectComponent(id)
 
     // Update state
     dragInfo = {