Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +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(
'bg-white dark-theme:bg-charcoal-100',
'min-w-[445px]',
'lg-node absolute border border-solid rounded-2xl',
'outline-transparent outline-2',
'lg-node absolute rounded-2xl',
// 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,
'opacity-50': nodeData.mode === 4,
'border-red-500 bg-red-50': error,
'will-change-transform': isDragging
},
lodCssClass,
@@ -229,7 +231,7 @@ const hasCustomContent = computed(() => {
// Computed classes and conditions for better reusability
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
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 },
new Set(['test-node-123'])
)
expect(wrapper.classes()).toContain('border-blue-500')
expect(wrapper.classes()).toContain('ring-2')
expect(wrapper.classes()).toContain('ring-blue-300')
expect(wrapper.classes()).toContain('outline-2')
expect(wrapper.classes()).toContain('outline-black')
expect(wrapper.classes()).toContain('dark-theme:outline-white')
})
it('should apply executing animation when executing prop is true', () => {