Cleanup: Removing monkeypatches for litegraph logic (#5902)

## Summary

Putting the litegraph specific pieces into litegraph itself, using the
CanvasGraph and LiteGraphGlobal to coordinate options.

This was one part of the Image Previews reloading/calculating with every
canvas draw.

## Review Focus

Is this keeping things decoupled enough?
Is this the right place to put things?
Are there assumptions about the options that I'm missing here?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5902-WIP-Removing-monkeypatches-for-litegraph-logic-2816d73d3650818b860ec73579b89b54)
by [Unito](https://www.unito.io)

---------

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

src/components/graph/GraphCanvas.vue

@@ -103,6 +103,7 @@ import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { i18n, t } from '@/i18n'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -143,6 +144,8 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
+const colorPaletteStore = useColorPaletteStore()
+const colorPaletteService = useColorPaletteService()
 const canvasInteractions = useCanvasInteractions()
 
 const betaMenuEnabled = computed(
@@ -192,6 +195,15 @@ const allNodes = computed((): VueNodeData[] =>
   Array.from(vueNodeLifecycle.nodeManager.value?.vueNodeData?.values() ?? [])
 )
 
+watchEffect(() => {
+  LiteGraph.nodeOpacity = settingStore.get('Comfy.Node.Opacity')
+})
+watchEffect(() => {
+  LiteGraph.nodeLightness = colorPaletteStore.completedActivePalette.light_theme
+    ? 0.5
+    : undefined
+})
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -238,8 +250,6 @@ watch(
   }
 )
 
-const colorPaletteService = useColorPaletteService()
-const colorPaletteStore = useColorPaletteStore()
 watch(
   [() => canvasStore.canvas, () => settingStore.get('Comfy.ColorPalette')],
   async ([canvas, currentPaletteId]) => {

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5194,10 +5194,9 @@ export class LGraphCanvas
     const color = node.renderingColor
     const bgcolor = node.renderingBgColor
 
-    const { low_quality, editor_alpha } = this
-    ctx.globalAlpha = editor_alpha
+    ctx.globalAlpha = this.getNodeModeAlpha(node)
 
-    if (this.render_shadows && !low_quality) {
+    if (this.render_shadows && !this.low_quality) {
       ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR
       ctx.shadowOffsetX = 2 * this.ds.scale
       ctx.shadowOffsetY = 2 * this.ds.scale
@@ -5259,7 +5258,7 @@ export class LGraphCanvas
       }
     }
 
-    if (!low_quality) {
+    if (!this.low_quality) {
       node.drawBadges(ctx)
     }
 
@@ -5693,6 +5692,14 @@ export class LGraphCanvas
     ctx.globalAlpha = 1
   }
 
+  private getNodeModeAlpha(node: LGraphNode) {
+    return node.mode === LGraphEventMode.BYPASS
+      ? 0.2
+      : node.mode === LGraphEventMode.NEVER
+        ? 0.4
+        : this.editor_alpha
+  }
+
   #renderFloatingLinks(
     ctx: CanvasRenderingContext2D,
     graph: LGraph,
@@ -6044,7 +6051,7 @@ export class LGraphCanvas
   ): void {
     node.drawWidgets(ctx, {
       lowQuality: this.low_quality,
-      editorAlpha: this.editor_alpha
+      editorAlpha: this.getNodeModeAlpha(node)
     })
   }
 

src/lib/litegraph/src/LGraphNode.ts

@@ -7,6 +7,7 @@ import {
 } from '@/renderer/core/canvas/litegraph/slotCalculations'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { type ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 
 import type { DragAndScale } from './DragAndScale'
 import type { LGraph } from './LGraph'
@@ -302,13 +303,25 @@ export class LGraphNode
 
   /** The fg color used to render the node. */
   get renderingColor(): string {
-    return this.color || this.constructor.color || LiteGraph.NODE_DEFAULT_COLOR
+    const baseColor =
+      this.color || this.constructor.color || LiteGraph.NODE_DEFAULT_COLOR
+    return adjustColor(baseColor, { lightness: LiteGraph.nodeLightness })
   }
 
   /** The bg color used to render the node. */
   get renderingBgColor(): string {
-    return (
+    const baseBgColor =
       this.bgcolor || this.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
+    const adjustments: ColorAdjustOptions = {
+      opacity: LiteGraph.nodeOpacity,
+      lightness: LiteGraph.nodeLightness
+    }
+
+    return adjustColor(
+      this.mode === LGraphEventMode.BYPASS
+        ? LiteGraph.NODE_DEFAULT_BYPASS_COLOR
+        : baseBgColor,
+      adjustments
     )
   }
 

src/lib/litegraph/src/LiteGraphGlobal.ts

@@ -60,6 +60,8 @@ export class LiteGraphGlobal {
   NODE_BOX_OUTLINE_COLOR = '#FFF'
   NODE_ERROR_COLOUR = '#E00'
   NODE_FONT = 'Arial'
+  NODE_DEFAULT_BYPASS_COLOR = '#FF00FF'
+  NODE_OPACITY = 0.9
 
   DEFAULT_FONT = 'Arial'
   DEFAULT_SHADOW_COLOR = 'rgba(0,0,0,0.5)'
@@ -348,6 +350,10 @@ export class LiteGraphGlobal {
    */
   vueNodesMode: boolean = false
 
+  // Special Rendering Values pulled out of app.ts patches
+  nodeOpacity = 1
+  nodeLightness: number | undefined = undefined
+
   // TODO: Remove legacy accessors
   LGraph = LGraph
   LLink = LLink

src/scripts/app.ts

@@ -10,7 +10,6 @@ import { st, t } from '@/i18n'
 import {
   LGraph,
   LGraphCanvas,
-  LGraphEventMode,
   LGraphNode,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
@@ -61,12 +60,10 @@ import { useModelStore } from '@/stores/modelStore'
 import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { type ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { type ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 import {
@@ -197,7 +194,6 @@ export class ComfyApp {
   bodyBottom: HTMLElement
   canvasContainer: HTMLElement
   menu: ComfyAppMenu
-  bypassBgColor: string
   // Set by Comfy.Clipspace extension
   openClipspace: () => void = () => {}
 
@@ -302,7 +298,6 @@ export class ComfyApp {
     this.canvasContainer = $el('div.graph-canvas-container')
 
     this.menu = new ComfyAppMenu(this)
-    this.bypassBgColor = '#FF00FF'
 
     /**
      * Stores the execution output data for each node
@@ -641,54 +636,7 @@ export class ComfyApp {
       }
 
       // Fall through to Litegraph defaults
-      // @ts-expect-error fixme ts strict error
-      return origProcessKey.apply(this, arguments)
-    }
-  }
-
-  private addDrawNodeHandler() {
-    const origDrawNode = LGraphCanvas.prototype.drawNode
-    LGraphCanvas.prototype.drawNode = function (node) {
-      const editor_alpha = this.editor_alpha
-      const old_color = node.color
-      const old_bgcolor = node.bgcolor
-
-      if (node.mode === LGraphEventMode.NEVER) {
-        this.editor_alpha = 0.4
-      }
-
-      let bgColor: string
-      if (node.mode === LGraphEventMode.BYPASS) {
-        bgColor = app.bypassBgColor
-        this.editor_alpha = 0.2
-      } else {
-        bgColor = old_bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
-      }
-
-      const adjustments: ColorAdjustOptions = {}
-
-      const opacity = useSettingStore().get('Comfy.Node.Opacity')
-      if (opacity) adjustments.opacity = opacity
-
-      if (useColorPaletteStore().completedActivePalette.light_theme) {
-        if (old_bgcolor) 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(bgColor, adjustments)
-
-      // @ts-expect-error fixme ts strict error
-      const res = origDrawNode.apply(this, arguments)
-
-      this.editor_alpha = editor_alpha
-      node.color = old_color
-      node.bgcolor = old_bgcolor
-
-      return res
+      return origProcessKey.apply(this, [e])
     }
   }
 
@@ -898,7 +846,6 @@ export class ComfyApp {
     await useExtensionService().invokeExtensionsAsync('init')
     await this.registerNodes()
 
-    this.addDrawNodeHandler()
     this.addDropHandler()
 
     await useExtensionService().invokeExtensionsAsync('setup')

src/services/colorPaletteService.ts

@@ -84,9 +84,6 @@ export const useColorPaletteService = () => {
    * @param liteGraphColorPalette - The palette to set.
    */
   const loadLiteGraphColorPalette = (palette: Colors['litegraph_base']) => {
-    // Sets special case colors
-    app.bypassBgColor = palette.NODE_BYPASS_BGCOLOR
-
     // Sets the colors of the LiteGraph objects
     app.canvas.node_title_color = palette.NODE_TITLE_COLOR
     app.canvas.default_link_color = palette.LINK_COLOR

tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap

@@ -61,6 +61,7 @@ LiteGraphGlobal {
   "NODE_COLLAPSED_WIDTH": 80,
   "NODE_DEFAULT_BGCOLOR": "#353535",
   "NODE_DEFAULT_BOXCOLOR": "#666",
+  "NODE_DEFAULT_BYPASS_COLOR": "#FF00FF",
   "NODE_DEFAULT_COLOR": "#333",
   "NODE_DEFAULT_SHAPE": 2,
   "NODE_ERROR_COLOUR": "#E00",
@@ -79,6 +80,7 @@ LiteGraphGlobal {
     "#224",
     "#626",
   ],
+  "NODE_OPACITY": 0.9,
   "NODE_SELECTED_TITLE_COLOR": "#FFF",
   "NODE_SLOT_HEIGHT": 20,
   "NODE_SUBTEXT_SIZE": 12,
@@ -161,6 +163,8 @@ LiteGraphGlobal {
   "macTrackpadGestures": false,
   "middle_click_slot_add_default_node": false,
   "mouseWheelScroll": "panning",
+  "nodeLightness": undefined,
+  "nodeOpacity": 1,
   "node_box_coloured_by_mode": false,
   "node_box_coloured_when_on": false,
   "node_images_path": "",