@pdanpdan/virtual-scroll 0.9.0 → 0.9.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdanpdan/virtual-scroll",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "A high-performance virtual scroll component for Vue 3",
   "author": "",
   "license": "MIT",

package/src/composables/useVirtualScroll.ts

@@ -758,7 +758,10 @@ export function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGetter<Virtu
       )
       : { x: 0, y: 0 };
 
-    const lastItemsMap = new Map(lastRenderedItems.map((it) => [ it.index, it ]));
+    const lastItemsMap = new Map<number, RenderedItem<T>>();
+    for (const item of lastRenderedItems) {
+      lastItemsMap.set(item.index, item);
+    }
 
     // Optimization: Cache sequential queries to avoid O(log N) tree traversal for every item
     let lastIndexX = -1;
@@ -795,6 +798,9 @@ export function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGetter<Virtu
 
     const colRange = columnRange.value;
 
+    // Optimization: track sticky index pointer
+    let currentStickyIndexPtr = 0;
+
     for (const i of sortedIndices) {
       const item = props.value.items[ i ];
       if (item === undefined) {
@@ -821,6 +827,12 @@ export function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGetter<Virtu
       const originalX = x;
       const originalY = y;
 
+      // Find next sticky index for optimization
+      while (currentStickyIndexPtr < stickyIndices.length && stickyIndices[ currentStickyIndexPtr ]! <= i) {
+        currentStickyIndexPtr++;
+      }
+      const nextStickyIndex = currentStickyIndexPtr < stickyIndices.length ? stickyIndices[ currentStickyIndexPtr ] : undefined;
+
       const { isStickyActive, isStickyActiveX, isStickyActiveY, stickyOffset } = calculateStickyItem({
         index: i,
         isSticky,
@@ -836,8 +848,9 @@ export function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGetter<Virtu
         fixedWidth: fixedColumnWidth.value,
         gap: props.value.gap || 0,
         columnGap: props.value.columnGap || 0,
-        getItemQueryY: queryYCached,
-        getItemQueryX: queryXCached,
+        getItemQueryY: (idx) => itemSizesY.query(idx),
+        getItemQueryX: (idx) => itemSizesX.query(idx),
+        nextStickyIndex,
       });
 
       const offsetX = isHydrated.value

package/src/composables/useVirtualScrollSizes.ts

@@ -125,105 +125,144 @@ export function useVirtualScrollSizes<T>(
     }
   };
 
+  /**
+   * Helper to initialize measurements for a single axis.
+   */
+  const initializeAxis = (
+    count: number,
+    tree: FenwickTree,
+    measured: Uint8Array,
+    sizeProp: number | number[] | ((...args: any[]) => number) | null | undefined,
+    defaultSize: number,
+    gap: number,
+    isDynamic: boolean,
+    isX: boolean,
+    shouldReset: boolean,
+  ) => {
+    let needsRebuild = false;
+
+    if (shouldReset) {
+      for (let i = 0; i < count; i++) {
+        if (tree.get(i) !== 0) {
+          tree.set(i, 0);
+          measured[ i ] = 0;
+          needsRebuild = true;
+        }
+      }
+      return needsRebuild;
+    }
+
+    for (let i = 0; i < count; i++) {
+      const current = tree.get(i);
+      const isMeasured = measured[ i ] === 1;
+
+      if (!isDynamic || (!isMeasured && current === 0)) {
+        const baseSize = getSizeAt(i, sizeProp, defaultSize, gap, tree, isX) + gap;
+
+        if (Math.abs(current - baseSize) > 0.5) {
+          tree.set(i, baseSize);
+          measured[ i ] = isDynamic ? 0 : 1;
+          needsRebuild = true;
+        } else if (!isDynamic) {
+          measured[ i ] = 1;
+        }
+      }
+    }
+    return needsRebuild;
+  };
+
   /**
    * Initializes prefix sum trees from props (fixed sizes, width arrays, or functions).
    */
   const initializeMeasurements = () => {
     const propsVal = props.value.props;
-    const newItems = propsVal.items;
-    const len = newItems.length;
+    const len = propsVal.items.length;
     const colCount = propsVal.columnCount || 0;
     const gap = propsVal.gap || 0;
     const columnGap = propsVal.columnGap || 0;
     const cw = propsVal.columnWidth;
-
-    let colNeedsRebuild = false;
-    let itemsNeedRebuild = false;
+    const itemSize = propsVal.itemSize;
+    const defaultColWidth = propsVal.defaultColumnWidth || DEFAULT_COLUMN_WIDTH;
+    const defaultItemSize = propsVal.defaultItemSize || props.value.defaultSize;
 
     // Initialize columns
-    if (colCount > 0) {
-      for (let i = 0; i < colCount; i++) {
-        const currentW = columnSizes.get(i);
-        const isMeasured = measuredColumns.value[ i ] === 1;
-
-        if (!props.value.isDynamicColumnWidth || (!isMeasured && currentW === 0)) {
-          let baseWidth = 0;
-          if (typeof cw === 'number' && cw > 0) {
-            baseWidth = cw;
-          } else if (Array.isArray(cw) && cw.length > 0) {
-            baseWidth = cw[ i % cw.length ] || propsVal.defaultColumnWidth || DEFAULT_COLUMN_WIDTH;
-          } else if (typeof cw === 'function') {
-            baseWidth = cw(i);
-          } else {
-            baseWidth = propsVal.defaultColumnWidth || DEFAULT_COLUMN_WIDTH;
-          }
-
-          const targetW = baseWidth + columnGap;
-          if (Math.abs(currentW - targetW) > 0.5) {
-            columnSizes.set(i, targetW);
-            measuredColumns.value[ i ] = props.value.isDynamicColumnWidth ? 0 : 1;
-            colNeedsRebuild = true;
-          } else if (!props.value.isDynamicColumnWidth) {
-            measuredColumns.value[ i ] = 1;
-          }
-        }
-      }
-    }
-
-    // Initialize items
-    for (let i = 0; i < len; i++) {
-      const item = propsVal.items[ i ];
-      const currentX = itemSizesX.get(i);
-      const currentY = itemSizesY.get(i);
-      const isMeasuredX = measuredItemsX.value[ i ] === 1;
-      const isMeasuredY = measuredItemsY.value[ i ] === 1;
-
-      if (props.value.direction === 'horizontal') {
-        if (!props.value.isDynamicItemSize || (!isMeasuredX && currentX === 0)) {
-          const baseSize = getItemBaseSize(item as T, i);
-          const targetX = baseSize + columnGap;
-          if (Math.abs(currentX - targetX) > 0.5) {
-            itemSizesX.set(i, targetX);
-            measuredItemsX.value[ i ] = props.value.isDynamicItemSize ? 0 : 1;
-            itemsNeedRebuild = true;
-          } else if (!props.value.isDynamicItemSize) {
-            measuredItemsX.value[ i ] = 1;
-          }
-        }
-      } else if (currentX !== 0) {
-        itemSizesX.set(i, 0);
-        measuredItemsX.value[ i ] = 0;
-        itemsNeedRebuild = true;
-      }
-
-      if (props.value.direction !== 'horizontal') {
-        if (!props.value.isDynamicItemSize || (!isMeasuredY && currentY === 0)) {
-          const baseSize = getItemBaseSize(item as T, i);
-          const targetY = baseSize + gap;
-          if (Math.abs(currentY - targetY) > 0.5) {
-            itemSizesY.set(i, targetY);
-            measuredItemsY.value[ i ] = props.value.isDynamicItemSize ? 0 : 1;
-            itemsNeedRebuild = true;
-          } else if (!props.value.isDynamicItemSize) {
-            measuredItemsY.value[ i ] = 1;
-          }
-        }
-      } else if (currentY !== 0) {
-        itemSizesY.set(i, 0);
-        measuredItemsY.value[ i ] = 0;
-        itemsNeedRebuild = true;
-      }
-    }
+    const colNeedsRebuild = initializeAxis(
+      colCount,
+      columnSizes,
+      measuredColumns.value,
+      cw,
+      defaultColWidth,
+      columnGap,
+      props.value.isDynamicColumnWidth,
+      true,
+      false,
+    );
+
+    // Initialize items X
+    const itemsXNeedsRebuild = initializeAxis(
+      len,
+      itemSizesX,
+      measuredItemsX.value,
+      itemSize,
+      defaultItemSize,
+      columnGap,
+      props.value.isDynamicItemSize,
+      true,
+      props.value.direction !== 'horizontal',
+    );
+
+    // Initialize items Y
+    const itemsYNeedsRebuild = initializeAxis(
+      len,
+      itemSizesY,
+      measuredItemsY.value,
+      itemSize,
+      defaultItemSize,
+      gap,
+      props.value.isDynamicItemSize,
+      false,
+      props.value.direction === 'horizontal',
+    );
 
     if (colNeedsRebuild) {
       columnSizes.rebuild();
     }
-    if (itemsNeedRebuild) {
+    if (itemsXNeedsRebuild) {
       itemSizesX.rebuild();
+    }
+    if (itemsYNeedsRebuild) {
       itemSizesY.rebuild();
     }
   };
 
+  /**
+   * Helper to update a single size in the tree.
+   */
+  const updateAxis = (
+    index: number,
+    newSize: number,
+    tree: FenwickTree,
+    measured: Uint8Array,
+    gap: number,
+    firstIndex: number,
+    accumulatedDelta: { val: number; },
+  ) => {
+    const oldSize = tree.get(index);
+    const targetSize = newSize + gap;
+    let updated = false;
+
+    if (!measured[ index ] || Math.abs(targetSize - oldSize) > 0.1) {
+      const d = targetSize - oldSize;
+      tree.update(index, d);
+      measured[ index ] = 1;
+      updated = true;
+      if (index < firstIndex && oldSize > 0) {
+        accumulatedDelta.val += d;
+      }
+    }
+    return updated;
+  };
+
   /**
    * Initializes or updates sizes based on current props and items.
    * Handles prepending of items by shifting existing measurements.
@@ -297,8 +336,8 @@ export function useVirtualScrollSizes<T>(
     onScrollCorrection: (deltaX: number, deltaY: number) => void,
   ) => {
     let needUpdate = false;
-    let deltaX = 0;
-    let deltaY = 0;
+    const deltaX = { val: 0 };
+    const deltaY = { val: 0 };
     const propsVal = props.value.props;
     const gap = propsVal.gap || 0;
     const columnGap = propsVal.columnGap || 0;
@@ -315,19 +354,8 @@ export function useVirtualScrollSizes<T>(
     const tryUpdateColumn = (colIdx: number, width: number) => {
       if (colIdx >= 0 && colIdx < (propsVal.columnCount || 0) && !processedCols.has(colIdx)) {
         processedCols.add(colIdx);
-        const oldW = columnSizes.get(colIdx);
-        const targetW = width + columnGap;
-
-        if (!measuredColumns.value[ colIdx ] || Math.abs(oldW - targetW) > 0.1) {
-          const d = targetW - oldW;
-          if (Math.abs(d) > 0.1) {
-            columnSizes.update(colIdx, d);
-            needUpdate = true;
-            if (colIdx < firstColIndex && oldW > 0) {
-              deltaX += d;
-            }
-          }
-          measuredColumns.value[ colIdx ] = 1;
+        if (updateAxis(colIdx, width, columnSizes, measuredColumns.value, columnGap, firstColIndex, deltaX)) {
+          needUpdate = true;
         }
       }
     };
@@ -342,30 +370,13 @@ export function useVirtualScrollSizes<T>(
       if (index >= 0 && !processedRows.has(index) && isMeasurable && blockSize > 0) {
         processedRows.add(index);
         if (isHorizontalMode && inlineSize > 0) {
-          const oldWidth = itemSizesX.get(index);
-          const targetWidth = inlineSize + columnGap;
-          if (!measuredItemsX.value[ index ] || Math.abs(targetWidth - oldWidth) > 0.1) {
-            const d = targetWidth - oldWidth;
-            itemSizesX.update(index, d);
-            measuredItemsX.value[ index ] = 1;
+          if (updateAxis(index, inlineSize, itemSizesX, measuredItemsX.value, columnGap, firstRowIndex, deltaX)) {
             needUpdate = true;
-            if (index < firstRowIndex && oldWidth > 0) {
-              deltaX += d;
-            }
           }
         }
         if (!isHorizontalMode) {
-          const oldHeight = itemSizesY.get(index);
-          const targetHeight = blockSize + gap;
-
-          if (!measuredItemsY.value[ index ] || Math.abs(targetHeight - oldHeight) > 0.1) {
-            const d = targetHeight - oldHeight;
-            itemSizesY.update(index, d);
-            measuredItemsY.value[ index ] = 1;
+          if (updateAxis(index, blockSize, itemSizesY, measuredItemsY.value, gap, firstRowIndex, deltaY)) {
             needUpdate = true;
-            if (index < firstRowIndex && oldHeight > 0) {
-              deltaY += d;
-            }
           }
         }
       }
@@ -396,8 +407,8 @@ export function useVirtualScrollSizes<T>(
 
     if (needUpdate) {
       treeUpdateFlag.value++;
-      if (deltaX !== 0 || deltaY !== 0) {
-        onScrollCorrection(deltaX, deltaY);
+      if (deltaX.val !== 0 || deltaY.val !== 0) {
+        onScrollCorrection(deltaX.val, deltaY.val);
       }
     }
   };

package/src/utils/virtual-scroll-logic.ts

@@ -361,6 +361,7 @@ function calculateAxisTarget({
  * @param index - Item index.
  * @param stickyIndices - All sticky indices.
  * @param getNextStickyPos - Resolver for the next sticky item's position.
+ * @param nextStickyIndex - Pre-calculated next sticky index (optional).
  * @returns Sticky state for this axis.
  */
 function calculateAxisSticky(
@@ -370,12 +371,16 @@ function calculateAxisSticky(
   index: number,
   stickyIndices: number[],
   getNextStickyPos: (idx: number) => number,
+  nextStickyIndex?: number,
 ) {
   if (scrollPos <= originalPos) {
     return { isActive: false, offset: 0 };
   }
 
-  const nextStickyIdx = findNextStickyIndex(stickyIndices, index);
+  const nextStickyIdx = nextStickyIndex !== undefined
+    ? nextStickyIndex
+    : findNextStickyIndex(stickyIndices, index);
+
   if (nextStickyIdx === undefined) {
     return { isActive: true, offset: 0 };
   }
@@ -770,6 +775,7 @@ export function calculateColumnRange({
  * @param params.columnGap - Column gap (VU).
  * @param params.getItemQueryY - Resolver for vertical offset (VU).
  * @param params.getItemQueryX - Resolver for horizontal offset (VU).
+ * @param params.nextStickyIndex - Optional pre-calculated next sticky index.
  * @returns Sticky state and offset (VU).
  * @see StickyParams
  */
@@ -789,7 +795,8 @@ export function calculateStickyItem({
   columnGap,
   getItemQueryY,
   getItemQueryX,
-}: StickyParams) {
+  nextStickyIndex,
+}: StickyParams & { nextStickyIndex?: number | undefined; }) {
   let isStickyActiveX = false;
   let isStickyActiveY = false;
   const stickyOffset = { x: 0, y: 0 };
@@ -807,6 +814,7 @@ export function calculateStickyItem({
       index,
       stickyIndices,
       (nextIdx) => (fixedSize !== null ? nextIdx * (fixedSize + gap) : getItemQueryY(nextIdx)),
+      nextStickyIndex,
     );
     isStickyActiveY = res.isActive;
     stickyOffset.y = res.offset;
@@ -821,6 +829,7 @@ export function calculateStickyItem({
       index,
       stickyIndices,
       (nextIdx) => (fixedSize !== null ? nextIdx * (fixedSize + columnGap) : getItemQueryX(nextIdx)),
+      nextStickyIndex,
     );
 
     if (res.isActive) {