mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 14:27:40 +00:00
Update README to reflect repo status (#662)
Rewrites or restructures most of the former README, so that it is relevant to this fork instead of the original. - Maintains original contributors, and places original projects/description under an expanders - Removes all references to the editor - Removes information about the removed built-in nodes - Updates code samples - Reformats various sections
This commit is contained in:
filtered
183
README.md
183
README.md
@@ -2,7 +2,10 @@
|
||||
|
||||
This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
|
||||
|
||||
This repo is litegraph with the following modifications:
|
||||
It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original.
|
||||
|
||||
Some early highlights:
|
||||
|
||||
- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
|
||||
- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
|
||||
- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
|
||||
@@ -11,21 +14,30 @@ This repo is litegraph with the following modifications:
|
||||
- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
|
||||
- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
|
||||
- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
|
||||
- And now with hundreds more...
|
||||
|
||||
# Install
|
||||
|
||||
`npm i @comfyorg/litegraph`
|
||||
|
||||
# litegraph.js
|
||||
|
||||
A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Description of the original litegraph.js</summary>
|
||||
|
||||
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.
|
||||
|
||||
Try it in the [demo site](https://tamats.com/projects/litegraph/editor).
|
||||
</details>
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- 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)
|
||||
@@ -36,126 +48,77 @@ Try it in the [demo site](https://tamats.com/projects/litegraph/editor).
|
||||
- Easy to integrate in any JS application (one single file, no dependencies)
|
||||
- Typescript support
|
||||
|
||||
## Nodes provided
|
||||
Although it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases:
|
||||
- Interface (Widgets)
|
||||
- Math (trigonometry, math operations)
|
||||
- Audio (AudioAPI and MIDI)
|
||||
- 3D Graphics (Postprocessing in WebGL)
|
||||
- Input (read Gamepad)
|
||||
|
||||
## Installation
|
||||
|
||||
You can install it using npm
|
||||
```
|
||||
npm install litegraph.js
|
||||
```
|
||||
You can install it using npm
|
||||
|
||||
Or downloading the ```build/litegraph.js``` and ```css/litegraph.css``` version from this repository.
|
||||
|
||||
## First project ##
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="litegraph.css">
|
||||
<script type="text/javascript" src="litegraph.js"></script>
|
||||
</head>
|
||||
<body style='width:100%; height:100%'>
|
||||
<canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
|
||||
<script>
|
||||
var graph = new LGraph();
|
||||
|
||||
var canvas = new LGraphCanvas("#mycanvas", graph);
|
||||
|
||||
var node_const = LiteGraph.createNode("basic/const");
|
||||
node_const.pos = [200,200];
|
||||
graph.add(node_const);
|
||||
node_const.setValue(4.5);
|
||||
|
||||
var node_watch = LiteGraph.createNode("basic/watch");
|
||||
node_watch.pos = [700,200];
|
||||
graph.add(node_watch);
|
||||
|
||||
node_const.connect(0, node_watch, 0 );
|
||||
|
||||
graph.start()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```bash
|
||||
npm install @comfyorg/litegraph
|
||||
```
|
||||
|
||||
## How to code a new Node type
|
||||
|
||||
Here is an example of how to build a node that sums two inputs:
|
||||
|
||||
```javascript
|
||||
//node constructor class
|
||||
function MyAddNode()
|
||||
{
|
||||
this.addInput("A","number");
|
||||
this.addInput("B","number");
|
||||
this.addOutput("A+B","number");
|
||||
this.properties = { precision: 1 };
|
||||
```ts
|
||||
import { LiteGraph, LGraphNode } from "./litegraph"
|
||||
|
||||
class MyAddNode extends LGraphNode {
|
||||
// Name to show
|
||||
title = "Sum"
|
||||
|
||||
constructor() {
|
||||
this.addInput("A", "number")
|
||||
this.addInput("B", "number")
|
||||
this.addOutput("A+B", "number")
|
||||
this.properties.precision = 1
|
||||
}
|
||||
|
||||
// Function to call when the node is executed
|
||||
onExecute() {
|
||||
var A = this.getInputData(0)
|
||||
if (A === undefined) A = 0
|
||||
var B = this.getInputData(1)
|
||||
if (B === undefined) B = 0
|
||||
this.setOutputData(0, A + B)
|
||||
}
|
||||
}
|
||||
|
||||
//name to show
|
||||
MyAddNode.title = "Sum";
|
||||
|
||||
//function to call when the node is executed
|
||||
MyAddNode.prototype.onExecute = function()
|
||||
{
|
||||
var A = this.getInputData(0);
|
||||
if( A === undefined )
|
||||
A = 0;
|
||||
var B = this.getInputData(1);
|
||||
if( B === undefined )
|
||||
B = 0;
|
||||
this.setOutputData( 0, A + B );
|
||||
}
|
||||
|
||||
//register in the system
|
||||
LiteGraph.registerNodeType("basic/sum", MyAddNode );
|
||||
|
||||
```
|
||||
|
||||
or you can wrap an existing function:
|
||||
|
||||
```js
|
||||
function sum(a,b)
|
||||
{
|
||||
return a+b;
|
||||
}
|
||||
|
||||
LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");
|
||||
// Register the node type
|
||||
LiteGraph.registerNodeType("basic/sum", MyAddNode)
|
||||
```
|
||||
|
||||
## Server side
|
||||
|
||||
It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
|
||||
|
||||
```js
|
||||
var LiteGraph = require("./litegraph.js").LiteGraph;
|
||||
```ts
|
||||
import { LiteGraph, LGraph } from "./litegraph.js"
|
||||
|
||||
var graph = new LiteGraph.LGraph();
|
||||
const graph = new LGraph()
|
||||
|
||||
var node_time = LiteGraph.createNode("basic/time");
|
||||
graph.add(node_time);
|
||||
const firstNode = LiteGraph.createNode("basic/sum")
|
||||
graph.add(firstNode)
|
||||
|
||||
var node_console = LiteGraph.createNode("basic/console");
|
||||
node_console.mode = LiteGraph.ALWAYS;
|
||||
graph.add(node_console);
|
||||
const secondNode = LiteGraph.createNode("basic/sum")
|
||||
graph.add(secondNode)
|
||||
|
||||
node_time.connect( 0, node_console, 1 );
|
||||
firstNode.connect(0, secondNode, 1)
|
||||
|
||||
graph.start()
|
||||
```
|
||||
|
||||
|
||||
## Projects using it
|
||||
|
||||
### [comfyUI](https://github.com/comfyanonymous/ComfyUI)
|
||||
|
||||
### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
|
||||
|
||||
|
||||
|
||||
### Projects using the original litegraph.js
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Click to expand</summary>
|
||||
|
||||
### [webglstudio.org](http://webglstudio.org)
|
||||
|
||||
@@ -169,31 +132,18 @@ graph.start()
|
||||
|
||||
|
||||
|
||||
## Utils
|
||||
-----
|
||||
|
||||
It includes several commands in the utils folder to generate doc, check errors and build minifyed version.
|
||||
|
||||
|
||||
## Demo
|
||||
-----
|
||||
The demo includes some examples of graphs. In order to try them you can visit [demo site](http://tamats.com/projects/litegraph/editor) or install it on your local computer, to do so you need `git`, `node` and `npm`. Given those dependencies are installed, run the following commands to try it out:
|
||||
```sh
|
||||
$ git clone https://github.com/jagenjo/litegraph.js.git
|
||||
$ cd litegraph.js
|
||||
$ npm install
|
||||
$ node utils/server.js
|
||||
Example app listening on port 80!
|
||||
```
|
||||
Open your browser and point it to http://localhost:8000/. You can select a demo from the dropdown at the top of the page.
|
||||
</details>
|
||||
|
||||
## Feedback
|
||||
--------
|
||||
|
||||
You can write any feedback to javi.agenjo@gmail.com
|
||||
Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo.
|
||||
|
||||
## Contributors
|
||||
|
||||
You can find the [current list of contributors](https://github.com/Comfy-Org/litegraph.js/graphs/contributors) on GitHub.
|
||||
|
||||
### Contributors (pre-fork)
|
||||
|
||||
- atlasan
|
||||
- kriffe
|
||||
- rappestad
|
||||
@@ -202,6 +152,3 @@ You can write any feedback to javi.agenjo@gmail.com
|
||||
- coderofsalvation
|
||||
- ilyabesk
|
||||
- gausszhou
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user