links system changed

build/litegraph.js

@@ -25,7 +25,7 @@ var LiteGraph = {
 	NODE_DEFAULT_BOXCOLOR: "#AEF",
 	NODE_DEFAULT_SHAPE: "box",
 	MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
-	DEFAULT_POSITION: [100,100],
+	DEFAULT_POSITION: [100,100],//default node position
 	node_images_path: "",
 
 	debug: false,
@@ -87,45 +87,6 @@ var LiteGraph = {
 
 		var node = new base_class( name );
 
-		/*
-		if (base_class.prototype) //is a class
-		{
-			node = new base_class(name);
-		}
-		else
-		{
-			node = new LGraphNode(name);
-			node.inputs = [];
-			node.outputs = [];
-
-			//add inputs and outputs
-			for (var i in prototype)
-			{
-				if(i == "inputs")
-				{
-					for(var j in prototype[i])
-						node.addInput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] );
-				}
-				else if(i == "outputs")
-				{
-					for(var j in prototype[i])
-						node.addOutput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] );
-				}
-				else
-				{
-					if( prototype[i].concat ) //array
-						node[i] = prototype[i].concat();
-					else if (typeof(prototype[i]) == 'object')
-						node[i] = LiteGraph.cloneObject(prototype[i]); //slow but safe
-					else
-						node[i] = prototype[i];
-				}
-			}
-			//set size
-			if(base_class.size) node.size = base_class.size.concat(); //save size
-		}
-		*/
-
 		node.type = type;
 		if(!node.title) node.title = title;
 		if(!node.flags) node.flags = {};
@@ -299,7 +260,7 @@ LGraph.prototype.clear = function()
 
 	//links
 	this.last_link_id = 0;
-	this.links = {};
+	this.links = {}; //container with all the links
 
 	//iterations
 	this.iteration = 0;
@@ -513,20 +474,22 @@ LGraph.prototype.computeExecutionOrder = function()
 				//for every connection
 				for(var j = 0; j < output.links.length; j++)
 				{
-					var link = output.links[j];
+					var link_id = output.links[j];
+					var link = this.links[link_id];
+					if(!link) continue;
 
 					//already visited link (ignore it)
-					if(visited_links[ link[0] ])
+					if(visited_links[ link.id ])
 						continue;
 
-					var target_node = this.getNodeById( link[3] );
+					var target_node = this.getNodeById( link.target_id );
 					if(target_node == null)
 					{
-						visited_links[ link[0] ] = true;
+						visited_links[ link.id ] = true;
 						continue;
 					}
 
-					visited_links[link[0]] = true; //mark as visited
+					visited_links[link.id] = true; //mark as visited
 					remaining_links[target_node.id] -= 1; //reduce the number of links remaining
 					if (remaining_links[target_node.id] == 0)
 						S.push(target_node); //if no more links, then add to Starters array
@@ -617,7 +580,7 @@ LGraph.prototype.sendActionToCanvas = function(action, params)
 * @param {LGraphNode} node the instance of the node
 */
 
-LGraph.prototype.add = function(node)
+LGraph.prototype.add = function(node, skip_compute_order)
 {
 	if(!node || (node.id != -1 && this._nodes_by_id[node.id] != null))
 		return; //already added
@@ -645,8 +608,9 @@ LGraph.prototype.add = function(node)
 
 	if(this.config.align_to_grid)
 		node.alignToGrid();
-		
-	this.updateExecutionOrder();
+
+	if(!skip_compute_order)
+		this.updateExecutionOrder();
 
 	if(this.onNodeAdded)
 		this.onNodeAdded(node);
@@ -928,6 +892,11 @@ LGraph.prototype.serialize = function()
 	for (var i in this._nodes)
 		nodes_info.push( this._nodes[i].serialize() );
 
+	//remove data from links, we dont want to store it
+	for (var i in this.links)
+		this.links[i].data = null;
+
+
 	var data = {
 		graph: this.graph,
 
@@ -935,6 +904,7 @@ LGraph.prototype.serialize = function()
 		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: nodes_info
@@ -967,8 +937,8 @@ LGraph.prototype.configure = function(data, keep_old)
 	for (var i in nodes)
 	{
 		var n_info = nodes[i]; //stored info
-		var n = LiteGraph.createNode( n_info.type, n_info.title );
-		if(!n)
+		var node = LiteGraph.createNode( n_info.type, n_info.title );
+		if(!node)
 		{
 			if(LiteGraph.debug)
 				console.log("Node not found: " + n_info.type);
@@ -976,10 +946,12 @@ LGraph.prototype.configure = function(data, keep_old)
 			continue;
 		}
 
-		n.configure(n_info);
-		this.add(n);
+		node.id = n_info.id; //id it or it will create a new id
+		this.add(node, true); //add before configure, otherwise configure cannot create links
+		node.configure(n_info);
 	}
 
+	this.updateExecutionOrder();
 	this.setDirtyCanvas(true,true);
 	return error;
 }
@@ -1050,7 +1022,7 @@ function LGraphNode(title)
 }
 
 /**
-* configure a node from an object 
+* configure a node from an object containing the serialized info
 * @method configure
 */
 LGraphNode.prototype.configure = function(info)
@@ -1061,39 +1033,38 @@ LGraphNode.prototype.configure = function(info)
 
 		if(info[j] == null)
 			continue;
-		else if( info[j].concat ) //array
-			this[j] = info[j].concat();
 		else if (typeof(info[j]) == 'object') //object
 			this[j] = LiteGraph.cloneObject(info[j], this[j] || {} );
 		else //value
 			this[j] = info[j];
 	}
-}
 
-/* Copy all the info from one object to this node (used for serialization) */
-LGraphNode.prototype.copyFromObject = function(info, ignore_connections)
-{
-	var outputs = null;
-	var inputs = null;
-	var properties = null;
-	var local_data = null;
-
-	for (var j in info)
+	//FOR LEGACY, PLEASE REMOVE ON NEXT VERSION
+	for(var i in this.inputs)
 	{
-		if(ignore_connections && (j == "outputs" || j == "inputs"))
+		var input = this.inputs[i];
+		if(!input.link || !input.link.length )
 			continue;
-
-		if(j == "console") continue;
-
-		if(info[j] == null)
+		var link = input.link;
+		if(typeof(link) != "object")
 			continue;
-		else if( info[j].concat ) //array
-			this[j] = info[j].concat();
-		else if (typeof(info[j]) == 'object') //object
-			this[j] = LiteGraph.cloneObject(info[j]);
-		else //value
-			this[j] = info[j];
+		input.link = link[0];
+		this.graph.links[ link[0] ] = { id: link[0], origin_id: link[1], origin_slot: link[2], target_id: link[3], target_slot: link[4] };
 	}
+	for(var i in this.outputs)
+	{
+		var output = this.outputs[i];
+		if(!output.links || output.links.length == 0)
+			continue;
+		for(var j in output.links)
+		{
+			var link = output.links[j];
+			if(typeof(link) != "object")
+				continue;
+			output.links[j] = link[0];
+		}
+	}
+
 }
 
 /**
@@ -1194,7 +1165,10 @@ LGraphNode.prototype.setOutputData = function(slot,data)
 	if(slot > -1 && slot < this.outputs.length && this.outputs[slot] && this.outputs[slot].links != null)
 	{
 		for(var i = 0; i < this.outputs[slot].links.length; i++)
-			this.graph.links[ this.outputs[slot].links[i][0] ] = data;
+		{
+			var link_id = this.outputs[slot].links[i];
+			this.graph.links[ link_id ].data = data;
+		}
 	}
 }
 
@@ -1208,7 +1182,7 @@ LGraphNode.prototype.getInputData = function(slot)
 {
 	if(!this.inputs) return null;
 	if(slot < this.inputs.length && this.inputs[slot].link != null)
-		return this.graph.links[ this.inputs[slot].link[0] ];
+		return this.graph.links[ this.inputs[slot].link ].data;
 	return null;
 }
 
@@ -1280,7 +1254,7 @@ LGraphNode.prototype.getOutputNodes = function(slot)
 		var output = this.outputs[slot];
 		var r = [];
 		for(var i = 0; i < output.length; i++)
-			r.push( this.graph.getNodeById( output.links[i][3] ));
+			r.push( this.graph.getNodeById( output.links[i].target_id ));
 		return r;
 	}
 	return null;
@@ -1453,7 +1427,7 @@ LGraphNode.prototype.getBounding = function()
 */
 LGraphNode.prototype.isPointInsideNode = function(x,y)
 {
-	var margin_top = this.graph.isLive() ? 0 : 20;
+	var margin_top = this.graph && this.graph.isLive() ? 0 : 20;
 	if(this.flags.collapsed)
 	{
 		//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
@@ -1552,12 +1526,14 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
 			output.type == node.inputs[target_slot].type) //same type
 	{
 		//info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
-		var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
+		//var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
+		var link = { id: this.graph.last_link_id++, origin_id: this.id, origin_slot: slot, target_id: node.id, target_slot: target_slot };
+		this.graph.links[ link.id ] = link;
 
 		//connect
 		if( output.links == null )	output.links = [];
-		output.links.push(link);
-		node.inputs[target_slot].link = link;
+		output.links.push( link.id );
+		node.inputs[target_slot].link = link.id;
 
 		this.setDirtyCanvas(false,true);
 		this.graph.onConnectionChange();
@@ -1600,13 +1576,15 @@ LGraphNode.prototype.disconnectOutput = function(slot, target_node)
 	{
 		for(var i = 0, l = output.links.length; i < l; i++)
 		{
-			var link = output.links[i];
+			var link_id = output.links[i];
+			var link_info = this.graph.links[ link_id ];
+
 			//is the link we are searching for...
-			if( link[3] == target_node.id )
+			if( link_info.target_id == target_node.id )
 			{
 				output.links.splice(i,1); //remove here
-				target_node.inputs[ link[4] ].link = null; //remove there
-				delete this.graph.links[link[0]]; //remove the link from the links pool
+				target_node.inputs[ link_info.target_slot ].link = null; //remove there
+				delete this.graph.links[ link_id ]; //remove the link from the links pool
 				break;
 			}
 		}
@@ -1615,10 +1593,12 @@ LGraphNode.prototype.disconnectOutput = function(slot, target_node)
 	{
 		for(var i = 0, l = output.links.length; i < l; i++)
 		{
-			var link = output.links[i];
-			var target_node = this.graph.getNodeById( link[3] );
+			var link_id = output.links[i];
+			var link_info = this.graph.links[ link_id ];
+
+			var target_node = this.graph.getNodeById( link_info.target_id );
 			if(target_node)
-				target_node.inputs[ link[4] ].link = null; //remove other side link
+				target_node.inputs[ link_info.target_slot ].link = null; //remove other side link
 		}
 		output.links = null;
 	}
@@ -1656,21 +1636,24 @@ LGraphNode.prototype.disconnectInput = function(slot)
 
 	var input = this.inputs[slot];
 	if(!input) return false;
-	var link = this.inputs[slot].link;
+	var link_id = this.inputs[slot].link;
 	this.inputs[slot].link = null;
 
 	//remove other side
-	var node = this.graph.getNodeById( link[1] );
+	var link_info = this.graph.links[ link_id ];
+	var node = this.graph.getNodeById( link_info.origin_id );
 	if(!node) return false;
 
-	var output = node.outputs[ link[2] ];
+	var output = node.outputs[ link_info.origin_slot ];
 	if(!output || !output.links || output.links.length == 0) 
 		return false;
 
+	//check outputs
 	for(var i = 0, l = output.links.length; i < l; i++)
 	{
-		var link = output.links[i];
-		if( link[3] == this.id )
+		var link_id = output.links[i];
+		var link_info = this.graph.links[ link_id ];
+		if( link_info.target_id == this.id )
 		{
 			output.links.splice(i,1);
 			break;
@@ -3438,12 +3421,15 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
 			for(var i in node.inputs)
 			{
 				var input = node.inputs[i];
-				if(!input || !input.link ) continue;
-				var link = input.link;
+				if(!input || input.link == null) 
+					continue;
+				var link_id = input.link;
+				var link = this.graph.links[ link_id ];
+				if(!link) continue;
 
-				var start_node = this.graph.getNodeById( link[1] );
+				var start_node = this.graph.getNodeById( link.origin_id );
 				if(start_node == null) continue;
-				var start_node_slot = link[2];
+				var start_node_slot = link.origin_slot;
 				var start_node_slotpos = null;
 
 				if(start_node_slot == -1)

build/litegraph.min.js

@@ -9,37 +9,39 @@ LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.s
 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")}};
 LGraph.prototype.runStep=function(a){a=a||1;var b=window.performance.now();this.globaltime=0.001*(b-this.starttime);try{for(var c=0;c<a;c++)if(this.sendEventToAllNodes("onExecute"),this.fixedtime+=this.fixedtime_lapse,this.onExecuteStep)this.onExecuteStep();if(this.onAfterExecute)this.onAfterExecute();this.errors_in_execution=!1}catch(d){this.errors_in_execution=!0;if(LiteGraph.throw_errors)throw d;LiteGraph.debug&&console.log("Error during execution: "+d);this.stop()}a=window.performance.now()-b;
 0==a&&(a=1);this.elapsed_time=0.001*a;this.globaltime+=0.001*a;this.iteration+=1};LGraph.prototype.updateExecutionOrder=function(){this._nodes_in_order=this.computeExecutionOrder()};
-LGraph.prototype.computeExecutionOrder=function(){var a=[],b=[],c={},d={},e={},f;for(f in this._nodes){var g=this._nodes[f];c[g.id]=g;var h=0;if(g.inputs)for(var l=0,k=g.inputs.length;l<k;l++)g.inputs[l]&&null!=g.inputs[l].link&&(h+=1);0==h?b.push(g):e[g.id]=h}for(;0!=b.length;)if(g=b.shift(),a.push(g),delete c[g.id],g.outputs)for(f=0;f<g.outputs.length;f++)if(h=g.outputs[f],null!=h&&null!=h.links&&0!=h.links.length)for(l=0;l<h.links.length;l++)if(k=h.links[l],!d[k[0]]){var n=this.getNodeById(k[3]);
-null==n?d[k[0]]=!0:(d[k[0]]=!0,e[n.id]-=1,0==e[n.id]&&b.push(n))}for(f in c)a.push(c[f]);a.length!=this._nodes.length&&LiteGraph.debug&&console.log("something went wrong, nodes missing");for(f in a)a[f].order=f;return a};LGraph.prototype.getTime=function(){return this.globaltime};LGraph.prototype.getFixedTime=function(){return this.fixedtime};LGraph.prototype.getElapsedTime=function(){return this.elapsed_time};
+LGraph.prototype.computeExecutionOrder=function(){var a=[],b=[],c={},d={},e={},f;for(f in this._nodes){var g=this._nodes[f];c[g.id]=g;var h=0;if(g.inputs)for(var l=0,k=g.inputs.length;l<k;l++)g.inputs[l]&&null!=g.inputs[l].link&&(h+=1);0==h?b.push(g):e[g.id]=h}for(;0!=b.length;)if(g=b.shift(),a.push(g),delete c[g.id],g.outputs)for(f=0;f<g.outputs.length;f++)if(h=g.outputs[f],null!=h&&null!=h.links&&0!=h.links.length)for(l=0;l<h.links.length;l++)if((k=this.links[h.links[l]])&&!d[k.id]){var n=this.getNodeById(k.target_id);
+null==n?d[k.id]=!0:(d[k.id]=!0,e[n.id]-=1,0==e[n.id]&&b.push(n))}for(f in c)a.push(c[f]);a.length!=this._nodes.length&&LiteGraph.debug&&console.log("something went wrong, nodes missing");for(f in a)a[f].order=f;return a};LGraph.prototype.getTime=function(){return this.globaltime};LGraph.prototype.getFixedTime=function(){return this.fixedtime};LGraph.prototype.getElapsedTime=function(){return this.elapsed_time};
 LGraph.prototype.sendEventToAllNodes=function(a,b){var c=this._nodes_in_order?this._nodes_in_order:this._nodes,d;for(d in c)if(c[d][a])c[d][a](b)};LGraph.prototype.sendActionToCanvas=function(a,b){if(this.list_of_graphcanvas)for(var c in this.list_of_graphcanvas){var d=this.list_of_graphcanvas[c];d[a]&&d[a].apply(d,b)}};
-LGraph.prototype.add=function(a){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();this.updateExecutionOrder();if(this.onNodeAdded)this.onNodeAdded(a);this.setDirtyCanvas(!0);this.change();return a}};
+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.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());return{graph:this.graph,iteration:this.iteration,frame:this.frame,last_node_id:this.last_node_id,last_link_id:this.last_link_id,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.configure(f),this.add(g)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}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]=a[b].concat?a[b].concat():"object"==typeof a[b]?LiteGraph.cloneObject(a[b],this[b]||{}):a[b])};
-LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?LiteGraph.cloneObject(a[c]):a[c])};
-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][0]]=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[0]]: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][3]));return b}return null};
+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.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.isPointInsideNode=function(a,b){var c=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.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&&
-console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a=[this.graph.last_link_id++,this.id,a,b.id,c],null==d.links&&(d.links=[]),d.links.push(a),b.inputs[c].link=a,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange();return!0};
-LGraphNode.prototype.disconnectOutput=function(a,b){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;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d<e;d++){var f=c.links[d];if(f[3]==b.id){c.links.splice(d,1);b.inputs[f[4]].link=null;delete this.graph.links[f[0]];
-break}}else{d=0;for(e=c.links.length;d<e;d++)if(f=c.links[d],b=this.graph.getNodeById(f[3]))b.inputs[f[4]].link=null;c.links=null}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
-LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a=this.findInputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.inputs||a>=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;a=this.graph.getNodeById(b[1]);if(!a)return!1;a=a.outputs[b[2]];if(!a||!a.links||0==a.links.length)return!1;for(var c=
-0,d=a.links.length;c<d;c++)if(b=a.links[c],b[3]==this.id){a.links.splice(c,1);break}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
+console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a={id:this.graph.last_link_id++,origin_id:this.id,origin_slot:a,target_id:b.id,target_slot:c},this.graph.links[a.id]=a,null==d.links&&(d.links=[]),d.links.push(a.id),b.inputs[c].link=a.id,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange();
+return!0};
+LGraphNode.prototype.disconnectOutput=function(a,b){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;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d<e;d++){var f=c.links[d],g=this.graph.links[f];if(g.target_id==b.id){c.links.splice(d,1);
+b.inputs[g.target_slot].link=null;delete this.graph.links[f];break}}else{d=0;for(e=c.links.length;d<e;d++)if(f=c.links[d],g=this.graph.links[f],b=this.graph.getNodeById(g.target_id))b.inputs[g.target_slot].link=null;c.links=null}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
+LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a=this.findInputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.inputs||a>=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;b=this.graph.links[b];a=this.graph.getNodeById(b.origin_id);if(!a)return!1;a=a.outputs[b.origin_slot];if(!a||!a.links||
+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};
@@ -94,8 +96,8 @@ LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||Li
 b.beginPath(),"round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.globalAlpha=d,b.font=this.title_text_font,(a=a.getTitle())&&0.8<this.scale&&(b.fillStyle="#222",b.fillText(a,16,13-e)))};
 LGraphCanvas.prototype.drawNodeCollapsed=function(a,b,c,d){b.strokeStyle=c||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=d||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_COLLAPSED_RADIUS;d=a.shape||"box";"circle"==d?(b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],c,0,2*Math.PI),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],0.5*c,0,2*Math.PI)):"round"==d?(b.beginPath(),b.roundRect(0.5*a.size[0]-
 c,0.5*a.size[1]-c,2*c,2*c,5),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.roundRect(0.5*a.size[0]-0.5*c,0.5*a.size[1]-0.5*c,c,c,2)):(b.beginPath(),b.rect(0,0,a.size[0],2*c),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.rect(0.5*c,0.5*c,c,c));b.fill()};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
-LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha=this.editor_alpha;for(var b in this.graph._nodes){var c=this.graph._nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&e.link){var f=e.link,e=this.graph.getNodeById(f[1]);if(null!=e){var g=f[2],f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];null==e&&(e=LGraphCanvas.link_colors[c.id%
-LGraphCanvas.link_colors.length]);this.renderLink(a,f,c.getConnectionPos(!0,d),e)}}}}a.globalAlpha=1};
+LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha=this.editor_alpha;for(var b in this.graph._nodes){var c=this.graph._nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&null!=e.link){var f=this.graph.links[e.link];if(f&&(e=this.graph.getNodeById(f.origin_id),null!=e)){var g=f.origin_slot,f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];
+null==e&&(e=LGraphCanvas.link_colors[c.id%LGraphCanvas.link_colors.length]);this.renderLink(a,f,c.getConnectionPos(!0,d),e)}}}}a.globalAlpha=1};
 LGraphCanvas.prototype.renderLink=function(a,b,c,d){if(this.highquality_render){var e=distance(b,c);this.render_connections_border&&0.6<this.scale&&(a.lineWidth=this.connections_width+4);a.beginPath();this.render_curved_connections?(a.moveTo(b[0],b[1]),a.bezierCurveTo(b[0]+0.25*e,b[1],c[0]-0.25*e,c[1],c[0],c[1])):(a.moveTo(b[0]+10,b[1]),a.lineTo(0.5*(b[0]+10+(c[0]-10)),b[1]),a.lineTo(0.5*(b[0]+10+(c[0]-10)),c[1]),a.lineTo(c[0]-10,c[1]));this.render_connections_border&&0.6<this.scale&&(a.strokeStyle=
 "rgba(0,0,0,0.5)",a.stroke());a.lineWidth=this.connections_width;a.fillStyle=a.strokeStyle=d;a.stroke();if(this.render_connection_arrows&&0.6<this.scale){d=this.computeConnectionPoint(b,c,0.5);var e=this.computeConnectionPoint(b,c,0.51),f=0,f=this.render_curved_connections?-Math.atan2(e[0]-d[0],e[1]-d[1]):c[1]>b[1]?0:Math.PI;a.save();a.translate(d[0],d[1]);a.rotate(f);a.beginPath();a.moveTo(-5,-5);a.lineTo(0,5);a.lineTo(5,-5);a.fill();a.restore()}}else a.beginPath(),a.moveTo(b[0],b[1]),a.lineTo(c[0],
 c[1]),a.stroke()};LGraphCanvas.prototype.computeConnectionPoint=function(a,b,c){var d=distance(a,b),e=[a[0]+0.25*d,a[1]],d=[b[0]-0.25*d,b[1]],f=(1-c)*(1-c)*(1-c),g=3*(1-c)*(1-c)*c,h=3*(1-c)*c*c;c*=c*c;return[f*a[0]+g*e[0]+h*d[0]+c*b[0],f*a[1]+g*e[1]+h*d[1]+c*b[1]]};

css/litegraph-editor.css

@@ -102,7 +102,6 @@
 	background-color: #3F3F3F;
 	/*box-shadow: 0 0 3px black;*/
 	padding: 4px 10px;
-	line-height: 20px;
 	cursor: pointer;
 	transition: all 1s;
 	-moz-transition: all 1s;
@@ -131,6 +130,12 @@
 .litegraph-editor button img {
 	margin: -4px;
 	vertical-align: top;
+	opacity: 0.8;
+	transition: all 1s;
+}
+
+.litegraph-editor button:hover img {
+	opacity: 1;
 }
 
 .litegraph-editor .header button {
@@ -185,3 +190,35 @@
 	background-image: url('../demo/imgs/load-progress-full.png');
 }
 
+.litegraph-editor .dialog {
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -150px;
+    margin-left: -200px;
+
+	background-color: #151515;
+
+	min-width: 400px;
+	min-height: 300px;
+	box-shadow: 0 0 2px black; 
+}
+
+.litegraph-editor .dialog .dialog-header, .litegraph-editor .dialog .dialog-footer{
+	height: 40px;
+}
+
+.litegraph-editor .dialog .dialog-header .dialog-title {
+	font: 20px 'Arial';
+	margin: 4px;
+	padding: 4px 10px;
+	display:inline-block;
+}
+
+.litegraph-editor .dialog .dialog-content {
+	height: calc( 100% - 40px );
+	width: calc( 100% - 10px );
+	background-color: black;
+	margin: 4px;
+	display:inline-block;
+}

demo/index.html

@@ -10,53 +10,6 @@
 </head>
 <body>
 	<div id="main">
-	<!--
-		<div id="header">
-			<h1>LiteGraph <span>by tamat</span></h1>
-
-			<div id="loadmeter" class="headerpanel">
-				<div id="cpuload">
-					<strong>CPU</strong> <div class="bgload"><div class="fgload"></div></div>
-				</div>
-				<div id="gpuload">
-					<strong>GFX</strong> <div class="bgload"><div class="fgload"></div></div>
-				</div>
-			</div>
-
-			<div class="tools">
-				<button id="playnode_button" title="Control+P"><img src='imgs/icon-play.png'/> Play</button>
-				<button id="playstepnode_button"><img src='imgs/icon-playstep.png'/> Step</button>
-				<button id="livemode_button"><img src='imgs/icon-record.png'/> Live</button>
-				<button id="maximize_button"><img src='imgs/icon-maximize.png'/></button>
-			</div>
-		</div>
-
-		<div id="content">
-			<div id="editor" class="section">
-				<canvas id="graphcanvas" width="1000" height="500" tabindex=10></canvas>
-			</div>
-			<div id="modules" class="section" style="display:none">
-				<div id="modules-list" class="modules-list-container">
-				</div>
-
-				<div class="list-buttons">
-					<button id="confirm-createmodule_button" class="button">Create</button>
-					<button id="cancel-createmodule_button" class="button">Cancel</button>
-				</div>
-			</div>
-		</div>
-
-		<div id="footer">
-			<div id="tools-left" class="tools">
-				<button id="code_dec_button">-</button>
-				<button id="code_inc_button">+</button>
-			</div>
-			<div id="tools-right" class="tools">
-				<button id="help_button">Help</button>
-			</div>
-		</div>
-		-->
-
 	</div>
 
     <script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>

src/litegraph-editor.js

@@ -21,6 +21,8 @@ function Editor(container_id, options)
 	graph.onAfterExecute = function() { graphcanvas.draw(true) };
 
 	//add stuff
+	this.addToolsButton("loadsession_button","Load","imgs/icon-load.png", this.onLoadButton.bind(this), ".tools-left" );
+	this.addToolsButton("savesession_button","Save","imgs/icon-save.png", this.onSaveButton.bind(this), ".tools-left" );
 	this.addLoadCounter();
 	this.addToolsButton("playnode_button","Play","imgs/icon-play.png", this.onPlayButton.bind(this), ".tools-right" );
 	this.addToolsButton("playstepnode_button","Step","imgs/icon-playstep.png", this.onPlayStepButton.bind(this), ".tools-right" );
@@ -64,30 +66,51 @@ Editor.prototype.addToolsButton = function(id,name,icon_url, callback, container
 {
 	if(!container) container = ".tools";
 
-	var button = document.createElement("button");
+	var button = this.createButton(name, icon_url);
 	button.id = id;
-	button.innerHTML = "<img src='"+icon_url+"'/> "+name+"";
 	button.addEventListener("click", callback);
 
 	this.root.querySelector(container).appendChild(button);
-
 }
 
-Editor.prototype.goFullscreen = function()
-{
-	if(this.root.requestFullscreen)
-		this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-	else if(this.root.mozRequestFullscreen)
-		this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-	else if(this.root.webkitRequestFullscreen)
-		this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-	else
-		throw("Fullscreen not supported");
 
-	var self = this;
-	setTimeout(function() {
-		self.graphcanvas.resize();
-	},100);
+Editor.prototype.createPanel = function(title, options)
+{
+
+	var root = document.createElement("div");
+	root.className = "dialog";
+	root.innerHTML = "<div class='dialog-header'><span class='dialog-title'>"+title+"</span></div><div class='dialog-content'></div><div class='dialog-footer'></div>";
+	root.header = root.querySelector(".dialog-header");
+	root.content = root.querySelector(".dialog-content");
+	root.footer = root.querySelector(".dialog-footer");
+
+
+	return root;
+}
+
+Editor.prototype.createButton = function(name, icon_url)
+{
+	var button = document.createElement("button");
+	if(icon_url)
+		button.innerHTML = "<img src='"+icon_url+"'/> ";
+	button.innerHTML += name;
+	return button;
+}
+
+Editor.prototype.onLoadButton = function()  
+{
+	var panel = this.createPanel("Load session");
+	var close = this.createButton("Close");
+	close.style.float = "right";
+	close.addEventListener("click", function() { panel.parentNode.removeChild( panel ); });
+	panel.header.appendChild(close);
+	panel.content.innerHTML = "test";
+
+	this.root.appendChild(panel);
+}
+
+Editor.prototype.onSaveButton = function()
+{
 }
 
 Editor.prototype.onPlayButton = function()
@@ -124,6 +147,23 @@ Editor.prototype.onLiveButton = function()
 	button.innerHTML = !is_live_mode ? "<img src='imgs/icon-record.png'/> Live" : "<img src='imgs/icon-gear.png'/> Edit" ;
 }
 
+Editor.prototype.goFullscreen = function()
+{
+	if(this.root.requestFullscreen)
+		this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+	else if(this.root.mozRequestFullscreen)
+		this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+	else if(this.root.webkitRequestFullscreen)
+		this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+	else
+		throw("Fullscreen not supported");
+
+	var self = this;
+	setTimeout(function() {
+		self.graphcanvas.resize();
+	},100);
+}
+
 Editor.prototype.onFullscreenButton = function()
 {
 	this.goFullscreen();

src/litegraph.js

@@ -24,7 +24,7 @@ var LiteGraph = {
 	NODE_DEFAULT_BOXCOLOR: "#AEF",
 	NODE_DEFAULT_SHAPE: "box",
 	MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
-	DEFAULT_POSITION: [100,100],
+	DEFAULT_POSITION: [100,100],//default node position
 	node_images_path: "",
 
 	debug: false,
@@ -86,45 +86,6 @@ var LiteGraph = {
 
 		var node = new base_class( name );
 
-		/*
-		if (base_class.prototype) //is a class
-		{
-			node = new base_class(name);
-		}
-		else
-		{
-			node = new LGraphNode(name);
-			node.inputs = [];
-			node.outputs = [];
-
-			//add inputs and outputs
-			for (var i in prototype)
-			{
-				if(i == "inputs")
-				{
-					for(var j in prototype[i])
-						node.addInput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] );
-				}
-				else if(i == "outputs")
-				{
-					for(var j in prototype[i])
-						node.addOutput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] );
-				}
-				else
-				{
-					if( prototype[i].concat ) //array
-						node[i] = prototype[i].concat();
-					else if (typeof(prototype[i]) == 'object')
-						node[i] = LiteGraph.cloneObject(prototype[i]); //slow but safe
-					else
-						node[i] = prototype[i];
-				}
-			}
-			//set size
-			if(base_class.size) node.size = base_class.size.concat(); //save size
-		}
-		*/
-
 		node.type = type;
 		if(!node.title) node.title = title;
 		if(!node.flags) node.flags = {};
@@ -298,7 +259,7 @@ LGraph.prototype.clear = function()
 
 	//links
 	this.last_link_id = 0;
-	this.links = {};
+	this.links = {}; //container with all the links
 
 	//iterations
 	this.iteration = 0;
@@ -512,20 +473,22 @@ LGraph.prototype.computeExecutionOrder = function()
 				//for every connection
 				for(var j = 0; j < output.links.length; j++)
 				{
-					var link = output.links[j];
+					var link_id = output.links[j];
+					var link = this.links[link_id];
+					if(!link) continue;
 
 					//already visited link (ignore it)
-					if(visited_links[ link[0] ])
+					if(visited_links[ link.id ])
 						continue;
 
-					var target_node = this.getNodeById( link[3] );
+					var target_node = this.getNodeById( link.target_id );
 					if(target_node == null)
 					{
-						visited_links[ link[0] ] = true;
+						visited_links[ link.id ] = true;
 						continue;
 					}
 
-					visited_links[link[0]] = true; //mark as visited
+					visited_links[link.id] = true; //mark as visited
 					remaining_links[target_node.id] -= 1; //reduce the number of links remaining
 					if (remaining_links[target_node.id] == 0)
 						S.push(target_node); //if no more links, then add to Starters array
@@ -616,7 +579,7 @@ LGraph.prototype.sendActionToCanvas = function(action, params)
 * @param {LGraphNode} node the instance of the node
 */
 
-LGraph.prototype.add = function(node)
+LGraph.prototype.add = function(node, skip_compute_order)
 {
 	if(!node || (node.id != -1 && this._nodes_by_id[node.id] != null))
 		return; //already added
@@ -644,8 +607,9 @@ LGraph.prototype.add = function(node)
 
 	if(this.config.align_to_grid)
 		node.alignToGrid();
-		
-	this.updateExecutionOrder();
+
+	if(!skip_compute_order)
+		this.updateExecutionOrder();
 
 	if(this.onNodeAdded)
 		this.onNodeAdded(node);
@@ -927,6 +891,11 @@ LGraph.prototype.serialize = function()
 	for (var i in this._nodes)
 		nodes_info.push( this._nodes[i].serialize() );
 
+	//remove data from links, we dont want to store it
+	for (var i in this.links)
+		this.links[i].data = null;
+
+
 	var data = {
 		graph: this.graph,
 
@@ -934,6 +903,7 @@ LGraph.prototype.serialize = function()
 		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: nodes_info
@@ -966,8 +936,8 @@ LGraph.prototype.configure = function(data, keep_old)
 	for (var i in nodes)
 	{
 		var n_info = nodes[i]; //stored info
-		var n = LiteGraph.createNode( n_info.type, n_info.title );
-		if(!n)
+		var node = LiteGraph.createNode( n_info.type, n_info.title );
+		if(!node)
 		{
 			if(LiteGraph.debug)
 				console.log("Node not found: " + n_info.type);
@@ -975,10 +945,12 @@ LGraph.prototype.configure = function(data, keep_old)
 			continue;
 		}
 
-		n.configure(n_info);
-		this.add(n);
+		node.id = n_info.id; //id it or it will create a new id
+		this.add(node, true); //add before configure, otherwise configure cannot create links
+		node.configure(n_info);
 	}
 
+	this.updateExecutionOrder();
 	this.setDirtyCanvas(true,true);
 	return error;
 }
@@ -1049,7 +1021,7 @@ function LGraphNode(title)
 }
 
 /**
-* configure a node from an object 
+* configure a node from an object containing the serialized info
 * @method configure
 */
 LGraphNode.prototype.configure = function(info)
@@ -1060,39 +1032,38 @@ LGraphNode.prototype.configure = function(info)
 
 		if(info[j] == null)
 			continue;
-		else if( info[j].concat ) //array
-			this[j] = info[j].concat();
 		else if (typeof(info[j]) == 'object') //object
 			this[j] = LiteGraph.cloneObject(info[j], this[j] || {} );
 		else //value
 			this[j] = info[j];
 	}
-}
 
-/* Copy all the info from one object to this node (used for serialization) */
-LGraphNode.prototype.copyFromObject = function(info, ignore_connections)
-{
-	var outputs = null;
-	var inputs = null;
-	var properties = null;
-	var local_data = null;
-
-	for (var j in info)
+	//FOR LEGACY, PLEASE REMOVE ON NEXT VERSION
+	for(var i in this.inputs)
 	{
-		if(ignore_connections && (j == "outputs" || j == "inputs"))
+		var input = this.inputs[i];
+		if(!input.link || !input.link.length )
 			continue;
-
-		if(j == "console") continue;
-
-		if(info[j] == null)
+		var link = input.link;
+		if(typeof(link) != "object")
 			continue;
-		else if( info[j].concat ) //array
-			this[j] = info[j].concat();
-		else if (typeof(info[j]) == 'object') //object
-			this[j] = LiteGraph.cloneObject(info[j]);
-		else //value
-			this[j] = info[j];
+		input.link = link[0];
+		this.graph.links[ link[0] ] = { id: link[0], origin_id: link[1], origin_slot: link[2], target_id: link[3], target_slot: link[4] };
 	}
+	for(var i in this.outputs)
+	{
+		var output = this.outputs[i];
+		if(!output.links || output.links.length == 0)
+			continue;
+		for(var j in output.links)
+		{
+			var link = output.links[j];
+			if(typeof(link) != "object")
+				continue;
+			output.links[j] = link[0];
+		}
+	}
+
 }
 
 /**
@@ -1193,7 +1164,10 @@ LGraphNode.prototype.setOutputData = function(slot,data)
 	if(slot > -1 && slot < this.outputs.length && this.outputs[slot] && this.outputs[slot].links != null)
 	{
 		for(var i = 0; i < this.outputs[slot].links.length; i++)
-			this.graph.links[ this.outputs[slot].links[i][0] ] = data;
+		{
+			var link_id = this.outputs[slot].links[i];
+			this.graph.links[ link_id ].data = data;
+		}
 	}
 }
 
@@ -1207,7 +1181,7 @@ LGraphNode.prototype.getInputData = function(slot)
 {
 	if(!this.inputs) return null;
 	if(slot < this.inputs.length && this.inputs[slot].link != null)
-		return this.graph.links[ this.inputs[slot].link[0] ];
+		return this.graph.links[ this.inputs[slot].link ].data;
 	return null;
 }
 
@@ -1279,7 +1253,7 @@ LGraphNode.prototype.getOutputNodes = function(slot)
 		var output = this.outputs[slot];
 		var r = [];
 		for(var i = 0; i < output.length; i++)
-			r.push( this.graph.getNodeById( output.links[i][3] ));
+			r.push( this.graph.getNodeById( output.links[i].target_id ));
 		return r;
 	}
 	return null;
@@ -1452,7 +1426,7 @@ LGraphNode.prototype.getBounding = function()
 */
 LGraphNode.prototype.isPointInsideNode = function(x,y)
 {
-	var margin_top = this.graph.isLive() ? 0 : 20;
+	var margin_top = this.graph && this.graph.isLive() ? 0 : 20;
 	if(this.flags.collapsed)
 	{
 		//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
@@ -1551,12 +1525,14 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
 			output.type == node.inputs[target_slot].type) //same type
 	{
 		//info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
-		var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
+		//var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
+		var link = { id: this.graph.last_link_id++, origin_id: this.id, origin_slot: slot, target_id: node.id, target_slot: target_slot };
+		this.graph.links[ link.id ] = link;
 
 		//connect
 		if( output.links == null )	output.links = [];
-		output.links.push(link);
-		node.inputs[target_slot].link = link;
+		output.links.push( link.id );
+		node.inputs[target_slot].link = link.id;
 
 		this.setDirtyCanvas(false,true);
 		this.graph.onConnectionChange();
@@ -1599,13 +1575,15 @@ LGraphNode.prototype.disconnectOutput = function(slot, target_node)
 	{
 		for(var i = 0, l = output.links.length; i < l; i++)
 		{
-			var link = output.links[i];
+			var link_id = output.links[i];
+			var link_info = this.graph.links[ link_id ];
+
 			//is the link we are searching for...
-			if( link[3] == target_node.id )
+			if( link_info.target_id == target_node.id )
 			{
 				output.links.splice(i,1); //remove here
-				target_node.inputs[ link[4] ].link = null; //remove there
-				delete this.graph.links[link[0]]; //remove the link from the links pool
+				target_node.inputs[ link_info.target_slot ].link = null; //remove there
+				delete this.graph.links[ link_id ]; //remove the link from the links pool
 				break;
 			}
 		}
@@ -1614,10 +1592,12 @@ LGraphNode.prototype.disconnectOutput = function(slot, target_node)
 	{
 		for(var i = 0, l = output.links.length; i < l; i++)
 		{
-			var link = output.links[i];
-			var target_node = this.graph.getNodeById( link[3] );
+			var link_id = output.links[i];
+			var link_info = this.graph.links[ link_id ];
+
+			var target_node = this.graph.getNodeById( link_info.target_id );
 			if(target_node)
-				target_node.inputs[ link[4] ].link = null; //remove other side link
+				target_node.inputs[ link_info.target_slot ].link = null; //remove other side link
 		}
 		output.links = null;
 	}
@@ -1655,21 +1635,24 @@ LGraphNode.prototype.disconnectInput = function(slot)
 
 	var input = this.inputs[slot];
 	if(!input) return false;
-	var link = this.inputs[slot].link;
+	var link_id = this.inputs[slot].link;
 	this.inputs[slot].link = null;
 
 	//remove other side
-	var node = this.graph.getNodeById( link[1] );
+	var link_info = this.graph.links[ link_id ];
+	var node = this.graph.getNodeById( link_info.origin_id );
 	if(!node) return false;
 
-	var output = node.outputs[ link[2] ];
+	var output = node.outputs[ link_info.origin_slot ];
 	if(!output || !output.links || output.links.length == 0) 
 		return false;
 
+	//check outputs
 	for(var i = 0, l = output.links.length; i < l; i++)
 	{
-		var link = output.links[i];
-		if( link[3] == this.id )
+		var link_id = output.links[i];
+		var link_info = this.graph.links[ link_id ];
+		if( link_info.target_id == this.id )
 		{
 			output.links.splice(i,1);
 			break;
@@ -3437,12 +3420,15 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
 			for(var i in node.inputs)
 			{
 				var input = node.inputs[i];
-				if(!input || !input.link ) continue;
-				var link = input.link;
+				if(!input || input.link == null) 
+					continue;
+				var link_id = input.link;
+				var link = this.graph.links[ link_id ];
+				if(!link) continue;
 
-				var start_node = this.graph.getNodeById( link[1] );
+				var start_node = this.graph.getNodeById( link.origin_id );
 				if(start_node == null) continue;
-				var start_node_slot = link[2];
+				var start_node_slot = link.origin_slot;
 				var start_node_slotpos = null;
 
 				if(start_node_slot == -1)