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 })
|
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')
|
expect(wrapper.classes()).toContain('outline-node-component-outline')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
// hover (only when node should handle events)
|
// hover (only when node should handle events)
|
||||||
shouldHandleNodePointerEvents &&
|
shouldHandleNodePointerEvents &&
|
||||||
'hover:ring-7 ring-node-component-ring',
|
'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,
|
borderClass,
|
||||||
outlineClass,
|
outlineClass,
|
||||||
cursorClass,
|
cursorClass,
|
||||||
|
|||||||
@@ -162,7 +162,7 @@ export const useLitegraphService = () => {
|
|||||||
const state =
|
const state =
|
||||||
useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
|
useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
|
||||||
if (state === 'running') {
|
if (state === 'running') {
|
||||||
return { color: '#0f0' }
|
return { color: '#0f0', lineWidth: 3 }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
node.strokeStyles['dragOver'] = function (this: LGraphNode) {
|
node.strokeStyles['dragOver'] = function (this: LGraphNode) {
|
||||||
@@ -172,7 +172,7 @@ export const useLitegraphService = () => {
|
|||||||
}
|
}
|
||||||
node.strokeStyles['executionError'] = function (this: LGraphNode) {
|
node.strokeStyles['executionError'] = function (this: LGraphNode) {
|
||||||
if (app.lastExecutionError?.node_id == this.id) {
|
if (app.lastExecutionError?.node_id == this.id) {
|
||||||
return { color: '#f0f', lineWidth: 2 }
|
return { color: '#f0f', lineWidth: 3 }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||