refactor: window resizing with debounce (#15)

src/composables/useModel.ts

@@ -12,24 +12,25 @@ export function useModel() {
 
   const background = computed(() => MODEL_BACKGROUND[modelState.mode])
 
-  watch(() => modelState.mode, onLoad)
+  watch(() => modelState.mode, handleLoad)
 
-  async function onLoad() {
+  async function handleLoad() {
     await live2d.load(modelState.mode)
 
-    onResized()
+    handleResize()
   }
 
-  function onDestroy() {
+  function handleDestroy() {
     live2d.destroy()
   }
 
-  async function onResized() {
+  async function handleResize() {
     if (!live2d.currentModel) return
 
+    const appWindow = getCurrentWebviewWindow()
     const { innerWidth } = window
 
-    await getCurrentWebviewWindow().setSize(
+    await appWindow.setSize(
       new LogicalSize({
         width: innerWidth,
         height: innerWidth * (354 / 612),
@@ -39,7 +40,7 @@ export function useModel() {
     live2d.currentModel?.scale.set(innerWidth / 612)
   }
 
-  function onKeyDown(value: string[]) {
+  function handleKeyDown(value: string[]) {
     const hasArrowKey = value.some(key => key.endsWith('Arrow'))
     const hasNonArrowKey = value.some(key => !key.endsWith('Arrow'))
 
@@ -47,7 +48,7 @@ export function useModel() {
     live2d.setParameterValue('CatParamLeftHandDown', hasNonArrowKey)
   }
 
-  async function onMouseMove() {
+  async function handleMouseMove() {
     if (!live2d.currentModel) return
 
     const monitor = await getCursorMonitor()
@@ -69,7 +70,7 @@ export function useModel() {
     live2d.setParameterValue('ParamAngleY', -y)
   }
 
-  function onMouseDown(value: string[]) {
+  function handleMouseDown(value: string[]) {
     const hasLeftDown = value.includes('Left')
     const hasRightDown = value.includes('Right')
 
@@ -81,11 +82,11 @@ export function useModel() {
     background,
     motions: live2d.currentMotions,
     expressions: live2d.currentExpressions,
-    onLoad,
-    onDestroy,
-    onResized,
-    onKeyDown,
-    onMouseMove,
-    onMouseDown,
+    handleLoad,
+    handleDestroy,
+    handleResize,
+    handleKeyDown,
+    handleMouseMove,
+    handleMouseDown,
   }
 }

src/pages/main.vue

@@ -1,47 +1,39 @@
 <script setup lang="ts">
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
-import { useEventListener } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { useDevice } from '../composables/useDevice'
 import { useModel } from '../composables/useModel'
 
 const { pressedMouses, mousePosition, pressedKeys } = useDevice()
-const { onLoad, onDestroy, onResized, onKeyDown, onMouseMove, onMouseDown, background } = useModel()
+const { background, handleLoad, handleDestroy, handleResize, handleMouseDown, handleMouseMove, handleKeyDown } = useModel()
 
-const isOverLap = ref(false)
-let resizeTimer: NodeJS.Timeout | null = null
+const resizing = ref(false)
 
-function handleResize() {
-  isOverLap.value = true
+onMounted(handleLoad)
 
-  if (resizeTimer) clearTimeout(resizeTimer)
+onUnmounted(handleDestroy)
 
-  resizeTimer = setTimeout(async () => {
-    await onResized()
-    isOverLap.value = false
-  }, 100)
-}
+const handleDebounceResize = useDebounceFn(async () => {
+  await handleResize()
 
-onMounted(onLoad)
+  resizing.value = false
+}, 100)
 
-onUnmounted(() => {
-  onDestroy()
+useEventListener('resize', () => {
+  resizing.value = true
 
-  if (!resizeTimer) return
-
-  clearTimeout(resizeTimer)
+  handleDebounceResize()
 })
 
-useEventListener('resize', handleResize)
+watch(pressedMouses, handleMouseDown)
 
-watch(pressedMouses, onMouseDown)
+watch(mousePosition, handleMouseMove)
 
-watch(mousePosition, onMouseMove)
+watch(pressedKeys, handleKeyDown)
 
-watch(pressedKeys, onKeyDown)
-
-function handleMouseDown() {
+function handleWindowDrag() {
   const appWindow = getCurrentWebviewWindow()
 
   appWindow.startDragging()
@@ -51,9 +43,9 @@ function handleMouseDown() {
 <template>
   <div
     class="relative children:(absolute h-screen w-screen)"
-    @mousedown="handleMouseDown"
+    @mousedown="handleWindowDrag"
   >
-    <div v-if="isOverLap" class="absolute inset-0 z-99 flex items-center justify-center bg-black">
+    <div v-show="resizing" class="absolute inset-0 z-99 flex items-center justify-center bg-black">
       <span class="text-center text-5xl text-white">
         重绘中...
       </span>