ComfyUI_frontend/src/stores/settingStore.ts

/**
 * TODO: Migrate scripts/ui/settings.ts here
 *
 * Currently the reactive settings act as a proxy of the legacy settings.
 * Every time a setting is changed, the settingStore dispatch the change to the
 * legacy settings. Every time the legacy settings are changed, the legacy
 * settings directly updates the settingStore.settingValues.
 */

import { app } from '@/scripts/app'
import { ComfySettingsDialog } from '@/scripts/ui/settings'
import { Settings } from '@/types/apiTypes'
import { LinkReleaseTriggerMode } from '@/types/searchBoxTypes'
import { SettingParams } from '@/types/settingTypes'
import { buildTree } from '@/utils/treeUtil'
import { defineStore } from 'pinia'
import type { TreeNode } from 'primevue/treenode'

export interface SettingTreeNode extends TreeNode {
  data?: SettingParams
}

interface State {
  settingValues: Record<string, any>
  settings: Record<string, SettingParams>
}

export const useSettingStore = defineStore('setting', {
  state: (): State => ({
    settingValues: {},
    settings: {}
  }),
  getters: {
    // Setting tree structure used for the settings dialog display.
    settingTree(): SettingTreeNode {
      const root = buildTree(
        Object.values(this.settings).filter(
          (setting: SettingParams) => setting.type !== 'hidden'
        ),
        (setting: SettingParams) => setting.category || setting.id.split('.')
      )

      const floatingSettings = root.children.filter((node) => node.leaf)
      if (floatingSettings.length) {
        root.children = root.children.filter((node) => !node.leaf)
        root.children.push({
          key: 'Other',
          label: 'Other',
          leaf: false,
          children: floatingSettings
        })
      }

      return root
    }
  },
  actions: {
    addSettings(settings: ComfySettingsDialog) {
      for (const id in settings.settingsLookup) {
        const value = settings.getSettingValue(id)
        this.settingValues[id] = value
      }
      this.settings = settings.settingsParamLookup

      app.ui.settings.addSetting({
        id: 'Comfy.Validation.Workflows',
        name: 'Validate workflows',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.NodeSearchBoxImpl',
        category: ['Comfy', 'Node Search Box', 'Implementation'],
        experimental: true,
        name: 'Node search box implementation',
        type: 'combo',
        options: ['default', 'litegraph (legacy)'],
        defaultValue: 'default'
      })

      app.ui.settings.addSetting({
        id: 'Comfy.NodeSearchBoxImpl.LinkReleaseTrigger',
        category: ['Comfy', 'Node Search Box', 'LinkReleaseTrigger'],
        name: 'Trigger on link release',
        tooltip: 'Only applies to the default implementation',
        type: 'combo',
        options: Object.values(LinkReleaseTriggerMode),
        defaultValue: LinkReleaseTriggerMode.ALWAYS
      })

      app.ui.settings.addSetting({
        id: 'Comfy.NodeSearchBoxImpl.NodePreview',
        category: ['Comfy', 'Node Search Box', 'NodePreview'],
        name: 'Node preview',
        tooltip: 'Only applies to the default implementation',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.NodeSearchBoxImpl.ShowCategory',
        category: ['Comfy', 'Node Search Box', 'ShowCategory'],
        name: 'Show node category in search results',
        tooltip: 'Only applies to the default implementation',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Sidebar.Location',
        category: ['Comfy', 'Sidebar', 'Location'],
        name: 'Sidebar location',
        type: 'combo',
        options: ['left', 'right'],
        defaultValue: 'left'
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Sidebar.Size',
        category: ['Comfy', 'Sidebar', 'Size'],
        name: 'Sidebar size',
        type: 'combo',
        options: ['normal', 'small'],
        defaultValue: window.innerWidth < 1600 ? 'small' : 'normal'
      })

      app.ui.settings.addSetting({
        id: 'Comfy.TextareaWidget.FontSize',
        category: ['Comfy', 'Node Widget', 'TextareaWidget', 'FontSize'],
        name: 'Textarea widget font size',
        type: 'slider',
        defaultValue: 10,
        attrs: {
          min: 8,
          max: 24
        }
      })

      app.ui.settings.addSetting({
        id: 'Comfy.TextareaWidget.Spellcheck',
        category: ['Comfy', 'Node Widget', 'TextareaWidget', 'Spellcheck'],
        name: 'Textarea widget spellcheck',
        type: 'boolean',
        defaultValue: false
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Workflow.SortNodeIdOnSave',
        name: 'Sort node IDs when saving workflow',
        type: 'boolean',
        defaultValue: false
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Graph.CanvasInfo',
        name: 'Show canvas info (fps, etc.)',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Node.ShowDeprecated',
        name: 'Show deprecated nodes in search',
        tooltip:
          'Deprecated nodes are hidden by default in the UI, but remain functional in existing workflows that use them.',
        type: 'boolean',
        defaultValue: false
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Node.ShowExperimental',
        name: 'Show experimental nodes in search',
        tooltip:
          'Experimental nodes are marked as such in the UI and may be subject to significant changes or removal in future versions. Use with caution in production workflows',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Workflow.ShowMissingNodesWarning',
        name: 'Show missing nodes warning',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Workflow.ShowMissingModelsWarning',
        name: 'Show missing models warning',
        type: 'boolean',
        defaultValue: true
      })

      app.ui.settings.addSetting({
        id: 'Comfy.Graph.ZoomSpeed',
        name: 'Canvas zoom speed',
        type: 'slider',
        defaultValue: 1.1,
        attrs: {
          min: 1.01,
          max: 2.5,
          step: 0.01
        }
      })

      // Bookmarks are stored in the settings store.
      // Bookmarks are in format of category/display_name. e.g. "conditioning/CLIPTextEncode"
      app.ui.settings.addSetting({
        id: 'Comfy.NodeLibrary.Bookmarks',
        name: 'Node library bookmarks',
        type: 'hidden',
        defaultValue: []
      })

      // Stores mapping from bookmark folder name to its customization.
      app.ui.settings.addSetting({
        id: 'Comfy.NodeLibrary.BookmarksCustomization',
        name: 'Node library bookmarks customization',
        type: 'hidden',
        defaultValue: {}
      })
    },

    set<K extends keyof Settings>(key: K, value: Settings[K]) {
      this.settingValues[key] = value
      app.ui.settings.setSettingValue(key, value)
    },

    get<K extends keyof Settings>(key: K): Settings[K] {
      return (
        this.settingValues[key] ?? app.ui.settings.getSettingDefaultValue(key)
      )
    }
  }
})