mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 21:22:07 +00:00
Add 'src/lib/litegraph/' from commit '1b58bf4966e9cdaa04bfaa40f5650b6c6680ab97'
git-subtree-dir: src/lib/litegraph git-subtree-mainline:1eadf80fecgit-subtree-split:1b58bf4966
This commit is contained in:
173
src/lib/litegraph/README.md
Executable file
173
src/lib/litegraph/README.md
Executable file
@@ -0,0 +1,173 @@
|
||||
# @ComfyOrg/litegraph
|
||||
|
||||
This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
|
||||
|
||||
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)
|
||||
- Emit search box triggering custom events (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
|
||||
- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
|
||||
- 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.
|
||||
|
||||
</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)
|
||||
- Customizable theme (colors, shapes, background)
|
||||
- Callbacks to personalize every action/drawing/event of nodes
|
||||
- Graphs can be executed in NodeJS
|
||||
- Highly customizable nodes (color, shape, widgets, custom rendering)
|
||||
- Easy to integrate in any JS application (one single file, no dependencies)
|
||||
- Typescript support
|
||||
|
||||
## Installation
|
||||
|
||||
You can install it using npm
|
||||
|
||||
```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:
|
||||
|
||||
```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)
|
||||
}
|
||||
}
|
||||
|
||||
// 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).
|
||||
|
||||
```ts
|
||||
import { LiteGraph, LGraph } from "./litegraph.js"
|
||||
|
||||
const graph = new LGraph()
|
||||
|
||||
const firstNode = LiteGraph.createNode("basic/sum")
|
||||
graph.add(firstNode)
|
||||
|
||||
const secondNode = LiteGraph.createNode("basic/sum")
|
||||
graph.add(secondNode)
|
||||
|
||||
firstNode.connect(0, secondNode, 1)
|
||||
|
||||
graph.start()
|
||||
```
|
||||
|
||||
## Projects using it
|
||||
|
||||
### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
|
||||
|
||||

|
||||
|
||||
### Projects using the original litegraph.js
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Click to expand</summary>
|
||||
|
||||
### [webglstudio.org](http://webglstudio.org)
|
||||
|
||||

|
||||
|
||||
### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
|
||||
|
||||

|
||||
|
||||
### Mynodes
|
||||
|
||||

|
||||
|
||||
</details>
|
||||
|
||||
## Feedback
|
||||
|
||||
Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo.
|
||||
|
||||
# Development
|
||||
|
||||
Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
|
||||
|
||||
## Releasing
|
||||
|
||||
Use GitHub actions to release normal versions.
|
||||
|
||||
1. Run the `Release a New Version` action, selecting the version incrment type
|
||||
1. Merge the resultion PR
|
||||
1. A GitHub release is automatically published on merge
|
||||
|
||||
### Pre-release
|
||||
|
||||
The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
|
||||
|
||||
e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
|
||||
Use `patch` when ready to remove the pre-release suffix.
|
||||
|
||||
## 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
|
||||
- InventivetalentDev
|
||||
- NateScarlet
|
||||
- coderofsalvation
|
||||
- ilyabesk
|
||||
- gausszhou
|
||||
Reference in New Issue
Block a user