From add2f9baa07a9e242082228ea1cfa067bf6209ab Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Sun, 18 Aug 2024 12:49:23 -0400 Subject: [PATCH] Group comfy core settings (#508) * Add category overwrite * Group settings --- src/extensions/core/colorPalette.ts | 1 + src/extensions/core/invertMenuScrolling.ts | 3 ++- src/extensions/core/linkRenderMode.ts | 1 + src/extensions/core/slotDefaults.ts | 2 ++ src/extensions/core/snapToGrid.ts | 3 ++- src/scripts/app.ts | 1 + src/scripts/domWidget.ts | 1 + src/scripts/ui.ts | 21 +++++++++++++++++---- src/scripts/ui/menu/index.ts | 4 +++- src/scripts/widgets.ts | 5 ++++- src/stores/settingStore.ts | 10 ++++++++-- src/types/settingTypes.ts | 5 +++++ 12 files changed, 47 insertions(+), 10 deletions(-) diff --git a/src/extensions/core/colorPalette.ts b/src/extensions/core/colorPalette.ts index 6eaf78f72..3a9781954 100644 --- a/src/extensions/core/colorPalette.ts +++ b/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 = [ diff --git a/src/extensions/core/invertMenuScrolling.ts b/src/extensions/core/invertMenuScrolling.ts index 1da21a00e..f3271caa0 100644 --- a/src/extensions/core/invertMenuScrolling.ts +++ b/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) { diff --git a/src/extensions/core/linkRenderMode.ts b/src/extensions/core/linkRenderMode.ts index dceaf1a5b..9c1fc2ff1 100644 --- a/src/extensions/core/linkRenderMode.ts +++ b/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', diff --git a/src/extensions/core/slotDefaults.ts b/src/extensions/core/slotDefaults.ts index 3c7faf4d1..29fc3fa64 100644 --- a/src/extensions/core/slotDefaults.ts +++ b/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, diff --git a/src/extensions/core/snapToGrid.ts b/src/extensions/core/snapToGrid.ts index b0d6c3599..217c5204f 100644 --- a/src/extensions/core/snapToGrid.ts +++ b/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, diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 6f9cef773..f1e79221b 100644 --- a/src/scripts/app.ts +++ b/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 diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts index a59306a7b..acb3a5962 100644 --- a/src/scripts/domWidget.ts +++ b/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, diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts index 629be0dfb..dfb3d6941 100644 --- a/src/scripts/ui.ts +++ b/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 diff --git a/src/scripts/ui/menu/index.ts b/src/scripts/ui/menu/index.ts index 5fd3fb216..5c113e9b8 100644 --- a/src/scripts/ui/menu/index.ts +++ b/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) => { diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts index f14adad23..548e393b6 100644 --- a/src/scripts/widgets.ts +++ b/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'], diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts index 869c8ed8e..d0c4b1647 100644 --- a/src/stores/settingStore.ts +++ b/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 }) diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts index 7f40c7211..45e829d0a 100644 --- a/src/types/settingTypes.ts +++ b/src/types/settingTypes.ts @@ -38,4 +38,9 @@ export interface SettingParams { attrs?: any tooltip?: string options?: Array | ((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[] }