Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-09 17:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix slot elref timing issue

Browse Source
This commit is contained in:
Benjamin Lu
2025-09-05 12:54:07 -07:00
parent 9338a490d1
commit 2996a66e4a
2 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/renderer/extensions/vueNodes/components/InputSlot.vue
View File

@@ -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({

42
src/renderer/extensions/vueNodes/components/OutputSlot.vue
View File

@@ -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({