diff --git a/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte b/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte index 86e0c3bd55..7506318072 100644 --- a/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte +++ b/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte @@ -7,6 +7,7 @@ // Bar config const barOffset = 4 + const padding = 180 // State for dragging bars let initialMouse @@ -20,25 +21,25 @@ // Calculate V scrollbar size and offset // Terminology is the same for both axes: - // contentX - the size of the rendered content + // contentX - the size of the rendered content, including padding // renderX - the space available to render the bar in, edge to edge // barX - the length of the bar // availX - the space available to render the bar in, until the edge // barX - the offset of the bar - $: contentHeight = ($rows.length + 1) * cellHeight + $: contentHeight = ($rows.length + 1) * cellHeight + padding $: renderHeight = height - 2 * barOffset $: barHeight = Math.max(50, (height / contentHeight) * renderHeight) $: availHeight = renderHeight - barHeight - $: maxScrollTop = Math.max(contentHeight - height + 180, 0) + $: maxScrollTop = Math.max(contentHeight - height, 0) $: barTop = barOffset + cellHeight + availHeight * (scrollTop / maxScrollTop) // Calculate H scrollbar size and offset - $: contentWidth = calculateContentWidth($columns, $stickyColumn) + $: contentWidth = calculateContentWidth($columns, $stickyColumn) + padding $: totalWidth = width + 40 + $stickyColumn?.width || 0 $: renderWidth = totalWidth - 2 * barOffset $: barWidth = Math.max(50, (totalWidth / contentWidth) * renderWidth) $: availWidth = renderWidth - barWidth - $: maxScrollLeft = Math.max(contentWidth - totalWidth + 180, 0) + $: maxScrollLeft = Math.max(contentWidth - totalWidth, 0) $: barLeft = barOffset + availWidth * (scrollLeft / maxScrollLeft) // Calculate whether to show scrollbars or not diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/Sheet.svelte index 678405f8f8..f5bdfbf18c 100644 --- a/packages/frontend-core/src/components/sheet/Sheet.svelte +++ b/packages/frontend-core/src/components/sheet/Sheet.svelte @@ -117,7 +117,7 @@ display: flex; flex-direction: row; justify-items: flex-start; - align-items: stretch; + align-items: flex-start; overflow: hidden; height: 0; position: relative; @@ -127,5 +127,6 @@ overflow: hidden; display: flex; flex-direction: column; + align-self: stretch; } diff --git a/packages/frontend-core/src/components/sheet/SheetCell.svelte b/packages/frontend-core/src/components/sheet/SheetCell.svelte index f3b3a9af39..a918fb5e98 100644 --- a/packages/frontend-core/src/components/sheet/SheetCell.svelte +++ b/packages/frontend-core/src/components/sheet/SheetCell.svelte @@ -68,7 +68,7 @@ background: var(--background); padding: 0 var(--cell-padding); gap: calc(2 * var(--cell-spacing)); - z-index: 10; + z-index: 25; border-bottom: none; } .cell.header :global(> span) { diff --git a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte b/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte index 2ad169e8dc..c3093d1b0f 100644 --- a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte +++ b/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte @@ -18,22 +18,68 @@ $: scrollTop = $scroll.top $: scrollLeft = $scroll.left - $: offsetY = scrollVertically ? -1 * (scrollTop % cellHeight) : 0 + $: offsetY = -1 * (scrollTop % cellHeight) $: hiddenWidths = calculateHiddenWidths($visibleColumns) - $: offsetX = scrollHorizontally ? -1 * scrollLeft + hiddenWidths : 0 + $: offsetX = -1 * scrollLeft + hiddenWidths $: rowCount = $visibleRows.length $: contentWidth = calculateContentWidth($visibleColumns, scrollHorizontally) $: contentHeight = calculateContentHeight(rowCount, scrollVertically) - $: style = getStyle(offsetX, offsetY, contentWidth, contentHeight) + $: innerStyle = getInnerStyle( + offsetX, + offsetY, + contentWidth, + contentHeight, + scrollHorizontally, + scrollVertically + ) + $: outerStyle = getOuterStyle( + offsetX, + offsetY, + contentWidth, + contentHeight, + scrollHorizontally, + scrollVertically + ) - const getStyle = (offsetX, offsetY, contentWidth, contentHeight) => { - let style = `--offset-y:${offsetY}px; --offset-x:${offsetX}px;` - if (contentWidth) { - style += `--width:${contentWidth}px;` + const getInnerStyle = ( + offsetX, + offsetY, + contentWidth, + contentHeight, + scrollH, + scrollV + ) => { + if (!scrollH) { + offsetX = 0 } - if (contentHeight) { - style += `--height:${contentHeight}px;` + if (!scrollV) { + offsetY = 0 } + let style = `--offset-x:${offsetX}px;--offset-y:${offsetY}px;` + // if (scrollH && contentWidth) { + // style += `width:${contentWidth}px;` + // } + // if (scrollV && contentHeight) { + // style += `height:${contentHeight}px;` + // } + return style + } + + const getOuterStyle = ( + offsetX, + offsetY, + contentWidth, + contentHeight, + scrollH, + scrollV + ) => { + let style = "" + // if (scrollV) { + // style += `height:${contentHeight + offsetY}px;` + // } + // if (scrollH) { + // style += `width:${contentWidth + offsetX}px;` + // } return style } @@ -87,20 +133,20 @@ } -