Merging with (the)Master and nodeWebcam_Fix

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,

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"} );

index.html

@@ -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>

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",

src/litegraph.d.ts

@@ -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,
+        outputNode: LGraphNode,
-        slotIndex: number
+        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;
 
     /**

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) {
+	                if (show_text) {
-						ctx.save();
+						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);
+					var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
-					w.value =
+					w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
-						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 = "<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
-            "<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 =
+		if(multiline)
-            "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
+	        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);
                 }

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.addProperty("value", "[]");
-        this.widget = this.addWidget("text","array","","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("A", "");
-        this.addInput("B", "object");
+        this.addInput("B", "");
-        this.addOutput("", "object");
+        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) {
+        this.widget = this.addWidget("text", "Text", "", "msg");
-            that.properties.msg = v;
-        });
         this.widgets_up = true;
         this.size = [200, 30];
     }

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;