Fix reorder overlay z-index issue

This commit is contained in:
Andrew Kingston 2023-04-12 10:13:40 +01:00
parent 7bbb8e5648
commit 68cd1fbe8e
1 changed files with 7 additions and 4 deletions

View File

@ -10,15 +10,18 @@
stickyColumn, stickyColumn,
rowHeight, rowHeight,
renderedRows, renderedRows,
scrollLeft,
} = getContext("sheet") } = getContext("sheet")
$: targetColumn = $reorder.targetColumn $: targetColumn = $reorder.targetColumn
$: left = getLeft(targetColumn, $stickyColumn, $visibleColumns) $: minLeft = gutterWidth + ($stickyColumn?.width || 0)
$: left = getLeft(targetColumn, $stickyColumn, $visibleColumns, $scrollLeft)
$: height = $rowHeight * ($renderedRows.length + 1) $: height = $rowHeight * ($renderedRows.length + 1)
$: style = `left:${left}px; height:${height}px;` $: style = `left:${left}px; height:${height}px;`
$: visible = $isReordering && left >= minLeft
const getLeft = (targetColumn, stickyColumn, visibleColumns) => { const getLeft = (targetColumn, stickyColumn, visibleColumns, scrollLeft) => {
let left = gutterWidth + (stickyColumn?.width || 0) let left = gutterWidth + (stickyColumn?.width || 0) - scrollLeft
// If this is not the sticky column, add additional left space // If this is not the sticky column, add additional left space
if (targetColumn !== stickyColumn?.name) { if (targetColumn !== stickyColumn?.name) {
@ -33,7 +36,7 @@
} }
</script> </script>
{#if $isReordering} {#if visible}
<div class="reorder-wrapper"> <div class="reorder-wrapper">
<SheetScrollWrapper scrollVertically> <SheetScrollWrapper scrollVertically>
<div class="reorder-overlay" {style} /> <div class="reorder-overlay" {style} />