refactor: add resize observer

Author: hoiheart

src/Diff.vue

@@ -81,7 +81,7 @@ export default defineComponent({
       return {
         height: 500,
         lineMinHeight: 24,
-        scrollDelay: 250,
+        delay: 100,
         ...(typeof props.virtualScroll === 'object' ? toRaw(props.virtualScroll) : {})
       }
     })

src/Line.vue

@@ -41,6 +41,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
+import { useResizeObserver, useThrottleFn } from '@vueuse/core'
 import Code from './Code.vue'
 import { renderWords } from './utils'
 
@@ -106,6 +107,13 @@ export default defineComponent({
       emit('setLineHeight', props.meta.index, line.value.offsetHeight)
     }
 
+    if (props.scrollOptions) {
+      useResizeObserver(line, useThrottleFn(() => {
+        if (!line.value) return
+        emit('setLineHeight', props.meta.index, line.value.offsetHeight)
+      }, props.scrollOptions.delay))
+    }
+
     return { line, rendered, rowStyle, setCode }
   }
 })

src/hooks.ts

@@ -91,7 +91,7 @@ export const useVirtualScroll = (props: Props, viewer: Ref<null|HTMLElement>, sc
 
   onMounted(() => {
     if (!scrollOptions.value) return
-    viewer.value?.addEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.scrollDelay))
+    viewer.value?.addEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.delay))
 
     debouncedWatch(
       [() => props.mode, () => props.prev, () => props.current],
@@ -111,7 +111,7 @@ export const useVirtualScroll = (props: Props, viewer: Ref<null|HTMLElement>, sc
 
   onBeforeUnmount(() => {
     if (!scrollOptions.value) return
-    viewer.value?.removeEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.scrollDelay))
+    viewer.value?.removeEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.delay))
   })
 
   return {

src/types.ts

@@ -29,5 +29,5 @@ export interface Meta {
 export interface VirtualScroll {
   height: number;
   lineMinHeight: number;
-  scrollDelay: number;
+  delay: number;
 }