@pdanpdan/virtual-scroll 0.2.0 → 0.2.1

package/src/composables/useVirtualScroll.ts

@@ -144,9 +144,6 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
     options: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions | undefined;
   } | null>(null);
 
-  const maxWidth = ref(0);
-  const maxHeight = ref(0);
-
   // Track if sizes are initialized
   const sizesInitialized = ref(false);
   let lastItems: T[] = [];
@@ -184,6 +181,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
       if (props.value.direction === 'both' && colCount > 0) {
         return columnSizes.query(colEnd || colCount) - columnSizes.query(colStart);
       }
+      /* v8 ignore else -- @preserve */
       if (props.value.direction === 'horizontal') {
         if (fixedItemSize.value !== null) {
           return (end - start) * (fixedItemSize.value + (props.value.columnGap || 0));
@@ -213,6 +211,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
 
     if (!isHydrated.value && props.value.ssrRange && !isMounted.value) {
       const { start, end } = props.value.ssrRange;
+      /* v8 ignore else -- @preserve */
       if (props.value.direction === 'vertical' || props.value.direction === 'both') {
         if (fixedItemSize.value !== null) {
           return (end - start) * (fixedItemSize.value + (props.value.gap || 0));
@@ -367,6 +366,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
       } else {
         const isVisibleX = targetX >= relativeScrollX.value && (targetX + itemWidth) <= (relativeScrollX.value + usableWidth);
         if (!isVisibleX) {
+          /* v8 ignore if -- @preserve */
           if (targetX < relativeScrollX.value) {
             // keep targetX at start
           } else {
@@ -396,6 +396,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
       let viewW = 0;
       let viewH = 0;
 
+      /* v8 ignore else -- @preserve */
       if (typeof window !== 'undefined') {
         if (container === window) {
           curX = window.scrollX;
@@ -416,6 +417,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
         if (!reachedX && colIndex !== null && colIndex !== undefined) {
           const atLeft = curX <= tolerance && finalX <= tolerance;
           const atRight = curX >= maxW - viewW - tolerance && finalX >= maxW - viewW - tolerance;
+          /* v8 ignore else -- @preserve */
           if (atLeft || atRight) {
             reachedX = true;
           }
@@ -495,12 +497,24 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
 
     const paddingStartX = getPaddingX(props.value.scrollPaddingStart, props.value.direction);
     const paddingStartY = getPaddingY(props.value.scrollPaddingStart, props.value.direction);
+    const paddingEndX = getPaddingX(props.value.scrollPaddingEnd, props.value.direction);
+    const paddingEndY = getPaddingY(props.value.scrollPaddingEnd, props.value.direction);
+
+    const usableWidth = viewportWidth.value - (isHorizontal ? (paddingStartX + paddingEndX) : 0);
+    const usableHeight = viewportHeight.value - (isVertical ? (paddingStartY + paddingEndY) : 0);
+
+    const clampedX = (x !== null && x !== undefined)
+      ? (isHorizontal ? Math.max(0, Math.min(x, Math.max(0, totalWidth.value - usableWidth))) : Math.max(0, x))
+      : null;
+    const clampedY = (y !== null && y !== undefined)
+      ? (isVertical ? Math.max(0, Math.min(y, Math.max(0, totalHeight.value - usableHeight))) : Math.max(0, y))
+      : null;
 
     const currentX = (typeof window !== 'undefined' && container === window ? window.scrollX : (container as HTMLElement).scrollLeft);
     const currentY = (typeof window !== 'undefined' && container === window ? window.scrollY : (container as HTMLElement).scrollTop);
 
-    const targetX = (x !== null && x !== undefined) ? x + hostOffset.x - (isHorizontal ? paddingStartX : 0) : currentX;
-    const targetY = (y !== null && y !== undefined) ? y + hostOffset.y - (isVertical ? paddingStartY : 0) : currentY;
+    const targetX = (clampedX !== null) ? clampedX + hostOffset.x - (isHorizontal ? paddingStartX : 0) : currentX;
+    const targetY = (clampedY !== null) ? clampedY + hostOffset.y - (isVertical ? paddingStartY : 0) : currentY;
 
     if (typeof window !== 'undefined' && container === window) {
       window.scrollTo({
@@ -571,6 +585,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
     let prependCount = 0;
     if (props.value.restoreScrollOnPrepend && lastItems.length > 0 && len > lastItems.length) {
       const oldFirstItem = lastItems[ 0 ];
+      /* v8 ignore else -- @preserve */
       if (oldFirstItem !== undefined) {
         for (let i = 1; i <= len - lastItems.length; i++) {
           if (newItems[ i ] === oldFirstItem) {
@@ -614,6 +629,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
         }
       }
 
+      /* v8 ignore else -- @preserve */
       if (addedX > 0 || addedY > 0) {
         nextTick(() => {
           scrollToOffset(
@@ -637,6 +653,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
         // OR if it's dynamic but we don't have a measurement yet.
         if (!isDynamicColumnWidth.value || currentW === 0) {
           const targetW = width + columnGap;
+          /* v8 ignore else -- @preserve */
           if (Math.abs(currentW - targetW) > 0.5) {
             columnSizes.set(i, targetW);
             colNeedsRebuild = true;
@@ -681,17 +698,6 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
         itemSizesY.set(i, targetY);
         itemsNeedRebuild = true;
       }
-
-      // Max dimension tracking: determines scrollable area size
-      const w = isHorizontal ? size : (isBoth ? Math.max(size, viewportWidth.value) : 0);
-      const h = (isVertical || isBoth) ? size : 0;
-
-      if (w > maxWidth.value) {
-        maxWidth.value = w;
-      }
-      if (h > maxHeight.value) {
-        maxHeight.value = h;
-      }
     }
 
     if (itemsNeedRebuild) {
@@ -955,6 +961,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
             if (nextStickyIdx !== undefined) {
               const nextStickyY = fixedSize !== null ? nextStickyIdx * (fixedSize + gap) : itemSizesY.query(nextStickyIdx);
               const distance = nextStickyY - relativeScrollY.value;
+              /* v8 ignore else -- @preserve */
               if (distance < height) {
                 stickyOffset.y = -(height - distance);
               }
@@ -980,6 +987,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
             if (nextStickyIdx !== undefined) {
               const nextStickyX = fixedSize !== null ? nextStickyIdx * (fixedSize + columnGap) : itemSizesX.query(nextStickyIdx);
               const distance = nextStickyX - relativeScrollX.value;
+              /* v8 ignore else -- @preserve */
               if (distance < width) {
                 stickyOffset.x = -(width - distance);
               }
@@ -1131,13 +1139,6 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
 
     for (const { index, inlineSize, blockSize, element } of updates) {
       if (isDynamicItemSize.value) {
-        if (inlineSize > maxWidth.value) {
-          maxWidth.value = inlineSize;
-        }
-        if (blockSize > maxHeight.value) {
-          maxHeight.value = blockSize;
-        }
-
         if (props.value.direction === 'horizontal') {
           const oldWidth = itemSizesX.get(index);
           const targetWidth = inlineSize + columnGap;
@@ -1179,10 +1180,12 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
         for (const child of cells) {
           const colIndex = Number.parseInt(child.dataset.colIndex!, 10);
 
+          /* v8 ignore else -- @preserve */
           if (colIndex >= 0 && colIndex < (props.value.columnCount || 0)) {
             const w = child.offsetWidth;
             const oldW = columnSizes.get(colIndex);
             const targetW = w + columnGap;
+            /* v8 ignore else -- @preserve */
             if (targetW > oldW || !measuredColumns[ colIndex ]) {
               columnSizes.update(colIndex, targetW - oldW);
               measuredColumns[ colIndex ] = 1;
@@ -1262,6 +1265,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
 
       resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
+          /* v8 ignore else -- @preserve */
           if (entry.target === container) {
             viewportWidth.value = (container as HTMLElement).clientWidth;
             viewportHeight.value = (container as HTMLElement).clientHeight;
@@ -1298,6 +1302,7 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
             : props.value.ssrRange?.start;
           const initialAlign = props.value.initialScrollAlign || 'start';
 
+          /* v8 ignore else -- @preserve */
           if (initialIndex !== undefined && initialIndex !== null) {
             scrollToIndex(initialIndex, props.value.ssrRange?.colStart, { align: initialAlign, behavior: 'auto' });
           }
@@ -1328,8 +1333,6 @@ export function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>)
     measuredColumns.fill(0);
     measuredItemsX.fill(0);
     measuredItemsY.fill(0);
-    maxWidth.value = 0;
-    maxHeight.value = 0;
     initializeSizes();
   };
 

package/src/utils/fenwick-tree.test.ts

@@ -3,84 +3,99 @@ import { describe, expect, it } from 'vitest';
 import { FenwickTree } from './fenwick-tree';
 
 describe('fenwickTree', () => {
-  it('should initialize with correct size', () => {
-    const tree = new FenwickTree(5);
-    expect(tree.query(5)).toBe(0);
+  describe('initialization', () => {
+    it('should initialize with correct size', () => {
+      const tree = new FenwickTree(5);
+      expect(tree.query(5)).toBe(0);
+      expect(tree.length).toBe(5);
+    });
   });
 
-  it('should update and query values', () => {
-    const tree = new FenwickTree(5);
-    tree.update(0, 10);
-    tree.update(1, 20);
-    tree.update(2, 30);
+  describe('query and update', () => {
+    it('should update and query values', () => {
+      const tree = new FenwickTree(5);
+      tree.update(0, 10);
+      tree.update(1, 20);
+      tree.update(2, 30);
 
-    expect(tree.query(0)).toBe(0);
-    expect(tree.query(1)).toBe(10);
-    expect(tree.query(2)).toBe(30);
-    expect(tree.query(3)).toBe(60);
-  });
+      expect(tree.query(0)).toBe(0);
+      expect(tree.query(1)).toBe(10);
+      expect(tree.query(2)).toBe(30);
+      expect(tree.query(3)).toBe(60);
+    });
+
+    it('should handle updates to existing indices', () => {
+      const tree = new FenwickTree(3);
+      tree.update(1, 10);
+      expect(tree.query(2)).toBe(10);
+      tree.update(1, 5); // Add 5 to index 1
+      expect(tree.query(2)).toBe(15);
+    });
 
-  it('should handle updates to existing indices', () => {
-    const tree = new FenwickTree(3);
-    tree.update(1, 10);
-    expect(tree.query(2)).toBe(10);
-    tree.update(1, 5); // Add 5 to index 1
-    expect(tree.query(2)).toBe(15);
+    it('should ignore updates for out of bounds indices', () => {
+      const tree = new FenwickTree(5);
+      tree.update(-1, 10);
+      tree.update(5, 10);
+      expect(tree.query(5)).toBe(0);
+    });
   });
 
-  it('should find lower bound correctly', () => {
-    const tree = new FenwickTree(5);
-    tree.update(0, 10); // sum up to 1: 10
-    tree.update(1, 10); // sum up to 2: 20
-    tree.update(2, 10); // sum up to 3: 30
+  describe('search and bounds', () => {
+    it('should find lower bound correctly', () => {
+      const tree = new FenwickTree(5);
+      tree.update(0, 10); // sum up to 1: 10
+      tree.update(1, 10); // sum up to 2: 20
+      tree.update(2, 10); // sum up to 3: 30
 
-    expect(tree.findLowerBound(5)).toBe(0);
-    expect(tree.findLowerBound(15)).toBe(1);
-    expect(tree.findLowerBound(25)).toBe(2);
-    expect(tree.findLowerBound(35)).toBe(5); // Returns size when not found
+      expect(tree.findLowerBound(5)).toBe(0);
+      expect(tree.findLowerBound(15)).toBe(1);
+      expect(tree.findLowerBound(25)).toBe(2);
+      expect(tree.findLowerBound(35)).toBe(5); // Returns size when not found
+    });
   });
 
-  it('should resize and preserve existing values', () => {
-    const tree = new FenwickTree(5);
-    tree.update(0, 10);
-    tree.resize(10);
-    expect(tree.query(1)).toBe(10);
-    expect(tree.query(10)).toBe(10);
-    tree.resize(10); // same size
-  });
+  describe('rebuild and resize', () => {
+    it('should set and rebuild correctly', () => {
+      const tree = new FenwickTree(5);
+      tree.set(0, 10);
+      tree.set(1, 20);
+      tree.set(2, 30);
+      tree.set(-1, 40); // ignore
+      tree.set(5, 50); // ignore
+      expect(tree.query(3)).toBe(0); // not rebuilt yet
+      tree.rebuild();
+      expect(tree.query(3)).toBe(60);
+    });
 
-  it('should ignore updates for out of bounds indices', () => {
-    const tree = new FenwickTree(5);
-    tree.update(-1, 10);
-    tree.update(5, 10);
-    expect(tree.query(5)).toBe(0);
+    it('should resize and preserve existing values', () => {
+      const tree = new FenwickTree(5);
+      tree.update(0, 10);
+      tree.resize(10);
+      expect(tree.query(1)).toBe(10);
+      expect(tree.query(10)).toBe(10);
+      tree.resize(10); // same size
+    });
   });
 
-  it('should set and rebuild correctly', () => {
-    const tree = new FenwickTree(5);
-    tree.set(0, 10);
-    tree.set(1, 20);
-    tree.set(2, 30);
-    tree.set(-1, 40); // ignore
-    tree.set(5, 50); // ignore
-    expect(tree.query(3)).toBe(0); // not rebuilt yet
-    tree.rebuild();
-    expect(tree.query(3)).toBe(60);
-  });
+  describe('values access', () => {
+    it('should return the individual value at an index', () => {
+      const tree = new FenwickTree(3);
+      tree.update(0, 10);
+      expect(tree.get(0)).toBe(10);
+      expect(tree.get(-1)).toBe(0);
+      expect(tree.get(10)).toBe(0);
+    });
 
-  it('should return the underlying values array', () => {
-    const tree = new FenwickTree(3);
-    expect(tree.length).toBe(3);
-    tree.update(0, 10);
-    tree.update(1, 20);
-    const values = tree.getValues();
-    expect(values).toBeInstanceOf(Float64Array);
-    expect(values[ 0 ]).toBe(10);
-    expect(values[ 1 ]).toBe(20);
-    expect(values[ 2 ]).toBe(0);
-    expect(tree.get(0)).toBe(10);
-    expect(tree.get(-1)).toBe(0);
-    expect(tree.get(10)).toBe(0);
+    it('should return the underlying values array', () => {
+      const tree = new FenwickTree(3);
+      tree.update(0, 10);
+      tree.update(1, 20);
+      const values = tree.getValues();
+      expect(values).toBeInstanceOf(Float64Array);
+      expect(values[ 0 ]).toBe(10);
+      expect(values[ 1 ]).toBe(20);
+      expect(values[ 2 ]).toBe(0);
+    });
   });
 
   describe('shift', () => {