Group comfy core settings (#508)

* Add category overwrite

* Group settings

src/extensions/core/colorPalette.ts

@@ -714,6 +714,7 @@ app.registerExtension({
 
     app.ui.settings.addSetting({
       id,
+      category: ['Comfy', 'ColorPalette'],
       name: 'Color Palette',
       type: (name, setter, value) => {
         const options = [

src/extensions/core/invertMenuScrolling.ts

@@ -23,7 +23,8 @@ app.registerExtension({
     }
     app.ui.settings.addSetting({
       id,
-      name: 'Invert Menu Scrolling',
+      category: ['Comfy', 'Graph', 'InvertMenuScrolling'],
+      name: 'Invert Context Menu Scrolling',
       type: 'boolean',
       defaultValue: false,
       onChange(value) {

src/extensions/core/linkRenderMode.ts

@@ -6,6 +6,7 @@ const ext = {
   async setup(app) {
     app.ui.settings.addSetting({
       id,
+      category: ['Comfy', 'Graph', 'LinkRenderMode'],
       name: 'Link Render Mode',
       defaultValue: 2,
       type: 'combo',

src/extensions/core/slotDefaults.ts

@@ -11,7 +11,9 @@ app.registerExtension({
     LiteGraph.middle_click_slot_add_default_node = true
     this.suggestionsNumber = app.ui.settings.addSetting({
       id: 'Comfy.NodeSuggestions.number',
+      category: ['Comfy', 'Node Search Box', 'NodeSuggestions'],
       name: 'Number of nodes suggestions',
+      tooltip: 'Only for litegraph searchbox/context menu',
       type: 'slider',
       attrs: {
         min: 1,

src/extensions/core/snapToGrid.ts

@@ -23,7 +23,8 @@ app.registerExtension({
     // Add setting to control grid size
     app.ui.settings.addSetting({
       id: 'Comfy.SnapToGrid.GridSize',
-      name: 'Grid Size',
+      category: ['Comfy', 'Graph', 'GridSize'],
+      name: 'Snap to gird size',
       type: 'slider',
       attrs: {
         min: 1,

src/scripts/app.ts

@@ -418,6 +418,7 @@ export class ComfyApp {
     }
     this.enableWorkflowViewRestore = this.ui.settings.addSetting({
       id: 'Comfy.EnableWorkflowViewRestore',
+      category: ['Comfy', 'Workflow', 'EnableWorkflowViewRestore'],
       name: 'Save and restore canvas position and zoom level in workflows',
       type: 'boolean',
       defaultValue: true

src/scripts/domWidget.ts

@@ -245,6 +245,7 @@ let enableDomClipping = true
 export function addDomClippingSetting(): void {
   app.ui.settings.addSetting({
     id: 'Comfy.DOMClippingEnabled',
+    category: ['Comfy', 'Node', 'DOMClippingEnabled'],
     name: 'Enable DOM element clipping (enabling may reduce performance)',
     type: 'boolean',
     defaultValue: enableDomClipping,

src/scripts/ui.ts

@@ -167,7 +167,8 @@ function dragElement(dragEl, settings): () => void {
   let savePos = undefined
   settings.addSetting({
     id: 'Comfy.MenuPosition',
-    name: 'Save menu position',
+    category: ['Comfy', 'Menu', 'MenuPosition'],
+    name: "Save legacy menu's position",
     type: 'boolean',
     defaultValue: savePos,
     onChange(value) {
@@ -369,6 +370,7 @@ export class ComfyUI {
 
     const confirmClear = this.settings.addSetting({
       id: 'Comfy.ConfirmClear',
+      category: ['Comfy', 'Workflow', 'ConfirmClear'],
       name: 'Require confirmation when clearing workflow',
       type: 'boolean',
       defaultValue: true
@@ -376,6 +378,7 @@ export class ComfyUI {
 
     const promptFilename = this.settings.addSetting({
       id: 'Comfy.PromptFilename',
+      category: ['Comfy', 'Workflow', 'PromptFilename'],
       name: 'Prompt for filename when saving workflow',
       type: 'boolean',
       defaultValue: true
@@ -394,13 +397,17 @@ export class ComfyUI {
      */
     const previewImage = this.settings.addSetting({
       id: 'Comfy.PreviewFormat',
-      name: 'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
+      category: ['Comfy', 'Node Widget', 'PreviewFormat'],
+      name: 'Preview image format',
+      tooltip:
+        'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
       type: 'text',
       defaultValue: ''
     })
 
     this.settings.addSetting({
       id: 'Comfy.DisableSliders',
+      category: ['Comfy', 'Node Widget', 'DisableSliders'],
       name: 'Disable node widget sliders',
       type: 'boolean',
       defaultValue: false
@@ -408,14 +415,19 @@ export class ComfyUI {
 
     this.settings.addSetting({
       id: 'Comfy.DisableFloatRounding',
-      name: 'Disable rounding floats (requires page reload).',
+      category: ['Comfy', 'Node Widget', 'DisableFloatRounding'],
+      name: 'Disable default float widget rounding.',
+      tooltip:
+        '(requires page reload) Cannot disable round when round is set by the node in the backend.',
       type: 'boolean',
       defaultValue: false
     })
 
     this.settings.addSetting({
       id: 'Comfy.FloatRoundingPrecision',
-      name: 'Decimal places [0 = auto] (requires page reload).',
+      category: ['Comfy', 'Node Widget', 'FloatRoundingPrecision'],
+      name: 'Float widget rounding decimal places [0 = auto].',
+      tooltip: '(requires page reload)',
       type: 'slider',
       attrs: {
         min: 0,
@@ -427,6 +439,7 @@ export class ComfyUI {
 
     this.settings.addSetting({
       id: 'Comfy.EnableTooltips',
+      category: ['Comfy', 'Node', 'EnableTooltips'],
       name: 'Enable Tooltips',
       type: 'boolean',
       defaultValue: true

src/scripts/ui/menu/index.ts

@@ -158,8 +158,10 @@ export class ComfyAppMenu {
     let resizeHandler: () => void
     this.menuPositionSetting = app.ui.settings.addSetting({
       id: 'Comfy.UseNewMenu',
+      category: ['Comfy', 'Menu', 'UseNewMenu'],
       defaultValue: 'Disabled',
-      name: '[Beta] Use new menu and workflow management. Note: On small screens the menu will always be at the top.',
+      name: '[Beta] Use new menu and workflow management.',
+      tooltip: 'On small screens the menu will always be at the top.',
       type: 'combo',
       options: ['Disabled', 'Top', 'Bottom'],
       onChange: async (v: MenuPosition) => {

src/scripts/widgets.ts

@@ -347,7 +347,10 @@ function isSlider(display, app) {
 export function initWidgets(app) {
   app.ui.settings.addSetting({
     id: 'Comfy.WidgetControlMode',
-    name: 'Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.',
+    category: ['Comfy', 'Node Widget', 'WidgetControlMode'],
+    name: 'Widget control mode',
+    tooltip:
+      'Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.',
     type: 'combo',
     defaultValue: 'after',
     options: ['before', 'after'],

src/stores/settingStore.ts

@@ -34,7 +34,7 @@ export const useSettingStore = defineStore('setting', {
     settingTree(): SettingTreeNode {
       const root = buildTree(
         Object.values(this.settings),
-        (setting: SettingParams) => setting.id.split('.')
+        (setting: SettingParams) => setting.category || setting.id.split('.')
       )
 
       const floatingSettings = root.children.filter((node) => node.leaf)
@@ -68,6 +68,7 @@ export const useSettingStore = defineStore('setting', {
 
       app.ui.settings.addSetting({
         id: 'Comfy.NodeSearchBoxImpl',
+        category: ['Comfy', 'Node Search Box', 'Implementation'],
         name: 'Node Search box implementation',
         type: 'combo',
         options: ['default', 'litegraph (legacy)'],
@@ -76,6 +77,7 @@ export const useSettingStore = defineStore('setting', {
 
       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',
@@ -85,6 +87,7 @@ export const useSettingStore = defineStore('setting', {
 
       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',
@@ -93,6 +96,7 @@ export const useSettingStore = defineStore('setting', {
 
       app.ui.settings.addSetting({
         id: 'Comfy.Sidebar.Location',
+        category: ['Comfy', 'Sidebar', 'Location'],
         name: 'Sidebar location',
         type: 'combo',
         options: ['left', 'right'],
@@ -101,6 +105,7 @@ export const useSettingStore = defineStore('setting', {
 
       app.ui.settings.addSetting({
         id: 'Comfy.Sidebar.Size',
+        category: ['Comfy', 'Sidebar', 'Size'],
         name: 'Sidebar size',
         type: 'combo',
         options: ['normal', 'small'],
@@ -109,6 +114,7 @@ export const useSettingStore = defineStore('setting', {
 
       app.ui.settings.addSetting({
         id: 'Comfy.TextareaWidget.FontSize',
+        category: ['Comfy', 'Node Widget', 'TextareaWidget', 'FontSize'],
         name: 'Textarea widget font size',
         type: 'slider',
         defaultValue: 10,
@@ -120,7 +126,7 @@ export const useSettingStore = defineStore('setting', {
 
       app.ui.settings.addSetting({
         id: 'Comfy.Workflow.SortNodeIdOnSave',
-        name: 'Sort node IDs on save',
+        name: 'Sort node IDs when saving workflow',
         type: 'boolean',
         defaultValue: false
       })

src/types/settingTypes.ts

@@ -38,4 +38,9 @@ export interface SettingParams {
   attrs?: any
   tooltip?: string
   options?: Array<string | SettingOption> | ((value: any) => SettingOption[])
+  // By default category is id.split('.'). However, changing id to assign
+  // new category has poor backward compatibility. Use this field to overwrite
+  // default category from id.
+  // Note: Like id, category value need to be unique.
+  category?: string[]
 }