[Refactor] Move DOM widget event listeners to vue (#2960)

src/components/graph/widgets/DomWidget.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="dom-widget"
+    :title="tooltip"
     ref="widgetElement"
     :style="style"
     v-show="widgetState.visible"
@@ -9,6 +10,7 @@
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
+import { useEventListener } from '@vueuse/core'
 import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
@@ -90,6 +92,25 @@ watch(
   }
 )
 
+if (widget.element.blur) {
+  useEventListener(document, 'mousedown', (event) => {
+    if (!widget.element.contains(event.target as HTMLElement)) {
+      widget.element.blur()
+    }
+  })
+}
+
+for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
+  useEventListener(widget.element, evt, () => {
+    const lgCanvas = canvasStore.canvas
+    lgCanvas?.selectNode(widget.node)
+    lgCanvas?.bringToFront(widget.node)
+  })
+}
+
+const inputSpec = widget.node.constructor.nodeData
+const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
+
 onMounted(() => {
   widgetElement.value.appendChild(widget.element)
 })