($hoveredRowId = row._id)}
- on:mouseleave={() => ($hoveredRowId = null)}
+ on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+ on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
>
{#each $renderedColumns as column, columnIdx (column.name)}
{@const cellId = `${row._id}-${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 85f67bfc2c..b6205a1f59 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/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}`}
($hoveredRowId = row._id)}
- on:mouseleave={() => ($hoveredRowId = null)}
+ on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+ on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
>
{#if $stickyColumn}
@@ -96,8 +97,10 @@
{#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
($hoveredRowId = BlankRowID)}
- on:mouseleave={() => ($hoveredRowId = null)}
+ on:mouseenter={$isDragging
+ ? null
+ : () => ($hoveredRowId = BlankRowID)}
+ on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("add-row-inline")}
>
diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
index f92ae1b26b..654a7529b5 100644
--- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
+++ b/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
}
@@ -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 {
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index eeea8fff43..f5c0905320 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/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: {