@svgrid/grid 1.0.2 → 1.1.1

package/src/row-resize.test.ts

@@ -0,0 +1,369 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { rowResize } from './row-resize'
+import type { RowResizeOptions } from './row-resize'
+
+const STRIP_CLASS = 'sv-grid-row-resize-handle'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Build a host `<table>` with `rows` body rows. Each row carries the
+ *  `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
+ *  `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
+ *  let individual tests opt rows out (header / spacer / no-gutter). */
+function buildGrid(
+  specs: Array<{ rowClasses?: string[]; gutter?: boolean; rowIndex?: number }>,
+): { host: HTMLElement; rows: HTMLTableRowElement[] } {
+  const host = document.createElement('div')
+  const table = document.createElement('table')
+  const tbody = document.createElement('tbody')
+  const rows: HTMLTableRowElement[] = []
+  specs.forEach((spec, i) => {
+    const tr = document.createElement('tr')
+    tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ')
+    const cell = document.createElement('td')
+    cell.className = 'sv-grid-cell'
+    if (spec.gutter !== false) cell.classList.add('sv-row-gutter')
+    const marker = document.createElement('span')
+    marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i))
+    cell.appendChild(marker)
+    tr.appendChild(cell)
+    tbody.appendChild(tr)
+    rows.push(tr)
+  })
+  table.appendChild(tbody)
+  host.appendChild(table)
+  document.body.appendChild(host)
+  return { host, rows }
+}
+
+function gutterOf(tr: HTMLTableRowElement): HTMLTableCellElement {
+  return tr.querySelector<HTMLTableCellElement>('.sv-row-gutter')!
+}
+function stripOf(tr: HTMLTableRowElement): HTMLElement | null {
+  return tr.querySelector<HTMLElement>(`.${STRIP_CLASS}`)
+}
+
+/** Mock getBoundingClientRect so a TR reports a real height in jsdom
+ *  (which otherwise returns all-zero rects). */
+function mockRowHeight(tr: HTMLTableRowElement, height: number): void {
+  tr.getBoundingClientRect = () =>
+    ({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() {} }) as DOMRect
+}
+
+function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
+  return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init } as PointerEventInit)
+}
+
+const hosts: HTMLElement[] = []
+function track(host: HTMLElement): HTMLElement {
+  hosts.push(host)
+  return host
+}
+
+beforeEach(() => {
+  // jsdom lacks pointer-capture methods on elements; stub them so the action's
+  // try/catch wrapped calls have something to invoke.
+  if (!HTMLElement.prototype.setPointerCapture) {
+    HTMLElement.prototype.setPointerCapture = function () {}
+  }
+  if (!HTMLElement.prototype.releasePointerCapture) {
+    HTMLElement.prototype.releasePointerCapture = function () {}
+  }
+})
+
+afterEach(() => {
+  while (hosts.length) hosts.pop()!.remove()
+  document.body.innerHTML = ''
+  document.body.style.cursor = ''
+})
+
+// ---------------------------------------------------------------------------
+// decorate()
+// ---------------------------------------------------------------------------
+
+describe('rowResize - strip injection', () => {
+  it('injects a resize strip into every gutter cell', () => {
+    const { host, rows } = buildGrid([{}, {}, {}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    for (const tr of rows) {
+      const strip = stripOf(tr)
+      expect(strip).not.toBeNull()
+      expect(strip!.getAttribute('role')).toBe('separator')
+      expect(strip!.getAttribute('aria-orientation')).toBe('horizontal')
+      expect(strip!.getAttribute('aria-label')).toBe('Resize row')
+      expect(strip!.style.cursor).toBe('row-resize')
+    }
+    // Gutter cells become a positioning context with visible overflow.
+    expect(gutterOf(rows[0]).style.position).toBe('relative')
+    expect(gutterOf(rows[0]).style.overflow).toBe('visible')
+    action.destroy()
+  })
+
+  it('does not double-inject a strip on re-decorate', async () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(rows[0].querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
+    // Trigger the MutationObserver by appending an unrelated node.
+    gutterOf(rows[0]).appendChild(document.createElement('span'))
+    await Promise.resolve()
+    await new Promise((r) => setTimeout(r, 0))
+    expect(rows[0].querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
+    action.destroy()
+  })
+
+  it('skips header rows, spacer rows, and rows without a gutter cell', () => {
+    const { host, rows } = buildGrid([
+      { rowClasses: ['sv-grid-header-row'] },
+      { rowClasses: ['sv-grid-row-spacer'] },
+      { gutter: false },
+      {}, // normal row gets a strip
+    ])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(stripOf(rows[0])).toBeNull()
+    expect(stripOf(rows[1])).toBeNull()
+    expect(stripOf(rows[2])).toBeNull()
+    expect(stripOf(rows[3])).not.toBeNull()
+    action.destroy()
+  })
+
+  it('does not override an already-positioned gutter cell', () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    gutterOf(rows[0]).style.position = 'sticky'
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(gutterOf(rows[0]).style.position).toBe('sticky')
+    action.destroy()
+  })
+
+  it('injects no strips when created disabled', () => {
+    const { host, rows } = buildGrid([{}, {}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn(), disabled: true })
+    expect(stripOf(rows[0])).toBeNull()
+    expect(stripOf(rows[1])).toBeNull()
+    action.destroy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Drag lifecycle
+// ---------------------------------------------------------------------------
+
+describe('rowResize - drag', () => {
+  it('reports the new height on pointerup and fires move callbacks', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 32)
+    const onResize = vi.fn()
+    const onResizeMove = vi.fn()
+    const action = rowResize(host, { onResize, onResizeMove })
+    const strip = stripOf(rows[0])!
+
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    expect(strip.classList.contains('is-resizing')).toBe(true)
+    expect(document.body.style.cursor).toBe('row-resize')
+
+    // Drag down 20px -> 52.
+    window.dispatchEvent(pointer('pointermove', { clientY: 120 }))
+    expect(onResizeMove).toHaveBeenLastCalledWith(0, 52)
+    expect(rows[0].style.height).toBe('52px')
+
+    window.dispatchEvent(pointer('pointerup', { clientY: 120 }))
+    expect(onResize).toHaveBeenCalledWith(0, 52)
+    expect(strip.classList.contains('is-resizing')).toBe(false)
+    expect(document.body.style.cursor).toBe('')
+    action.destroy()
+  })
+
+  it('clamps the height to the min bound', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, min: 24 })
+    const strip = stripOf(rows[0])!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    // Drag far up -> would be negative, clamps to 24.
+    window.dispatchEvent(pointer('pointerup', { clientY: 0 }))
+    expect(onResize).toHaveBeenCalledWith(0, 24)
+    action.destroy()
+  })
+
+  it('clamps the height to the max bound', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, max: 50 })
+    const strip = stripOf(rows[0])!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    window.dispatchEvent(pointer('pointerup', { clientY: 1000 }))
+    expect(onResize).toHaveBeenCalledWith(0, 50)
+    action.destroy()
+  })
+
+  it('works without an onResizeMove callback (optional)', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 30)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0])!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }))
+    expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow()
+    window.dispatchEvent(pointer('pointerup', { clientY: 60 }))
+    expect(onResize).toHaveBeenCalledWith(0, 40)
+    action.destroy()
+  })
+
+  it('ignores pointermove / pointerup when no drag is active', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    const onResize = vi.fn()
+    const onResizeMove = vi.fn()
+    const action = rowResize(host, { onResize, onResizeMove })
+    // No pointerdown first - listeners were only attached on down, so these
+    // shouldn't do anything even if dispatched.
+    window.dispatchEvent(pointer('pointermove', { clientY: 10 }))
+    window.dispatchEvent(pointer('pointerup', { clientY: 10 }))
+    expect(onResize).not.toHaveBeenCalled()
+    expect(onResizeMove).not.toHaveBeenCalled()
+    action.destroy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// pointerdown guards
+// ---------------------------------------------------------------------------
+
+describe('rowResize - pointerdown guards', () => {
+  it('ignores pointerdown when disabled', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 32)
+    const onResize = vi.fn()
+    // Start enabled so a strip exists, then disable via update.
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0])!
+    action.update({ onResize, disabled: true })
+    // update removes strips, but dispatch on the (now-detached) strip anyway:
+    // even if it were still in the DOM, current.disabled short-circuits.
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
+    window.dispatchEvent(pointer('pointerup', { clientY: 50 }))
+    expect(onResize).not.toHaveBeenCalled()
+    action.destroy()
+  })
+
+  it('ignores pointerdown on a non-strip target', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    gutterOf(rows[0]).dispatchEvent(pointer('pointerdown', { clientY: 10 }))
+    expect(document.body.style.cursor).toBe('')
+    action.destroy()
+  })
+
+  it('ignores a strip whose row has a non-finite row index', () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    // Remove the data-svgrid-row marker so rowIndexOf returns NaN.
+    rows[0].querySelector('[data-svgrid-row]')!.removeAttribute('data-svgrid-row')
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0])!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
+    expect(document.body.style.cursor).toBe('')
+    expect(strip.classList.contains('is-resizing')).toBe(false)
+    action.destroy()
+  })
+
+  it('ignores a strip not inside a tr.sv-grid-row', () => {
+    const host = track(document.createElement('div'))
+    document.body.appendChild(host)
+    // A loose strip with no matching ancestor row.
+    const strip = document.createElement('div')
+    strip.className = STRIP_CLASS
+    host.appendChild(strip)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
+    expect(document.body.style.cursor).toBe('')
+    action.destroy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// update() + destroy()
+// ---------------------------------------------------------------------------
+
+describe('rowResize - update + destroy', () => {
+  it('removes strips when toggled to disabled and restores when re-enabled', () => {
+    const { host, rows } = buildGrid([{}, {}])
+    track(host)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, disabled: false })
+    expect(stripOf(rows[0])).not.toBeNull()
+
+    action.update({ onResize, disabled: true })
+    expect(stripOf(rows[0])).toBeNull()
+    expect(stripOf(rows[1])).toBeNull()
+
+    action.update({ onResize, disabled: false })
+    expect(stripOf(rows[0])).not.toBeNull()
+    action.destroy()
+  })
+
+  it('does not repaint when disabled flag is unchanged on update', () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    const firstStrip = stripOf(rows[0])
+    // Same disabled value -> decorate is NOT called, strip stays the same node.
+    action.update({ onResize: vi.fn() })
+    expect(stripOf(rows[0])).toBe(firstStrip)
+    action.destroy()
+  })
+
+  it('destroy removes all strips and detaches listeners', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    expect(stripOf(rows[0])).not.toBeNull()
+
+    action.destroy()
+    expect(stripOf(rows[0])).toBeNull()
+
+    // After destroy the pointerdown listener is gone; re-create a strip
+    // manually and confirm no drag starts.
+    const strip = document.createElement('div')
+    strip.className = STRIP_CLASS
+    gutterOf(rows[0]).appendChild(strip)
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
+    expect(document.body.style.cursor).toBe('')
+  })
+
+  it('uses default min=20 / max=320 when bounds are omitted', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0], 100)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0])!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }))
+    // Drag way past max -> clamps to 320.
+    window.dispatchEvent(pointer('pointermove', { clientY: 10000 }))
+    expect(rows[0].style.height).toBe('320px')
+    // Drag way below min -> clamps to 20.
+    window.dispatchEvent(pointer('pointerup', { clientY: -10000 }))
+    expect(onResize).toHaveBeenCalledWith(0, 20)
+    action.destroy()
+  })
+})

package/src/row-resize.ts

@@ -0,0 +1,171 @@
+/**
+ * Row-resize Svelte action - drag the bottom edge of a row to grow /
+ * shrink it. Pair with a function-valued `rowHeight` prop so the grid
+ * reads per-row heights from a reactive store.
+ *
+ * The action is OFF until a consumer attaches it AND a row-header
+ * gutter cell exists in each row. A row-header cell is any TD with
+ * the `sv-row-gutter` class (typically the one rendering the row
+ * number 1, 2, 3, ...). Demos opt in by setting
+ * `cellClass: 'sv-row-gutter'` on the gutter column.
+ *
+ *   <script>
+ *     let heights = $state<Record<number, number>>({})
+ *     let resizeOn = $state(false)
+ *     const rowHeight = (i: number) => heights[i] ?? 32
+ *     function onResize(i: number, h: number) { heights = { ...heights, [i]: h } }
+ *   </script>
+ *
+ *   <div use:rowResize={{ onResize, disabled: !resizeOn }}>
+ *     <SvGrid columns={[{ field:'rn', cellClass:'sv-row-gutter', ... }, ...]}
+ *             rowHeight={rowHeight} ... />
+ *   </div>
+ *
+ * Visual: the strip sits along the bottom edge of the row-header
+ * cell, 5px tall, transparent by default, accent-tinted on hover -
+ * matching the column resize handle's look. Cursor is `row-resize`.
+ */
+
+const STRIP_CLASS = 'sv-grid-row-resize-handle'
+
+export type RowResizeOptions = {
+  /** Called when the user releases the drag with the final height. */
+  onResize: (rowIndex: number, height: number) => void
+  /** Optional callback fired during the drag (every pointermove). */
+  onResizeMove?: (rowIndex: number, height: number) => void
+  /** Min row height in px. Default 20. */
+  min?: number
+  /** Max row height in px. Default 320. */
+  max?: number
+  /** When true, the action removes its strips and ignores events. */
+  disabled?: boolean
+}
+
+type ActiveDrag = {
+  rowIndex: number
+  startY: number
+  startHeight: number
+  trEl: HTMLTableRowElement
+  strip: HTMLElement
+}
+
+export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
+  let current = opts
+  let drag: ActiveDrag | null = null
+
+  function rowIndexOf(tr: HTMLTableRowElement): number {
+    const dataRow = tr.querySelector<HTMLElement>('[data-svgrid-row]')
+    const val = dataRow?.dataset.svgridRow
+    return val != null ? Number(val) : NaN
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!drag) return
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
+    drag.trEl.style.height = `${Math.round(next)}px`
+    current.onResizeMove?.(drag.rowIndex, Math.round(next))
+  }
+  function onPointerUp(e: PointerEvent) {
+    if (!drag) return
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
+    current.onResize(drag.rowIndex, Math.round(next))
+    drag.strip.classList.remove('is-resizing')
+    try { drag.trEl.releasePointerCapture(e.pointerId) } catch { /* ignore */ }
+    drag = null
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    document.body.style.cursor = ''
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
+    if (!tr) return
+    const rowIndex = rowIndexOf(tr)
+    if (!Number.isFinite(rowIndex)) return
+    e.preventDefault()
+    e.stopPropagation()
+    t.classList.add('is-resizing')
+    drag = {
+      rowIndex,
+      startY: e.clientY,
+      startHeight: tr.getBoundingClientRect().height,
+      trEl: tr,
+      strip: t,
+    }
+    try { tr.setPointerCapture(e.pointerId) } catch { /* ignore */ }
+    document.body.style.cursor = 'row-resize'
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+  }
+
+  /** Inject one strip into every row's gutter cell. When disabled or
+   *  when a row lacks a `.sv-row-gutter` cell, no strip is added. */
+  function decorate() {
+    if (current.disabled) {
+      removeAllStrips()
+      return
+    }
+    const rows = node.querySelectorAll<HTMLTableRowElement>('tr.sv-grid-row')
+    for (const tr of rows) {
+      if (tr.classList.contains('sv-grid-header-row')) continue
+      if (tr.classList.contains('sv-grid-row-spacer')) continue
+      const gutter = tr.querySelector<HTMLTableCellElement>(
+        '.sv-grid-cell.sv-row-gutter',
+      )
+      if (!gutter) continue
+      if (gutter.querySelector(`:scope > .${STRIP_CLASS}`)) continue
+      // Anchor the strip to the gutter cell + allow it to overflow
+      // downward into the row gap so the hit-area straddles the
+      // row boundary the way Excel does.
+      if (getComputedStyle(gutter).position === 'static') gutter.style.position = 'relative'
+      gutter.style.overflow = 'visible'
+      const strip = document.createElement('div')
+      strip.className = STRIP_CLASS
+      strip.setAttribute('role', 'separator')
+      strip.setAttribute('aria-orientation', 'horizontal')
+      strip.setAttribute('aria-label', 'Resize row')
+      // Inline the geometry + pointer-events so the strip works even
+      // before SvGrid.css is parsed; the hover tint still comes from
+      // the stylesheet. We keep the strip fully inside the gutter
+      // cell (no negative offset) to avoid stacking-context surprises
+      // with pinned / virtualised neighbour cells.
+      // 5px tall + sitting flush with the row bottom matches the
+      // column resize handle's 5px width.
+      strip.style.cssText =
+        'position:absolute;left:0;right:0;bottom:0;height:5px;' +
+        'cursor:row-resize;user-select:none;z-index:60;pointer-events:auto;'
+      gutter.appendChild(strip)
+    }
+  }
+  function removeAllStrips() {
+    node.querySelectorAll(`.${STRIP_CLASS}`).forEach((el) => el.remove())
+  }
+
+  node.addEventListener('pointerdown', onPointerDown, { capture: true })
+  const observer = new MutationObserver(() => decorate())
+  observer.observe(node, { childList: true, subtree: true })
+  decorate()
+
+  return {
+    update(next: RowResizeOptions) {
+      const wasDisabled = current.disabled
+      current = next
+      // Toggle: when going from enabled <-> disabled, repaint immediately.
+      if (wasDisabled !== current.disabled) decorate()
+    },
+    destroy() {
+      node.removeEventListener('pointerdown', onPointerDown, { capture: true })
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      observer.disconnect()
+      removeAllStrips()
+    },
+  }
+}