mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 10:44:12 +00:00
fix(vue-nodes): hide slot labels for reroute nodes with empty names (#8574)
## Summary Fixes reroute node styling in Vue Nodes 2.0 by hiding slot labels when slot names are intentionally empty. | Before | After | | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | <img width="1437" height="473" alt="image" src="https://github.com/user-attachments/assets/603f52e0-7b75-4822-8c91-0a8374cc0cb6" /> | <img width="1350" height="493" alt="image" src="https://github.com/user-attachments/assets/38168955-4d35-4c61-a685-a54efb44cd5d" /> | ## Problem Reroute nodes displayed unwanted fallback labels ("Input 0", "Output 0") instead of appearing as minimal connection-only nodes. This happened because: - Reroute nodes intentionally use empty string (`""`) for slot names - Slot components used `||` operator for fallback labels, treating `''` as falsy ## Solution - Add `hasNoLabel` computed property to detect when all label sources (`label`, `localized_name`, `name`) are empty/falsy - Derive `dotOnly` from either the existing prop OR `hasNoLabel` being true - When `dotOnly` is true: label text is hidden, padding removed (`lg-slot--dot-only` class), only connection dot visible Combined with existing `NO_TITLE` support from #7589, reroutes now display as minimal nodes with just connection dots—matching classic reroute appearance. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Bug Fixes** * Enhanced input and output slot label handling to automatically conceal labels when unavailable * Improved fallback display names for slots with more reliable naming logic <!-- end of auto-generated comment: release notes by coderabbit.ai --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8574-fix-vue-nodes-hide-slot-labels-for-reroute-nodes-with-empty-names-2fc6d73d365081c38031e260402283d3) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
cn(
|
||||
'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
|
||||
'cursor-crosshair',
|
||||
props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
|
||||
dotOnly ? 'lg-slot--dot-only' : 'pr-6',
|
||||
{
|
||||
'lg-slot--connected': props.connected,
|
||||
'lg-slot--compatible': props.compatible,
|
||||
@@ -36,7 +36,7 @@
|
||||
<!-- Slot Name -->
|
||||
<div class="h-full flex items-center min-w-0">
|
||||
<span
|
||||
v-if="!dotOnly"
|
||||
v-if="!props.dotOnly && !hasNoLabel"
|
||||
:class="
|
||||
cn(
|
||||
'truncate text-node-component-slot-text',
|
||||
@@ -47,8 +47,7 @@
|
||||
{{
|
||||
slotData.label ||
|
||||
slotData.localized_name ||
|
||||
slotData.name ||
|
||||
`Input ${index}`
|
||||
(slotData.name ?? `Input ${index}`)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
@@ -84,6 +83,14 @@ interface InputSlotProps {
|
||||
|
||||
const props = defineProps<InputSlotProps>()
|
||||
|
||||
const hasNoLabel = computed(
|
||||
() =>
|
||||
!props.slotData.label &&
|
||||
!props.slotData.localized_name &&
|
||||
props.slotData.name === ''
|
||||
)
|
||||
const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
|
||||
|
||||
const executionStore = useExecutionStore()
|
||||
|
||||
const hasSlotError = computed(() => {
|
||||
|
||||
@@ -3,8 +3,11 @@
|
||||
<div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
|
||||
<div class="relative h-full flex items-center min-w-0">
|
||||
<!-- Slot Name -->
|
||||
<span v-if="!dotOnly" class="truncate text-node-component-slot-text">
|
||||
{{ slotData.localized_name || slotData.name || `Output ${index}` }}
|
||||
<span
|
||||
v-if="!props.dotOnly && !hasNoLabel"
|
||||
class="truncate text-node-component-slot-text"
|
||||
>
|
||||
{{ slotData.localized_name || (slotData.name ?? `Output ${index}`) }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Connection Dot -->
|
||||
@@ -44,6 +47,11 @@ interface OutputSlotProps {
|
||||
|
||||
const props = defineProps<OutputSlotProps>()
|
||||
|
||||
const hasNoLabel = computed(
|
||||
() => !props.slotData.localized_name && props.slotData.name === ''
|
||||
)
|
||||
const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
|
||||
|
||||
// Error boundary implementation
|
||||
const renderError = ref<string | null>(null)
|
||||
|
||||
@@ -79,7 +87,7 @@ const slotWrapperClass = computed(() =>
|
||||
cn(
|
||||
'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
|
||||
'cursor-crosshair',
|
||||
props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
|
||||
dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
|
||||
{
|
||||
'lg-slot--connected': props.connected,
|
||||
'lg-slot--compatible': props.compatible,
|
||||
|
||||
Reference in New Issue
Block a user