@svgrid/grid 3.0.3 → 3.0.5

package/src/selection.test.ts

@@ -39,6 +39,9 @@ function makeCtx(overrides: any = {}) {
     allRows: [],
     allColumns: [],
     headerSelectionState: 'none',
+    // The real controller always supplies this; a fake that omits it would
+    // make every select-all path throw rather than assert.
+    placeholderStateOf: () => null,
     userHasActivatedCell: false,
     enableCellSelectionEffective: true,
     selectionRange: { anchor: null, focus: null },
@@ -75,6 +78,8 @@ function makeCtx(overrides: any = {}) {
     // for plain drag-select. Its own behaviour is covered in move-cells.test.ts.
     trackEdgeScroll: vi.fn(),
     stopEdgeScroll: vi.fn(),
+    // Inline virtualizer sync after a programmatic scroll (scroll-sync.ts).
+    syncScrollNow: vi.fn(),
     grid: {
       setRowSelection,
       setActiveCell,
@@ -367,6 +372,19 @@ describe('createSelection - onCellPointerDown', () => {
     expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
     expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
     expect(ctx.activeAtPointerDown).toEqual({ rowIndex: 0, colIndex: 0 })
+    // The active cell stays at the anchor, as in Excel.
+    expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
+  })
+
+  it('Shift+click on a grid never clicked makes the cell active', () => {
+    const ctx = makeCtx({
+      allRows: [makeDataRow('r0'), makeDataRow('r1')],
+      allColumns: [makeColumn('c0'), makeColumn('c1')],
+      activeCell: null,
+    })
+    const sel = createSelection(ctx)
+    sel.onCellPointerDown(1, 1, { button: 0, shiftKey: true } as any)
+    expect(ctx.grid.setActiveCell).toHaveBeenCalled()
   })
 })
 
@@ -378,7 +396,7 @@ describe('createSelection - onCellPointerEnter / drag', () => {
     expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
   })
 
-  it('extends selection and moves active cell while dragging', () => {
+  it('extends the selection while dragging and leaves the active cell where the drag began', () => {
     const ctx = makeCtx({
       isDraggingSelection: true,
       selectionRange: { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } },
@@ -388,7 +406,7 @@ describe('createSelection - onCellPointerEnter / drag', () => {
     const sel = createSelection(ctx)
     sel.onCellPointerEnter(1, 1)
     expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
-    expect(ctx.grid.setActiveCell).toHaveBeenCalled()
+    expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
   })
 
   it('ignores group rows while dragging', () => {
@@ -649,6 +667,19 @@ describe('createSelection - onCellClick', () => {
     expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
   })
 
+  it('leaves the cell alone on a second click when editOnSecondClick is off', () => {
+    // A sheet: clicking the active cell again is a click, not an edit.
+    const ctx = clickCtx({
+      editingEnabled: true,
+      activeAtPointerDown: { rowIndex: 0, colIndex: 0 },
+      props: { editOnSecondClick: false },
+    })
+    const sel = createSelection(ctx)
+    sel.onCellClick(0, 0)
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+    expect(ctx.editingCell).toBeNull()
+  })
+
   it('clears editing when not re-clicking the active cell', () => {
     const ctx = clickCtx({
       editingEnabled: true,

package/src/selection.ts

@@ -14,22 +14,52 @@ import {
   getColumnBaseValue,
   isGroupRow,
 } from "./cell-values";
+import { expandRectToMerges, originOf, endOf } from "./merges";
 
 export function createSelection<
   TFeatures extends TableFeatures = TableFeatures,
   TData extends RowData = RowData,
 >(ctx: any) {
   function isRowSelected(rowId: string) {
+    const model = ctx.props.rowSelectionModel;
+    if (model) {
+      const row = ctx.allRows.find((r: any) => r.id === rowId);
+      return row ? model.isSelected(rowId, row.original) : false;
+    }
     return Boolean(ctx.rowSelectionState[rowId]);
   }
 
   function toggleRowSelectionById(rowId: string) {
+    const model = ctx.props.rowSelectionModel;
+    if (model) {
+      const row = ctx.allRows.find((r: any) => r.id === rowId);
+      if (!row) return;
+      model.toggle(rowId, row.original, !model.isSelected(rowId, row.original));
+      return;
+    }
     ctx.grid.setRowSelection((prev: any) => ({ ...prev, [rowId]: !prev[rowId] }));
   }
 
   function toggleSelectAllRows() {
-    const selectable = ctx.allRows.filter((row: any) => !isGroupRow(row));
-    const select = ctx.headerSelectionState !== "all";
+    setSelectAllRows(ctx.headerSelectionState !== "all");
+  }
+
+  /**
+   * Select or clear every row, for the header checkbox and for
+   * `api.selectAllRows()`.
+   */
+  function setSelectAllRows(select: boolean) {
+    // An external model decides what "all" means - possibly a million rows
+    // the grid has never seen - so it gets the intent, not a row list.
+    if (ctx.props.rowSelectionModel) {
+      ctx.props.rowSelectionModel.toggleAll(select);
+      return;
+    }
+    // Placeholder rows are excluded: there is no row there to select yet,
+    // and ticking one would leave a selected id that never resolves.
+    const selectable = ctx.allRows.filter(
+      (row: any) => !isGroupRow(row) && !ctx.placeholderStateOf(row),
+    );
     ctx.grid.setRowSelection((prev: any) => {
       const next = { ...prev };
       for (const row of selectable) {
@@ -41,7 +71,18 @@ export function createSelection<
   }
 
   function setActiveCell(rowIndex: number, colIndex: number) {
+    // The active cell inside a merge is its origin: the one that draws, the
+    // one the formula bar shows, the one an edit writes.
+    ({ rowIndex, colIndex } = originOf(ctx.mergeIndex, rowIndex, colIndex));
     ctx.userHasActivatedCell = true;
+    // A click, an arrow, a jump: the Tab run is over. The Tab and Enter
+    // paths put the origin back after this call when it should live on.
+    // Activating the cell the cursor is already on (typing into it, F2, a
+    // double-click) is not a move and keeps the run.
+    const prev = ctx.grid.getState().activeCell;
+    if (!prev || prev.rowIndex !== rowIndex || prev.colIndex !== colIndex) {
+      ctx.tabRunOrigin = null;
+    }
     ctx.grid.setActiveCell({
       rowIndex,
       colIndex,
@@ -64,8 +105,16 @@ export function createSelection<
     if (!ctx.scrollContainer) return;
     if (rowIndex < 0 || rowIndex >= ctx.allRows.length) return;
     if (colIndex < 0 || colIndex >= ctx.allColumns.length) return;
-
-    if (ctx.rowVirtualizationEnabled) {
+    const container = ctx.scrollContainer as HTMLElement;
+    const topBefore = container.scrollTop;
+    const leftBefore = container.scrollLeft;
+    // A frozen row is always in view; only the column may need to move.
+    const frozen: number = ctx.frozenRowCount ?? 0;
+    const frozenBand: number = ctx.frozenBandHeight ?? 0;
+
+    if (rowIndex < frozen) {
+      // Always in view; only the column below may need to move.
+    } else if (ctx.rowVirtualizationEnabled) {
       // Prefer the browser's native `scrollIntoView({ block: 'nearest' })`
       // when the target row is already mounted. It does Excel-style
       // minimum-scroll, respects the sticky thead via the
@@ -116,8 +165,10 @@ export function createSelection<
         const rowHeight    = ctx.virtualizer.getSizeForIndex(rowIndex)
         const rowBottom    = rowTopScroll + rowHeight
         let nextTop = currentTop
-        if (rowTopScroll < currentTop + headerHeight) {
-          nextTop = rowTopScroll - headerHeight
+        // The frozen band sits under the header, so a row is hidden until
+        // it clears both.
+        if (rowTopScroll < currentTop + headerHeight + frozenBand) {
+          nextTop = rowTopScroll - headerHeight - frozenBand
         } else if (rowBottom > currentTop + clientHeight) {
           nextTop = rowBottom - clientHeight
         }
@@ -170,33 +221,66 @@ export function createSelection<
     } else if (cellEnd > viewEnd) {
       ctx.scrollContainer.scrollLeft = cellEnd - ctx.scrollContainer.clientWidth;
     }
-    // No inline scrollVersion bump - the `scroll` event triggers
-    // onBodyScroll which flushes via rAF, doing one batched update.
+    // The scroll position is known right here, so hand it to the
+    // virtualizers now rather than waiting for the `scroll` event + rAF:
+    // that put the new row window one painted frame behind the active-cell
+    // move (see `syncScrollNow`). Reading the position back is cheap - the
+    // scrollIntoView / scrollTop writes above already laid the tree out.
+    const topAfter = container.scrollTop;
+    const leftAfter = container.scrollLeft;
+    if (topAfter !== topBefore || leftAfter !== leftBefore) {
+      ctx.syncScrollNow(topAfter, leftAfter);
+    }
   }
 
-  // Normalize a range to a rectangle, or null when incomplete.
+  // Normalize a range to a rectangle, or null when incomplete. A merge
+  // the rectangle touches is in it whole, as a spreadsheet's selection
+  // has it: a merged cell is one cell.
   function rangeRect(range: SelectionRange | null) {
     const a = range?.anchor;
     const f = range?.focus;
     if (!a || !f) return null;
-    return {
+    return expandRectToMerges(ctx.mergeIndex, {
       minRow: Math.min(a.rowIndex, f.rowIndex),
       maxRow: Math.max(a.rowIndex, f.rowIndex),
       minCol: Math.min(a.colIndex, f.colIndex),
       maxCol: Math.max(a.colIndex, f.colIndex),
-    };
+    });
+  }
+
+  type SelectionRect = { minRow: number; maxRow: number; minCol: number; maxCol: number };
+
+  /** The active range as a rectangle, or null while nothing is anchored. */
+  function activeRangeRect(): SelectionRect | null {
+    return rangeRect(ctx.selectionRange as SelectionRange);
   }
+  // Memo for `getSelectionRects`, keyed on the identity of its two inputs.
+  // Both are replaced wholesale on every change and never mutated in place,
+  // so identity is a complete change check. Without it, every rendered
+  // cell's outline derived rebuilt this array on every arrow key - ~300
+  // arrays plus their rect objects per key press, for a result that is the
+  // same until the selection moves.
+  let rectsForRange: SelectionRange | null = null;
+  let rectsForRanges: SelectionRange[] | null = null;
+  let rectsMemo: SelectionRect[] = [];
 
   // Every selected rectangle: the committed extra ranges plus the active one.
   // Order matters for copy (added-order); the active range comes last.
-  function getSelectionRects() {
-    const rects = [] as Array<{ minRow: number; maxRow: number; minCol: number; maxCol: number }>;
-    for (const r of (ctx.selectionRanges as SelectionRange[]) ?? []) {
+  // Callers must treat the result as read-only.
+  function getSelectionRects(): SelectionRect[] {
+    const range = ctx.selectionRange as SelectionRange;
+    const ranges = (ctx.selectionRanges as SelectionRange[]) ?? [];
+    if (range === rectsForRange && ranges === rectsForRanges) return rectsMemo;
+    const rects: SelectionRect[] = [];
+    for (const r of ranges) {
       const rect = rangeRect(r);
       if (rect) rects.push(rect);
     }
-    const active = rangeRect(ctx.selectionRange);
+    const active = rangeRect(range);
     if (active) rects.push(active);
+    rectsForRange = range;
+    rectsForRanges = ranges;
+    rectsMemo = rects;
     return rects;
   }
 
@@ -259,6 +343,9 @@ export function createSelection<
     // that work to return null every time.
     if (!hasAnySelectionRect()) return null;
 
+    // A td inside a merge draws to the merge's far corner, so its bottom and
+    // right edges are the merge's, not the cell's.
+    const end = endOf(ctx.mergeIndex, rowIndex, colIndex);
     for (const rect of getSelectionRects()) {
       if (
         rowIndex < rect.minRow ||
@@ -270,14 +357,40 @@ export function createSelection<
       }
       return {
         top: rowIndex === rect.minRow,
-        bottom: rowIndex === rect.maxRow,
+        bottom: end.rowIndex === rect.maxRow,
         left: colIndex === rect.minCol,
-        right: colIndex === rect.maxCol,
+        right: end.colIndex === rect.maxCol,
       };
     }
     return null;
   }
 
+  /**
+   * Everything a cell's outline needs from the selection model, in ONE value:
+   * whether it is the active cell, which range edges it sits on (`edges` is
+   * null when it is in no range) and whether it carries the fill handle.
+   * `null` for a cell that is none of those - nearly every cell.
+   *
+   * One value on purpose. The view reads it through a single `{@const}`, so
+   * an active-cell move re-marks one derived per rendered cell instead of
+   * three (active flag, range edges, fill handle) plus the fill handle's
+   * `{#if}`. With ~300 cells rendered, that marking was the largest single
+   * cost of an arrow key that does not scroll. A plain cell returns the same
+   * `null` it returned before the move, so its attribute effect stays put.
+   */
+  function cellSelectionState(rowIndex: number, colIndex: number) {
+    const a = ctx.activeCell;
+    const active = !!a && a.rowIndex === rowIndex && a.colIndex === colIndex;
+    const edges = getCellRangeEdges(rowIndex, colIndex);
+    const fh = ctx.fillHandleCell;
+    // The handle sits on the range's bottom-right cell; when that is inside
+    // a merge, the td that draws the merge carries it.
+    const end = fh ? endOf(ctx.mergeIndex, rowIndex, colIndex) : null;
+    const fillHandle = !!fh && !!end && fh.rowIndex === end.rowIndex && fh.colIndex === end.colIndex;
+    if (!active && !edges && !fillHandle) return null;
+    return { active, edges, fillHandle };
+  }
+
   /**
    * The rectangle a drag is currently promising, or null when no drag is in
    * flight. A fill grows the source rectangle out to the pointer; a move
@@ -395,8 +508,12 @@ export function createSelection<
       ? { rowIndex: active.rowIndex, colIndex: active.colIndex }
       : null;
     if (event.shiftKey) {
+      // The range grows to the clicked cell and the active cell stays where
+      // it is, as in Excel: it is the cell the formula bar shows and the
+      // one the next keystroke edits. Used to jump to the clicked corner,
+      // so a Shift+click to select B2:D5 then typing wrote into D5.
       extendSelection(rowIndex, colIndex);
-      setActiveCell(rowIndex, colIndex);
+      if (!active) setActiveCell(rowIndex, colIndex);
     } else {
       setActiveCell(rowIndex, colIndex);
       // Ctrl/Cmd starts an ADDITIONAL range, keeping prior ranges highlighted.
@@ -414,8 +531,9 @@ export function createSelection<
     if (!ctx.isDraggingSelection) return;
     const row = ctx.allRows[rowIndex];
     if (!row || isGroupRow(row)) return;
+    // The active cell is where the drag began; only the range's far corner
+    // follows the pointer.
     extendSelection(rowIndex, colIndex);
-    setActiveCell(rowIndex, colIndex);
   }
 
   /** `event` is the window `pointerup` when this comes from the real gesture,
@@ -550,12 +668,13 @@ export function createSelection<
     }
 
     // onCellPointerDown already set active+selection for data cells. Only
-    // decide whether to enter edit mode (click on the previously-active cell).
+    // decide whether to enter edit mode (click on the previously-active cell,
+    // unless the grid was told a second click is just a click).
     const wasActive =
       ctx.activeAtPointerDown !== null &&
       ctx.activeAtPointerDown.rowIndex === rowIndex &&
       ctx.activeAtPointerDown.colIndex === colIndex;
-    if (wasActive && ctx.editingEnabled) {
+    if (wasActive && ctx.editingEnabled && ctx.props.editOnSecondClick !== false) {
       ctx.onCellDoubleClick(rowIndex, colIndex);
       return;
     }
@@ -597,12 +716,15 @@ export function createSelection<
     isRowSelected,
     toggleRowSelectionById,
     toggleSelectAllRows,
+    setSelectAllRows,
     setActiveCell,
     scrollActiveCellIntoView,
     setSelection,
     extendSelection,
     isCellInSelectedRange,
     getCellRangeEdges,
+    activeRangeRect,
+    cellSelectionState,
     fillMarqueeEdges,
     getSelectionRects,
     isInFillPreview,