Update for 1.18

Frontend1.16

Author: chrisgoringe

README.md

@@ -8,7 +8,38 @@ Problems? Jump down to [logging and debugging](https://github.com/chrisgoringe/c
 
 Ideas for how to improve the nodes (or bug reports) - [raise an issue](https://github.com/chrisgoringe/cg-use-everywhere/issues)
 
-Shameless plug for my other nodes -> Check out [Image Picker](https://github.com/chrisgoringe/cg-image-picker) for another way to make some workflows smoother. And leave a star if you like something!
+Shameless plug for my other nodes -> Check out [Image Picker](https://github.com/chrisgoringe/cg-image-filter) for another way to make some workflows smoother. And leave a star if you like something!
+
+---
+
+## Update for ComfyUI front end 1.16
+
+ComfyUI front end 1.16 made a major change to the way that inputs and widgets work, which had a significant impact on the UE nodes.
+
+A widget is no longer converted to an input in order to connect to it; instead, you just connect an output to it, and it converts.
+
+This is quite cool - except that it meant that there was no way for UE to tell if a widget was supposed to be an empty input for UE to feed.
+
+So there is a new mechanism for this. Here's a picture of a node that I have right-clicked:
+
+![116](docs/116.png)
+
+Things to notice:
+
+- There is a new menu `UE Connectable Widgets` which lists all the widgets. Those marked as connectable have a green bar to the left of the name.
+  - Select a widget to toggle its value
+- Next to the widget, where an input would be, the connectable widgets have a graphical indication of their state.
+  - The smaller dark circle (next to steps) indicate a connectable node which is not connected (widget value will be used)
+  - The light circle (next to cfg) and greying out the widget indicates that a UE node will provide the value
+  - No icon (all the other widgets) indicates that they are not UE connectable
+- Other inputs still have the indications of normal connection or UE connection (here model is a UE connection)
+
+You'll probably find that turning the `showlinks` option on helps, and the `highlight` option is required for those widget indicators which help a lot.
+
+![options116](docs/options116.png)
+
+Hopefully old workflows will be automatically converted when you load them. Hopefully.
+
 
 ---
 
@@ -36,6 +67,9 @@ UE nodes mostly work with group nodes. But there are a couple of important thing
 
 ## Latest updates
 
+6.0 (April 2025)
+- Very major rebuild to deal with latest version of Comfy
+
 5.0 (6th August 2024)
 - Significant change to core logic. Should greatly reduce incompatibility issues, but may have unexpoected consequences!
 - Added to right-click menu on nodes the option to make a node reject all UE connections.

__init__.py

@@ -1,6 +1,6 @@
 from .use_everywhere import SeedEverywhere, AnythingEverywherePrompts
 
-UE_VERSION = "5.0.10"
+UE_VERSION = "6.0.0"
 
 NODE_CLASS_MAPPINGS = { "Seed Everywhere": SeedEverywhere }
 

docs/116.png

@@ -1,14 +1,13 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 
-import { is_UEnode, is_helper, inject, Logger, get_real_node, defineProperty } from "./use_everywhere_utilities.js";
-import { displayMessage, update_input_label, indicate_restriction, UpdateBlocker } from "./use_everywhere_ui.js";
+import { is_UEnode, is_helper, inject, Logger, get_real_node, defineProperty, graphConverter } from "./use_everywhere_utilities.js";
+import { displayMessage, update_input_label, indicate_restriction } from "./use_everywhere_ui.js";
 import { LinkRenderController } from "./use_everywhere_ui.js";
-import { autoCreateMenu } from "./use_everywhere_autocreate.js";
-import { add_autoprompts } from "./use_everywhere_autoprompt.js";
 import { GraphAnalyser } from "./use_everywhere_graph_analysis.js";
-import { main_menu_settings, node_menu_settings, canvas_menu_settings, non_ue_menu_settings } from "./use_everywhere_settings.js";
+import { node_menu_settings, canvas_menu_settings, non_ue_menu_settings, SETTINGS } from "./use_everywhere_settings.js";
 import { add_debug } from "./ue_debug.js";
+import { settingsCache } from "./use_everywhere_cache.js";
 
 /*
 The ui component that looks after the link rendering
@@ -33,6 +32,7 @@ function inject_outdating_into_object_method(object, methodname, tracetext) {
 
 app.registerExtension({
 	name: "cg.customnodes.use_everywhere",
+    settings: SETTINGS, 
 
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
         /*
@@ -72,6 +72,8 @@ app.registerExtension({
             inject_outdating_into_objects(options,'callback',`menu option on ${this.id}`);
         }
 
+
+
         /*
         When a UE node is created, we set the group and color restriction properties.
         We also create pseudo-widgets for all the inputs so that they can be searched
@@ -113,12 +115,13 @@ app.registerExtension({
         const acm = node.afterChangeMade
         node.afterChangeMade = (p, v) => {
             acm?.(p,v)
-            if (p==='bgcolor') {
-                if (node.mode!=4) linkRenderController.mark_link_list_outdated();
-            }
+            //if (p==='bgcolor') {
+            //    if (node._being_drawn) return; // the bgcolor gets set by the built in node draw...
+            //    linkRenderController.mark_link_list_outdated();
+            //}
             if (p==='mode') {
                 linkRenderController.mark_link_list_outdated();
-                node.widgets?.forEach((widget) => {widget.onModeChange?.(v)});
+                node.widgets?.forEach((widget) => {widget.onModeChange?.(v)}); // no idea why I have this?
             }
         }
 
@@ -138,6 +141,7 @@ app.registerExtension({
             }
         }
 
+
         if (is_helper(node)) { // editing a helper node makes the list dirty
             inject_outdating_into_objects(node.widgets,'callback',`widget callback on ${this.id}`);
         }
@@ -149,21 +153,12 @@ app.registerExtension({
         setTimeout( ()=>{linkRenderController.mark_link_list_outdated()}, 100 );
     }, 
 
-    // When a graph node is loaded collapsed the UI need to know
-    // probably not needed now autocomplete is gone?
-    loadedGraphNode(node) { if (node.flags.collapsed && node.loaded_when_collapsed) node.loaded_when_collapsed(); },
+    // When a graph node is loaded convert it if needed
+    loadedGraphNode(node) { 
+        if (graphConverter.running_116_plus()) { graphConverter.convert_if_pre_116(node); }
+    },
 
 	async setup() {
-        /*
-        Add css for the autocomplete. Probably not needed now
-        */
-        const head = document.getElementsByTagName('HEAD')[0];
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.type = 'text/css';
-        link.href = 'extensions/cg-use-everywhere/ue.css';
-        head.appendChild(link);
-
         /*
         Listen for message-handler event from python code
         */
@@ -180,34 +175,56 @@ app.registerExtension({
             if (linkRenderController) linkRenderController.note_queue_size(detail ? detail.exec_info.queue_remaining : 0)
         });
 
-        /*
-        Don't modify the graph when saving the workflow or api
-        */
-        const _original_save_onclick = document.getElementById('comfy-save-button').onclick;
-        document.getElementById('comfy-save-button').onclick = function() {
-            graphAnalyser.pause();
-            _original_save_onclick();
-            graphAnalyser.unpause()
-        }
-        const _original_save_api_onclick = document.getElementById('comfy-dev-save-api-button').onclick;
-        document.getElementById('comfy-dev-save-api-button').onclick = function() {
-            graphAnalyser.pause();
-            // should check for UE links here and give a warning: #217
-            _original_save_api_onclick();
-            graphAnalyser.unpause();
+        /* if we are on version 1.16 or later, stash input data to convert nodes when they are loaded */
+        if (graphConverter.running_116_plus()) {
+            const original_loadGraphData = app.loadGraphData;
+            app.loadGraphData = function (data) {
+                try {
+                    graphConverter.store_node_input_map(data);
+                } catch (e) { Logger.log_error(Logger.ERROR, `in loadGraphData ${e}`); }
+                const cvw_was = settingsCache.getSettingValue("Comfy.Validation.Workflows")
+                if (settingsCache.getSettingValue("AE.block_graph_validation")) {
+                    app.ui.settings.setSettingValue("Comfy.Validation.Workflows", false);
+                }
+                original_loadGraphData.apply(this, arguments);
+                app.ui.settings.setSettingValue("Comfy.Validation.Workflows", cvw_was);
+            }
         }
 
         /* 
         When we draw a node, render the virtual connection points
         */
         const original_drawNode = LGraphCanvas.prototype.drawNode;
         LGraphCanvas.prototype.drawNode = function(node, ctx) {
-            UpdateBlocker.push()
+            
             try {
+                linkRenderController.pause('drawNode')
                 const v = original_drawNode.apply(this, arguments);
                 linkRenderController.highlight_ue_connections(node, ctx);
+                if (node._last_seen_bg !== node.bgcolor) linkRenderController.mark_link_list_outdated();
+                node._last_seen_bg = node.bgcolor
                 return v
-            } finally { UpdateBlocker.pop() }
+            } catch (e) {
+                Logger.log_error(Logger.ERROR, e)
+            } finally {          
+                linkRenderController.unpause()
+            }
+        }
+
+        const original_drawFrontCanvas = LGraphCanvas.prototype.drawFrontCanvas
+        LGraphCanvas.prototype.drawFrontCanvas = function() {
+            try {
+                linkRenderController.disable_all_connected_widgets(true)
+                return original_drawFrontCanvas.apply(this, arguments);
+            }  catch (e) {
+                Logger.log_error(Logger.ERROR, e)
+            } finally {
+                try {
+                    linkRenderController.disable_all_connected_widgets(false)
+                } catch (e) {
+                    Logger.log_error(Logger.ERROR, e)
+                } 
+            }
         }
 
         /*
@@ -216,13 +233,18 @@ app.registerExtension({
         const drawConnections = LGraphCanvas.prototype.drawConnections;
         LGraphCanvas.prototype.drawConnections = function(ctx) {
             drawConnections?.apply(this, arguments);
-            linkRenderController.render_all_ue_links(ctx);
+            try {
+                linkRenderController.render_all_ue_links(ctx);
+            } catch (e) {
+                Logger.log_error(Logger.ERROR, e)
+            }
         }
 
         /*
-        Add to the main settings
+        Add to the main settings 
+        now specified as a parameter of register
         */
-        main_menu_settings();
+        //main_menu_settings();
 
         /* 
         Canvas menu is the right click on backdrop.
@@ -240,57 +262,65 @@ app.registerExtension({
             return options;
         }
 
-        /*
-        When you drag from a node, showConnectionMenu is called. If shift key is pressed call ours
-        Broken #219
+                        /*
+        Finding a widget by it's name is something done a lot of times in rendering, 
+        so add a method that caches the names that can be used deep in the rendering code.
+
+        TODO: Ought to delete this._widgetNameMap when widgets are added or removed.
         */
-        const showSearchBox = LGraphCanvas.prototype.showSearchBox;
-        LGraphCanvas.prototype.showSearchBox = function (optPass) {
-            if (optPass.shiftKey) {
-                autoCreateMenu.apply(this, arguments);
-            } else {
-                this.use_original_menu = true;
-                showSearchBox.apply(this, arguments);
-                this.use_original_menu = false;
+        LGraphNode.prototype._getWidgetByName = function(nm) {
+            if (this._widgetNameMap === undefined) {
+                this._widgetNameMap = {}
+                this.widgets?.forEach((w)=>{this._widgetNameMap[w.name] = w})
             }
+            return this._widgetNameMap[nm]
         }
 
-        /*
-        To allow us to use the shift drag above, we need to intercept 'allow_searchbox' sometimes
-        (because searchbox is the default behaviour when shift dragging)
-        Broken #219
-        */
-        var original_allow_searchbox = app.canvas.allow_searchbox;
-        defineProperty(app.canvas, 'allow_searchbox', {
-            get : function() { 
-                if (this.use_original_menu) { return original_allow_searchbox; }
-                if(app.ui.settings.getSettingValue('AE.replacesearch') && this.connecting_output) {
-                    return false;
-                } else { return original_allow_searchbox; }
-            },
-            set : function(v) { original_allow_searchbox = v; }
-        });
-        
 
 	},
 
     init() {
         graphAnalyser = GraphAnalyser.instance();
+        linkRenderController = LinkRenderController.instance(graphAnalyser);
+
+        var prompt_being_queued = false;
+
+        const original_graphToPrompt = app.graphToPrompt;
         app.graphToPrompt = async function () {
-            return graphAnalyser.analyse_graph(true, true, false);
+            if (prompt_being_queued) {
+                return await graphAnalyser.graph_to_prompt( graphAnalyser.analyse_graph(true, true) );
+            } else {
+                return await original_graphToPrompt.apply(app, arguments);
+            }
         }
-        
-        linkRenderController = LinkRenderController.instance(graphAnalyser);
 
-        add_autoprompts();
+        const original_queuePrompt = app.queuePrompt;
+        app.queuePrompt = async function () {
+            prompt_being_queued = true;
+            try {
+                return await original_queuePrompt.apply(app, arguments);
+            } finally {
+                prompt_being_queued = false;
+            }
+        }
+        
+        app.canvas.__node_over = app.canvas.node_over;
+        defineProperty(app.canvas, 'node_over', {
+            get: ( )=>{return app.canvas.__node_over },
+            set: (v)=>{app.canvas.__node_over = v; linkRenderController.node_over_changed(v)}   
+        } )
 
         if (false) add_debug();
 
-        const version = __COMFYUI_FRONTEND_VERSION__.split('.')
-        if (parseInt(version[0])>=1 && (parseInt(version[0])>1 || parseInt(version[1])>=16)) {
-            alert("Use Everywhere nodes may not work correctly with this version of ComfyUI. See https://github.com/chrisgoringe/cg-use-everywhere/discussions/287.")
-        }
+    },
+
+    beforeConfigureGraph() {
+        linkRenderController.pause("before configure", 1000)
+        graphAnalyser.pause("before configure", 1000)
+    },
 
+    afterConfigureGraph() {
+        graphConverter.remove_saved_ue_links()
     }
 
 });

docs/options116.png

@@ -1,23 +1,36 @@
 import { app } from "../../scripts/app.js";
-import { is_UEnode, get_real_node } from "./use_everywhere_utilities.js";
+import { display_name } from "./use_everywhere_classes.js";
+import { is_UEnode, get_real_node, Logger } from "./use_everywhere_utilities.js";
 
 
-function _convert_to_links(ue) {
+function _convert_to_links(ue, added_links) {
     const output_node_id = ue.output[0];
     const output_index = ue.output[1];
     const output_node = get_real_node(output_node_id);
+    Logger.log(Logger.INFORMATION, "Adding links for " + ue.description);
     ue.sending_to.forEach((st) => {
         const input_node_id = st.node.id;
         const input_node = get_real_node(input_node_id);
         const input_index = st.input_index;
-        output_node.connect(output_index, input_node, input_index);
+        const new_link = output_node.connect(output_index, input_node, input_index);
+        if (!new_link)
+            console.error("Failed to connect nodes: " +
+                          `${output_node_id}[${output_index}] -> ` +
+                          `${input_node_id}[${input_index}].`);
+        else { // Memorize the links we are adding to remove them later
+            if (added_links)
+                added_links.push(new_link.id);
+            Logger.log(Logger.INFORMATION, `  -> ${display_name(st.node)}, ${st.input.name} ` +
+                                           `(${st.node.id}.${st.input_index}) (ID: ${new_link.id})`);
+        }
     });
 }
 
-function convert_to_links(ues, control_node_id) {
+function convert_to_links(ues, control_node_id, added_links=undefined) {
     ues.ues.forEach((ue)=> {
-        if (control_node_id==-1 || ue.controller.id == control_node_id) _convert_to_links(ue);
+        if (control_node_id==-1 || ue.controller.id == control_node_id) _convert_to_links(ue, added_links);
     });
+    return added_links;
 }
 
 function remove_all_ues() {