From 2996a66e4a20da27d573583892a958e02853cbaf Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 5 Sep 2025 12:54:07 -0700
Subject: [PATCH] Fix slot elref timing issue

---
 .../vueNodes/components/InputSlot.vue         | 42 +++++++------------
 .../vueNodes/components/OutputSlot.vue        | 42 +++++++------------
 2 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 2d9ea5abc..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,33 +90,16 @@ 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) => {
-    console.debug('[InputSlot] ConnectionDot ref changed:', {
-      nodeId: props.nodeId,
-      slotIndex: props.index,
-      hasNewValue: !!newValue,
-      hasSlotElRef: !!newValue?.slotElRef,
-      slotElRefValue: newValue?.slotElRef?.value
-    })
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
-
-console.debug('[InputSlot] Registering slot:', {
-  nodeId: props.nodeId,
-  slotIndex: props.index,
-  hasNodeId: !!props.nodeId,
-  nodeIdValue: props.nodeId ?? '',
-  hasTransformState: !!transformState
+// 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({
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 9ead1de81..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,33 +89,16 @@ 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) => {
-    console.debug('[OutputSlot] ConnectionDot ref changed:', {
-      nodeId: props.nodeId,
-      slotIndex: props.index,
-      hasNewValue: !!newValue,
-      hasSlotElRef: !!newValue?.slotElRef,
-      slotElRefValue: newValue?.slotElRef?.value
-    })
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
-
-console.debug('[OutputSlot] Registering slot:', {
-  nodeId: props.nodeId,
-  slotIndex: props.index,
-  hasNodeId: !!props.nodeId,
-  nodeIdValue: props.nodeId ?? '',
-  hasTransformState: !!transformState
+// 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({