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

Add error border on missing nodes (vue nodes) (#5538)

Browse Source 
* add missing node error border

* Update src/renderer/extensions/vueNodes/components/LGraphNode.vue

Co-authored-by: Alexander Brown <drjkl@comfy.org>

* Update src/renderer/extensions/vueNodes/components/LGraphNode.vue

Co-authored-by: Alexander Brown <drjkl@comfy.org>

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Christian Byrne
2025-09-13 21:32:35 -07:00
committed by GitHub
parent 90bf8dc74a
commit bfef8d7d4b
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/composables/graph/useGraphNodeManager.ts
View File

@@ -56,6 +56,7 @@ export interface VueNodeData {
widgets?: SafeWidgetData[] widgets?: SafeWidgetData[]
inputs?: unknown[] inputs?: unknown[]
outputs?: unknown[] outputs?: unknown[]
hasErrors?: boolean
flags?: { flags?: {
collapsed?: boolean collapsed?: boolean
} }
@@ -208,6 +209,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
mode: node.mode || 0, mode: node.mode || 0,
selected: node.selected || false, selected: node.selected || false,
executing: false, // Will be updated separately based on execution state executing: false, // Will be updated separately based on execution state
hasErrors: !!node.has_errors,
widgets: safeWidgets, widgets: safeWidgets,
inputs: node.inputs ? [...node.inputs] : undefined, inputs: node.inputs ? [...node.inputs] : undefined,
outputs: node.outputs ? [...node.outputs] : undefined, outputs: node.outputs ? [...node.outputs] : undefined,

4
src/renderer/extensions/vueNodes/components/LGraphNode.vue
View File

@@ -13,7 +13,7 @@
// border // border
'border border-solid border-sand-100 dark-theme:border-charcoal-300', 'border border-solid border-sand-100 dark-theme:border-charcoal-300',
!!executing && 'border-blue-500 dark-theme:border-blue-500', !!executing && 'border-blue-500 dark-theme:border-blue-500',
!!error && 'border-red-700 dark-theme:border-red-300', !!(error || nodeData.hasErrors) && 'border-error',
// hover // hover
'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20', 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
// Selected // Selected
@@ -21,7 +21,7 @@
!!isSelected && 'outline-black dark-theme:outline-white', !!isSelected && 'outline-black dark-theme:outline-white',
!!(isSelected && executing) && !!(isSelected && executing) &&
'outline-blue-500 dark-theme:outline-blue-500', 'outline-blue-500 dark-theme:outline-blue-500',
!!(isSelected && error) && 'outline-red-500 dark-theme:outline-red-500', !!(isSelected && (error || nodeData.hasErrors)) && 'outline-error',
{ {
'animate-pulse': executing, 'animate-pulse': executing,
'opacity-50': nodeData.mode === 4, 'opacity-50': nodeData.mode === 4,