From 8445605777b71c8750ff7a24d551d8a4bdfe9f96 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Sat, 6 Sep 2025 03:37:39 -0700
Subject: [PATCH] fix: correct Vue ref auto-unwrapping in slot components
 (#5378)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed the misuse of exposed template refs in InputSlot and OutputSlot components.
When Vue exposes a Ref via defineExpose, it auto-unwraps it on the parent
component instance. The previous code was incorrectly double-unwrapping by
calling .value on an already unwrapped HTMLElement.

Changes:
- Updated type to ComponentPublicInstance with unwrapped HTMLElement
- Replaced watch with watchEffect for better timing handling
- Removed incorrect .value access on auto-unwrapped ref

This ensures slot elements are properly registered with useDomSlotRegistration,
fixing slot position tracking and hit-testing in the layout system.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../vueNodes/components/InputSlot.vue         | 29 +++++++++++--------
 .../vueNodes/components/OutputSlot.vue        | 29 +++++++++++--------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 52dbacac0..58238d608 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -32,7 +32,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -83,19 +90,17 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
 const slotElRef = ref<HTMLElement | null>(null)
 
-// Watch for connection dot ref changes and sync the element ref
-watch(
-  connectionDotRef,
-  (newValue) => {
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
+// Watch for when the child component's ref becomes available
+// Vue automatically unwraps the Ref when exposing it
+watchEffect(() => {
+  const el = connectionDotRef.value?.slotElRef
+  slotElRef.value = el || null
+})
 
 useDomSlotRegistration({
   nodeId: props.nodeId ?? '',
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 144d5978d..eb3196625 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -33,7 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -82,19 +89,17 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
 const slotElRef = ref<HTMLElement | null>(null)
 
-// Watch for connection dot ref changes and sync the element ref
-watch(
-  connectionDotRef,
-  (newValue) => {
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
+// Watch for when the child component's ref becomes available
+// Vue automatically unwraps the Ref when exposing it
+watchEffect(() => {
+  const el = connectionDotRef.value?.slotElRef
+  slotElRef.value = el || null
+})
 
 useDomSlotRegistration({
   nodeId: props.nodeId ?? '',