Add node opacity setting (#909)

* Add node opacity setting

* Add colorUtil unit test

* Add playwright test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/GraphCanvas.vue

@@ -42,6 +42,9 @@ 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)
@@ -90,6 +93,24 @@ 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 () => {