From faf4c1586514c1cd4bf289edd83ce41bda98a897 Mon Sep 17 00:00:00 2001
From: Hayden <48267247+hayden-fr@users.noreply.github.com>
Date: Sun, 2 Feb 2025 19:54:23 +0800
Subject: [PATCH] Pref hooks (#113)

* pref: replace useContainerResize

* pref: replace useContainerScroll
---
 src/components/DialogManager.vue  |  4 +--
 src/components/ResponseScroll.vue | 10 +++---
 src/components/ResponseSelect.vue |  7 ++--
 src/hooks/container.ts            |  4 +--
 src/hooks/resize.ts               | 44 -----------------------
 src/hooks/scroll.ts               | 58 -------------------------------
 6 files changed, 11 insertions(+), 116 deletions(-)
 delete mode 100644 src/hooks/resize.ts
 delete mode 100644 src/hooks/scroll.ts

diff --git a/src/components/DialogManager.vue b/src/components/DialogManager.vue
index e264b14..e54b5a8 100644
--- a/src/components/DialogManager.vue
+++ b/src/components/DialogManager.vue
@@ -57,6 +57,7 @@
 </template>
 
 <script setup lang="ts" name="manager-dialog">
+import { useElementSize } from '@vueuse/core'
 import ModelCard from 'components/ModelCard.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
@@ -64,7 +65,6 @@ import ResponseSelect from 'components/ResponseSelect.vue'
 import { configSetting, useConfig } from 'hooks/config'
 import { useContainerQueries } from 'hooks/container'
 import { useModels } from 'hooks/model'
-import { useContainerResize } from 'hooks/resize'
 import { chunk } from 'lodash'
 import { app } from 'scripts/comfyAPI'
 import { Model } from 'types/typings'
@@ -136,7 +136,7 @@ const itemSize = computed(() => {
   return itemWidth / aspect + itemGutter
 })
 
-const { width } = useContainerResize(contentContainer)
+const { width } = useElementSize(contentContainer)
 
 const cols = computed(() => {
   if (isMobile.value) {
diff --git a/src/components/ResponseScroll.vue b/src/components/ResponseScroll.vue
index b5841b6..9b27ea0 100644
--- a/src/components/ResponseScroll.vue
+++ b/src/components/ResponseScroll.vue
@@ -41,9 +41,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { useDraggable } from '@vueuse/core'
-import { useContainerResize } from 'hooks/resize'
-import { useContainerScroll } from 'hooks/scroll'
+import { useDraggable, useElementSize, useScroll } from '@vueuse/core'
 import { clamp } from 'lodash'
 import { computed, ref } from 'vue'
 
@@ -57,9 +55,9 @@ const props = defineProps<ScrollAreaProps>()
 const viewport = ref<HTMLElement | null>(null)
 const content = ref<HTMLElement | null>(null)
 
-const { height: viewportHeight } = useContainerResize(viewport)
-const { height: contentHeight } = useContainerResize(content)
-const { y: scrollY } = useContainerScroll(viewport)
+const { height: viewportHeight } = useElementSize(viewport)
+const { height: contentHeight } = useElementSize(content)
+const { y: scrollY } = useScroll(viewport)
 
 const itemSize = computed(() => props.itemSize || 0)
 
diff --git a/src/components/ResponseSelect.vue b/src/components/ResponseSelect.vue
index 8808c67..3ed7491 100644
--- a/src/components/ResponseSelect.vue
+++ b/src/components/ResponseSelect.vue
@@ -151,9 +151,8 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize, useScroll } from '@vueuse/core'
 import { useConfig } from 'hooks/config'
-import { useContainerResize } from 'hooks/resize'
-import { useContainerScroll } from 'hooks/scroll'
 import Button, { ButtonProps } from 'primevue/button'
 import Drawer from 'primevue/drawer'
 import Menu from 'primevue/menu'
@@ -240,13 +239,13 @@ const checkScrollPosition = () => {
   showControlButton.value = contentWidth > containerWidth
 }
 
-const { width, height } = useContainerResize(scrollArea)
+const { width, height } = useElementSize(scrollArea)
 
 watch([width, height], () => {
   checkScrollPosition()
 })
 
-useContainerScroll(scrollArea, {
+useScroll(scrollArea, {
   onScroll: () => {
     checkScrollPosition()
   },
diff --git a/src/hooks/container.ts b/src/hooks/container.ts
index 892cbac..c9fcd14 100644
--- a/src/hooks/container.ts
+++ b/src/hooks/container.ts
@@ -1,4 +1,4 @@
-import { useContainerResize } from 'hooks/resize'
+import { useElementSize } from '@vueuse/core'
 import { type InjectionKey, type Ref, inject, provide, toRef } from 'vue'
 
 const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
@@ -14,7 +14,7 @@ export const useContainerQueries = (
 
   provide(containerKey, container)
 
-  const { width } = useContainerResize(container)
+  const { width } = useElementSize(container)
 
   /**
    * @param size unit rem
diff --git a/src/hooks/resize.ts b/src/hooks/resize.ts
deleted file mode 100644
index 6369b3f..0000000
--- a/src/hooks/resize.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { throttle } from 'lodash'
-import { type Ref, onUnmounted, ref, toRef, watch } from 'vue'
-
-export const useContainerResize = (
-  el: HTMLElement | null | Ref<HTMLElement | null>,
-) => {
-  const observer = ref<ResizeObserver | null>(null)
-
-  const width = ref(0)
-  const height = ref(0)
-
-  watch(
-    toRef(el),
-    (el) => {
-      if (el) {
-        const onResize = throttle((entries: ResizeObserverEntry[]) => {
-          const entry = entries[0]
-          width.value = entry.contentRect.width
-          height.value = entry.contentRect.height
-        }, 64)
-
-        observer.value = new ResizeObserver(onResize)
-        observer.value.observe(el)
-      }
-    },
-    { immediate: true },
-  )
-
-  const stop = () => {
-    if (observer.value) {
-      observer.value.disconnect()
-    }
-  }
-
-  onUnmounted(() => {
-    stop()
-  })
-
-  return {
-    width,
-    height,
-    stop,
-  }
-}
diff --git a/src/hooks/scroll.ts b/src/hooks/scroll.ts
deleted file mode 100644
index 57298cd..0000000
--- a/src/hooks/scroll.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { throttle } from 'lodash'
-import { computed, onUnmounted, ref, toRef, watch, type Ref } from 'vue'
-
-export interface UseScrollOption {
-  throttle?: number
-  onScroll?: (e: Event) => void
-}
-
-export const useContainerScroll = (
-  el: HTMLElement | null | Ref<HTMLElement | null>,
-  options?: UseScrollOption,
-) => {
-  const scrollLeft = ref(0)
-  const scrollTop = ref(0)
-
-  const container = toRef(el)
-
-  const onScroll = throttle((e: Event) => {
-    options?.onScroll?.(e)
-
-    if (container.value) {
-      scrollLeft.value = container.value.scrollLeft
-      scrollTop.value = container.value.scrollTop
-    }
-  }, options?.throttle ?? 64)
-
-  watch(
-    container,
-    (el) => {
-      if (el) {
-        el.addEventListener('scroll', onScroll, { passive: true })
-      }
-    },
-    { immediate: true },
-  )
-
-  const x = computed({
-    get: () => scrollLeft.value,
-    set: (val) => {
-      container.value?.scrollTo({ left: val })
-    },
-  })
-
-  const y = computed({
-    get: () => scrollTop.value,
-    set: (val) => {
-      container.value?.scrollTo({ top: val })
-    },
-  })
-
-  onUnmounted(() => {
-    if (container.value) {
-      container.value.removeEventListener('scroll', onScroll)
-    }
-  })
-
-  return { x, y }
-}