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

Clean up more sheet state and increase performance

This commit is contained in:
Andrew Kingston 2023-02-27 08:59:36 +00:00
parent fae24276f9
commit efca3eef4f
6 changed files with 134 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/frontend-core/src/components/sheet/ResizeOverlay.svelte
View File

@ -2,7 +2,7 @@
import { get } from "svelte/store"
import { getContext } from "svelte"
const { columns, rand, visibleColumns } = getContext("spreadsheet")
const { columns, rand, scroll, visibleColumns } = getContext("spreadsheet")
const MinColumnWidth = 100
let initialMouseX = null
@ -48,56 +48,7 @@
return state
})
// let newStyle = `--col-${columnIdx}-width:${newWidth}px;`
//
// let offset = left + newWidth
// for (let i = columnIdx + 1; i < columnCount; i++) {
// const colWidth = parseInt(styles.getPropertyValue(`--col-${i}-width`))
// newStyle += `--col-${i}-left:${offset}px;`
// offset += colWidth
// }
//
// sheet.style.cssText += newStyle
// let cells = sheet.querySelectorAll(`[data-col="${columnIdx}"]`)
// let left
// cells.forEach(cell => {
// cell.style.width = `${newWidth}px`
// cell.dataset.width = newWidth
// if (!left) {
// left = parseInt(cell.dataset.left)
// }
// })
//
// let offset = left + newWidth
// for (let i = columnIdx + 1; i < columnCount; i++) {
// cells = sheet.querySelectorAll(`[data-col="${i}"]`)
// let colWidth
// cells.forEach(cell => {
// cell.style.transform = `translateX(${offset}px)`
// cell.dataset.left = offset
// if (!colWidth) {
// colWidth = parseInt(cell.dataset.width)
// }
// })
// offset += colWidth
// }
width = newWidth
// Update width of column
// columns.update(state => {
// state[$resize.columnIdx].width = Math.round(newWidth)
//
// // Update left offset of other columns
// let offset = 40
// state.forEach(col => {
// col.left = offset
// offset += col.width
// })
//
// return state
// })
}
const stopResizing = () => {
@ -108,12 +59,14 @@
}
</script>
{#each $columns as col}
{#each $visibleColumns as col}
<div
class="resize-slider"
class:visible={columnIdx === col.idx}
on:mousedown={e => startResizing(col.idx, e)}
style="--left:{col.left + col.width}px;"
style="--left:{col.left +
col.width -
(col.idx === 0 ? 0 : $scroll.left)}px;"
>
<div class="resize-indicator" />
</div>

47
packages/frontend-core/src/components/sheet/Sheet.svelte
View File

@ -5,6 +5,7 @@
import { LuceneUtils } from "../../utils"
import { Icon } from "@budibase/bbui"
import { createReorderStores } from "./stores/reorder"
import { createViewportStores } from "./stores/viewport"
import SpreadsheetHeader from "./SheetHeader.svelte"
import SpreadsheetBody from "./SheetBody.svelte"
import SpreadsheetCell from "./SheetCell.svelte"
@ -31,8 +32,6 @@
const selectedRows = writable({})
const changeCache = writable({})
const newRows = writable([])
const visibleRows = writable([0, 0])
const visibleColumns = writable([0, 0])
const scroll = writable({
left: 0,
top: 0,
@ -57,12 +56,11 @@
changeCache,
newRows,
cellHeight,
visibleRows,
visibleColumns,
bounds,
scroll,
}
const { reorder, reorderPlaceholder } = createReorderStores(context)
const { visibleRows, visibleColumns } = createViewportStores(context)
$: query = LuceneUtils.buildLuceneQuery(filter)
$: fetch = createFetch(tableId)
@ -76,7 +74,6 @@
$: rowCount = $rows.length
$: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
$: updateSortedRows($fetch, $newRows)
$: renderedRows = $rows.slice($visibleRows[0], $visibleRows[1])
const createFetch = tableId => {
return fetchData({
@ -192,7 +189,7 @@
const bIndex = newRows.indexOf(b._id)
return aIndex < bIndex ? -1 : 1
})
$rows = sortedRows
$rows = sortedRows.map((x, idx) => ({ ...x, __idx: idx }))
}
// API for children to consume
@ -206,6 +203,8 @@
...context,
reorder,
reorderPlaceholder,
visibleRows,
visibleColumns,
spreadsheetAPI,
})
</script>
@ -221,31 +220,31 @@
checked={rowCount && selectedRowCount === rowCount}
/>
</SpreadsheetCell>
{#each $columns as field, fieldIdx}
{#each $visibleColumns as column}
<SpreadsheetCell
header
sticky={fieldIdx === 0}
reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)}
width={field.width}
left={field.left}
sticky={column.idx === 0}
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
on:mousedown={e => reorder.actions.startReordering(column.idx, e)}
width={column.width}
left={column.left}
>
<Icon
size="S"
name={getIconForField(field)}
name={getIconForField(column)}
color="var(--spectrum-global-color-gray-600)"
/>
<span>
{field.name}
{column.name}
</span>
</SpreadsheetCell>
{/each}
</div>
<!-- All real rows -->
{#each renderedRows as row, rowIdx (row._id)}
<SpreadsheetRow {row} rowIdx={rowIdx + $visibleRows[0]} />
{#each $visibleRows as row (row._id)}
<SpreadsheetRow {row} />
{/each}
<!-- New row placeholder -->
@ -260,16 +259,16 @@
>
<Icon hoverable name="Add" size="S" />
</SpreadsheetCell>
{#each $columns as field, fieldIdx}
{#each $visibleColumns as column}
<SpreadsheetCell
sticky={fieldIdx === 0}
sticky={column.idx === 0}
rowHovered={$hoveredRowId === "new"}
reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:click={() => addRow(field)}
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
on:click={() => addRow(column)}
on:mouseenter={() => ($hoveredRowId = "new")}
width={field.width}
left={field.left}
width={column.width}
left={column.left}
/>
{/each}
</div>

116
packages/frontend-core/src/components/sheet/SheetBody.svelte
View File

@ -2,104 +2,30 @@
import { getContext, onMount } from "svelte"
import { Utils } from "../../utils"
const {
columns,
selectedCellId,
rand,
visibleRows,
visibleColumns,
cellHeight,
rows,
bounds,
scroll,
} = getContext("spreadsheet")
const { columns, selectedCellId, rand, cellHeight, rows, bounds, scroll } =
getContext("spreadsheet")
const padding = 180
let ref
let scrollLeft = 0
let scrollTop = 0
$: updateVisibleRows($columns, scrollTop, $bounds.height)
$: updateVisibleColumns($columns, scrollLeft, $bounds.width)
$: contentHeight = ($rows.length + 2) * cellHeight + padding
$: contentHeight = ($rows.length + 2) * cellHeight
$: contentWidth = computeContentWidth($columns)
$: horizontallyScrolled = scrollLeft > 0
const computeContentWidth = columns => {
let total = 40 + padding
columns.forEach(col => {
total += col.width
})
return total
if (!columns.length) {
return 0
}
const last = columns[columns.length - 1]
return last.left + last.width
}
// Store the current scroll position
// let lastTop
// let lastLeft
// let ticking = false
// const handleScroll = e => {
// lastTop = e.target.scrollTop
// lastLeft = e.target.scrollLeft
// if (!ticking) {
// ticking = true
// requestAnimationFrame(() => {
// if (Math.abs(lastTop - scrollTop) > 100) {
// scrollTop = lastTop
// }
// if (lastLeft === 0 || Math.abs(lastLeft - scrollLeft) > 100) {
// scrollLeft = lastLeft
// }
// ticking = false
// })
// }
// }
const handleScroll = Utils.domDebounce(
({ left, top }) => {
// Only update local state when big changes occur
if (Math.abs(top - scrollTop) > 100) {
scrollTop = top
}
if (left === 0 || Math.abs(left - scrollLeft) > 100) {
scrollLeft = left
}
// Always update store
const updateScrollStore = Utils.domDebounce((left, top) => {
scroll.set({ left, top })
},
e => ({ left: e.target.scrollLeft, top: e.target.scrollTop })
)
})
const updateVisibleRows = (columns, scrollTop, height) => {
if (!columns.length) {
return
}
// Compute row visibility
const rows = Math.ceil(height / cellHeight) + 8
const firstRow = Math.max(0, Math.floor(scrollTop / cellHeight) - 4)
visibleRows.set([firstRow, firstRow + rows])
}
const updateVisibleColumns = (columns, scrollLeft, width) => {
if (!columns.length) {
return
}
// Compute column visibility
let startColIdx = 1
let rightEdge = columns[1].width
while (rightEdge < scrollLeft) {
startColIdx++
rightEdge += columns[startColIdx].width
}
let endColIdx = startColIdx + 1
let leftEdge = columns[0].width + 40 + rightEdge
while (leftEdge < width + scrollLeft) {
leftEdge += columns[endColIdx]?.width
endColIdx++
}
visibleColumns.set([Math.max(1, startColIdx - 2), endColIdx + 2])
const handleScroll = e => {
updateScrollStore(e.target.scrollLeft, e.target.scrollTop)
}
onMount(() => {
@ -117,18 +43,24 @@
<div
bind:this={ref}
class="sheet-body"
class:horizontally-scrolled={horizontallyScrolled}
class:horizontally-scrolled={$scroll.left > 0}
on:click|self={() => ($selectedCellId = null)}
id={`sheet-${rand}-body`}
on:scroll={handleScroll}
>
<div
class="content"
style="height:{contentHeight + padding}px; width:{contentWidth +
padding}px;"
>
<div
class="data-content"
style="height:{contentHeight}px; width:{contentWidth}px;"
>
<slot />
</div>
</div>
</div>
<style>
.sheet-body {
@ -140,11 +72,19 @@
height: 0;
}
.sheet-body::-webkit-scrollbar-track {
background: var(--cell-background);
background: transparent;
}
.content,
.data-content {
position: absolute;
}
.content {
min-width: 100%;
min-height: 100%;
background: var(--background-alt);
}
.data-content {
background: var(--cell-background);
}
/* Add shadow to sticky cells when horizontally scrolled */

12
packages/frontend-core/src/components/sheet/SheetRow.svelte
View File

@ -9,13 +9,11 @@
import TextCell from "./cells/TextCell.svelte"
export let row
export let rowIdx
const {
selectedCellId,
reorder,
hoveredRowId,
columns,
selectedRows,
changeCache,
spreadsheetAPI,
@ -26,10 +24,6 @@
$: rowSelected = !!$selectedRows[row._id]
$: rowHovered = $hoveredRowId === row._id
$: data = { ...row, ...$changeCache[row._id] }
$: renderedColumns = [
$columns[0],
...$columns.slice($visibleColumns[0], $visibleColumns[1]),
]
$: containsSelectedCell = $selectedCellId?.split("-")[0] === row._id
const getCellForField = field => {
@ -58,7 +52,7 @@
<div
class="row"
style="--top:{(rowIdx + 1) * cellHeight}px;"
style="--top:{(row.__idx + 1) * cellHeight}px;"
class:contains-selected-cell={containsSelectedCell}
>
<SpreadsheetCell
@ -72,11 +66,11 @@
<input type="checkbox" checked={rowSelected} />
{:else}
<span>
{rowIdx + 1}
{row.__idx + 1}
</span>
{/if}
</SpreadsheetCell>
{#each renderedColumns as column (column.name)}
{#each $visibleColumns as column (column.name)}
{@const cellIdx = `${row._id}-${column.name}`}
<SpreadsheetCell
{rowSelected}

69
packages/frontend-core/src/components/sheet/stores/viewport.js Normal file
View File

@ -0,0 +1,69 @@
import { writable, derived } from "svelte/store"
export const createViewportStores = context => {
const { cellHeight, columns, rows, scroll, bounds } = context
// Use local variables to avoid needing to invoke 2 svelte getters each time
// scroll state changes, but also use stores to allow use of derived stores
let scrollTop = 0
let scrollLeft = 0
const scrollTopStore = writable(0)
const scrollLeftStore = writable(0)
// Derive height and width as primitives to avoid wasted computation
const width = derived(bounds, $bounds => $bounds.width)
const height = derived(bounds, $bounds => $bounds.height)
// Debounce scroll updates so we can slow down visible row computation
scroll.subscribe(({ left, top }) => {
// Only update local state when big changes occur
if (Math.abs(top - scrollTop) > cellHeight * 2) {
scrollTop = top
scrollTopStore.set(top)
}
if (Math.abs(left - scrollLeft) > 100) {
scrollLeft = left
scrollLeftStore.set(left)
}
})
// Derive visible rows
const visibleRows = derived(
[rows, scrollTopStore, height],
([$rows, $scrollTop, $height]) => {
console.log("new rows")
const maxRows = Math.ceil($height / cellHeight) + 8
const firstRow = Math.max(0, Math.floor($scrollTop / cellHeight) - 4)
return $rows.slice(firstRow, firstRow + maxRows)
}
)
// Derive visible columns
const visibleColumns = derived(
[columns, scrollLeftStore, width],
([$columns, $scrollLeft, $width]) => {
console.log("new columns")
if (!$columns.length) {
return []
}
let startColIdx = 1
let rightEdge = $columns[1].width
while (rightEdge < $scrollLeft) {
startColIdx++
rightEdge += $columns[startColIdx].width
}
let endColIdx = startColIdx + 1
let leftEdge = $columns[0].width + 40 + rightEdge
while (leftEdge < $width + $scrollLeft) {
leftEdge += $columns[endColIdx]?.width
endColIdx++
}
return [
$columns[0],
...$columns.slice(Math.max(1, startColIdx - 2), endColIdx + 2),
]
}
)
return { visibleRows, visibleColumns }
}

7
packages/frontend-core/src/utils/utils.js
View File

@ -90,18 +90,17 @@ export const throttle = (callback, minDelay = 1000) => {
/**
* Utility to debounce DOM activities using requestAnimationFrame
* @param callback the function to run
* @param extractParams
* @returns {Function}
*/
export const domDebounce = (callback, extractParams = x => x) => {
export const domDebounce = callback => {
let active = false
let lastParams
return (...params) => {
lastParams = extractParams(...params)
lastParams = params
if (!active) {
active = true
requestAnimationFrame(() => {
callback(lastParams)
callback(...lastParams)
active = false
})
}