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

Fix issue reordering columns in firefox and increase performance

This commit is contained in:
Andrew Kingston 2023-02-28 14:31:58 +00:00
parent 26ca96eaa9
commit 878ebfb8c5
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend-core/src/components/sheet/NewRow.svelte
View File

@ -3,7 +3,7 @@
import { Icon } from "@budibase/bbui" import { Icon } from "@budibase/bbui"
import { getContext } from "svelte" import { getContext } from "svelte"
const { visibleColumns, cellHeight, rows, selectedCellId } = const { visibleColumns, cellHeight, rows, selectedCellId, reorder } =
getContext("spreadsheet") getContext("spreadsheet")
const addRow = async field => { const addRow = async field => {
@ -24,6 +24,8 @@
on:click={() => addRow(column)} on:click={() => addRow(column)}
width={column.width} width={column.width}
left={column.left} left={column.left}
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
/> />
{/each} {/each}
</div> </div>

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

@ -1,7 +1,8 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
const { columns, rand, scroll, visibleColumns } = getContext("spreadsheet") const { visibleRows, columns, rand, scroll, visibleColumns, cellHeight } =
getContext("spreadsheet")
const MinColumnWidth = 100 const MinColumnWidth = 100
let initialMouseX = null let initialMouseX = null
@ -12,6 +13,8 @@
let columnCount = 0 let columnCount = 0
$: cutoff = $scroll.left + 40 + $columns[0]?.width || 0 $: cutoff = $scroll.left + 40 + $columns[0]?.width || 0
$: scrollLeft = $scroll.left
$: rowCount = $visibleRows.length
const startResizing = (idx, e) => { const startResizing = (idx, e) => {
// Prevent propagation to stop reordering triggering // Prevent propagation to stop reordering triggering
@ -45,7 +48,7 @@
state[i].left = offset state[i].left = offset
offset += state[i].width offset += state[i].width
} }
return state return [...state]
}) })
width = newWidth width = newWidth
@ -57,6 +60,13 @@
document.removeEventListener("mouseup", stopResizing) document.removeEventListener("mouseup", stopResizing)
document.getElementById(`sheet-${rand}`).classList.remove("is-resizing") document.getElementById(`sheet-${rand}`).classList.remove("is-resizing")
} }
const getStyle = (col, scrollLeft, rowCount) => {
console.log("stye")
const left = col.left + col.width - (col.idx === 0 ? 0 : scrollLeft)
const contentHeight = (rowCount + 2) * cellHeight
return `--left:${left}px; --content-height:${contentHeight}px;`
}
</script> </script>
{#each $visibleColumns as col} {#each $visibleColumns as col}
@ -65,9 +75,7 @@
class="resize-slider" class="resize-slider"
class:visible={columnIdx === col.idx} class:visible={columnIdx === col.idx}
on:mousedown={e => startResizing(col.idx, e)} on:mousedown={e => startResizing(col.idx, e)}
style="--left:{col.left + style={getStyle(col, scrollLeft, rowCount)}
col.width -
(col.idx === 0 ? 0 : $scroll.left)}px;"
> >
<div class="resize-indicator" /> <div class="resize-indicator" />
</div> </div>
@ -90,7 +98,7 @@
.resize-slider.visible { .resize-slider.visible {
cursor: col-resize; cursor: col-resize;
opacity: 1; opacity: 1;
height: calc(100% - var(--controls-height)); height: min(var(--content-height), calc(100% - var(--controls-height)));
} }
.resize-indicator { .resize-indicator {
margin-left: -1px; margin-left: -1px;