From 7fa976ba5e05c5e709ece2086dd8cc5bfd84fa25 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 12 Apr 2023 09:51:49 +0100 Subject: [PATCH] Simplify logic for reordering and add new overlay. Simplify sheet cells --- .../components/sheet/cells/DataCell.svelte | 13 ++-- .../components/sheet/cells/HeaderCell.svelte | 5 +- .../components/sheet/cells/JSONCell.svelte | 2 +- .../components/sheet/cells/SheetCell.svelte | 42 +++---------- .../components/sheet/layout/HeaderRow.svelte | 2 +- .../components/sheet/layout/NewRowTop.svelte | 2 +- .../src/components/sheet/layout/Sheet.svelte | 9 +-- .../components/sheet/layout/SheetBody.svelte | 2 +- .../components/sheet/layout/SheetRow.svelte | 9 ++- .../sheet/layout/SheetScrollWrapper.svelte | 6 +- .../sheet/layout/StickyColumn.svelte | 15 ++--- .../sheet/overlays/ReorderOverlay.svelte | 60 +++++++++++++++++++ .../src/components/sheet/stores/index.js | 10 ++-- packages/frontend-core/src/fetch/DataFetch.js | 1 - 14 files changed, 101 insertions(+), 77 deletions(-) create mode 100644 packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte diff --git a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte index 0f846d2b2f..3649ecb299 100644 --- a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte @@ -7,14 +7,12 @@ const { rows, focusedCellId, focusedCellAPI, menu, config, validation } = getContext("sheet") - export let rowSelected - export let rowHovered + export let highlighted + export let selected export let rowFocused export let rowIdx export let focused export let selectedUser - export let reorderSource - export let reorderTarget export let column export let row export let cellId @@ -58,14 +56,11 @@ focusedCellId.set(cellId)} on:contextmenu={e => menu.actions.open(cellId, e)} diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte index dd90ba9adb..f4e222ff53 100644 --- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte @@ -105,8 +105,6 @@ class:sorted={sortedBy} > diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte index b9b2dc03ba..376e00627e 100644 --- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte @@ -1,15 +1,11 @@
- +
{#each $renderedColumns as column, idx} diff --git a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte index 2b481171ed..1d0b234ac2 100644 --- a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte +++ b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte @@ -118,7 +118,7 @@ {/if}
- +
{#each $visibleColumns as column} {@const cellId = `new-${column.name}`} diff --git a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte index b6d5137803..4f809ca225 100644 --- a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte +++ b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte @@ -3,10 +3,11 @@ import { writable } from "svelte/store" import { createEventManagers } from "../lib/events" import { createAPIClient } from "../../../api" - import { createStores } from "../stores" + import { attachStores } from "../stores" import DeleteButton from "../controls/DeleteButton.svelte" import SheetBody from "./SheetBody.svelte" import ResizeOverlay from "../overlays/ResizeOverlay.svelte" + import ReorderOverlay from "../overlays/ReorderOverlay.svelte" import HeaderRow from "./HeaderRow.svelte" import ScrollOverlay from "../overlays/ScrollOverlay.svelte" import MenuOverlay from "../overlays/MenuOverlay.svelte" @@ -54,7 +55,7 @@ tableId: tableIdStore, } context = { ...context, ...createEventManagers() } - context = { ...context, ...createStores(context) } + context = attachStores(context) // Reference some stores for local use const { isResizing, isReordering, ui, loaded, rowHeight } = context @@ -111,6 +112,7 @@
+
@@ -135,9 +137,9 @@ --cell-background-hover: var(--spectrum-global-color-gray-100); --cell-padding: 10px; --cell-spacing: 4px; + --cell-border: 1px solid var(--spectrum-global-color-gray-200); --cell-font-size: 14px; --controls-height: 50px; - --cell-border: 1px solid var(--spectrum-global-color-gray-200); } .sheet, .sheet :global(*) { @@ -161,7 +163,6 @@ .sheet-data-outer { height: 0; flex-direction: column; - /*background: var(--spectrum-global-color-gray-75);*/ background: var(--cell-background); } .sheet-data-inner { diff --git a/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte b/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte index ef335074e2..6b82dd3068 100644 --- a/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte +++ b/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte @@ -25,7 +25,7 @@
- + {#each $renderedRows as row, idx} = inversionIdx} /> {/each} diff --git a/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte b/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte index 8f97dea33f..81cd2a31a3 100644 --- a/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte +++ b/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte @@ -21,6 +21,7 @@ $: rowSelected = !!$selectedRows[row._id] $: rowHovered = $hoveredRowId === row._id $: rowFocused = $focusedRow?._id === row._id + $: reorderSource = $reorder.sourceColumn $: cols = rowFocused ? $visibleColumns : $renderedColumns $: foo = `margin-left: ${-1 * $hiddenColumnsWidth}px;` @@ -35,18 +36,16 @@ {#each cols as column (column.name)} {@const cellId = `${row._id}-${column.name}`} {/each} diff --git a/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte b/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte index 907f69aae6..3c6fe0c094 100644 --- a/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte +++ b/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte @@ -14,9 +14,9 @@ hiddenColumnsWidth, } = getContext("sheet") - export let scrollVertically = true - export let scrollHorizontally = true - export let wheelInteractive = true + export let scrollVertically = false + export let scrollHorizontally = false + export let wheelInteractive = false export let foo = false $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth, foo) diff --git a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte index cf102a2cd0..6b25aa87e8 100644 --- a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte @@ -13,8 +13,6 @@ renderedRows, focusedCellId, hoveredRowId, - scroll, - reorder, config, selectedCellMap, focusedRow, @@ -86,7 +84,7 @@
($hoveredRowId = null)}> - + {#each $renderedRows as row, idx} {@const rowSelected = !!$selectedRows[row._id]} {@const rowHovered = $hoveredRowId === row._id} @@ -99,9 +97,8 @@ >
{#if $stickyColumn} + import { getContext } from "svelte" + import SheetScrollWrapper from "../layout/SheetScrollWrapper.svelte" + + const { + isReordering, + reorder, + visibleColumns, + gutterWidth, + stickyColumn, + rowHeight, + renderedRows, + } = getContext("sheet") + + $: targetColumn = $reorder.targetColumn + $: left = getLeft(targetColumn, $stickyColumn, $visibleColumns) + $: height = $rowHeight * ($renderedRows.length + 1) + $: style = `left:${left}px; height:${height}px;` + + const getLeft = (targetColumn, stickyColumn, visibleColumns) => { + let left = gutterWidth + (stickyColumn?.width || 0) + + // If this is not the sticky column, add additional left space + if (targetColumn !== stickyColumn?.name) { + const column = visibleColumns.find(x => x.name === targetColumn) + if (!column) { + return left + } + left += column.left + column.width + } + + return left + } + + +{#if $isReordering} +
+ +
+ +
+{/if} + + diff --git a/packages/frontend-core/src/components/sheet/stores/index.js b/packages/frontend-core/src/components/sheet/stores/index.js index 2c88d685e3..1b62b21f9a 100644 --- a/packages/frontend-core/src/components/sheet/stores/index.js +++ b/packages/frontend-core/src/components/sheet/stores/index.js @@ -26,18 +26,16 @@ const DependencyOrderedStores = [ Pagination, ] -export const createStores = context => { - let stores = {} - +export const attachStores = context => { // Atomic store creation for (let store of DependencyOrderedStores) { - stores = { ...stores, ...store.createStores?.({ ...context, ...stores }) } + context = { ...context, ...store.createStores?.(context) } } // Derived store creation for (let store of DependencyOrderedStores) { - stores = { ...stores, ...store.deriveStores?.({ ...context, ...stores }) } + context = { ...context, ...store.deriveStores?.(context) } } - return stores + return context } diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js index 657dae096f..f7e1b856d4 100644 --- a/packages/frontend-core/src/fetch/DataFetch.js +++ b/packages/frontend-core/src/fetch/DataFetch.js @@ -421,7 +421,6 @@ export default class DataFetch { if (state.loading || !this.options.paginate || !state.hasNextPage) { return } - console.log("NEXT PAGE") // Fetch next page const nextCursor = state.cursors[state.pageNumber + 1]