From 5d06a53d37a7999b7f94ab81d3795a218edd596f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Jun 2024 18:56:59 +0100 Subject: [PATCH] Fix pixel layout issues with buttons column --- .../src/components/grid/layout/ButtonColumn.svelte | 8 ++++---- .../components/grid/layout/GridScrollWrapper.svelte | 10 ++++++---- .../components/grid/layout/NewColumnButton.svelte | 12 +++++++++--- .../src/components/grid/stores/reorder.js | 4 ++-- .../src/components/grid/stores/scroll.js | 13 +++++++------ 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte index 2266c20c4e..159f0dbd45 100644 --- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte @@ -14,7 +14,7 @@ focusedRow, selectedRows, scrollableColumns, - scroll, + scrollLeft, isDragging, buttonColumnWidth, showVScrollbar, @@ -28,8 +28,8 @@ (total, col) => (total += col.width), 0 ) - $: columnEnd = columnsWidth - $scroll.left - 1 - $: gridEnd = $width - $buttonColumnWidth + $: columnEnd = columnsWidth - $scrollLeft - 1 + $: gridEnd = $width - $buttonColumnWidth - 1 $: left = Math.min(columnEnd, gridEnd) const handleClick = async (button, row) => { @@ -41,7 +41,7 @@ onMount(() => { const observer = new ResizeObserver(entries => { const width = entries?.[0]?.contentRect?.width ?? 0 - buttonColumnWidth.set(width) + buttonColumnWidth.set(Math.floor(width) - 1) }) observer.observe(container) }) diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte index e1f3339169..d3cce30092 100644 --- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte @@ -13,6 +13,8 @@ hoveredRowId, menu, focusedCellAPI, + scrollTop, + scrollLeft, } = getContext("grid") export let scrollVertically = false @@ -24,11 +26,11 @@ let initialTouchX let initialTouchY - $: style = generateStyle($scroll, $rowHeight) + $: style = generateStyle($scrollLeft, $scrollTop, $rowHeight) - const generateStyle = (scroll, rowHeight) => { - const offsetX = scrollHorizontally ? -1 * scroll.left : 0 - const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0 + const generateStyle = (scrollLeft, scrollTop, rowHeight) => { + const offsetX = scrollHorizontally ? -1 * scrollLeft : 0 + const offsetY = scrollVertically ? -1 * (scrollTop % rowHeight) : 0 return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);` } diff --git a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte index 400ea4329f..261954379b 100644 --- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte @@ -3,8 +3,14 @@ import { Icon } from "@budibase/bbui" import GridPopover from "../overlays/GridPopover.svelte" - const { scrollableColumns, scroll, width, subscribe, ui, keyboardBlocked } = - getContext("grid") + const { + scrollableColumns, + scrollLeft, + width, + subscribe, + ui, + keyboardBlocked, + } = getContext("grid") let anchor let isOpen = false @@ -13,7 +19,7 @@ (total, col) => (total += col.width), 0 ) - $: end = columnsWidth - 1 - $scroll.left + $: end = columnsWidth - 1 - $scrollLeft $: left = Math.min($width - 40, end) $: keyboardBlocked.set(isOpen) diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js index 80a4dbca51..c15c7fbb16 100644 --- a/packages/frontend-core/src/components/grid/stores/reorder.js +++ b/packages/frontend-core/src/components/grid/stores/reorder.js @@ -119,12 +119,12 @@ export const createActions = context => { // Actual logic to consider the current position and determine the new order const considerReorderPosition = () => { const $reorder = get(reorder) - const $scroll = get(scroll) + const $scrollLeft = get(scrollLeft) // Compute the closest breakpoint to the current position let breakpoint let minDistance = Number.MAX_SAFE_INTEGER - const mouseX = latestX - $reorder.gridLeft + $scroll.left + const mouseX = latestX - $reorder.gridLeft + $scrollLeft $reorder.breakpoints.forEach(point => { const distance = Math.abs(point.x - mouseX) if (distance < minDistance) { diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js index 88d166ac9d..9411cb93f1 100644 --- a/packages/frontend-core/src/components/grid/stores/scroll.js +++ b/packages/frontend-core/src/components/grid/stores/scroll.js @@ -16,8 +16,8 @@ export const createStores = () => { }) // Derive height and width as primitives to avoid wasted computation - const scrollTop = derived(scroll, $scroll => $scroll.top, 0) - const scrollLeft = derived(scroll, $scroll => $scroll.left, 0) + const scrollTop = derived(scroll, $scroll => Math.round($scroll.top)) + const scrollLeft = derived(scroll, $scroll => Math.round($scroll.left)) return { scroll, @@ -46,11 +46,11 @@ export const deriveStores = context => { const contentWidth = derived( [visibleColumns, buttonColumnWidth], ([$visibleColumns, $buttonColumnWidth]) => { - let width = GutterWidth + $buttonColumnWidth + let width = GutterWidth + Math.max($buttonColumnWidth, HPadding) $visibleColumns.forEach(col => { width += col.width }) - return width + HPadding + return width } ) const screenWidth = derived( @@ -62,7 +62,7 @@ export const deriveStores = context => { const maxScrollLeft = derived( [contentWidth, screenWidth], ([$contentWidth, $screenWidth]) => { - return Math.max($contentWidth - $screenWidth, 0) + return Math.round(Math.max($contentWidth - $screenWidth, 0)) } ) const showHScrollbar = derived( @@ -85,7 +85,8 @@ export const deriveStores = context => { ) const maxScrollTop = derived( [height, contentHeight], - ([$height, $contentHeight]) => Math.max($contentHeight - $height, 0) + ([$height, $contentHeight]) => + Math.round(Math.max($contentHeight - $height, 0)) ) const showVScrollbar = derived( [contentHeight, height],