From ffd41486559f548048dfa3ec0d74c4f71f75af8a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Jun 2023 10:17:10 +0100 Subject: [PATCH] Prevent hovering over rows when dragging and keep scroll bar in the selected state --- .../src/components/grid/layout/GridBody.svelte | 5 +++-- .../src/components/grid/layout/GridRow.svelte | 5 +++-- .../components/grid/layout/StickyColumn.svelte | 11 +++++++---- .../grid/overlays/ScrollOverlay.svelte | 17 +++++++++++++++-- .../src/components/grid/stores/ui.js | 2 ++ 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte index 016369df49..b5f6c38287 100644 --- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte +++ b/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:mouseleave={() => ($hoveredRowId = null)} + on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)} + on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:click={() => dispatch("add-row-inline")} /> {/if} diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index 0ccba0f170..fe74f05663 100644 --- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte +++ b/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 @@
($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: {