mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +00:00
Merge branch 'master' of https://github.com/jagenjo/litegraph.js
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# litegraph.js
|
# 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.
|
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
|
## 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, ...)
|
- 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)
|
- Optimized to support hundreds of nodes per graph (on editor but also on execution)
|
||||||
- Customizable theme (colors, shapes, background)
|
- Customizable theme (colors, shapes, background)
|
||||||
@@ -35,7 +35,7 @@ You can install it using npm
|
|||||||
npm install litegraph.js
|
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 ##
|
## First project ##
|
||||||
|
|
||||||
@@ -179,6 +179,7 @@ You can write any feedback to javi.agenjo@gmail.com
|
|||||||
- rappestad
|
- rappestad
|
||||||
- InventivetalentDev
|
- InventivetalentDev
|
||||||
- NateScarlet
|
- NateScarlet
|
||||||
|
- coderofsalvation
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -244,3 +244,63 @@ If you want to start the graph then:
|
|||||||
```js
|
```js
|
||||||
graph.start();
|
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