@svgrid/grid 2.2.33 → 2.4.0

package/src/js-scroller.svelte.ts

@@ -1,173 +1,173 @@
-/**
- * createJsScroller - a JS-driven vertical scroller for the virtualized selection
- * controls (SvListBox / SvDropDownList / SvTree).
- *
- * Native overflow scroll is composited off the main thread, so on a fast
- * scrollbar-thumb drag the browser paints the new (empty) scroll position a
- * frame before JS can re-window the virtualizer - the "blank flash while
- * scrolling". This helper removes that async gap the way Smart's list does: the
- * content does NOT use native scroll. A single `scrollOffset` state positions
- * the rows (`translateY`) AND drives the virtualizer window in the same reactive
- * flush, and a custom scrollbar + wheel/touch handlers set that offset directly.
- *
- * The component owns the markup (translated rows + the `sb`/`thumb` elements);
- * this owns the offset, the geometry, and the input handlers.
- */
-import { untrack } from 'svelte'
-
-type ScrollerVirtualizer = {
-  setScrollOffset: (offset: number) => void
-  getOffsetForIndex: (index: number) => number
-  getSizeForIndex: (index: number) => number
-}
-
-export type JsScrollerConfig = {
-  /** The shared virtualizer to drive. */
-  virtualizer: ScrollerVirtualizer
-  /** Full scrollable content height (px). */
-  totalSize: () => number
-  /** Visible viewport height (px). */
-  viewport: () => number
-  /** Row height used to convert line-mode wheel deltas to px. */
-  lineStep: () => number
-}
-
-export function createJsScroller(cfg: JsScrollerConfig) {
-  // The single source of truth for the scroll position.
-  let scrollOffset = $state(0)
-  const maxOffset = $derived(Math.max(0, cfg.totalSize() - cfg.viewport()))
-
-  // Push the offset into the virtualizer whenever it changes. `untrack` keeps
-  // the virtualizer's `version` write out of this effect's dependencies.
-  $effect(() => {
-    const o = scrollOffset
-    untrack(() => cfg.virtualizer.setScrollOffset(o))
-  })
-  // Re-clamp if the content shrinks under the current offset.
-  $effect(() => {
-    const m = maxOffset
-    if (untrack(() => scrollOffset) > m) scrollOffset = m
-  })
-
-  function scrollTo(offset: number) {
-    scrollOffset = Math.max(0, Math.min(maxOffset, offset))
-  }
-  function scrollByPx(delta: number) {
-    scrollTo(scrollOffset + delta)
-  }
-
-  function onWheel(e: WheelEvent) {
-    if (maxOffset <= 0) return
-    // deltaMode: 0 = pixels, 1 = lines, 2 = pages.
-    const step =
-      e.deltaMode === 1 ? e.deltaY * cfg.lineStep() : e.deltaMode === 2 ? e.deltaY * cfg.viewport() : e.deltaY
-    const before = scrollOffset
-    scrollByPx(step)
-    // Only swallow the wheel when it moved us, so the page can scroll once the
-    // list is pinned at its top/bottom edge.
-    if (scrollOffset !== before) e.preventDefault()
-  }
-
-  // --- Custom scrollbar geometry --------------------------------------------
-  const thumbH = $derived(
-    maxOffset > 0 && cfg.totalSize() > 0
-      ? Math.max(24, Math.min(cfg.viewport(), (cfg.viewport() / cfg.totalSize()) * cfg.viewport()))
-      : 0,
-  )
-  const trackRange = $derived(Math.max(0, cfg.viewport() - thumbH))
-  const thumbTop = $derived(maxOffset > 0 ? (scrollOffset / maxOffset) * trackRange : 0)
-
-  let dragging = $state(false)
-  let dragStartY = 0
-  let dragStartOffset = 0
-  function onThumbDown(e: PointerEvent) {
-    e.stopPropagation()
-    e.preventDefault()
-    dragging = true
-    dragStartY = e.clientY
-    dragStartOffset = scrollOffset
-    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  }
-  function onThumbMove(e: PointerEvent) {
-    if (!dragging) return
-    const dy = e.clientY - dragStartY
-    scrollTo(dragStartOffset + (trackRange > 0 ? (dy / trackRange) * maxOffset : 0))
-  }
-  function onThumbUp(e: PointerEvent) {
-    dragging = false
-    releaseCapture(e)
-  }
-  function onTrackDown(e: PointerEvent) {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-    scrollByPx(e.clientY - rect.top < thumbTop ? -cfg.viewport() : cfg.viewport())
-  }
-
-  // --- Touch: drag the content to pan ---------------------------------------
-  let touchActive = false
-  let touchStartY = 0
-  let touchStartOffset = 0
-  function onContentDown(e: PointerEvent) {
-    if (e.pointerType !== 'touch') return
-    touchActive = true
-    touchStartY = e.clientY
-    touchStartOffset = scrollOffset
-    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  }
-  function onContentMove(e: PointerEvent) {
-    if (!touchActive) return
-    scrollTo(touchStartOffset - (e.clientY - touchStartY))
-  }
-  function onContentUp(e: PointerEvent) {
-    if (!touchActive) return
-    touchActive = false
-    releaseCapture(e)
-  }
-
-  function releaseCapture(e: PointerEvent) {
-    try {
-      ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
-    } catch {
-      /* capture may already be gone */
-    }
-  }
-
-  /** Scroll the minimal amount to bring `[top, top+h]` fully into view. */
-  function ensureVisible(top: number, h: number) {
-    if (top < scrollOffset) scrollTo(top)
-    else if (top + h > scrollOffset + cfg.viewport()) scrollTo(top + h - cfg.viewport())
-  }
-  /** Bring a virtualizer row index into view (variable-height aware). */
-  function ensureIndexVisible(index: number) {
-    ensureVisible(cfg.virtualizer.getOffsetForIndex(index), cfg.virtualizer.getSizeForIndex(index))
-  }
-
-  return {
-    get scrollOffset() {
-      return scrollOffset
-    },
-    get maxOffset() {
-      return maxOffset
-    },
-    get thumbH() {
-      return thumbH
-    },
-    get thumbTop() {
-      return thumbTop
-    },
-    get dragging() {
-      return dragging
-    },
-    scrollTo,
-    scrollByPx,
-    ensureVisible,
-    ensureIndexVisible,
-    onWheel,
-    onThumbDown,
-    onThumbMove,
-    onThumbUp,
-    onTrackDown,
-    onContentDown,
-    onContentMove,
-    onContentUp,
-  }
-}
+/**
+ * createJsScroller - a JS-driven vertical scroller for the virtualized selection
+ * controls (SvListBox / SvDropDownList / SvTree).
+ *
+ * Native overflow scroll is composited off the main thread, so on a fast
+ * scrollbar-thumb drag the browser paints the new (empty) scroll position a
+ * frame before JS can re-window the virtualizer - the "blank flash while
+ * scrolling". This helper removes that async gap the way Smart's list does: the
+ * content does NOT use native scroll. A single `scrollOffset` state positions
+ * the rows (`translateY`) AND drives the virtualizer window in the same reactive
+ * flush, and a custom scrollbar + wheel/touch handlers set that offset directly.
+ *
+ * The component owns the markup (translated rows + the `sb`/`thumb` elements);
+ * this owns the offset, the geometry, and the input handlers.
+ */
+import { untrack } from 'svelte'
+
+type ScrollerVirtualizer = {
+  setScrollOffset: (offset: number) => void
+  getOffsetForIndex: (index: number) => number
+  getSizeForIndex: (index: number) => number
+}
+
+export type JsScrollerConfig = {
+  /** The shared virtualizer to drive. */
+  virtualizer: ScrollerVirtualizer
+  /** Full scrollable content height (px). */
+  totalSize: () => number
+  /** Visible viewport height (px). */
+  viewport: () => number
+  /** Row height used to convert line-mode wheel deltas to px. */
+  lineStep: () => number
+}
+
+export function createJsScroller(cfg: JsScrollerConfig) {
+  // The single source of truth for the scroll position.
+  let scrollOffset = $state(0)
+  const maxOffset = $derived(Math.max(0, cfg.totalSize() - cfg.viewport()))
+
+  // Push the offset into the virtualizer whenever it changes. `untrack` keeps
+  // the virtualizer's `version` write out of this effect's dependencies.
+  $effect(() => {
+    const o = scrollOffset
+    untrack(() => cfg.virtualizer.setScrollOffset(o))
+  })
+  // Re-clamp if the content shrinks under the current offset.
+  $effect(() => {
+    const m = maxOffset
+    if (untrack(() => scrollOffset) > m) scrollOffset = m
+  })
+
+  function scrollTo(offset: number) {
+    scrollOffset = Math.max(0, Math.min(maxOffset, offset))
+  }
+  function scrollByPx(delta: number) {
+    scrollTo(scrollOffset + delta)
+  }
+
+  function onWheel(e: WheelEvent) {
+    if (maxOffset <= 0) return
+    // deltaMode: 0 = pixels, 1 = lines, 2 = pages.
+    const step =
+      e.deltaMode === 1 ? e.deltaY * cfg.lineStep() : e.deltaMode === 2 ? e.deltaY * cfg.viewport() : e.deltaY
+    const before = scrollOffset
+    scrollByPx(step)
+    // Only swallow the wheel when it moved us, so the page can scroll once the
+    // list is pinned at its top/bottom edge.
+    if (scrollOffset !== before) e.preventDefault()
+  }
+
+  // --- Custom scrollbar geometry --------------------------------------------
+  const thumbH = $derived(
+    maxOffset > 0 && cfg.totalSize() > 0
+      ? Math.max(24, Math.min(cfg.viewport(), (cfg.viewport() / cfg.totalSize()) * cfg.viewport()))
+      : 0,
+  )
+  const trackRange = $derived(Math.max(0, cfg.viewport() - thumbH))
+  const thumbTop = $derived(maxOffset > 0 ? (scrollOffset / maxOffset) * trackRange : 0)
+
+  let dragging = $state(false)
+  let dragStartY = 0
+  let dragStartOffset = 0
+  function onThumbDown(e: PointerEvent) {
+    e.stopPropagation()
+    e.preventDefault()
+    dragging = true
+    dragStartY = e.clientY
+    dragStartOffset = scrollOffset
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onThumbMove(e: PointerEvent) {
+    if (!dragging) return
+    const dy = e.clientY - dragStartY
+    scrollTo(dragStartOffset + (trackRange > 0 ? (dy / trackRange) * maxOffset : 0))
+  }
+  function onThumbUp(e: PointerEvent) {
+    dragging = false
+    releaseCapture(e)
+  }
+  function onTrackDown(e: PointerEvent) {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    scrollByPx(e.clientY - rect.top < thumbTop ? -cfg.viewport() : cfg.viewport())
+  }
+
+  // --- Touch: drag the content to pan ---------------------------------------
+  let touchActive = false
+  let touchStartY = 0
+  let touchStartOffset = 0
+  function onContentDown(e: PointerEvent) {
+    if (e.pointerType !== 'touch') return
+    touchActive = true
+    touchStartY = e.clientY
+    touchStartOffset = scrollOffset
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onContentMove(e: PointerEvent) {
+    if (!touchActive) return
+    scrollTo(touchStartOffset - (e.clientY - touchStartY))
+  }
+  function onContentUp(e: PointerEvent) {
+    if (!touchActive) return
+    touchActive = false
+    releaseCapture(e)
+  }
+
+  function releaseCapture(e: PointerEvent) {
+    try {
+      ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+    } catch {
+      /* capture may already be gone */
+    }
+  }
+
+  /** Scroll the minimal amount to bring `[top, top+h]` fully into view. */
+  function ensureVisible(top: number, h: number) {
+    if (top < scrollOffset) scrollTo(top)
+    else if (top + h > scrollOffset + cfg.viewport()) scrollTo(top + h - cfg.viewport())
+  }
+  /** Bring a virtualizer row index into view (variable-height aware). */
+  function ensureIndexVisible(index: number) {
+    ensureVisible(cfg.virtualizer.getOffsetForIndex(index), cfg.virtualizer.getSizeForIndex(index))
+  }
+
+  return {
+    get scrollOffset() {
+      return scrollOffset
+    },
+    get maxOffset() {
+      return maxOffset
+    },
+    get thumbH() {
+      return thumbH
+    },
+    get thumbTop() {
+      return thumbTop
+    },
+    get dragging() {
+      return dragging
+    },
+    scrollTo,
+    scrollByPx,
+    ensureVisible,
+    ensureIndexVisible,
+    onWheel,
+    onThumbDown,
+    onThumbMove,
+    onThumbUp,
+    onTrackDown,
+    onContentDown,
+    onContentMove,
+    onContentUp,
+  }
+}