mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
3d6adf0225
* Add Reroute - Initial Reroute implementation - LLink and Reroute both implement the new LinkSegment interface - LinkSegments can have a parentId, which always points to a Reroute * Narrow TS type of schema v0.4 extras * Add reroutes to schema 0.4 Use extras.reroutes to store additional data * Add Reroute POC to LLink * Add Reroute rendering * Add Reroute context menu - Delete Reroute * Update delete selected - include reroutes & groups * Add Reroute select & move * Include reroutes in area-select * Move disconnect link logic to LLink * Add Reroute connect * nit * Add Reroute support - connecting links * Add Add Reroute from link menu (menu) * nit * Add shift-drag from reroute to add new link * Prevent Reroutes from disappearing Add keepReroutes option to prevent Reroute GC * Add fourth param to connectInputToOutput * Allow both connecting in/out to be null * Move ConnectingLink start pos to Reroute * Add link render options * Refactor renderLink - spline / bezier * Refactor renderLink - linear, straight * Fix centre points on all link types Improves link render time * [Refactor] Generic recursive interface / flat set * nit * Allow Reroutes to be members of groups * Start links from the closest reroute For the "shift-click drag link from link" feature * Add Reroutes using alt-click on link paths * nit - Refactor * nit - Refactor * Fix reroute deselect UX Temporary workaround * Add Reroute link centre-marker handling * Add optional link arrow markers Add enum for link markers -> Pointing the way forward -> Set default centre marker to arrow * Add module export: LinkMarkerShape * Add link arrow direction for all link types * Add Reroute auto-swivel with custom curves * Add state switch to disable reroutes Works at root of all canvas interactions, should leave existing reroutes untouched but invisible until e.g. links are edited / changed. * Fix cannot deselect when reroutes disabled * Include reroutes in select-all
@ComfyOrg/litegraph
This is the litegraph version used in ComfyUI_frontend.
This repo is litegraph with the following modifications:
- 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)
Install
npm i @comfyorg/litegraph
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 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.
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
- Subgraphs (nodes that contain graphs themselves)
- Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UIs)
- Graphs can be executed in NodeJS
- Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering)
- 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
Or downloading the build/litegraph.js and css/litegraph.css version from this repository.
First project
<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>
How to code a new Node type
Here is an example of how to build a node that sums two inputs:
//node constructor class
function MyAddNode()
{
this.addInput("A","number");
this.addInput("B","number");
this.addOutput("A+B","number");
this.properties = { precision: 1 };
}
//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:
function sum(a,b)
{
return a+b;
}
LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");
Server side
It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
var LiteGraph = require("./litegraph.js").LiteGraph;
var graph = new LiteGraph.LGraph();
var node_time = LiteGraph.createNode("basic/time");
graph.add(node_time);
var node_console = LiteGraph.createNode("basic/console");
node_console.mode = LiteGraph.ALWAYS;
graph.add(node_console);
node_time.connect( 0, node_console, 1 );
graph.start()
Projects using it
comfyUI
webglstudio.org
MOI Elephant
Mynodes
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 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:
$ 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.
Feedback
You can write any feedback to javi.agenjo@gmail.com
Contributors
- atlasan
- kriffe
- rappestad
- InventivetalentDev
- NateScarlet
- coderofsalvation
- ilyabesk
- gausszhou