fix Vue node opacity conditions (user node opacity, bypass state, muted state)

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -20,6 +20,9 @@ test.describe('Vue Node Bypass', () => {
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-bypassed-state.png'
+    )
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)

browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

@@ -4,7 +4,7 @@ import {
 } from '../../../fixtures/ComfyPage'
 
 const MUTE_HOTKEY = 'Control+m'
-const MUTE_CLASS = /opacity-50/
+const MUTE_OPACITY = '0.5'
 
 test.describe('Vue Node Mute', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +19,11 @@ test.describe('Vue Node Mute', () => {
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-muted-state.png')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 
   test('should allow toggling mute on multiple selected nodes with hotkey', async ({
@@ -35,11 +36,11 @@ test.describe('Vue Node Mute', () => {
     const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).toHaveCSS('opacity', MUTE_OPACITY)
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 })

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -19,9 +19,9 @@
         outlineClass,
         {
           'animate-pulse': executing,
-          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+          'before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
             bypassed,
-          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
+          'before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
             muted,
           'will-change-transform': isDragging
         },
@@ -174,26 +174,20 @@ const {
 
 useVueElementTracking(() => nodeData.id, 'node')
 
-const { selectedNodeIds } = storeToRefs(useCanvasStore())
-
-// Inject transform state for coordinate conversion
 const transformState = inject(TransformStateKey)
 if (!transformState) {
   throw new Error(
     'TransformState must be provided for node resize functionality'
   )
 }
 
-// Computed selection state - only this node re-evaluates when its selection changes
+const { selectedNodeIds } = storeToRefs(useCanvasStore())
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
 })
 
-// Use execution state composable
 const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
-
-// Direct access to execution store for error state
 const executionStore = useExecutionStore()
 const hasExecutionError = computed(
   () => executionStore.lastExecutionErrorNodeId === nodeData.id
@@ -225,9 +219,16 @@ const nodeBodyBackgroundColor = computed(() => {
   )
 })
 
-const nodeOpacity = computed(
-  () => useSettingStore().get('Comfy.Node.Opacity') ?? 1
-)
+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
+  }
+
+  return globalOpacity
+})
 
 // Use canvas interactions for proper wheel event handling and pointer event capture control
 const { handleWheel, shouldHandleNodePointerEvents } = useCanvasInteractions()