Problem

Vue nodes don't respond to color changes or bypass toggling from the selection toolbox, while these features work correctly with legacy LiteGraph nodes.

Issues:

1. Color changing: Selection toolbox color picker doesn't update Vue node colors
2. Bypass toggling: Can't bypass/disable Vue nodes via selection toolbox

Root Cause

Vue nodes don't reflect LiteGraph property changes: While the selection toolbox correctly applies changes to underlying LiteGraph nodes, Vue nodes don't extract or reactively update these properties.

Technical Analysis

Selection Toolbox Works Correctly

Color Picker (ColorPickerButton.vue:114-131):

for (const item of canvasStore.selectedItems) {
  if (isColorable(item)) {
    item.setColorOption(canvasColorOption)  // ✅ Works - updates LiteGraph node
  }
}

Bypass Button (BypassButton.vue):

await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')  // ✅ Works - updates LiteGraph node

Vue Node Integration Gaps

Missing Color Data Extraction (useGraphNodeManager.ts):

return {
  id: String(node.id),
  title: node.title,
  mode: node.mode,
  // ❌ MISSING: color and bgcolor properties
}

Missing Color Rendering (LGraphNode.vue):

• Vue nodes only handle fixed styling classes
• No dynamic color application from node properties
• No reactivity to LiteGraph color changes

Missing Mode Reactivity:

• Bypass state (mode) changes on LiteGraph node don't trigger Vue node re-renders
• Vue nodes show initial bypass state but don't update when toggled

Data Flow Analysis

Legacy Nodes (Works)

1. User selects color in toolbox
2. item.setColorOption() updates LiteGraph node properties
3. LiteGraph canvas renders color immediately

Vue Nodes (Broken)

1. User selects color in toolbox
2. item.setColorOption() updates LiteGraph node properties ✅
3. Vue node doesn't extract updated color properties ❌
4. Vue node doesn't re-render with new colors ❌

Solution

Option 1: Add Color/Mode to Vue Node Data

// In extractVueNodeData
return {
  // ... existing properties
  color: node.color,
  bgcolor: node.bgcolor,
  mode: node.mode  // Already extracted but needs reactivity
}

Option 2: Add Property Reactivity

// Watch LiteGraph node properties and update Vue node data
watchEffect(() => {
  if (litegraphNode.color \!== vueNodeData.color) {
    vueNodeData.color = litegraphNode.color
  }
})

Option 3: Apply Colors in Vue Template

<template>
  <div 
    :style="{ 
      backgroundColor: nodeData.bgcolor,
      color: nodeData.color,
      borderColor: nodeData.color 
    }"
  >

Files Requiring Changes

1. useGraphNodeManager.ts - Extract color/mode properties
2. LGraphNode.vue - Apply color styling
3. VueNodeData interface - Add color properties
4. Vue node lifecycle - Add reactivity for property changes

Reproduction

1. Enable Vue nodes (Comfy.VueNodes.Enabled = true)
2. Select a Vue node
3. Try to change color via selection toolbox → No visual change
4. Try to bypass node via selection toolbox → No visual change
5. Switch back to legacy nodes → Both features work correctly

Related

• [Feature Request]: Custom Color Pallet for Selection Toolbox #2870 - Custom color palette for selection toolbox
• Update style of floating selection toolbox #4648 - Selection toolbox styling improvements
• Vue migration issues with property synchronization