diff --git a/README.md b/README.md index 782a0bbe2..d30e078ac 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # litegraph.js -A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct the graphs. +A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs. It can be integrated easily in any existing web applications and graphs can be run without the need of the editor. @@ -9,7 +9,7 @@ Try it in the [demo site](https://tamats.com/projects/litegraph/demo). ![Node Graph](imgs/node_graph_example.png "WebGLStudio") ## Features -- Renders on Canvas2D (zoom in, zoom out, panning, can be used inside a WebGLTexture) +- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture) - 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) @@ -35,7 +35,7 @@ You can install it using npm npm install litegraph.js ``` -Or downloading the ```build/litegraph.js``` version from this repository. +Or downloading the ```build/litegraph.js``` and ```css/litegraph.css``` version from this repository. ## First project ## @@ -179,6 +179,7 @@ You can write any feedback to javi.agenjo@gmail.com - rappestad - InventivetalentDev - NateScarlet +- coderofsalvation diff --git a/guides/README.md b/guides/README.md index 625ca2200..7f607bbfd 100644 --- a/guides/README.md +++ b/guides/README.md @@ -244,3 +244,63 @@ If you want to start the graph then: ```js graph.start(); ``` + +## Events + +When we run a step in a graph (using ```graph.runStep()```) every node onExecute method will be called. +But sometimes you want that actions are only performed when some trigger is activated, for this situations you can use Events. + +Events allow to trigger executions in nodes only when an event is dispatched from one node. + +To define slots for nodes you must use the type LiteGraph.ACTION for inputs, and LIteGraph.EVENT for outputs: + +```js +function MyNode() +{ + this.addInput("play", LiteGraph.ACTION ); + this.addInput("onFinish", LiteGraph.EVENT ); +} +``` + +Now to execute some code when an event is received from an input, you must define the method onAction: + +```js +MyNode.prototype.onAction = function(action, data) +{ + if(action == "play") + { + //do your action... + } + +} +``` + +And the last thing is to trigger events when something in your node happens. You could trigger them from inside the onExecute or from any other interaction: + +```js +MyNode.prototype.onAction = function(action, data) +{ + if( this.button_was_clicked ) + this.triggerSlot(0); //triggers event in slot 0 +} +``` + +There are some nodes already available to handle events, like delaying, counting, etc. + + + + + + + +``` + + + + + + + + + + diff --git a/imgs/node_graph_example.png b/imgs/node_graph_example.png index 313af60c2..1ff51fac9 100644 Binary files a/imgs/node_graph_example.png and b/imgs/node_graph_example.png differ