Fix double trigger of loadColorPalette effect (#2118)

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

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

@@ -42,11 +42,12 @@ 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)
@@ -54,11 +55,7 @@ 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'
   )