Skip to content

fix: keep links hidden under bypassed nodes #7798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jtydhr88 wants to merge 2 commits into from
+9 −13
Closed

fix: keep links hidden under bypassed nodes #7798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5d528c
fix: keep links hidden under bypassed nodes
jtydhr88 Dec 30, 2025
d657672
test fix
jtydhr88 Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/lib/litegraph/src/LGraphCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5775,11 +5775,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
}

private getNodeModeAlpha(node: LGraphNode) {
return node.mode === LGraphEventMode.BYPASS
? 0.2
: node.mode === LGraphEventMode.NEVER
? 0.4
: this.editor_alpha
// Note: We no longer reduce alpha for bypassed nodes.
// This ensures links remain hidden underneath the node.
// The bypass visual is indicated by NODE_DEFAULT_BYPASS_COLOR instead.
return node.mode === LGraphEventMode.NEVER ? 0.4 : this.editor_alpha
}

#renderFloatingLinks(
Expand Down
2 changes: 1 addition & 1 deletion src/lib/litegraph/src/LiteGraphGlobal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export class LiteGraphGlobal {
NODE_BOX_OUTLINE_COLOR = '#FFF'
NODE_ERROR_COLOUR = '#E00'
NODE_FONT = 'Inter'
NODE_DEFAULT_BYPASS_COLOR = '#FF00FF'
NODE_DEFAULT_BYPASS_COLOR = '#6a246a'
NODE_OPACITY = 0.9

DEFAULT_FONT = 'Inter'
Expand Down
9 changes: 3 additions & 6 deletions src/renderer/extensions/vueNodes/components/LGraphNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,12 +243,9 @@ const nodeBodyBackgroundColor = computed(() => {

const nodeOpacity = computed(() => {
const globalOpacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1

// For muted/bypassed nodes, apply the 0.5 multiplier on top of global opacity
if (bypassed.value || muted.value) {
return globalOpacity * 0.5
}

// Note: We no longer reduce opacity for bypassed/muted nodes.
// Using only the color overlay (before:bg-bypass/60) ensures links
// remain hidden underneath the node instead of showing through.
return globalOpacity
Comment on lines +246 to 249
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

cat -n src/renderer/extensions/vueNodes/components/LGraphNode.vue | head -80

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 3186

🏁 Script executed:

cat -n src/renderer/extensions/vueNodes/components/LGraphNode.vue | tail -200

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 7250

🏁 Script executed:

rg -n --type=css -C2 'bypass|muted' src/ --max-count=20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 420

🏁 Script executed:

# Find nodeOpacity computed property around line 246
sed -n '240,260p' src/renderer/extensions/vueNodes/components/LGraphNode.vue

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 927

🏁 Script executed:

# Search for theme/Tailwind color definitions for bypass and muted
find src -name "*.css" -o -name "*.ts" -o -name "tailwind*" | head -20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 867

🏁 Script executed:

# Look for style.css or theme configuration files
fd -e css style -t f src/

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 94

🏁 Script executed:

# Search for bypass and muted color definitions in style.css
cat src/assets/css/style.css | grep -i -A2 -B2 'bypass\|muted'

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Search for Tailwind configuration and color definitions
fd tailwind -t f src/ -o -name "*.config.*" -o -name "theme*"

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 300

🏁 Script executed:

# Search CSS variables in style.css for bypass and muted
rg --type=css 'bypass|muted|--bg-' src/assets/css/style.css | head -30

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Read the entire style.css to check for color definitions
wc -l src/assets/css/style.css

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 96

🏁 Script executed:

# Search for CSS variable definitions more broadly
cat src/assets/css/style.css | head -200

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 118

🏁 Script executed:

# Find all color-related definitions in CSS
rg 'bg-bypass|bg-muted|bypass|muted' --type=css -i

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 1067

🏁 Script executed:

# Check Tailwind configuration for color mappings
find . -name "tailwind.config.*" -o -name "tailwind.config.ts" | head -5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 134

🏁 Script executed:

# Search for Tailwind config files in the repository
fd "tailwind.config" -t f

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 130

🏁 Script executed:

# Look for how Tailwind colors are configured
rg "extend.*colors|bg-bypass|bg-muted" --type=ts --type=js

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 976

🏁 Script executed:

# Read the main Tailwind config
cat tailwind.config.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 233

🏁 Script executed:

# Read the design-system Tailwind config
cat packages/design-system/tailwind.config.ts | head -100

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 563

🏁 Script executed:

# Check the bypass test to understand how muted nodes should work
cat browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 2008

🏁 Script executed:

# Search for muted node state handling in tests
find browser_tests -name "*.spec.ts" -o -name "*.test.ts" | xargs grep -l "muted" 2>/dev/null

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 160

🏁 Script executed:

# Check if bg-muted is actually used anywhere in the codebase
rg "bg-muted[^-]" --type=vue --type=ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 97

🏁 Script executed:

# Look for how muted nodes were handled in git history or old code
rg "nodeOpacity|muted.*opacity" --type=ts --type=vue -B5 -A5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 97

🏁 Script executed:

# Check if there's a muted state in nodeData
rg "nodeData\.muted|\.muted" src/renderer/extensions/vueNodes/ --type=ts --type=vue

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 97

🏁 Script executed:

# Check the muted node state test
cat browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 1798

🏁 Script executed:

# Search for muted nodes in the codebase
rg "muted" src/renderer/extensions/vueNodes/ -A2 -B2

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 6678

🏁 Script executed:

# Look for the muted property definition
rg "\.muted\s*=" src/renderer/extensions/vueNodes/components/LGraphNode.vue -B3 -A3

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Check if there's visual distinction setup for muted nodes anywhere
rg "muted.*class\|muted.*before\|muted.*overlay" src/renderer/extensions/vueNodes/ -i

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Check if bg-muted is defined in design-system CSS
grep -r "bg-muted\|color-muted" packages/design-system/src/css/ 2>/dev/null

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 568

🏁 Script executed:

# Look for the LGraphEventMode to understand the muted state
rg "LGraphEventMode" src/ -B2 -A8

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 48889

🏁 Script executed:

# Check if tests are currently passing or if this change broke them
rg "MUTE_OPACITY\|mute.spec" browser_tests/ -l

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Check what the LGraphCanvas code shows for muted node opacity handling
grep -n "LGraphEventMode.NEVER\|0.4\|0.5" src/lib/litegraph/src/LGraphCanvas.ts -B2 -A2

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 6281

🏁 Script executed:

# Search for any bg-muted color definition
rg "bg-muted|--muted" packages/design-system/ --type=css

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 611

🏁 Script executed:

# Verify if there's a separate Tailwind config for colors
cat packages/design-system/src/css/style.css | head -100

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 2394

🏁 Script executed:

# Final verification: check if the mute test is expected to fail or if this is intentional
git log --oneline -5 browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 122

🏁 Script executed:

# Check if there's any recent commit that changed nodeOpacity
git log --oneline -10 src/renderer/extensions/vueNodes/components/LGraphNode.vue | head -20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 122

🏁 Script executed:

# Check the full commit to understand the intent
git show b5d528c8 --stat

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 50383

🏁 Script executed:

# See the exact changes to the mute test
git show b5d528c8 -- browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 2279

Critical: Muted nodes lose visual distinction and break the mute test.

The nodeOpacity computed property at lines 246-249 removes opacity reduction for muted nodes entirely. However, the mute test added in this same commit (browser_tests/tests/vueNodes/nodeStates/mute.spec.ts) explicitly expects muted nodes to have opacity: 0.5. This mismatch will cause test failures.

Additionally, muted nodes at lines 27-28 receive no color overlay (unlike bypassed nodes at line 25 which get before:bg-bypass/60), leaving them with no visual indication now that opacity reduction is removed.

Add a visual indicator for muted nodes—either restore opacity reduction for muted state or add a color overlay like bypassed nodes. The theme color --color-bypass is defined but bg-muted is not available as a Tailwind class; use the existing CSS variable --muted-background instead.

🤖 Prompt for AI Agents 
In src/renderer/extensions/vueNodes/components/LGraphNode.vue around lines
246-249 and the node class logic at lines ~25-28, the nodeOpacity computed
removed the 0.5 opacity for muted nodes and muted nodes also lack a color
overlay; change nodeOpacity to return globalOpacity * 0.5 when the node is muted
(so muted nodes have opacity: 0.5 under default globalOpacity), and add a muted
color overlay similar to bypassed nodes by applying a before
pseudo-element/background that uses the CSS variable --muted-background (e.g.
mirror the before:bg-bypass/60 approach but reference var(--muted-background)
with appropriate opacity) so muted nodes regain a visual indicator and tests
expecting opacity: 0.5 pass.

})

Expand Down
2 changes: 1 addition & 1 deletion tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ LiteGraphGlobal {
"NODE_COLLAPSED_WIDTH": 80,
"NODE_DEFAULT_BGCOLOR": "#353535",
"NODE_DEFAULT_BOXCOLOR": "#666",
"NODE_DEFAULT_BYPASS_COLOR": "#FF00FF",
"NODE_DEFAULT_BYPASS_COLOR": "#6a246a",
"NODE_DEFAULT_COLOR": "#333",
"NODE_DEFAULT_SHAPE": 2,
"NODE_ERROR_COLOUR": "#E00",
Expand Down
Loading