fix: increase active node border weight from 2 to 3 (#8654)
## Summary Increase stroke/outline weight for active node states to improve visibility during workflow execution (COM-7770). ## Changes - **What**: Increased border/stroke weight from 2 to 3 for active nodes in both Vue Nodes and LiteGraph renderers - Vue Nodes: `outline-2` → `outline-3` in `LGraphNode.vue` - LiteGraph: `lineWidth: 3` for `running` stroke (was default 1) and `executionError` stroke (was 2) in `litegraphService.ts` - Updated test assertion to match ## Review Focus Minimal visual change. The `executionError` lineWidth was also bumped from 2 → 3 so error states remain at least as prominent as running states. > **Note:** [#8603](https://github.com/Comfy-Org/ComfyUI_frontend/pull/8603) (by @AustinMroz) also modifies `LGraphNode.vue` with a larger restructuring (bottom buttons, badges, resize handle). The two PRs do not conflict — #8603 does not touch the outline/border state classes or `litegraphService.ts`, so both changes merge cleanly. --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
@@ -184,7 +184,7 @@ describe('LGraphNode', () => {
|
||||
|
||||
const wrapper = mountLGraphNode({ nodeData: mockNodeData })
|
||||
|
||||
expect(wrapper.classes()).toContain('outline-2')
|
||||
expect(wrapper.classes()).toContain('outline-3')
|
||||
expect(wrapper.classes()).toContain('outline-node-component-outline')
|
||||
})
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
// hover (only when node should handle events)
|
||||
shouldHandleNodePointerEvents &&
|
||||
'hover:ring-7 ring-node-component-ring',
|
||||
'outline-transparent outline-2 focus-visible:outline-node-component-outline',
|
||||
'outline-transparent outline-3 focus-visible:outline-node-component-outline',
|
||||
borderClass,
|
||||
outlineClass,
|
||||
cursorClass,
|
||||
|
||||
@@ -162,7 +162,7 @@ export const useLitegraphService = () => {
|
||||
const state =
|
||||
useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
|
||||
if (state === 'running') {
|
||||
return { color: '#0f0' }
|
||||
return { color: '#0f0', lineWidth: 3 }
|
||||
}
|
||||
}
|
||||
node.strokeStyles['dragOver'] = function (this: LGraphNode) {
|
||||
@@ -172,7 +172,7 @@ export const useLitegraphService = () => {
|
||||
}
|
||||
node.strokeStyles['executionError'] = function (this: LGraphNode) {
|
||||
if (app.lastExecutionError?.node_id == this.id) {
|
||||
return { color: '#f0f', lineWidth: 2 }
|
||||
return { color: '#f0f', lineWidth: 3 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||