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/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')