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

Test absolute positioning

This commit is contained in:
Andrew Kingston 2023-02-24 09:46:44 +00:00
parent b8e7e0b701
commit 3ab0e95032
5 changed files with 185 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
View File

@ -92,9 +92,10 @@
if (primaryDisplay) { if (primaryDisplay) {
fields = [primaryDisplay, ...fields.filter(x => x !== primaryDisplay)] fields = [primaryDisplay, ...fields.filter(x => x !== primaryDisplay)]
} }
$columns = fields.map(field => ({ $columns = fields.map((field, idx) => ({
name: field, name: field,
width: defaultWidth, width: defaultWidth,
left: 40 + idx * defaultWidth,
schema: schema[field], schema: schema[field],
primaryDisplay: field === primaryDisplay, primaryDisplay: field === primaryDisplay,
})) }))
@ -179,47 +180,56 @@
resize, resize,
spreadsheetAPI, spreadsheetAPI,
}) })
let sheetStyles = ""
let left = 40
for (let i = 0; i < 20; i++) {
sheetStyles += `--col-${i}-width:${160}px; --col-${i}-left:${left}px;`
left += 160
}
</script> </script>
<div use:styleable={$component.styles}> <div use:styleable={$component.styles}>
<div <div
class="wrapper" class="wrapper"
class:resize={$resize.columnIdx != null} class:resize={$resize.columnIdx != null}
style="--cell-height:{cellHeight}px;" style="--cell-height:{cellHeight}px;{sheetStyles}"
id="sheet-{rand}"
> >
<SpreadsheetHeader /> <SpreadsheetHeader />
<SpreadsheetBody> <SpreadsheetBody>
<!-- Field headers --> <div class="row" style="top: 0;">
<SpreadsheetCell header label on:click={selectAll}> <!-- Field headers -->
<input <SpreadsheetCell header label on:click={selectAll} width="40" left="0">
type="checkbox" <input
checked={rowCount && selectedRowCount === rowCount} type="checkbox"
/> checked={rowCount && selectedRowCount === rowCount}
</SpreadsheetCell>
{#each $columns as field, fieldIdx}
<SpreadsheetCell
header
sticky={fieldIdx === 0}
reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)}
id={`sheet-${rand}-header-${fieldIdx}`}
>
<Icon
size="S"
name={getIconForField(field)}
color="var(--spectrum-global-color-gray-600)"
/> />
<span>
{field.name}
</span>
<ResizeSlider columnIdx={fieldIdx} />
</SpreadsheetCell> </SpreadsheetCell>
{/each} {#each $columns as field, fieldIdx}
<SpacerCell <SpreadsheetCell
header header
reorderTarget={$reorder.swapColumnIdx === $columns.length} sticky={fieldIdx === 0}
/> reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)}
id={`sheet-${rand}-header-${fieldIdx}`}
width={field.width}
left={field.left}
column={fieldIdx}
>
<Icon
size="S"
name={getIconForField(field)}
color="var(--spectrum-global-color-gray-600)"
/>
<span>
{field.name}
</span>
<ResizeSlider columnIdx={fieldIdx} />
</SpreadsheetCell>
{/each}
</div>
<!-- All real rows --> <!-- All real rows -->
{#each $rows as row, rowIdx (row._id)} {#each $rows as row, rowIdx (row._id)}
@ -227,28 +237,30 @@
{/each} {/each}
<!-- New row placeholder --> <!-- New row placeholder -->
<SpreadsheetCell <div class="row" style="top:{($rows.length + 1) * cellHeight}px;">
label
on:click={addRow}
on:mouseenter={() => ($hoveredRowId = "new")}
rowHovered={$hoveredRowId === "new"}
>
<Icon hoverable name="Add" size="S" />
</SpreadsheetCell>
{#each $columns as field, fieldIdx}
<SpreadsheetCell <SpreadsheetCell
sticky={fieldIdx === 0} label
rowHovered={$hoveredRowId === "new"} on:click={addRow}
reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:click={() => addRow(field)}
on:mouseenter={() => ($hoveredRowId = "new")} on:mouseenter={() => ($hoveredRowId = "new")}
/> rowHovered={$hoveredRowId === "new"}
{/each} width="40"
<SpacerCell reorderTarget={$reorder.swapColumnIdx === $columns.length} /> left="0"
>
<!-- Vertical spacer to pad bottom of sheet --> <Icon hoverable name="Add" size="S" />
<VerticalSpacer /> </SpreadsheetCell>
{#each $columns as field, fieldIdx}
<SpreadsheetCell
sticky={fieldIdx === 0}
rowHovered={$hoveredRowId === "new"}
reorderSource={$reorder.columnIdx === fieldIdx}
reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:click={() => addRow(field)}
on:mouseenter={() => ($hoveredRowId = "new")}
width={field.width}
left={field.left}
/>
{/each}
</div>
</SpreadsheetBody> </SpreadsheetBody>
<!-- Placeholder overlay for new column position --> <!-- Placeholder overlay for new column position -->
@ -279,4 +291,10 @@
.wrapper::-webkit-scrollbar-track { .wrapper::-webkit-scrollbar-track {
background: var(--cell-background); background: var(--cell-background);
} }
.row {
display: flex;
position: sticky;
width: 100%;
}
</style> </style>

56
packages/client/src/components/app/spreadsheet/SpreadsheetBody.svelte
View File

@ -2,18 +2,31 @@
import { getContext, onMount } from "svelte" import { getContext, onMount } from "svelte"
import { Utils } from "@budibase/frontend-core" import { Utils } from "@budibase/frontend-core"
const { columns, selectedCellId, rand, visibleRows, cellHeight } = const { columns, selectedCellId, rand, visibleRows, cellHeight, rows } =
getContext("spreadsheet") getContext("spreadsheet")
let ref let ref
let height = 0 let height = 600
let horizontallyScrolled = false let horizontallyScrolled = false
let scrollTop = 0 let scrollTop = 0
$: gridStyles = getGridStyles($columns) $: gridStyles = getGridStyles($columns)
$: computeVisibleRows(scrollTop, height) $: computeVisibleRows(scrollTop, height)
$: contentHeight = ($rows.length + 2) * cellHeight + 180
$: contentWidth = computeWidth($columns)
$: console.log("new height")
const computeWidth = columns => {
console.log("width")
let width = 220
columns.forEach(col => {
width += col.width
})
return width
}
const getGridStyles = columns => { const getGridStyles = columns => {
console.log("grid")
const widths = columns?.map(x => x.width) const widths = columns?.map(x => x.width)
if (!widths?.length) { if (!widths?.length) {
return "--grid: 1fr;" return "--grid: 1fr;"
@ -30,11 +43,11 @@
scrollTop = e.target.scrollTop scrollTop = e.target.scrollTop
} }
const computeVisibleRows = Utils.debounce((scrollTop, height) => { const computeVisibleRows = (scrollTop, height) => {
const rows = Math.ceil(height / cellHeight) + 16 const rows = Math.ceil(height / cellHeight) + 8
const firstRow = Math.max(0, Math.floor(scrollTop / cellHeight) - 8) const firstRow = Math.max(0, Math.floor(scrollTop / cellHeight) - 4)
visibleRows.set([firstRow, firstRow + rows]) visibleRows.set([firstRow, firstRow + rows])
}, 50) }
// Observe and record the height of the body // Observe and record the height of the body
onMount(() => { onMount(() => {
@ -53,35 +66,28 @@
class="spreadsheet" class="spreadsheet"
class:horizontally-scrolled={horizontallyScrolled} class:horizontally-scrolled={horizontallyScrolled}
on:scroll={handleScroll} on:scroll={handleScroll}
style={gridStyles}
on:click|self={() => ($selectedCellId = null)} on:click|self={() => ($selectedCellId = null)}
id={`sheet-${rand}-body`} id={`sheet-${rand}-body`}
> >
<slot /> <div
class="content"
style="height:{contentHeight}px; width:{contentWidth}px;"
>
<slot />
</div>
</div> </div>
<style> <style>
.spreadsheet { .spreadsheet {
display: grid; display: block;
grid-template-columns: var(--grid);
justify-content: flex-start;
align-items: stretch;
overflow: auto; overflow: auto;
max-height: 600px; height: 800px;
position: relative; position: relative;
cursor: default; cursor: default;
} }
.content {
background: rgba(255, 0, 0, 0.1);
}
/* Add shadow to sticky cells when horizontally scrolled */
.horizontally-scrolled :global(.cell.sticky) {
border-right-width: 1px;
}
.horizontally-scrolled :global(.cell.sticky:after) {
content: " ";
position: absolute;
width: 10px;
left: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}
</style> </style>

6
packages/client/src/components/app/spreadsheet/SpreadsheetCell.svelte
View File

@ -9,6 +9,7 @@
export let reorderSource = false export let reorderSource = false
export let reorderTarget = false export let reorderTarget = false
export let id = null export let id = null
export let column
</script> </script>
<div <div
@ -27,6 +28,7 @@
on:click on:click
on:mousedown on:mousedown
{id} {id}
style={`width:var(--col-${column}-width); left:var(--col-${column}-left);`}
> >
<slot /> <slot />
</div> </div>
@ -48,7 +50,7 @@
font-size: var(--cell-font-size); font-size: var(--cell-font-size);
gap: var(--cell-spacing); gap: var(--cell-spacing);
background: var(--cell-background); background: var(--cell-background);
position: relative; position: absolute;
transition: border-color 130ms ease-out; transition: border-color 130ms ease-out;
} }
.cell.row-hovered { .cell.row-hovered {
@ -71,8 +73,6 @@
/* Header cells */ /* Header cells */
.cell.header { .cell.header {
background: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
position: sticky;
top: 0;
padding: 0 var(--cell-padding); padding: 0 var(--cell-padding);
z-index: 3; z-index: 3;
border-color: var(--spectrum-global-color-gray-400); border-color: var(--spectrum-global-color-gray-400);

57
packages/client/src/components/app/spreadsheet/SpreadsheetRow.svelte
View File

@ -21,6 +21,7 @@
changeCache, changeCache,
spreadsheetAPI, spreadsheetAPI,
visibleRows, visibleRows,
cellHeight,
} = getContext("spreadsheet") } = getContext("spreadsheet")
$: rowSelected = !!$selectedRows[row._id] $: rowSelected = !!$selectedRows[row._id]
@ -52,27 +53,27 @@
} }
</script> </script>
{#if !visible} {#if visible}
<div class="row-placeholder" /> <div class="row" style="--top:{(rowIdx + 1) * cellHeight}px;">
{:else} <SpreadsheetCell
<SpreadsheetCell label
label {rowSelected}
{rowSelected} {rowHovered}
{rowHovered} on:mouseenter={() => ($hoveredRowId = row._id)}
on:mouseenter={() => ($hoveredRowId = row._id)} on:click={() => selectRow(row._id)}
on:click={() => selectRow(row._id)} width="40"
> left="0"
{#if rowSelected || rowHovered} >
<input type="checkbox" checked={rowSelected} /> {#if rowSelected || rowHovered}
{:else} <input type="checkbox" checked={rowSelected} />
<span> {:else}
{rowIdx + 1} <span>
</span> {rowIdx + 1}
{/if} </span>
</SpreadsheetCell> {/if}
{#each $columns as field, fieldIdx} </SpreadsheetCell>
{@const cellIdx = `${row._id}-${field.name}`} {#each $columns as field, fieldIdx}
{#key cellIdx} {@const cellIdx = `${row._id}-${field.name}`}
<SpreadsheetCell <SpreadsheetCell
{rowSelected} {rowSelected}
{rowHovered} {rowHovered}
@ -82,6 +83,9 @@
reorderTarget={$reorder.swapColumnIdx === fieldIdx} reorderTarget={$reorder.swapColumnIdx === fieldIdx}
on:mouseenter={() => ($hoveredRowId = row._id)} on:mouseenter={() => ($hoveredRowId = row._id)}
on:click={() => ($selectedCellId = cellIdx)} on:click={() => ($selectedCellId = cellIdx)}
width={field.width}
left={field.left}
column={fieldIdx}
> >
<svelte:component <svelte:component
this={getCellForField(field)} this={getCellForField(field)}
@ -92,9 +96,8 @@
readonly={field.schema.autocolumn} readonly={field.schema.autocolumn}
/> />
</SpreadsheetCell> </SpreadsheetCell>
{/key} {/each}
{/each} </div>
<SpacerCell reorderTarget={$reorder.swapColumnIdx === $columns.length} />
{/if} {/if}
<style> <style>
@ -104,4 +107,10 @@
background: var(--cell-background); background: var(--cell-background);
grid-column: 1/-1; grid-column: 1/-1;
} }
.row {
display: flex;
position: absolute;
top: var(--top);
width: 100%;
}
</style> </style>

67
packages/client/src/components/app/spreadsheet/stores/resize.js
View File

@ -1,26 +1,39 @@
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { domDebounce } from "../../../../utils/domDebounce.js"
const MinColumnWidth = 100 const MinColumnWidth = 100
export const createResizeStore = context => { export const createResizeStore = context => {
const { columns } = context const { columns, rand } = context
const initialState = { const initialState = {
initialMouseX: null, initialMouseX: null,
initialWidth: null, initialWidth: null,
columnIdx: null, columnIdx: null,
} }
let initialWidth = 0
let width = 0
let left = 0
let initialMouseX = null
let sheet
let columnIdx = 0
let columnCount = 0
let styles
const resize = writable(initialState) const resize = writable(initialState)
const startResizing = (columnIdx, e) => { const startResizing = (idx, e) => {
// Prevent propagation to stop reordering triggering // Prevent propagation to stop reordering triggering
e.stopPropagation() e.stopPropagation()
// Update state sheet = document.getElementById(`sheet-${rand}`)
resize.set({ styles = getComputedStyle(sheet)
columnIdx, width = parseInt(styles.getPropertyValue(`--col-${idx}-width`))
initialWidth: get(columns)[columnIdx].width, left = parseInt(styles.getPropertyValue(`--col-${idx}-left`))
initialMouseX: e.clientX, initialWidth = width
}) initialMouseX = e.clientX
columnIdx = idx
columnCount = get(columns).length
// Add mouse event listeners to handle resizing // Add mouse event listeners to handle resizing
document.addEventListener("mousemove", onResizeMouseMove) document.addEventListener("mousemove", onResizeMouseMove)
@ -28,21 +41,39 @@ export const createResizeStore = context => {
} }
const onResizeMouseMove = e => { const onResizeMouseMove = e => {
const $resize = get(resize) const dx = e.clientX - initialMouseX
const dx = e.clientX - $resize.initialMouseX const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
const width = get(columns)[$resize.columnIdx].width
const newWidth = Math.max(MinColumnWidth, $resize.initialWidth + dx)
// Skip small updates if (Math.abs(width - newWidth) < 10) {
if (Math.abs(width - newWidth) < 20) {
return return
} }
let newStyle = `--col-${columnIdx}-width:${newWidth}px;`
let offset = left + newWidth
for (let i = columnIdx + 1; i < columnCount; i++) {
const colWidth = 160//parseInt(styles.getPropertyValue(`--col-${i}-width`))
newStyle += `--col-${i}-left:${offset}px;`
offset += colWidth
}
sheet.style.cssText += newStyle
width = newWidth
// Update width of column // Update width of column
columns.update(state => { // columns.update(state => {
state[$resize.columnIdx].width = newWidth // state[$resize.columnIdx].width = Math.round(newWidth)
return state //
}) // // Update left offset of other columns
// let offset = 40
// state.forEach(col => {
// col.left = offset
// offset += col.width
// })
//
// return state
// })
} }
const stopResizing = () => { const stopResizing = () => {