Merge branch 'master' of https://github.com/jagenjo/litegraph.js

README.md

@@ -8,6 +8,26 @@ Try it in the [demo site](http://tamats.com/projects/litegraph/demo).
 
 ![Node Graph](imgs/node_graph_example.png "WebGLStudio")
 
+## Features
+- Renders on Canvas2D (zoom in, zoom out, panning)
+- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
+- Optimized to support hundreds of nodes per graph (on editor but also on execution)
+- Customizable theme (colors, shapes, background)
+- Callbacks to personalize every action/drawing/event
+- Subgraphs (nodes that contain graphs themselves)
+- Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UI)
+- Graphs can be executed in NodeJS
+- Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering)
+- Easy to integrate in any application
+
+## Nodes provided
+Although it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases:
+- Interface (Widgets)
+- Math (trigonometry, math operations)
+- Audio (AudioAPI and MIDI)
+- 3D Graphics (Postprocessing in WebGL)
+- Input (read Gamepad)
+
 ## Installation
 
 You can install it using npm 
@@ -95,7 +115,7 @@ LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");
 
 ## Server side
 
-It also works server-side using Node although some nodes do not work in server (audio, graphics, input, etc).
+It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
 
 ```js
 var LiteGraph = require("./litegraph.js").LiteGraph;

css/litegraph.css

@@ -176,7 +176,7 @@
 	padding-left: 10px;
 }
 
-litegraph.litesearchbox .helper {
+.litegraph.litesearchbox .helper {
 	overflow: auto;
 	max-height: 200px;
 	margin-top: 2px;

src/litegraph.js

@@ -4658,15 +4658,15 @@ LGraphCanvas.prototype.selectNodes = function( nodes, add_to_current_selection )
 		this.selected_nodes[ node.id ] = node;
 
 		if(node.inputs)
-			for(var i = 0; i < node.inputs.length; ++i)
-				this.highlighted_links[ node.inputs[i].link ] = true;
+			for(var j = 0; j < node.inputs.length; ++j)
+				this.highlighted_links[ node.inputs[j].link ] = true;
 		if(node.outputs)
-			for(var i = 0; i < node.outputs.length; ++i)
+			for(var j = 0; j < node.outputs.length; ++j)
 			{
-				var out = node.outputs[i];
+				var out = node.outputs[j];
 				if( out.links )
-					for(var j = 0; j < out.links.length; ++j)
-						this.highlighted_links[ out.links[j] ] = true;
+					for(var k = 0; k < out.links.length; ++k)
+						this.highlighted_links[ out.links[k] ] = true;
 			}
 
 	}
@@ -6537,6 +6537,9 @@ LGraphCanvas.onShowTitleEditor = function( value, options, e, menu, node )
 	if(input)
 	{
 		input.value = node.title;
+        input.addEventListener("blur", function(e){
+            this.focus();
+        });
 		input.addEventListener("keydown", function(e){
 			if(e.keyCode != 13)
 				return;
@@ -6677,7 +6680,7 @@ LGraphCanvas.prototype.showSearchBox = function(event)
 	var input_html = "";
 
 	var dialog = document.createElement("div");
-	dialog.className = "graphdialog rounded";
+	dialog.className = "litegraph litesearchbox graphdialog rounded";
 	dialog.innerHTML = "<span class='name'>Search</span> <input autofocus type='text' class='value rounded'/><div class='helper'></div>";
 	dialog.close = function()
 	{
@@ -6702,6 +6705,9 @@ LGraphCanvas.prototype.showSearchBox = function(event)
 	var input = dialog.querySelector("input");
 	if(input)
 	{
+        input.addEventListener("blur", function(e){
+            this.focus();
+        });
 		input.addEventListener("keydown", function(e){
 
 			if(e.keyCode == 38) //UP
@@ -6755,7 +6761,7 @@ LGraphCanvas.prototype.showSearchBox = function(event)
 	}
 
 	canvas.parentNode.appendChild( dialog );
-	setTimeout( function(){	input.focus(); },10 );
+	input.focus();
 
 	function select( name )
 	{
@@ -6814,7 +6820,7 @@ LGraphCanvas.prototype.showSearchBox = function(event)
 					var help = document.createElement("div");
 					if(!first) first = i;
 					help.innerText = i;
-					help.className = "help-item";
+					help.className = "litegraph lite-search-item";
 					help.addEventListener("click", function(e){
 						select( this.innerText );
 					});
@@ -6913,6 +6919,9 @@ LGraphCanvas.prototype.showEditPropertyValue = function( node, property, options
 		var input = dialog.querySelector("input");
 		if(input)
 		{
+            input.addEventListener("blur", function(e){
+                this.focus();
+            });
 			input.value = node.properties[ property ] !== undefined ? node.properties[ property ] : "";
 			input.addEventListener("keydown", function(e){
 				if(e.keyCode != 13)
@@ -7242,7 +7251,7 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
 	{
 		menu_info = [];
 		menu_info.push( slot.locked ? "Cannot remove"  : { content: "Remove Slot", slot: slot } );
-		menu_info.push( { content: "Rename Slot", slot: slot } );
+		menu_info.push( slot.nameLocked ? "Cannot rename" : { content: "Rename Slot", slot: slot } );
 		options.title = (slot.input ? slot.input.type : slot.output.type) || "*";
 		if(slot.input && slot.input.type == LiteGraph.ACTION)
 			options.title = "Action";
@@ -7285,12 +7294,15 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
 		else if( v.content == "Rename Slot")
 		{
 			var info = v.slot;
-			var dialog = that.createDialog( "<span class='name'>Name</span><input type='text'/><button>OK</button>" , options );
+            var slot_info = info.input ? node.getInputInfo( info.slot ) : node.getOutputInfo( info.slot );
+			var dialog = that.createDialog( "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>" , options );
 			var input = dialog.querySelector("input");
+			if(input && slot_info){
+				input.value = slot_info.label;
+			}
 			dialog.querySelector("button").addEventListener("click",function(e){
 				if(input.value)
 				{
-					var slot_info = info.input ? node.getInputInfo( info.slot ) : node.getOutputInfo( info.slot );
 					if( slot_info )
 						slot_info.label = input.value;
 					that.setDirty(true);