MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve horizontal scrolling performance

This commit is contained in:
Andrew Kingston 2023-04-24 08:09:18 +01:00
parent 4e128c00f4
commit 3bbf055401
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
View File

@ -52,6 +52,7 @@
top: 0; top: 0;
border-left: var(--cell-border); border-left: var(--cell-border);
border-right: var(--cell-border); border-right: var(--cell-border);
border-bottom: var(--cell-border);
background: var(--spectrum-global-color-gray-100); background: var(--spectrum-global-color-gray-100);
} }
.add:hover { .add:hover {

17
packages/frontend-core/src/components/grid/stores/viewport.js
View File

@ -2,6 +2,7 @@ import { derived, get } from "svelte/store"
import { import {
MaxCellRenderHeight, MaxCellRenderHeight,
MaxCellRenderWidthOverflow, MaxCellRenderWidthOverflow,
MinColumnWidth,
ScrollBarSize, ScrollBarSize,
} from "../lib/constants" } from "../lib/constants"
@ -46,7 +47,7 @@ export const deriveStores = context => {
// Derive visible columns // Derive visible columns
const scrollLeftRounded = derived(scrollLeft, $scrollLeft => { const scrollLeftRounded = derived(scrollLeft, $scrollLeft => {
const interval = 50 const interval = MinColumnWidth
return Math.round($scrollLeft / interval) * interval return Math.round($scrollLeft / interval) * interval
}) })
const renderedColumns = derived( const renderedColumns = derived(
@ -74,17 +75,15 @@ export const deriveStores = context => {
leftEdge += $visibleColumns[endColIdx].width leftEdge += $visibleColumns[endColIdx].width
endColIdx++ endColIdx++
} }
const next = $visibleColumns.slice(startColIdx, endColIdx) const next = $visibleColumns.slice(
Math.max(0, startColIdx - 1),
// Only update if the column selection is actually different endColIdx + 1
)
const current = get(renderedColumns) const current = get(renderedColumns)
const currentKey = current.map(col => col.width).join("-") if (JSON.stringify(next) !== JSON.stringify(current)) {
const nextKey = next.map(col => col.width).join("-")
if (currentKey !== nextKey) {
set(next) set(next)
} }
}, }
[]
) )
const hiddenColumnsWidth = derived( const hiddenColumnsWidth = derived(