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}
diff --git a/packages/frontend-core/src/components/sheet/SheetBody.svelte b/packages/frontend-core/src/components/sheet/SheetBody.svelte
index 12bd2dff70..fc5ea694ac 100644
--- a/packages/frontend-core/src/components/sheet/SheetBody.svelte
+++ b/packages/frontend-core/src/components/sheet/SheetBody.svelte
@@ -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 updateScrollStore = Utils.domDebounce((left, top) => {
+ scroll.set({ left, top })
+ })
- 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
- 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,16 +43,22 @@
0}
on:click|self={() => ($selectedCellId = null)}
id={`sheet-${rand}-body`}
on:scroll={handleScroll}
>
{:else}
- {rowIdx + 1}
+ {row.__idx + 1}
{/if}
- {#each renderedColumns as column (column.name)}
+ {#each $visibleColumns as column (column.name)}
{@const cellIdx = `${row._id}-${column.name}`}
{
+ 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 }
+}
diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js
index 5b23fa4d93..46d8395f77 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -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
})
}