Fix multiple issues with z-index, reordering and resizing

packages/frontend-core/src/components/sheet/ResizeOverlay.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { get } from "svelte/store"
   import { getContext } from "svelte"
 
   const { columns, rand, scroll, visibleColumns } = getContext("spreadsheet")
@@ -12,8 +11,9 @@
   let left = 0
   let columnCount = 0
 
+  $: cutoff = $scroll.left + 40 + $columns[0]?.width || 0
+
   const startResizing = (idx, e) => {
-    const $columns = get(columns)
     // Prevent propagation to stop reordering triggering
     e.stopPropagation()
 
@@ -60,23 +60,25 @@
 </script>
 
 {#each $visibleColumns as col}
-  <div
+  {#if col.idx === 0 || col.left + col.width > cutoff}
-    class="resize-slider"
+    <div
-    class:visible={columnIdx === col.idx}
+      class="resize-slider"
-    on:mousedown={e => startResizing(col.idx, e)}
+      class:visible={columnIdx === col.idx}
-    style="--left:{col.left +
+      on:mousedown={e => startResizing(col.idx, e)}
-      col.width -
+      style="--left:{col.left +
-      (col.idx === 0 ? 0 : $scroll.left)}px;"
+        col.width -
-  >
+        (col.idx === 0 ? 0 : $scroll.left)}px;"
-    <div class="resize-indicator" />
+    >
-  </div>
+      <div class="resize-indicator" />
+    </div>
+  {/if}
 {/each}
 
 <style>
   .resize-slider {
     position: absolute;
     top: var(--controls-height);
-    z-index: 6;
+    z-index: 10;
     height: var(--cell-height);
     left: var(--left);
     opacity: 0;

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -21,13 +21,12 @@
   // Sheet constants
   const cellHeight = 36
   const limit = 100
-  const defaultWidth = 160
+  const defaultWidth = 200
   const rand = Math.random()
 
   // State stores
   const rows = writable([])
   const columns = writable([])
-  const hoveredRowId = writable(null)
   const selectedCellId = writable(null)
   const selectedRows = writable({})
   const changeCache = writable({})
@@ -44,12 +43,11 @@
   })
 
   // Build up spreadsheet context and additional stores
-  const context = {
+  let context = {
     API,
     rand,
     rows,
     columns,
-    hoveredRowId,
     selectedCellId,
     selectedRows,
     tableId,
@@ -59,8 +57,9 @@
     bounds,
     scroll,
   }
-  const { reorder, reorderPlaceholder } = createReorderStores(context)
   const { visibleRows, visibleColumns } = createViewportStores(context)
+  context = { ...context, visibleRows, visibleColumns }
+  const { reorder } = createReorderStores(context)
 
   $: query = LuceneUtils.buildLuceneQuery(filter)
   $: fetch = createFetch(tableId)
@@ -202,7 +201,6 @@
   setContext("spreadsheet", {
     ...context,
     reorder,
-    reorderPlaceholder,
     visibleRows,
     visibleColumns,
     spreadsheetAPI,
@@ -226,7 +224,9 @@
           sticky={column.idx === 0}
           reorderSource={$reorder.columnIdx === column.idx}
           reorderTarget={$reorder.swapColumnIdx === column.idx}
-          on:mousedown={e => reorder.actions.startReordering(column.idx, e)}
+          on:mousedown={column.idx === 123
+            ? null
+            : e => reorder.actions.startReordering(column.idx, e)}
           width={column.width}
           left={column.left}
         >
@@ -249,24 +249,15 @@
 
     <!-- New row placeholder -->
     <div class="row new" style="--top:{($rows.length + 1) * cellHeight}px;">
-      <SpreadsheetCell
+      <SpreadsheetCell label on:click={addRow} width="40" left="0">
-        label
-        on:click={addRow}
-        on:mouseenter={() => ($hoveredRowId = "new")}
-        rowHovered={$hoveredRowId === "new"}
-        width="40"
-        left="0"
-      >
         <Icon hoverable name="Add" size="S" />
       </SpreadsheetCell>
       {#each $visibleColumns as column}
         <SpreadsheetCell
           sticky={column.idx === 0}
-          rowHovered={$hoveredRowId === "new"}
           reorderSource={$reorder.columnIdx === column.idx}
           reorderTarget={$reorder.swapColumnIdx === column.idx}
           on:click={() => addRow(column)}
-          on:mouseenter={() => ($hoveredRowId = "new")}
           width={column.width}
           left={column.left}
         />
@@ -304,7 +295,7 @@
     position: sticky;
     top: 0;
     width: inherit;
-    z-index: 4;
+    z-index: 10;
   }
   .row.new {
     position: absolute;
@@ -313,4 +304,7 @@
   .row :global(> :last-child) {
     border-right-width: 1px;
   }
+  input[type="checkbox"] {
+    margin: 0;
+  }
 </style>

packages/frontend-core/src/components/sheet/SheetCell.svelte

@@ -1,8 +1,6 @@
 <script>
   export let header = false
   export let label = false
-  export let spacer = false
-  export let rowHovered = false
   export let rowSelected = false
   export let sticky = false
   export let selected = false
@@ -17,9 +15,7 @@
   class="cell col-{column}"
   class:header
   class:label
-  class:spacer
   class:row-selected={rowSelected}
-  class:row-hovered={rowHovered}
   class:sticky
   class:selected
   class:reorder-source={reorderSource}
@@ -53,10 +49,7 @@
     position: absolute;
     transition: border-color 130ms ease-out;
     width: var(--width);
-    transform: translateX(var(--left));
+    left: var(--left);
-  }
-  .cell.row-hovered {
-    background: var(--cell-background-hover);
   }
   .cell.selected {
     box-shadow: inset 0 0 0 2px var(--spectrum-global-color-blue-400);
@@ -68,26 +61,18 @@
   .cell:hover {
     cursor: default;
   }
-  .cell.row-selected:after {
+  .cell.row-selected {
-    pointer-events: none;
+    background-color: var(--spectrum-global-color-gray-100);
-    content: " ";
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0.2;
-    background-color: var(--spectrum-global-color-blue-600);
   }
 
   /* Header cells */
   .cell.header {
     background: var(--background);
     padding: 0 var(--cell-padding);
-    z-index: 3;
     border-color: var(--spectrum-global-color-gray-200);
     font-weight: 600;
     gap: calc(2 * var(--cell-spacing));
+    z-index: 10;
   }
   .cell.header :global(span) {
     flex: 1 1 auto;
@@ -96,20 +81,24 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
+  .cell.header:hover {
+    cursor: pointer;
+  }
+  .cell.header.sticky,
+  .cell.header.label {
+    z-index: 11;
+  }
 
   /* Sticky styles */
   .cell.sticky {
     position: sticky;
-    z-index: 2;
     border-left-width: 0;
     transform: none;
     left: 40px;
+    z-index: 5;
   }
-  .cell.sticky.selected {
+  .cell.selected.sticky {
-    z-index: 3;
+    z-index: 6;
-  }
-  .cell.header.sticky {
-    z-index: 4;
   }
 
   /* Reorder styles */
@@ -119,43 +108,22 @@
   .cell.header.reorder-source {
     background: var(--spectrum-global-color-gray-200);
   }
-  .cell.reorder-target {
+  .cell.reorder-target:after {
-    z-index: 100;
-  }
-  .cell.reorder-target:before {
     content: " ";
     position: absolute;
-    left: -2px;
+    right: 0;
     background: var(--spectrum-global-color-blue-400);
     width: 2px;
-    z-index: 100;
     height: calc(var(--cell-height) + 1px);
   }
 
   /* Label cells */
   .cell.label {
+    padding: var(--cell-padding);
     width: 40px;
-    padding: 0 12px;
     border-left-width: 0;
     position: sticky;
     left: 0;
-    z-index: 2;
+    z-index: 5;
-  }
-  .cell.label.header {
-    z-index: 4;
-  }
-  .cell.label :global(span) {
-    min-width: 14px;
-    text-align: center;
-    color: var(--spectrum-global-color-gray-500);
-  }
-  .cell.label :global(input[type="checkbox"]) {
-    margin: 0;
-  }
-
-  /* Spacer cells */
-  .cell.spacer {
-    background: none;
-    border-bottom: none;
   }
 </style>

packages/frontend-core/src/components/sheet/SheetRow.svelte

@@ -13,7 +13,6 @@
   const {
     selectedCellId,
     reorder,
-    hoveredRowId,
     selectedRows,
     changeCache,
     spreadsheetAPI,
@@ -22,9 +21,7 @@
   } = getContext("spreadsheet")
 
   $: rowSelected = !!$selectedRows[row._id]
-  $: rowHovered = $hoveredRowId === row._id
   $: data = { ...row, ...$changeCache[row._id] }
-  $: containsSelectedCell = $selectedCellId?.split("-")[0] === row._id
 
   const getCellForField = field => {
     const type = field.schema.type
@@ -50,36 +47,23 @@
   }
 </script>
 
-<div
+<div class="row" style="--top:{(row.__idx + 1) * cellHeight}px;">
-  class="row"
+  <SpreadsheetCell label {rowSelected} on:click={() => selectRow(row._id)}>
-  style="--top:{(row.__idx + 1) * cellHeight}px;"
+    <div class="checkbox" class:visible={rowSelected}>
-  class:contains-selected-cell={containsSelectedCell}
->
-  <SpreadsheetCell
-    label
-    {rowSelected}
-    {rowHovered}
-    on:mouseenter={() => ($hoveredRowId = row._id)}
-    on:click={() => selectRow(row._id)}
-  >
-    {#if rowSelected || rowHovered}
       <input type="checkbox" checked={rowSelected} />
-    {:else}
+    </div>
-      <span>
+    <div class="number" class:visible={!rowSelected}>
-        {row.__idx + 1}
+      {row.__idx + 1}
-      </span>
+    </div>
-    {/if}
   </SpreadsheetCell>
   {#each $visibleColumns as column (column.name)}
     {@const cellIdx = `${row._id}-${column.name}`}
     <SpreadsheetCell
       {rowSelected}
-      {rowHovered}
       sticky={column.idx === 0}
       selected={$selectedCellId === cellIdx}
       reorderSource={$reorder.columnIdx === column.idx}
       reorderTarget={$reorder.swapColumnIdx === column.idx}
-      on:mouseenter={() => ($hoveredRowId = row._id)}
       on:click={() => ($selectedCellId = cellIdx)}
       width={column.width}
       left={column.left}
@@ -101,14 +85,36 @@
   .row {
     display: flex;
     position: absolute;
-    top: 0;
+    top: var(--top);
-    transform: translateY(var(--top));
     width: inherit;
   }
-  .row.contains-selected-cell {
+  .row:hover :global(.cell) {
-    z-index: 1;
+    background: var(--cell-background-hover);
   }
 
+  /* Styles for label cell */
+  .checkbox {
+    display: none;
+  }
+  input[type="checkbox"] {
+    margin: 0;
+  }
+  .number {
+    display: none;
+    min-width: 14px;
+    text-align: center;
+    color: var(--spectrum-global-color-gray-500);
+  }
+  .row:hover .checkbox,
+  .checkbox.visible,
+  .number.visible {
+    display: block;
+  }
+  .row:hover .number {
+    display: none;
+  }
+
+  /* Add right border to last cell */
   .row :global(> :last-child) {
     border-right-width: 1px;
   }

packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte

@@ -151,13 +151,6 @@
       var(--cell-background) 40%
     );
   }
-  :global(.cell.hovered) .arrow {
-    background: linear-gradient(
-      to right,
-      transparent 0%,
-      var(--cell-background-hover) 40%
-    );
-  }
   .options {
     min-width: 100%;
     position: absolute;
@@ -170,7 +163,6 @@
     align-items: stretch;
     max-height: calc(6 * var(--cell-height) - 1px);
     overflow-y: auto;
-    z-index: 1;
   }
   .option {
     flex: 0 0 var(--cell-height);

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

@@ -1,7 +1,7 @@
 import { get, writable } from "svelte/store"
 
 export const createReorderStores = context => {
-  const { columns, bounds, rows, scroll, rand } = context
+  const { columns, visibleColumns, rand, scroll, bounds } = context
   const reorderInitialState = {
     columnIdx: null,
     swapColumnIdx: null,
@@ -10,33 +10,14 @@ export const createReorderStores = context => {
   }
   const reorder = writable(reorderInitialState)
 
-  // This is broken into its own store as it is rapidly updated, and we want to
-  // ensure good performance by avoiding updating other components which depend
-  // on other reordering state
-  const placeholderInitialState = {
-    x: null,
-    initialX: null,
-    width: null,
-    height: null,
-  }
-  const placeholder = writable(placeholderInitialState)
-
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (columnIdx, e) => {
     const $columns = get(columns)
     const $bounds = get(bounds)
-    const $rows = get(rows)
     const $scroll = get(scroll)
 
     // Generate new breakpoints for the current columns
-    let breakpoints = []
+    let breakpoints = $columns.map(col => col.left + col.width)
-    $columns.forEach((col, idx) => {
-      breakpoints.push(col.left)
-      if (idx === $columns.length - 1) {
-        breakpoints.push(col.left + col.width)
-      }
-    })
-    const self = $columns[columnIdx]
 
     // Update state
     reorder.set({
@@ -44,15 +25,8 @@ export const createReorderStores = context => {
       breakpoints,
       swapColumnIdx: null,
       initialMouseX: e.clientX,
-    })
-    placeholder.set({
-      initialX: self.left,
-      x: self.left,
-      width: self.width,
-      height: ($rows.length + 2) * 32,
-      sheetLeft: $bounds.left,
-      maxX: $bounds.width - self.width,
       scrollLeft: $scroll.left,
+      sheetLeft: $bounds.left,
     })
 
     // Add listeners to handle mouse movement
@@ -71,34 +45,18 @@ export const createReorderStores = context => {
       return
     }
 
-    // Compute new placeholder position
-    const $placeholder = get(placeholder)
-    let newX =
-      e.clientX -
-      $reorder.initialMouseX +
-      $placeholder.initialX -
-      $placeholder.scrollLeft
-    newX = Math.max(0, newX)
-    newX = Math.min($placeholder.maxX, newX)
-
     // Compute the closest breakpoint to the current position
     let swapColumnIdx
     let minDistance = Number.MAX_SAFE_INTEGER
+    const mouseX = e.clientX - $reorder.sheetLeft + $reorder.scrollLeft
     $reorder.breakpoints.forEach((point, idx) => {
-      const distance = Math.abs(
+      const distance = Math.abs(point - mouseX)
-        point - e.clientX + $placeholder.sheetLeft - $placeholder.scrollLeft
-      )
       if (distance < minDistance) {
         minDistance = distance
         swapColumnIdx = idx
       }
     })
 
-    // Update state
-    placeholder.update(state => {
-      state.x = newX
-      return state
-    })
     if (swapColumnIdx !== $reorder.swapColumnIdx) {
       reorder.update(state => {
         state.swapColumnIdx = swapColumnIdx
@@ -111,6 +69,7 @@ export const createReorderStores = context => {
   const stopReordering = () => {
     // Swap position of columns
     let { columnIdx, swapColumnIdx } = get(reorder)
+    swapColumnIdx++
     columns.update(state => {
       const removed = state.splice(columnIdx, 1)
       if (--swapColumnIdx < columnIdx) {
@@ -131,7 +90,6 @@ export const createReorderStores = context => {
 
     // Reset state
     reorder.set(reorderInitialState)
-    placeholder.set(placeholderInitialState)
 
     // Remove event handlers
     document.removeEventListener("mousemove", onReorderMouseMove)
@@ -147,6 +105,5 @@ export const createReorderStores = context => {
         stopReordering,
       },
     },
-    reorderPlaceholder: placeholder,
   }
 }

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

@@ -1,4 +1,5 @@
 import { writable, derived } from "svelte/store"
+import { Utils } from "../../../utils"
 
 export const createViewportStores = context => {
   const { cellHeight, columns, rows, scroll, bounds } = context
@@ -16,15 +17,17 @@ export const createViewportStores = context => {
 
   // Debounce scroll updates so we can slow down visible row computation
   scroll.subscribe(({ left, top }) => {
-    // Only update local state when big changes occur
+    window.requestAnimationFrame(() => {
-    if (Math.abs(top - scrollTop) > cellHeight * 2) {
+      // Only update local state when big changes occur
-      scrollTop = top
+      if (Math.abs(top - scrollTop) > cellHeight * 2) {
-      scrollTopStore.set(top)
+        scrollTop = top
-    }
+        scrollTopStore.set(top)
-    if (Math.abs(left - scrollLeft) > 100) {
+      }
-      scrollLeft = left
+      if (Math.abs(left - scrollLeft) > 100) {
-      scrollLeftStore.set(left)
+        scrollLeft = left
-    }
+        scrollLeftStore.set(left)
+      }
+    })
   })
 
   // Derive visible rows
@@ -32,8 +35,8 @@ export const createViewportStores = context => {
     [rows, scrollTopStore, height],
     ([$rows, $scrollTop, $height]) => {
       console.log("new rows")
-      const maxRows = Math.ceil($height / cellHeight) + 8
+      const maxRows = Math.ceil($height / cellHeight) + 16
-      const firstRow = Math.max(0, Math.floor($scrollTop / cellHeight) - 4)
+      const firstRow = Math.max(0, Math.floor($scrollTop / cellHeight) - 8)
       return $rows.slice(firstRow, firstRow + maxRows)
     }
   )