Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-03 06:47:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge and build?

Browse Source
This commit is contained in:
tamat
2020-07-25 22:08:57 +02:00
parent 0b5b1adb16 ec83621e9e
commit d46bc11816
6 changed files with 792 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
build/litegraph.js
View File

@@ -199,6 +199,24 @@
if (prev && LiteGraph.onNodeTypeReplaced) {
LiteGraph.onNodeTypeReplaced(type, base_class, prev);
}
//warnings
if (base_class.prototype.onPropertyChange) {
console.warn(
"LiteGraph node class " +
type +
" 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;
}
}
},
/**
@@ -430,14 +448,14 @@
var tmp = document.getElementsByTagName("script");
//weird, this array changes by its own, so we use a copy
var script_files = [];
for (var i in tmp) {
for (var i=0; i < tmp.length; i++) {
script_files.push(tmp[i]);
}
var docHeadObj = document.getElementsByTagName("head")[0];
folder_wildcard = document.location.href + folder_wildcard;
for (var i in script_files) {
for (var i=0; i < script_files.length; i++) {
var src = script_files[i].src;
if (
!src ||
@@ -1969,8 +1987,8 @@
"weird LLink bug, link info is not a LLink but a regular object"
);
var link2 = new LLink();
for (var i in link) {
link2[i] = link[i];
for (var j in link) {
link2[j] = link[j];
}
this.links[i] = link2;
link = link2;
@@ -8580,6 +8598,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.textAlign = "left";
if(w.disabled)
ctx.globalAlpha *= 0.5;
var widget_width = w.width || width;
switch (w.type) {
case "button":
@@ -8588,13 +8607,13 @@ LGraphNode.prototype.executeAction = function(action)
w.clicked = false;
this.dirty_canvas = true;
}
ctx.fillRect(margin, y, width - margin * 2, H);
ctx.fillRect(margin, y, widget_width - margin * 2, H);
if(show_text && !w.disabled)
ctx.strokeRect( margin, y, width - margin * 2, H );
ctx.strokeRect( margin, y, widget_width - margin * 2, H );
if (show_text) {
ctx.textAlign = "center";
ctx.fillStyle = text_color;
ctx.fillText(w.name, width * 0.5, y + H * 0.7);
ctx.fillText(w.name, widget_width * 0.5, y + H * 0.7);
}
break;
case "toggle":
@@ -8603,15 +8622,15 @@ LGraphNode.prototype.executeAction = function(action)
ctx.fillStyle = background_color;
ctx.beginPath();
if (show_text)
ctx.roundRect(margin, posY, width - margin * 2, H, H * 0.5);
ctx.roundRect(margin, posY, widget_width - margin * 2, H, H * 0.5);
else
ctx.rect(margin, posY, width - margin * 2, H );
ctx.rect(margin, posY, widget_width - margin * 2, H );
ctx.fill();
if(show_text && !w.disabled)
ctx.stroke();
ctx.fillStyle = w.value ? "#89A" : "#333";
ctx.beginPath();
ctx.arc( width - margin * 2, y + H * 0.5, H * 0.36, 0, Math.PI * 2 );
ctx.arc( widget_width - margin * 2, y + H * 0.5, H * 0.36, 0, Math.PI * 2 );
ctx.fill();
if (show_text) {
ctx.fillStyle = secondary_text_color;
@@ -8624,31 +8643,31 @@ LGraphNode.prototype.executeAction = function(action)
w.value
? w.options.on || "true"
: w.options.off || "false",
width - 40,
widget_width - 40,
y + H * 0.7
);
}
break;
case "slider":
ctx.fillStyle = background_color;
ctx.fillRect(margin, y, width - margin * 2, H);
ctx.fillRect(margin, y, widget_width - margin * 2, H);
var range = w.options.max - w.options.min;
var nvalue = (w.value - w.options.min) / range;
ctx.fillStyle = active_widget == w ? "#89A" : "#678";
ctx.fillRect(margin, y, nvalue * (width - margin * 2), H);
ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H);
if(show_text && !w.disabled)
ctx.strokeRect(margin, y, width - margin * 2, H);
ctx.strokeRect(margin, y, widget_width - margin * 2, H);
if (w.marker) {
var marker_nvalue = (w.marker - w.options.min) / range;
ctx.fillStyle = "#AA9";
ctx.fillRect( margin + marker_nvalue * (width - margin * 2), y, 2, H );
ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H );
}
if (show_text) {
ctx.textAlign = "center";
ctx.fillStyle = text_color;
ctx.fillText(
w.name + " " + Number(w.value).toFixed(3),
width * 0.5,
widget_width * 0.5,
y + H * 0.7
);
}
@@ -8660,9 +8679,9 @@ LGraphNode.prototype.executeAction = function(action)
ctx.fillStyle = background_color;
ctx.beginPath();
if(show_text)
ctx.roundRect(margin, posY, width - margin * 2, H, H * 0.5);
ctx.roundRect(margin, posY, widget_width - margin * 2, H, H * 0.5);
else
ctx.rect(margin, posY, width - margin * 2, H );
ctx.rect(margin, posY, widget_width - margin * 2, H );
ctx.fill();
if (show_text) {
if(!w.disabled)
@@ -8676,9 +8695,9 @@ LGraphNode.prototype.executeAction = function(action)
ctx.lineTo(margin + 16, posY + H - 5);
ctx.fill();
ctx.beginPath();
ctx.moveTo(width - margin - 16, posY + 5);
ctx.lineTo(width - margin - 6, posY + H * 0.5);
ctx.lineTo(width - margin - 16, posY + H - 5);
ctx.moveTo(widget_width - margin - 16, posY + 5);
ctx.lineTo(widget_width - margin - 6, posY + H * 0.5);
ctx.lineTo(widget_width - margin - 16, posY + H - 5);
ctx.fill();
}
ctx.fillStyle = secondary_text_color;
@@ -8692,7 +8711,7 @@ LGraphNode.prototype.executeAction = function(action)
? w.options.precision
: 3
),
width - margin * 2 - 20,
widget_width - margin * 2 - 20,
y + H * 0.7
);
} else {
@@ -8707,7 +8726,7 @@ LGraphNode.prototype.executeAction = function(action)
}
ctx.fillText(
v,
width - margin * 2 - 20,
widget_width - margin * 2 - 20,
y + H * 0.7
);
}
@@ -8720,14 +8739,14 @@ LGraphNode.prototype.executeAction = function(action)
ctx.fillStyle = background_color;
ctx.beginPath();
if (show_text)
ctx.roundRect(margin, posY, width - margin * 2, H, H * 0.5);
ctx.roundRect(margin, posY, widget_width - margin * 2, H, H * 0.5);
else
ctx.rect( margin, posY, width - margin * 2, H );
ctx.rect( margin, posY, widget_width - margin * 2, H );
ctx.fill();
if (show_text) {
ctx.save();
ctx.beginPath();
ctx.rect(margin, posY, width - margin * 2, H);
ctx.rect(margin, posY, widget_width - margin * 2, H);
ctx.clip();
ctx.stroke();
@@ -8737,17 +8756,17 @@ LGraphNode.prototype.executeAction = function(action)
}
ctx.fillStyle = text_color;
ctx.textAlign = "right";
ctx.fillText(String(w.value).substr(0,30), width - margin * 2, y + H * 0.7); //30 chars max
ctx.fillText(String(w.value).substr(0,30), widget_width - margin * 2, y + H * 0.7); //30 chars max
ctx.restore();
}
break;
default:
if (w.draw) {
w.draw(ctx, node, width, y, H);
w.draw(ctx, node, widget_width, y, H);
}
break;
}
posY += (w.computeSize ? w.computeSize(width)[1] : H) + 4;
posY += (w.computeSize ? w.computeSize(widget_width)[1] : H) + 4;
ctx.globalAlpha = this.editor_alpha;
}
@@ -8780,14 +8799,15 @@ LGraphNode.prototype.executeAction = function(action)
if(!w || w.disabled)
continue;
var widget_height = w.computeSize ? w.computeSize(width)[1] : LiteGraph.NODE_WIDGET_HEIGHT;
var widget_width = w.width || width;
//outside
if ( w != active_widget &&
(x < 6 || x > width - 12 || y < w.last_y || y > w.last_y + widget_height) )
(x < 6 || x > widget_width - 12 || y < w.last_y || y > w.last_y + widget_height) )
continue;
var old_value = w.value;
//if ( w == active_widget || (x > 6 && x < width - 12 && y > w.last_y && y < w.last_y + widget_height) ) {
//if ( w == active_widget || (x > 6 && x < widget_width - 12 && y > w.last_y && y < w.last_y + widget_height) ) {
//inside widget
switch (w.type) {
case "button":
@@ -8804,7 +8824,7 @@ LGraphNode.prototype.executeAction = function(action)
break;
case "slider":
var range = w.options.max - w.options.min;
var nvalue = Math.clamp((x - 10) / (width - 20), 0, 1);
var nvalue = Math.clamp((x - 10) / (widget_width - 20), 0, 1);
w.value =
w.options.min +
(w.options.max - w.options.min) * nvalue;
@@ -8836,7 +8856,7 @@ LGraphNode.prototype.executeAction = function(action)
if( w.type != "number")
values_list = values.constructor === Array ? values : Object.keys(values);
var delta = x < 40 ? -1 : x > width - 40 ? 1 : 0;
var delta = x < 40 ? -1 : x > widget_width - 40 ? 1 : 0;
if (w.type == "number") {
w.value += delta * 0.1 * (w.options.step || 1);
if ( w.options.min != null && w.value < w.options.min ) {
@@ -8883,7 +8903,7 @@ LGraphNode.prototype.executeAction = function(action)
} //end mousedown
else if(event.type == "mouseup" && w.type == "number")
{
var delta = x < 40 ? -1 : x > width - 40 ? 1 : 0;
var delta = x < 40 ? -1 : x > widget_width - 40 ? 1 : 0;
if (event.click_time < 200 && delta == 0) {
this.prompt("Value",w.value,function(v) {
this.value = Number(v);
@@ -9139,7 +9159,7 @@ LGraphNode.prototype.executeAction = function(action)
var values = LiteGraph.getNodeTypesCategories( canvas.filter || graph.filter );
var entries = [];
for (var i in values) {
for (var i=0; i < values.length; i++) {
if (values[i]) {
var name = values[i];
if(name.indexOf("::") != -1) //in case it has a namespace like "shader::math/rand" it hides the namespace
@@ -9155,7 +9175,7 @@ LGraphNode.prototype.executeAction = function(action)
var category = v.value;
var node_types = LiteGraph.getNodeTypesInCategory( category, canvas.filter || graph.filter );
var values = [];
for (var i in node_types) {
for (var i=0; i < node_types.length; i++) {
if (!node_types[i].skip_list) {
values.push({
content: node_types[i].title,
@@ -9210,7 +9230,7 @@ LGraphNode.prototype.executeAction = function(action)
var entries = [];
if (options) {
for (var i in options) {
for (var i=0; i < options.length; i++) {
var entry = options[i];
if (!entry) {
entries.push(null);
@@ -9290,7 +9310,7 @@ LGraphNode.prototype.executeAction = function(action)
var entries = [];
if (options) {
for (var i in options) {
for (var i=0; i < options.length; i++) {
var entry = options[i];
if (!entry) {
//separator?
@@ -11263,7 +11283,7 @@ LGraphNode.prototype.executeAction = function(action)
//entries
var num = 0;
for (var i in values) {
for (var i=0; i < values.length; i++) {
var name = values.constructor == Array ? values[i] : i;
if (name != null && name.constructor !== String) {
name = name.content === undefined ? String(name) : name.content;
@@ -11555,7 +11575,7 @@ LGraphNode.prototype.executeAction = function(action)
result.push(elements[i]);
}
for (var i in result) {
for (var i=0; i < result.length; i++) {
if (result[i].close) {
result[i].close();
} else if (result[i].parentNode) {
@@ -14241,7 +14261,7 @@ if (typeof exports != "undefined") {
if (typeof this.str == "string") {
var lines = this.str.split("\\n");
for (var i in lines) {
for (var i=0; i < lines.length; i++) {
ctx.fillText(
lines[i],
this.properties["align"] == "left" ? 15 : this.size[0] - 15,
@@ -14272,7 +14292,7 @@ if (typeof exports != "undefined") {
this.last_ctx.font =
this.properties["fontsize"] + "px " + this.properties["font"];
var max = 0;
for (var i in lines) {
for (var i=0; i < lines.length; i++) {
var w = this.last_ctx.measureText(lines[i]).width;
if (max < w) {
max = w;
@@ -17085,7 +17105,7 @@ if (typeof exports != "undefined") {
c[2] = Math.abs( Math.sin( 0.01 * reModular.getTime() * Math.PI) );
*/
for (var i in result) {
for (var i=0; i < result.length; i++) {
result[i] /= 255;
}

1394
build/litegraph.min.js vendored Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

38
src/litegraph.js
View File

@@ -197,6 +197,24 @@
if (prev && LiteGraph.onNodeTypeReplaced) {
LiteGraph.onNodeTypeReplaced(type, base_class, prev);
}
//warnings
if (base_class.prototype.onPropertyChange) {
console.warn(
"LiteGraph node class " +
type +
" 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;
}
}
},
/**
@@ -428,14 +446,14 @@
var tmp = document.getElementsByTagName("script");
//weird, this array changes by its own, so we use a copy
var script_files = [];
for (var i in tmp) {
for (var i=0; i < tmp.length; i++) {
script_files.push(tmp[i]);
}
var docHeadObj = document.getElementsByTagName("head")[0];
folder_wildcard = document.location.href + folder_wildcard;
for (var i in script_files) {
for (var i=0; i < script_files.length; i++) {
var src = script_files[i].src;
if (
!src ||
@@ -1967,8 +1985,8 @@
"weird LLink bug, link info is not a LLink but a regular object"
);
var link2 = new LLink();
for (var i in link) {
link2[i] = link[i];
for (var j in link) {
link2[j] = link[j];
}
this.links[i] = link2;
link = link2;
@@ -9139,7 +9157,7 @@ LGraphNode.prototype.executeAction = function(action)
var values = LiteGraph.getNodeTypesCategories( canvas.filter || graph.filter );
var entries = [];
for (var i in values) {
for (var i=0; i < values.length; i++) {
if (values[i]) {
var name = values[i];
if(name.indexOf("::") != -1) //in case it has a namespace like "shader::math/rand" it hides the namespace
@@ -9155,7 +9173,7 @@ LGraphNode.prototype.executeAction = function(action)
var category = v.value;
var node_types = LiteGraph.getNodeTypesInCategory( category, canvas.filter || graph.filter );
var values = [];
for (var i in node_types) {
for (var i=0; i < node_types.length; i++) {
if (!node_types[i].skip_list) {
values.push({
content: node_types[i].title,
@@ -9210,7 +9228,7 @@ LGraphNode.prototype.executeAction = function(action)
var entries = [];
if (options) {
for (var i in options) {
for (var i=0; i < options.length; i++) {
var entry = options[i];
if (!entry) {
entries.push(null);
@@ -9290,7 +9308,7 @@ LGraphNode.prototype.executeAction = function(action)
var entries = [];
if (options) {
for (var i in options) {
for (var i=0; i < options.length; i++) {
var entry = options[i];
if (!entry) {
//separator?
@@ -11263,7 +11281,7 @@ LGraphNode.prototype.executeAction = function(action)
//entries
var num = 0;
for (var i in values) {
for (var i=0; i < values.length; i++) {
var name = values.constructor == Array ? values[i] : i;
if (name != null && name.constructor !== String) {
name = name.content === undefined ? String(name) : name.content;
@@ -11555,7 +11573,7 @@ LGraphNode.prototype.executeAction = function(action)
result.push(elements[i]);
}
for (var i in result) {
for (var i=0; i < result.length; i++) {
if (result[i].close) {
result[i].close();
} else if (result[i].parentNode) {

2
src/nodes/graphics.js
View File

@@ -238,7 +238,7 @@
c[2] = Math.abs( Math.sin( 0.01 * reModular.getTime() * Math.PI) );
*/
for (var i in result) {
for (var i=0; i < result.length; i++) {
result[i] /= 255;
}

4
src/nodes/interface.js
View File

@@ -673,7 +673,7 @@
if (typeof this.str == "string") {
var lines = this.str.split("\\n");
for (var i in lines) {
for (var i=0; i < lines.length; i++) {
ctx.fillText(
lines[i],
this.properties["align"] == "left" ? 15 : this.size[0] - 15,
@@ -704,7 +704,7 @@
this.last_ctx.font =
this.properties["fontsize"] + "px " + this.properties["font"];
var max = 0;
for (var i in lines) {
for (var i=0; i < lines.length; i++) {
var w = this.last_ctx.measureText(lines[i]).width;
if (max < w) {
max = w;

2
utils/server.js
View File

@@ -7,4 +7,4 @@ app.use('/external', express.static('external'))
app.use('/demo', express.static('demo'))
app.use('/', express.static('demo'))
app.listen(80, () => console.log('Example app listening on port 80!'))
app.listen(8000, () => console.log('Example app listening on port 8000!'))