From dedf26418532181e96e6d1f11f914e24649c1f2d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 24 Jun 2024 14:41:29 +0100
Subject: [PATCH] Fix auto scrolling of focused cell

---
 .../grid/overlays/ReorderOverlay.svelte       |  4 +--
 .../src/components/grid/stores/reorder.js     |  8 +++---
 .../src/components/grid/stores/scroll.js      | 27 +++++++++++--------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
index 75e3e051f4..4f7925be97 100644
--- a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
@@ -10,7 +10,7 @@
     rowHeight,
     renderedRows,
     scrollLeft,
-    bodyLeft,
+    stickyWidth,
   } = getContext("grid")
 
   $: targetColumn = $columnLookupMap[$reorder.targetColumn]
@@ -18,7 +18,7 @@
   $: left = getLeft(targetColumn, insertAfter, $scrollLeft)
   $: height = $rowHeight * $renderedRows.length + DefaultRowHeight
   $: style = `left:${left}px; height:${height}px;`
-  $: visible = $isReordering && left >= $bodyLeft
+  $: visible = $isReordering && left >= $stickyWidth
 
   const getLeft = (targetColumn, insertAfter, scrollLeft) => {
     if (!targetColumn) {
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js
index 4f8339947b..87eb780a72 100644
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ b/packages/frontend-core/src/components/grid/stores/reorder.js
@@ -34,7 +34,7 @@ export const createActions = context => {
     bounds,
     visibleColumns,
     datasource,
-    bodyLeft,
+    stickyWidth,
     width,
     scrollLeft,
     maxScrollLeft,
@@ -47,11 +47,11 @@ export const createActions = context => {
   const startReordering = (column, e) => {
     const $scrollableColumns = get(scrollableColumns)
     const $bounds = get(bounds)
-    const $bodyLeft = get(bodyLeft)
+    const $stickyWidth = get(stickyWidth)
 
     // Generate new breakpoints for the current columns
     const breakpoints = $scrollableColumns.map(col => ({
-      x: col.__left - $bodyLeft,
+      x: col.__left - $stickyWidth,
       column: col.name,
       insertAfter: false,
     }))
@@ -60,7 +60,7 @@ export const createActions = context => {
     const lastCol = $scrollableColumns[$scrollableColumns.length - 1]
     if (lastCol) {
       breakpoints.push({
-        x: lastCol.__left + lastCol.width - $bodyLeft,
+        x: lastCol.__left + lastCol.width - $stickyWidth,
         column: lastCol.name,
         insertAfter: true,
       })
diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
index 4a46e5c539..ad04c6f783 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -32,7 +32,7 @@ export const deriveStores = context => {
   } = context
 
   // Memoize store primitives
-  const bodyLeft = derived(displayColumn, $displayColumn => {
+  const stickyWidth = derived(displayColumn, $displayColumn => {
     return ($displayColumn?.width || 0) + GutterWidth
   })
 
@@ -58,9 +58,12 @@ export const deriveStores = context => {
       return width
     }
   )
-  const screenWidth = derived([width, bodyLeft], ([$width, $bodyLeft]) => {
-    return $width + $bodyLeft
-  })
+  const screenWidth = derived(
+    [width, stickyWidth],
+    ([$width, $stickyWidth]) => {
+      return $width + $stickyWidth
+    }
+  )
   const maxScrollLeft = derived(
     [contentWidth, screenWidth],
     ([$contentWidth, $screenWidth]) => {
@@ -83,7 +86,7 @@ export const deriveStores = context => {
   )
 
   return {
-    bodyLeft,
+    stickyWidth,
     contentHeight,
     contentWidth,
     screenWidth,
@@ -101,12 +104,13 @@ export const initialise = context => {
     scroll,
     bounds,
     rowHeight,
-    visibleColumns,
+    stickyWidth,
     scrollTop,
     maxScrollTop,
     scrollLeft,
     maxScrollLeft,
     buttonColumnWidth,
+    columnLookupMap,
   } = context
 
   // Ensure scroll state never goes invalid, which can happen when changing
@@ -174,15 +178,16 @@ export const initialise = context => {
 
     // Ensure horizontal position is viewable
     // Check horizontal position of columns next
-    const $visibleColumns = get(visibleColumns)
-    const { field: columnName } = parseCellID($focusedCellId)
-    const column = $visibleColumns.find(col => col.name === columnName)
+    const { field } = parseCellID($focusedCellId)
+    const column = get(columnLookupMap)[field]
     if (!column) {
       return
     }
 
     // Ensure column is not cutoff on left edge
-    let delta = $scroll.left - column.left + FocusedCellMinOffset
+    const $stickyWidth = get(stickyWidth)
+    let delta =
+      $scroll.left - column.__left + FocusedCellMinOffset + $stickyWidth
     if (delta > 0) {
       scroll.update(state => ({
         ...state,
@@ -196,7 +201,7 @@ export const initialise = context => {
       const rightEdge = column.__left + column.width
       const rightBound =
         $bounds.width + $scroll.left - FocusedCellMinOffset - $buttonColumnWidth
-      delta = rightEdge - rightBound
+      delta = rightEdge - rightBound - $stickyWidth
       if (delta > 0) {
         scroll.update(state => ({
           ...state,