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

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 highlighted
-  export let rowHovered
+  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}
+  {highlighted}
-  {rowHovered}
+  {selected}
-  {rowFocused}
   {rowIdx}
   {focused}
   {selectedUser}
-  {reorderSource}
-  {reorderTarget}
   error={$error}
   on:click={() => focusedCellId.set(cellId)}
   on:contextmenu={e => menu.actions.open(cellId, e)}

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));

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>

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 selected = false
-  export let reorderTarget = 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:selected
-  class:row-hovered={rowHovered}
+  class:highlighted
-  class:row-focused={rowFocused}
   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.highlighted,
-  .cell.row-focused {
+  .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 {

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} />

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}`}

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 {

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}

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}

packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte

@@ -14,9 +14,9 @@
     hiddenColumnsWidth,
   } = getContext("sheet")
 
-  export let scrollVertically = true
+  export let scrollVertically = false
-  export let scrollHorizontally = true
+  export let scrollHorizontally = false
-  export let wheelInteractive = true
+  export let wheelInteractive = false
   export let foo = false
 
   $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth, foo)

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}
+            highlighted={rowFocused || rowHovered}
-            {rowFocused}
+            selected={rowSelected}
-            {rowHovered}
           >
             <div class="gutter">
               <div
@@ -135,14 +132,12 @@
           </SheetCell>
           {#if $stickyColumn}
             <DataCell
-              {rowSelected}
+              selected={rowSelected}
-              {rowHovered}
+              highlighted={rowHovered || rowFocused}
-              {rowFocused}
               rowIdx={idx}
               focused={$focusedCellId === cellId}
               selectedUser={$selectedCellMap[cellId]}
               width={$stickyColumn.width}
-              reorderTarget={$reorder.targetColumn === $stickyColumn.name}
               column={$stickyColumn}
               {row}
               {cellId}

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>

packages/frontend-core/src/components/sheet/stores/index.js

@@ -26,18 +26,16 @@ const DependencyOrderedStores = [
   Pagination,
 ]
 
-export const createStores = context => {
+export const attachStores = context => {
-  let stores = {}
-
   // 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
 }

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]