This commit is contained in:
tamat
2020-03-19 08:57:46 +01:00
3 changed files with 64 additions and 3 deletions

View File

@@ -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

View File

@@ -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.
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 92 KiB