fixes in graph globals, default conection color changed, better doc

src/litegraph.js

@@ -98,7 +98,7 @@ var LiteGraph = global.LiteGraph = {
 			for(var i in LGraphNode.prototype)
 				if(!base_class.prototype[i])
 					base_class.prototype[i] = LGraphNode.prototype[i];
-		
+
 		Object.defineProperty( base_class.prototype, "shape",{
 			set: function(v) {
 				switch(v)
@@ -335,7 +335,7 @@ var LiteGraph = global.LiteGraph = {
 		if( !type_a ||  //generic output
 			!type_b || //generic input
 			type_a == type_b || //same type (is valid for triggers)
-			type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION ) 
+			type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION )
 				return true;
 
 		type_a = type_a.toLowerCase();
@@ -345,9 +345,9 @@ var LiteGraph = global.LiteGraph = {
 
 		var supported_types_a = type_a.split(",");
 		var supported_types_b = type_b.split(",");
-		for(var i = 0; i < supported_types_a.length; ++i) 
-			for(var j = 0; j < supported_types_b.length; ++j) 
-				if( supported_types_a[i] == supported_types_b[i] )
+		for(var i = 0; i < supported_types_a.length; ++i)
+			for(var j = 0; j < supported_types_b.length; ++j)
+				if( supported_types_a[i] == supported_types_b[j] )
 					return true;
 		return false;
 	}
@@ -438,7 +438,7 @@ LGraph.prototype.clear = function()
 
 	this.catch_errors = true;
 
-	//globals
+	//subgraph_data
 	this.global_inputs = {};
 	this.global_outputs = {};
 
@@ -1048,7 +1048,6 @@ LGraph.prototype.findNodesByTitle = function(title)
 * @param {Array} nodes_list a list with all the nodes to search from, by default is all the nodes in the graph
 * @return {Array} a list with all the nodes that intersect this coordinate
 */
-
 LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
 {
 	nodes_list = nodes_list || this._nodes;
@@ -1063,7 +1062,13 @@ LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
 
 // ********** GLOBALS *****************
 
-//Tell this graph has a global input of this type
+/**
+* Tell this graph it has a global graph input of this type
+* @method addGlobalInput
+* @param {String} name
+* @param {String} type
+* @param {*} value [optional]
+*/
 LGraph.prototype.addGlobalInput = function(name, type, value)
 {
 	this.global_inputs[name] = { name: name, type: type, value: value };
@@ -1075,7 +1080,12 @@ LGraph.prototype.addGlobalInput = function(name, type, value)
 		this.onGlobalsChange();
 }
 
-//assign a data to the global input
+/**
+* Assign a data to the global graph input
+* @method setGlobalInputData
+* @param {String} name
+* @param {*} data
+*/
 LGraph.prototype.setGlobalInputData = function(name, data)
 {
 	var input = this.global_inputs[name];
@@ -1084,7 +1094,21 @@ LGraph.prototype.setGlobalInputData = function(name, data)
 	input.value = data;
 }
 
-//assign a data to the global input
+/**
+* Assign a data to the global graph input (same as setGlobalInputData)
+* @method setInputData
+* @param {String} name
+* @param {*} data
+*/
+LGraph.prototype.setInputData = LGraph.prototype.setGlobalInputData;
+
+
+/**
+* Returns the current value of a global graph input
+* @method getGlobalInputData
+* @param {String} name
+* @return {*} the data
+*/
 LGraph.prototype.getGlobalInputData = function(name)
 {
 	var input = this.global_inputs[name];
@@ -1093,7 +1117,12 @@ LGraph.prototype.getGlobalInputData = function(name)
 	return input.value;
 }
 
-//rename the global input
+/**
+* Changes the name of a global graph input
+* @method renameGlobalInput
+* @param {String} old_name
+* @param {String} new_name
+*/
 LGraph.prototype.renameGlobalInput = function(old_name, name)
 {
 	if(name == old_name)
@@ -1118,6 +1147,12 @@ LGraph.prototype.renameGlobalInput = function(old_name, name)
 		this.onGlobalsChange();
 }
 
+/**
+* Changes the type of a global graph input
+* @method changeGlobalInputType
+* @param {String} name
+* @param {String} type
+*/
 LGraph.prototype.changeGlobalInputType = function(name, type)
 {
 	if(!this.global_inputs[name])
@@ -1131,6 +1166,12 @@ LGraph.prototype.changeGlobalInputType = function(name, type)
 		this.onGlobalInputTypeChanged(name, type);
 }
 
+/**
+* Removes a global graph input
+* @method removeGlobalInput
+* @param {String} name
+* @param {String} type
+*/
 LGraph.prototype.removeGlobalInput = function(name)
 {
 	if(!this.global_inputs[name])
@@ -1146,7 +1187,13 @@ LGraph.prototype.removeGlobalInput = function(name)
 	return true;
 }
 
-
+/**
+* Creates a global graph output
+* @method addGlobalOutput
+* @param {String} name
+* @param {String} type
+* @param {*} value
+*/
 LGraph.prototype.addGlobalOutput = function(name, type, value)
 {
 	this.global_outputs[name] = { name: name, type: type, value: value };
@@ -1158,7 +1205,12 @@ LGraph.prototype.addGlobalOutput = function(name, type, value)
 		this.onGlobalsChange();
 }
 
-//assign a data to the global output
+/**
+* Assign a data to the global output
+* @method setGlobalOutputData
+* @param {String} name
+* @param {String} value
+*/
 LGraph.prototype.setGlobalOutputData = function(name, value)
 {
 	var output = this.global_outputs[ name ];
@@ -1167,7 +1219,12 @@ LGraph.prototype.setGlobalOutputData = function(name, value)
 	output.value = value;
 }
 
-//assign a data to the global input
+/**
+* Returns the current value of a global graph output
+* @method getGlobalOutputData
+* @param {String} name
+* @return {*} the data
+*/
 LGraph.prototype.getGlobalOutputData = function(name)
 {
 	var output = this.global_outputs[name];
@@ -1176,8 +1233,21 @@ LGraph.prototype.getGlobalOutputData = function(name)
 	return output.value;
 }
 
+/**
+* Returns the current value of a global graph output (sames as getGlobalOutputData)
+* @method getOutputData
+* @param {String} name
+* @return {*} the data
+*/
+LGraph.prototype.getOutputData = LGraph.prototype.getGlobalOutputData;
 
-//rename the global output
+
+/**
+* Renames a global graph output
+* @method renameGlobalOutput
+* @param {String} old_name
+* @param {String} new_name
+*/
 LGraph.prototype.renameGlobalOutput = function(old_name, name)
 {
 	if(!this.global_outputs[old_name])
@@ -1199,6 +1269,12 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name)
 		this.onGlobalsChange();
 }
 
+/**
+* Changes the type of a global graph output
+* @method changeGlobalOutputType
+* @param {String} name
+* @param {String} type
+*/
 LGraph.prototype.changeGlobalOutputType = function(name, type)
 {
 	if(!this.global_outputs[name])
@@ -1212,6 +1288,11 @@ LGraph.prototype.changeGlobalOutputType = function(name, type)
 		this.onGlobalOutputTypeChanged(name, type);
 }
 
+/**
+* Removes a global graph output
+* @method removeGlobalOutput
+* @param {String} name
+*/
 LGraph.prototype.removeGlobalOutput = function(name)
 {
 	if(!this.global_outputs[name])
@@ -1226,39 +1307,6 @@ LGraph.prototype.removeGlobalOutput = function(name)
 	return true;
 }
 
-
-/**
-* Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that
-* can be easily accesed from the outside of the graph
-* @method setInputData
-* @param {String} name the name of the node
-* @param {*} value value to assign to this node
-*/
-
-LGraph.prototype.setInputData = function(name,value)
-{
-	var nodes = this.findNodesByTitle( name );
-	for(var i = 0, l = nodes.length; i < l; ++i)
-		nodes[i].setValue(value);
-}
-
-/**
-* Returns the value of the first node with this name. This is used to access global variables of the graph from the outside
-* @method setInputData
-* @param {String} name the name of the node
-* @return {*} value of the node
-*/
-
-LGraph.prototype.getOutputData = function(name)
-{
-	var n = this.findNodesByTitle(name);
-	if(n.length)
-		return m[0].getValue();
-	return null;
-}
-
-//This feature is not finished yet, is to create graphs where nodes are not executed unless a trigger message is received
-
 LGraph.prototype.triggerInput = function(name,value)
 {
 	var nodes = this.findNodesByTitle(name);
@@ -2807,6 +2855,12 @@ function LGraphCanvas( canvas, graph, options )
 	this.title_text_font = "bold 14px Arial";
 	this.inner_text_font = "normal 12px Arial";
 	this.default_link_color = "#AAC";
+	this.default_connection_color = {
+		input_off: "#AAB",
+		input_on: "#7F7",
+		output_off: "#AAB",
+		output_on: "#7F7"
+	};
 
 	this.highquality_render = true;
 	this.editor_alpha = 1; //used for transition
@@ -2824,6 +2878,7 @@ function LGraphCanvas( canvas, graph, options )
 	this.dragging_rectangle = null;
 
 	this.always_render_background = false;
+	this.render_canvas_area = true;
 	this.render_connections_shadows = false; //too much cpu
 	this.render_connections_border = true;
 	this.render_curved_connections = true;
@@ -3047,7 +3102,7 @@ LGraphCanvas.prototype.bindEvents = function()
 
 	var canvas = this.canvas;
 	var ref_window = this.getCanvasWindow();
-	var document = ref_window.document; //hack used when moving canvas between windows 
+	var document = ref_window.document; //hack used when moving canvas between windows
 
 	this._mousedown_callback = this.processMouseDown.bind(this);
 	this._mousewheel_callback = this.processMouseWheel.bind(this);
@@ -4537,8 +4592,10 @@ LGraphCanvas.prototype.drawBackCanvas = function()
 		//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);
 
 		//bg
-		ctx.strokeStyle = "#235";
-		ctx.strokeRect(0,0,canvas.width,canvas.height);
+		if (this.render_canvas_area) {
+			ctx.strokeStyle = "#235";
+			ctx.strokeRect(0,0,canvas.width,canvas.height);
+		}
 
 		if(this.render_connections_shadows)
 		{
@@ -4690,7 +4747,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
 				if ( this.connecting_node && LiteGraph.isValidConnection( slot.type && out_slot.type ) )
 					ctx.globalAlpha = 0.4 * editor_alpha;
 
-				ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
+				ctx.fillStyle = slot.link != null ? this.default_connection_color.input_on : this.default_connection_color.input_off;
 
 				var pos = node.getConnectionPos(true,i);
 				pos[0] -= node.pos[0];
@@ -4734,7 +4791,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
 				pos[0] -= node.pos[0];
 				pos[1] -= node.pos[1];
 
-				ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
+				ctx.fillStyle = slot.links && slot.links.length ? this.default_connection_color.output_on : this.default_connection_color.output_off;
 				ctx.beginPath();
 				//ctx.rect( node.size[0] - 14,i*14,10,10);
 
@@ -5927,7 +5984,7 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
 					if( slot_info )
 						slot_info.label = input.value;
 					that.setDirty(true);
-				}	
+				}
 				dialog.close();
 			});
 		}
@@ -6439,15 +6496,15 @@ LiteGraph.extendClass = function ( target, origin )
 		}
 }
 
-LiteGraph.getParameterNames = function(func) {  
+LiteGraph.getParameterNames = function(func) {
     return (func + '')
       .replace(/[/][/].*$/mg,'') // strip single-line comments
       .replace(/\s+/g, '') // strip white space
       .replace(/[/][*][^/*]*[*][/]/g, '') // strip multi-line comments  /**/
-      .split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters  
-      .replace(/=[^,]+/g, '') // strip any ES6 defaults  
+      .split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters
+      .replace(/=[^,]+/g, '') // strip any ES6 defaults
       .split(',').filter(Boolean); // split & filter [""]
-} 
+}
 
 if( typeof(window) != "undefined" && !window["requestAnimationFrame"] )
 {