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

guides/README.md

@@ -9,6 +9,39 @@ To extend the other classes all the methods contained in LGraphNode.prototype ar
 
 When you create a new node type you do not have to inherit from that class, when the node is registered all the methods are copied to your node prototype.
 
+Here is an example of how to create your own node:
+
+```javascript
+//node constructor class
+function MyAddNode()
+{
+  this.addInput("A","number");
+  this.addInput("B","number");
+  this.addOutput("A+B","number");
+  this.properties = { precision: 1 };
+}
+
+//name to show
+MyAddNode.title = "Sum";
+
+//function to call when the node is executed
+MyAddNode.prototype.onExecute = function()
+{
+  var A = this.getInputData(0);
+  if( A === undefined )
+    A = 0;
+  var B = this.getInputData(1);
+  if( B === undefined )
+    B = 0;
+  this.setOutputData( 0, A + B );
+}
+
+//register in the system
+LiteGraph.registerNodeType("basic/sum", MyAddNode );
+
+```
+
+
 ## Node settings
 
 There are several settings that could be defined per node:
@@ -16,17 +49,17 @@ There are several settings that could be defined per node:
 * **properties**: object containing the properties that could be configured by the user
 * **shape**: the shape of the object (could be LiteGraph.BOX,LiteGraph.ROUND,LiteGraph.CARD)
 * **flags**: several flags
-⋅⋅* **resizable**: if it can be resized dragging the corner
-⋅⋅* **horizontal**: if the slots should be placed horizontally on the top and bottom of the node
-⋅⋅* **clip_area**: clips the content when rendering the node
+  * **resizable**: if it can be resized dragging the corner
+  * **horizontal**: if the slots should be placed horizontally on the top and bottom of the node
+  * **clip_area**: clips the content when rendering the node
 
 There are several callbacks that could be defined:
 * **onAdded**: when added to graph
 * **onRemoved**: when removed from graph
 * **onStart**:	when the graph starts playing
 * **onStop**:	when the graph stops playing
-* **onDrawForeground**: render the inside widgets inside the node
-* **onDrawBackground**: render the background area inside the node (only in edit mode)
+* **onDrawBackground**: render something inside the node (not visible in Live mode)
+* **onDrawForeground**: render something inside the node
 * **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave**
 * **onDblClick**: double clicked in the editor
 * **onExecute**: execute the node
@@ -76,6 +109,43 @@ When creating a class for a graph node here are some useful points:
 - you can alter the default priority of execution by defining the ```MyGraphNodeClass.priority``` (default is 0)
 - you can overwrite how the node is rendered using the ```onDrawBackground``` and ```onDrawForeground```
 
+### Custom Node Appearance
+
+You can draw something inside a node using the callbacks ```onDrawForeground``` and ```onDrawBackground```. The only difference is that onDrawForeground gets called in Live Mode and onDrawBackground not.
+
+You do not have to worry about the coordinates system, [0,0] is the top-left corner of the node content area (not the title).
+
+```js
+node.onDrawForeground = function(canvas, ctx)
+{
+  if(this.flags.collapsed)
+    return;
+  ctx.save();
+  ctx.fillColor = "black";
+  ctx.fillRect(0,0,10,this.size[1]);
+  ctx.restore();
+}
+```
+
+### Custom Node Behaviour 
+
+You can also grab events from the mouse in case your node has some sort of special interactivity.
+
+The second parameter is the position in node coordinates, where 0,0 represents the top-left corner of the node content (below the title).
+
+```js
+node.onMouseDown = function( event, pos, graphcanvas )
+{
+    return true; //return true is the event was used by your node, to block other behaviours
+}
+```
+
+Other methods are:
+- onMouseMove
+- onMouseUp
+- onMouseEnter
+- onMouseLeave
+- onKey
 
 ## Integration