mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 13:41:59 +00:00
54f13930a4
## Summary Add frontend-only display name mappings for nodes shown in the Essentials tab, plus parse the new `essentials_category` field from the backend. ## Changes - **What**: Created `src/constants/essentialsDisplayNames.ts` with a static mapping of node names to user-friendly display names (e.g. `CLIPTextEncode` → "Text", `ImageScale` → "Resize Image"). Regular nodes use exact name matching; blueprint nodes use prefix matching since their filenames include model-specific suffixes. Integrated into `NodeLibrarySidebarTab.vue`'s `renderedRoot` computed for leaf node labels with fallback to `display_name`. Added `essentials_category` (z.string().optional()) to the node def schema and `ComfyNodeDefImpl` to parse the field already sent by the backend (PR #12357). ## Review Focus Display names are resolved only in the Essentials tab tree view (`NodeLibrarySidebarTab.vue`), not globally, to avoid side effects on search, bookmarks, or other views. Blueprint prefix matching is ordered longest-first so more specific prefixes (e.g. `image_inpainting_`) match before shorter ones (e.g. `image_edit`). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9072-feat-add-display-name-mappings-for-Essentials-tab-nodes-30f6d73d3650817c9acdc9b0315ed0be) by [Unito](https://www.unito.io)
80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="group relative flex flex-col items-center justify-center py-4 px-2 rounded-2xl cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border aspect-square"
|
|
:data-node-name="node.label"
|
|
draggable="true"
|
|
@click="handleClick"
|
|
@dragstart="handleDragStart"
|
|
@dragend="handleDragEnd"
|
|
@mouseenter="handleMouseEnter"
|
|
@mouseleave="handleMouseLeave"
|
|
>
|
|
<div class="flex flex-1 items-center justify-center">
|
|
<i :class="cn(nodeIcon, 'size-14 text-muted-foreground')" />
|
|
</div>
|
|
|
|
<TextTickerMultiLine
|
|
class="shrink-0 h-8 w-full text-xs font-bold text-foreground leading-4"
|
|
>
|
|
{{ node.label }}
|
|
</TextTickerMultiLine>
|
|
</div>
|
|
|
|
<Teleport v-if="showPreview" to="body">
|
|
<div
|
|
:ref="(el) => (previewRef = el as HTMLElement)"
|
|
:style="nodePreviewStyle"
|
|
>
|
|
<NodePreviewCard
|
|
:node-def="node.data!"
|
|
:show-inputs-and-outputs="false"
|
|
/>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { kebabCase } from 'es-toolkit/string'
|
|
import { computed, inject } from 'vue'
|
|
|
|
import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
|
|
import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
|
|
import { SidebarContainerKey } from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
|
|
import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
|
|
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
|
import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { node } = defineProps<{
|
|
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
click: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
|
|
}>()
|
|
|
|
const panelRef = inject(SidebarContainerKey, undefined)
|
|
const nodeDef = computed(() => node.data)
|
|
|
|
const {
|
|
previewRef,
|
|
showPreview,
|
|
nodePreviewStyle,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
handleDragStart,
|
|
handleDragEnd
|
|
} = useNodePreviewAndDrag(nodeDef, { panelRef })
|
|
|
|
const nodeIcon = computed(() => {
|
|
const nodeName = node.data?.name
|
|
const iconName = nodeName ? kebabCase(nodeName) : 'node'
|
|
return `icon-[comfy--${iconName}]`
|
|
})
|
|
|
|
function handleClick() {
|
|
if (!node.data) return
|
|
emit('click', node)
|
|
}
|
|
</script>
|