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

Remove concept of rendered columns from grid and instead render all columns

This commit is contained in:
Andrew Kingston 2023-10-17 11:16:15 +01:00
parent 5e8e4add4a
commit 4e703fdfcc
10 changed files with 53 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View File

@ -17,7 +17,7 @@
isResizing,
rand,
sort,
renderedColumns,
visibleColumns,
dispatch,
subscribe,
config,
@ -50,7 +50,7 @@
$: sortedBy = column.name === $sort.column
$: canMoveLeft = orderable && idx > 0
$: canMoveRight = orderable && idx < $renderedColumns.length - 1
$: canMoveRight = orderable && idx < $visibleColumns.length - 1
$: sortingLabels = getSortingLabels(column.schema?.type)
$: searchable = isColumnSearchable(column)
$: resetSearchValue(column.name)

7
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View File

@ -444,6 +444,13 @@
text-decoration: underline;
}
.remove {
display: none;
}
.remove.visible {
display: block;
}
.add {
background: var(--spectrum-global-color-gray-200);
padding: 4px;

6
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View File

@ -7,7 +7,7 @@
const {
bounds,
renderedRows,
renderedColumns,
visibleColumns,
rowVerticalInversionIndex,
hoveredRowId,
dispatch,
@ -17,7 +17,7 @@
let body
$: renderColumnsWidth = $renderedColumns.reduce(
$: columnsWidth = $visibleColumns.reduce(
(total, col) => (total += col.width),
0
)
@ -47,7 +47,7 @@
<div
class="blank"
class:highlighted={$hoveredRowId === BlankRowID}
style="width:{renderColumnsWidth}px"
style="width:{columnsWidth}px"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("add-row-inline")}

4
packages/frontend-core/src/components/grid/layout/GridRow.svelte
View File

@ -10,7 +10,7 @@
focusedCellId,
reorder,
selectedRows,
renderedColumns,
visibleColumns,
hoveredRowId,
selectedCellMap,
focusedRow,
@ -34,7 +34,7 @@
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
>
{#each $renderedColumns as column, columnIdx (column.name)}
{#each $visibleColumns as column, columnIdx}
{@const cellId = `${row._id}-${column.name}`}
<DataCell
{cellId}

7
packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
View File

@ -11,7 +11,6 @@
maxScrollLeft,
bounds,
hoveredRowId,
hiddenColumnsWidth,
menu,
} = getContext("grid")
@ -23,10 +22,10 @@
let initialTouchX
let initialTouchY
$: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
$: style = generateStyle($scroll, $rowHeight)
const generateStyle = (scroll, rowHeight, hiddenWidths) => {
const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
const generateStyle = (scroll, rowHeight) => {
const offsetX = scrollHorizontally ? -1 * scroll.left : 0
const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
}

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

@ -5,14 +5,14 @@
import HeaderCell from "../cells/HeaderCell.svelte"
import { TempTooltip, TooltipType } from "@budibase/bbui"
const { renderedColumns, config, hasNonAutoColumn, datasource, loading } =
const { visibleColumns, config, hasNonAutoColumn, datasource, loading } =
getContext("grid")
</script>
<div class="header">
<GridScrollWrapper scrollHorizontally>
<div class="row">
{#each $renderedColumns as column, idx}
{#each $visibleColumns as column, idx}
<HeaderCell {column} {idx}>
<slot name="edit-column" />
</HeaderCell>

9
packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
View File

@ -2,17 +2,16 @@
import { getContext, onMount } from "svelte"
import { Icon, Popover, clickOutside } from "@budibase/bbui"
const { renderedColumns, scroll, hiddenColumnsWidth, width, subscribe } =
getContext("grid")
const { visibleColumns, scroll, width, subscribe } = getContext("grid")
let anchor
let open = false
$: columnsWidth = $renderedColumns.reduce(
$: columnsWidth = $visibleColumns.reduce(
(total, col) => (total += col.width),
0
)
$: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
$: end = columnsWidth - 1 - $scroll.left
$: left = Math.min($width - 40, end)
const close = () => {
@ -34,7 +33,7 @@
<Popover
bind:open
{anchor}
align={$renderedColumns.length ? "right" : "left"}
align={$visibleColumns.length ? "right" : "left"}
offset={0}
popoverTarget={document.getElementById(`add-column-button`)}
customZindex={100}

46
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View File

@ -20,7 +20,7 @@
datasource,
subscribe,
renderedRows,
renderedColumns,
visibleColumns,
rowHeight,
hasNextPage,
maxScrollTop,
@ -38,7 +38,7 @@
let newRow = { _isNewRow: true }
let offset = 0
$: firstColumn = $stickyColumn || $renderedColumns[0]
$: firstColumn = $stickyColumn || $visibleColumns[0]
$: width = GutterWidth + ($stickyColumn?.width || 0)
$: $datasource, (visible = false)
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
@ -211,29 +211,27 @@
<div class="normal-columns" transition:fade|local={{ duration: 130 }}>
<GridScrollWrapper scrollHorizontally attachHandlers>
<div class="row">
{#each $renderedColumns as column, columnIdx}
{#each $visibleColumns as column, columnIdx}
{@const cellId = `new-${column.name}`}
{#key cellId}
<DataCell
{cellId}
{column}
{updateValue}
rowFocused
row={newRow}
focused={$focusedCellId === cellId}
width={column.width}
topRow={offset === 0}
invertX={columnIdx >= $columnHorizontalInversionIndex}
{invertY}
>
{#if column?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</DataCell>
{/key}
<DataCell
{cellId}
{column}
{updateValue}
rowFocused
row={newRow}
focused={$focusedCellId === cellId}
width={column.width}
topRow={offset === 0}
invertX={columnIdx >= $columnHorizontalInversionIndex}
{invertY}
>
{#if column?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</DataCell>
{/each}
</div>
</GridScrollWrapper>

4
packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import { GutterWidth } from "../lib/constants"
const { resize, renderedColumns, stickyColumn, isReordering, scrollLeft } =
const { resize, visibleColumns, stickyColumn, isReordering, scrollLeft } =
getContext("grid")
$: offset = GutterWidth + ($stickyColumn?.width || 0)
@ -26,7 +26,7 @@
<div class="resize-indicator" />
</div>
{/if}
{#each $renderedColumns as column}
{#each $visibleColumns as column}
<div
class="resize-slider"
class:visible={activeColumn === column.name}

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

@ -1,8 +1,7 @@
import { derived, get } from "svelte/store"
import { derived } from "svelte/store"
import {
MaxCellRenderHeight,
MaxCellRenderWidthOverflow,
MinColumnWidth,
ScrollBarSize,
} from "../lib/constants"
@ -45,66 +44,6 @@ export const deriveStores = context => {
[]
)
// Derive visible columns
const scrollLeftRounded = derived(scrollLeft, $scrollLeft => {
const interval = MinColumnWidth
return Math.round($scrollLeft / interval) * interval
})
const renderedColumns = derived(
[visibleColumns, scrollLeftRounded, width],
([$visibleColumns, $scrollLeft, $width], set) => {
if (!$visibleColumns.length) {
set([])
return
}
let startColIdx = 0
let rightEdge = $visibleColumns[0].width
while (
rightEdge < $scrollLeft &&
startColIdx < $visibleColumns.length - 1
) {
startColIdx++
rightEdge += $visibleColumns[startColIdx].width
}
let endColIdx = startColIdx + 1
let leftEdge = rightEdge
while (
leftEdge < $width + $scrollLeft &&
endColIdx < $visibleColumns.length
) {
leftEdge += $visibleColumns[endColIdx].width
endColIdx++
}
// Render an additional column on either side to account for
// debounce column updates based on scroll position
const next = $visibleColumns.slice(
Math.max(0, startColIdx - 1),
endColIdx + 1
)
const current = get(renderedColumns)
if (JSON.stringify(next) !== JSON.stringify(current)) {
set(next)
}
}
)
const hiddenColumnsWidth = derived(
[renderedColumns, visibleColumns],
([$renderedColumns, $visibleColumns]) => {
const idx = $visibleColumns.findIndex(
col => col.name === $renderedColumns[0]?.name
)
let width = 0
if (idx > 0) {
for (let i = 0; i < idx; i++) {
width += $visibleColumns[i].width
}
}
return width
},
0
)
// Determine the row index at which we should start vertically inverting cell
// dropdowns
const rowVerticalInversionIndex = derived(
@ -130,12 +69,12 @@ export const deriveStores = context => {
// Determine the column index at which we should start horizontally inverting
// cell dropdowns
const columnHorizontalInversionIndex = derived(
[renderedColumns, scrollLeft, width],
([$renderedColumns, $scrollLeft, $width]) => {
[visibleColumns, scrollLeft, width],
([$visibleColumns, $scrollLeft, $width]) => {
const cutoff = $width + $scrollLeft - ScrollBarSize * 3
let inversionIdx = $renderedColumns.length
for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
let inversionIdx = $visibleColumns.length
for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
break
}
@ -148,8 +87,6 @@ export const deriveStores = context => {
scrolledRowCount,
visualRowCapacity,
renderedRows,
renderedColumns,
hiddenColumnsWidth,
rowVerticalInversionIndex,
columnHorizontalInversionIndex,
}