Apply node opacity setting to all node colors (#947)

* Apply opacity to node colors. Resolves #928

* Handle default and custom colors all in draw handler

* Add colorUtil unit tests

* Add Playwright test

* Remove comment

* Revert colorPalette.ts changes

* Remove unused imports

* Fix typo

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <[email protected]>

browser_tests/colorPalette.spec.ts

@@ -150,8 +150,21 @@ test.describe('Color Palette', () => {
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
+})
+
+test.describe('Node Color Adjustments', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('every_node_color')
+  })
 
-  test('Can change node opacity setting', async ({ comfyPage }) => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+  })
+
+  test('should adjust opacity via node opacity setting', async ({
+    comfyPage
+  }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.page.waitForTimeout(128)
 
@@ -166,4 +179,71 @@ test.describe('Color Palette', () => {
     await comfyPage.page.mouse.move(8, 8)
     await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
   })
+
+  test('should persist color adjustments when changing themes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.2)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'arc')
+    await comfyPage.nextFrame()
+    await comfyPage.page.mouse.move(0, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-opacity-0.2-arc-theme.png'
+    )
+  })
+
+  test('should not serialize color adjustments in workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
+    const workflow = await comfyPage.page.evaluate(() => {
+      return localStorage.getItem('workflow')
+    })
+    for (const node of JSON.parse(workflow).nodes) {
+      if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
+      if (node.color) expect(node.color).not.toMatch(/hsla/)
+    }
+  })
+
+  test('should lighten node colors when switching to light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('node-lightened-colors.png')
+  })
+
+  test.describe('Context menu color adjustments', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
+      const node = await comfyPage.getFirstNodeRef()
+      await node.clickContextMenuOption('Colors')
+    })
+
+    test('should persist color adjustments when changing custom node colors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("red")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-changed.png'
+      )
+    })
+
+    test('should persist color adjustments when removing custom node color', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("No color")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-removed.png'
+      )
+    })
+  })
 })

src/components/graph/GraphCanvas.vue

@@ -42,9 +42,6 @@ import {
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { applyOpacity } from '@/utils/colorUtil'
-import { getColorPalette } from '@/extensions/core/colorPalette'
-import { debounce } from 'lodash'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -93,24 +90,6 @@ watchEffect(() => {
   })
 })
 
-const updateNodeOpacity = (nodeOpacity: number) => {
-  const colorPalette = getColorPalette()
-
-  if (!canvasStore.canvas) return
-
-  const nodeBgColor = colorPalette?.colors?.litegraph_base?.NODE_DEFAULT_BGCOLOR
-  if (nodeBgColor) {
-    LiteGraph.NODE_DEFAULT_BGCOLOR = applyOpacity(nodeBgColor, nodeOpacity)
-  }
-}
-
-const debouncedUpdateNodeOpacity = debounce(updateNodeOpacity, 128)
-
-watchEffect(() => {
-  const nodeOpacity = settingStore.get('Comfy.Node.Opacity')
-  debouncedUpdateNodeOpacity(nodeOpacity)
-})
-
 let dropTargetCleanup = () => {}
 
 onMounted(async () => {

src/extensions/core/colorPalette.ts

@@ -2,8 +2,6 @@ import { app } from '../../scripts/app'
 import { $el } from '../../scripts/ui'
 import type { ColorPalettes, Palette } from '@/types/colorPalette'
 import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
-import { applyOpacity } from '@/utils/colorUtil'
-import { useSettingStore } from '@/stores/settingStore'
 
 // Manage color palettes
 
@@ -684,13 +682,7 @@ app.registerExtension({
               colorPalette.colors.litegraph_base.hasOwnProperty(key) &&
               LiteGraph.hasOwnProperty(key)
             ) {
-              LiteGraph[key] =
-                key === 'NODE_DEFAULT_BGCOLOR'
-                  ? applyOpacity(
-                      colorPalette.colors.litegraph_base[key],
-                      useSettingStore().get('Comfy.Node.Opacity')
-                    )
-                  : colorPalette.colors.litegraph_base[key]
+              LiteGraph[key] = colorPalette.colors.litegraph_base[key]
             }
           }
         }

src/scripts/app.ts

@@ -21,7 +21,7 @@ import {
   validateComfyWorkflow
 } from '../types/comfyWorkflow'
 import { ComfyNodeDef, StatusWsMessageStatus } from '@/types/apiTypes'
-import { lightenColor } from '@/utils/colorUtil'
+import { adjustColor, ColorAdjustOptions } from '@/utils/colorUtil'
 import { ComfyAppMenu } from './ui/menu/index'
 import { getStorageValue } from './utils'
 import { ComfyWorkflowManager, ComfyWorkflow } from './workflows'
@@ -1568,14 +1568,25 @@ export class ComfyApp {
         this.editor_alpha = 0.2
       }
 
-      const adjustColor = (color?: string) => {
-        return color ? lightenColor(color, 0.5) : color
-      }
-      if (app.ui.settings.getSettingValue('Comfy.ColorPalette') === 'light') {
-        node.bgcolor = adjustColor(node.bgcolor)
-        node.color = adjustColor(node.color)
+      const adjustments: ColorAdjustOptions = {}
+
+      const opacity = useSettingStore().get('Comfy.Node.Opacity')
+      if (opacity) adjustments.opacity = opacity
+
+      if (useSettingStore().get('Comfy.ColorPalette') === 'light') {
+        adjustments.lightness = 0.5
+
+        // Lighten title bar of colored nodes on light theme
+        if (old_color) {
+          node.color = adjustColor(old_color, { lightness: 0.5 })
+        }
       }
 
+      node.bgcolor = adjustColor(
+        old_bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR,
+        adjustments
+      )
+
       const res = origDrawNode.apply(this, arguments)
 
       this.editor_alpha = editor_alpha