feat: major rework

orefalo · Oct 13, 2024 · 936bfd6 · 936bfd6
1 parent 111f758
commit 936bfd6
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 47 deletions.
diff --git a/src/lib/VirtualList.svelte b/src/lib/VirtualList.svelte
@@ -93,7 +93,7 @@
     scrollToBehaviour?: SCROLL_BEHAVIOR;
     // snippets
     header?: Snippet;
-    slot: Snippet<[VirtualListModel<any>]>;
+    slot: Snippet<[VirtualListModel]>;
     footer?: Snippet;
     // events
     onVisibleRangeUpdate?: (range: VirtualRangeEvent) => void;
@@ -135,7 +135,7 @@
 
   let mounted: boolean = false;
   let container: HTMLDivElement;
-  let visibleItems: Array<VirtualListModel<any>> = $state([]);
+  let visibleItems: Array<VirtualListModel> = $state([]);
 
   let curState: VState = $state({
     offset:
@@ -170,11 +170,17 @@
   });
 
   $effect(() => {
-    // listen to updates:
-    curState;
+    const { offset, scrollChangeReason } = curState;
 
-    // on update:
-    stateUpdated();
+    if (prevState.offset !== offset || prevState.scrollChangeReason !== scrollChangeReason) {
+      refresh();
+    }
+
+    if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
+      scrollTo(offset);
+    }
+
+    prevState = curState;
   });
 
   $effect(() => {
@@ -215,7 +221,7 @@
     if (!mounted) return;
 
     if (scrollToIndex && scrollOffset) {
-      console.log('VirtualList: scrollToIndex and scrollOffset shall not be used together.');
+      console.log('VirtualList: scrollToIndex and scrollOffset MUST NOT be used together.');
     }
 
     const scrollPropsHaveChanged =
@@ -228,7 +234,6 @@
 
     if (itemPropsHaveChanged) {
       sizeAndPositionManager.updateConfig(itemSize, modelCount, estimatedItemSize);
-
       recomputeSizes();
     }
 
@@ -259,23 +264,6 @@
     };
   }
 
-  // updates component state and triggers refresh or scrollto accotdingly
-  function stateUpdated() {
-    if (!mounted) return;
-
-    const { offset, scrollChangeReason } = curState;
-
-    if (prevState.offset !== offset || prevState.scrollChangeReason !== scrollChangeReason) {
-      refresh();
-    }
-
-    if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
-      scrollTo(offset);
-    }
-
-    prevState = curState;
-  }
-
   function refresh() {
     const { offset } = curState;
     let { start, end } = sizeAndPositionManager.getVisibleRange(

diff --git a/src/lib/VirtualList2.svelte b/src/lib/VirtualList2.svelte
@@ -105,21 +105,42 @@
     style?: string;
   } = $props();
 
+  enum SCROLL_CHANGE_REASON {
+    OBSERVED = 0,
+    REQUESTED = 1
+  }
+
+  interface VState {
+    offset: number;
+    scrollChangeReason: number;
+  }
+
   let mounted: boolean = false;
   let listContainer: HTMLDivElement;
+  // svelte-ignore non_reactive_update
   let listInner: HTMLDivElement;
 
   let clientHeight: number = $state(0);
   let clientWidth: number = $state(0);
 
   let buffer: number = 100;
-  let prevScroll: number;
+  // let prevScroll: number;
   let itemKey: 'index' | ((item: any, index: number) => any);
 
   let start = $state(0);
   let end = $state(firstRender - 1);
   let avgSize = $state(0);
 
+  let curState: VState = $state({
+    offset:
+      scrollOffset ||
+      (scrollToIndex !== undefined /*&& modelCount && getOffsetForIndex(scrollToIndex)*/ && 1) ||
+      0,
+    scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
+  });
+
+  let prevState: VState | undefined;
+
   const end2 = $derived.by(() => {
     const max = (items?.length || 1) - 1;
     return end < max ? end : max;
@@ -158,7 +179,7 @@
   onMount(() => {
     listContainer.addEventListener('scroll', onscroll, thirdEventArg);
     mounted = true;
-    update();
+    updatePositions();
   });
 
   onDestroy(() => {
@@ -192,21 +213,55 @@
     )
   );
 
+  //TODO see if effect.pre not a better option
   $effect(() => {
-    // items, clientWidth, clientHeight;
-    update();
+    const { offset, scrollChangeReason } = curState;
+
+    if (prevState?.offset !== offset || prevState?.scrollChangeReason !== scrollChangeReason) {
+      // refresh();
+      updatePositions();
+    }
+
+    if (prevState?.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
+      scrollTo(offset);
+    }
+
+    prevState = curState;
   });
 
-  function onscroll() {
-    // tracks the scroll position
-    const currentScroll = getScroll(listContainer);
-    if (prevScroll != null && buffer - Math.abs(currentScroll - prevScroll) >= 10) {
+  function onscroll(event: Event) {
+    const offset = getScroll(listContainer);
+
+    if (
+      offset < 0 ||
+      curState.offset === offset ||
+      event.target !== listContainer ||
+      buffer - Math.abs(offset - curState.offset) >= 1
+    )
       return;
+
+    curState = {
+      offset,
+      scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
+    };
+
+    if (onAfterScroll) {
+      onAfterScroll({ type: 'scroll.update', offset, event });
     }
-    prevScroll = currentScroll;
-    update();
+
+    // updatePositions();
   }
 
+  // function onscroll() {
+  //   // tracks the scroll position
+  //   const currentScroll = getScroll(listContainer);
+  //   if (prevScroll != null && buffer - Math.abs(currentScroll - prevScroll) >= 10) {
+  //     return;
+  //   }
+  //   prevScroll = currentScroll;
+  //   updatePositions();
+  // }
+
   function getStart() {
     const startPosition = getScroll(listContainer) - getPaddingStart(listContainer) - buffer;
     const r = binarySearch(positions, mid => mid - startPosition, {
@@ -225,7 +280,8 @@
     return r.index;
   }
 
-  function update() {
+  function updatePositions() {
+    console.log('updatePositions');
     if (!avgSize) {
       avgSize = getAvgSize();
     }
@@ -330,6 +386,19 @@
     return !isHorizontal ? parseFloat(style.paddingTop) : parseFloat(style.paddingLeft);
   }
 
+  // scrolls the contrainer to
+  // TODO: How is this going to work with the onscoll hook?
+  function scrollTo(value: number) {
+    if ('scroll' in listContainer) {
+      const p: Record<string, any> = { behavior: scrollToBehaviour };
+      p[!isHorizontal ? 'top' : 'left'] = value;
+      listContainer.scroll(p);
+    } else {
+      //@ts-expect-error no index signature
+      listContainer[!isHorizontal ? scrollTop : scrollLeft] = value;
+    }
+  }
+
   function getItemKey(item: any, index: number) {
     if (itemKey) {
       if (/*typeof itemKey === 'string' &&*/ itemKey === 'index') {
@@ -352,7 +421,6 @@
       {#if header}
         {@render header()}
       {/if}
-      <!-- svelte-ignore node_invalid_placement_ssr -->
       <tbody>
         {#if isDisabled}
           {#each items as item, index}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -29,8 +29,9 @@
         { title: 'Table', path: '/examples/table' },
         { title: 'Variable Sizing', path: '/examples/variablesizing' },
         { title: 'Positioning', path: '/examples/positioning' },
+        { title: 'OLDPositioning', path: '/examples/positioning2' },
         { title: 'Partial Loader', path: '/examples/partialloader' },
-        { title: 'Events', path: '/examples/events' },
+        { title: 'Events', path: '/examples/events' }
       ]
     }
   ];

diff --git a/src/routes/examples/horizontal/code.svelte b/src/routes/examples/horizontal/code.svelte
@@ -2,7 +2,7 @@
   import VirtualList from '$lib/VirtualList2.svelte';
 
   const myModel = new Array(10000).fill(1).map((v, i) => {
-    return {  text: 'ITEM ' + i +' - Item ' + i };
+    return { text: 'ITEM ' + i + ' - Item ' + i };
   });
 </script>
 

diff --git a/src/routes/examples/positioning/code.svelte b/src/routes/examples/positioning/code.svelte
@@ -143,7 +143,9 @@
   {scrollToBehaviour}
   onVisibleRangeUpdate={handleMessage}>
   {#snippet vl_slot({ item, index })}
-    <div style="border: 1px solid rgb(204, 204, 204); line-height: {rowHeights(item, index)}px;" class:highlighted={index === scrollToIndex}>
+    <div
+      style="border: 1px solid rgb(204, 204, 204); line-height: {rowHeights(item, index)}px;"
+      class:highlighted={index === scrollToIndex}>
       {item.text}
     </div>
   {/snippet}
@@ -155,7 +157,6 @@
 </div>
 
 <style>
-
   .highlighted {
     background: #efefef;
   }

diff --git a/src/routes/examples/variablesizing/code.svelte b/src/routes/examples/variablesizing/code.svelte
@@ -15,7 +15,7 @@
     rowHeights = (item: any, index: number) => 25;
   }
 
-  randomize()
+  randomize();
 </script>
 
 <h2>Horizontal</h2>
@@ -32,7 +32,7 @@
 
 <VirtualList items={myModel} style="height:600px">
   {#snippet vl_slot({ item, index })}
-    <div style="border: 1px solid rgb(204, 204, 204); line-height: {rowHeights(item,index)}px;">
+    <div style="border: 1px solid rgb(204, 204, 204); line-height: {rowHeights(item, index)}px;">
       {item.text}
     </div>
   {/snippet}

diff --git a/src/routes/examples/vertical/code.svelte b/src/routes/examples/vertical/code.svelte
@@ -2,11 +2,8 @@
   import VirtualList from '$lib/VirtualList2.svelte';
 
   const myModel = new Array(10000).fill(1).map((v, i) => {
-    return { text: 'ITEM ' + i +' - Item ' + i };
+    return { text: 'ITEM ' + i + ' - Item ' + i };
   });
-
-  console.log(myModel);
-  // let itemSize = () => 25;
 </script>
 
 <VirtualList items={myModel} style="height:600px">