From 0eadca9acbf68e3b47a4e7fb220baf2fb7aea9ac Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Sat, 25 Feb 2023 16:33:20 +0000 Subject: [PATCH] Optimise scrolling and virtual rendering performance --- .../app/spreadsheet/Spreadsheet.svelte | 28 +++--- .../app/spreadsheet/SpreadsheetBody.svelte | 96 ++++++++++--------- .../app/spreadsheet/SpreadsheetRow.svelte | 13 ++- packages/client/src/utils/domDebounce.js | 12 ++- 4 files changed, 81 insertions(+), 68 deletions(-) diff --git a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte index d57da63b19..2808b2c572 100644 --- a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte +++ b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte @@ -35,7 +35,8 @@ const tableId = writable(table?.tableId) const changeCache = writable({}) const newRows = writable([]) - const visibleCells = writable({ y: [0, 0], x: [0, 0] }) + const visibleRows = writable([0, 0]) + const visibleColumns = writable([0, 0]) // Build up spreadsheet context and additional stores const context = { @@ -49,7 +50,8 @@ changeCache, newRows, cellHeight, - visibleCells, + visibleRows, + visibleColumns, } const { reorder, reorderPlaceholder } = createReorderStores(context) const resize = createResizeStore(context) @@ -67,7 +69,7 @@ $: rowCount = $rows.length $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length $: updateSortedRows($fetch, $newRows) - $: visibleRows = $rows.slice($visibleCells.y[0], $visibleCells.y[1]) + $: renderedRows = $rows.slice($visibleRows[0], $visibleRows[1]) const createFetch = datasource => { return fetchData({ @@ -160,16 +162,16 @@ const updateSortedRows = (unsortedRows, newRows) => { let foo = unsortedRows.rows - for (let i = 0; i < 10; i++) { + for (let i = 0; i < 3; i++) { foo = foo.concat(foo.map(x => ({ ...x, _id: x._id + "x" }))) } - // let sortedRows = foo.slice() - // sortedRows.sort((a, b) => { - // const aIndex = newRows.indexOf(a._id) - // const bIndex = newRows.indexOf(b._id) - // return aIndex < bIndex ? -1 : 1 - // }) - $rows = foo.slice() + let sortedRows = foo.slice() + sortedRows.sort((a, b) => { + const aIndex = newRows.indexOf(a._id) + const bIndex = newRows.indexOf(b._id) + return aIndex < bIndex ? -1 : 1 + }) + $rows = sortedRows } // API for children to consume @@ -229,8 +231,8 @@ - {#each visibleRows as row, rowIdx (row._id)} - + {#each renderedRows as row, rowIdx (row._id)} + {/each} diff --git a/packages/client/src/components/app/spreadsheet/SpreadsheetBody.svelte b/packages/client/src/components/app/spreadsheet/SpreadsheetBody.svelte index 185dc518f5..a8a5985f4c 100644 --- a/packages/client/src/components/app/spreadsheet/SpreadsheetBody.svelte +++ b/packages/client/src/components/app/spreadsheet/SpreadsheetBody.svelte @@ -1,8 +1,16 @@
($selectedCellId = null)} id={`sheet-${rand}-body`} - style={sheetStyles} + on:scroll={handleScroll} >
.spreadsheet { display: block; - overflow: auto; height: 800px; position: relative; cursor: default; + overflow: auto; } .content { min-width: 100%; diff --git a/packages/client/src/components/app/spreadsheet/SpreadsheetRow.svelte b/packages/client/src/components/app/spreadsheet/SpreadsheetRow.svelte index fcba9caf88..595f2d1742 100644 --- a/packages/client/src/components/app/spreadsheet/SpreadsheetRow.svelte +++ b/packages/client/src/components/app/spreadsheet/SpreadsheetRow.svelte @@ -1,7 +1,6 @@