refactor: baby steps

Author: orefalo

src/lib/new2/SizeAndPositionManager.ts

@@ -27,7 +27,6 @@ export default class SizeAndPositionManager {
   itemSizeAndPositionData: SizeAndOffsetData = {};
   private lastMeasuredIndex: number = -1;
 
-
   private totalSize?: number;
 
   constructor(
@@ -219,45 +218,38 @@ export default class SizeAndPositionManager {
   }
 
   // // returns an index range
-  // getVisibleRangeOffsets(
-  //   containerSize: number = 0,
-  //   scrollbarOffset: number
-  // ): VLRange {
-  //   const totalSize = this.getTotalSize();
-
-  //   if (totalSize === 0) {
-  //     return { start: 0, end: 0 };
-  //   }
+  getVisibleRangeOffsets(containerSize: number = 0, scrollbarOffset: number) {
+    const totalSize = this.getTotalSize();
 
-  //   const maxOffset = scrollbarOffset + containerSize;
-  // //  let startIdx = this.findNearestItem(scrollbarOffset);
+    if (totalSize === 0) {
+      return { start: 0, end: 0 };
+    }
 
-  //   if (startIdx === undefined) {
-  //     throw Error(`Invalid offset ${scrollbarOffset} specified`);
-  //   }
+    const maxOffset = scrollbarOffset + containerSize;
 
-  //   const datum = this.getSizeAndPositionForIndex(startIdx);
-  //   scrollbarOffset = datum.offset + datum.size;
+    const startOffset = scrollbarOffset;
+    let startIdx = this.findNearestItem(scrollbarOffset);
 
-  //   let endIdx = startIdx;
+    if (startIdx === undefined) {
+      throw Error(`Invalid offset ${scrollbarOffset} specified`);
+    }
 
-  //   while (scrollbarOffset < maxOffset && endIdx < this.model.length - 1) {
-  //     endIdx++;
-  //     scrollbarOffset += this.getSizeAndPositionForIndex(endIdx).size;
-  //   }
+    const datum = this.getSizeAndPositionForIndex(startIdx);
 
-  //   if (windowOverPaddingCount) {
-  //     startIdx = Math.max(0, startIdx - windowOverPaddingCount);
-  //     endIdx = Math.min(endIdx + windowOverPaddingCount, this.model.length - 1);
-  //   }
+    scrollbarOffset = datum.offset + datum.size;
 
-  //   return {
-  //     start: startIdx,
-  //     end: endIdx
-  //   };
-  // }
+    let endIdx = startIdx;
 
+    while (scrollbarOffset < maxOffset && endIdx < this.model.length - 1) {
+      endIdx++;
+      scrollbarOffset += this.getSizeAndPositionForIndex(endIdx).size;
+    }
 
+    return {
+      startOffset,
+      endOffset: scrollbarOffset
+    };
+  }
 
   // returns an index range
   getVisibleRangeIndex(

src/lib/new2/VirtualList.svelte

@@ -33,7 +33,6 @@
   import SizeAndPositionManager from './SizeAndPositionManager';
   import {
     ALIGNMENT,
-    DIRECTION,
     SCROLL_BEHAVIOR,
     SCROLL_CHANGE_REASON,
     type AfterScrollEvent,
@@ -156,8 +155,13 @@
   const listStyle = $derived(clsx(!isDisabled && 'overflow:auto;', style));
 
   const listInnerStyle = $derived.by(() => {
-    const startOffset = curState.offset;
-    const endOffset = startOffset + (isHorizontal ? clientWidth : clientHeight);
+    const { offset } = curState;
+    const p = sizeAndPositionManager.getVisibleRangeOffsets(
+      isHorizontal ? clientWidth : clientHeight,
+      offset
+    );
+    const startOffset = p.startOffset;
+    const endOffset = p.endOffset;
     return clsx(
       !isTable && 'display:flex;',
       !isTable && ((!isHorizontal && 'flex-direction:column;') || 'flex-direction:row;'),