Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-13 17:10:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: node border and hover and selected style, and when error (#5491)

Browse Source 
* feat: node border and hover and selected style, and when error

* fix test error
This commit is contained in:
Rizumu Ayaka
2025-09-11 18:04:16 +08:00
committed by GitHub
parent e70ddea684
commit 08fe2829d4
2 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,17 +9,19 @@
cn( cn(
'bg-white dark-theme:bg-charcoal-100', 'bg-white dark-theme:bg-charcoal-100',
'min-w-[445px]', 'min-w-[445px]',
'lg-node absolute border border-solid rounded-2xl', 'lg-node absolute rounded-2xl',
'outline-transparent outline-2', // border
'border border-solid border-sand-100 dark-theme:border-charcoal-300',
!!error && 'border-red-700 dark-theme:border-red-300',
// hover
'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
// Selected
'outline-transparent -outline-offset-2 outline-2',
!!isSelected && 'outline-black dark-theme:outline-white',
!!(isSelected && error) && 'outline-red-500 dark-theme:outline-red-500',
{ {
'outline-black dark-theme:outline-white': isSelected
},
{
'border-blue-500 ring-2 ring-blue-300': isSelected,
'border-sand-100 dark-theme:border-charcoal-300': !isSelected,
'animate-pulse': executing, 'animate-pulse': executing,
'opacity-50': nodeData.mode === 4, 'opacity-50': nodeData.mode === 4,
'border-red-500 bg-red-50': error,
'will-change-transform': isDragging 'will-change-transform': isDragging
}, },
lodCssClass, lodCssClass,
@@ -229,7 +231,7 @@ const hasCustomContent = computed(() => {
// Computed classes and conditions for better reusability // Computed classes and conditions for better reusability
const separatorClasses = const separatorClasses =
'bg-sand-primary dark-theme:bg-charcoal-tertiary h-[1px] mx-0' 'bg-sand-100 dark-theme:bg-charcoal-300 h-[1px] mx-0 w-full'
// Common condition computations to avoid repetition // Common condition computations to avoid repetition
const shouldShowWidgets = computed( const shouldShowWidgets = computed(

7
tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
View File

@@ -92,10 +92,9 @@ describe('LGraphNode', () => {
{ nodeData: mockNodeData, selected: true }, { nodeData: mockNodeData, selected: true },
new Set(['test-node-123']) new Set(['test-node-123'])
) )
expect(wrapper.classes()).toContain('outline-2')
expect(wrapper.classes()).toContain('border-blue-500') expect(wrapper.classes()).toContain('outline-black')
expect(wrapper.classes()).toContain('ring-2') expect(wrapper.classes()).toContain('dark-theme:outline-white')
expect(wrapper.classes()).toContain('ring-blue-300')
}) })
it('should apply executing animation when executing prop is true', () => { it('should apply executing animation when executing prop is true', () => {