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

Merging with (the)Master and nodeWebcam_Fix

Browse Source
This commit is contained in:
atlasan
2021-01-05 21:39:08 +01:00
parent b91263cf72
commit ef67b4cf9c
8 changed files with 149 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/litegraph.css
View File

@@ -509,7 +509,7 @@
position: absolute;
top: 10px;
left: 10px;
min-height: 2em;
/*min-height: 2em;*/
background-color: #333;
font-size: 1.2em;
box-shadow: 0 0 10px black !important;
@@ -529,6 +529,7 @@
}
.graphdialog input,
.graphdialog textarea,
.graphdialog select {
margin: 3px;
min-width: 60px;
@@ -540,9 +541,15 @@
outline: none;
}
.graphdialog textarea {
min-height: 150px;
}
.graphdialog button {
margin-top: 3px;
vertical-align: top;
background-color: #999;
border: 0;
}
.graphdialog button.rounded,

1
editor/js/demos.js
View File

@@ -89,6 +89,7 @@ function TestWidgetsNode()
this.number = this.addWidget("number","Number", 0.5, function(v){}, { min: 0, max: 100} );
this.combo = this.addWidget("combo","Combo", "red", function(v){}, { values:["red","green","blue"]} );
this.text = this.addWidget("text","Text", "edit me", function(v){}, {} );
this.text2 = this.addWidget("text","Text", "multiline", function(v){}, { multiline:true } );
this.toggle = this.addWidget("toggle","Toggle", true, function(v){}, { on: "enabled", off:"disabled"} );
this.button = this.addWidget("button","Button", null, function(v){}, {} );
this.toggle2 = this.addWidget("toggle","Disabled", true, function(v){}, { on: "enabled", off:"disabled"} );

2
index.html
View File

@@ -71,7 +71,7 @@ graph.start();</pre>
<h2>Example of editor</h2>
<ul>
<li><a href="demo">Module editor</a></li>
<li><a href="editor">Module editor</a></li>
</ul>
<h2>Documentation</h2>

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "litegraph.js",
"version": "0.7.8",
"version": "0.7.9",
"description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
"main": "build/litegraph.js",
"types": "src/litegraph.d.ts",

31
src/litegraph.d.ts vendored
View File

@@ -740,7 +740,7 @@ export declare class LGraphNode {
name: string,
type: string | -1,
extra_info?: Partial<INodeOutputSlot>
): void;
): INodeOutputSlot;
/**
* add a new output slot to use in this node
* @param array of triplets like [[name,type,extra_info],[...]]
@@ -760,7 +760,7 @@ export declare class LGraphNode {
name: string,
type: string | -1,
extra_info?: Partial<INodeInputSlot>
): void;
): INodeInputSlot;
/**
* add several new input slots in this node
* @param array of triplets like [[name,type,extra_info],[...]]
@@ -953,13 +953,34 @@ export declare class LGraphNode {
/**
* if returns false the incoming connection will be canceled
* Called by `LGraph.connect`
* @param inputIndex target input slot number
* @param outputType type of output slot
* @param outputSlot output slot object
* @param outputNode node containing the output
* @param outputIndex index of output slot
*/
onConnectInput?(
inputIndex: number,
type: INodeOutputSlot["type"],
outputType: INodeOutputSlot["type"],
outputSlot: INodeOutputSlot,
_this: this,
slotIndex: number
outputNode: LGraphNode,
outputIndex: number
): boolean;
/**
* if returns false the incoming connection will be canceled
* Called by `LGraph.connect`
* @param outputIndex target output slot number
* @param inputType type of input slot
* @param inputSlot input slot object
* @param inputNode node containing the input
* @param inputIndex index of input slot
*/
onConnectOutput?(
outputIndex: number,
inputType: INodeInputSlot["type"],
inputSlot: INodeInputSlot,
inputNode: LGraphNode,
inputIndex: number
): boolean;
/**

40
src/litegraph.js
View File

@@ -1365,6 +1365,8 @@
return;
} //cannot be removed
this.beforeChange(); //sure?
//disconnect inputs
if (node.inputs) {
for (var i = 0; i < node.inputs.length; i++) {
@@ -1423,6 +1425,7 @@
this.sendActionToCanvas("checkPanels");
this.setDirtyCanvas(true, true);
this.afterChange(); //sure?
this.change();
this.updateExecutionOrder();
@@ -8622,6 +8625,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.strokeStyle = outline_color;
ctx.fillStyle = "#222";
ctx.textAlign = "left";
//ctx.lineWidth = 2;
if(w.disabled)
ctx.globalAlpha *= 0.5;
var widget_width = w.width || width;
@@ -8769,13 +8773,15 @@ LGraphNode.prototype.executeAction = function(action)
else
ctx.rect( margin, posY, widget_width - margin * 2, H );
ctx.fill();
if (show_text) {
ctx.save();
if (show_text) {
if(!w.disabled)
ctx.stroke();
ctx.save();
ctx.beginPath();
ctx.rect(margin, posY, widget_width - margin * 2, H);
ctx.clip();
ctx.stroke();
//ctx.stroke();
ctx.fillStyle = secondary_text_color;
if (w.name != null) {
ctx.fillText(w.name, margin * 2, y + H * 0.7);
@@ -8850,10 +8856,8 @@ LGraphNode.prototype.executeAction = function(action)
break;
case "slider":
var range = w.options.max - w.options.min;
var nvalue = Math.clamp((x - 10) / (widget_width - 20), 0, 1);
w.value =
w.options.min +
(w.options.max - w.options.min) * nvalue;
var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
if (w.callback) {
setTimeout(function() {
inner_value_change(w, w.value);
@@ -8963,7 +8967,7 @@ LGraphNode.prototype.executeAction = function(action)
this.value = v;
inner_value_change(this, v);
}.bind(w),
event);
event,w.options ? w.options.multiline : false );
}
break;
default:
@@ -9550,18 +9554,18 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog";
dialog.innerHTML =
"<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
dialog.innerHTML = "<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
//dialog.innerHTML = "<span class='name'></span><textarea autofocus class='value'></textarea><button>OK</button>";
var title = dialog.querySelector(".name");
title.innerText = property;
var input = dialog.querySelector("input");
var input = dialog.querySelector(".value");
if (input) {
input.value = value;
input.addEventListener("blur", function(e) {
this.focus();
});
input.addEventListener("keydown", function(e) {
if (e.keyCode != 13) {
if (e.keyCode != 13 && e.target.localName != "textarea") {
return;
}
inner();
@@ -9611,7 +9615,7 @@ LGraphNode.prototype.executeAction = function(action)
}
};
LGraphCanvas.prototype.prompt = function(title, value, callback, event) {
LGraphCanvas.prototype.prompt = function(title, value, callback, event, multiline) {
var that = this;
var input_html = "";
title = title || "";
@@ -9620,8 +9624,10 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog rounded";
dialog.innerHTML =
"<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
if(multiline)
dialog.innerHTML = "<span class='name'></span> <textarea autofocus class='value'></textarea><button class='rounded'>OK</button>";
else
dialog.innerHTML = "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
dialog.close = function() {
that.prompt_box = null;
if (dialog.parentNode) {
@@ -9653,13 +9659,13 @@ LGraphNode.prototype.executeAction = function(action)
var value_element = dialog.querySelector(".value");
value_element.value = value;
var input = dialog.querySelector("input");
var input = value_element;
input.addEventListener("keydown", function(e) {
modified = true;
if (e.keyCode == 27) {
//ESC
dialog.close();
} else if (e.keyCode == 13) {
} else if (e.keyCode == 13 && e.target.localName != "textarea") {
if (callback) {
callback(this.value);
}

89
src/nodes/base.js
View File

@@ -716,6 +716,21 @@
LiteGraph.registerNodeType("basic/string", ConstantString);
function ConstantObject() {
this.addOutput("obj", "object");
this.size = [120, 30];
this._object = {};
}
ConstantObject.title = "Const Object";
ConstantObject.desc = "Constant Object";
ConstantObject.prototype.onExecute = function() {
this.setOutputData(0, this._object);
};
LiteGraph.registerNodeType( "basic/object", ConstantObject );
function ConstantFile() {
this.addInput("url", "");
this.addOutput("", "");
@@ -851,14 +866,14 @@
//to store json objects
function ConstantArray() {
this._value = [];
this.addInput("", "");
this.addOutput("", "array");
this.addOutput("length", "number");
this.addProperty("value", "");
this.widget = this.addWidget("text","array","","value");
this.addProperty("value", "[]");
this.widget = this.addWidget("text","array",this.properties.value,"value");
this.widgets_up = true;
this.size = [140, 50];
this._value = null;
}
ConstantArray.title = "Const Array";
@@ -891,7 +906,7 @@
for(var i = 0; i < v.length; ++i)
this._value[i] = v[i];
}
this.setOutputData(0, this._value);
this.setOutputData(0, this._value );
this.setOutputData(1, this._value ? ( this._value.length || 0) : 0 );
};
@@ -899,6 +914,32 @@
LiteGraph.registerNodeType("basic/array", ConstantArray);
function SetArray()
{
this.addInput("arr", "array");
this.addInput("value", "");
this.addOutput("arr", "array");
this.properties = { index: 0 };
this.widget = this.addWidget("number","i",this.properties.index,"index");
}
SetArray.title = "Set Array";
SetArray.desc = "Sets index of array";
SetArray.prototype.onExecute = function() {
var arr = this.getInputData(0);
if(!arr)
return;
var v = this.getInputData(1);
if(v === undefined )
return;
if(this.properties.index)
arr[ Math.floor(this.properties.index) ] = v;
this.setOutputData(0,arr);
};
LiteGraph.registerNodeType("basic/set_array", SetArray );
function ArrayElement() {
this.addInput("array", "array,table,string");
this.addInput("index", "number");
@@ -921,8 +962,6 @@
LiteGraph.registerNodeType("basic/array[]", ArrayElement);
function TableElement() {
this.addInput("table", "table");
this.addInput("row", "number");
@@ -1010,10 +1049,38 @@
LiteGraph.registerNodeType("basic/object_keys", ObjectKeys);
function SetObject()
{
this.addInput("obj", "");
this.addInput("value", "");
this.addOutput("obj", "");
this.properties = { property: "" };
this.name_widget = this.addWidget("text","prop.",this.properties.property,"property");
}
SetObject.title = "Set Object";
SetObject.desc = "Adds propertiesrty to object";
SetObject.prototype.onExecute = function() {
var obj = this.getInputData(0);
if(!obj)
return;
var v = this.getInputData(1);
if(v === undefined )
return;
if(this.properties.property)
obj[ this.properties.property ] = v;
this.setOutputData(0,obj);
};
LiteGraph.registerNodeType("basic/set_object", SetObject );
function MergeObjects() {
this.addInput("A", "object");
this.addInput("B", "object");
this.addOutput("", "object");
this.addInput("A", "");
this.addInput("B", "");
this.addOutput("", "");
this._result = {};
var that = this;
this.addWidget("button","clear","",function(){
@@ -1281,9 +1348,7 @@
this.addProperty("msg", "");
this.addInput("", LiteGraph.EVENT);
var that = this;
this.widget = this.addWidget("text", "Text", "", function(v) {
that.properties.msg = v;
});
this.widget = this.addWidget("text", "Text", "", "msg");
this.widgets_up = true;
this.size = [200, 30];
}

13
src/nodes/strings.js
View File

@@ -3,10 +3,21 @@
var LiteGraph = global.LiteGraph;
function toString(a) {
if(a && a.constructor === Object)
{
try
{
return JSON.stringify(a);
}
catch (err)
{
return String(a);
}
}
return String(a);
}
LiteGraph.wrapFunctionAsNode("string/toString", compare, [""], "String");
LiteGraph.wrapFunctionAsNode("string/toString", toString, [""], "String");
function compare(a, b) {
return a == b;