Implement color palette in Vue (#2047)

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

src/components/graph/GraphCanvas.vue

@@ -65,6 +65,8 @@ import { ChangeTracker } from '@/scripts/changeTracker'
 import { api } from '@/scripts/api'
 import { useCommandStore } from '@/stores/commandStore'
 import { workflowService } from '@/services/workflowService'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useColorPaletteService } from '@/services/colorPaletteService'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -209,6 +211,13 @@ watchEffect(() => {
   canvasStore.canvas.canvas.style.cursor = 'default'
 })
 
+const colorPaletteService = useColorPaletteService()
+watchEffect(() => {
+  if (!canvasStore.canvas) return
+
+  colorPaletteService.loadColorPalette(settingStore.get('Comfy.ColorPalette'))
+})
+
 const workflowStore = useWorkflowStore()
 const persistCurrentWorkflow = () => {
   const workflow = JSON.stringify(comfyApp.serializeGraph())
@@ -315,6 +324,12 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Load color palette
+  const colorPaletteStore = useColorPaletteStore()
+  colorPaletteStore.customPalettes = settingStore.get(
+    'Comfy.CustomColorPalettes'
+  )
+
   // Start watching for locale change after the initial value is loaded.
   watch(
     () => settingStore.get('Comfy.Locale'),

src/components/graph/NodeBadge.vue

@@ -7,10 +7,6 @@
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
-import {
-  defaultColorPalette,
-  getColorPalette
-} from '@/extensions/core/colorPalette'
 import { app } from '@/scripts/app'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { BadgePosition } from '@comfyorg/litegraph'
@@ -18,9 +14,11 @@ import { LGraphBadge } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import type { Palette } from '@/types/colorPaletteTypes'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const settingStore = useSettingStore()
+const colorPaletteStore = useColorPaletteStore()
+
 const nodeSourceBadgeMode = computed(
   () => settingStore.get('Comfy.NodeBadge.NodeSourceBadgeMode') as NodeBadgeMode
 )
@@ -36,10 +34,6 @@ watch([nodeSourceBadgeMode, nodeIdBadgeMode, nodeLifeCycleBadgeMode], () => {
   app.graph?.setDirtyCanvas(true, true)
 })
 
-const colorPalette = computed<Palette | undefined>(() =>
-  getColorPalette(settingStore.get('Comfy.ColorPalette'))
-)
-
 const nodeDefStore = useNodeDefStore()
 function badgeTextVisible(
   nodeDef: ComfyNodeDefImpl | null,
@@ -79,11 +73,11 @@ onMounted(() => {
             }
           ),
           fgColor:
-            colorPalette.value?.colors?.litegraph_base?.BADGE_FG_COLOR ||
-            defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
+            colorPaletteStore.completedActivePalette.colors.litegraph_base
+              .BADGE_FG_COLOR,
           bgColor:
-            colorPalette.value?.colors?.litegraph_base?.BADGE_BG_COLOR ||
-            defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
+            colorPaletteStore.completedActivePalette.colors.litegraph_base
+              .BADGE_BG_COLOR
         })
       })