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

I think I messed up the git again...

Browse Source
This commit is contained in:
tamat
2019-08-16 21:09:51 +02:00
parent 35773309fb
commit ea2a44ed97
10 changed files with 11727 additions and 9272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10490
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

2
demo/index.html
View File

@@ -27,7 +27,7 @@
<script type="text/javascript" src="../src/nodes/math3d.js"></script>
<script type="text/javascript" src="../src/nodes/strings.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/graphics.js"></script>
<script type="text/javascript" src="../src/nodes/geometry.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="../src/nodes/midi.js"></script>
<script type="text/javascript" src="../src/nodes/audio.js"></script>

16
demo/js/code.js
View File

@@ -13,7 +13,7 @@ window.onbeforeunload = function(){
//create scene selector
var elem = document.createElement("span");
elem.className = "selector";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button>";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button><button id='download'>Download</button>";
editor.tools.appendChild(elem);
var select = elem.querySelector("select");
select.addEventListener("change", function(e){
@@ -40,6 +40,20 @@ elem.querySelector("#load").addEventListener("click",function(){
console.log("loaded");
});
elem.querySelector("#download").addEventListener("click",function(){
var data = JSON.stringify( graph.serialize() );
var file = new Blob( [ data ] );
var url = URL.createObjectURL( file );
var element = document.createElement("a");
element.setAttribute('href', url);
element.setAttribute('download', "graph.JSON" );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
setTimeout( function(){ URL.revokeObjectURL( url ); }, 1000*60 ); //wait one minute to revoke url
});
function addDemo( name, url )
{
var option = document.createElement("option");

70
src/litegraph.js
View File

@@ -127,35 +127,41 @@
}
}
Object.defineProperty(base_class.prototype, "shape", {
set: function(v) {
switch (v) {
case "default":
delete this._shape;
break;
case "box":
this._shape = LiteGraph.BOX_SHAPE;
break;
case "round":
this._shape = LiteGraph.ROUND_SHAPE;
break;
case "circle":
this._shape = LiteGraph.CIRCLE_SHAPE;
break;
case "card":
this._shape = LiteGraph.CARD_SHAPE;
break;
default:
this._shape = v;
}
},
get: function(v) {
return this._shape;
},
enumerable: true
});
if( !Object.hasOwnProperty( base_class.prototype, "shape") )
{
Object.defineProperty(base_class.prototype, "shape", {
set: function(v) {
switch (v) {
case "default":
delete this._shape;
break;
case "box":
this._shape = LiteGraph.BOX_SHAPE;
break;
case "round":
this._shape = LiteGraph.ROUND_SHAPE;
break;
case "circle":
this._shape = LiteGraph.CIRCLE_SHAPE;
break;
case "card":
this._shape = LiteGraph.CARD_SHAPE;
break;
default:
this._shape = v;
}
},
get: function(v) {
return this._shape;
},
enumerable: true
});
}
var prev = this.registered_node_types[type];
if(prev)
console.log("replacing node type: " + type);
this.registered_node_types[type] = base_class;
if (base_class.constructor.name) {
this.Nodes[classname] = base_class;
@@ -176,6 +182,7 @@
);
}
//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) {
this.node_types_by_file_extension[
@@ -2330,9 +2337,13 @@
if (!this.properties) {
this.properties = {};
}
if( value === this.properties[name] )
return;
var prev_value = this.properties[name];
this.properties[name] = value;
if (this.onPropertyChanged) {
this.onPropertyChanged(name, value);
if( this.onPropertyChanged(name, value) === false ) //abort change
this.properties[name] = prev_value;
}
};
@@ -9825,6 +9836,9 @@ LGraphNode.prototype.executeAction = function(action)
extra: node
};
if(node)
options.title = node.type;
//check if mouse is in input
var slot = null;
if (node) {

194
src/nodes/base.js
View File

@@ -245,56 +245,17 @@
//Input for a subgraph
function GraphInput() {
this.addOutput("", "");
this.addOutput("", "number");
this.name_in_graph = "";
this.properties = {};
this.properties = {
name: "",
type: "number",
value: 0
};
var that = this;
Object.defineProperty(this.properties, "name", {
get: function() {
return that.name_in_graph;
},
set: function(v) {
if (v == "" || v == that.name_in_graph || v == "enabled") {
return;
}
if(that.graph)
{
if (that.name_in_graph) {
//already added
that.graph.renameInput(that.name_in_graph, v);
} else {
that.graph.addInput(v, that.properties.type);
}
} //what if not?!
that.name_widget.value = v;
that.name_in_graph = v;
},
enumerable: true
});
Object.defineProperty(this.properties, "type", {
get: function() {
return that.outputs[0].type;
},
set: function(v) {
if (v == "event") {
v = LiteGraph.EVENT;
}
that.outputs[0].type = v;
if (that.name_in_graph) {
//already added
that.graph.changeInputType(
that.name_in_graph,
that.outputs[0].type
);
}
that.type_widget.value = v;
},
enumerable: true
});
this.name_widget = this.addWidget(
"text",
"Name",
@@ -303,7 +264,7 @@
if (!v) {
return;
}
that.properties.name = v;
that.setProperty("name",v);
}
);
this.type_widget = this.addWidget(
@@ -311,18 +272,87 @@
"Type",
this.properties.type,
function(v) {
v = v || "";
that.properties.type = v;
that.setProperty("type",v);
}
);
this.value_widget = this.addWidget(
"number",
"Value",
this.properties.value,
function(v) {
that.setProperty("value",v);
}
);
this.widgets_up = true;
this.size = [180, 60];
this.size = [180, 90];
}
GraphInput.title = "Input";
GraphInput.desc = "Input of the graph";
GraphInput.prototype.onConfigure = function()
{
this.updateType();
}
GraphInput.prototype.updateType = function()
{
var type = this.properties.type;
this.type_widget.value = type;
if(type == "number")
{
this.value_widget.type = "number";
this.value_widget.value = 0;
}
else if(type == "bool")
{
this.value_widget.type = "toggle";
this.value_widget.value = true;
}
else if(type == "string")
{
this.value_widget.type = "text";
this.value_widget.value = "";
}
else
{
this.value_widget.type = null;
this.value_widget.value = null;
}
this.properties.value = this.value_widget.value;
}
GraphInput.prototype.onPropertyChanged = function(name,v)
{
if( name == "name" )
{
if (v == "" || v == this.name_in_graph || v == "enabled") {
return false;
}
if(this.graph)
{
if (this.name_in_graph) {
//already added
this.graph.renameInput( this.name_in_graph, v );
} else {
this.graph.addInput( v, this.properties.type );
}
} //what if not?!
this.name_widget.value = v;
this.name_in_graph = v;
}
else if( name == "type" )
{
v = v || "";
this.updateType(v);
}
else if( name == "value" )
{
}
}
GraphInput.prototype.getTitle = function() {
if (this.flags.collapsed) {
return this.properties.name;
@@ -338,15 +368,12 @@
GraphInput.prototype.onExecute = function() {
var name = this.properties.name;
//read from global input
var data = this.graph.inputs[name];
if (!data) {
return;
this.setOutputData(0, this.properties.value );
}
//put through output
this.setOutputData(0, data.value);
this.setOutputData(0, data.value === undefined ? this.properties.value : data.value);
};
GraphInput.prototype.onRemoved = function() {
@@ -685,6 +712,63 @@
LiteGraph.registerNodeType("basic/variable", Variable);
function DownloadData() {
this.size = [60, 30];
this.addInput("value", 0, { label: "" });
this.properties = { filename: "data.json" };
this.value = null;
var that = this;
this.addWidget("button","Download","", function(v){
if(!that.value)
return;
that.downloadAsFile();
});
}
DownloadData.title = "Download";
DownloadData.desc = "Download some data";
DownloadData.prototype.downloadAsFile = function()
{
if(this.value == null)
return;
var str = null;
if(this.value.constructor === String)
str = this.value;
else
str = JSON.stringify(this.value);
var file = new Blob([str]);
var url = URL.createObjectURL( file );
var element = document.createElement("a");
element.setAttribute('href', url);
element.setAttribute('download', this.properties.filename );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
setTimeout( function(){ URL.revokeObjectURL( url ); }, 1000*60 ); //wait one minute to revoke url
}
DownloadData.prototype.onExecute = function() {
if (this.inputs[0]) {
this.value = this.getInputData(0);
}
};
DownloadData.prototype.getTitle = function() {
if (this.flags.collapsed) {
return this.properties.filename;
}
return this.title;
};
LiteGraph.registerNodeType("basic/download", DownloadData);
//Watch a value in the editor
function Watch() {
this.size = [60, 30];

1014
src/nodes/geometry.js Normal file
View File

File diff suppressed because it is too large Load Diff

9184
src/nodes/gltextures.js
View File

File diff suppressed because it is too large Load Diff

5
src/nodes/graphics.js
View File

@@ -96,7 +96,7 @@
if (this.flags.collapsed) {
return;
}
if (this.img && this.size[0] > 5 && this.size[1] > 5) {
if (this.img && this.size[0] > 5 && this.size[1] > 5 && this.img.width) {
ctx.drawImage(this.img, 0, 0, this.size[0], this.size[1]);
}
};
@@ -150,6 +150,9 @@
that.boxcolor = "#9F9";
that.setDirtyCanvas(true);
};
this.img.onerror = function() {
console.log("error loading the image:" + url);
}
};
GraphicsImage.prototype.onWidget = function(e, widget) {

23
src/nodes/math.js
View File

@@ -494,6 +494,25 @@
LiteGraph.registerNodeType("math/scale", MathScale);
//Gate
function Gate() {
this.addInput("v","boolean");
this.addInput("A");
this.addInput("B");
this.addOutput("out");
}
Gate.title = "Gate";
Gate.desc = "if v is true, then outputs A, otherwise B";
Gate.prototype.onExecute = function() {
var v = this.getInputData(0);
this.setOutputData(0, this.getInputData( v ? 1 : 2 ));
};
LiteGraph.registerNodeType("math/gate", Gate);
//Math Average
function MathAverageFilter() {
this.addInput("in", "number");
@@ -784,7 +803,8 @@
function MathCondition() {
this.addInput("A", "number");
this.addInput("B", "number");
this.addOutput("out", "boolean");
this.addOutput("true", "boolean");
this.addOutput("false", "boolean");
this.addProperty("A", 1);
this.addProperty("B", 1);
this.addProperty("OP", ">", "enum", { values: MathCondition.values });
@@ -850,6 +870,7 @@
}
this.setOutputData(0, result);
this.setOutputData(1, !result);
};
LiteGraph.registerNodeType("math/condition", MathCondition);

1
utils/deploy_files.txt
View File

@@ -9,6 +9,7 @@
../src/nodes/logic.js
../src/nodes/graphics.js
../src/nodes/gltextures.js
../src/nodes/geometry.js
../src/nodes/glfx.js
../src/nodes/midi.js
../src/nodes/audio.js