Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 10:42:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates

Browse Source
This commit is contained in:
Benjamin Lu
2025-09-09 16:20:25 -07:00
parent 5022f14265
commit f63118b8c7
9 changed files with 335 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,6 @@
import {
type ComponentPublicInstance,
computed,
inject,
onErrorCaptured,
ref,
watchEffect
@@ -42,10 +41,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
import { getSlotColor } from '@/constants/slotColors'
import { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
// DOM-based slot registration for arbitrary positioning
import {
type TransformState,
useDomSlotRegistration
} from '@/renderer/core/layout/slots/useDomSlotRegistration'
import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
import SlotConnectionDot from './SlotConnectionDot.vue'
@@ -75,11 +71,6 @@ onErrorCaptured((error) => {
// Get slot color based on type
const slotColor = computed(() => getSlotColor(props.slotData.type))
const transformState = inject<TransformState | undefined>(
'transformState',
undefined
)
const connectionDotRef = ref<ComponentPublicInstance<{
slotElRef: HTMLElement | undefined
}> | null>(null)
@@ -92,11 +83,10 @@ watchEffect(() => {
slotElRef.value = el || null
})
useDomSlotRegistration({
useSlotElementTracking({
nodeId: props.nodeId ?? '',
slotIndex: props.index,
index: props.index,
isInput: true,
element: slotElRef,
transform: transformState
element: slotElRef
})
</script>

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

@@ -33,7 +33,6 @@
import {
type ComponentPublicInstance,
computed,
inject,
onErrorCaptured,
ref,
watchEffect
@@ -43,10 +42,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
import { getSlotColor } from '@/constants/slotColors'
import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
// DOM-based slot registration for arbitrary positioning
import {
type TransformState,
useDomSlotRegistration
} from '@/renderer/core/layout/slots/useDomSlotRegistration'
import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
import SlotConnectionDot from './SlotConnectionDot.vue'
@@ -77,11 +73,6 @@ onErrorCaptured((error) => {
// Get slot color based on type
const slotColor = computed(() => getSlotColor(props.slotData.type))
const transformState = inject<TransformState | undefined>(
'transformState',
undefined
)
const connectionDotRef = ref<ComponentPublicInstance<{
slotElRef: HTMLElement | undefined
}> | null>(null)
@@ -94,11 +85,10 @@ watchEffect(() => {
slotElRef.value = el || null
})
useDomSlotRegistration({
useSlotElementTracking({
nodeId: props.nodeId ?? '',
slotIndex: props.index,
index: props.index,
isInput: false,
element: slotElRef,
transform: transformState
element: slotElRef
})
</script>