@svgrid/grid 3.0.0 → 3.0.2

package/src/row-resize.ts

@@ -1,228 +1,228 @@
-/**
- * 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 either the
- * grid's built-in row-number gutter (enable `showRowNumbers`) or any
- * TD tagged with the `sv-row-gutter` class (set
- * `cellClass: 'sv-row-gutter'` on a custom 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
-  /**
-   * Where the drag strip is anchored.
-   * - `'gutter'` (default) - only rows that have a row-header gutter cell get
-   *   a strip: the built-in row-number column (`showRowNumbers`) or a column
-   *   tagged `cellClass: 'sv-row-gutter'`. Rows without one are skipped, so on
-   *   a plain grid the action does nothing.
-   * - `'row'` - use the gutter when there is one, otherwise fall back to the
-   *   row's first body cell. This is what `<SvGrid rowResize>` passes, so the
-   *   prop works without also asking for a gutter column.
-   */
-  anchor?: 'gutter' | 'row'
-}
-
-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 = ''
-  }
-
-  /**
-   * Keyboard resize (#79). The strip is `role="separator"` acting as a
-   * splitter, so it has to be reachable by Tab and respond to arrow keys.
-   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
-   * contract the column resize handle uses (Left/Right, Shift = 1px).
-   */
-  function onKeyDown(e: KeyboardEvent) {
-    if (current.disabled) return
-    const t = e.target as HTMLElement | null
-    if (!t?.classList.contains(STRIP_CLASS)) return
-    const step = e.shiftKey ? 1 : 10
-    let delta = 0
-    if (e.key === 'ArrowUp') delta = -step
-    else if (e.key === 'ArrowDown') delta = step
-    else 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()
-    const min = current.min ?? 20
-    const max = current.max ?? 320
-    const next = Math.round(
-      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
-    )
-    tr.style.height = `${next}px`
-    current.onResizeMove?.(rowIndex, next)
-    current.onResize(rowIndex, next)
-  }
-
-  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
-      // A row-header gutter cell: either a user column tagged
-      // `sv-row-gutter`, or the grid's built-in row-number gutter
-      // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
-      const gutter =
-        tr.querySelector<HTMLTableCellElement>(
-          '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
-        ) ??
-        // `anchor: 'row'` - no gutter on this grid, so hang the strip off the
-        // first body cell instead. Without this a grid with no row-number
-        // column would silently not resize.
-        (current.anchor === 'row'
-          ? tr.querySelector<HTMLTableCellElement>('.sv-grid-cell')
-          : null)
-      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')
-      // A separator used as an interactive splitter has to be focusable so
-      // keyboard-only users can reach it and drive `onKeyDown` (#79).
-      strip.tabIndex = 0
-      // 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 })
-  node.addEventListener('keydown', onKeyDown, { 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 })
-      node.removeEventListener('keydown', onKeyDown, { capture: true })
-      window.removeEventListener('pointermove', onPointerMove)
-      window.removeEventListener('pointerup', onPointerUp)
-      observer.disconnect()
-      removeAllStrips()
-    },
-  }
-}
+/**
+ * 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 either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom 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
+  /**
+   * Where the drag strip is anchored.
+   * - `'gutter'` (default) - only rows that have a row-header gutter cell get
+   *   a strip: the built-in row-number column (`showRowNumbers`) or a column
+   *   tagged `cellClass: 'sv-row-gutter'`. Rows without one are skipped, so on
+   *   a plain grid the action does nothing.
+   * - `'row'` - use the gutter when there is one, otherwise fall back to the
+   *   row's first body cell. This is what `<SvGrid rowResize>` passes, so the
+   *   prop works without also asking for a gutter column.
+   */
+  anchor?: 'gutter' | 'row'
+}
+
+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 = ''
+  }
+
+  /**
+   * Keyboard resize (#79). The strip is `role="separator"` acting as a
+   * splitter, so it has to be reachable by Tab and respond to arrow keys.
+   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
+   * contract the column resize handle uses (Left/Right, Shift = 1px).
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const step = e.shiftKey ? 1 : 10
+    let delta = 0
+    if (e.key === 'ArrowUp') delta = -step
+    else if (e.key === 'ArrowDown') delta = step
+    else 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()
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.round(
+      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
+    )
+    tr.style.height = `${next}px`
+    current.onResizeMove?.(rowIndex, next)
+    current.onResize(rowIndex, next)
+  }
+
+  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
+      // A row-header gutter cell: either a user column tagged
+      // `sv-row-gutter`, or the grid's built-in row-number gutter
+      // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
+      const gutter =
+        tr.querySelector<HTMLTableCellElement>(
+          '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
+        ) ??
+        // `anchor: 'row'` - no gutter on this grid, so hang the strip off the
+        // first body cell instead. Without this a grid with no row-number
+        // column would silently not resize.
+        (current.anchor === 'row'
+          ? tr.querySelector<HTMLTableCellElement>('.sv-grid-cell')
+          : null)
+      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')
+      // A separator used as an interactive splitter has to be focusable so
+      // keyboard-only users can reach it and drive `onKeyDown` (#79).
+      strip.tabIndex = 0
+      // 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 })
+  node.addEventListener('keydown', onKeyDown, { 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 })
+      node.removeEventListener('keydown', onKeyDown, { capture: true })
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      observer.disconnect()
+      removeAllStrips()
+    },
+  }
+}