From 1ba236bbce32672ef2a5eef961feae0a4671b916 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 7 Oct 2024 22:13:52 -0400
Subject: [PATCH] Simplify node tooltip lifecycle (#1162)

---
 src/components/graph/GraphCanvas.vue |  3 ++-
 src/components/graph/NodeTooltip.vue | 25 ++++---------------------
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 4e81bdefd..ded3d7fd6 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -13,7 +13,7 @@
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
   </teleport>
   <NodeSearchboxPopover />
-  <NodeTooltip />
+  <NodeTooltip v-if="tooltipEnabled" />
 </template>
 
 <script setup lang="ts">
@@ -67,6 +67,7 @@ const betaMenuEnabled = computed(
 const canvasMenuEnabled = computed(() =>
   settingStore.get('Comfy.Graph.CanvasMenu')
 )
+const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 
 watchEffect(() => {
   const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 19a72ec31..8054f86a8 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -10,15 +10,14 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, onBeforeUnmount, watch } from 'vue'
+import { nextTick, ref } from 'vue'
 import { LiteGraph } from '@comfyorg/litegraph'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useEventListener } from '@vueuse/core'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
-const settingStore = useSettingStore()
 const tooltipRef = ref<HTMLDivElement>()
 const tooltipText = ref('')
 const left = ref<string>()
@@ -129,24 +128,8 @@ const onMouseMove = (e: MouseEvent) => {
   idleTimeout = window.setTimeout(onIdle, 500)
 }
 
-watch(
-  () => settingStore.get('Comfy.EnableTooltips'),
-  (enabled) => {
-    if (enabled) {
-      window.addEventListener('mousemove', onMouseMove)
-      window.addEventListener('click', hideTooltip)
-    } else {
-      window.removeEventListener('mousemove', onMouseMove)
-      window.removeEventListener('click', hideTooltip)
-    }
-  },
-  { immediate: true }
-)
-
-onBeforeUnmount(() => {
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('click', hideTooltip)
-})
+useEventListener(window, 'mousemove', onMouseMove)
+useEventListener(window, 'click', hideTooltip)
 </script>
 
 <style lang="css" scoped>