Fix litegraph crash on using custom colorPalette (#795)

src/extensions/core/colorPalette.ts

@@ -5,7 +5,7 @@ import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 
 // Manage color palettes
 
-export const colorPalettes: ColorPalettes = {
+const colorPalettes: ColorPalettes = {
   dark: {
     id: 'dark',
     name: 'Dark (Default)',
@@ -431,6 +431,39 @@ const defaultColorPaletteId = 'dark'
 const els: { select: HTMLSelectElement | null } = {
   select: null
 }
+
+const getCustomColorPalettes = (): ColorPalettes => {
+  return app.ui.settings.getSettingValue(idCustomColorPalettes, {})
+}
+
+const setCustomColorPalettes = (customColorPalettes: ColorPalettes) => {
+  return app.ui.settings.setSettingValue(
+    idCustomColorPalettes,
+    customColorPalettes
+  )
+}
+
+export const defaultColorPalette = colorPalettes[defaultColorPaletteId]
+export const getColorPalette = (colorPaletteId?) => {
+  if (!colorPaletteId) {
+    colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId)
+  }
+
+  if (colorPaletteId.startsWith('custom_')) {
+    colorPaletteId = colorPaletteId.substr(7)
+    let customColorPalettes = getCustomColorPalettes()
+    if (customColorPalettes[colorPaletteId]) {
+      return customColorPalettes[colorPaletteId]
+    }
+  }
+
+  return colorPalettes[colorPaletteId]
+}
+
+const setColorPalette = (colorPaletteId) => {
+  app.ui.settings.setSettingValue(id, colorPaletteId)
+}
+
 // const ctxMenu = LiteGraph.ContextMenu;
 app.registerExtension({
   name: id,
@@ -547,17 +580,6 @@ app.registerExtension({
       return completeColorPalette(colorPalette)
     }
 
-    const getCustomColorPalettes = (): ColorPalettes => {
-      return app.ui.settings.getSettingValue(idCustomColorPalettes, {})
-    }
-
-    const setCustomColorPalettes = (customColorPalettes: ColorPalettes) => {
-      return app.ui.settings.setSettingValue(
-        idCustomColorPalettes,
-        customColorPalettes
-      )
-    }
-
     const addCustomColorPalette = async (colorPalette) => {
       if (typeof colorPalette !== 'object') {
         alert('Invalid color palette.')
@@ -678,29 +700,6 @@ app.registerExtension({
       }
     }
 
-    const getColorPalette = (colorPaletteId?) => {
-      if (!colorPaletteId) {
-        colorPaletteId = app.ui.settings.getSettingValue(
-          id,
-          defaultColorPaletteId
-        )
-      }
-
-      if (colorPaletteId.startsWith('custom_')) {
-        colorPaletteId = colorPaletteId.substr(7)
-        let customColorPalettes = getCustomColorPalettes()
-        if (customColorPalettes[colorPaletteId]) {
-          return customColorPalettes[colorPaletteId]
-        }
-      }
-
-      return colorPalettes[colorPaletteId]
-    }
-
-    const setColorPalette = (colorPaletteId) => {
-      app.ui.settings.setSettingValue(id, colorPaletteId)
-    }
-
     const fileInput = $el('input', {
       type: 'file',
       accept: '.json',

src/extensions/core/nodeBadge.ts

@@ -9,7 +9,7 @@ import {
   NodeBadgeMode
 } from '@/types/nodeSource'
 import _ from 'lodash'
-import { colorPalettes } from './colorPalette'
+import { getColorPalette, defaultColorPalette } from './colorPalette'
 import { BadgePosition } from '@comfyorg/litegraph'
 import type { Palette } from '@/types/colorPalette'
 
@@ -47,8 +47,7 @@ class NodeBadgeExtension implements ComfyExtension {
   constructor(
     public nodeIdBadgeMode: ComputedRef<NodeBadgeMode> | null = null,
     public nodeSourceBadgeMode: ComputedRef<NodeBadgeMode> | null = null,
-    public colorPalette: ComputedRef<Palette> | null = null,
-    public defaultColorPalette: Palette | null = null
+    public colorPalette: ComputedRef<Palette> | null = null
   ) {}
 
   init(app: ComfyApp) {
@@ -64,10 +63,9 @@ class NodeBadgeExtension implements ComfyExtension {
     this.nodeIdBadgeMode = computed(
       () => settingStore.get('Comfy.NodeBadge.NodeIdBadgeMode') as NodeBadgeMode
     )
-    this.colorPalette = computed(
-      () => colorPalettes[settingStore.get('Comfy.ColorPalette')]
+    this.colorPalette = computed(() =>
+      getColorPalette(settingStore.get('Comfy.ColorPalette'))
     )
-    this.defaultColorPalette = colorPalettes['dark']
 
     watch(this.nodeSourceBadgeMode, () => {
       app.graph.setDirtyCanvas(true, true)
@@ -103,10 +101,10 @@ class NodeBadgeExtension implements ComfyExtension {
           ),
           fgColor:
             this.colorPalette.value.colors.litegraph_base?.BADGE_FG_COLOR ||
-            this.defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
+            defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
           bgColor:
             this.colorPalette.value.colors.litegraph_base?.BADGE_BG_COLOR ||
-            this.defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
+            defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
         })
     )