Derp

README.md

@@ -2,11 +2,11 @@
 [![npm version](https://badge.fury.io/js/escher.js.svg)](https://badge.fury.io/js/escher.js)
 
  - Web based 2D graph building framework.
- - Entity based diagram build system, entities are stores as a tree. Parent elements transformations affect the children transforms.
- - Boxes, circle, custom shapes, lines, customizable elements.
- - Support for DOM elements using CSS transforms (useful for text input, or more complex user interaction).
- - Built in viewport controls with drag, zoom and move functions.
- - Supports mobile web browsers.
+ - Entity based diagram build system, entities are stores as a tree. Compose complex animated canvas objects using parent-children transforms.
+ - Extensible using already existing canvas based visualization libs. 
+ - Base objects boxes, circle, custom shapes, lines, that can be used to compose more complex objects.
+ - Support for DOM elements using CSS transforms (Useful for text input and more complex user interaction).
+ - Built in viewport controls with drag, zoom and move functions. Supports mobile web browsers.
 
 ![graph](<https://tentone.github.io/escher.js/readme/example.png>)
 
@@ -66,6 +66,17 @@ canvas.height = window.innerHeight;
 
 
 
+### Node Graph
+
+- Node graph can be used to create node diagrams, node have inputs and outputs sockets that can be connected using node connectors.
+- Data flows between the nodes, each node class has to implement how its data is processed using the `getValue()` method of its sockets.
+- The node value propagates trough the node connections from outputs to inputs.
+- Its possible to integrate user input elements using the DOM wrapper object.
+
+![graph](<https://tentone.github.io/escher.js/readme/nodes.png>)
+
+
+
 ### Custom Objects
 
 - Its possible to create custom graph elements by expanding the Object2D class, and overriding its `draw(context, viewport, canvas)` and its `transform(context, viewport, canvas)` methods.

build/escher.js

@@ -3839,13 +3839,13 @@
 	NodeSocket.prototype = Object.create(Circle.prototype);
 
 	/**
-	 * Get value stored or calculated in node socket. For output values it should be the calculated value from node logic, node inputs etc.
+	 * Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.
 	 *
 	 * For input nodes the value should be fetched trough the connector object that is connected to an output node elsewhere.
 	 *
-	 * By default it the socket is an INPUT it gets the value trough the connector if available, if the socket is an OUTPUT or there is no connection the method returns null.
+	 * By default it the socket is an INPUT it gets the value trough the connector if available. Inputs will recursively propagate the method trough the graph to get their value.
 	 *
-	 * The method should be extended by implementations of this class to process data. The node object can be access to get information from other sockets.
+	 * If the socket is an OUTPUT or there is no connection the method returns null by default, in this case the method should be extended by implementations of this class to process data.
 	 *
 	 * @return {Object} Return data calculated from the node.
 	 */
@@ -4165,7 +4165,7 @@
 		}
 
 		// Create and add new node
-		node.position.set(x + 300, y / 2.0);
+		node.position.set(x + 200, y / 2.0);
 		this.add(node);
 
 		if(node.registerSockets !== null)

examples/node.html

@@ -61,9 +61,8 @@
 
 				this.text = new Escher.Text();
 				this.text.text = operation;
-				this.text.font = "35px Arial";
+				this.text.font = "30px Arial";
 				this.text.layer = 2;
-
 				this.add(this.text);
 			}
 
@@ -71,8 +70,8 @@
 			{
 				this.a = this.addInput("number", "a");
 				this.b = this.addInput("number", "b");
-				this.r = this.addOutput("number", "r");
 
+				this.r = this.addOutput("number", "r");
 				this.r.getValue = () =>
 				{
 					return "(" + this.a.getValue() + this.operation +  this.b.getValue() + ")";

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "escher.js",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"description": "escher.js is a web library for building interactive diagrams and graphs.",
 	"main": "build/escher.min.js",
 	"repository": {

source/objects/node/NodeGraph.js

@@ -41,7 +41,7 @@ NodeGraph.prototype.addNode = function(node)
 	}
 
 	// Create and add new node
-	node.position.set(x + 300, y / 2.0);
+	node.position.set(x + 200, y / 2.0);
 	this.add(node);
 
 	if(node.registerSockets !== null)

source/objects/node/NodeSocket.js

@@ -108,13 +108,13 @@ NodeSocket.OUTPUT = 2;
 NodeSocket.prototype = Object.create(Circle.prototype);
 
 /**
- * Get value stored or calculated in node socket. For output values it should be the calculated value from node logic, node inputs etc.
+ * Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.
  *
  * For input nodes the value should be fetched trough the connector object that is connected to an output node elsewhere.
  *
- * By default it the socket is an INPUT it gets the value trough the connector if available, if the socket is an OUTPUT or there is no connection the method returns null.
+ * By default it the socket is an INPUT it gets the value trough the connector if available. Inputs will recursively propagate the method trough the graph to get their value.
  *
- * The method should be extended by implementations of this class to process data. The node object can be access to get information from other sockets.
+ * If the socket is an OUTPUT or there is no connection the method returns null by default, in this case the method should be extended by implementations of this class to process data.
  *
  * @return {Object} Return data calculated from the node.
  */