Simplify logic for reordering and add new overlay. Simplify sheet cells

2023-04-12 09:51:49 +01:00 · 2023-04-12 09:51:49 +01:00 · 7fa976ba5e
parent 38f326dce4
commit 7fa976ba5e
14 changed files with 101 additions and 77 deletions
--- 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 @@
 </script>

 <SheetCell
-  {rowSelected}
-  {rowHovered}
-  {rowFocused}
+  {highlighted}
+  {selected}
  {rowIdx}
  {focused}
  {selectedUser}
-  {reorderSource}
-  {reorderTarget}
  error={$error}
  on:click={() => focusedCellId.set(cellId)}
  on:contextmenu={e => menu.actions.open(cellId, e)}
--- 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}
 >
  <SheetCell
-    reorderSource={$reorder.sourceColumn === column.name}
-    reorderTarget={$reorder.targetColumn === column.name}
    on:mousedown={onMouseDown}
    on:mouseup={onMouseUp}
    on:contextmenu={onContextMenu}
@ -178,6 +176,9 @@
  .header-cell {
    display: flex;
  }
+  .header-cell.disabled {
+    pointer-events: none;
+  }
  .header-cell :global(.cell) {
    padding: 0 var(--cell-padding);
    gap: calc(2 * var(--cell-spacing));
--- a/packages/frontend-core/src/components/sheet/cells/JSONCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/JSONCell.svelte
@ -28,7 +28,7 @@
      const parsed = JSON.parse(trimmed)
      onChange(parsed)
    } catch (error) {
-      console.log("error parsing")
+      // Swallow
    }
  }
 </script>
--- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
@ -1,15 +1,11 @@
 <script>
-  export let rowSelected = false
-  export let rowHovered = false
-  export let rowFocused = false
  export let focused = false
-  export let reorderSource = false
-  export let reorderTarget = false
+  export let selected = false
+  export let highlighted = false
  export let width = ""
-  export let center = false
  export let selectedUser = null
-  export let rowIdx
  export let error = null
+  export let rowIdx

  $: style = getStyle(width, selectedUser)

@ -24,15 +20,11 @@

 <div
  class="cell"
-  class:row-selected={rowSelected}
-  class:row-hovered={rowHovered}
-  class:row-focused={rowFocused}
+  class:selected
+  class:highlighted
  class:focused
-  class:selected-other={selectedUser != null}
-  class:reorder-source={reorderSource}
-  class:reorder-target={reorderTarget}
-  class:center
  class:error
+  class:selected-other={selectedUser != null}
  on:focus
  on:mousedown
  on:mouseup
@ -119,29 +111,13 @@
  .cell:hover {
    cursor: default;
  }
-  .cell.row-hovered,
-  .cell.row-focused {
+  .cell.highlighted,
+  .cell.focused {
    --cell-background: var(--cell-background-hover);
  }
-  .cell.row-selected {
+  .cell.selected {
    --cell-background: var(--spectrum-global-color-blue-100);
  }
-  .cell.center {
-    justify-content: center;
-  }
-
-  /* Reorder styles */
-  .cell.reorder-source {
-    --cell-background: var(--spectrum-global-color-gray-100);
-  }
-  .cell.reorder-target:after {
-    content: " ";
-    position: absolute;
-    right: 0;
-    background: var(--spectrum-global-color-blue-400);
-    width: 2px;
-    height: calc(var(--row-height) + 2px);
-  }

  /* Label for additional text */
  .label {
--- a/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
@ -7,7 +7,7 @@
 </script>

 <div class="header">
-  <SheetScrollWrapper scrollVertically={false} wheelInteractive={false}>
+  <SheetScrollWrapper scrollHorizontally>
    <div class="row">
      {#each $renderedColumns as column, idx}
        <HeaderCell {column} {idx} />
--- 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}
        </div>

-        <SheetScrollWrapper scrollVertically={false} foo>
+        <SheetScrollWrapper scrollHorizontally wheelInteractive foo>
          <div class="row">
            {#each $visibleColumns as column}
              {@const cellId = `new-${column.name}`}
--- 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 @@
        </div>
        <div class="overlays">
          <ResizeOverlay />
+          <ReorderOverlay />
          <ScrollOverlay />
          <MenuOverlay />
        </div>
@ -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 {
--- a/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte
@ -25,7 +25,7 @@
 </script>

 <div bind:this={body} class="sheet-body">
-  <SheetScrollWrapper>
+  <SheetScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
    {#each $renderedRows as row, idx}
      <SheetRow {row} {idx} invert={idx >= inversionIdx} />
    {/each}
--- 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;`
 </script>
@ -35,18 +36,16 @@
  {#each cols as column (column.name)}
    {@const cellId = `${row._id}-${column.name}`}
    <DataCell
-      {rowSelected}
-      {rowHovered}
-      {rowFocused}
      {cellId}
      {column}
      {row}
      {invert}
+      {rowFocused}
+      highlighted={rowHovered || rowFocused || reorderSource === column.name}
+      selected={rowSelected}
      rowIdx={idx}
      focused={$focusedCellId === cellId}
      selectedUser={$selectedCellMap[cellId]}
-      reorderSource={$reorder.sourceColumn === column.name}
-      reorderTarget={$reorder.targetColumn === column.name}
      width={column.width}
    />
  {/each}
--- 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)
--- 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 @@
  </div>

  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <SheetScrollWrapper scrollHorizontally={false}>
+    <SheetScrollWrapper scrollVertically wheelInteractive>
      {#each $renderedRows as row, idx}
        {@const rowSelected = !!$selectedRows[row._id]}
        {@const rowHovered = $hoveredRowId === row._id}
@ -99,9 +97,8 @@
        >
          <SheetCell
            width={gutterWidth}
-            {rowSelected}
-            {rowFocused}
-            {rowHovered}
+            highlighted={rowFocused || rowHovered}
+            selected={rowSelected}
          >
            <div class="gutter">
              <div
@ -135,14 +132,12 @@
          </SheetCell>
          {#if $stickyColumn}
            <DataCell
-              {rowSelected}
-              {rowHovered}
-              {rowFocused}
+              selected={rowSelected}
+              highlighted={rowHovered || rowFocused}
              rowIdx={idx}
              focused={$focusedCellId === cellId}
              selectedUser={$selectedCellMap[cellId]}
              width={$stickyColumn.width}
-              reorderTarget={$reorder.targetColumn === $stickyColumn.name}
              column={$stickyColumn}
              {row}
              {cellId}
--- a/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte
@ -0,0 +1,60 @@
+<script>
+  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
+  }
+</script>
+
+{#if $isReordering}
+  <div class="reorder-wrapper">
+    <SheetScrollWrapper scrollVertically>
+      <div class="reorder-overlay" {style} />
+    </SheetScrollWrapper>
+  </div>
+{/if}
+
+<style>
+  .reorder-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+  .reorder-overlay {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background: var(--spectrum-global-color-blue-400);
+    margin-left: -2px;
+  }
+</style>
--- 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
 }
--- 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]