From 9c157296bef346c81e6fa0fa04b83e1743a6a912 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Fri, 12 Dec 2025 14:40:26 -0800
Subject: [PATCH] refactor: stop fighting the DOM (#7421)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Remove keyDown provider on the LGraphNode, remove inject on widget.

## Changes

- **What**: LGraphNode.vue ImagePreview.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7421-refactor-stop-fighting-the-DOM-2c76d73d365081e6b5e9c99a61bbd883)
by [Unito](https://www.unito.io)
---
 .../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 381941311..538a5a5d3 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 783b6a25f..778a17096 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()