From bbcd3637bdf2eb6e4050f7dc4f46707f7e1d5e25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20=20Sk=C3=B6ld?= Date: Tue, 18 Mar 2025 17:04:29 +0100 Subject: [PATCH] Update settings --- README.md | 34 +++++++--- web/js/settings.js | 6 ++ web/js/settings/ComfyHelper.js | 112 +++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 4e933a5..e668b82 100644 --- a/README.md +++ b/README.md @@ -25,16 +25,30 @@ To favorite the currently selected combo value, right click the node and click ` ## Settings -| Setting Name | Type | Description | -| ------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------- | -| Textbox Colors | Multiline text | List of RGB or HEX colors (one per line) used for syntax highlighting | -| Textbox Highlight Type | Combo (Strength/Nesting) | Controls highlighting behavior - Strength by the weight and Nesting by the nesting of the parentheses | -| Favorite On Top | Boolean | When enabled, places favorite items at the top of lists | -| Combo Highlight Color | Color picker | Sets the highlight color for combo box items | -| Preview Image Hover Delay | Slider (0-1000ms) | Delay before showing preview images on hover | -| Preview Image Padding | Slider (0-100px) | Padding around preview images | -| Preview Image Side | Combo (Left/Right) | Which side preview images appear on | -| Preview Image Size | Slider (100-1000px) | Size of preview images | +### Textbox + +| Setting Name | Type | Description | +| ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------- | +| Textbox Colors | Multiline text | A list of either rgb or hex colors, one color per line. | +| Textbox Highlight Type | Combo (Strength/Nesting) | If strength, only the first and last colors will be used. If nesting, all colors will be used. | +| Tag Tooltips | Boolean | When hovering over a tag in a textbox, show the tag's tooltip. | + +### Combo + +| Setting Name | Type | Description | +| --------------------- | ------------ | ---------------------------------------- | +| Favorite On Top | Boolean | Put favorite items over all other items. | +| Combo Highlight Color | Color picker | | + +### Preview Image + +| Setting Name | Type | Description | +| ------------------------- | ------------------ | ------------------------------------ | +| Preview Image Hover Delay | Slider (0-1000) | | +| Preview Image Padding | Slider (0-100) | | +| Preview Image Side | Combo (Left/Right) | | +| Preview Image Size | Slider (100-1000) | | +| Index Images | Button | Update images available for preview. | ## Examples diff --git a/web/js/settings.js b/web/js/settings.js index 283996d..9baac50 100644 --- a/web/js/settings.js +++ b/web/js/settings.js @@ -93,3 +93,9 @@ const settingsDefinitions = [ }, ]; settingsHelper.addSettings(settingsDefinitions); + +if (localStorage.getItem("SyntaxHighlighting.dev") === "true") { + const markdownTable = + settingsHelper.generateSettingsMarkdownTable(settingsDefinitions); + console.log(markdownTable); +} diff --git a/web/js/settings/ComfyHelper.js b/web/js/settings/ComfyHelper.js index f2c221e..4e59161 100644 --- a/web/js/settings/ComfyHelper.js +++ b/web/js/settings/ComfyHelper.js @@ -662,6 +662,118 @@ export class SettingsHelper { ); } } + + /** + * Generates a markdown table of settings organized by categories from a settings definitions array. + * @param {Array} settingsDefinitions - An array of setting definition objects + * @returns {string} A markdown formatted table of settings. + * @example + * const markdownTable = settingsHelper.generateSettingsMarkdownTable(settingsDefinitions); + * console.log(markdownTable); + */ + generateSettingsMarkdownTable(settingsDefinitions) { + if ( + !Array.isArray(settingsDefinitions) || + settingsDefinitions.length === 0 + ) { + return "No settings definitions provided."; + } + + // Group settings by category + const settingsByCategory = {}; + + for (const setting of settingsDefinitions) { + // Skip settings without a name + if (!setting.name) continue; + + // Get the main category (first item in the category array) or use "Uncategorized" + const category = + setting.category && setting.category.length > 0 + ? setting.category[1] + : "Uncategorized"; + + // Initialize category if it doesn't exist + if (!settingsByCategory[category]) { + settingsByCategory[category] = []; + } + + // Determine the type string based on the setting type + let typeStr = "Unknown"; + if (typeof setting.type === "function") { + // Try to infer type from the function name or structure + const typeObj = setting.type(); + if (typeObj.type === "boolean") typeStr = "Boolean"; + else if (typeObj.type === "number") typeStr = "Number"; + else if (typeObj.type === "text") typeStr = "Text"; + else if (typeObj.type === "slider" && typeObj.attrs) + typeStr = `Slider (${typeObj.attrs.min}-${typeObj.attrs.max})`; + else if (typeObj.type === "combo" && typeObj.options) + typeStr = `Combo (${typeObj.options + .map((o) => o.text || o) + .join("/")})`; + else if (typeObj.type === CustomSettingTypes.multilineSetting) + typeStr = "Multiline text"; + else if (typeObj.type === CustomSettingTypes.colorPickerSetting) + typeStr = "Color picker"; + else if (typeObj.type === CustomSettingTypes.buttonSetting) + typeStr = "Button"; + else typeStr = String(typeObj.type); + } else if ( + typeof setting.type === "object" && + setting.type !== null + ) { + // Direct type object + if (setting.type.type === "boolean") typeStr = "Boolean"; + else if (setting.type.type === "number") typeStr = "Number"; + else if (setting.type.type === "text") typeStr = "Text"; + else if (setting.type.type === "slider" && setting.type.attrs) + typeStr = `Slider (${setting.type.attrs.min}-${setting.type.attrs.max})`; + else if (setting.type.type === "combo" && setting.type.options) + typeStr = `Combo (${setting.type.options + .map((o) => o.text || o) + .join("/")})`; + else if ( + setting.type.type === CustomSettingTypes.multilineSetting + ) + typeStr = "Multiline text"; + else if ( + setting.type.type === CustomSettingTypes.colorPickerSetting + ) + typeStr = "Color picker"; + else if (setting.type.type === CustomSettingTypes.buttonSetting) + typeStr = "Button"; + else typeStr = String(setting.type.type); + } else if (typeof setting.type === "string") { + typeStr = setting.type; + } + + // Get description from tooltip if available + const description = setting.tooltip || ""; + + settingsByCategory[category].push({ + name: setting.name, + type: typeStr, + description, + }); + } + + // Generate markdown table + let markdown = ""; + + for (const [category, settings] of Object.entries(settingsByCategory)) { + markdown += `### ${category}\n\n`; + markdown += "| Setting Name | Type | Description |\n"; + markdown += "| ------------ | ---- | ----------- |\n"; + + for (const setting of settings) { + markdown += `| ${setting.name} | ${setting.type} | ${setting.description} |\n`; + } + + markdown += "\n"; + } + + return markdown; + } } export class UiHelper {