Fix double trigger of loadColorPalette effect (#2118)

Co-authored-by: github-actions <[email protected]>

browser_tests/colorPalette.spec.ts

@@ -134,8 +134,11 @@ const customColorPalettes = {
 test.describe('Color Palette', () => {
   test('Can show custom color palette', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
-    await comfyPage.nextFrame()
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.reload()
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -150,6 +153,12 @@ test.describe('Color Palette', () => {
     }, customColorPalettes.obsidian_dark)
     expect(await comfyPage.getToastErrorCount()).toBe(0)
 
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(

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

@@ -42,23 +42,20 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
-import { watch } from 'vue'
 
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
+const settingStore = useSettingStore()
 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)
+    settingStore.set('Comfy.ColorPalette', palette.id)
   }
 }
-
-watch(activePaletteId, () => {
-  colorPaletteService.loadColorPalette(activePaletteId.value)
-})
 </script>

src/components/graph/GraphCanvas.vue

@@ -223,11 +223,21 @@ watch(
 )
 
 const colorPaletteService = useColorPaletteService()
-watchEffect(() => {
-  if (!canvasStore.canvas) return
+const colorPaletteStore = useColorPaletteStore()
+watch(
+  [() => canvasStore.canvas, () => settingStore.get('Comfy.ColorPalette')],
+  ([canvas, currentPaletteId]) => {
+    if (!canvas) return
 
-  colorPaletteService.loadColorPalette(settingStore.get('Comfy.ColorPalette'))
-})
+    colorPaletteService.loadColorPalette(currentPaletteId)
+  }
+)
+watch(
+  () => colorPaletteStore.activePaletteId,
+  (newValue) => {
+    settingStore.set('Comfy.ColorPalette', newValue)
+  }
+)
 
 const workflowStore = useWorkflowStore()
 const persistCurrentWorkflow = () => {
@@ -343,7 +353,6 @@ onMounted(async () => {
   comfyAppReady.value = true
 
   // Load color palette
-  const colorPaletteStore = useColorPaletteStore()
   colorPaletteStore.customPalettes = settingStore.get(
     'Comfy.CustomColorPalettes'
   )

src/constants/coreSettings.ts

@@ -672,7 +672,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'The active color palette id',
     type: 'hidden',
     defaultValue: 'dark',
-    versionModified: '1.6.7'
+    versionModified: '1.6.7',
+    migrateDeprecatedValue(value: string) {
+      // Legacy custom palettes were prefixed with 'custom_'
+      return value.startsWith('custom_') ? value.replace('custom_', '') : value
+    }
   },
   {
     id: 'Comfy.CustomColorPalettes',

src/services/colorPaletteService.ts

@@ -143,7 +143,6 @@ export const useColorPaletteService = () => {
     app.canvas.setDirty(true, true)
 
     colorPaletteStore.activePaletteId = colorPaletteId
-    settingStore.set('Comfy.ColorPalette', colorPaletteId)
   }
 
   /**
@@ -180,7 +179,7 @@ export const useColorPaletteService = () => {
   return {
     addCustomColorPalette: wrapWithErrorHandling(addCustomColorPalette),
     deleteCustomColorPalette: wrapWithErrorHandling(deleteCustomColorPalette),
-    loadColorPalette: wrapWithErrorHandling(loadColorPalette),
+    loadColorPalette: wrapWithErrorHandlingAsync(loadColorPalette),
     exportColorPalette: wrapWithErrorHandling(exportColorPalette),
     importColorPalette: wrapWithErrorHandlingAsync(importColorPalette)
   }