Skip to content

Commit 45856c9

Browse files
author
tamat
committed
Merge branch 'master' of https://github.com/jagenjo/litegraph.js
2 parents 7f4e5b8 + 540d347 commit 45856c9

File tree

3 files changed

+64
-3
lines changed

3 files changed

+64
-3
lines changed

README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# litegraph.js
22

3-
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.
3+
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.
44

55
It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
66

@@ -9,7 +9,7 @@ Try it in the [demo site](https://tamats.com/projects/litegraph/demo).
99
![Node Graph](imgs/node_graph_example.png "WebGLStudio")
1010

1111
## Features
12-
- Renders on Canvas2D (zoom in, zoom out, panning, can be used inside a WebGLTexture)
12+
- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
1313
- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
1414
- Optimized to support hundreds of nodes per graph (on editor but also on execution)
1515
- Customizable theme (colors, shapes, background)
@@ -35,7 +35,7 @@ You can install it using npm
3535
npm install litegraph.js
3636
```
3737

38-
Or downloading the ```build/litegraph.js``` version from this repository.
38+
Or downloading the ```build/litegraph.js``` and ```css/litegraph.css``` version from this repository.
3939

4040
## First project ##
4141

@@ -179,6 +179,7 @@ You can write any feedback to [email protected]
179179
- rappestad
180180
- InventivetalentDev
181181
- NateScarlet
182+
- coderofsalvation
182183

183184

184185

guides/README.md

+60
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,63 @@ If you want to start the graph then:
244244
```js
245245
graph.start();
246246
```
247+
248+
## Events
249+
250+
When we run a step in a graph (using ```graph.runStep()```) every node onExecute method will be called.
251+
But sometimes you want that actions are only performed when some trigger is activated, for this situations you can use Events.
252+
253+
Events allow to trigger executions in nodes only when an event is dispatched from one node.
254+
255+
To define slots for nodes you must use the type LiteGraph.ACTION for inputs, and LIteGraph.EVENT for outputs:
256+
257+
```js
258+
function MyNode()
259+
{
260+
this.addInput("play", LiteGraph.ACTION );
261+
this.addInput("onFinish", LiteGraph.EVENT );
262+
}
263+
```
264+
265+
Now to execute some code when an event is received from an input, you must define the method onAction:
266+
267+
```js
268+
MyNode.prototype.onAction = function(action, data)
269+
{
270+
if(action == "play")
271+
{
272+
//do your action...
273+
}
274+
275+
}
276+
```
277+
278+
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:
279+
280+
```js
281+
MyNode.prototype.onAction = function(action, data)
282+
{
283+
if( this.button_was_clicked )
284+
this.triggerSlot(0); //triggers event in slot 0
285+
}
286+
```
287+
288+
There are some nodes already available to handle events, like delaying, counting, etc.
289+
290+
291+
292+
293+
294+
295+
296+
```
297+
298+
299+
300+
301+
302+
303+
304+
305+
306+

imgs/node_graph_example.png

6.75 KB
Loading

0 commit comments

Comments
 (0)