diff --git a/css/litegraph.css b/css/litegraph.css
index 80a203ad4..6dff5e628 100755
--- a/css/litegraph.css
+++ b/css/litegraph.css
@@ -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,
diff --git a/editor/js/demos.js b/editor/js/demos.js
index f09631c14..518d1c4db 100644
--- a/editor/js/demos.js
+++ b/editor/js/demos.js
@@ -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"} );
diff --git a/index.html b/index.html
index 7cd65d98d..f46847f37 100755
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@ Usage
Example of editor
Documentation
diff --git a/package.json b/package.json
index 60ebc934b..8d70be04e 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts
index 4f2a875d4..9d3d37c02 100644
--- a/src/litegraph.d.ts
+++ b/src/litegraph.d.ts
@@ -740,7 +740,7 @@ export declare class LGraphNode {
name: string,
type: string | -1,
extra_info?: Partial
- ): 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
- ): 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;
/**
diff --git a/src/litegraph.js b/src/litegraph.js
index 4404dbc36..431180e6e 100755
--- a/src/litegraph.js
+++ b/src/litegraph.js
@@ -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 =
- "";
+ dialog.innerHTML = "";
+ //dialog.innerHTML = "";
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 =
- " ";
+ if(multiline)
+ dialog.innerHTML = " ";
+ else
+ dialog.innerHTML = " ";
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);
}
diff --git a/src/nodes/base.js b/src/nodes/base.js
index 51414c016..5be256750 100755
--- a/src/nodes/base.js
+++ b/src/nodes/base.js
@@ -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];
}
diff --git a/src/nodes/strings.js b/src/nodes/strings.js
index d6dd9d13f..c39173465 100644
--- a/src/nodes/strings.js
+++ b/src/nodes/strings.js
@@ -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;