Fix node badge on unknown color palette (#1487)

* Fix node badge on unknown color palette

* Update test expectations [skip ci]

---------

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

browser_tests/colorPalette.spec.ts

@@ -211,7 +211,7 @@ test.describe('Node Color Adjustments', () => {
       await comfyPage.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
       const node = await comfyPage.getFirstNodeRef()
-      await node.clickContextMenuOption('Colors')
+      await node?.clickContextMenuOption('Colors')
     })
 
     test('should persist color adjustments when changing custom node colors', async ({

browser_tests/nodeBadge.spec.ts

@@ -74,3 +74,21 @@ test.describe('Node source badge', () => {
     })
   })
 })
+
+test.describe('Node badge color', () => {
+  test('Can show node badge with unknown color palette', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting(
+      'Comfy.NodeBadge.NodeIdBadgeMode',
+      NodeBadgeMode.ShowAll
+    )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'unknown')
+    await comfyPage.nextFrame()
+    // Click empty space to trigger canvas re-render.
+    await comfyPage.clickEmptySpace()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-badge-unknown-color-palette.png'
+    )
+  })
+})

src/components/graph/NodeBadge.vue

@@ -18,6 +18,7 @@ import { LGraphBadge } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { Palette } from '@/types/colorPalette'
 
 const settingStore = useSettingStore()
 const nodeSourceBadgeMode = computed(
@@ -35,7 +36,7 @@ watch([nodeSourceBadgeMode, nodeIdBadgeMode, nodeLifeCycleBadgeMode], () => {
   app.graph?.setDirtyCanvas(true, true)
 })
 
-const colorPalette = computed(() =>
+const colorPalette = computed<Palette | undefined>(() =>
   getColorPalette(settingStore.get('Comfy.ColorPalette'))
 )
 
@@ -78,10 +79,10 @@ onMounted(() => {
             }
           ),
           fgColor:
-            colorPalette.value.colors.litegraph_base?.BADGE_FG_COLOR ||
+            colorPalette.value?.colors?.litegraph_base?.BADGE_FG_COLOR ||
             defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
           bgColor:
-            colorPalette.value.colors.litegraph_base?.BADGE_BG_COLOR ||
+            colorPalette.value?.colors?.litegraph_base?.BADGE_BG_COLOR ||
             defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
         })
       })

src/extensions/core/colorPalette.ts

@@ -452,7 +452,9 @@ const setCustomColorPalettes = (customColorPalettes: ColorPalettes) => {
 }
 
 export const defaultColorPalette = colorPalettes[defaultColorPaletteId]
-export const getColorPalette = (colorPaletteId?) => {
+export const getColorPalette = (
+  colorPaletteId?: string
+): Palette | undefined => {
   if (!colorPaletteId) {
     colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId)
   }