refactor: first beta

Author: orefalo

KNOWN-ISSUES.md

@@ -2,4 +2,3 @@
 
 For now it breaks Svelte preview REPL as it can't compile ts on the fly
 
-[ ] Problem with focus positioning on the edge size

src/comp/RTLToggle.svelte

@@ -2,12 +2,16 @@
   import ToggleButton from './ToggleButton.svelte';
 
   let { isRTL = $bindable() }: { isRTL: boolean } = $props();
+
+  function clicked() {
+    document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+  }
 </script>
 
 <div class="input-output-toggle">
   Direction:
   <span aria-hidden="true">LTR</span>
-  <ToggleButton bind:pressed={isRTL} label="RTL direction" />
+  <ToggleButton bind:pressed={isRTL} label="RTL direction" onclick={clicked} />
   <span aria-hidden="true">RTL</span>
 </div>
 

src/comp/ToggleButton.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
   let {
     pressed = $bindable(),
-    label
+    label,
+    onclick
   }: {
     pressed: boolean;
     label: string;
+    onclick?: Function;
   } = $props();
+
+  function clicked() {
+    pressed = !pressed;
+    onclick?.();
+  }
 </script>
 
-<button aria-pressed={pressed ? 'true' : 'false'} onclick={() => (pressed = !pressed)}>
+<button aria-pressed={pressed ? 'true' : 'false'} onclick={clicked}>
   <span style="display: none;">{label}</span>
 </button>
 

src/lib/new/NewPositionManager.ts

@@ -237,9 +237,9 @@ export default class SizeAndPositionManager {
     const maxOffset = offset + containerSize;
     let startIdx = this.findNearestItem(offset);
 
-    if (startIdx === undefined) {
-      throw Error(`Invalid offset ${offset} specified`);
-    }
+    // if (startIdx === undefined) {
+    //   throw Error(`Invalid offset ${offset} specified`);
+    // }
 
     const datum = this.getSizeAndPositionForIndex(startIdx);
     offset = datum.offset + datum.size;

src/lib/new/VirtualListNew.svelte

@@ -149,7 +149,7 @@
   let clientWidth: number = $state(0);
 
   // viewport overfetch trigger in px
-  let overfetchBufferInPx: number = 100;
+  // let overfetchBufferInPx: number = 100;
 
   let itemKey: 'index' | ((item: any, index: number) => any);
 
@@ -270,8 +270,12 @@
 
   $effect(() => {
     console.log('onVisibleRangeUpdate');
-    // const vr = getVisibleRange(isHorizontal ? clientWidth : clientHeight, offset);
-    onVisibleRangeUpdate?.({ start: startIdx, end: endIdx });
+
+    if (onVisibleRangeUpdate) {
+      const vr = getVisibleRange(isHorizontal ? clientWidth : clientHeight, curState.offset);
+      //onVisibleRangeUpdate({ start: startIdx, end: endIdx });
+      onVisibleRangeUpdate(vr);
+    }
   });
 
   //TODO see if effect.pre not a better option
@@ -361,8 +365,6 @@
     //resetItem
     lastMeasuredIndex = Math.min(lastMeasuredIndex, startIndex - 1);
     refreshOffsets();
-    // const vr = getVisibleRange(isHorizontal ? clientWidth : clientHeight, offset);
-    // onVisibleRangeUpdate?.({ start: vr.start, end: vr.end });
   }
 
   function onscroll(event: Event): void {
@@ -386,22 +388,22 @@
   }
 
   // return the index of the starting boundary
-  function getStart(): number {
-    const startPosition =
-      getScroll(listContainer) - getPaddingStart(listContainer) - overfetchBufferInPx;
-    return findNearestItem(startPosition);
-  }
+  // function getStart(): number {
+  //   const startPosition =
+  //     getScroll(listContainer) - getPaddingStart(listContainer) - overfetchBufferInPx;
+  //   return findNearestItem(startPosition);
+  // }
 
   // return the index of the closing boundary
-  function getEnd() {
-    const endPosition =
-      getScroll(listContainer) -
-      getPaddingStart(listContainer) +
-      getClientSize(listContainer) +
-      overfetchBufferInPx;
-
-    return findNearestItem(endPosition);
-  }
+  // function getEnd() {
+  //   const endPosition =
+  //     getScroll(listContainer) -
+  //     getPaddingStart(listContainer) +
+  //     getClientSize(listContainer) +
+  //     overfetchBufferInPx;
+
+  //   return findNearestItem(endPosition);
+  // }
 
   function getOffsetForIndex(
     index: number,
@@ -546,8 +548,10 @@
       avgSizeInPx = getAvgSize();
     }
 
-    startIdx = getStart();
-    endIdx = getEnd();
+    const vr = getVisibleRange(isHorizontal ? clientWidth : clientHeight, curState.offset,3);
+ 
+    startIdx = vr.start;
+    endIdx = vr.end;
 
     let vi0 = 0;
 
@@ -617,7 +621,11 @@
   }
 
   // returns an index range
-  function getVisibleRange(containerSize: number = 0, scrollbarOffset: number) {
+  function getVisibleRange(
+    containerSize: number = 0,
+    scrollbarOffset: number,
+    windowOverPaddingCount: number = 0
+  ) {
     const totalSize = totalViewportSize;
 
     if (totalSize === 0) return { start: 0, end: 0 };
@@ -637,6 +645,11 @@
       offset += sizes[endIdx];
     }
 
+    if (windowOverPaddingCount > 0) {
+      startIdx = Math.max(0, startIdx - windowOverPaddingCount);
+      endIdx = Math.min(endIdx + windowOverPaddingCount, items.length - 1);
+    }
+
     return {
       start: startIdx,
       end: endIdx