mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 17:10:07 +00:00
fixes in graph globals, default conection color changed, better doc
This commit is contained in:
tamat
@@ -184,7 +184,7 @@ var LiteGraph = global.LiteGraph = {
|
||||
for(var i in LGraphNode.prototype)
|
||||
if(!base_class.prototype[i])
|
||||
base_class.prototype[i] = LGraphNode.prototype[i];
|
||||
|
||||
|
||||
Object.defineProperty( base_class.prototype, "shape",{
|
||||
set: function(v) {
|
||||
switch(v)
|
||||
@@ -421,7 +421,7 @@ var LiteGraph = global.LiteGraph = {
|
||||
if( !type_a || //generic output
|
||||
!type_b || //generic input
|
||||
type_a == type_b || //same type (is valid for triggers)
|
||||
type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION )
|
||||
type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION )
|
||||
return true;
|
||||
|
||||
type_a = type_a.toLowerCase();
|
||||
@@ -431,9 +431,9 @@ var LiteGraph = global.LiteGraph = {
|
||||
|
||||
var supported_types_a = type_a.split(",");
|
||||
var supported_types_b = type_b.split(",");
|
||||
for(var i = 0; i < supported_types_a.length; ++i)
|
||||
for(var j = 0; j < supported_types_b.length; ++j)
|
||||
if( supported_types_a[i] == supported_types_b[i] )
|
||||
for(var i = 0; i < supported_types_a.length; ++i)
|
||||
for(var j = 0; j < supported_types_b.length; ++j)
|
||||
if( supported_types_a[i] == supported_types_b[j] )
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
@@ -524,7 +524,7 @@ LGraph.prototype.clear = function()
|
||||
|
||||
this.catch_errors = true;
|
||||
|
||||
//globals
|
||||
//subgraph_data
|
||||
this.global_inputs = {};
|
||||
this.global_outputs = {};
|
||||
|
||||
@@ -1134,7 +1134,6 @@ LGraph.prototype.findNodesByTitle = function(title)
|
||||
* @param {Array} nodes_list a list with all the nodes to search from, by default is all the nodes in the graph
|
||||
* @return {Array} a list with all the nodes that intersect this coordinate
|
||||
*/
|
||||
|
||||
LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
|
||||
{
|
||||
nodes_list = nodes_list || this._nodes;
|
||||
@@ -1149,7 +1148,13 @@ LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
|
||||
|
||||
// ********** GLOBALS *****************
|
||||
|
||||
//Tell this graph has a global input of this type
|
||||
/**
|
||||
* Tell this graph it has a global graph input of this type
|
||||
* @method addGlobalInput
|
||||
* @param {String} name
|
||||
* @param {String} type
|
||||
* @param {*} value [optional]
|
||||
*/
|
||||
LGraph.prototype.addGlobalInput = function(name, type, value)
|
||||
{
|
||||
this.global_inputs[name] = { name: name, type: type, value: value };
|
||||
@@ -1161,7 +1166,12 @@ LGraph.prototype.addGlobalInput = function(name, type, value)
|
||||
this.onGlobalsChange();
|
||||
}
|
||||
|
||||
//assign a data to the global input
|
||||
/**
|
||||
* Assign a data to the global graph input
|
||||
* @method setGlobalInputData
|
||||
* @param {String} name
|
||||
* @param {*} data
|
||||
*/
|
||||
LGraph.prototype.setGlobalInputData = function(name, data)
|
||||
{
|
||||
var input = this.global_inputs[name];
|
||||
@@ -1170,7 +1180,21 @@ LGraph.prototype.setGlobalInputData = function(name, data)
|
||||
input.value = data;
|
||||
}
|
||||
|
||||
//assign a data to the global input
|
||||
/**
|
||||
* Assign a data to the global graph input (same as setGlobalInputData)
|
||||
* @method setInputData
|
||||
* @param {String} name
|
||||
* @param {*} data
|
||||
*/
|
||||
LGraph.prototype.setInputData = LGraph.prototype.setGlobalInputData;
|
||||
|
||||
|
||||
/**
|
||||
* Returns the current value of a global graph input
|
||||
* @method getGlobalInputData
|
||||
* @param {String} name
|
||||
* @return {*} the data
|
||||
*/
|
||||
LGraph.prototype.getGlobalInputData = function(name)
|
||||
{
|
||||
var input = this.global_inputs[name];
|
||||
@@ -1179,7 +1203,12 @@ LGraph.prototype.getGlobalInputData = function(name)
|
||||
return input.value;
|
||||
}
|
||||
|
||||
//rename the global input
|
||||
/**
|
||||
* Changes the name of a global graph input
|
||||
* @method renameGlobalInput
|
||||
* @param {String} old_name
|
||||
* @param {String} new_name
|
||||
*/
|
||||
LGraph.prototype.renameGlobalInput = function(old_name, name)
|
||||
{
|
||||
if(name == old_name)
|
||||
@@ -1204,6 +1233,12 @@ LGraph.prototype.renameGlobalInput = function(old_name, name)
|
||||
this.onGlobalsChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes the type of a global graph input
|
||||
* @method changeGlobalInputType
|
||||
* @param {String} name
|
||||
* @param {String} type
|
||||
*/
|
||||
LGraph.prototype.changeGlobalInputType = function(name, type)
|
||||
{
|
||||
if(!this.global_inputs[name])
|
||||
@@ -1217,6 +1252,12 @@ LGraph.prototype.changeGlobalInputType = function(name, type)
|
||||
this.onGlobalInputTypeChanged(name, type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a global graph input
|
||||
* @method removeGlobalInput
|
||||
* @param {String} name
|
||||
* @param {String} type
|
||||
*/
|
||||
LGraph.prototype.removeGlobalInput = function(name)
|
||||
{
|
||||
if(!this.global_inputs[name])
|
||||
@@ -1232,7 +1273,13 @@ LGraph.prototype.removeGlobalInput = function(name)
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Creates a global graph output
|
||||
* @method addGlobalOutput
|
||||
* @param {String} name
|
||||
* @param {String} type
|
||||
* @param {*} value
|
||||
*/
|
||||
LGraph.prototype.addGlobalOutput = function(name, type, value)
|
||||
{
|
||||
this.global_outputs[name] = { name: name, type: type, value: value };
|
||||
@@ -1244,7 +1291,12 @@ LGraph.prototype.addGlobalOutput = function(name, type, value)
|
||||
this.onGlobalsChange();
|
||||
}
|
||||
|
||||
//assign a data to the global output
|
||||
/**
|
||||
* Assign a data to the global output
|
||||
* @method setGlobalOutputData
|
||||
* @param {String} name
|
||||
* @param {String} value
|
||||
*/
|
||||
LGraph.prototype.setGlobalOutputData = function(name, value)
|
||||
{
|
||||
var output = this.global_outputs[ name ];
|
||||
@@ -1253,7 +1305,12 @@ LGraph.prototype.setGlobalOutputData = function(name, value)
|
||||
output.value = value;
|
||||
}
|
||||
|
||||
//assign a data to the global input
|
||||
/**
|
||||
* Returns the current value of a global graph output
|
||||
* @method getGlobalOutputData
|
||||
* @param {String} name
|
||||
* @return {*} the data
|
||||
*/
|
||||
LGraph.prototype.getGlobalOutputData = function(name)
|
||||
{
|
||||
var output = this.global_outputs[name];
|
||||
@@ -1262,8 +1319,21 @@ LGraph.prototype.getGlobalOutputData = function(name)
|
||||
return output.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the current value of a global graph output (sames as getGlobalOutputData)
|
||||
* @method getOutputData
|
||||
* @param {String} name
|
||||
* @return {*} the data
|
||||
*/
|
||||
LGraph.prototype.getOutputData = LGraph.prototype.getGlobalOutputData;
|
||||
|
||||
//rename the global output
|
||||
|
||||
/**
|
||||
* Renames a global graph output
|
||||
* @method renameGlobalOutput
|
||||
* @param {String} old_name
|
||||
* @param {String} new_name
|
||||
*/
|
||||
LGraph.prototype.renameGlobalOutput = function(old_name, name)
|
||||
{
|
||||
if(!this.global_outputs[old_name])
|
||||
@@ -1285,6 +1355,12 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name)
|
||||
this.onGlobalsChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes the type of a global graph output
|
||||
* @method changeGlobalOutputType
|
||||
* @param {String} name
|
||||
* @param {String} type
|
||||
*/
|
||||
LGraph.prototype.changeGlobalOutputType = function(name, type)
|
||||
{
|
||||
if(!this.global_outputs[name])
|
||||
@@ -1298,6 +1374,11 @@ LGraph.prototype.changeGlobalOutputType = function(name, type)
|
||||
this.onGlobalOutputTypeChanged(name, type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a global graph output
|
||||
* @method removeGlobalOutput
|
||||
* @param {String} name
|
||||
*/
|
||||
LGraph.prototype.removeGlobalOutput = function(name)
|
||||
{
|
||||
if(!this.global_outputs[name])
|
||||
@@ -1312,39 +1393,6 @@ LGraph.prototype.removeGlobalOutput = function(name)
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that
|
||||
* can be easily accesed from the outside of the graph
|
||||
* @method setInputData
|
||||
* @param {String} name the name of the node
|
||||
* @param {*} value value to assign to this node
|
||||
*/
|
||||
|
||||
LGraph.prototype.setInputData = function(name,value)
|
||||
{
|
||||
var nodes = this.findNodesByTitle( name );
|
||||
for(var i = 0, l = nodes.length; i < l; ++i)
|
||||
nodes[i].setValue(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the value of the first node with this name. This is used to access global variables of the graph from the outside
|
||||
* @method setInputData
|
||||
* @param {String} name the name of the node
|
||||
* @return {*} value of the node
|
||||
*/
|
||||
|
||||
LGraph.prototype.getOutputData = function(name)
|
||||
{
|
||||
var n = this.findNodesByTitle(name);
|
||||
if(n.length)
|
||||
return m[0].getValue();
|
||||
return null;
|
||||
}
|
||||
|
||||
//This feature is not finished yet, is to create graphs where nodes are not executed unless a trigger message is received
|
||||
|
||||
LGraph.prototype.triggerInput = function(name,value)
|
||||
{
|
||||
var nodes = this.findNodesByTitle(name);
|
||||
@@ -2893,6 +2941,12 @@ function LGraphCanvas( canvas, graph, options )
|
||||
this.title_text_font = "bold 14px Arial";
|
||||
this.inner_text_font = "normal 12px Arial";
|
||||
this.default_link_color = "#AAC";
|
||||
this.default_connection_color = {
|
||||
input_off: "#AAB",
|
||||
input_on: "#7F7",
|
||||
output_off: "#AAB",
|
||||
output_on: "#7F7",
|
||||
};
|
||||
|
||||
this.highquality_render = true;
|
||||
this.editor_alpha = 1; //used for transition
|
||||
@@ -2910,6 +2964,7 @@ function LGraphCanvas( canvas, graph, options )
|
||||
this.dragging_rectangle = null;
|
||||
|
||||
this.always_render_background = false;
|
||||
this.render_canvas_area = true;
|
||||
this.render_connections_shadows = false; //too much cpu
|
||||
this.render_connections_border = true;
|
||||
this.render_curved_connections = true;
|
||||
@@ -3133,7 +3188,7 @@ LGraphCanvas.prototype.bindEvents = function()
|
||||
|
||||
var canvas = this.canvas;
|
||||
var ref_window = this.getCanvasWindow();
|
||||
var document = ref_window.document; //hack used when moving canvas between windows
|
||||
var document = ref_window.document; //hack used when moving canvas between windows
|
||||
|
||||
this._mousedown_callback = this.processMouseDown.bind(this);
|
||||
this._mousewheel_callback = this.processMouseWheel.bind(this);
|
||||
@@ -4623,8 +4678,10 @@ LGraphCanvas.prototype.drawBackCanvas = function()
|
||||
//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);
|
||||
|
||||
//bg
|
||||
ctx.strokeStyle = "#235";
|
||||
ctx.strokeRect(0,0,canvas.width,canvas.height);
|
||||
if (this.render_canvas_area) {
|
||||
ctx.strokeStyle = "#235";
|
||||
ctx.strokeRect(0,0,canvas.width,canvas.height);
|
||||
}
|
||||
|
||||
if(this.render_connections_shadows)
|
||||
{
|
||||
@@ -4776,7 +4833,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
|
||||
if ( this.connecting_node && LiteGraph.isValidConnection( slot.type && out_slot.type ) )
|
||||
ctx.globalAlpha = 0.4 * editor_alpha;
|
||||
|
||||
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
|
||||
ctx.fillStyle = slot.link != null ? this.default_connection_color.input_on : this.default_connection_color.input_off;
|
||||
|
||||
var pos = node.getConnectionPos(true,i);
|
||||
pos[0] -= node.pos[0];
|
||||
@@ -4820,7 +4877,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
|
||||
pos[0] -= node.pos[0];
|
||||
pos[1] -= node.pos[1];
|
||||
|
||||
ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
|
||||
ctx.fillStyle = slot.links && slot.links.length ? this.default_connection_color.output_on : this.default_connection_color.output_off;
|
||||
ctx.beginPath();
|
||||
//ctx.rect( node.size[0] - 14,i*14,10,10);
|
||||
|
||||
@@ -6013,7 +6070,7 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
|
||||
if( slot_info )
|
||||
slot_info.label = input.value;
|
||||
that.setDirty(true);
|
||||
}
|
||||
}
|
||||
dialog.close();
|
||||
});
|
||||
}
|
||||
@@ -6525,15 +6582,15 @@ LiteGraph.extendClass = function ( target, origin )
|
||||
}
|
||||
}
|
||||
|
||||
LiteGraph.getParameterNames = function(func) {
|
||||
LiteGraph.getParameterNames = function(func) {
|
||||
return (func + '')
|
||||
.replace(/[/][/].*$/mg,'') // strip single-line comments
|
||||
.replace(/\s+/g, '') // strip white space
|
||||
.replace(/[/][*][^/*]*[*][/]/g, '') // strip multi-line comments /**/
|
||||
.split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters
|
||||
.replace(/=[^,]+/g, '') // strip any ES6 defaults
|
||||
.split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters
|
||||
.replace(/=[^,]+/g, '') // strip any ES6 defaults
|
||||
.split(',').filter(Boolean); // split & filter [""]
|
||||
}
|
||||
}
|
||||
|
||||
if( typeof(window) != "undefined" && !window["requestAnimationFrame"] )
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user