Refactor virtual scrolling

Some Vue bugs are visible :(

Author: jods4

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

src/datagrid.vue

@@ -1,6 +1,6 @@
 <template>
 <div class='dg-wrapper'>
-  <div class='dg-scroller' v-virtual='virtual'>
+  <virt-scroller ref='scroller' class='dg-scroller'>
     <table class='dg' :class='selected && "dg-selectable"'>
       <thead>
         <tr>
@@ -19,39 +19,38 @@
         </tr>
         <tr v-if='loading' class='dg-loader'></tr>
       </thead>
-      <tbody @click='toggle($event.target)'>
-        <tr :style='{ height: virtual.topGap + "px" }'></tr>
-        <tr v-for='d of virtual' :key='d.id'
-            class='dg-row' :class='selected && selected.has(d) && "dg-selected"'
-            :true-value='d'>
+      <virt-body @click='toggle($event.target)' v-slot='{ items }'>
+        <tr v-for='d of items()' :key='d.id' v-item='d'
+            class='dg-row' :class='selected && selected.has(d) && "dg-selected"'>
           <td v-if='selected' class='dg-cell'>
             <input type='checkbox' :checked='selected.has(d)' />
           </td>
           <td v-for='c of columns' v-text='d[c.data]' class='dg-cell' :class='c.right && "dg-right"' />
           <td class='dg-cell dg-fill' />
         </tr>
-        <tr :style='{ height: virtual.bottomGap + "px" }'></tr>
-      </tbody>
+      </virt-body>
     </table>
-  </div>
+  </virt-scroller>
 </div>
 </template>
 
 <script lang="ts">
 import { shallowRef as sref, watch } from 'vue';
 import { Column } from "./column";
-import { useSelection } from "./selection";
+import { useSelection, ItemDirective } from "./selection";
 import SortIndicator from './sort-indicator';
 import { useSorting } from "./sorting";
-import { useVirtual, VirtualTable } from "./virtual";
+import { useVirtual, VirtualBody, VirtualScroller } from "./virtual/index";
 
 export default {
   components: {
     'sort-indicator': SortIndicator,
+    'virt-body': VirtualBody,
+    'virt-scroller': VirtualScroller,
   },
 
   directives: {
-    'virtual': VirtualTable,
+    'item': ItemDirective,
   },
 
   props: {
@@ -65,13 +64,13 @@ export default {
     const data = sref([] as object[]);
     const selection = useSelection(data, props.selected);
     const sorting = useSorting(data);
-    const virtual = useVirtual(sorting.data);
+    const { scrollToTop } = useVirtual(sorting.data);
     
     watch(async () => {
       loading.value = true;
       data.value = await props.data!;
       loading.value = false;
-      virtual.scrollToTop();
+      scrollToTop();
     });
 
     return {      
@@ -80,7 +79,6 @@ export default {
       selected: props.selected,
       ...selection,
       ...sorting,
-      virtual,
     };
   }
 };

src/selection.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, watch } from "vue";
+import { computed, Ref, watch, ObjectDirective } from "vue";
 
 export function useSelection(data: Ref<object[]>, selected?: Set<object>) {
   if (!selected) return null;
@@ -8,7 +8,7 @@ export function useSelection(data: Ref<object[]>, selected?: Set<object>) {
 
   return {
     toggle(el: HTMLElement) {
-      let item: object | undefined = el.closest('.dg-row')?.['_trueValue'];
+      let item: object | undefined = el.closest('.dg-row')?.['_item'];
       if (!item) return;
       if (!selected.delete(item))
         selected.add(item);      
@@ -27,4 +27,10 @@ export function useSelection(data: Ref<object[]>, selected?: Set<object>) {
       }
     })
   };
-}
+}
+
+export const ItemDirective: ObjectDirective<HTMLElement> = {
+  mounted(el, binding) {
+    el['_item'] = binding.value; 
+  }
+};

src/virtual.ts

@@ -0,0 +1,17 @@
+<template>
+  <tbody v-bind='$attrs'>
+    <tr :style='{ height: topGap + "px" }' />
+    <slot :items="items" />
+    <tr :style='{ height: bottomGap + "px" }' />
+  </tbody>
+</template>
+
+<script lang="ts">
+import { getState } from "./state";
+
+export default {
+  setup() {
+    return getState();
+  }
+}
+</script>

src/virtual/body.vue

@@ -0,0 +1,45 @@
+import { Ref, provide, shallowReactive, unref, watch } from "vue";
+import { injectKey, VirtualState } from './state';
+
+export { default as VirtualScroller } from './scroller.vue';
+export { default as VirtualBody } from './body.vue';
+
+type Val<T> = T | Ref<T>;
+
+export function useVirtual(data: Val<object[]>) {
+  const state: VirtualState = shallowReactive({
+    scroller: <any>null!, // initialized on mount // FIXME: TS error if declared as Element?
+    height: 0,
+    scrollTop: 0,
+    rowHeight: 24,
+    buffer: 4,
+    topGap: 0,
+    bottomGap: 0,
+    index: 0,
+    count: 0,
+
+    items: function*() {
+      const all = unref(data);
+      const to = state.index + state.count;
+      for (let i = state.index; i < to; i++)
+        yield all[i];
+    },
+  });
+
+  watch(() => {
+    const length = unref(data).length;
+    const { buffer, height, rowHeight, scrollTop } = state;
+    const index = state.index = Math.max((scrollTop / rowHeight | 0) - buffer, 0);
+    const count = state.count = Math.min((height / rowHeight | 0) + 1 + buffer + buffer, length - index);
+    state.topGap = index * rowHeight;
+    state.bottomGap = (length - count - index) * rowHeight;
+  });
+
+  provide(injectKey, state);
+
+  return {
+    scrollToTop() {
+      state.scroller.scrollTop = 0;
+    }
+  }
+}

src/virtual/index.ts

@@ -0,0 +1,38 @@
+<template>
+  <div ref='el' @scroll.passive='onScroll' v-bind='$attrs'>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted } from 'vue';
+import { getState } from "./state";
+
+export default {
+  setup() {
+    const state = getState();
+    const el = ref<any>(); // FIXME: TS is giving me headaches inside onMounted
+    
+    const resize = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        let table = entry.target;
+        state.height = entry.contentRect.height - table.querySelector('tHead')!.clientHeight;
+      }
+    });
+
+    function onScroll() {
+      state.scrollTop = el.value.scrollTop;
+    }
+
+    onMounted(() => {
+      state.scroller = el.value;
+      resize.observe(el.value);
+    });
+
+    return {
+      el,
+      onScroll,
+    };
+  }
+};
+</script>

src/virtual/scroller.vue

@@ -0,0 +1,19 @@
+import { InjectionKey, inject } from 'vue';
+
+export interface VirtualState {
+  scroller: Element;
+  height: number;
+  scrollTop: number;
+  rowHeight: number;
+  buffer: number;
+  topGap: number;
+  bottomGap: number;
+  index: number;
+  count: number;
+
+  items: () => Iterator<object>;
+}
+
+export const injectKey : InjectionKey<VirtualState> = Symbol('virt-state');
+
+export function getState() { return inject(injectKey)!; }