regex entries cleaned

2025-03-08 15:08:16 -05:00
parent 6de48fe6ab
commit daf5a898ee
2 changed files with 184 additions and 184 deletions
@@ -14,7 +14,6 @@
 ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚═╝  ╚═╝

 Colorize ComfyUI nodes with defaults per node, node category or via regex filtering
-                 http://www.github.com/amorano/Jovi_Colorizer
 """

 __author__ = "Alexander G. Morano"
@@ -1,11 +1,18 @@
-/**
- * File: core_color.js
- */
+/**/

 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
 import { $el } from "../../scripts/ui.js";

+const TITLES = [
+    "COLOR CONFIGURATION", "COLOR CALIBRATION", "COLOR CUSTOMIZATION",
+    "CHROMA CALIBRATION", "CHROMA CONFIGURATION", "CHROMA CUSTOMIZATION",
+    "CHROMATIC CALIBRATION", "CHROMATIC CONFIGURATION", "CHROMATIC CUSTOMIZATION",
+    "HUE HOMESTEAD", "PALETTE PREFERENCES", "PALETTE PERSONALIZATION",
+    "PALETTE PICKER", "PIGMENT PREFERENCES", "PIGMENT PERSONALIZATION",
+    "PIGMENT PICKER", "SPECTRUM STYLING", "TINT TAILORING", "TINT TWEAKING"
+];
+
 const DEFAULT_THEME = {
    "JOV_CAPTURE 📸": { title: "#661f66" },
    "JOV_GL 🌈": { title: "#1f661f" },
@@ -58,8 +65,12 @@ function getColor(node) {
    const CONFIG_REGEX = app.extensionManager.setting.get(SETTING_REGEX);
    if (Array.isArray(CONFIG_REGEX)) {
        for (const { regex, ...colors } of CONFIG_REGEX) {
-            if (regex && node.type.match(new RegExp(regex, "i"))) {
-                return colors;
+            try {
+                if (regex && node.type.match(new RegExp(regex, "i"))) {
+                    return colors;
+                }
+            } catch (error) {
+                // console.warn("Invalid regular expression:", regex, error);
            }
        }
    }
@@ -81,71 +92,6 @@ function getColor(node) {
    return newColor;
 }

-const origDrawNode = LGraphCanvas.prototype.drawNode;
-LGraphCanvas.prototype.drawNode = function (node, ctx) {
-    // STASH THE CURRENT COLOR STATE
-    const origTitle = node.constructor.title_text_color;
-    const origSelectedTitleColor = LiteGraph.NODE_SELECTED_TITLE_COLOR;
-    const origNodeTextColor = LiteGraph.NODE_TEXT_COLOR;
-    const origWidgetSecondaryTextColor = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR;
-    const origWidgetTextColor = LiteGraph.WIDGET_TEXT_COLOR;
-    const origNodeTitleColor = LiteGraph.NODE_TITLE_COLOR;
-    const origWidgetBGColor = LiteGraph.WIDGET_BGCOLOR;
-
-    const new_color = getColor(node);
-
-    if (new_color) {
-        // Title text when node is selected
-        //LiteGraph.NODE_SELECTED_TITLE_COLOR = '#FF00FF'
-
-        if (new_color?.text) {
-            node.constructor.title_text_color = new_color.text;
-        } else {
-            const color = node.constructor.title_text_color;
-            if (color) {
-                node.constructor.title_text_color = colorContrast(color);
-            }
-        }
-
-        // Slot label text
-        //LiteGraph.NODE_TEXT_COLOR = '#7777FF'
-
-        // Widget Text
-        //LiteGraph.WIDGET_SECONDARY_TEXT_COLOR = "#FFFFFF"
-
-        // Widget controls + field text
-        //LiteGraph.WIDGET_TEXT_COLOR = '#FF0000';
-
-        // Widget control BG color
-        // LiteGraph.WIDGET_BGCOLOR
-
-        // node's title bar background color
-        if (new_color?.title) {
-            node.color = new_color.title;
-        }
-
-        // node's body background color
-        if (new_color?.body) {
-            node.bgcolor = new_color.body;
-        }
-    }
-
-    const res = origDrawNode.apply(this, arguments);
-
-    // Default back to last pushed state ComfyUI colors
-    if (new_color) {
-        node.constructor.title_text_color = origTitle;
-        LiteGraph.NODE_SELECTED_TITLE_COLOR = origSelectedTitleColor;
-        LiteGraph.NODE_TEXT_COLOR = origNodeTextColor;
-        LiteGraph.WIDGET_SECONDARY_TEXT_COLOR = origWidgetSecondaryTextColor;
-        LiteGraph.WIDGET_TEXT_COLOR = origWidgetTextColor;
-        LiteGraph.NODE_TITLE_COLOR = origNodeTitleColor;
-        LiteGraph.WIDGET_BGCOLOR = origWidgetBGColor;
-    }
-
-    return res;
-}
-
 function applyTheme(theme) {
    const majorElements = document.querySelectorAll('.jov-panel-color-cat_major');
    const minorElements = document.querySelectorAll('.jov-panel-color-cat_minor');
@@ -220,16 +166,29 @@ class JovimetrixPanelColorize {
        return siblings;
    }

-    createColorButton(type, name, color, idx) {
+    createRegexEntry(data) {
+        const field = $el("input", { value: data.name });
+        field.addEventListener("input", (event) => {
+            console.log("Input changed:", event.target.value);
+            // React to changes, e.g., validate regex, update UI, etc.
+            const CONFIG_REGEX = app.extensionManager.setting.get(SETTING_REGEX);
+            CONFIG_REGEX[data.idx]["regex"] = event.target.value;
+            app.extensionManager.setting.set(SETTING_REGEX, CONFIG_REGEX);
+            app.canvas.setDirty(true);
+        });
+        return field;
+    }
+
+    createColorButton(type, color, data) {
        const label = type == "title" ? "T" : type == "body" ? "B" : "X";
        const button = $el('button.color-button', {
            style: { backgroundColor: color },
            dataset: {
                type: type,
-                name: name,
+                name: data.name,
                color: color,
                colorOld: color,
-                idx: idx
+                idx: data.idx
            },
            value: label,
            content: label,
@@ -245,7 +204,6 @@ class JovimetrixPanelColorize {
            this.buttonCurrent = event.target;
            this.showPicker(event.target);
        });
-
        return button;
    }

@@ -436,15 +394,12 @@ class JovimetrixPanelColorize {
        }

        const element = $el("tr", { className: rowClass, style }, [
-            $el("td", {}, [this.createColorButton("title", data.name, titleColor, data.idx)]),
-            $el("td", {}, [this.createColorButton("body", data.name, bodyColor, data.idx)]),
-            $el("td", {}, [this.createColorButton("text", data.name, textColor, data.idx)]),
-            (type === "regex") ? $el("td", [
-                $el("input", {
-                    value: data.name
-                })
-            ])
-            : $el("td", { textContent: data.name })
+            $el("td", {}, [this.createColorButton("title", titleColor, data)]),
+            $el("td", {}, [this.createColorButton("body", bodyColor, data)]),
+            $el("td", {}, [this.createColorButton("text", textColor, data)]),
+            (type === "regex") ?
+                $el("td", {}, [this.createRegexEntry(data)]) :
+                $el("td", { textContent: data.name })
        ]);

        return element;
@@ -462,9 +417,9 @@ class JovimetrixPanelColorize {
            const data = {
                idx: idx,
                name: entry.regex,
-                title: entry.title || LiteGraph.NODE_TITLE_COLOR,
-                body: entry.body || LiteGraph.WIDGET_BGCOLOR,
-                text: entry.body || LiteGraph.NODE_TEXT_COLOR
+                title: entry.title,
+                body: entry.body,
+                text: entry.body
            };
            this.tbody.appendChild(this.templateColorRow(data, "regex"));
        });
@@ -518,14 +473,6 @@ class JovimetrixPanelColorize {
    }

    getRandomTitle() {
-        const TITLES = [
-            "COLOR CONFIGURATION", "COLOR CALIBRATION", "COLOR CUSTOMIZATION",
-            "CHROMA CALIBRATION", "CHROMA CONFIGURATION", "CHROMA CUSTOMIZATION",
-            "CHROMATIC CALIBRATION", "CHROMATIC CONFIGURATION", "CHROMATIC CUSTOMIZATION",
-            "HUE HOMESTEAD", "PALETTE PREFERENCES", "PALETTE PERSONALIZATION",
-            "PALETTE PICKER", "PIGMENT PREFERENCES", "PIGMENT PERSONALIZATION",
-            "PIGMENT PICKER", "SPECTRUM STYLING", "TINT TAILORING", "TINT TWEAKING"
-        ];
        return TITLES[Math.floor(Math.random() * TITLES.length)];
    }

@@ -558,95 +505,149 @@ class JovimetrixPanelColorize {
    }
 }

-app.extensionManager.registerSidebarTab({
-    id: "jovimetrix.sidebar.colorizer",
-    icon: "pi pi-palette",
-    title: "JOVIMETRIX COLORIZER 🔺🟩🔵",
-    tooltip: "Color node title and body via unique name, group and regex filtering\nJOVIMETRIX 🔺🟩🔵",
-    type: "custom",
-    render: async (el) => {
-        el.innerHTML = "";
-        if (!PANEL_COLORIZE) {
-            PANEL_COLORIZE = new JovimetrixPanelColorize();
-        }
-        const content = PANEL_COLORIZE.createContent();
-        el.appendChild(content);
-    }
-});
-
-app.registerExtension({
-    name: "jovimetrix.color",
-    settings: [
-        {
-            id: SETTING_REGEX,
-            name: "Regex Entries for Jovimetrix Colorizer",
-            type: "hidden",
-            defaultValue: {}
-        },
-        {
-            id: SETTING_THEME,
-            name: "Node theme entries for Jovimetrix Colorizer",
-            type: "hidden",
-            defaultValue: {}
-        },
-    ],
-    async init() {
-        document.head.appendChild(Object.assign(document.createElement('script'), {
-            src: "https://cdn.jsdelivr.net/npm/@jaames/iro@5"
-        }));
-
-        const styleTagId = 'jovimetrix-stylesheet';
-        let styleTag = document.getElementById(styleTagId);
-        if (styleTag) {
-            return;
-        }
-
-        document.head.appendChild(Object.assign(document.createElement('link'), {
-            id: styleTagId,
-            rel: 'stylesheet',
-            type: 'text/css',
-            href: 'extensions/jovi_colorizer/jovi_colorizer.css'
-        }));
-    },
-    async setup() {
-
-        var response = await api.fetchApi("/object_info", { cache: "no-store" });
-        const all_nodes = await response.json();
-
-        NODE_LIST = Object.entries(all_nodes).sort((a, b) => {
-            const categoryA = a[1].category.toLowerCase();
-            const categoryB = b[1].category.toLowerCase();
-
-            // First, sort by category
-            if (categoryA < categoryB) return -1;
-            if (categoryA > categoryB) return 1;
-
-            // If categories are equal, sort by key name
-            return a[0].toLowerCase().localeCompare(b[0].toLowerCase());
-        });
-        NODE_LIST = Object.fromEntries(NODE_LIST);
-
-        let CONFIG_REGEX = app.extensionManager.setting.get(SETTING_REGEX) || [];
-        if (!Array.isArray(CONFIG_REGEX)) {
-            CONFIG_REGEX = [];
-        }
-        while (CONFIG_REGEX.length < 5) {
-            CONFIG_REGEX.push({ "regex": "" });
-        }
-        await app.extensionManager.setting.set(SETTING_REGEX, CONFIG_REGEX);
-
-        let CONFIG_THEME = app.extensionManager.setting.get(SETTING_THEME) || {};
-        Object.keys(DEFAULT_THEME).forEach(key => {
-            if (!(key in CONFIG_THEME)) {
-                CONFIG_THEME[key] = DEFAULT_THEME[key];
+const _SIDEBAR_ID = "jovimetrix.sidebar.colorizer";
+if (!app.extensionManager.getSidebarTabs().some(tab => tab.id == _SIDEBAR_ID)) {
+    app.extensionManager.registerSidebarTab({
+        id: _SIDEBAR_ID,
+        icon: "pi pi-palette",
+        title: "JOVIMETRIX COLORIZER 🔺🟩🔵",
+        tooltip: "Color node title and body via unique name, group and regex filtering\nJOVIMETRIX 🔺🟩🔵",
+        type: "custom",
+        render: async (el) => {
+            el.innerHTML = "";
+            if (typeof PANEL_COLORIZE === "undefined" || !PANEL_COLORIZE) {
+                PANEL_COLORIZE = new JovimetrixPanelColorize();
            }
-        });
-
-        try {
-            await app.extensionManager.setting.set(SETTING_THEME, CONFIG_THEME);
-            console.info("wrote new Jovi_Colorizer defaults")
-        } catch (error) {
-            console.error("Failed to update settings:", error);
+            el.appendChild(PANEL_COLORIZE.createContent());
        }
+    });
+
+    app.registerExtension({
+        name: "jovimetrix.color",
+        settings: [
+            {
+                id: SETTING_REGEX,
+                name: "Regex Entries for Jovimetrix Colorizer",
+                type: "hidden",
+                defaultValue: {}
+            },
+            {
+                id: SETTING_THEME,
+                name: "Node theme entries for Jovimetrix Colorizer",
+                type: "hidden",
+                defaultValue: {}
+            },
+        ],
+        async init() {
+            document.head.appendChild(Object.assign(document.createElement('script'), {
+                src: "https://cdn.jsdelivr.net/npm/@jaames/iro@5"
+            }));
+        },
+        async setup() {
+
+            var response = await api.fetchApi("/object_info", { cache: "no-store" });
+            const all_nodes = await response.json();
+
+            NODE_LIST = Object.entries(all_nodes).sort((a, b) => {
+                const categoryA = a[1].category.toLowerCase();
+                const categoryB = b[1].category.toLowerCase();
+
+                // First, sort by category
+                if (categoryA < categoryB) return -1;
+                if (categoryA > categoryB) return 1;
+
+                // If categories are equal, sort by key name
+                return a[0].toLowerCase().localeCompare(b[0].toLowerCase());
+            });
+            NODE_LIST = Object.fromEntries(NODE_LIST);
+
+            let CONFIG_REGEX = app.extensionManager.setting.get(SETTING_REGEX) || [];
+            if (!Array.isArray(CONFIG_REGEX)) {
+                CONFIG_REGEX = [];
+            }
+            while (CONFIG_REGEX.length < 5) {
+                CONFIG_REGEX.push({ "regex": "" });
+            }
+            await app.extensionManager.setting.set(SETTING_REGEX, CONFIG_REGEX);
+
+            let CONFIG_THEME = app.extensionManager.setting.get(SETTING_THEME) || {};
+            Object.keys(DEFAULT_THEME).forEach(key => {
+                if (!(key in CONFIG_THEME)) {
+                    CONFIG_THEME[key] = DEFAULT_THEME[key];
+                }
+            });
+
+            try {
+                await app.extensionManager.setting.set(SETTING_THEME, CONFIG_THEME);
+            } catch (error) {
+                console.error("Failed to update settings:", error);
+            }
+        }
+    });
+
+    const origDrawNode = LGraphCanvas.prototype.drawNode;
+    LGraphCanvas.prototype.drawNode = function (node, ctx) {
+        // STASH THE CURRENT COLOR STATE
+        const origTitle = node.constructor.title_text_color;
+        const origSelectedTitleColor = LiteGraph.NODE_SELECTED_TITLE_COLOR;
+        const origNodeTextColor = LiteGraph.NODE_TEXT_COLOR;
+        const origWidgetSecondaryTextColor = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR;
+        const origWidgetTextColor = LiteGraph.WIDGET_TEXT_COLOR;
+        const origNodeTitleColor = LiteGraph.NODE_TITLE_COLOR;
+        const origWidgetBGColor = LiteGraph.WIDGET_BGCOLOR;
+
+        const new_color = getColor(node);
+
+        if (new_color) {
+            // Title text when node is selected
+            //LiteGraph.NODE_SELECTED_TITLE_COLOR = '#FF00FF'
+
+            if (new_color?.text) {
+                node.constructor.title_text_color = new_color.text;
+            } else {
+                const color = node.constructor.title_text_color;
+                if (color) {
+                    node.constructor.title_text_color = colorContrast(color);
+                }
+            }
+
+            // Slot label text
+            //LiteGraph.NODE_TEXT_COLOR = '#7777FF'
+
+            // Widget Text
+            //LiteGraph.WIDGET_SECONDARY_TEXT_COLOR = "#FFFFFF"
+
+            // Widget controls + field text
+            //LiteGraph.WIDGET_TEXT_COLOR = '#FF0000';
+
+            // Widget control BG color
+            // LiteGraph.WIDGET_BGCOLOR
+
+            // node's title bar background color
+            if (new_color?.title) {
+                node.color = new_color.title;
+            }
+
+            // node's body background color
+            if (new_color?.body) {
+                node.bgcolor = new_color.body;
+            }
+        }
+
+        const res = origDrawNode.apply(this, arguments);
+
+        // Default back to last pushed state ComfyUI colors
+        if (new_color) {
+            node.constructor.title_text_color = origTitle;
+            LiteGraph.NODE_SELECTED_TITLE_COLOR = origSelectedTitleColor;
+            LiteGraph.NODE_TEXT_COLOR = origNodeTextColor;
+            LiteGraph.WIDGET_SECONDARY_TEXT_COLOR = origWidgetSecondaryTextColor;
+            LiteGraph.WIDGET_TEXT_COLOR = origWidgetTextColor;
+            LiteGraph.NODE_TITLE_COLOR = origNodeTitleColor;
+            LiteGraph.WIDGET_BGCOLOR = origWidgetBGColor;
+        }
+
+        return res;
    }
-});
+    console.info("registered jovi colorizer");
+}