From bf2d384f407fa056393831d66253a99228b48bcb Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 19 Feb 2025 13:35:17 +0800
Subject: [PATCH] fix(stage-tamagotchi): drag issue

---
 .../stage-tamagotchi/src/renderer/src/pages/index.vue  | 10 ++++------
 packages/stage-ui/src/components/Live2D/Canvas.vue     |  1 +
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/stage-tamagotchi/src/renderer/src/pages/index.vue b/packages/stage-tamagotchi/src/renderer/src/pages/index.vue
index 6dbbabf6..9d5fef42 100644
--- a/packages/stage-tamagotchi/src/renderer/src/pages/index.vue
+++ b/packages/stage-tamagotchi/src/renderer/src/pages/index.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import { WidgetStage } from '@proj-airi/stage-ui/components'
+import { refDebounced } from '@vueuse/shared'
 import { ref } from 'vue'
 
 import InteractiveArea from '../components/InteractiveArea.vue'
 
-const dragDelay = ref(0)
 const isDragging = ref(false)
+const isDraggingDebounced = refDebounced(isDragging, 100)
 
 function handleMouseDown() {
-  dragDelay.value = window.setTimeout(() => {
-    isDragging.value = true
-  }, 500)
+  isDragging.value = true
 }
 
 function handleMouseUp() {
-  clearTimeout(dragDelay.value)
   isDragging.value = false
 }
 
@@ -23,7 +21,7 @@ function handleMouseLeave() {
 }
 
 function handleMouseMove(event: MouseEvent) {
-  if (isDragging.value) {
+  if (isDraggingDebounced.value) {
     window.electron.ipcRenderer.send('move-window', event.movementX, event.movementY)
   }
 }
diff --git a/packages/stage-ui/src/components/Live2D/Canvas.vue b/packages/stage-ui/src/components/Live2D/Canvas.vue
index 7d201205..dce6f711 100644
--- a/packages/stage-ui/src/components/Live2D/Canvas.vue
+++ b/packages/stage-ui/src/components/Live2D/Canvas.vue
@@ -41,6 +41,7 @@ function handleResize() {
 }
 
 watch([() => props.width, () => props.height], () => handleResize())
+
 onMounted(async () => containerRef.value && await initLive2DPixiStage(containerRef.value))
 onUnmounted(() => pixiApp.value?.destroy())
 </script>