Prevent hovering over rows when dragging and keep scroll bar in the selected state

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -12,6 +12,7 @@
     config,
     hoveredRowId,
     dispatch,
+    isDragging,
   } = getContext("grid")
 
   let body
@@ -47,8 +48,8 @@
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
         style="width:{renderColumnsWidth}px"
-        on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
-        on:mouseleave={() => ($hoveredRowId = null)}
+        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         on:click={() => dispatch("add-row-inline")}
       />
     {/if}

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -16,6 +16,7 @@
     focusedRow,
     columnHorizontalInversionIndex,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -27,8 +28,8 @@
 <div
   class="row"
   on:focus
-  on:mouseenter={() => ($hoveredRowId = row._id)}
+  on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
-  on:mouseleave={() => ($hoveredRowId = null)}
+  on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
 >
   {#each $renderedColumns as column, columnIdx (column.name)}
     {@const cellId = `${row._id}-${column.name}`}

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -23,6 +23,7 @@
     scrollLeft,
     dispatch,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowCount = $rows.length
@@ -71,8 +72,8 @@
         {@const cellId = `${row._id}-${$stickyColumn?.name}`}
         <div
           class="row"
-          on:mouseenter={() => ($hoveredRowId = row._id)}
+          on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
-          on:mouseleave={() => ($hoveredRowId = null)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         >
           <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
           {#if $stickyColumn}
@@ -96,8 +97,10 @@
       {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
         <div
           class="row new"
-          on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+          on:mouseenter={$isDragging
-          on:mouseleave={() => ($hoveredRowId = null)}
+            ? null
+            : () => ($hoveredRowId = BlankRowID)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
           on:click={() => dispatch("add-row-inline")}
         >
           <GutterCell disableExpand rowHovered={$hoveredRowId === BlankRowID}>

packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte

@@ -15,11 +15,17 @@
     scrollLeft,
     scrollTop,
     height,
+    isDragging,
   } = getContext("grid")
 
   // State for dragging bars
   let initialMouse
   let initialScroll
+  let isDraggingV = false
+  let isDraggingH = false
+
+  // Update state to reflect if we are dragging
+  $: isDragging.set(isDraggingV || isDraggingH)
 
   // Calculate V scrollbar size and offset
   // Terminology is the same for both axes:
@@ -46,6 +52,7 @@
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
+    isDraggingV = true
   }
   const moveVDragging = domDebounce(e => {
     const delta = e.clientY - initialMouse
@@ -59,6 +66,7 @@
   const stopVDragging = () => {
     document.removeEventListener("mousemove", moveVDragging)
     document.removeEventListener("mouseup", stopVDragging)
+    isDraggingV = false
   }
 
   // H scrollbar drag handlers
@@ -68,6 +76,7 @@
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
+    isDraggingH = true
   }
   const moveHDragging = domDebounce(e => {
     const delta = e.clientX - initialMouse
@@ -81,6 +90,7 @@
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
+    isDraggingH = false
   }
 </script>
 
@@ -89,6 +99,7 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
+    class:dragging={isDraggingV}
   />
 {/if}
 {#if $showHScrollbar}
@@ -96,6 +107,7 @@
     class="h-scrollbar"
     style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
+    class:dragging={isDraggingH}
   />
 {/if}
 
@@ -103,11 +115,12 @@
   div {
     position: absolute;
     background: var(--spectrum-global-color-gray-500);
-    opacity: 0.7;
+    opacity: 0.5;
     border-radius: 4px;
     transition: opacity 130ms ease-out;
   }
-  div:hover {
+  div:hover,
+  div.dragging {
     opacity: 1;
   }
   .v-scrollbar {

packages/frontend-core/src/components/grid/stores/ui.js

@@ -16,6 +16,7 @@ export const createStores = () => {
   const rowHeight = writable(DefaultRowHeight)
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
+  const isDragging = writable(false)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -48,6 +49,7 @@ export const createStores = () => {
     hoveredRowId,
     rowHeight,
     gridFocused,
+    isDragging,
     selectedRows: {
       ...selectedRows,
       actions: {