From 5f9c5151056e39d747befadc46a0c30a90c18ffe Mon Sep 17 00:00:00 2001
From: --list <18093452+simula-r@users.noreply.github.com>
Date: Fri, 12 Dec 2025 13:55:15 -0800
Subject: [PATCH] refactor: stop fighting the DOM

---
 .../vueNodes/components/ImagePreview.vue      | 13 ++-----------
 .../vueNodes/components/LGraphNode.vue        | 19 +------------------
 2 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 38194131130..538a5a5d34f 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -2,6 +2,7 @@
   <div
     v-if="imageUrls.length > 0"
     class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
+    @keydown="handleKeyDown"
   >
     <!-- Image Wrapper -->
     <div
@@ -120,8 +121,7 @@
 import { useTimeoutFn } from '@vueuse/core'
 import { useToast } from 'primevue'
 import Skeleton from 'primevue/skeleton'
-import type { ShallowRef } from 'vue'
-import { computed, inject, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { downloadFile } from '@/base/common/downloadUtil'
@@ -170,15 +170,6 @@ const currentImageUrl = computed(() => props.imageUrls[currentIndex.value])
 const hasMultipleImages = computed(() => props.imageUrls.length > 1)
 const imageAltText = computed(() => `Node output ${currentIndex.value + 1}`)
 
-const keyEvent = inject<ShallowRef<KeyboardEvent | null>>('keyEvent')
-
-if (keyEvent) {
-  watch(keyEvent, (e) => {
-    if (!e) return
-    handleKeyDown(e)
-  })
-}
-
 // Watch for URL changes and reset state
 watch(
   () => props.imageUrls,
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 783b6a25f09..778a1709675 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -49,7 +49,6 @@
     @dragover.prevent="handleDragOver"
     @dragleave="handleDragLeave"
     @drop.stop.prevent="handleDrop"
-    @keydown="handleNodeKeydown"
   >
     <div class="flex flex-col justify-center items-center relative">
       <template v-if="isCollapsed">
@@ -132,16 +131,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import {
-  computed,
-  nextTick,
-  onErrorCaptured,
-  onMounted,
-  provide,
-  ref,
-  shallowRef,
-  watch
-} from 'vue'
+import { computed, nextTick, onErrorCaptured, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -208,13 +198,6 @@ const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
 })
 
-const keyEvent = shallowRef<KeyboardEvent | null>(null)
-provide('keyEvent', keyEvent)
-
-const handleNodeKeydown = (event: KeyboardEvent) => {
-  keyEvent.value = event
-}
-
 const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
 const executionStore = useExecutionStore()