Implement color palette in Vue (#2047)

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

src/components/common/__tests__/TreeExplorerTreeNode.spec.ts

@@ -128,7 +128,7 @@ describe('TreeExplorerTreeNode', () => {
     expect(handleRenameMock).toHaveBeenCalledOnce()
     expect(addToastSpy).toHaveBeenCalledWith({
       severity: 'error',
-      summary: 'g.error',
+      summary: 'Error',
       detail: 'Rename failed',
       life: 3000
     })

src/components/dialog/content/SettingDialogContent.vue

@@ -32,6 +32,7 @@
           <template #header>
             <CurrentUserMessage v-if="tabValue === 'Comfy'" />
             <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
+            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
           </template>
           <SettingsPanel :settingGroups="sortedGroups(category)" />
         </PanelTemplate>
@@ -77,6 +78,7 @@ import PanelTemplate from './setting/PanelTemplate.vue'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 import CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -0,0 +1,63 @@
+<template>
+  <Message severity="info" icon="pi pi-palette" pt:text="w-full">
+    <div class="flex items-center justify-between">
+      <div>
+        {{ $t('settingsCategories.ColorPalette') }}
+      </div>
+      <div class="actions">
+        <Select
+          class="w-44"
+          v-model="activePaletteId"
+          :options="palettes"
+          optionLabel="name"
+          optionValue="id"
+        />
+        <Button
+          icon="pi pi-download"
+          text
+          :title="$t('g.download')"
+          @click="colorPaletteService.exportColorPalette(activePaletteId)"
+        />
+        <Button
+          icon="pi pi-upload"
+          text
+          :title="$t('g.import')"
+          @click="importCustomPalette"
+        />
+        <Button
+          icon="pi pi-trash"
+          severity="danger"
+          text
+          :title="$t('g.delete')"
+          @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
+          :disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
+        />
+      </div>
+    </div>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import Select from 'primevue/select'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+
+const colorPaletteStore = useColorPaletteStore()
+const colorPaletteService = useColorPaletteService()
+const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
+
+const importCustomPalette = async () => {
+  const palette = await colorPaletteService.importColorPalette()
+  if (palette) {
+    colorPaletteService.loadColorPalette(palette.id)
+  }
+}
+
+watch(activePaletteId, () => {
+  colorPaletteService.loadColorPalette(activePaletteId.value)
+})
+</script>

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
         })
       })
 

src/components/node/NodePreview.vue

@@ -81,12 +81,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 
 <script setup lang="ts">
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import {
-  getColorPalette,
-  defaultColorPalette
-} from '@/extensions/core/colorPalette'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import _ from 'lodash'
 import { useWidgetStore } from '@/stores/widgetStore'
+import { computed } from 'vue'
 
 const props = defineProps({
   nodeDef: {
@@ -95,12 +93,10 @@ const props = defineProps({
   }
 })
 
-// Node preview currently is recreated every time something is hovered.
-// So not reactive to the color palette changes after setup is fine.
-// If later we want NodePreview to be shown more persistently, then we should
-// make the getColorPalette() call reactive.
-const colors = getColorPalette()?.colors?.litegraph_base
-const litegraphColors = colors ?? defaultColorPalette.colors.litegraph_base
+const colorPaletteStore = useColorPaletteStore()
+const litegraphColors = computed(
+  () => colorPaletteStore.completedActivePalette.colors.litegraph_base
+)
 
 const widgetStore = useWidgetStore()