@svgrid/grid 2.6.21 → 2.7.0

package/src/column-resize.ts

@@ -0,0 +1,227 @@
+/**
+ * Column-resize Svelte action - drag a header's right edge to widen / narrow
+ * the column. Counterpart of `rowResize`, and built the same way for the same
+ * reason: `<SvGrid columnResize>` is opt-in, so the code behind it must not sit
+ * in the base bundle of every grid that leaves it off. The grid pulls this
+ * module through `import()` the first time a consumer turns the prop on.
+ *
+ * Handles are injected rather than rendered, so nothing about them compiles
+ * into `SvGrid.svelte`. A header cell is keyed by `data-svgrid-header-col` -
+ * body cells use `data-col-id`, which is a different attribute on purpose, and
+ * matching the wrong one finds nothing. One handle goes into every such `th`
+ * under `node`, and a MutationObserver keeps up with virtualized columns
+ * scrolling in and out.
+ *
+ *   <div use:columnResize={{ getWidth, onResize }}>
+ *     <SvGrid ... />
+ *   </div>
+ *
+ * Visual: a 5px strip on the header's right edge with an accent centre pill,
+ * from SvGrid.css. Cursor is `col-resize`.
+ */
+
+const HANDLE_CLASS = 'sv-grid-resize-handle'
+
+export type ColumnResizeOptions = {
+  /** Current width of a column, in px. Read when a drag starts. */
+  getWidth: (columnId: string) => number
+  /** Called on every animation frame of the drag, and once at the end. */
+  onResize: (columnId: string, width: number) => void
+  /** Accessible name for the handle. Defaults to the column id. */
+  label?: (columnId: string) => string
+  /**
+   * Per-column opt-out, backing `ColumnDef.resizable`. Returning false means no
+   * handle is created for that column at all - which is what makes the drag,
+   * the arrow keys and the double-click autosize go away together, rather than
+   * each needing its own guard.
+   */
+  canResize?: (columnId: string) => boolean
+  /** Size the column to its content. Bound to a double-click on the handle. */
+  onAutosize?: (columnId: string) => void
+  /** Minimum width in px. Default 40. */
+  min?: number
+  /** When true, the action removes its handles and ignores events. */
+  disabled?: boolean
+}
+
+type ActiveDrag = {
+  columnId: string
+  startX: number
+  startWidth: number
+  handle: HTMLElement
+}
+
+export function columnResize(node: HTMLElement, opts: ColumnResizeOptions) {
+  let current = opts
+  let drag: ActiveDrag | null = null
+  // Coalesce onto the animation frame: pointermove fires many times per frame
+  // and each width write triggers a full recompute of the column-layout
+  // pipeline. Without this the grid stutters for the whole drag.
+  let raf: number | null = null
+  let pendingWidth = 0
+
+  const minWidth = () => current.min ?? 40
+
+  function columnIdOf(el: HTMLElement): string | null {
+    return el.closest<HTMLElement>('[data-svgrid-header-col]')?.dataset.svgridHeaderCol ?? null
+  }
+
+  function commit() {
+    if (!drag) return
+    current.onResize(drag.columnId, pendingWidth)
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!drag) return
+    pendingWidth = Math.max(minWidth(), drag.startWidth + (e.clientX - drag.startX))
+    if (raf !== null) return
+    raf = requestAnimationFrame(() => {
+      raf = null
+      commit()
+    })
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    if (!drag) return
+    if (raf !== null) {
+      cancelAnimationFrame(raf)
+      raf = null
+    }
+    // Commit the final width even if the last frame was cancelled mid-flight.
+    pendingWidth = Math.max(minWidth(), drag.startWidth + (e.clientX - drag.startX))
+    commit()
+    drag.handle.classList.remove('is-resizing')
+    syncAria(drag.handle, drag.columnId)
+    try {
+      drag.handle.releasePointerCapture(e.pointerId)
+    } catch {
+      /* release is best-effort */
+    }
+    drag = null
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    window.removeEventListener('pointercancel', onPointerUp)
+    document.body.style.cursor = ''
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(HANDLE_CLASS)) return
+    const columnId = columnIdOf(t)
+    if (!columnId || current.canResize?.(columnId) === false) return
+    e.preventDefault()
+    e.stopPropagation()
+    t.classList.add('is-resizing')
+    pendingWidth = current.getWidth(columnId)
+    drag = { columnId, startX: e.clientX, startWidth: pendingWidth, handle: t }
+    try {
+      t.setPointerCapture(e.pointerId)
+    } catch {
+      /* capture is best-effort */
+    }
+    document.body.style.cursor = 'col-resize'
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+    window.addEventListener('pointercancel', onPointerUp)
+  }
+
+  /**
+   * Keyboard resize (#79). The handle is a focusable `role="separator"` acting
+   * as a splitter, so it has to answer the arrow keys. Left/Right shrink/grow,
+   * Shift gives a 1px step - the same contract `rowResize` uses vertically.
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(HANDLE_CLASS)) return
+    const step = e.shiftKey ? 1 : 10
+    let delta = 0
+    if (e.key === 'ArrowLeft') delta = -step
+    else if (e.key === 'ArrowRight') delta = step
+    else return
+    const columnId = columnIdOf(t)
+    if (!columnId || current.canResize?.(columnId) === false) return
+    e.preventDefault()
+    e.stopPropagation()
+    const next = Math.max(minWidth(), Math.round(current.getWidth(columnId) + delta))
+    current.onResize(columnId, next)
+    syncAria(t, columnId)
+  }
+
+  /** A focusable separator is a widget, so ARIA wants a current value. */
+  function syncAria(handle: HTMLElement, columnId: string) {
+    const w = Math.round(current.getWidth(columnId))
+    handle.setAttribute('aria-valuenow', String(w))
+    handle.setAttribute('aria-valuemin', String(minWidth()))
+    handle.setAttribute('aria-valuetext', `${w} pixels`)
+  }
+
+  /** One handle per header cell. Skips group headers and spacer columns,
+   *  which have no id to resize. */
+  function decorate() {
+    if (current.disabled) {
+      removeAll()
+      return
+    }
+    const heads = node.querySelectorAll<HTMLElement>('th.sv-grid-column[data-svgrid-header-col]')
+    for (const th of heads) {
+      if (th.classList.contains('sv-grid-column-spacer')) continue
+      const columnId = th.dataset.svgridHeaderCol
+      if (!columnId) continue
+      if (current.canResize?.(columnId) === false) {
+        // The column may have been resizable a moment ago - a re-decorate has
+        // to take the handle away, not just stop adding one.
+        th.querySelector(`:scope > .${HANDLE_CLASS}`)?.remove()
+        continue
+      }
+      if (th.querySelector(`:scope > .${HANDLE_CLASS}`)) continue
+      const handle = document.createElement('div')
+      handle.className = HANDLE_CLASS
+      handle.setAttribute('role', 'separator')
+      handle.setAttribute('aria-orientation', 'vertical')
+      handle.setAttribute('aria-label', `Resize ${current.label?.(columnId) ?? columnId}`)
+      handle.tabIndex = 0
+      syncAria(handle, columnId)
+      // Double-click the handle to size the column to its content - the
+      // spreadsheet gesture. Stop it there so it does not also reach the
+      // header, where a double-click would toggle the sort twice.
+      handle.addEventListener('dblclick', (ev) => {
+        ev.stopPropagation()
+        ev.preventDefault()
+        if (current.disabled) return
+        current.onAutosize?.(columnId)
+        syncAria(handle, columnId)
+      })
+      th.appendChild(handle)
+    }
+  }
+
+  function removeAll() {
+    node.querySelectorAll(`.${HANDLE_CLASS}`).forEach((el) => el.remove())
+  }
+
+  node.addEventListener('pointerdown', onPointerDown, { capture: true })
+  node.addEventListener('keydown', onKeyDown, { capture: true })
+  const observer = new MutationObserver(() => decorate())
+  observer.observe(node, { childList: true, subtree: true })
+  decorate()
+
+  return {
+    update(next: ColumnResizeOptions) {
+      const wasDisabled = current.disabled
+      current = next
+      if (wasDisabled !== current.disabled) decorate()
+    },
+    destroy() {
+      node.removeEventListener('pointerdown', onPointerDown, { capture: true })
+      node.removeEventListener('keydown', onKeyDown, { capture: true })
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('pointercancel', onPointerUp)
+      if (raf !== null) cancelAnimationFrame(raf)
+      observer.disconnect()
+      removeAll()
+    },
+  }
+}

package/src/columns.test.ts

@@ -424,109 +424,6 @@ describe('getColumnWidth', () => {
   })
 })
 
-describe('column resize lifecycle', () => {
-  let rafCb: FrameRequestCallback | null
-  beforeEach(() => {
-    rafCb = null
-    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-      rafCb = cb
-      return 1
-    })
-    vi.stubGlobal('cancelAnimationFrame', vi.fn())
-  })
-
-  it('startColumnResize seeds the resize state and registers listeners', () => {
-    const ctx = makeCtx({ columnWidths: { a: 150 } })
-    const h = createColumns(ctx)
-    const addSpy = vi.spyOn(document, 'addEventListener')
-    const e: any = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-      clientX: 500,
-    }
-    h.startColumnResize(e, 'a')
-    expect(ctx.resizingColumnId).toBe('a')
-    expect(ctx.resizeStartX).toBe(500)
-    expect(ctx.resizeStartWidth).toBe(150)
-    expect(addSpy).toHaveBeenCalledWith('pointermove', expect.any(Function))
-    addSpy.mockRestore()
-  })
-
-  it('onColumnResizeMove bails when no column is resizing', () => {
-    const ctx = makeCtx({ resizingColumnId: null })
-    const h = createColumns(ctx)
-    h.onColumnResizeMove({ clientX: 100 } as any)
-    expect(ctx.resizePendingWidth).toBe(0)
-  })
-
-  it('onColumnResizeMove clamps to MIN_COLUMN_WIDTH and commits on the frame', () => {
-    const ctx = makeCtx({
-      resizingColumnId: 'a',
-      resizeStartX: 100,
-      resizeStartWidth: 120,
-    })
-    const h = createColumns(ctx)
-    // moving far left should clamp at MIN_COLUMN_WIDTH (40)
-    h.onColumnResizeMove({ clientX: -1000 } as any)
-    expect(ctx.resizePendingWidth).toBe(40)
-    expect(rafCb).not.toBeNull()
-    rafCb!(0)
-    expect(ctx.columnWidths.a).toBe(40)
-  })
-
-  it('onColumnResizeMove grows the column and coalesces multiple moves into one frame', () => {
-    const ctx = makeCtx({
-      resizingColumnId: 'a',
-      resizeStartX: 100,
-      resizeStartWidth: 120,
-    })
-    const h = createColumns(ctx)
-    h.onColumnResizeMove({ clientX: 150 } as any) // +50 -> 170, schedules raf
-    const firstCb = rafCb
-    h.onColumnResizeMove({ clientX: 200 } as any) // +100 -> 220, raf already pending
-    expect(ctx.resizePendingWidth).toBe(220)
-    expect(rafCb).toBe(firstCb) // not rescheduled
-    rafCb!(0)
-    expect(ctx.columnWidths.a).toBe(220)
-  })
-
-  it('onColumnResizeMove skips the commit if the column stopped resizing mid-frame', () => {
-    const ctx = makeCtx({
-      resizingColumnId: 'a',
-      resizeStartX: 100,
-      resizeStartWidth: 120,
-    })
-    const h = createColumns(ctx)
-    h.onColumnResizeMove({ clientX: 150 } as any)
-    ctx.resizingColumnId = null // resize ended before the frame ran
-    rafCb!(0)
-    expect(ctx.columnWidths.a).toBeUndefined()
-  })
-
-  it('endColumnResize commits the final pending width and tears down listeners', () => {
-    const ctx = makeCtx({
-      resizingColumnId: 'a',
-      resizePendingWidth: 222,
-      resizeRaf: 9,
-    })
-    const h = createColumns(ctx)
-    const removeSpy = vi.spyOn(document, 'removeEventListener')
-    h.endColumnResize()
-    expect(ctx.columnWidths.a).toBe(222)
-    expect(ctx.resizingColumnId).toBeNull()
-    expect(ctx.resizeRaf).toBeNull()
-    expect(removeSpy).toHaveBeenCalledWith('pointermove', expect.any(Function))
-    removeSpy.mockRestore()
-  })
-
-  it('endColumnResize is safe when nothing was resizing', () => {
-    const ctx = makeCtx()
-    const h = createColumns(ctx)
-    expect(() => h.endColumnResize()).not.toThrow()
-    expect(ctx.columnWidths).toEqual({})
-  })
-})
-
 describe('measureText', () => {
   it('returns 0 for empty text', () => {
     const h = createColumns(makeCtx())

package/src/columns.ts

@@ -167,61 +167,6 @@ export function createColumns<
     return getColumnBaseWidth(columnId);
   }
 
-  function startColumnResize(event: PointerEvent, columnId: string) {
-    event.stopPropagation();
-    event.preventDefault();
-    ctx.resizingColumnId = columnId;
-    ctx.resizeStartX = event.clientX;
-    ctx.resizeStartWidth = getColumnWidth(columnId);
-    // Capture the pointer so the drag keeps tracking when it leaves the 4px
-    // handle - without this, touch (and fast mouse) drags drop mid-resize (#59).
-    try {
-      (event.currentTarget as HTMLElement | null)?.setPointerCapture?.(event.pointerId);
-    } catch { /* capture is best-effort */ }
-    document.addEventListener("pointermove", onColumnResizeMove);
-    document.addEventListener("pointerup", endColumnResize);
-    document.addEventListener("pointercancel", endColumnResize);
-  }
-
-  function onColumnResizeMove(event: PointerEvent) {
-    if (!ctx.resizingColumnId) return;
-    // Coalesce updates onto the animation frame: pointermove can fire many
-    // times per frame, and each $state mutation triggers a full reactive
-    // recompute of the column-layout pipeline. Without rAF coalescing the
-    // grid stutters during the drag.
-    ctx.resizePendingWidth = Math.max(
-      ctx.MIN_COLUMN_WIDTH,
-      ctx.resizeStartWidth + (event.clientX - ctx.resizeStartX),
-    );
-    if (ctx.resizeRaf !== null) return;
-    ctx.resizeRaf = requestAnimationFrame(() => {
-      ctx.resizeRaf = null;
-      if (!ctx.resizingColumnId) return;
-      ctx.columnWidths = {
-        ...ctx.columnWidths,
-        [ctx.resizingColumnId]: ctx.resizePendingWidth,
-      };
-    });
-  }
-
-  function endColumnResize() {
-    if (ctx.resizeRaf !== null) {
-      cancelAnimationFrame(ctx.resizeRaf);
-      ctx.resizeRaf = null;
-    }
-    if (ctx.resizingColumnId && ctx.resizePendingWidth) {
-      // Make sure the final width is committed even if the last rAF was
-      // canceled mid-flight.
-      ctx.columnWidths = {
-        ...ctx.columnWidths,
-        [ctx.resizingColumnId]: ctx.resizePendingWidth,
-      };
-    }
-    ctx.resizingColumnId = null;
-    document.removeEventListener("pointermove", onColumnResizeMove);
-    document.removeEventListener("pointerup", endColumnResize);
-    document.removeEventListener("pointercancel", endColumnResize);
-  }
 
   function measureText(text: string, font: string): number {
     if (!text) return 0;
@@ -304,9 +249,6 @@ export function createColumns<
     toggleGroupInPanel,
     getColumnBaseWidth,
     getColumnWidth,
-    startColumnResize,
-    onColumnResizeMove,
-    endColumnResize,
     measureText,
     autosizeColumn,
     autosizeAllColumns,

package/src/core.aggregate.test.ts

@@ -0,0 +1,134 @@
+/**
+ * Equivalence tests for `applyGroupAggregate`.
+ *
+ * Grouping 100k rows by two columns with three aggregators took 213ms, of which
+ * ~132ms was this function: each aggregated column of each group allocated a
+ * `raw` array, then a mapped array, then a filtered one, and `min`/`max`/
+ * `extent` finished by spreading the whole group into `Math.min(...)`.
+ * Measured by varying the aggregator count - 9 aggregated columns cost 823ms
+ * against 81ms for none.
+ *
+ * The rewrite is a single pass with no intermediate arrays. `reference` below
+ * is the original, verbatim, and every case asserts the two agree - including
+ * the awkward ones: empty groups, all-non-numeric values, -0, and the
+ * float-addition ORDER, since `reduce` and a loop must accumulate identically
+ * for the sums to match bit for bit.
+ *
+ * The spread also had a latent failure mode this fixes: `Math.min(...nums)`
+ * throws RangeError once a group is large enough to exhaust the argument
+ * stack, so `min` on a big single-bucket group could crash the grid. The last
+ * test pins that.
+ */
+import { describe, expect, it } from 'vitest'
+import { applyGroupAggregate, type GroupAggregator, type Row } from './core'
+
+/** Minimal Row stand-in: the function only ever calls getCellValueByColumnId. */
+function rowsOf(values: unknown[]): Array<Row<Record<string, unknown>>> {
+  return values.map(
+    (v, i) =>
+      ({
+        id: String(i),
+        index: i,
+        original: { v },
+        depth: 0,
+        getCanExpand: () => false,
+        getIsExpanded: () => false,
+        toggleExpanded: () => {},
+        getIsSelected: () => false,
+        toggleSelected: () => {},
+        getAllCells: () => [],
+        getCellValueByColumnId: () => v,
+      }) as unknown as Row<Record<string, unknown>>,
+  )
+}
+
+/** The original implementation, verbatim, as the oracle. */
+function reference<TData extends Record<string, unknown>>(
+  agg: GroupAggregator<TData>,
+  columnId: string,
+  rows: ReadonlyArray<Row<TData>>,
+): unknown {
+  const raw = rows.map((r) => r.getCellValueByColumnId(columnId))
+  if (typeof agg === 'function') {
+    const nums = raw.map((v) => Number(v)).filter((n) => Number.isFinite(n))
+    return agg(nums, rows.map((r) => r.original))
+  }
+  if (agg === 'count') return rows.length
+  if (agg === 'countDistinct') return new Set(raw.map((v) => String(v ?? ''))).size
+  if (agg === 'first') return raw[0]
+  const nums = raw.map((v) => Number(v)).filter((n) => Number.isFinite(n))
+  if (!nums.length) return undefined
+  switch (agg) {
+    case 'sum':
+      return nums.reduce((a, b) => a + b, 0)
+    case 'avg':
+      return nums.reduce((a, b) => a + b, 0) / nums.length
+    case 'min':
+      return Math.min(...nums)
+    case 'max':
+      return Math.max(...nums)
+    case 'extent':
+      return `${Math.min(...nums)} – ${Math.max(...nums)}`
+    default:
+      return undefined
+  }
+}
+
+const AGGS: GroupAggregator[] = ['sum', 'avg', 'min', 'max', 'count', 'countDistinct', 'extent', 'first']
+
+const DATASETS: Array<[string, unknown[]]> = [
+  ['empty', []],
+  ['single value', [5]],
+  ['plain integers', [3, 1, 2, 10, -4]],
+  ['floats that expose accumulation order', [0.1, 0.2, 0.3, 0.7, 1e-16, 1e16]],
+  ['all non-numeric', ['a', 'b', {}, [], true]],
+  ['mixed numeric and not', [1, 'x', 2, null, 3, undefined, NaN, Infinity, -Infinity]],
+  ['nulls and undefined only', [null, undefined]],
+  ['numeric strings', ['1', '2', '10']],
+  ['duplicates for countDistinct', ['a', 'a', 'b', null, undefined, '']],
+  ['negative zero', [-0, 0, 1]],
+  ['very large and small', [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER, 0]],
+  ['booleans', [true, false, true]],
+]
+
+describe('applyGroupAggregate - equivalence with the original', () => {
+  for (const [name, values] of DATASETS) {
+    for (const agg of AGGS) {
+      it(`${agg} over ${name}`, () => {
+        const rows = rowsOf(values)
+        const expected = reference(agg, 'v', rows)
+        const actual = applyGroupAggregate(agg, 'v', rows)
+        // Object.is so NaN matches NaN and -0 does not silently pass as 0.
+        expect(Object.is(actual, expected) || actual === expected).toBe(true)
+      })
+    }
+  }
+
+  it('passes finite numbers and originals to a custom aggregator, unchanged', () => {
+    const seen: Array<{ nums: number[]; count: number }> = []
+    const custom: GroupAggregator = (nums, originals) => {
+      seen.push({ nums: [...nums], count: originals.length })
+      return nums.length
+    }
+    const rows = rowsOf([1, 'x', 2, null, NaN, 3])
+    const expected = reference(custom, 'v', rows)
+    const actual = applyGroupAggregate(custom, 'v', rows)
+    expect(actual).toBe(expected)
+    // Both calls saw identical arguments.
+    expect(seen[0]).toEqual(seen[1])
+    // `null` is included: Number(null) is 0, which is finite. `'x'` and NaN are
+    // not. Worth pinning - it is the kind of coercion a rewrite silently drops.
+    expect(seen[0]!.nums).toEqual([1, 2, 0, 3])
+    expect(seen[0]!.count).toBe(6)
+  })
+
+  it('handles a group larger than the argument-spread limit', () => {
+    // The original did `Math.min(...nums)`, which throws RangeError once the
+    // group exceeds the engine's argument cap. A single bucket holding this
+    // many rows is ordinary on a large grid grouped by a low-cardinality field.
+    const rows = rowsOf(Array.from({ length: 200_000 }, (_, i) => i))
+    expect(applyGroupAggregate('min', 'v', rows)).toBe(0)
+    expect(applyGroupAggregate('max', 'v', rows)).toBe(199_999)
+    expect(applyGroupAggregate('extent', 'v', rows)).toBe('0 – 199999')
+  })
+})