Add support for NO_TITLE in vue, disabling border#7589
Conversation
📝 WalkthroughWalkthroughIntroduces titleMode field to VueNodeData to control header visibility in graph nodes based on TitleMode enum values. Adds conditional header rendering in LGraphNode component and introduces isTransparent utility function for detecting transparent background colors. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/20/2025, 04:01:29 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/20/2025, 04:09:47 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🔴 +330 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 997 kB (baseline 996 kB) • 🔴 +378 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 185 kB (baseline 185 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 1.86 kB (baseline 1.86 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.46 MB (baseline 8.46 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.44 MB (baseline 3.44 MB) • ⚪ 0 BBundles that do not match a named category
Status: 20 added / 20 removed |
AustinMroz
force-pushed
the
austin/vue-no-title
branch
from
eff9ea4 to
64bc6d7
Compare
dosubot
bot
added
the
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/composables/graph/useGraphNodeManager.ts(3 hunks)src/renderer/extensions/vueNodes/components/LGraphNode.vue(5 hunks)src/utils/colorUtil.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
src/**/*.{vue,ts}: Avoid usingrefandwatchtogether - usecomputedinstead if possible
Do not addrefif a prop would suffice; do not addcomputedif the ref/prop directly would work; usewatchonly whencomputedwon't accomplish the goal
Leverage VueUse functions for performance-enhancing styles
Files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Extract complex type definitions that are inlined in multiple related places - name them for reuse
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/utils/colorUtil.tssrc/composables/graph/useGraphNodeManager.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/*.{js,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively - no new JavaScript files
Files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/*.{ts,tsx,vue,js}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see.prettierrc
Sort and group imports by plugin, runpnpm formatbefore committing
Files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Do not use function expressions - use function declarations instead when possible
Files:
src/utils/colorUtil.tssrc/composables/graph/useGraphNodeManager.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
src/**/*.vue: Vue 3 SFCs must use Composition API only - no Options API
Use<script setup lang="ts">for component logic
Use Tailwind 4 utility classes for styling - avoid<style>blocks
Usecn()utility from@/utils/tailwindUtilto merge Tailwind class names - never use:class="[]"syntax
Never use thedark:Tailwind variant - use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - preferuseModelto prop/emit pairs, do not usewithDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries insrc/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components
Files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/graph/useGraphNodeManager.ts
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Composables must follow the naming pattern
useXyz.ts
Files:
src/composables/graph/useGraphNodeManager.ts
🧠 Learnings (13)
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/utils/colorUtil.tssrc/composables/graph/useGraphNodeManager.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/utils/colorUtil.tssrc/composables/graph/useGraphNodeManager.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/utils/colorUtil.tssrc/composables/graph/useGraphNodeManager.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/utils/colorUtil.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/composables/graph/useGraphNodeManager.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue
🧬 Code graph analysis (1)
src/composables/graph/useGraphNodeManager.ts (5)
src/lib/litegraph/src/LGraphNode.ts (1)
NodeId(94-94)src/renderer/core/layout/types.ts (1)
NodeId(40-40)src/lib/litegraph/src/interfaces.ts (2)
INodeInputSlot(343-352)INodeOutputSlot(358-362)src/lib/litegraph/src/widgets/BaseWidget.ts (1)
node(61-63)src/lib/litegraph/src/canvas/LinkConnector.ts (2)
node(929-935)node(937-957)
🔇 Additional comments (9)
src/composables/graph/useGraphNodeManager.ts (3)
34-36: LGTM! Import path improvements.The switch to alias imports improves maintainability and follows the project's import conventions. The addition of
TitleModeandNodeSlotTypeproperly supports the new title mode functionality.
58-80: LGTM! VueNodeData interface properly extended.The addition of
executingandtitleModefields properly supports the title mode feature. MakingtitleModeoptional is appropriate since it may not be set on all nodes. The field reordering doesn't affect functionality.
267-267: Remove this comment—title_modeproperty exists on LGraphNode with correct type.The
title_modegetter on LGraphNode (src/lib/litegraph/src/LGraphNode.ts:543-545) returnsTitleMode, notTitleMode | undefined. The getter uses nullish coalescing to default toTitleMode.NORMAL_TITLE, ensuring a value is always present. The code at line 267 correctly accesses this property.Likely an incorrect or invalid review comment.
src/renderer/extensions/vueNodes/components/LGraphNode.vue (5)
151-151: LGTM! TitleMode import properly added.The import is correctly placed and necessary for the header display logic.
172-172: LGTM! isTransparent utility import added.The import is correctly placed and necessary for the border transparency logic.
54-78: LGTM! Conditional header rendering properly implemented.The
v-if="displayHeader"correctly controls header visibility based on title mode. Usingv-if(rather thanv-show) is appropriate here as it fully removes the header from the DOM when hidden, which aligns with the NO_TITLE behavior.
223-224: Consider default behavior when titleMode is undefined.When
nodeData.titleModeis undefined,displayHeaderwill betrue(sinceundefined !== TitleMode.NO_TITLE). This appears intentional—defaulting to showing the header—but should be verified as the intended behavior.If the default should explicitly show headers when titleMode is not set, the current logic is correct. If there are other TitleMode values that should hide the header, this condition may need adjustment.
376-386: FIXME acknowledged: Transparency detection has known limitations.The FIXME correctly identifies a limitation in the transparency detection. The current
isTransparentutility only handles:
- The literal
'transparent'string- Hex colors with alpha 0 (
#RGBA,#RRGGBBAA)The utility does not detect
rgba()orhsla()formats with zero alpha. However, no nodes in the codebase currently assign rgba or hsla background colors, so this limitation does not impact existing functionality. The logic correctly implements the intended feature as designed.src/utils/colorUtil.ts (1)
24-31: Add return type annotation and consider function declaration style.The function is missing an explicit return type annotation. Additionally, per coding guidelines, prefer function declarations for pure functions.
🔎 Proposed refactor
-export function isTransparent(color: string) { +export function isTransparent(color: string): boolean {Consider converting to a function declaration if possible, though this may be less critical for exported utilities.
Based on coding guidelines.
Likely an incorrect or invalid review comment.
| export function isTransparent(color: string) { | ||
| if (color === 'transparent') return true | ||
| if (color[0] === '#') { | ||
| if (color.length === 5) return color[4] === '0' | ||
| if (color.length === 9) return color.substring(7) === '00' | ||
| } | ||
| return false | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Limited transparency detection may not cover all formats.
The function only detects:
- The literal string
'transparent' - 4-digit hex with alpha 0 (
#RGBAwhere A=0) - 8-digit hex with alpha 00 (
#RRGGBBAAwhere AA=00)
It doesn't detect rgba(r, g, b, 0) or hsla(h, s, l, 0) formats. This aligns with the FIXME comment in LGraphNode.vue (line 378) indicating "need a better way to detecting transparency."
If nodes can have rgba/hsla background colors with zero alpha, consider extending the function:
🔎 Proposed enhancement
export function isTransparent(color: string): boolean {
if (color === 'transparent') return true
if (color[0] === '#') {
if (color.length === 5) return color[4] === '0'
if (color.length === 9) return color.substring(7) === '00'
}
+ // Check rgba/hsla with zero alpha
+ if (color.startsWith('rgba(') || color.startsWith('hsla(')) {
+ const match = color.match(/,\s*(0|0\.0+)\s*\)$/)
+ if (match) return true
+ }
return false
}Do you want me to verify if rgba/hsla formats are used for node backgrounds in the codebase?
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function isTransparent(color: string) { | |
| if (color === 'transparent') return true | |
| if (color[0] === '#') { | |
| if (color.length === 5) return color[4] === '0' | |
| if (color.length === 9) return color.substring(7) === '00' | |
| } | |
| return false | |
| } | |
| export function isTransparent(color: string): boolean { | |
| if (color === 'transparent') return true | |
| if (color[0] === '#') { | |
| if (color.length === 5) return color[4] === '0' | |
| if (color.length === 9) return color.substring(7) === '00' | |
| } | |
| // Check rgba/hsla with zero alpha | |
| if (color.startsWith('rgba(') || color.startsWith('hsla(')) { | |
| const match = color.match(/,\s*(0|0\.0+)\s*\)$/) | |
| if (match) return true | |
| } | |
| return false | |
| } |
🤖 Prompt for AI Agents
In src/utils/colorUtil.ts around lines 24 to 31, isTransparent only checks the
literal 'transparent' and hex variants (#RGBA and #RRGGBBAA) so it misses
rgba(...) and hsla(...) values with zero alpha; update the function to also
parse and detect zero-alpha in CSS functional notations by testing for
/^rgba?\(\s*.../ and /^hsla?\(\s*.../ patterns, extracting the alpha component
and treating alpha === 0 (or 0.0) as transparent, while preserving current hex
and literal checks and ensuring robust trimming and case-insensitive matching.
christian-byrne
added
needs-backport
When `node.title_mode` is set to `TitleMode.NO_TITLE` the node header is not displayed in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/0e64c3df-8bcb-496f-a53c-618fdca79610"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/34ea3a28-cc2e-4316-a154-40f54bdf8e60" />| When a node has specified both `NO_TITLE` and a transparent background, node borders are also disabled in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/e52cf371-ba7e-401c-b9e5-b53607c26778"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/979a4ba4-cf6d-49b3-ae97-6e1d62f487cc" />| Known issues: - `NODE_TITLE_HEIGHT` strikes again. <img width="254" height="64" alt="image" src="https://github.com/user-attachments/assets/526b1e2c-66dd-4c5d-9954-8c997a0ab5b8" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7589-Add-support-for-NO_TITLE-in-vue-disabling-border-2cc6d73d36508182834bc78ea8dffa27) by [Unito](https://www.unito.io)
|
@AustinMroz Successfully backported to #7686 |
github-actions
bot
removed
the
needs-backport
#7686) Backport of #7589 to `core/1.35` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7686-backport-core-1-35-Add-support-for-NO_TITLE-in-vue-disabling-border-2cf6d73d3650815a88c7ce39cff56b90) by [Unito](https://www.unito.io) Co-authored-by: AustinMroz <austin@comfy.org>
When `node.title_mode` is set to `TitleMode.NO_TITLE` the node header is not displayed in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/0e64c3df-8bcb-496f-a53c-618fdca79610"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/34ea3a28-cc2e-4316-a154-40f54bdf8e60" />| When a node has specified both `NO_TITLE` and a transparent background, node borders are also disabled in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/e52cf371-ba7e-401c-b9e5-b53607c26778"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/979a4ba4-cf6d-49b3-ae97-6e1d62f487cc" />| Known issues: - `NODE_TITLE_HEIGHT` strikes again. <img width="254" height="64" alt="image" src="https://github.com/user-attachments/assets/526b1e2c-66dd-4c5d-9954-8c997a0ab5b8" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7589-Add-support-for-NO_TITLE-in-vue-disabling-border-2cc6d73d36508182834bc78ea8dffa27) by [Unito](https://www.unito.io)
…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)
…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)
…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)
3 participants
When
node.title_modeis set toTitleMode.NO_TITLEthe node header is not displayed in vue mode.When a node has specified both
NO_TITLEand a transparent background, node borders are also disabled in vue mode.Known issues:
NODE_TITLE_HEIGHTstrikes again.┆Issue is synchronized with this Notion page by Unito