Implement color palette in Vue (#2047)

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

src/stores/extensionStore.ts

@@ -11,13 +11,8 @@ import { useWidgetStore } from './widgetStore'
 
 /**
  * These extensions are always active, even if they are disabled in the setting.
- * TODO(https://github.com/Comfy-Org/ComfyUI_frontend/issues/1996):
- * Migrate logic to out of extensions/core, as features provided
- * by these extensions are now essential to core.
  */
-export const ALWAYS_ENABLED_EXTENSIONS: readonly string[] = [
-  'Comfy.ColorPalette'
-]
+export const ALWAYS_ENABLED_EXTENSIONS: readonly string[] = []
 
 export const ALWAYS_DISABLED_EXTENSIONS: readonly string[] = [
   // pysssss.Locking is replaced by pin/unpin in ComfyUI core.

src/stores/nodeDefStore.ts

@@ -319,6 +319,18 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
   const showExperimental = ref(false)
 
   const nodeDefs = computed(() => Object.values(nodeDefsByName.value))
+  const nodeDataTypes = computed(() => {
+    const types = new Set<string>()
+    for (const nodeDef of nodeDefs.value) {
+      for (const input of nodeDef.inputs.all) {
+        types.add(input.type)
+      }
+      for (const output of nodeDef.outputs.all) {
+        types.add(output.type)
+      }
+    }
+    return types
+  })
   const visibleNodeDefs = computed(() =>
     nodeDefs.value.filter(
       (nodeDef: ComfyNodeDefImpl) =>
@@ -365,6 +377,7 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
     showExperimental,
 
     nodeDefs,
+    nodeDataTypes,
     visibleNodeDefs,
     nodeSearchService,
     nodeTree,

src/stores/workspace/colorPaletteStore.ts

@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type {
+  ColorPalettes,
+  CompletedPalette,
+  Palette
+} from '@/types/colorPaletteTypes'
+import {
+  CORE_COLOR_PALETTES,
+  DEFAULT_COLOR_PALETTE
+} from '@/constants/coreColorPalettes'
+
+export const useColorPaletteStore = defineStore('colorPalette', () => {
+  const customPalettes = ref<ColorPalettes>({})
+  const activePaletteId = ref<string>(DEFAULT_COLOR_PALETTE.id)
+
+  const palettesLookup = computed(() => ({
+    ...CORE_COLOR_PALETTES,
+    ...customPalettes.value
+  }))
+
+  const palettes = computed(() => Object.values(palettesLookup.value))
+  const completedActivePalette = computed(() =>
+    completePalette(palettesLookup.value[activePaletteId.value])
+  )
+
+  const addCustomPalette = (palette: Palette) => {
+    if (palette.id in palettesLookup.value) {
+      throw new Error(`Palette with id ${palette.id} already exists`)
+    }
+
+    customPalettes.value[palette.id] = palette
+    activePaletteId.value = palette.id
+  }
+
+  const deleteCustomPalette = (id: string) => {
+    if (!(id in customPalettes.value)) {
+      throw new Error(`Palette with id ${id} does not exist`)
+    }
+
+    delete customPalettes.value[id]
+    activePaletteId.value = CORE_COLOR_PALETTES.dark.id
+  }
+
+  const isCustomPalette = (id: string) => {
+    return id in customPalettes.value
+  }
+
+  /**
+   * Completes the palette with default values for missing colors.
+   *
+   * @param palette - The palette to complete.
+   * @returns The completed palette.
+   */
+  const completePalette = (palette: Palette): CompletedPalette => {
+    return {
+      ...palette,
+      colors: {
+        ...palette.colors,
+        node_slot: {
+          ...DEFAULT_COLOR_PALETTE.colors.node_slot,
+          ...palette.colors.node_slot
+        },
+        litegraph_base: {
+          ...DEFAULT_COLOR_PALETTE.colors.litegraph_base,
+          ...palette.colors.litegraph_base
+        },
+        comfy_base: {
+          ...DEFAULT_COLOR_PALETTE.colors.comfy_base,
+          ...palette.colors.comfy_base
+        }
+      }
+    }
+  }
+
+  return {
+    // State
+    customPalettes,
+    activePaletteId,
+
+    // Getters
+    palettesLookup,
+    palettes,
+    completedActivePalette,
+
+    // Actions
+    isCustomPalette,
+    addCustomPalette,
+    deleteCustomPalette,
+    completePalette
+  }
+})