mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
Merge branch 'master' of https://github.com/jagenjo/litegraph.js
This commit is contained in:
@@ -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).
|
||||

|
||||
|
||||
## 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
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 |
Reference in New Issue
Block a user