298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-01-11 10:25:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update litegraph from upstream.

Browse Source
This commit is contained in:
comfyanonymous 2023-04-07 15:11:00 -04:00
parent 44fea05064
commit 07e9a6b826
1 changed files with 164 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
web/lib/litegraph.core.js
View File

@ -89,6 +89,7 @@
NO_TITLE: 1, NO_TITLE: 1,
TRANSPARENT_TITLE: 2, TRANSPARENT_TITLE: 2,
AUTOHIDE_TITLE: 3, AUTOHIDE_TITLE: 3,
VERTICAL_LAYOUT: "vertical", // arrange nodes vertically
proxy: null, //used to redirect calls proxy: null, //used to redirect calls
node_images_path: "", node_images_path: "",
@ -125,14 +126,14 @@
registered_slot_out_types: {}, // slot types for nodeclass registered_slot_out_types: {}, // slot types for nodeclass
slot_types_in: [], // slot types IN slot_types_in: [], // slot types IN
slot_types_out: [], // slot types OUT slot_types_out: [], // slot types OUT
slot_types_default_in: [], // specify for each IN slot type a(/many) deafult node(s), use single string, array, or object (with node, title, parameters, ..) like for search slot_types_default_in: [], // specify for each IN slot type a(/many) default node(s), use single string, array, or object (with node, title, parameters, ..) like for search
slot_types_default_out: [], // specify for each OUT slot type a(/many) deafult node(s), use single string, array, or object (with node, title, parameters, ..) like for search slot_types_default_out: [], // specify for each OUT slot type a(/many) default node(s), use single string, array, or object (with node, title, parameters, ..) like for search
alt_drag_do_clone_nodes: false, // [true!] very handy, ALT click to clone and drag the new node alt_drag_do_clone_nodes: false, // [true!] very handy, ALT click to clone and drag the new node
do_add_triggers_slots: false, // [true!] will create and connect event slots when using action/events connections, !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this do_add_triggers_slots: false, // [true!] will create and connect event slots when using action/events connections, !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this
allow_multi_output_for_events: true, // [false!] being events, it is strongly reccomended to use them sequentually, one by one allow_multi_output_for_events: true, // [false!] being events, it is strongly reccomended to use them sequentially, one by one
middle_click_slot_add_default_node: false, //[true!] allows to create and connect a ndoe clicking with the third button (wheel) middle_click_slot_add_default_node: false, //[true!] allows to create and connect a ndoe clicking with the third button (wheel)
@ -158,80 +159,67 @@
console.log("Node registered: " + type); console.log("Node registered: " + type);
} }
var categories = type.split("/"); const classname = base_class.name;
var classname = base_class.name;
var pos = type.lastIndexOf("/"); const pos = type.lastIndexOf("/");
base_class.category = type.substr(0, pos); base_class.category = type.substring(0, pos);
if (!base_class.title) { if (!base_class.title) {
base_class.title = classname; base_class.title = classname;
} }
//info.name = name.substr(pos+1,name.length - pos);
//extend class //extend class
if (base_class.prototype) { for (var i in LGraphNode.prototype) {
//is a class if (!base_class.prototype[i]) {
for (var i in LGraphNode.prototype) { base_class.prototype[i] = LGraphNode.prototype[i];
if (!base_class.prototype[i]) {
base_class.prototype[i] = LGraphNode.prototype[i];
}
} }
} }
var prev = this.registered_node_types[type]; const prev = this.registered_node_types[type];
if(prev) if(prev) {
console.log("replacing node type: " + type); console.log("replacing node type: " + type);
else }
{ if( !Object.prototype.hasOwnProperty.call( base_class.prototype, "shape") ) {
if( !Object.hasOwnProperty( base_class.prototype, "shape") ) Object.defineProperty(base_class.prototype, "shape", {
Object.defineProperty(base_class.prototype, "shape", { set: function(v) {
set: function(v) { switch (v) {
switch (v) { case "default":
case "default": delete this._shape;
delete this._shape; break;
break; case "box":
case "box": this._shape = LiteGraph.BOX_SHAPE;
this._shape = LiteGraph.BOX_SHAPE; break;
break; case "round":
case "round": this._shape = LiteGraph.ROUND_SHAPE;
this._shape = LiteGraph.ROUND_SHAPE; break;
break; case "circle":
case "circle": this._shape = LiteGraph.CIRCLE_SHAPE;
this._shape = LiteGraph.CIRCLE_SHAPE; break;
break; case "card":
case "card": this._shape = LiteGraph.CARD_SHAPE;
this._shape = LiteGraph.CARD_SHAPE; break;
break; default:
default: this._shape = v;
this._shape = v; }
} },
}, get: function() {
get: function(v) { return this._shape;
return this._shape; },
}, enumerable: true,
enumerable: true, configurable: true
configurable: true });
});
//warnings //used to know which nodes to create when dragging files to the canvas
if (base_class.prototype.onPropertyChange) { if (base_class.supported_extensions) {
console.warn( for (let i in base_class.supported_extensions) {
"LiteGraph node class " + const ext = base_class.supported_extensions[i];
type + if(ext && ext.constructor === String) {
" has onPropertyChange method, it must be called onPropertyChanged with d at the end" this.node_types_by_file_extension[ ext.toLowerCase() ] = base_class;
); }
} }
}
//used to know which nodes create when dragging files to the canvas }
if (base_class.supported_extensions) {
for (var i in base_class.supported_extensions) {
var ext = base_class.supported_extensions[i];
if(ext && ext.constructor === String)
this.node_types_by_file_extension[ ext.toLowerCase() ] = base_class;
}
}
}
this.registered_node_types[type] = base_class; this.registered_node_types[type] = base_class;
if (base_class.constructor.name) { if (base_class.constructor.name) {
@ -252,19 +240,11 @@
" has onPropertyChange method, it must be called onPropertyChanged with d at the end" " has onPropertyChange method, it must be called onPropertyChanged with d at the end"
); );
} }
//used to know which nodes create when dragging files to the canvas
if (base_class.supported_extensions) {
for (var i=0; i < base_class.supported_extensions.length; i++) {
var ext = base_class.supported_extensions[i];
if(ext && ext.constructor === String)
this.node_types_by_file_extension[ ext.toLowerCase() ] = base_class;
}
}
// TODO one would want to know input and ouput :: this would allow trought registerNodeAndSlotType to get all the slots types // TODO one would want to know input and ouput :: this would allow through registerNodeAndSlotType to get all the slots types
//console.debug("Registering "+type); if (this.auto_load_slot_types) {
if (this.auto_load_slot_types) nodeTmp = new base_class(base_class.title || "tmpnode"); new base_class(base_class.title || "tmpnode");
}
}, },
/** /**
@ -1260,37 +1240,39 @@
* Positions every node in a more readable manner * Positions every node in a more readable manner
* @method arrange * @method arrange
*/ */
LGraph.prototype.arrange = function(margin) { LGraph.prototype.arrange = function (margin, layout) {
margin = margin || 100; margin = margin || 100;
var nodes = this.computeExecutionOrder(false, true); const nodes = this.computeExecutionOrder(false, true);
var columns = []; const columns = [];
for (var i = 0; i < nodes.length; ++i) { for (let i = 0; i < nodes.length; ++i) {
var node = nodes[i]; const node = nodes[i];
var col = node._level || 1; const col = node._level || 1;
if (!columns[col]) { if (!columns[col]) {
columns[col] = []; columns[col] = [];
} }
columns[col].push(node); columns[col].push(node);
} }
var x = margin; let x = margin;
for (var i = 0; i < columns.length; ++i) { for (let i = 0; i < columns.length; ++i) {
var column = columns[i]; const column = columns[i];
if (!column) { if (!column) {
continue; continue;
} }
var max_size = 100; let max_size = 100;
var y = margin + LiteGraph.NODE_TITLE_HEIGHT; let y = margin + LiteGraph.NODE_TITLE_HEIGHT;
for (var j = 0; j < column.length; ++j) { for (let j = 0; j < column.length; ++j) {
var node = column[j]; const node = column[j];
node.pos[0] = x; node.pos[0] = (layout == LiteGraph.VERTICAL_LAYOUT) ? y : x;
node.pos[1] = y; node.pos[1] = (layout == LiteGraph.VERTICAL_LAYOUT) ? x : y;
if (node.size[0] > max_size) { const max_size_index = (layout == LiteGraph.VERTICAL_LAYOUT) ? 1 : 0;
max_size = node.size[0]; if (node.size[max_size_index] > max_size) {
max_size = node.size[max_size_index];
} }
y += node.size[1] + margin + LiteGraph.NODE_TITLE_HEIGHT; const node_size_index = (layout == LiteGraph.VERTICAL_LAYOUT) ? 0 : 1;
y += node.size[node_size_index] + margin + LiteGraph.NODE_TITLE_HEIGHT;
} }
x += max_size + margin; x += max_size + margin;
} }
@ -2468,43 +2450,34 @@
this.title = this.constructor.title; this.title = this.constructor.title;
} }
if (this.onConnectionsChange) { if (this.inputs) {
if (this.inputs) { for (var i = 0; i < this.inputs.length; ++i) {
for (var i = 0; i < this.inputs.length; ++i) { var input = this.inputs[i];
var input = this.inputs[i]; var link_info = this.graph ? this.graph.links[input.link] : null;
var link_info = this.graph if (this.onConnectionsChange)
? this.graph.links[input.link] this.onConnectionsChange( LiteGraph.INPUT, i, true, link_info, input ); //link_info has been created now, so its updated
: null;
this.onConnectionsChange(
LiteGraph.INPUT,
i,
true,
link_info,
input
); //link_info has been created now, so its updated
}
}
if (this.outputs) { if( this.onInputAdded )
for (var i = 0; i < this.outputs.length; ++i) { this.onInputAdded(input);
var output = this.outputs[i];
if (!output.links) { }
continue; }
}
for (var j = 0; j < output.links.length; ++j) { if (this.outputs) {
var link_info = this.graph for (var i = 0; i < this.outputs.length; ++i) {
? this.graph.links[output.links[j]] var output = this.outputs[i];
: null; if (!output.links) {
this.onConnectionsChange( continue;
LiteGraph.OUTPUT, }
i, for (var j = 0; j < output.links.length; ++j) {
true, var link_info = this.graph ? this.graph.links[output.links[j]] : null;
link_info, if (this.onConnectionsChange)
output this.onConnectionsChange( LiteGraph.OUTPUT, i, true, link_info, output ); //link_info has been created now, so its updated
); //link_info has been created now, so its updated }
}
} if( this.onOutputAdded )
} this.onOutputAdded(output);
}
} }
if( this.widgets ) if( this.widgets )
@ -3200,6 +3173,15 @@
return; return;
} }
if(slot == null)
{
console.error("slot must be a number");
return;
}
if(slot.constructor !== Number)
console.warn("slot must be a number, use node.trigger('name') if you want to use a string");
var output = this.outputs[slot]; var output = this.outputs[slot];
if (!output) { if (!output) {
return; return;
@ -3346,26 +3328,26 @@
* @param {Object} extra_info this can be used to have special properties of an output (label, special color, position, etc) * @param {Object} extra_info this can be used to have special properties of an output (label, special color, position, etc)
*/ */
LGraphNode.prototype.addOutput = function(name, type, extra_info) { LGraphNode.prototype.addOutput = function(name, type, extra_info) {
var o = { name: name, type: type, links: null }; var output = { name: name, type: type, links: null };
if (extra_info) { if (extra_info) {
for (var i in extra_info) { for (var i in extra_info) {
o[i] = extra_info[i]; output[i] = extra_info[i];
} }
} }
if (!this.outputs) { if (!this.outputs) {
this.outputs = []; this.outputs = [];
} }
this.outputs.push(o); this.outputs.push(output);
if (this.onOutputAdded) { if (this.onOutputAdded) {
this.onOutputAdded(o); this.onOutputAdded(output);
} }
if (LiteGraph.auto_load_slot_types) LiteGraph.registerNodeAndSlotType(this,type,true); if (LiteGraph.auto_load_slot_types) LiteGraph.registerNodeAndSlotType(this,type,true);
this.setSize( this.computeSize() ); this.setSize( this.computeSize() );
this.setDirtyCanvas(true, true); this.setDirtyCanvas(true, true);
return o; return output;
}; };
/** /**
@ -3437,10 +3419,10 @@
*/ */
LGraphNode.prototype.addInput = function(name, type, extra_info) { LGraphNode.prototype.addInput = function(name, type, extra_info) {
type = type || 0; type = type || 0;
var o = { name: name, type: type, link: null }; var input = { name: name, type: type, link: null };
if (extra_info) { if (extra_info) {
for (var i in extra_info) { for (var i in extra_info) {
o[i] = extra_info[i]; input[i] = extra_info[i];
} }
} }
@ -3448,17 +3430,17 @@
this.inputs = []; this.inputs = [];
} }
this.inputs.push(o); this.inputs.push(input);
this.setSize( this.computeSize() ); this.setSize( this.computeSize() );
if (this.onInputAdded) { if (this.onInputAdded) {
this.onInputAdded(o); this.onInputAdded(input);
} }
LiteGraph.registerNodeAndSlotType(this,type); LiteGraph.registerNodeAndSlotType(this,type);
this.setDirtyCanvas(true, true); this.setDirtyCanvas(true, true);
return o; return input;
}; };
/** /**
@ -5210,6 +5192,7 @@ LGraphNode.prototype.executeAction = function(action)
this.allow_dragcanvas = true; this.allow_dragcanvas = true;
this.allow_dragnodes = true; this.allow_dragnodes = true;
this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc
this.multi_select = false; //allow selecting multi nodes without pressing extra keys
this.allow_searchbox = true; this.allow_searchbox = true;
this.allow_reconnect_links = true; //allows to change a connection with having to redo it again this.allow_reconnect_links = true; //allows to change a connection with having to redo it again
this.align_to_grid = false; //snap to grid this.align_to_grid = false; //snap to grid
@ -5435,7 +5418,7 @@ LGraphNode.prototype.executeAction = function(action)
}; };
/** /**
* returns the visualy active graph (in case there are more in the stack) * returns the visually active graph (in case there are more in the stack)
* @method getCurrentGraph * @method getCurrentGraph
* @return {LGraph} the active graph * @return {LGraph} the active graph
*/ */
@ -6060,9 +6043,13 @@ LGraphNode.prototype.executeAction = function(action)
this.graph.beforeChange(); this.graph.beforeChange();
this.node_dragged = node; this.node_dragged = node;
} }
if (!this.selected_nodes[node.id]) { this.processNodeSelected(node, e);
this.processNodeSelected(node, e); } else { // double-click
} /**
* Don't call the function if the block is already selected.
* Otherwise, it could cause the block to be unselected while its panel is open.
*/
if (!node.is_selected) this.processNodeSelected(node, e);
} }
this.dirty_canvas = true; this.dirty_canvas = true;
@ -6474,6 +6461,10 @@ LGraphNode.prototype.executeAction = function(action)
var n = this.selected_nodes[i]; var n = this.selected_nodes[i];
n.pos[0] += delta[0] / this.ds.scale; n.pos[0] += delta[0] / this.ds.scale;
n.pos[1] += delta[1] / this.ds.scale; n.pos[1] += delta[1] / this.ds.scale;
if (!n.is_selected) this.processNodeSelected(n, e); /*
* Don't call the function if the block is already selected.
* Otherwise, it could cause the block to be unselected while dragging.
*/
} }
this.dirty_canvas = true; this.dirty_canvas = true;
@ -7287,7 +7278,7 @@ LGraphNode.prototype.executeAction = function(action)
}; };
LGraphCanvas.prototype.processNodeSelected = function(node, e) { LGraphCanvas.prototype.processNodeSelected = function(node, e) {
this.selectNode(node, e && (e.shiftKey||e.ctrlKey)); this.selectNode(node, e && (e.shiftKey || e.ctrlKey || this.multi_select));
if (this.onNodeSelected) { if (this.onNodeSelected) {
this.onNodeSelected(node); this.onNodeSelected(node);
} }
@ -7323,6 +7314,7 @@ LGraphNode.prototype.executeAction = function(action)
for (var i in nodes) { for (var i in nodes) {
var node = nodes[i]; var node = nodes[i];
if (node.is_selected) { if (node.is_selected) {
this.deselectNode(node);
continue; continue;
} }
@ -7489,8 +7481,8 @@ LGraphNode.prototype.executeAction = function(action)
clientY_rel = e.clientY; clientY_rel = e.clientY;
} }
e.deltaX = clientX_rel - this.last_mouse_position[0]; // e.deltaX = clientX_rel - this.last_mouse_position[0];
e.deltaY = clientY_rel- this.last_mouse_position[1]; // e.deltaY = clientY_rel- this.last_mouse_position[1];
this.last_mouse_position[0] = clientX_rel; this.last_mouse_position[0] = clientX_rel;
this.last_mouse_position[1] = clientY_rel; this.last_mouse_position[1] = clientY_rel;
@ -9742,13 +9734,17 @@ LGraphNode.prototype.executeAction = function(action)
ctx.fillRect(margin, y, widget_width - margin * 2, H); ctx.fillRect(margin, y, widget_width - margin * 2, H);
var range = w.options.max - w.options.min; var range = w.options.max - w.options.min;
var nvalue = (w.value - w.options.min) / range; var nvalue = (w.value - w.options.min) / range;
ctx.fillStyle = active_widget == w ? "#89A" : "#678"; if(nvalue < 0.0) nvalue = 0.0;
if(nvalue > 1.0) nvalue = 1.0;
ctx.fillStyle = w.options.hasOwnProperty("slider_color") ? w.options.slider_color : (active_widget == w ? "#89A" : "#678");
ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H); ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H);
if(show_text && !w.disabled) if(show_text && !w.disabled)
ctx.strokeRect(margin, y, widget_width - margin * 2, H); ctx.strokeRect(margin, y, widget_width - margin * 2, H);
if (w.marker) { if (w.marker) {
var marker_nvalue = (w.marker - w.options.min) / range; var marker_nvalue = (w.marker - w.options.min) / range;
ctx.fillStyle = "#AA9"; if(marker_nvalue < 0.0) marker_nvalue = 0.0;
if(marker_nvalue > 1.0) marker_nvalue = 1.0;
ctx.fillStyle = w.options.hasOwnProperty("marker_color") ? w.options.marker_color : "#AA9";
ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H ); ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H );
} }
if (show_text) { if (show_text) {
@ -9915,6 +9911,7 @@ LGraphNode.prototype.executeAction = function(action)
case "slider": case "slider":
var range = w.options.max - w.options.min; var range = w.options.max - w.options.min;
var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1); var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
if(w.options.read_only) break;
w.value = w.options.min + (w.options.max - w.options.min) * nvalue; w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
if (w.callback) { if (w.callback) {
setTimeout(function() { setTimeout(function() {
@ -9927,7 +9924,8 @@ LGraphNode.prototype.executeAction = function(action)
case "combo": case "combo":
var old_value = w.value; var old_value = w.value;
if (event.type == LiteGraph.pointerevents_method+"move" && w.type == "number") { if (event.type == LiteGraph.pointerevents_method+"move" && w.type == "number") {
w.value += event.deltaX * 0.1 * (w.options.step || 1); if(event.deltaX)
w.value += event.deltaX * 0.1 * (w.options.step || 1);
if ( w.options.min != null && w.value < w.options.min ) { if ( w.options.min != null && w.value < w.options.min ) {
w.value = w.options.min; w.value = w.options.min;
} }
@ -9994,6 +9992,12 @@ LGraphNode.prototype.executeAction = function(action)
var delta = x < 40 ? -1 : x > widget_width - 40 ? 1 : 0; var delta = x < 40 ? -1 : x > widget_width - 40 ? 1 : 0;
if (event.click_time < 200 && delta == 0) { if (event.click_time < 200 && delta == 0) {
this.prompt("Value",w.value,function(v) { this.prompt("Value",w.value,function(v) {
// check if v is a valid equation or a number
if (/^[0-9+\-*/()\s]+$/.test(v)) {
try {//solve the equation if possible
v = eval(v);
} catch (e) { }
}
this.value = Number(v); this.value = Number(v);
inner_value_change(this, this.value); inner_value_change(this, this.value);
}.bind(w), }.bind(w),
@ -10022,7 +10026,6 @@ LGraphNode.prototype.executeAction = function(action)
case "text": case "text":
if (event.type == LiteGraph.pointerevents_method+"down") { if (event.type == LiteGraph.pointerevents_method+"down") {
this.prompt("Value",w.value,function(v) { this.prompt("Value",w.value,function(v) {
this.value = v;
inner_value_change(this, v); inner_value_change(this, v);
}.bind(w), }.bind(w),
event,w.options ? w.options.multiline : false ); event,w.options ? w.options.multiline : false );
@ -10047,6 +10050,9 @@ LGraphNode.prototype.executeAction = function(action)
}//end for }//end for
function inner_value_change(widget, value) { function inner_value_change(widget, value) {
if(widget.type == "number"){
value = Number(value);
}
widget.value = value; widget.value = value;
if ( widget.options && widget.options.property && node.properties[widget.options.property] !== undefined ) { if ( widget.options && widget.options.property && node.properties[widget.options.property] !== undefined ) {
node.setProperty( widget.options.property, value ); node.setProperty( widget.options.property, value );
@ -11165,7 +11171,7 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.search_limit = -1; LGraphCanvas.search_limit = -1;
LGraphCanvas.prototype.showSearchBox = function(event, options) { LGraphCanvas.prototype.showSearchBox = function(event, options) {
// proposed defaults // proposed defaults
def_options = { slot_from: null var def_options = { slot_from: null
,node_from: null ,node_from: null
,node_to: null ,node_to: null
,do_type_filter: LiteGraph.search_filter_enabled // TODO check for registered_slot_[in/out]_types not empty // this will be checked for functionality enabled : filter on slot type, in and out ,do_type_filter: LiteGraph.search_filter_enabled // TODO check for registered_slot_[in/out]_types not empty // this will be checked for functionality enabled : filter on slot type, in and out
@ -11863,7 +11869,7 @@ LGraphNode.prototype.executeAction = function(action)
// TODO refactor, theer are different dialog, some uses createDialog, some dont // TODO refactor, theer are different dialog, some uses createDialog, some dont
LGraphCanvas.prototype.createDialog = function(html, options) { LGraphCanvas.prototype.createDialog = function(html, options) {
def_options = { checkForInput: false, closeOnLeave: true, closeOnLeave_checkModified: true }; var def_options = { checkForInput: false, closeOnLeave: true, closeOnLeave_checkModified: true };
options = Object.assign(def_options, options || {}); options = Object.assign(def_options, options || {});
var dialog = document.createElement("div"); var dialog = document.createElement("div");
@ -11993,7 +11999,8 @@ LGraphNode.prototype.executeAction = function(action)
if (root.onClose && typeof root.onClose == "function"){ if (root.onClose && typeof root.onClose == "function"){
root.onClose(); root.onClose();
} }
root.parentNode.removeChild(root); if(root.parentNode)
root.parentNode.removeChild(root);
/* XXX CHECK THIS */ /* XXX CHECK THIS */
if(this.parentNode){ if(this.parentNode){
this.parentNode.removeChild(this); this.parentNode.removeChild(this);
@ -12285,7 +12292,7 @@ LGraphNode.prototype.executeAction = function(action)
var ref_window = this.getCanvasWindow(); var ref_window = this.getCanvasWindow();
var that = this; var that = this;
var graphcanvas = this; var graphcanvas = this;
panel = this.createPanel(node.title || "",{ var panel = this.createPanel(node.title || "",{
closable: true closable: true
,window: ref_window ,window: ref_window
,onOpen: function(){ ,onOpen: function(){