support to subgraphs

2026-02-10 18:10:08 +00:00 · 2014-06-20 18:20:11 +02:00
parent 5991fb6b8b
commit 2e9b4a3f77
12 changed files with 1291 additions and 335 deletions
--- a/build/litegraph.js
+++ b/build/litegraph.js
@@ -286,7 +286,7 @@ LGraph.prototype.clear = function()
 	this.global_inputs = {};
 	this.global_outputs = {};

-	this.graph = {};
+	//this.graph = {};
 	this.debug = true;

 	this.change();
@@ -761,10 +761,18 @@ LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
 	return null;
 }

+// ********** GLOBALS *****************
+
 //Tell this graph has a global input of this type
 LGraph.prototype.addGlobalInput = function(name, type, value)
 {
-	this.global_inputs[name] = { type: type, value: value };
+	this.global_inputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalInputAdded)
+		this.onGlobalInputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global input
@@ -776,29 +784,117 @@ LGraph.prototype.setGlobalInputData = function(name, data)
 	input.value = data;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalInputData = function(name)
+{
+	var input = this.global_inputs[name];
+	if (!input)
+		return null;
+	return input.value;
+}
+
 //rename the global input
 LGraph.prototype.renameGlobalInput = function(old_name, name, data)
 {
+	if(!this.global_inputs[old_name])
+		return false;
+
+	if(this.global_inputs[name])
+	{
+		console.error("there is already one input with that name");
+		return false;
+	}
+
+	this.global_inputs[name] = this.global_inputs[old_name];
+	delete this.global_inputs[old_name];
+
+	if(this.onGlobalInputRenamed)
+		this.onGlobalInputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalInput = function(name)
+{
+	if(!this.global_inputs[name])
+		return false;
+
+	delete this.global_inputs[name];
+
+	if(this.onGlobalInputRemoved)
+		this.onGlobalInputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


 LGraph.prototype.addGlobalOutput = function(name, type, value)
 {
-	this.global_outputs[name] = { type: type, value: value };
+	this.global_outputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalOutputAdded)
+		this.onGlobalOutputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global output
-LGraph.prototype.setGlobalOutputData = function(name, data)
+LGraph.prototype.setGlobalOutputData = function(name, value)
 {
 	var output = this.global_outputs[ name ];
 	if (!output)
 		return;
-	output.value = data;
+	output.value = value;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalOutputData = function(name)
+{
+	var output = this.global_outputs[name];
+	if (!output)
+		return null;
+	return output.value;
+}
+
+
 //rename the global output
 LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
 {
+	if(!this.global_outputs[old_name])
+		return false;
+
+	if(this.global_outputs[name])
+	{
+		console.error("there is already one output with that name");
+		return false;
+	}
+
+	this.global_outputs[name] = this.global_outputs[old_name];
+	delete this.global_outputs[old_name];
+
+	if(this.onGlobalOutputRenamed)
+		this.onGlobalOutputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalOutput = function(name)
+{
+	if(!this.global_outputs[name])
+		return false;
+	delete this.global_outputs[name];
+
+	if(this.onGlobalOutputRemoved)
+		this.onGlobalOutputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


@@ -904,7 +1000,7 @@ LGraph.prototype.serialize = function()


 	var data = {
-		graph: this.graph,
+//		graph: this.graph,

 		iteration: this.iteration,
 		frame: this.frame,
@@ -1040,7 +1136,12 @@ LGraphNode.prototype.configure = function(info)
 		if(info[j] == null)
 			continue;
 		else if (typeof(info[j]) == 'object') //object
-			this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		{
+			if(this[j] && this[j].configure)
+				this[j].configure( info[j] );
+			else
+				this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		}
 		else //value
 			this[j] = info[j];
 	}
@@ -1113,6 +1214,36 @@ LGraphNode.prototype.serialize = function()
 	return o;
 }

+
+/* Creates a clone of this node */
+LGraphNode.prototype.clone = function()
+{
+	var node = LiteGraph.createNode(this.type);
+
+	var data = this.serialize();
+	delete data["id"];
+	node.configure(data);
+
+	/*
+	node.size = this.size.concat();
+	if(this.inputs)
+		for(var i = 0, l = this.inputs.length; i < l; ++i)
+		{
+			if(node.findInputSlot( this.inputs[i].name ) == -1)
+				node.addInput( this.inputs[i].name, this.inputs[i].type );
+		}
+
+	if(this.outputs)
+		for(var i = 0, l = this.outputs.length; i < l; ++i)
+		{
+			if(node.findOutputSlot( this.outputs[i].name ) == -1)
+				node.addOutput( this.outputs[i].name, this.outputs[i].type );
+		}
+	*/
+
+	return node;
+}
+
 //reduced version of objectivize: NOT FINISHED
 /*
 LGraphNode.prototype.reducedObjectivize = function()
@@ -1291,6 +1422,8 @@ LGraphNode.prototype.addOutput = function(name,type,extra_info)

 	if(!this.outputs) this.outputs = [];
 	this.outputs.push(o);
+	if(this.onOutputAdded)
+		this.onOutputAdded(o);
 	this.size = this.computeSize();
 }

@@ -1312,6 +1445,8 @@ LGraphNode.prototype.addOutputs = function(array)
 		if(!this.outputs)
 			this.outputs = [];
 		this.outputs.push(o);
+		if(this.onOutputAdded)
+			this.onOutputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1327,6 +1462,8 @@ LGraphNode.prototype.removeOutput = function(slot)
 	this.disconnectOutput(slot);
 	this.outputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onOutputRemoved)
+		this.onOutputRemoved(slot);
 }

 /**
@@ -1346,6 +1483,8 @@ LGraphNode.prototype.addInput = function(name,type,extra_info)
 	if(!this.inputs) this.inputs = [];
 	this.inputs.push(o);
 	this.size = this.computeSize();
+	if(this.onInputAdded)
+		this.onInputAdded(o);
 }

 /**
@@ -1366,6 +1505,8 @@ LGraphNode.prototype.addInputs = function(array)
 		if(!this.inputs)
 			this.inputs = [];
 		this.inputs.push(o);
+		if(this.onInputAdded)
+			this.onInputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1381,6 +1522,8 @@ LGraphNode.prototype.removeInput = function(slot)
 	this.disconnectInput(slot);
 	this.inputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onInputRemoved)
+		this.onInputRemoved(slot);
 }

 /**
@@ -1723,29 +1866,6 @@ LGraphNode.prototype.alignToGrid = function()
 	this.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE);
 }

-/* Creates a clone of this node */
-LGraphNode.prototype.clone = function()
-{
-	var node = LiteGraph.createNode(this.type);
-
-	node.size = this.size.concat();
-	if(this.inputs)
-		for(var i = 0, l = this.inputs.length; i < l; ++i)
-		{
-			if(node.findInputSlot( this.inputs[i].name ) == -1)
-				node.addInput( this.inputs[i].name, this.inputs[i].type );
-		}
-
-	if(this.outputs)
-		for(var i = 0, l = this.outputs.length; i < l; ++i)
-		{
-			if(node.findOutputSlot( this.outputs[i].name ) == -1)
-				node.addOutput( this.outputs[i].name, this.outputs[i].type );
-		}
-
-
-	return node;
-}

 /* Console output */
 LGraphNode.prototype.trace = function(msg)
@@ -1968,7 +2088,7 @@ LGraphCanvas.prototype.clear = function()
 * assigns a graph, you can reasign graphs to the same canvas
 *
 * @method setGraph
-* @param {LGraph} assigns a graph
+* @param {LGraph} graph
 */
 LGraphCanvas.prototype.setGraph = function(graph)
 {
@@ -1992,6 +2112,48 @@ LGraphCanvas.prototype.setGraph = function(graph)
 	this.setDirty(true,true);
 }

+/**
+* opens a graph contained inside a node in the current graph
+*
+* @method openSubgraph
+* @param {LGraph} graph
+*/
+LGraphCanvas.prototype.openSubgraph = function(graph)
+{
+	if(!graph) 
+		throw("graph cannot be null");
+
+	if(this.graph == graph)
+		throw("graph cannot be the same");
+
+	this.clear();
+
+	if(this.graph)
+	{
+		if(!this._graph_stack)
+			this._graph_stack = [];
+		this._graph_stack.push(this.graph);
+	}
+
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
+/**
+* closes a subgraph contained inside a node 
+*
+* @method closeSubgraph
+* @param {LGraph} assigns a graph
+*/
+LGraphCanvas.prototype.closeSubgraph = function()
+{
+	if(!this._graph_stack || this._graph_stack.length == 0)
+		return;
+	var graph = this._graph_stack.pop();
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
 /**
 * assigns a canvas
 *
@@ -3895,32 +4057,59 @@ LGraphCanvas.node_colors = {

 LGraphCanvas.prototype.getCanvasMenuOptions = function()
 {
-	return [
-		{content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd }
-		//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
-	];
+	var options = null;
+	if(this.getMenuOptions)
+		options = this.getMenuOptions();
+	else
+	{
+		options = [
+			{content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd }
+			//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
+		];
+
+		if(this._graph_stack)
+			options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options);
+	}
+
+	if(this.getExtraMenuOptions)
+	{
+		var extra = this.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	return options;
 }

 LGraphCanvas.prototype.getNodeMenuOptions = function(node)
 {
-	var options = [
-		{content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
-		{content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
-		null,
-		{content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse },
-		{content:"Pin", callback: LGraphCanvas.onMenuNodePin },
-		{content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
-		{content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
-		null,
-		{content:"Clone", callback: LGraphCanvas.onMenuNodeClone },
-		null,
-		{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove }
-	];
+	var options = null;

-	if( node.clonable == false )
-		options[7].disabled = true;
-	if( node.removable == false )
-		options[9].disabled = true;
+	if(node.getMenuOptions)
+		options = node.getMenuOptions(this);
+	else
+		options = [
+			{content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
+			{content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
+			null,
+			{content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse },
+			{content:"Pin", callback: LGraphCanvas.onMenuNodePin },
+			{content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
+			{content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
+			null
+		];
+
+	if(node.getExtraMenuOptions)
+	{
+		var extra = node.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	if( node.clonable !== false )
+			options.push({content:"Clone", callback: LGraphCanvas.onMenuNodeClone });
+	if( node.removable !== false )
+			options.push(null,{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove });

 	if(node.onGetInputs)
 	{
@@ -4273,15 +4462,32 @@ if( !window["requestAnimationFrame"] )
 //Input for a subgraph
 function GlobalInput()
 {
+	this.title = "Input";
+
+	//random name to avoid problems with other outputs when added
+	var genname = "input_" + (Math.random()*1000).toFixed();
+	this.properties = { name: genname, type: "number" };
 	this.addOutput("value",0);
 }

+GlobalInput.title = "Input";
+GlobalInput.desc = "Input of the graph";
+
+GlobalInput.prototype.onAdded = function()
+{
+	this.graph.addGlobalInput( this.properties.name, this.properties.type );
+}
+
 GlobalInput.prototype.onExecute = function()
 {
-	var name = this.title;
-	//read input
-	var	value = node.graph.global_inputs[name];
-	this.setOutputData(0,value);
+	var name = this.properties.name;
+
+	//read from global input
+	var	data = this.graph.global_inputs[name];
+	if(!data) return;
+
+	//put through output
+	this.setOutputData(0,data.value);
 }

 LiteGraph.registerNodeType("graph/input", GlobalInput);
@@ -4293,11 +4499,14 @@ function GlobalOutput()
 	this.title = "Output";

 	//random name to avoid problems with other outputs when added
-	var genname = "input_" + (Math.random()*1000).toFixed();
+	var genname = "output_" + (Math.random()*1000).toFixed();
 	this.properties = { name: genname, type: "number" };
 	this.addInput("value","number");
 }

+GlobalOutput.title = "Ouput";
+GlobalOutput.desc = "Output of the graph";
+
 GlobalOutput.prototype.onAdded = function()
 {
 	var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type );
@@ -4305,8 +4514,7 @@ GlobalOutput.prototype.onAdded = function()

 GlobalOutput.prototype.onExecute = function()
 {
-	var	value = this.getInputData(0);
-	this.graph.setGlobalOutputData( this.properties.name, value );
+	this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) );
 }

 LiteGraph.registerNodeType("graph/output", GlobalOutput);
@@ -4315,29 +4523,77 @@ LiteGraph.registerNodeType("graph/output", GlobalOutput);
 //Subgraph: a node that contains a graph
 function Subgraph()
 {
+	var that = this;
 	this.subgraph = new LGraph();
+	this.subgraph._subgraph_node = this;
+	this.subgraph._is_subgraph = true;
+	this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this);
+	this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this);
+
 	this.bgcolor = "#FA3";
 }

+Subgraph.title = "Subgraph";
+Subgraph.desc = "Graph inside a node";
+
+Subgraph.prototype.onSubgraphNewGlobalInput = function(name, type)
+{
+	this.addInput(name, type);
+}
+
+Subgraph.prototype.onSubgraphNewGlobalOutput = function(name, type)
+{
+	this.addOutput(name, type);
+}
+
+Subgraph.prototype.getExtraMenuOptions = function(graphcanvas)
+{
+	var that = this;
+	return [ {content:"Open", callback: 
+		function() { 
+			graphcanvas.openSubgraph( that.subgraph );
+		}
+	}];
+}
+
 Subgraph.prototype.onExecute = function()
 {
 	//send inputs to subgraph global inputs
-	for(var i in this.inputs)
-	{
-		var input = this.inputs[i];
+	if(this.inputs)
+		for(var i = 0; i < this.inputs.length; i++)
+		{
+			var input = this.inputs[i];
+			var value = this.getInputData(i);
+			this.subgraph.setGlobalInputData( input.name, value );
+		}

-		//this.subgraph.setGlobalInputData( input.name, input.value );
-	}
+	//execute
+	this.subgraph.runStep();

 	//send subgraph global outputs to outputs
+	if(this.outputs)
+		for(var i = 0; i < this.outputs.length; i++)
+		{
+			var output = this.outputs[i];
+			var value = this.subgraph.getGlobalOutputData( output.name );
+			this.setOutputData(i, value);
+		}
 }

 Subgraph.prototype.configure = function(o)
 {
-	LGraph.prototype.configure.call(this, o);
-	//after configure, ...
+	LGraphNode.prototype.configure.call(this, o);
+	//this.subgraph.configure(o.graph);
 }

+Subgraph.prototype.serialize = function()
+{
+	var data = LGraphNode.prototype.serialize.call(this);
+	data.subgraph = this.subgraph.serialize();
+	return data;
+}
+
+
 LiteGraph.registerNodeType("graph/subgraph", Subgraph);


@@ -4619,8 +4875,8 @@ LiteGraph.registerNodeType("network/network_callback",{

 	function WidgetKnob()
 	{
-		this.size = [64,84];
 		this.addOutput("",'number');
+		this.size = [64,84];
 		this.properties = {min:0,max:1,value:0.5,wcolor:"#7AF",size:50};
 	}

@@ -4658,12 +4914,14 @@ LiteGraph.registerNodeType("network/network_callback",{

 		ctx.restore();

-		ctx.font = "bold 16px Criticized,Tahoma";
-		ctx.fillStyle="rgba(100,100,100,0.8)";
-		ctx.textAlign = "center";
-
-		ctx.fillText(this.name.toUpperCase(), this.size[0] * 0.5, 18 );
-		ctx.textAlign = "left";
+		if(this.title)
+		{
+			ctx.font = "bold 16px Criticized,Tahoma";
+			ctx.fillStyle="rgba(100,100,100,0.8)";
+			ctx.textAlign = "center";
+			ctx.fillText(this.title.toUpperCase(), this.size[0] * 0.5, 18 );
+			ctx.textAlign = "left";
+		}
 	}

 	WidgetKnob.prototype.onDrawVectorKnob = function(ctx)
@@ -5377,6 +5635,7 @@ function MathClamp()

 MathClamp.title = "Clamp";
 MathClamp.desc = "Clamp number between min and max";
+MathClamp.filter = "shader";

 MathClamp.prototype.onExecute = function()
 {
@@ -5387,6 +5646,14 @@ MathClamp.prototype.onExecute = function()
 	this.setOutputData(0, v );
 }

+MathClamp.prototype.getCode = function(lang)
+{
+	var code = "";
+	if(this.isInputConnected(0))
+		code += "clamp({{0}}," + this.properties.min + "," + this.properties.max + ")";
+	return code;
+}
+
 LiteGraph.registerNodeType("math/clamp", MathClamp );


@@ -5426,7 +5693,7 @@ MathFloor.prototype.onExecute = function()
 {
 	var v = this.getInputData(0);
 	if(v == null) return;
-	this.setOutputData(0, v|1 );
+	this.setOutputData(0, Math.floor(v) );
 }

 LiteGraph.registerNodeType("math/floor", MathFloor );
@@ -5620,6 +5887,7 @@ function MathTrigonometry()

 MathTrigonometry.title = "Trigonometry";
 MathTrigonometry.desc = "Sin Cos Tan";
+MathTrigonometry.filter = "shader";

 MathTrigonometry.prototype.onExecute = function()
 {
--- a/build/litegraph.min.js
+++ b/build/litegraph.min.js
@@ -4,7 +4,7 @@ b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=
 !this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;
 LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}
 LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2;
-LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this._nodes=[];this._nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.global_inputs={};this.global_outputs={};this.graph={};this.debug=!0;this.change();this.sendActionToCanvas("clear")};
+LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this._nodes=[];this._nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.global_inputs={};this.global_outputs={};this.debug=!0;this.change();this.sendActionToCanvas("clear")};
 LGraph.prototype.attachCanvas=function(a){if(a.constructor!=LGraphCanvas)throw"attachCanvas expects a LGraphCanvas instance";a.graph&&a.graph!=this&&a.graph.detachCanvas(a);a.graph=this;this.list_of_graphcanvas||(this.list_of_graphcanvas=[]);this.list_of_graphcanvas.push(a)};LGraph.prototype.detachCanvas=function(a){var b=this.list_of_graphcanvas.indexOf(a);-1!=b&&(a.graph=null,this.list_of_graphcanvas.splice(b,1))};
 LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=LiteGraph.getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}};
 LGraph.prototype.stop=function(){if(this.status!=LGraph.STATUS_STOPPED){this.status=LGraph.STATUS_STOPPED;if(this.onStopEvent)this.onStopEvent();null!=this.execution_timer_id&&clearInterval(this.execution_timer_id);this.execution_timer_id=null;this.sendEventToAllNodes("onStop")}};
@@ -16,24 +16,30 @@ LGraph.prototype.sendEventToAllNodes=function(a,b){var c=this._nodes_in_order?th
 LGraph.prototype.add=function(a,b){if(a&&(-1==a.id||null==this._nodes_by_id[a.id])){if(this._nodes.length>=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes in a graph reached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this._nodes.push(a);this._nodes_by_id[a.id]=a;if(a.onAdded)a.onAdded();this.config.align_to_grid&&a.alignToGrid();b||this.updateExecutionOrder();if(this.onNodeAdded)this.onNodeAdded(a);this.setDirtyCanvas(!0);this.change();return a}};
 LGraph.prototype.remove=function(a){if(null!=this._nodes_by_id[a.id]&&!a.ignore_remove){if(a.inputs)for(var b=0;b<a.inputs.length;b++){var c=a.inputs[b];null!=c.link&&a.disconnectInput(b)}if(a.outputs)for(b=0;b<a.outputs.length;b++)c=a.outputs[b],null!=c.links&&c.links.length&&a.disconnectOutput(b);a.id=-1;if(a.onRemoved)a.onRemoved();a.graph=null;for(b in this.list_of_graphcanvas)c=this.list_of_graphcanvas[b],c.selected_nodes[a.id]&&delete c.selected_nodes[a.id],c.node_dragged==a&&(c.node_dragged=
 null);b=this._nodes.indexOf(a);-1!=b&&this._nodes.splice(b,1);delete this._nodes_by_id[a.id];if(this.onNodeRemoved)this.onNodeRemoved(a);this.setDirtyCanvas(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this._nodes_by_id[a]};LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].type==a&&b.push(this._nodes[c]);return b};
-LGraph.prototype.findNodesByTitle=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].title==a&&b.push(this._nodes[c]);return b};LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};LGraph.prototype.addGlobalInput=function(a,b,c){this.global_inputs[a]={type:b,value:c}};LGraph.prototype.setGlobalInputData=function(a,b){var c=this.global_inputs[a];c&&(c.value=b)};
-LGraph.prototype.renameGlobalInput=function(a,b,c){};LGraph.prototype.addGlobalOutput=function(a,b,c){this.global_outputs[a]={type:b,value:c}};LGraph.prototype.setGlobalOutputData=function(a,b){var c=this.global_outputs[a];c&&(c.value=b)};LGraph.prototype.renameGlobalOutput=function(a,b,c){};LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};
+LGraph.prototype.findNodesByTitle=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].title==a&&b.push(this._nodes[c]);return b};LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};LGraph.prototype.addGlobalInput=function(a,b,c){this.global_inputs[a]={name:a,type:b,value:c};if(this.onGlobalInputAdded)this.onGlobalInputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};
+LGraph.prototype.setGlobalInputData=function(a,b){var c=this.global_inputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalInputData=function(a){return(a=this.global_inputs[a])?a.value:null};
+LGraph.prototype.renameGlobalInput=function(a,b,c){if(!this.global_inputs[a])return!1;if(this.global_inputs[b])return console.error("there is already one input with that name"),!1;this.global_inputs[b]=this.global_inputs[a];delete this.global_inputs[a];if(this.onGlobalInputRenamed)this.onGlobalInputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};
+LGraph.prototype.removeGlobalInput=function(a){if(!this.global_inputs[a])return!1;delete this.global_inputs[a];if(this.onGlobalInputRemoved)this.onGlobalInputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};LGraph.prototype.addGlobalOutput=function(a,b,c){this.global_outputs[a]={name:a,type:b,value:c};if(this.onGlobalOutputAdded)this.onGlobalOutputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};
+LGraph.prototype.setGlobalOutputData=function(a,b){var c=this.global_outputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalOutputData=function(a){return(a=this.global_outputs[a])?a.value:null};
+LGraph.prototype.renameGlobalOutput=function(a,b,c){if(!this.global_outputs[a])return!1;if(this.global_outputs[b])return console.error("there is already one output with that name"),!1;this.global_outputs[b]=this.global_outputs[a];delete this.global_outputs[a];if(this.onGlobalOutputRenamed)this.onGlobalOutputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};
+LGraph.prototype.removeGlobalOutput=function(a){if(!this.global_outputs[a])return!1;delete this.global_outputs[a];if(this.onGlobalOutputRemoved)this.onGlobalOutputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};
 LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()};LGraph.prototype.isLive=function(){for(var a in this.list_of_graphcanvas)if(this.list_of_graphcanvas[a].live_mode)return!0;return!1};
 LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");this.sendActionToCanvas("setDirty",[!0,!0]);if(this.on_change)this.on_change(this)};LGraph.prototype.setDirtyCanvas=function(a,b){this.sendActionToCanvas("setDirty",[a,b])};
-LGraph.prototype.serialize=function(){var a=[],b;for(b in this._nodes)a.push(this._nodes[b].serialize());for(b in this.links)this.links[b].data=null;return{graph:this.graph,iteration:this.iteration,frame:this.frame,last_node_id:this.last_node_id,last_link_id:this.last_link_id,links:LiteGraph.cloneObject(this.links),config:this.config,nodes:a}};
+LGraph.prototype.serialize=function(){var a=[],b;for(b in this._nodes)a.push(this._nodes[b].serialize());for(b in this.links)this.links[b].data=null;return{iteration:this.iteration,frame:this.frame,last_node_id:this.last_node_id,last_link_id:this.last_link_id,links:LiteGraph.cloneObject(this.links),config:this.config,nodes:a}};
 LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.title);g?(g.id=f.id,this.add(g,!0),g.configure(f)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.updateExecutionOrder();this.setDirtyCanvas(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){};
 function LGraphNode(a){this.title=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.data=null;this.flags={}}
-LGraphNode.prototype.configure=function(a){for(var b in a)"console"!=b&&null!=a[b]&&(this[b]="object"==typeof a[b]?LiteGraph.cloneObject(a[b],this[b]):a[b]);for(var c in this.inputs){var d=this.inputs[c];d.link&&d.link.length&&(a=d.link,"object"==typeof a&&(d.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]}))}for(c in this.outputs)if(d=this.outputs[c],d.links&&0!=d.links.length)for(b in d.links)a=d.links[b],"object"==typeof a&&(d.links[b]=
-a[0])};
-LGraphNode.prototype.serialize=function(){var a={id:this.id,title:this.title,type:this.type,pos:this.pos,size:this.size,data:this.data,flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};this.properties&&(a.properties=LiteGraph.cloneObject(this.properties));a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);if(this.onSerialize)this.onSerialize(a);return a};
-LGraphNode.prototype.toString=function(){return JSON.stringify(this.serialize())};LGraphNode.prototype.getTitle=function(){return this.title||this.constructor.title};LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1<a&&a<this.outputs.length&&this.outputs[a]&&null!=this.outputs[a].links)for(var c=0;c<this.outputs[a].links.length;c++)this.graph.links[this.outputs[a].links[c]].data=b};
-LGraphNode.prototype.getInputData=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link?this.graph.links[this.inputs[a].link].data:null:null};LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link:null};LGraphNode.prototype.getInputInfo=function(a){return this.inputs?a<this.inputs.length?this.inputs[a]:null:null};
-LGraphNode.prototype.getOutputInfo=function(a){return this.outputs?a<this.outputs.length?this.outputs[a]:null:null};LGraphNode.prototype.isOutputConnected=function(a){return this.outputs?a<this.outputs.length&&this.outputs[a].links&&this.outputs[a].links.length:null};LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.outputs.length)return null;if(a<this.outputs.length){a=this.outputs[a];for(var b=[],c=0;c<a.length;c++)b.push(this.graph.getNodeById(a.links[c].target_id));return b}return null};
-LGraphNode.prototype.triggerOutput=function(a,b){var c=this.getOutputNode(a);if(c&&c.onTrigger)c.onTrigger(b)};LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);this.size=this.computeSize()};
-LGraphNode.prototype.addOutputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.outputs||(this.outputs=[]);this.outputs.push(d)}this.size=this.computeSize()};LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize()};
-LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize()};LGraphNode.prototype.addInputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.inputs||(this.inputs=[]);this.inputs.push(d)}this.size=this.computeSize()};
-LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);this.inputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};
-LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
+LGraphNode.prototype.configure=function(a){for(var b in a)"console"!=b&&null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);for(var c in this.inputs){var d=this.inputs[c];d.link&&d.link.length&&(a=d.link,"object"==typeof a&&(d.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]}))}for(c in this.outputs)if(d=this.outputs[c],d.links&&0!=d.links.length)for(b in d.links)a=
+d.links[b],"object"==typeof a&&(d.links[b]=a[0])};
+LGraphNode.prototype.serialize=function(){var a={id:this.id,title:this.title,type:this.type,pos:this.pos,size:this.size,data:this.data,flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};this.properties&&(a.properties=LiteGraph.cloneObject(this.properties));a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);if(this.onSerialize)this.onSerialize(a);
+return a};LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type),b=this.serialize();delete b.id;a.configure(b);return a};LGraphNode.prototype.toString=function(){return JSON.stringify(this.serialize())};LGraphNode.prototype.getTitle=function(){return this.title||this.constructor.title};
+LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1<a&&a<this.outputs.length&&this.outputs[a]&&null!=this.outputs[a].links)for(var c=0;c<this.outputs[a].links.length;c++)this.graph.links[this.outputs[a].links[c]].data=b};LGraphNode.prototype.getInputData=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link?this.graph.links[this.inputs[a].link].data:null:null};
+LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link:null};LGraphNode.prototype.getInputInfo=function(a){return this.inputs?a<this.inputs.length?this.inputs[a]:null:null};LGraphNode.prototype.getOutputInfo=function(a){return this.outputs?a<this.outputs.length?this.outputs[a]:null:null};LGraphNode.prototype.isOutputConnected=function(a){return this.outputs?a<this.outputs.length&&this.outputs[a].links&&this.outputs[a].links.length:null};
+LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.outputs.length)return null;if(a<this.outputs.length){a=this.outputs[a];for(var b=[],c=0;c<a.length;c++)b.push(this.graph.getNodeById(a.links[c].target_id));return b}return null};LGraphNode.prototype.triggerOutput=function(a,b){var c=this.getOutputNode(a);if(c&&c.onTrigger)c.onTrigger(b)};
+LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);if(this.onOutputAdded)this.onOutputAdded(a);this.size=this.computeSize()};LGraphNode.prototype.addOutputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.outputs||(this.outputs=[]);this.outputs.push(d);if(this.onOutputAdded)this.onOutputAdded(d)}this.size=this.computeSize()};
+LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize();if(this.onOutputRemoved)this.onOutputRemoved(a)};LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize();if(this.onInputAdded)this.onInputAdded(a)};
+LGraphNode.prototype.addInputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.inputs||(this.inputs=[]);this.inputs.push(d);if(this.onInputAdded)this.onInputAdded(d)}this.size=this.computeSize()};LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);this.inputs.splice(a,1);this.size=this.computeSize();if(this.onInputRemoved)this.onInputRemoved(a)};
+LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};
+LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
 LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph&&this.graph.isLive()?0:20;if(this.flags.collapsed){if(isInsideRectangle(a,b,this.pos[0],this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_COLLAPSED_WIDTH,LiteGraph.NODE_TITLE_HEIGHT))return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};
 LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
 LGraphNode.prototype.connect=function(a,b,c){c=c||0;if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&&
@@ -45,13 +51,13 @@ LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a
 0==a.links.length)return!1;for(var c=0,d=a.links.length;c<d;c++)if(b=a.links[c],b=this.graph.links[b],b.target_id==this.id){a.links.splice(c,1);break}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
 LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?a?[this.pos[0],this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:[this.pos[0]+LiteGraph.NODE_COLLAPSED_WIDTH,this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:
 a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};
-LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type);a.size=this.size.concat();if(this.inputs)for(var b=0,c=this.inputs.length;b<c;++b)-1==a.findInputSlot(this.inputs[b].name)&&a.addInput(this.inputs[b].name,this.inputs[b].type);if(this.outputs)for(b=0,c=this.outputs.length;b<c;++b)-1==a.findOutputSlot(this.outputs[b].name)&&a.addOutput(this.outputs[b].name,this.outputs[b].type);return a};
 LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.sendActionToCanvas("setDirty",[a,b])};LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
 LGraphNode.prototype.executeAction=function(a){if(""==a)return!1;if(-1!=a.indexOf(";")||-1!=a.indexOf("}"))return this.trace("Error: Action contains unsafe characters"),!1;var b=a.split("(")[0];if("function"!=typeof this[b])return this.trace("Error: Action not found on node: "+b),!1;try{b=eval,eval=null,(new Function("with(this) { "+a+"}")).call(this),eval=b}catch(c){return this.trace("Error executing action {"+a+"} :"+c),!1}return!0};
 LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null,this.graph.debug&&console.log(this.title+": Capturing input "+(a?"ON":"OFF"))}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};
 LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";b&&b.attachCanvas(this);this.setCanvas(a);this.clear();this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
 LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=
 null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){this.graph!=a&&(this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))};
+LGraphCanvas.prototype.openSubgraph=function(a){if(!a)throw"graph cannot be null";if(this.graph==a)throw"graph cannot be the same";this.clear();this.graph&&(this._graph_stack||(this._graph_stack=[]),this._graph_stack.push(this.graph));a.attachCanvas(this);this.setDirty(!0,!0)};LGraphCanvas.prototype.closeSubgraph=function(){this._graph_stack&&0!=this._graph_stack.length&&(this._graph_stack.pop().attachCanvas(this),this.setDirty(!0,!0))};
 LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;this.canvas.className+=" lgraphcanvas";this.canvas.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==this.canvas.getContext)throw"This browser doesnt support Canvas";
 this.ctx=this.canvas.getContext("2d");this.bgctx=this.bgcanvas.getContext("2d");this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);this.canvas.addEventListener("mousedown",this.processMouseDown.bind(this),!0);this.canvas.addEventListener("mousemove",this._mousemove_callback);this.canvas.addEventListener("contextmenu",function(a){a.preventDefault();return!1});this.canvas.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);
 this.canvas.addEventListener("DOMMouseScroll",this.processMouseWheel.bind(this),!1);this.canvas.addEventListener("touchstart",this.touchHandler,!0);this.canvas.addEventListener("touchmove",this.touchHandler,!0);this.canvas.addEventListener("touchend",this.touchHandler,!0);this.canvas.addEventListener("touchcancel",this.touchHandler,!0);this.canvas.addEventListener("keydown",function(a){b.processKeyDown(a)});this.canvas.addEventListener("keyup",function(a){b.processKeyUp(a)})}};
@@ -111,9 +117,10 @@ LGraphCanvas.onMenuNodeOutputs=function(a,b,c){function d(f){if(a){var e=f.value
 {event:b,callback:d,from:c})}return!1}};LGraphCanvas.onMenuNodeCollapse=function(a){a.flags.collapsed=!a.flags.collapsed;a.setDirtyCanvas(!0,!0)};LGraphCanvas.onMenuNodePin=function(a){a.pin()};
 LGraphCanvas.onMenuNodeColors=function(a,b,c){var d=[],e;for(e in LGraphCanvas.node_colors){var f=LGraphCanvas.node_colors[e];d.push({value:e,content:"<span style='display: block; color:"+f.color+"; background-color:"+f.bgcolor+"'>"+e+"</span>"})}LiteGraph.createContextualMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.setDirtyCanvas(!0))},from:c});return!1};
 LGraphCanvas.onMenuNodeShapes=function(a,b){LiteGraph.createContextualMenu(["box","round"],{event:b,callback:function(b){a&&(a.shape=b,a.setDirtyCanvas(!0))}});return!1};LGraphCanvas.onMenuNodeRemove=function(a){!1!=a.removable&&(a.graph.remove(a),a.setDirtyCanvas(!0,!0))};LGraphCanvas.onMenuNodeClone=function(a){if(!1!=a.clonable){var b=a.clone();b&&(b.pos=[a.pos[0]+5,a.pos[1]+5],a.graph.add(b),a.setDirtyCanvas(!0,!0))}};
-LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",bgcolor:"#4A4"},blue:{color:"#AAF",bgcolor:"#44A"},white:{color:"#FFF",bgcolor:"#AAA"}};LGraphCanvas.prototype.getCanvasMenuOptions=function(){return[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}]};
-LGraphCanvas.prototype.getNodeMenuOptions=function(a){var b=[{content:"Inputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeInputs},{content:"Outputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeOutputs},null,{content:"Collapse",callback:LGraphCanvas.onMenuNodeCollapse},{content:"Pin",callback:LGraphCanvas.onMenuNodePin},{content:"Colors",is_menu:!0,callback:LGraphCanvas.onMenuNodeColors},{content:"Shapes",is_menu:!0,callback:LGraphCanvas.onMenuNodeShapes},null,{content:"Clone",
-callback:LGraphCanvas.onMenuNodeClone},null,{content:"Remove",callback:LGraphCanvas.onMenuNodeRemove}];!1==a.clonable&&(b[7].disabled=!0);!1==a.removable&&(b[9].disabled=!0);if(a.onGetInputs){var c=a.onGetInputs();c&&c.length&&(b[0].disabled=!1)}a.onGetOutputs&&(a=a.onGetOutputs())&&a.length&&(b[1].disabled=!1);return b};
+LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",bgcolor:"#4A4"},blue:{color:"#AAF",bgcolor:"#44A"},white:{color:"#FFF",bgcolor:"#AAA"}};
+LGraphCanvas.prototype.getCanvasMenuOptions=function(){var a=null;this.getMenuOptions?a=this.getMenuOptions():(a=[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}],this._graph_stack&&(a=[{content:"Close subgraph",callback:this.closeSubgraph.bind(this)},null].concat(a)));if(this.getExtraMenuOptions){var b=this.getExtraMenuOptions(this);b.push(null);a=b.concat(a)}return a};
+LGraphCanvas.prototype.getNodeMenuOptions=function(a){var b=null,b=a.getMenuOptions?a.getMenuOptions(this):[{content:"Inputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeInputs},{content:"Outputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeOutputs},null,{content:"Collapse",callback:LGraphCanvas.onMenuNodeCollapse},{content:"Pin",callback:LGraphCanvas.onMenuNodePin},{content:"Colors",is_menu:!0,callback:LGraphCanvas.onMenuNodeColors},{content:"Shapes",is_menu:!0,callback:LGraphCanvas.onMenuNodeShapes},
+null];if(a.getExtraMenuOptions){var c=a.getExtraMenuOptions(this);c.push(null);b=c.concat(b)}!1!==a.clonable&&b.push({content:"Clone",callback:LGraphCanvas.onMenuNodeClone});!1!==a.removable&&b.push(null,{content:"Remove",callback:LGraphCanvas.onMenuNodeRemove});a.onGetInputs&&(c=a.onGetInputs())&&c.length&&(b[0].disabled=!1);a.onGetOutputs&&(a=a.onGetOutputs())&&a.length&&(b[1].disabled=!1);return b};
 LGraphCanvas.prototype.processContextualMenu=function(a,b){var c=this,d=this.getCanvasWindow(),e=LiteGraph.createContextualMenu(a?this.getNodeMenuOptions(a):this.getCanvasMenuOptions(),{event:b,callback:function(f,d){if(f&&f.callback)return f.callback(a,d,e,c,b)}},d)};
 CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e,f){void 0===e&&(e=5);void 0===f&&(f=e);this.beginPath();this.moveTo(a+e,b);this.lineTo(a+c-e,b);this.quadraticCurveTo(a+c,b,a+c,b+e);this.lineTo(a+c,b+d-f);this.quadraticCurveTo(a+c,b+d,a+c-f,b+d);this.lineTo(a+f,b+d);this.quadraticCurveTo(a,b+d,a,b+d-f);this.lineTo(a,b+e);this.quadraticCurveTo(a,b,a+e,b)};function compareObjects(a,b){for(var c in a)if(a[c]!=b[c])return!1;return!0}
 function distance(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]))}function colorToString(a){return"rgba("+Math.round(255*a[0]).toFixed()+","+Math.round(255*a[1]).toFixed()+","+Math.round(255*a[2]).toFixed()+","+(4==a.length?a[3].toFixed(2):"1.0")+")"}function isInsideRectangle(a,b,c,d,e,f){return c<a&&c+e>a&&d<b&&d+f>b?!0:!1}function growBounding(a,b,c){b<a[0]?a[0]=b:b>a[2]&&(a[2]=b);c<a[1]?a[1]=c:c>a[3]&&(a[3]=c)}
@@ -124,20 +131,23 @@ f.backgroundColor="#444";e.addEventListener("contextmenu",function(a){a.preventD
 d));e.appendChild(h)}e.addEventListener("mouseover",function(a){this.mouse_inside=!0});e.addEventListener("mouseout",function(a){for(a=a.toElement;a!=this&&a!=c.document;)a=a.parentNode;a!=this&&(this.mouse_inside=!1,this.block_close||this.closeMenu())});c.document.body.appendChild(e);a=e.getClientRects()[0];b.from&&(b.from.block_close=!0);h=b.left||0;g=b.top||0;b.event&&(h=b.event.pageX-10,g=b.event.pageY-10,b.left&&(h=b.left),f=c.document.body.getClientRects()[0],b.from&&(h=b.from.getClientRects()[0],
 h=h.left+h.width),h>f.width-a.width-10&&(h=f.width-a.width-10),g>f.height-a.height-10&&(g=f.height-a.height-10));e.style.left=h+"px";e.style.top=g+"px";e.closeMenu=function(){b.from&&(b.from.block_close=!1,b.from.mouse_inside||b.from.closeMenu());this.parentNode&&c.document.body.removeChild(this)};return e};LiteGraph.closeAllContextualMenus=function(){var a=document.querySelectorAll(".litecontextualmenu");if(a.length){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);for(c in b)b[c].parentNode&&b[c].parentNode.removeChild(b[c])}};
 LiteGraph.extendClass=function(a,b){for(var c in a)b[c]=a[c];if(a.prototype)for(c in a.prototype)b.prototype[c]=a.prototype[c]};window.requestAnimationFrame||(window.requestAnimationFrame=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)});
-(function(){function a(){this.addOutput("value",0)}function b(){this.title="Output";this.properties={name:"input_"+(1E3*Math.random()).toFixed(),type:"number"};this.addInput("value","number")}function c(){this.subgraph=new LGraph;this.bgcolor="#FA3"}function d(){this.addOutput("value","number");this.properties={value:1};this.editable={property:"value",type:"number"}}function e(){this.size=[60,20];this.addInput("value",0,{label:""});this.addOutput("value",0,{label:""});this.properties={value:""}}a.prototype.onExecute=
-function(){this.setOutputData(0,node.graph.global_inputs[this.title])};LiteGraph.registerNodeType("graph/input",a);b.prototype.onAdded=function(){this.graph.addGlobalOutput(this.properties.name,this.properties.type)};b.prototype.onExecute=function(){var a=this.getInputData(0);this.graph.setGlobalOutputData(this.properties.name,a)};LiteGraph.registerNodeType("graph/output",b);c.prototype.onExecute=function(){for(var a in this.inputs);};c.prototype.configure=function(a){LGraph.prototype.configure.call(this,
-a)};LiteGraph.registerNodeType("graph/subgraph",c);d.title="Const";d.desc="Constant value";d.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};d.prototype.onExecute=function(){this.setOutputData(0,parseFloat(this.properties.value))};d.prototype.onDrawBackground=function(a){this.outputs[0].label=this.properties.value.toFixed(3)};d.prototype.onWidget=function(a,b){"value"==b.name&&this.setValue(b.value)};LiteGraph.registerNodeType("basic/const",
-d);e.title="Watch";e.desc="Show value of input";e.prototype.onExecute=function(){this.properties.value=this.getInputData(0);this.setOutputData(0,this.properties.value)};e.prototype.onDrawBackground=function(a){this.inputs[0]&&null!=this.properties.value&&(this.inputs[0].label=this.properties.value.constructor===Number?this.properties.value.toFixed(3):this.properties.value)};LiteGraph.registerNodeType("basic/watch",e)})();
-(function(){function a(){this.size=[64,84];this.addOutput("","number");this.properties={min:0,max:1,value:0.5,wcolor:"#7AF",size:50}}function b(){this.size=[160,26];this.addOutput("","number");this.properties={wcolor:"#7AF",min:0,max:1,value:0.5}}function c(){this.size=[160,26];this.addInput("","number");this.properties={min:0,max:1,value:0,wcolor:"#AAF"}}function d(){this.addInputs("",0);this.properties={value:"...",font:"Arial",fontsize:18,color:"#AAA",align:"left",glowSize:0,decimals:1}}function e(){this.size=
+(function(){function a(){this.title="Input";this.properties={name:"input_"+(1E3*Math.random()).toFixed(),type:"number"};this.addOutput("value",0)}function b(){this.title="Output";this.properties={name:"output_"+(1E3*Math.random()).toFixed(),type:"number"};this.addInput("value","number")}function c(){this.subgraph=new LGraph;this.subgraph._subgraph_node=this;this.subgraph._is_subgraph=!0;this.subgraph.onGlobalInputAdded=this.onSubgraphNewGlobalInput.bind(this);this.subgraph.onGlobalOutputAdded=this.onSubgraphNewGlobalOutput.bind(this);
+this.bgcolor="#FA3"}function d(){this.addOutput("value","number");this.properties={value:1};this.editable={property:"value",type:"number"}}function e(){this.size=[60,20];this.addInput("value",0,{label:""});this.addOutput("value",0,{label:""});this.properties={value:""}}a.title="Input";a.desc="Input of the graph";a.prototype.onAdded=function(){this.graph.addGlobalInput(this.properties.name,this.properties.type)};a.prototype.onExecute=function(){var a=this.graph.global_inputs[this.properties.name];
+a&&this.setOutputData(0,a.value)};LiteGraph.registerNodeType("graph/input",a);b.title="Ouput";b.desc="Output of the graph";b.prototype.onAdded=function(){this.graph.addGlobalOutput(this.properties.name,this.properties.type)};b.prototype.onExecute=function(){this.graph.setGlobalOutputData(this.properties.name,this.getInputData(0))};LiteGraph.registerNodeType("graph/output",b);c.title="Subgraph";c.desc="Graph inside a node";c.prototype.onSubgraphNewGlobalInput=function(a,b){this.addInput(a,b)};c.prototype.onSubgraphNewGlobalOutput=
+function(a,b){this.addOutput(a,b)};c.prototype.getExtraMenuOptions=function(a){var b=this;return[{content:"Open",callback:function(){a.openSubgraph(b.subgraph)}}]};c.prototype.onExecute=function(){if(this.inputs)for(var a=0;a<this.inputs.length;a++){var b=this.inputs[a],c=this.getInputData(a);this.subgraph.setGlobalInputData(b.name,c)}this.subgraph.runStep();if(this.outputs)for(a=0;a<this.outputs.length;a++)c=this.subgraph.getGlobalOutputData(this.outputs[a].name),this.setOutputData(a,c)};c.prototype.configure=
+function(a){LGraphNode.prototype.configure.call(this,a)};c.prototype.serialize=function(){var a=LGraphNode.prototype.serialize.call(this);a.subgraph=this.subgraph.serialize();return a};LiteGraph.registerNodeType("graph/subgraph",c);d.title="Const";d.desc="Constant value";d.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};d.prototype.onExecute=function(){this.setOutputData(0,parseFloat(this.properties.value))};d.prototype.onDrawBackground=
+function(a){this.outputs[0].label=this.properties.value.toFixed(3)};d.prototype.onWidget=function(a,b){"value"==b.name&&this.setValue(b.value)};LiteGraph.registerNodeType("basic/const",d);e.title="Watch";e.desc="Show value of input";e.prototype.onExecute=function(){this.properties.value=this.getInputData(0);this.setOutputData(0,this.properties.value)};e.prototype.onDrawBackground=function(a){this.inputs[0]&&null!=this.properties.value&&(this.inputs[0].label=this.properties.value.constructor===Number?
+this.properties.value.toFixed(3):this.properties.value)};LiteGraph.registerNodeType("basic/watch",e)})();
+(function(){function a(){this.addOutput("","number");this.size=[64,84];this.properties={min:0,max:1,value:0.5,wcolor:"#7AF",size:50}}function b(){this.size=[160,26];this.addOutput("","number");this.properties={wcolor:"#7AF",min:0,max:1,value:0.5}}function c(){this.size=[160,26];this.addInput("","number");this.properties={min:0,max:1,value:0,wcolor:"#AAF"}}function d(){this.addInputs("",0);this.properties={value:"...",font:"Arial",fontsize:18,color:"#AAA",align:"left",glowSize:0,decimals:1}}function e(){this.size=
 [200,100];this.properties={borderColor:"#ffffff",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",shadowSize:2,borderRadius:3}}a.title="Knob";a.desc="Circular controller";a.widgets=[{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}];a.prototype.onAdded=function(){this.value=(this.properties.value-this.properties.min)/(this.properties.max-this.properties.min);this.imgbg=this.loadImage("imgs/knob_bg.png");this.imgfg=this.loadImage("imgs/knob_fg.png")};a.prototype.onDrawImageKnob=
-function(a){if(this.imgfg&&this.imgfg.width){var b=0.5*this.imgbg.width,c=this.size[0]/this.imgfg.width;a.save();a.translate(0,20);a.scale(c,c);a.drawImage(this.imgbg,0,0);a.translate(b,b);a.rotate(2*this.value*Math.PI*6/8+10*Math.PI/8);a.translate(-b,-b);a.drawImage(this.imgfg,0,0);a.restore();a.font="bold 16px Criticized,Tahoma";a.fillStyle="rgba(100,100,100,0.8)";a.textAlign="center";a.fillText(this.name.toUpperCase(),0.5*this.size[0],18);a.textAlign="left"}};a.prototype.onDrawVectorKnob=function(a){if(this.imgfg&&
-this.imgfg.width){a.lineWidth=1;a.strokeStyle=this.mouseOver?"#FFF":"#AAA";a.fillStyle="#000";a.beginPath();a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.5*this.properties.size,0,2*Math.PI,!0);a.stroke();0<this.value&&(a.strokeStyle=this.properties.wcolor,a.lineWidth=0.2*this.properties.size,a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.35*this.properties.size,-0.5*Math.PI+2*Math.PI*this.value,-0.5*Math.PI,!0),a.stroke(),a.lineWidth=1);a.font=0.2*this.properties.size+"px Arial";a.fillStyle=
-"#AAA";a.textAlign="center";var b=this.properties.value;"number"==typeof b&&(b=b.toFixed(2));a.fillText(b,0.5*this.size[0],0.65*this.size[1]);a.textAlign="left"}};a.prototype.onDrawForeground=function(a){this.onDrawImageKnob(a)};a.prototype.onExecute=function(){this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])};a.prototype.onMouseDown=function(a){if(this.imgfg&&this.imgfg.width){this.center=[0.5*this.size[0],0.5*this.size[1]+20];this.radius=
-0.5*this.size[0];if(20>a.canvasY-this.pos[1]||distance([a.canvasX,a.canvasY],[this.pos[0]+this.center[0],this.pos[1]+this.center[1]])>this.radius)return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);return!0}};a.prototype.onMouseMove=function(a){if(this.oldmouse){a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];var b=this.value,b=b-0.01*(a[1]-this.oldmouse[1]);1<b?b=1:0>b&&(b=0);this.value=b;this.properties.value=this.properties.min+(this.properties.max-this.properties.min)*
-this.value;this.oldmouse=a;this.setDirtyCanvas(!0)}};a.prototype.onMouseUp=function(a){this.oldmouse&&(this.oldmouse=null,this.captureInput(!1))};a.prototype.onMouseLeave=function(a){};a.prototype.onWidget=function(a,b){if("increase"==b.name)this.onPropertyChange("size",this.properties.size+10);else if("decrease"==b.name)this.onPropertyChange("size",this.properties.size-10)};a.prototype.onPropertyChange=function(a,b){if("wcolor"==a)this.properties[a]=b;else if("size"==a)b=parseInt(b),this.properties[a]=
-b,this.size=[b+4,b+24],this.setDirtyCanvas(!0,!0);else if("min"==a||"max"==a||"value"==a)this.properties[a]=parseFloat(b);else return!1;return!0};LiteGraph.registerNodeType("widget/knob",a);b.title="H.Slider";b.desc="Linear slider controller";b.prototype.onInit=function(){this.value=0.5;this.imgfg=this.loadImage("imgs/slider_fg.png")};b.prototype.onDrawVectorial=function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.strokeStyle=this.mouseOver?"#FFF":"#AAA",a.fillStyle="#000",a.beginPath(),a.rect(2,
-0,this.size[0]-4,20),a.stroke(),a.fillStyle=this.properties.wcolor,a.beginPath(),a.rect(2+(this.size[0]-4-20)*this.value,0,20,20),a.fill())};b.prototype.onDrawImage=function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.fillStyle="#000",a.fillRect(2,9,this.size[0]-4,2),a.strokeStyle="#333",a.beginPath(),a.moveTo(2,9),a.lineTo(this.size[0]-4,9),a.stroke(),a.strokeStyle="#AAA",a.beginPath(),a.moveTo(2,11),a.lineTo(this.size[0]-4,11),a.stroke(),a.drawImage(this.imgfg,2+(this.size[0]-4)*this.value-
-0.5*this.imgfg.width,0.5*-this.imgfg.height+10))};b.prototype.onDrawForeground=function(a){this.onDrawImage(a)};b.prototype.onExecute=function(){this.properties.value=this.properties.min+(this.properties.max-this.properties.min)*this.value;this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])};b.prototype.onMouseDown=function(a){if(0>a.canvasY-this.pos[1])return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);
+function(a){if(this.imgfg&&this.imgfg.width){var b=0.5*this.imgbg.width,c=this.size[0]/this.imgfg.width;a.save();a.translate(0,20);a.scale(c,c);a.drawImage(this.imgbg,0,0);a.translate(b,b);a.rotate(2*this.value*Math.PI*6/8+10*Math.PI/8);a.translate(-b,-b);a.drawImage(this.imgfg,0,0);a.restore();this.title&&(a.font="bold 16px Criticized,Tahoma",a.fillStyle="rgba(100,100,100,0.8)",a.textAlign="center",a.fillText(this.title.toUpperCase(),0.5*this.size[0],18),a.textAlign="left")}};a.prototype.onDrawVectorKnob=
+function(a){if(this.imgfg&&this.imgfg.width){a.lineWidth=1;a.strokeStyle=this.mouseOver?"#FFF":"#AAA";a.fillStyle="#000";a.beginPath();a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.5*this.properties.size,0,2*Math.PI,!0);a.stroke();0<this.value&&(a.strokeStyle=this.properties.wcolor,a.lineWidth=0.2*this.properties.size,a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.35*this.properties.size,-0.5*Math.PI+2*Math.PI*this.value,-0.5*Math.PI,!0),a.stroke(),a.lineWidth=1);a.font=0.2*this.properties.size+
+"px Arial";a.fillStyle="#AAA";a.textAlign="center";var b=this.properties.value;"number"==typeof b&&(b=b.toFixed(2));a.fillText(b,0.5*this.size[0],0.65*this.size[1]);a.textAlign="left"}};a.prototype.onDrawForeground=function(a){this.onDrawImageKnob(a)};a.prototype.onExecute=function(){this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])};a.prototype.onMouseDown=function(a){if(this.imgfg&&this.imgfg.width){this.center=[0.5*this.size[0],0.5*this.size[1]+
+20];this.radius=0.5*this.size[0];if(20>a.canvasY-this.pos[1]||distance([a.canvasX,a.canvasY],[this.pos[0]+this.center[0],this.pos[1]+this.center[1]])>this.radius)return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);return!0}};a.prototype.onMouseMove=function(a){if(this.oldmouse){a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];var b=this.value,b=b-0.01*(a[1]-this.oldmouse[1]);1<b?b=1:0>b&&(b=0);this.value=b;this.properties.value=this.properties.min+(this.properties.max-
+this.properties.min)*this.value;this.oldmouse=a;this.setDirtyCanvas(!0)}};a.prototype.onMouseUp=function(a){this.oldmouse&&(this.oldmouse=null,this.captureInput(!1))};a.prototype.onMouseLeave=function(a){};a.prototype.onWidget=function(a,b){if("increase"==b.name)this.onPropertyChange("size",this.properties.size+10);else if("decrease"==b.name)this.onPropertyChange("size",this.properties.size-10)};a.prototype.onPropertyChange=function(a,b){if("wcolor"==a)this.properties[a]=b;else if("size"==a)b=parseInt(b),
+this.properties[a]=b,this.size=[b+4,b+24],this.setDirtyCanvas(!0,!0);else if("min"==a||"max"==a||"value"==a)this.properties[a]=parseFloat(b);else return!1;return!0};LiteGraph.registerNodeType("widget/knob",a);b.title="H.Slider";b.desc="Linear slider controller";b.prototype.onInit=function(){this.value=0.5;this.imgfg=this.loadImage("imgs/slider_fg.png")};b.prototype.onDrawVectorial=function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.strokeStyle=this.mouseOver?"#FFF":"#AAA",a.fillStyle="#000",
+a.beginPath(),a.rect(2,0,this.size[0]-4,20),a.stroke(),a.fillStyle=this.properties.wcolor,a.beginPath(),a.rect(2+(this.size[0]-4-20)*this.value,0,20,20),a.fill())};b.prototype.onDrawImage=function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.fillStyle="#000",a.fillRect(2,9,this.size[0]-4,2),a.strokeStyle="#333",a.beginPath(),a.moveTo(2,9),a.lineTo(this.size[0]-4,9),a.stroke(),a.strokeStyle="#AAA",a.beginPath(),a.moveTo(2,11),a.lineTo(this.size[0]-4,11),a.stroke(),a.drawImage(this.imgfg,2+(this.size[0]-
+4)*this.value-0.5*this.imgfg.width,0.5*-this.imgfg.height+10))};b.prototype.onDrawForeground=function(a){this.onDrawImage(a)};b.prototype.onExecute=function(){this.properties.value=this.properties.min+(this.properties.max-this.properties.min)*this.value;this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])};b.prototype.onMouseDown=function(a){if(0>a.canvasY-this.pos[1])return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);
 return!0};b.prototype.onMouseMove=function(a){if(this.oldmouse){a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];var b=this.value,b=b+(a[0]-this.oldmouse[0])/this.size[0];1<b?b=1:0>b&&(b=0);this.value=b;this.oldmouse=a;this.setDirtyCanvas(!0)}};b.prototype.onMouseUp=function(a){this.oldmouse=null;this.captureInput(!1)};b.prototype.onMouseLeave=function(a){};b.prototype.onPropertyChange=function(a,b){if("wcolor"==a)this.properties[a]=b;else return!1;return!0};LiteGraph.registerNodeType("widget/hslider",
 b);c.title="Progress";c.desc="Shows data in linear progress";c.prototype.onExecute=function(){var a=this.getInputData(0);void 0!=a&&(this.properties.value=a)};c.prototype.onDrawForeground=function(a){a.lineWidth=1;a.fillStyle=this.properties.wcolor;var b=(this.properties.value-this.properties.min)/(this.properties.max-this.properties.min),b=Math.min(1,b),b=Math.max(0,b);a.fillRect(2,2,(this.size[0]-4)*b,this.size[1]-4)};LiteGraph.registerNodeType("widget/progress",c);d.title="Text";d.desc="Shows the input value";
 d.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"led_text",text:"LED",type:"minibutton"},{name:"normal_text",text:"Normal",type:"minibutton"}];d.prototype.onDrawForeground=function(a){a.fillStyle=this.properties.color;var b=this.properties.value;this.properties.glowSize?(a.shadowColor=this.properties.color,a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=this.properties.glowSize):a.shadowColor="transparent";var c=this.properties.fontsize;a.textAlign=this.properties.align;a.font=c.toString()+
@@ -149,19 +159,20 @@ e.prototype.onWidget=function(a,b){"update"==b.name&&(this.lineargradient=null,t
 (function(){function a(){this.addOutput("value","number");this.properties={min:0,max:1};this.size=[60,20]}function b(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20];this.properties={min:0,max:1}}function c(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function d(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function e(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function f(){this.addInput("in",
 "number",{label:""});this.addOutput("out","number",{label:""});this.size=[60,20];this.properties={factor:1}}function g(){this.addInput("A","number");this.addInput("B","number");this.addOutput("A+B","number");this.properties={A:1,B:1}}function h(){this.addInputs("A","number");this.addInputs("B","number");this.addOutputs("A==B","number");this.addOutputs("A!=B","number");this.properties={A:0,B:0}}function l(){this.addInput("inc","number");this.addOutput("total","number");this.properties={increment:0,
 value:0}}function n(){this.addInput("v","number");this.addOutput("sin","number");this.properties={amplitude:1,offset:0};this.bgImageUrl="nodes/imgs/icon-sin.png"}a.title="Rand";a.desc="Random number";a.prototype.onExecute=function(){var a=this.properties.min,b=this.properties.max;this._last_v=Math.random()*(b-a)+a;this.setOutputData(0,this._last_v)};a.prototype.onDrawBackground=function(a){this.outputs[0].label=this._last_v?this._last_v.toFixed(3):"?"};LiteGraph.registerNodeType("math/rand",a);b.title=
-"Clamp";b.desc="Clamp number between min and max";b.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(a=Math.max(this.properties.min,a),a=Math.min(this.properties.max,a),this.setOutputData(0,a))};LiteGraph.registerNodeType("math/clamp",b);c.title="Abs";c.desc="Absolute";c.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,Math.abs(a))};LiteGraph.registerNodeType("math/abs",c);d.title="Floor";d.desc="Floor number to remove fractional part";d.prototype.onExecute=
-function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a|1)};LiteGraph.registerNodeType("math/floor",d);e.title="Frac";e.desc="Returns fractional part";e.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a%1)};LiteGraph.registerNodeType("math/frac",e);f.title="Scale";f.desc="v * factor";f.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a*this.properties.factor)};LiteGraph.registerNodeType("math/scale",f);g.title=
-"Operation";g.desc="Easy math operators";g.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};g.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.A=a:a=this.properties.A;null!=b?this.properties.B=b:b=this.properties.B;for(var c=0,d=this.outputs.length;c<d;++c){var e=this.outputs[c];if(e.links&&e.links.length){var f=0;switch(e.name){case "A+B":f=a+b;break;case "A-B":f=a-b;break;
-case "A*B":f=a*b;break;case "A/B":f=a/b}this.setOutputData(c,f)}}};g.prototype.onGetOutputs=function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]};LiteGraph.registerNodeType("math/operation",g);h.title="Compare";h.desc="compares between two values";h.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.A=a:a=this.properties.A;null!=b?this.properties.B=b:b=this.properties.B;for(var c=0,d=this.outputs.length;c<d;++c){var e=this.outputs[c];
-if(e.links&&e.links.length){switch(e.name){case "A==B":value=a==b;break;case "A!=B":value=a!=b;break;case "A>B":value=a>b;break;case "A<B":value=a<b;break;case "A<=B":value=a<=b;break;case "A>=B":value=a>=b}this.setOutputData(c,value)}}};h.prototype.onGetOutputs=function(){return[["A==B","number"],["A!=B","number"],["A>B","number"],["A<B","number"],["A>=B","number"],["A<=B","number"]]};LiteGraph.registerNodeType("math/compare",h);l.title="Accumulate";l.desc="Increments a value every time";l.prototype.onExecute=
-function(){var a=this.getInputData(0);this.properties.value=null!==a?this.properties.value+a:this.properties.value+this.properties.increment;this.setOutputData(0,this.properties.value)};LiteGraph.registerNodeType("math/accumulate",l);n.title="Trigonometry";n.desc="Sin Cos Tan";n.prototype.onExecute=function(){var a=this.getInputData(0),b=this.properties.amplitude,c=this.findInputSlot("amplitude");-1!=c&&(b=this.getInputData(c));var d=this.properties.offset,c=this.findInputSlot("offset");-1!=c&&(d=
-this.getInputData(c));for(var c=0,e=this.outputs.length;c<e;++c){switch(this.outputs[c].name){case "sin":value=Math.sin(a);break;case "cos":value=Math.cos(a);break;case "tan":value=Math.tan(a);break;case "asin":value=Math.asin(a);break;case "acos":value=Math.acos(a);break;case "atan":value=Math.atan(a)}this.setOutputData(c,b*value+d)}};n.prototype.onGetInputs=function(){return[["v","number"],["amplitude","number"],["offset","number"]]};n.prototype.onGetOutputs=function(){return[["sin","number"],["cos",
-"number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]]};LiteGraph.registerNodeType("math/trigonometry",n);if(window.math){var k=function(){this.addInputs("x","number");this.addInputs("y","number");this.addOutputs("","number");this.properties={x:1,y:1,formula:"x+y"}};k.title="Formula";k.desc="Compute safe formula";k.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.x=a:a=this.properties.x;null!=b?this.properties.y=b:
-b=this.properties.y;a=math.eval(this.properties.formula,{x:a,y:b,T:this.graph.globaltime});this.setOutputData(0,a)};k.prototype.onDrawBackground=function(){this.outputs[0].label=this.properties.formula};k.prototype.onGetOutputs=function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]};LiteGraph.registerNodeType("math/formula",k)}window.glMatrix&&(k=function(){this.addInput("vec3","vec3");this.addOutput("x","number");this.addOutput("y","number");this.addOutput("z","number")},k.title="Vec3->XYZ",
-k.desc="vector 3 to components",k.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]),this.setOutputData(2,a[2]))},LiteGraph.registerNodeType("math3d/vec3-to-xyz",k),k=function(){this.addInputs([["x","number"],["y","number"],["z","number"]]);this.addOutput("vec3","vec3");this.properties={x:0,y:0,z:0}},k.title="XYZ->Vec3",k.desc="components to vector3",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.x);
-var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this.getInputData(2);null==c&&(c=this.properties.z);this.setOutputData(0,vec3.fromValues(a,b,c))},LiteGraph.registerNodeType("math3d/xyz-to-vec3",k),k=function(){this.addInputs([["degrees","number"],["axis","vec3"]]);this.addOutput("quat","quat");this.properties={angle:90,axis:vec3.fromValues(0,1,0)}},k.title="Rotation",k.desc="quaternion rotation",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.angle);
-var b=this.getInputData(1);null==b&&(b=this.properties.axis);a=quat.setAxisAngle(quat.create(),b,0.0174532925*a);this.setOutputData(0,a)},LiteGraph.registerNodeType("math3d/rotation",k),k=function(){this.addInputs([["vec3","vec3"],["quat","quat"]]);this.addOutput("result","vec3");this.properties={vec:[0,0,1]}},k.title="Rot. Vec3",k.desc="rotate a point",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1);null==b?this.setOutputData(a):
-this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))},LiteGraph.registerNodeType("math3d/rotate_vec3",k),k=function(){this.addInputs([["A","quat"],["B","quat"]]);this.addOutput("A*B","quat")},k.title="Mult. Quat",k.desc="rotate quaternion",k.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(quat.create(),a,b),this.setOutputData(0,a))}},LiteGraph.registerNodeType("math3d/mult-quat",k))})();
+"Clamp";b.desc="Clamp number between min and max";b.filter="shader";b.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(a=Math.max(this.properties.min,a),a=Math.min(this.properties.max,a),this.setOutputData(0,a))};b.prototype.getCode=function(a){a="";this.isInputConnected(0)&&(a+="clamp({{0}},"+this.properties.min+","+this.properties.max+")");return a};LiteGraph.registerNodeType("math/clamp",b);c.title="Abs";c.desc="Absolute";c.prototype.onExecute=function(){var a=this.getInputData(0);
+null!=a&&this.setOutputData(0,Math.abs(a))};LiteGraph.registerNodeType("math/abs",c);d.title="Floor";d.desc="Floor number to remove fractional part";d.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,Math.floor(a))};LiteGraph.registerNodeType("math/floor",d);e.title="Frac";e.desc="Returns fractional part";e.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a%1)};LiteGraph.registerNodeType("math/frac",e);f.title="Scale";f.desc=
+"v * factor";f.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a*this.properties.factor)};LiteGraph.registerNodeType("math/scale",f);g.title="Operation";g.desc="Easy math operators";g.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};g.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.A=a:a=this.properties.A;null!=b?this.properties.B=b:
+b=this.properties.B;for(var c=0,d=this.outputs.length;c<d;++c){var e=this.outputs[c];if(e.links&&e.links.length){var f=0;switch(e.name){case "A+B":f=a+b;break;case "A-B":f=a-b;break;case "A*B":f=a*b;break;case "A/B":f=a/b}this.setOutputData(c,f)}}};g.prototype.onGetOutputs=function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]};LiteGraph.registerNodeType("math/operation",g);h.title="Compare";h.desc="compares between two values";h.prototype.onExecute=function(){var a=this.getInputData(0),
+b=this.getInputData(1);null!=a?this.properties.A=a:a=this.properties.A;null!=b?this.properties.B=b:b=this.properties.B;for(var c=0,d=this.outputs.length;c<d;++c){var e=this.outputs[c];if(e.links&&e.links.length){switch(e.name){case "A==B":value=a==b;break;case "A!=B":value=a!=b;break;case "A>B":value=a>b;break;case "A<B":value=a<b;break;case "A<=B":value=a<=b;break;case "A>=B":value=a>=b}this.setOutputData(c,value)}}};h.prototype.onGetOutputs=function(){return[["A==B","number"],["A!=B","number"],
+["A>B","number"],["A<B","number"],["A>=B","number"],["A<=B","number"]]};LiteGraph.registerNodeType("math/compare",h);l.title="Accumulate";l.desc="Increments a value every time";l.prototype.onExecute=function(){var a=this.getInputData(0);this.properties.value=null!==a?this.properties.value+a:this.properties.value+this.properties.increment;this.setOutputData(0,this.properties.value)};LiteGraph.registerNodeType("math/accumulate",l);n.title="Trigonometry";n.desc="Sin Cos Tan";n.filter="shader";n.prototype.onExecute=
+function(){var a=this.getInputData(0),b=this.properties.amplitude,c=this.findInputSlot("amplitude");-1!=c&&(b=this.getInputData(c));var d=this.properties.offset,c=this.findInputSlot("offset");-1!=c&&(d=this.getInputData(c));for(var c=0,e=this.outputs.length;c<e;++c){switch(this.outputs[c].name){case "sin":value=Math.sin(a);break;case "cos":value=Math.cos(a);break;case "tan":value=Math.tan(a);break;case "asin":value=Math.asin(a);break;case "acos":value=Math.acos(a);break;case "atan":value=Math.atan(a)}this.setOutputData(c,
+b*value+d)}};n.prototype.onGetInputs=function(){return[["v","number"],["amplitude","number"],["offset","number"]]};n.prototype.onGetOutputs=function(){return[["sin","number"],["cos","number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]]};LiteGraph.registerNodeType("math/trigonometry",n);if(window.math){var k=function(){this.addInputs("x","number");this.addInputs("y","number");this.addOutputs("","number");this.properties={x:1,y:1,formula:"x+y"}};k.title="Formula";k.desc=
+"Compute safe formula";k.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.x=a:a=this.properties.x;null!=b?this.properties.y=b:b=this.properties.y;a=math.eval(this.properties.formula,{x:a,y:b,T:this.graph.globaltime});this.setOutputData(0,a)};k.prototype.onDrawBackground=function(){this.outputs[0].label=this.properties.formula};k.prototype.onGetOutputs=function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]};LiteGraph.registerNodeType("math/formula",
+k)}window.glMatrix&&(k=function(){this.addInput("vec3","vec3");this.addOutput("x","number");this.addOutput("y","number");this.addOutput("z","number")},k.title="Vec3->XYZ",k.desc="vector 3 to components",k.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]),this.setOutputData(2,a[2]))},LiteGraph.registerNodeType("math3d/vec3-to-xyz",k),k=function(){this.addInputs([["x","number"],["y","number"],["z","number"]]);this.addOutput("vec3",
+"vec3");this.properties={x:0,y:0,z:0}},k.title="XYZ->Vec3",k.desc="components to vector3",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this.getInputData(2);null==c&&(c=this.properties.z);this.setOutputData(0,vec3.fromValues(a,b,c))},LiteGraph.registerNodeType("math3d/xyz-to-vec3",k),k=function(){this.addInputs([["degrees","number"],["axis","vec3"]]);this.addOutput("quat","quat");this.properties=
+{angle:90,axis:vec3.fromValues(0,1,0)}},k.title="Rotation",k.desc="quaternion rotation",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.angle);var b=this.getInputData(1);null==b&&(b=this.properties.axis);a=quat.setAxisAngle(quat.create(),b,0.0174532925*a);this.setOutputData(0,a)},LiteGraph.registerNodeType("math3d/rotation",k),k=function(){this.addInputs([["vec3","vec3"],["quat","quat"]]);this.addOutput("result","vec3");this.properties={vec:[0,0,1]}},k.title=
+"Rot. Vec3",k.desc="rotate a point",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1);null==b?this.setOutputData(a):this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))},LiteGraph.registerNodeType("math3d/rotate_vec3",k),k=function(){this.addInputs([["A","quat"],["B","quat"]]);this.addOutput("A*B","quat")},k.title="Mult. Quat",k.desc="rotate quaternion",k.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=
+a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(quat.create(),a,b),this.setOutputData(0,a))}},LiteGraph.registerNodeType("math3d/mult-quat",k))})();
 (function(){function a(){this.addInput("f","number");this.addOutput("Color","color");this.properties={colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}}function b(){this.addInput("","image");this.size=[200,200]}function c(){this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);this.addInput("","image");this.properties={fade:0.5,width:512,height:512}}function d(){this.inputs=[];this.addOutput("frame","image");this.properties={url:""}}function e(){this.addInput("",
 "image");this.addOutputs("","image");this.properties={width:256,height:256,x:0,y:0,scale:1};this.size=[50,20]}function f(){this.addInput("t","number");this.addOutputs([["frame","image"],["t","number"],["d","number"]]);this.properties={url:""}}function g(){this.addOutput("Webcam","image");this.properties={}}a.title="Palette";a.desc="Generates a color";a.prototype.onExecute=function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));
 null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD));var b=this.getInputData(0);null==b&&(b=0.5);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -45,7 +45,7 @@ function multiConnection()
 	var node_const_A = LiteGraph.createNode("basic/const");
 	node_const_A.pos = [200,200];
 	graph.add(node_const_A);
-	node_const_A.setValue(4);
+	node_const_A.setValue(4.5);

 	var node_const_B = LiteGraph.createNode("basic/const");
 	node_const_B.pos = [200,300];
--- a/doc/classes/LGraph.html
+++ b/doc/classes/LGraph.html
@@ -637,7 +637,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l922"><code>..&#x2F;src&#x2F;litegraph.js:922</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1018"><code>..&#x2F;src&#x2F;litegraph.js:1018</code></a>
        
        </p>

@@ -1477,7 +1477,7 @@ if the nodes are using graphical actions</p>
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l856"><code>..&#x2F;src&#x2F;litegraph.js:856</code></a>
+        <a href="../files/.._src_litegraph.js.html#l952"><code>..&#x2F;src&#x2F;litegraph.js:952</code></a>
        
        </p>

@@ -1825,7 +1825,7 @@ if the nodes are using graphical actions</p>
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l889"><code>..&#x2F;src&#x2F;litegraph.js:889</code></a>
+        <a href="../files/.._src_litegraph.js.html#l985"><code>..&#x2F;src&#x2F;litegraph.js:985</code></a>
        
        </p>

@@ -1910,7 +1910,7 @@ if the nodes are using graphical actions</p>
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l804"><code>..&#x2F;src&#x2F;litegraph.js:804</code></a>
+        <a href="../files/.._src_litegraph.js.html#l900"><code>..&#x2F;src&#x2F;litegraph.js:900</code></a>
        
        </p>

@@ -2020,7 +2020,7 @@ can be easily accesed from the outside of the graph</p>
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l819"><code>..&#x2F;src&#x2F;litegraph.js:819</code></a>
+        <a href="../files/.._src_litegraph.js.html#l915"><code>..&#x2F;src&#x2F;litegraph.js:915</code></a>
        
        </p>

--- a/doc/classes/LGraphCanvas.html
+++ b/doc/classes/LGraphCanvas.html
@@ -96,7 +96,7 @@

    
        <div class="foundat">
-            Defined in: <a href="../files/.._src_litegraph.js.html#l2116"><code>..&#x2F;src&#x2F;litegraph.js:2116</code></a>
+            Defined in: <a href="../files/.._src_litegraph.js.html#l2278"><code>..&#x2F;src&#x2F;litegraph.js:2278</code></a>
        </div>
    

@@ -163,7 +163,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l2116"><code>..&#x2F;src&#x2F;litegraph.js:2116</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2278"><code>..&#x2F;src&#x2F;litegraph.js:2278</code></a>
        
        </p>

@@ -254,6 +254,13 @@

                                
                                
+                            </li>
+                        
+                            <li class="index-item method">
+                                <a href="#method_closeSubgraph">closeSubgraph</a>
+
+                                
+                                
                            </li>
                        
                            <li class="index-item method">
@@ -261,6 +268,13 @@

                                
                                
+                            </li>
+                        
+                            <li class="index-item method">
+                                <a href="#method_openSubgraph">openSubgraph</a>
+
+                                
+                                
                            </li>
                        
                            <li class="index-item method">
@@ -339,7 +353,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1912"><code>..&#x2F;src&#x2F;litegraph.js:1912</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2032"><code>..&#x2F;src&#x2F;litegraph.js:2032</code></a>
        
        </p>

@@ -359,6 +373,95 @@
    

    
+</div>
+
+                
+                    <div id="method_closeSubgraph" class="method item">
+    <h3 class="name"><code>closeSubgraph</code></h3>
+
+    
+        <div class="args">
+            <span class="paren">(</span><ul class="args-list inline commas">
+            
+                <li class="arg">
+                    
+                        <code>assigns</code>
+                    
+                </li>
+            
+            </ul><span class="paren">)</span>
+        </div>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    <div class="meta">
+        
+            
+                
+                <p>
+                
+                Defined in
+                
+            
+        
+        
+        <a href="../files/.._src_litegraph.js.html#l2141"><code>..&#x2F;src&#x2F;litegraph.js:2141</code></a>
+        
+        </p>
+
+
+        
+
+        
+    </div>
+
+    <div class="description">
+        <p>closes a subgraph contained inside a node</p>
+
+    </div>
+
+    
+        <div class="params">
+            <h4>Parameters:</h4>
+
+            <ul class="params-list">
+            
+                <li class="param">
+                    
+                        <code class="param-name">assigns</code>
+                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
+                    
+
+                    
+
+                    <div class="param-description">
+                        <p>a graph</p>
+
+                    </div>
+
+                    
+                </li>
+            
+            </ul>
+        </div>
+    
+
+    
+
+    
 </div>

                
@@ -398,7 +501,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l2132"><code>..&#x2F;src&#x2F;litegraph.js:2132</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2294"><code>..&#x2F;src&#x2F;litegraph.js:2294</code></a>
        
        </p>

@@ -432,6 +535,94 @@
    

    
+</div>
+
+                
+                    <div id="method_openSubgraph" class="method item">
+    <h3 class="name"><code>openSubgraph</code></h3>
+
+    
+        <div class="args">
+            <span class="paren">(</span><ul class="args-list inline commas">
+            
+                <li class="arg">
+                    
+                        <code>graph</code>
+                    
+                </li>
+            
+            </ul><span class="paren">)</span>
+        </div>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    <div class="meta">
+        
+            
+                
+                <p>
+                
+                Defined in
+                
+            
+        
+        
+        <a href="../files/.._src_litegraph.js.html#l2114"><code>..&#x2F;src&#x2F;litegraph.js:2114</code></a>
+        
+        </p>
+
+
+        
+
+        
+    </div>
+
+    <div class="description">
+        <p>opens a graph contained inside a node in the current graph</p>
+
+    </div>
+
+    
+        <div class="params">
+            <h4>Parameters:</h4>
+
+            <ul class="params-list">
+            
+                <li class="param">
+                    
+                        <code class="param-name">graph</code>
+                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
+                    
+
+                    
+
+                    <div class="param-description">
+                         
+                    </div>
+
+                    
+                </li>
+            
+            </ul>
+        </div>
+    
+
+    
+
+    
 </div>

                
@@ -477,7 +668,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1994"><code>..&#x2F;src&#x2F;litegraph.js:1994</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2156"><code>..&#x2F;src&#x2F;litegraph.js:2156</code></a>
        
        </p>

@@ -533,7 +724,7 @@
            
                <li class="arg">
                    
-                        <code>assigns</code>
+                        <code>graph</code>
                    
                </li>
            
@@ -566,7 +757,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1966"><code>..&#x2F;src&#x2F;litegraph.js:1966</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2086"><code>..&#x2F;src&#x2F;litegraph.js:2086</code></a>
        
        </p>

@@ -589,15 +780,14 @@
            
                <li class="param">
                    
-                        <code class="param-name">assigns</code>
+                        <code class="param-name">graph</code>
                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
                    

                    

                    <div class="param-description">
-                        <p>a graph</p>
-
+                         
                    </div>

                    
@@ -645,7 +835,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l2144"><code>..&#x2F;src&#x2F;litegraph.js:2144</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2306"><code>..&#x2F;src&#x2F;litegraph.js:2306</code></a>
        
        </p>

@@ -700,7 +890,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l2175"><code>..&#x2F;src&#x2F;litegraph.js:2175</code></a>
+        <a href="../files/.._src_litegraph.js.html#l2337"><code>..&#x2F;src&#x2F;litegraph.js:2337</code></a>
        
        </p>

--- a/doc/classes/LGraphNode.html
+++ b/doc/classes/LGraphNode.html
@@ -96,7 +96,7 @@

    
        <div class="foundat">
-            Defined in: <a href="../files/.._src_litegraph.js.html#l1000"><code>..&#x2F;src&#x2F;litegraph.js:1000</code></a>
+            Defined in: <a href="../files/.._src_litegraph.js.html#l1096"><code>..&#x2F;src&#x2F;litegraph.js:1096</code></a>
        </div>
    

@@ -415,7 +415,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1385"><code>..&#x2F;src&#x2F;litegraph.js:1385</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1528"><code>..&#x2F;src&#x2F;litegraph.js:1528</code></a>
        
        </p>

@@ -563,7 +563,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1331"><code>..&#x2F;src&#x2F;litegraph.js:1331</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1468"><code>..&#x2F;src&#x2F;litegraph.js:1468</code></a>
        
        </p>

@@ -683,7 +683,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1350"><code>..&#x2F;src&#x2F;litegraph.js:1350</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1489"><code>..&#x2F;src&#x2F;litegraph.js:1489</code></a>
        
        </p>

@@ -784,7 +784,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1277"><code>..&#x2F;src&#x2F;litegraph.js:1277</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1408"><code>..&#x2F;src&#x2F;litegraph.js:1408</code></a>
        
        </p>

@@ -904,7 +904,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1296"><code>..&#x2F;src&#x2F;litegraph.js:1296</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1429"><code>..&#x2F;src&#x2F;litegraph.js:1429</code></a>
        
        </p>

@@ -983,7 +983,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1842"><code>..&#x2F;src&#x2F;litegraph.js:1842</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1962"><code>..&#x2F;src&#x2F;litegraph.js:1962</code></a>
        
        </p>

@@ -1052,7 +1052,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1398"><code>..&#x2F;src&#x2F;litegraph.js:1398</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1541"><code>..&#x2F;src&#x2F;litegraph.js:1541</code></a>
        
        </p>

@@ -1144,7 +1144,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1029"><code>..&#x2F;src&#x2F;litegraph.js:1029</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1125"><code>..&#x2F;src&#x2F;litegraph.js:1125</code></a>
        
        </p>

@@ -1225,7 +1225,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1478"><code>..&#x2F;src&#x2F;litegraph.js:1478</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1621"><code>..&#x2F;src&#x2F;litegraph.js:1621</code></a>
        
        </p>

@@ -1364,7 +1364,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1628"><code>..&#x2F;src&#x2F;litegraph.js:1628</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1771"><code>..&#x2F;src&#x2F;litegraph.js:1771</code></a>
        
        </p>

@@ -1477,7 +1477,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1561"><code>..&#x2F;src&#x2F;litegraph.js:1561</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1704"><code>..&#x2F;src&#x2F;litegraph.js:1704</code></a>
        
        </p>

@@ -1600,7 +1600,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1448"><code>..&#x2F;src&#x2F;litegraph.js:1448</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1591"><code>..&#x2F;src&#x2F;litegraph.js:1591</code></a>
        
        </p>

@@ -1707,7 +1707,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1463"><code>..&#x2F;src&#x2F;litegraph.js:1463</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1606"><code>..&#x2F;src&#x2F;litegraph.js:1606</code></a>
        
        </p>

@@ -1804,7 +1804,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1416"><code>..&#x2F;src&#x2F;litegraph.js:1416</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1559"><code>..&#x2F;src&#x2F;litegraph.js:1559</code></a>
        
        </p>

@@ -1893,7 +1893,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1685"><code>..&#x2F;src&#x2F;litegraph.js:1685</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1828"><code>..&#x2F;src&#x2F;litegraph.js:1828</code></a>
        
        </p>

@@ -2016,7 +2016,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1180"><code>..&#x2F;src&#x2F;litegraph.js:1180</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1311"><code>..&#x2F;src&#x2F;litegraph.js:1311</code></a>
        
        </p>

@@ -2122,7 +2122,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1206"><code>..&#x2F;src&#x2F;litegraph.js:1206</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1337"><code>..&#x2F;src&#x2F;litegraph.js:1337</code></a>
        
        </p>

@@ -2226,7 +2226,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1221"><code>..&#x2F;src&#x2F;litegraph.js:1221</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1352"><code>..&#x2F;src&#x2F;litegraph.js:1352</code></a>
        
        </p>

@@ -2330,7 +2330,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1248"><code>..&#x2F;src&#x2F;litegraph.js:1248</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1379"><code>..&#x2F;src&#x2F;litegraph.js:1379</code></a>
        
        </p>

@@ -2420,7 +2420,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1148"><code>..&#x2F;src&#x2F;litegraph.js:1148</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1279"><code>..&#x2F;src&#x2F;litegraph.js:1279</code></a>
        
        </p>

@@ -2489,7 +2489,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1194"><code>..&#x2F;src&#x2F;litegraph.js:1194</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1325"><code>..&#x2F;src&#x2F;litegraph.js:1325</code></a>
        
        </p>

@@ -2593,7 +2593,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1236"><code>..&#x2F;src&#x2F;litegraph.js:1236</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1367"><code>..&#x2F;src&#x2F;litegraph.js:1367</code></a>
        
        </p>

@@ -2703,7 +2703,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1426"><code>..&#x2F;src&#x2F;litegraph.js:1426</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1569"><code>..&#x2F;src&#x2F;litegraph.js:1569</code></a>
        
        </p>

@@ -2808,7 +2808,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1855"><code>..&#x2F;src&#x2F;litegraph.js:1855</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1975"><code>..&#x2F;src&#x2F;litegraph.js:1975</code></a>
        
        </p>

@@ -2873,7 +2873,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1373"><code>..&#x2F;src&#x2F;litegraph.js:1373</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1514"><code>..&#x2F;src&#x2F;litegraph.js:1514</code></a>
        
        </p>

@@ -2961,7 +2961,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1319"><code>..&#x2F;src&#x2F;litegraph.js:1319</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1454"><code>..&#x2F;src&#x2F;litegraph.js:1454</code></a>
        
        </p>

@@ -3039,7 +3039,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1075"><code>..&#x2F;src&#x2F;litegraph.js:1075</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1176"><code>..&#x2F;src&#x2F;litegraph.js:1176</code></a>
        
        </p>

@@ -3110,7 +3110,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1161"><code>..&#x2F;src&#x2F;litegraph.js:1161</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1292"><code>..&#x2F;src&#x2F;litegraph.js:1292</code></a>
        
        </p>

@@ -3203,7 +3203,7 @@
            
        
        
-        <a href="../files/.._src_litegraph.js.html#l1136"><code>..&#x2F;src&#x2F;litegraph.js:1136</code></a>
+        <a href="../files/.._src_litegraph.js.html#l1267"><code>..&#x2F;src&#x2F;litegraph.js:1267</code></a>
        
        </p>

--- a/doc/data.json
+++ b/doc/data.json
@@ -51,7 +51,7 @@
            "plugin_for": [],
            "extension_for": [],
            "file": "../src/litegraph.js",
-            "line": 1000,
+            "line": 1096,
            "description": "Base Class for all the node type classes",
            "params": [
                {
@@ -70,7 +70,7 @@
            "plugin_for": [],
            "extension_for": [],
            "file": "../src/litegraph.js",
-            "line": 2116,
+            "line": 2278,
            "description": "marks as dirty the canvas, this way it will be rendered again",
            "is_constructor": 1,
            "params": [
@@ -438,7 +438,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 804,
+            "line": 900,
            "description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
            "itemtype": "method",
            "name": "setInputData",
@@ -458,7 +458,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 819,
+            "line": 915,
            "description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
            "itemtype": "method",
            "name": "setInputData",
@@ -477,7 +477,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 856,
+            "line": 952,
            "description": "returns if the graph is in live mode",
            "itemtype": "method",
            "name": "isLive",
@@ -485,7 +485,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 889,
+            "line": 985,
            "description": "Creates a Object containing all the info about this graph, it can be serialized",
            "itemtype": "method",
            "name": "serialize",
@@ -497,7 +497,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 922,
+            "line": 1018,
            "description": "Configure a graph from a JSON string",
            "itemtype": "method",
            "name": "configure",
@@ -512,7 +512,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1029,
+            "line": 1125,
            "description": "configure a node from an object containing the serialized info",
            "itemtype": "method",
            "name": "configure",
@@ -520,7 +520,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1075,
+            "line": 1176,
            "description": "serialize the content",
            "itemtype": "method",
            "name": "serialize",
@@ -528,7 +528,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1136,
+            "line": 1267,
            "description": "serialize and stringify",
            "itemtype": "method",
            "name": "toString",
@@ -536,7 +536,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1148,
+            "line": 1279,
            "description": "get the title string",
            "itemtype": "method",
            "name": "getTitle",
@@ -544,7 +544,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1161,
+            "line": 1292,
            "description": "sets the output data",
            "itemtype": "method",
            "name": "setOutputData",
@@ -564,7 +564,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1180,
+            "line": 1311,
            "description": "retrieves the input data from one slot",
            "itemtype": "method",
            "name": "getInputData",
@@ -583,7 +583,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1194,
+            "line": 1325,
            "description": "tells you if there is a connection in one input slot",
            "itemtype": "method",
            "name": "isInputConnected",
@@ -602,7 +602,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1206,
+            "line": 1337,
            "description": "tells you info about an input connection (which node, type, etc)",
            "itemtype": "method",
            "name": "getInputInfo",
@@ -621,7 +621,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1221,
+            "line": 1352,
            "description": "tells you info about an output connection (which node, type, etc)",
            "itemtype": "method",
            "name": "getOutputInfo",
@@ -640,7 +640,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1236,
+            "line": 1367,
            "description": "tells you if there is a connection in one output slot",
            "itemtype": "method",
            "name": "isOutputConnected",
@@ -659,7 +659,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1248,
+            "line": 1379,
            "description": "retrieves all the nodes connected to this output slot",
            "itemtype": "method",
            "name": "getOutputNodes",
@@ -678,7 +678,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1277,
+            "line": 1408,
            "description": "add a new output slot to use in this node",
            "itemtype": "method",
            "name": "addOutput",
@@ -703,7 +703,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1296,
+            "line": 1429,
            "description": "add a new output slot to use in this node",
            "itemtype": "method",
            "name": "addOutputs",
@@ -718,7 +718,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1319,
+            "line": 1454,
            "description": "remove an existing output slot",
            "itemtype": "method",
            "name": "removeOutput",
@@ -733,7 +733,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1331,
+            "line": 1468,
            "description": "add a new input slot to use in this node",
            "itemtype": "method",
            "name": "addInput",
@@ -758,7 +758,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1350,
+            "line": 1489,
            "description": "add several new input slots in this node",
            "itemtype": "method",
            "name": "addInputs",
@@ -773,7 +773,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1373,
+            "line": 1514,
            "description": "remove an existing input slot",
            "itemtype": "method",
            "name": "removeInput",
@@ -788,7 +788,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1385,
+            "line": 1528,
            "description": "add an special connection to this node (used for special kinds of graphs)",
            "itemtype": "method",
            "name": "addConnection",
@@ -818,7 +818,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1398,
+            "line": 1541,
            "description": "computes the size of a node according to its inputs and output slots",
            "itemtype": "method",
            "name": "computeSize",
@@ -837,7 +837,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1416,
+            "line": 1559,
            "description": "returns the bounding of the object, used for rendering purposes",
            "itemtype": "method",
            "name": "getBounding",
@@ -849,7 +849,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1426,
+            "line": 1569,
            "description": "checks if a point is inside the shape of a node",
            "itemtype": "method",
            "name": "isPointInsideNode",
@@ -873,7 +873,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1448,
+            "line": 1591,
            "description": "returns the input slot with a given name (used for dynamic slots), -1 if not found",
            "itemtype": "method",
            "name": "findInputSlot",
@@ -892,7 +892,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1463,
+            "line": 1606,
            "description": "returns the output slot with a given name (used for dynamic slots), -1 if not found",
            "itemtype": "method",
            "name": "findOutputSlot",
@@ -911,7 +911,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1478,
+            "line": 1621,
            "description": "connect this node output to the input of another node",
            "itemtype": "method",
            "name": "connect",
@@ -940,7 +940,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1561,
+            "line": 1704,
            "description": "disconnect one output to an specific node",
            "itemtype": "method",
            "name": "disconnectOutput",
@@ -964,7 +964,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1628,
+            "line": 1771,
            "description": "disconnect one input",
            "itemtype": "method",
            "name": "disconnectInput",
@@ -983,7 +983,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1685,
+            "line": 1828,
            "description": "returns the center of a connection point in canvas coords",
            "itemtype": "method",
            "name": "getConnectionPos",
@@ -1007,7 +1007,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1842,
+            "line": 1962,
            "description": "Collapse the node to make it smaller on the canvas",
            "itemtype": "method",
            "name": "collapse",
@@ -1015,7 +1015,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1855,
+            "line": 1975,
            "description": "Forces the node to do not move or realign on Z",
            "itemtype": "method",
            "name": "pin",
@@ -1023,7 +1023,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1912,
+            "line": 2032,
            "description": "clears all the data inside",
            "itemtype": "method",
            "name": "clear",
@@ -1031,10 +1031,40 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1966,
+            "line": 2086,
            "description": "assigns a graph, you can reasign graphs to the same canvas",
            "itemtype": "method",
            "name": "setGraph",
+            "params": [
+                {
+                    "name": "graph",
+                    "description": "",
+                    "type": "LGraph"
+                }
+            ],
+            "class": "LGraphCanvas"
+        },
+        {
+            "file": "../src/litegraph.js",
+            "line": 2114,
+            "description": "opens a graph contained inside a node in the current graph",
+            "itemtype": "method",
+            "name": "openSubgraph",
+            "params": [
+                {
+                    "name": "graph",
+                    "description": "",
+                    "type": "LGraph"
+                }
+            ],
+            "class": "LGraphCanvas"
+        },
+        {
+            "file": "../src/litegraph.js",
+            "line": 2141,
+            "description": "closes a subgraph contained inside a node",
+            "itemtype": "method",
+            "name": "closeSubgraph",
            "params": [
                {
                    "name": "assigns",
@@ -1046,7 +1076,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 1994,
+            "line": 2156,
            "description": "assigns a canvas",
            "itemtype": "method",
            "name": "setCanvas",
@@ -1061,7 +1091,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 2132,
+            "line": 2294,
            "description": "Used to attach the canvas in a popup",
            "itemtype": "method",
            "name": "getCanvasWindow",
@@ -1073,7 +1103,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 2144,
+            "line": 2306,
            "description": "starts rendering the content of the canvas when needed",
            "itemtype": "method",
            "name": "startRendering",
@@ -1081,7 +1111,7 @@
        },
        {
            "file": "../src/litegraph.js",
-            "line": 2175,
+            "line": 2337,
            "description": "stops rendering the content of the canvas (to save resources)",
            "itemtype": "method",
            "name": "stopRendering",
--- a/doc/files/.._src_litegraph.js.html
+++ b/doc/files/.._src_litegraph.js.html
@@ -379,7 +379,7 @@ LGraph.prototype.clear = function()
 	this.global_inputs = {};
 	this.global_outputs = {};

-	this.graph = {};
+	//this.graph = {};
 	this.debug = true;

 	this.change();
@@ -854,10 +854,18 @@ LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
 	return null;
 }

+// ********** GLOBALS *****************
+
 //Tell this graph has a global input of this type
 LGraph.prototype.addGlobalInput = function(name, type, value)
 {
-	this.global_inputs[name] = { type: type, value: value };
+	this.global_inputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalInputAdded)
+		this.onGlobalInputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global input
@@ -869,29 +877,117 @@ LGraph.prototype.setGlobalInputData = function(name, data)
 	input.value = data;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalInputData = function(name)
+{
+	var input = this.global_inputs[name];
+	if (!input)
+		return null;
+	return input.value;
+}
+
 //rename the global input
 LGraph.prototype.renameGlobalInput = function(old_name, name, data)
 {
+	if(!this.global_inputs[old_name])
+		return false;
+
+	if(this.global_inputs[name])
+	{
+		console.error(&quot;there is already one input with that name&quot;);
+		return false;
+	}
+
+	this.global_inputs[name] = this.global_inputs[old_name];
+	delete this.global_inputs[old_name];
+
+	if(this.onGlobalInputRenamed)
+		this.onGlobalInputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalInput = function(name)
+{
+	if(!this.global_inputs[name])
+		return false;
+
+	delete this.global_inputs[name];
+
+	if(this.onGlobalInputRemoved)
+		this.onGlobalInputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


 LGraph.prototype.addGlobalOutput = function(name, type, value)
 {
-	this.global_outputs[name] = { type: type, value: value };
+	this.global_outputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalOutputAdded)
+		this.onGlobalOutputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global output
-LGraph.prototype.setGlobalOutputData = function(name, data)
+LGraph.prototype.setGlobalOutputData = function(name, value)
 {
 	var output = this.global_outputs[ name ];
 	if (!output)
 		return;
-	output.value = data;
+	output.value = value;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalOutputData = function(name)
+{
+	var output = this.global_outputs[name];
+	if (!output)
+		return null;
+	return output.value;
+}
+
+
 //rename the global output
 LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
 {
+	if(!this.global_outputs[old_name])
+		return false;
+
+	if(this.global_outputs[name])
+	{
+		console.error(&quot;there is already one output with that name&quot;);
+		return false;
+	}
+
+	this.global_outputs[name] = this.global_outputs[old_name];
+	delete this.global_outputs[old_name];
+
+	if(this.onGlobalOutputRenamed)
+		this.onGlobalOutputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalOutput = function(name)
+{
+	if(!this.global_outputs[name])
+		return false;
+	delete this.global_outputs[name];
+
+	if(this.onGlobalOutputRemoved)
+		this.onGlobalOutputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


@@ -997,7 +1093,7 @@ LGraph.prototype.serialize = function()


 	var data = {
-		graph: this.graph,
+//		graph: this.graph,

 		iteration: this.iteration,
 		frame: this.frame,
@@ -1133,7 +1229,12 @@ LGraphNode.prototype.configure = function(info)
 		if(info[j] == null)
 			continue;
 		else if (typeof(info[j]) == &#x27;object&#x27;) //object
-			this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		{
+			if(this[j] &amp;&amp; this[j].configure)
+				this[j].configure( info[j] );
+			else
+				this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		}
 		else //value
 			this[j] = info[j];
 	}
@@ -1206,6 +1307,36 @@ LGraphNode.prototype.serialize = function()
 	return o;
 }

+
+/* Creates a clone of this node */
+LGraphNode.prototype.clone = function()
+{
+	var node = LiteGraph.createNode(this.type);
+
+	var data = this.serialize();
+	delete data[&quot;id&quot;];
+	node.configure(data);
+
+	/*
+	node.size = this.size.concat();
+	if(this.inputs)
+		for(var i = 0, l = this.inputs.length; i &lt; l; ++i)
+		{
+			if(node.findInputSlot( this.inputs[i].name ) == -1)
+				node.addInput( this.inputs[i].name, this.inputs[i].type );
+		}
+
+	if(this.outputs)
+		for(var i = 0, l = this.outputs.length; i &lt; l; ++i)
+		{
+			if(node.findOutputSlot( this.outputs[i].name ) == -1)
+				node.addOutput( this.outputs[i].name, this.outputs[i].type );
+		}
+	*/
+
+	return node;
+}
+
 //reduced version of objectivize: NOT FINISHED
 /*
 LGraphNode.prototype.reducedObjectivize = function()
@@ -1384,6 +1515,8 @@ LGraphNode.prototype.addOutput = function(name,type,extra_info)

 	if(!this.outputs) this.outputs = [];
 	this.outputs.push(o);
+	if(this.onOutputAdded)
+		this.onOutputAdded(o);
 	this.size = this.computeSize();
 }

@@ -1405,6 +1538,8 @@ LGraphNode.prototype.addOutputs = function(array)
 		if(!this.outputs)
 			this.outputs = [];
 		this.outputs.push(o);
+		if(this.onOutputAdded)
+			this.onOutputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1420,6 +1555,8 @@ LGraphNode.prototype.removeOutput = function(slot)
 	this.disconnectOutput(slot);
 	this.outputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onOutputRemoved)
+		this.onOutputRemoved(slot);
 }

 /**
@@ -1439,6 +1576,8 @@ LGraphNode.prototype.addInput = function(name,type,extra_info)
 	if(!this.inputs) this.inputs = [];
 	this.inputs.push(o);
 	this.size = this.computeSize();
+	if(this.onInputAdded)
+		this.onInputAdded(o);
 }

 /**
@@ -1459,6 +1598,8 @@ LGraphNode.prototype.addInputs = function(array)
 		if(!this.inputs)
 			this.inputs = [];
 		this.inputs.push(o);
+		if(this.onInputAdded)
+			this.onInputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1474,6 +1615,8 @@ LGraphNode.prototype.removeInput = function(slot)
 	this.disconnectInput(slot);
 	this.inputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onInputRemoved)
+		this.onInputRemoved(slot);
 }

 /**
@@ -1816,29 +1959,6 @@ LGraphNode.prototype.alignToGrid = function()
 	this.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE);
 }

-/* Creates a clone of this node */
-LGraphNode.prototype.clone = function()
-{
-	var node = LiteGraph.createNode(this.type);
-
-	node.size = this.size.concat();
-	if(this.inputs)
-		for(var i = 0, l = this.inputs.length; i &lt; l; ++i)
-		{
-			if(node.findInputSlot( this.inputs[i].name ) == -1)
-				node.addInput( this.inputs[i].name, this.inputs[i].type );
-		}
-
-	if(this.outputs)
-		for(var i = 0, l = this.outputs.length; i &lt; l; ++i)
-		{
-			if(node.findOutputSlot( this.outputs[i].name ) == -1)
-				node.addOutput( this.outputs[i].name, this.outputs[i].type );
-		}
-
-
-	return node;
-}

 /* Console output */
 LGraphNode.prototype.trace = function(msg)
@@ -2061,7 +2181,7 @@ LGraphCanvas.prototype.clear = function()
 * assigns a graph, you can reasign graphs to the same canvas
 *
 * @method setGraph
-* @param {LGraph} assigns a graph
+* @param {LGraph} graph
 */
 LGraphCanvas.prototype.setGraph = function(graph)
 {
@@ -2085,6 +2205,48 @@ LGraphCanvas.prototype.setGraph = function(graph)
 	this.setDirty(true,true);
 }

+/**
+* opens a graph contained inside a node in the current graph
+*
+* @method openSubgraph
+* @param {LGraph} graph
+*/
+LGraphCanvas.prototype.openSubgraph = function(graph)
+{
+	if(!graph) 
+		throw(&quot;graph cannot be null&quot;);
+
+	if(this.graph == graph)
+		throw(&quot;graph cannot be the same&quot;);
+
+	this.clear();
+
+	if(this.graph)
+	{
+		if(!this._graph_stack)
+			this._graph_stack = [];
+		this._graph_stack.push(this.graph);
+	}
+
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
+/**
+* closes a subgraph contained inside a node 
+*
+* @method closeSubgraph
+* @param {LGraph} assigns a graph
+*/
+LGraphCanvas.prototype.closeSubgraph = function()
+{
+	if(!this._graph_stack || this._graph_stack.length == 0)
+		return;
+	var graph = this._graph_stack.pop();
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
 /**
 * assigns a canvas
 *
@@ -3988,32 +4150,59 @@ LGraphCanvas.node_colors = {

 LGraphCanvas.prototype.getCanvasMenuOptions = function()
 {
-	return [
-		{content:&quot;Add Node&quot;, is_menu: true, callback: LGraphCanvas.onMenuAdd }
-		//{content:&quot;Collapse All&quot;, callback: LGraphCanvas.onMenuCollapseAll }
-	];
+	var options = null;
+	if(this.getMenuOptions)
+		options = this.getMenuOptions();
+	else
+	{
+		options = [
+			{content:&quot;Add Node&quot;, is_menu: true, callback: LGraphCanvas.onMenuAdd }
+			//{content:&quot;Collapse All&quot;, callback: LGraphCanvas.onMenuCollapseAll }
+		];
+
+		if(this._graph_stack)
+			options = [{content:&quot;Close subgraph&quot;, callback: this.closeSubgraph.bind(this) },null].concat(options);
+	}
+
+	if(this.getExtraMenuOptions)
+	{
+		var extra = this.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	return options;
 }

 LGraphCanvas.prototype.getNodeMenuOptions = function(node)
 {
-	var options = [
-		{content:&quot;Inputs&quot;, is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
-		{content:&quot;Outputs&quot;, is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
-		null,
-		{content:&quot;Collapse&quot;, callback: LGraphCanvas.onMenuNodeCollapse },
-		{content:&quot;Pin&quot;, callback: LGraphCanvas.onMenuNodePin },
-		{content:&quot;Colors&quot;, is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
-		{content:&quot;Shapes&quot;, is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
-		null,
-		{content:&quot;Clone&quot;, callback: LGraphCanvas.onMenuNodeClone },
-		null,
-		{content:&quot;Remove&quot;, callback: LGraphCanvas.onMenuNodeRemove }
-	];
+	var options = null;

-	if( node.clonable == false )
-		options[7].disabled = true;
-	if( node.removable == false )
-		options[9].disabled = true;
+	if(node.getMenuOptions)
+		options = node.getMenuOptions(this);
+	else
+		options = [
+			{content:&quot;Inputs&quot;, is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
+			{content:&quot;Outputs&quot;, is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
+			null,
+			{content:&quot;Collapse&quot;, callback: LGraphCanvas.onMenuNodeCollapse },
+			{content:&quot;Pin&quot;, callback: LGraphCanvas.onMenuNodePin },
+			{content:&quot;Colors&quot;, is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
+			{content:&quot;Shapes&quot;, is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
+			null
+		];
+
+	if(node.getExtraMenuOptions)
+	{
+		var extra = node.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	if( node.clonable !== false )
+			options.push({content:&quot;Clone&quot;, callback: LGraphCanvas.onMenuNodeClone });
+	if( node.removable !== false )
+			options.push(null,{content:&quot;Remove&quot;, callback: LGraphCanvas.onMenuNodeRemove });

 	if(node.onGetInputs)
 	{
--- a/src/litegraph.js
+++ b/src/litegraph.js
@@ -285,7 +285,7 @@ LGraph.prototype.clear = function()
 	this.global_inputs = {};
 	this.global_outputs = {};

-	this.graph = {};
+	//this.graph = {};
 	this.debug = true;

 	this.change();
@@ -760,10 +760,18 @@ LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
 	return null;
 }

+// ********** GLOBALS *****************
+
 //Tell this graph has a global input of this type
 LGraph.prototype.addGlobalInput = function(name, type, value)
 {
-	this.global_inputs[name] = { type: type, value: value };
+	this.global_inputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalInputAdded)
+		this.onGlobalInputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global input
@@ -775,29 +783,117 @@ LGraph.prototype.setGlobalInputData = function(name, data)
 	input.value = data;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalInputData = function(name)
+{
+	var input = this.global_inputs[name];
+	if (!input)
+		return null;
+	return input.value;
+}
+
 //rename the global input
 LGraph.prototype.renameGlobalInput = function(old_name, name, data)
 {
+	if(!this.global_inputs[old_name])
+		return false;
+
+	if(this.global_inputs[name])
+	{
+		console.error("there is already one input with that name");
+		return false;
+	}
+
+	this.global_inputs[name] = this.global_inputs[old_name];
+	delete this.global_inputs[old_name];
+
+	if(this.onGlobalInputRenamed)
+		this.onGlobalInputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalInput = function(name)
+{
+	if(!this.global_inputs[name])
+		return false;
+
+	delete this.global_inputs[name];
+
+	if(this.onGlobalInputRemoved)
+		this.onGlobalInputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


 LGraph.prototype.addGlobalOutput = function(name, type, value)
 {
-	this.global_outputs[name] = { type: type, value: value };
+	this.global_outputs[name] = { name: name, type: type, value: value };
+
+	if(this.onGlobalOutputAdded)
+		this.onGlobalOutputAdded(name, type);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
 }

 //assign a data to the global output
-LGraph.prototype.setGlobalOutputData = function(name, data)
+LGraph.prototype.setGlobalOutputData = function(name, value)
 {
 	var output = this.global_outputs[ name ];
 	if (!output)
 		return;
-	output.value = data;
+	output.value = value;
 }

+//assign a data to the global input
+LGraph.prototype.getGlobalOutputData = function(name)
+{
+	var output = this.global_outputs[name];
+	if (!output)
+		return null;
+	return output.value;
+}
+
+
 //rename the global output
 LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
 {
+	if(!this.global_outputs[old_name])
+		return false;
+
+	if(this.global_outputs[name])
+	{
+		console.error("there is already one output with that name");
+		return false;
+	}
+
+	this.global_outputs[name] = this.global_outputs[old_name];
+	delete this.global_outputs[old_name];
+
+	if(this.onGlobalOutputRenamed)
+		this.onGlobalOutputRenamed(old_name, name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+}
+
+LGraph.prototype.removeGlobalOutput = function(name)
+{
+	if(!this.global_outputs[name])
+		return false;
+	delete this.global_outputs[name];
+
+	if(this.onGlobalOutputRemoved)
+		this.onGlobalOutputRemoved(name);
+
+	if(this.onGlobalsChange)
+		this.onGlobalsChange();
+	return true;
 }


@@ -903,7 +999,7 @@ LGraph.prototype.serialize = function()


 	var data = {
-		graph: this.graph,
+//		graph: this.graph,

 		iteration: this.iteration,
 		frame: this.frame,
@@ -1039,7 +1135,12 @@ LGraphNode.prototype.configure = function(info)
 		if(info[j] == null)
 			continue;
 		else if (typeof(info[j]) == 'object') //object
-			this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		{
+			if(this[j] && this[j].configure)
+				this[j].configure( info[j] );
+			else
+				this[j] = LiteGraph.cloneObject(info[j], this[j]);
+		}
 		else //value
 			this[j] = info[j];
 	}
@@ -1112,6 +1213,36 @@ LGraphNode.prototype.serialize = function()
 	return o;
 }

+
+/* Creates a clone of this node */
+LGraphNode.prototype.clone = function()
+{
+	var node = LiteGraph.createNode(this.type);
+
+	var data = this.serialize();
+	delete data["id"];
+	node.configure(data);
+
+	/*
+	node.size = this.size.concat();
+	if(this.inputs)
+		for(var i = 0, l = this.inputs.length; i < l; ++i)
+		{
+			if(node.findInputSlot( this.inputs[i].name ) == -1)
+				node.addInput( this.inputs[i].name, this.inputs[i].type );
+		}
+
+	if(this.outputs)
+		for(var i = 0, l = this.outputs.length; i < l; ++i)
+		{
+			if(node.findOutputSlot( this.outputs[i].name ) == -1)
+				node.addOutput( this.outputs[i].name, this.outputs[i].type );
+		}
+	*/
+
+	return node;
+}
+
 //reduced version of objectivize: NOT FINISHED
 /*
 LGraphNode.prototype.reducedObjectivize = function()
@@ -1290,6 +1421,8 @@ LGraphNode.prototype.addOutput = function(name,type,extra_info)

 	if(!this.outputs) this.outputs = [];
 	this.outputs.push(o);
+	if(this.onOutputAdded)
+		this.onOutputAdded(o);
 	this.size = this.computeSize();
 }

@@ -1311,6 +1444,8 @@ LGraphNode.prototype.addOutputs = function(array)
 		if(!this.outputs)
 			this.outputs = [];
 		this.outputs.push(o);
+		if(this.onOutputAdded)
+			this.onOutputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1326,6 +1461,8 @@ LGraphNode.prototype.removeOutput = function(slot)
 	this.disconnectOutput(slot);
 	this.outputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onOutputRemoved)
+		this.onOutputRemoved(slot);
 }

 /**
@@ -1345,6 +1482,8 @@ LGraphNode.prototype.addInput = function(name,type,extra_info)
 	if(!this.inputs) this.inputs = [];
 	this.inputs.push(o);
 	this.size = this.computeSize();
+	if(this.onInputAdded)
+		this.onInputAdded(o);
 }

 /**
@@ -1365,6 +1504,8 @@ LGraphNode.prototype.addInputs = function(array)
 		if(!this.inputs)
 			this.inputs = [];
 		this.inputs.push(o);
+		if(this.onInputAdded)
+			this.onInputAdded(o);
 	}

 	this.size = this.computeSize();
@@ -1380,6 +1521,8 @@ LGraphNode.prototype.removeInput = function(slot)
 	this.disconnectInput(slot);
 	this.inputs.splice(slot,1);
 	this.size = this.computeSize();
+	if(this.onInputRemoved)
+		this.onInputRemoved(slot);
 }

 /**
@@ -1722,29 +1865,6 @@ LGraphNode.prototype.alignToGrid = function()
 	this.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE);
 }

-/* Creates a clone of this node */
-LGraphNode.prototype.clone = function()
-{
-	var node = LiteGraph.createNode(this.type);
-
-	node.size = this.size.concat();
-	if(this.inputs)
-		for(var i = 0, l = this.inputs.length; i < l; ++i)
-		{
-			if(node.findInputSlot( this.inputs[i].name ) == -1)
-				node.addInput( this.inputs[i].name, this.inputs[i].type );
-		}
-
-	if(this.outputs)
-		for(var i = 0, l = this.outputs.length; i < l; ++i)
-		{
-			if(node.findOutputSlot( this.outputs[i].name ) == -1)
-				node.addOutput( this.outputs[i].name, this.outputs[i].type );
-		}
-
-
-	return node;
-}

 /* Console output */
 LGraphNode.prototype.trace = function(msg)
@@ -1967,7 +2087,7 @@ LGraphCanvas.prototype.clear = function()
 * assigns a graph, you can reasign graphs to the same canvas
 *
 * @method setGraph
-* @param {LGraph} assigns a graph
+* @param {LGraph} graph
 */
 LGraphCanvas.prototype.setGraph = function(graph)
 {
@@ -1991,6 +2111,48 @@ LGraphCanvas.prototype.setGraph = function(graph)
 	this.setDirty(true,true);
 }

+/**
+* opens a graph contained inside a node in the current graph
+*
+* @method openSubgraph
+* @param {LGraph} graph
+*/
+LGraphCanvas.prototype.openSubgraph = function(graph)
+{
+	if(!graph) 
+		throw("graph cannot be null");
+
+	if(this.graph == graph)
+		throw("graph cannot be the same");
+
+	this.clear();
+
+	if(this.graph)
+	{
+		if(!this._graph_stack)
+			this._graph_stack = [];
+		this._graph_stack.push(this.graph);
+	}
+
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
+/**
+* closes a subgraph contained inside a node 
+*
+* @method closeSubgraph
+* @param {LGraph} assigns a graph
+*/
+LGraphCanvas.prototype.closeSubgraph = function()
+{
+	if(!this._graph_stack || this._graph_stack.length == 0)
+		return;
+	var graph = this._graph_stack.pop();
+	graph.attachCanvas(this);
+	this.setDirty(true,true);
+}
+
 /**
 * assigns a canvas
 *
@@ -3894,32 +4056,59 @@ LGraphCanvas.node_colors = {

 LGraphCanvas.prototype.getCanvasMenuOptions = function()
 {
-	return [
-		{content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd }
-		//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
-	];
+	var options = null;
+	if(this.getMenuOptions)
+		options = this.getMenuOptions();
+	else
+	{
+		options = [
+			{content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd }
+			//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
+		];
+
+		if(this._graph_stack)
+			options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options);
+	}
+
+	if(this.getExtraMenuOptions)
+	{
+		var extra = this.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	return options;
 }

 LGraphCanvas.prototype.getNodeMenuOptions = function(node)
 {
-	var options = [
-		{content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
-		{content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
-		null,
-		{content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse },
-		{content:"Pin", callback: LGraphCanvas.onMenuNodePin },
-		{content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
-		{content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
-		null,
-		{content:"Clone", callback: LGraphCanvas.onMenuNodeClone },
-		null,
-		{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove }
-	];
+	var options = null;

-	if( node.clonable == false )
-		options[7].disabled = true;
-	if( node.removable == false )
-		options[9].disabled = true;
+	if(node.getMenuOptions)
+		options = node.getMenuOptions(this);
+	else
+		options = [
+			{content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs },
+			{content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs },
+			null,
+			{content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse },
+			{content:"Pin", callback: LGraphCanvas.onMenuNodePin },
+			{content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors },
+			{content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes },
+			null
+		];
+
+	if(node.getExtraMenuOptions)
+	{
+		var extra = node.getExtraMenuOptions(this);
+		extra.push(null);
+		options = extra.concat( options );
+	}
+
+	if( node.clonable !== false )
+			options.push({content:"Clone", callback: LGraphCanvas.onMenuNodeClone });
+	if( node.removable !== false )
+			options.push(null,{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove });

 	if(node.onGetInputs)
 	{
--- a/src/nodes/base.js
+++ b/src/nodes/base.js
@@ -5,15 +5,32 @@
 //Input for a subgraph
 function GlobalInput()
 {
+	this.title = "Input";
+
+	//random name to avoid problems with other outputs when added
+	var genname = "input_" + (Math.random()*1000).toFixed();
+	this.properties = { name: genname, type: "number" };
 	this.addOutput("value",0);
 }

+GlobalInput.title = "Input";
+GlobalInput.desc = "Input of the graph";
+
+GlobalInput.prototype.onAdded = function()
+{
+	this.graph.addGlobalInput( this.properties.name, this.properties.type );
+}
+
 GlobalInput.prototype.onExecute = function()
 {
-	var name = this.title;
-	//read input
-	var	value = node.graph.global_inputs[name];
-	this.setOutputData(0,value);
+	var name = this.properties.name;
+
+	//read from global input
+	var	data = this.graph.global_inputs[name];
+	if(!data) return;
+
+	//put through output
+	this.setOutputData(0,data.value);
 }

 LiteGraph.registerNodeType("graph/input", GlobalInput);
@@ -25,11 +42,14 @@ function GlobalOutput()
 	this.title = "Output";

 	//random name to avoid problems with other outputs when added
-	var genname = "input_" + (Math.random()*1000).toFixed();
+	var genname = "output_" + (Math.random()*1000).toFixed();
 	this.properties = { name: genname, type: "number" };
 	this.addInput("value","number");
 }

+GlobalOutput.title = "Ouput";
+GlobalOutput.desc = "Output of the graph";
+
 GlobalOutput.prototype.onAdded = function()
 {
 	var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type );
@@ -37,8 +57,7 @@ GlobalOutput.prototype.onAdded = function()

 GlobalOutput.prototype.onExecute = function()
 {
-	var	value = this.getInputData(0);
-	this.graph.setGlobalOutputData( this.properties.name, value );
+	this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) );
 }

 LiteGraph.registerNodeType("graph/output", GlobalOutput);
@@ -47,29 +66,77 @@ LiteGraph.registerNodeType("graph/output", GlobalOutput);
 //Subgraph: a node that contains a graph
 function Subgraph()
 {
+	var that = this;
 	this.subgraph = new LGraph();
+	this.subgraph._subgraph_node = this;
+	this.subgraph._is_subgraph = true;
+	this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this);
+	this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this);
+
 	this.bgcolor = "#FA3";
 }

+Subgraph.title = "Subgraph";
+Subgraph.desc = "Graph inside a node";
+
+Subgraph.prototype.onSubgraphNewGlobalInput = function(name, type)
+{
+	this.addInput(name, type);
+}
+
+Subgraph.prototype.onSubgraphNewGlobalOutput = function(name, type)
+{
+	this.addOutput(name, type);
+}
+
+Subgraph.prototype.getExtraMenuOptions = function(graphcanvas)
+{
+	var that = this;
+	return [ {content:"Open", callback: 
+		function() { 
+			graphcanvas.openSubgraph( that.subgraph );
+		}
+	}];
+}
+
 Subgraph.prototype.onExecute = function()
 {
 	//send inputs to subgraph global inputs
-	for(var i in this.inputs)
-	{
-		var input = this.inputs[i];
+	if(this.inputs)
+		for(var i = 0; i < this.inputs.length; i++)
+		{
+			var input = this.inputs[i];
+			var value = this.getInputData(i);
+			this.subgraph.setGlobalInputData( input.name, value );
+		}

-		//this.subgraph.setGlobalInputData( input.name, input.value );
-	}
+	//execute
+	this.subgraph.runStep();

 	//send subgraph global outputs to outputs
+	if(this.outputs)
+		for(var i = 0; i < this.outputs.length; i++)
+		{
+			var output = this.outputs[i];
+			var value = this.subgraph.getGlobalOutputData( output.name );
+			this.setOutputData(i, value);
+		}
 }

 Subgraph.prototype.configure = function(o)
 {
-	LGraph.prototype.configure.call(this, o);
-	//after configure, ...
+	LGraphNode.prototype.configure.call(this, o);
+	//this.subgraph.configure(o.graph);
 }

+Subgraph.prototype.serialize = function()
+{
+	var data = LGraphNode.prototype.serialize.call(this);
+	data.subgraph = this.subgraph.serialize();
+	return data;
+}
+
+
 LiteGraph.registerNodeType("graph/subgraph", Subgraph);


--- a/src/nodes/interface.js
+++ b/src/nodes/interface.js
@@ -3,8 +3,8 @@

 	function WidgetKnob()
 	{
-		this.size = [64,84];
 		this.addOutput("",'number');
+		this.size = [64,84];
 		this.properties = {min:0,max:1,value:0.5,wcolor:"#7AF",size:50};
 	}

@@ -42,12 +42,14 @@

 		ctx.restore();

-		ctx.font = "bold 16px Criticized,Tahoma";
-		ctx.fillStyle="rgba(100,100,100,0.8)";
-		ctx.textAlign = "center";
-
-		ctx.fillText(this.name.toUpperCase(), this.size[0] * 0.5, 18 );
-		ctx.textAlign = "left";
+		if(this.title)
+		{
+			ctx.font = "bold 16px Criticized,Tahoma";
+			ctx.fillStyle="rgba(100,100,100,0.8)";
+			ctx.textAlign = "center";
+			ctx.fillText(this.title.toUpperCase(), this.size[0] * 0.5, 18 );
+			ctx.textAlign = "left";
+		}
 	}

 	WidgetKnob.prototype.onDrawVectorKnob = function(ctx)
--- a/src/nodes/math.js
+++ b/src/nodes/math.js
@@ -41,6 +41,7 @@ function MathClamp()

 MathClamp.title = "Clamp";
 MathClamp.desc = "Clamp number between min and max";
+MathClamp.filter = "shader";

 MathClamp.prototype.onExecute = function()
 {
@@ -51,6 +52,14 @@ MathClamp.prototype.onExecute = function()
 	this.setOutputData(0, v );
 }

+MathClamp.prototype.getCode = function(lang)
+{
+	var code = "";
+	if(this.isInputConnected(0))
+		code += "clamp({{0}}," + this.properties.min + "," + this.properties.max + ")";
+	return code;
+}
+
 LiteGraph.registerNodeType("math/clamp", MathClamp );


@@ -90,7 +99,7 @@ MathFloor.prototype.onExecute = function()
 {
 	var v = this.getInputData(0);
 	if(v == null) return;
-	this.setOutputData(0, v|1 );
+	this.setOutputData(0, Math.floor(v) );
 }

 LiteGraph.registerNodeType("math/floor", MathFloor );
@@ -284,6 +293,7 @@ function MathTrigonometry()

 MathTrigonometry.title = "Trigonometry";
 MathTrigonometry.desc = "Sin Cos Tan";
+MathTrigonometry.filter = "shader";

 MathTrigonometry.prototype.onExecute = function()
 {