mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-06 21:50:05 +00:00
57db10f408
* feat: v3 style of node body * Update src/renderer/extensions/vueNodes/components/LGraphNode.vue * fix: review's issues * fix: review's issue
87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<template>
|
||
<div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
|
||
<div
|
||
v-else
|
||
class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group"
|
||
:class="{
|
||
'opacity-70': readonly,
|
||
'lg-slot--connected': connected,
|
||
'lg-slot--compatible': compatible,
|
||
'lg-slot--dot-only': dotOnly,
|
||
'pl-2 hover:bg-black/5': !dotOnly,
|
||
'justify-center': dotOnly
|
||
}"
|
||
:style="{
|
||
height: slotHeight + 'px'
|
||
}"
|
||
@pointerdown="handleClick"
|
||
>
|
||
<!-- Slot Name -->
|
||
<span
|
||
v-if="!dotOnly"
|
||
class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
|
||
>
|
||
{{ slotData.name || `Output ${index}` }}
|
||
</span>
|
||
|
||
<!-- Connection Dot -->
|
||
<div class="w-5 h-5 flex items-center justify-center group/slot">
|
||
<div
|
||
class="w-2.5 h-2.5 rounded-full bg-white transition-all duration-150 group-hover/slot:w-3 group-hover/slot:h-3 group-hover/slot:border-2 group-hover/slot:border-white"
|
||
:style="{
|
||
backgroundColor: slotColor
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onErrorCaptured, ref } from 'vue'
|
||
|
||
import { useErrorHandling } from '@/composables/useErrorHandling'
|
||
import { getSlotColor } from '@/constants/slotColors'
|
||
import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
|
||
import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
|
||
|
||
interface OutputSlotProps {
|
||
node?: LGraphNode
|
||
slotData: INodeSlot
|
||
index: number
|
||
connected?: boolean
|
||
compatible?: boolean
|
||
readonly?: boolean
|
||
dotOnly?: boolean
|
||
}
|
||
|
||
const props = defineProps<OutputSlotProps>()
|
||
|
||
const emit = defineEmits<{
|
||
'slot-click': [event: PointerEvent]
|
||
}>()
|
||
|
||
// Error boundary implementation
|
||
const renderError = ref<string | null>(null)
|
||
|
||
const { toastErrorHandler } = useErrorHandling()
|
||
|
||
onErrorCaptured((error) => {
|
||
renderError.value = error.message
|
||
toastErrorHandler(error)
|
||
return false
|
||
})
|
||
|
||
// Get slot color based on type
|
||
const slotColor = computed(() => getSlotColor(props.slotData.type))
|
||
|
||
// Get slot height from litegraph constants
|
||
const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
|
||
|
||
// Handle click events
|
||
const handleClick = (event: PointerEvent) => {
|
||
if (!props.readonly) {
|
||
emit('slot-click', event)
|
||
}
|
||
}
|
||
</script>
|