mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
b337cd07ef
- allow connecting from IN to OUT (drag an IN slot to create a link to OUT slots) - dim (opacity) uncompatible slots while creating a link - filter in the searchbox for types (slotsIn, slotsOut), autofilter when chaining - drag-shift a slot to search and connect a new node - code widget re-enabled - properties panel improvements - paste will use mouse coordinates :: properties and methods :: - additional shape GRID_SHAPE intended for slot arrays - NODE_MODES_COLORS array of colors based on the node modes node_box_coloured_by_mode: false, // [true!] nodebox colored on node mode, visual feedback node_box_coloured_when_on: false, // [true!] this make the nodes box (top left circle) coloured when triggered (execute/action), visual feedback dialog_close_on_mouse_leave: true, // better true if not touch device dialog_close_on_mouse_leave_delay: 500, shift_click_do_break_link_from: false, // [false!] prefer false if results too easy to break links - TODO custom keys click_do_break_link_to: false, // [false!] prefer false, way too easy to break links search_hide_on_mouse_leave: true, // better true if not touch device search_filter_enabled: true, // [true!] enable filtering slots type in the search widget, !requires auto_load_slot_types search_show_all_on_open: true, // [true!] opens the results list when opening the search widget auto_load_slot_types: true, // [if want false, use true, run, get vars values to be statically set, than disable] nodes types and nodeclass association with node types need to be calculated, if dont want this, calculate once and set registered_slot_[in/out]_types and slot_types_[in/out] - this will create (without adding it) a node for each class when they are registered. This allows for slots checking. Could raise errors in case some node miss something: somehow nice. alt_drag_do_clone_nodes: false, // [true!] very handy, ALT click to clone and drag the new node do_add_triggers_slots: false, // [true!] will create and connect event slots when using action/events connections, !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this allowMultiOutputForEvents: true, // [false!] being events, it is strongly reccomended to use them sequentually, one by one - find(Input/Output)Slot functions can return the object instead - connectByType - allow connecting a node slot to a target node using an auto-slot mode that looks for the right types - onNodeCreated - new callback - addOnTriggerInput, addOnExecutedOutput - creates action slots (triggerIn, executedOut) when needed (changing mode, dragging events onto the node) - doExecute and doAction - wraps the onExecute and onAction node functions with helpers and checks - onAfterExecuteNode - new callback - onBeforeConnectInput - new callback, can change slot while connecting (or create a new one) - onConnectOutput - new callback, similar to onConnectInput - onNodeInputAdd, onNodeOutputAdd - new callbacks - isOverNodeOutput - similar to isOverNodeInput - helpers findInput, findOutput, findInputSlotFree, findOutputSlotFree, findSlotByType - canvas default_connection_color_byType[Off] allows custom colors type based - ESC will close panels - showConnectionMenu will show the "Add menu" while dragging, to connect after creation
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
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
- kriffe
- rappestad
- InventivetalentDev
- NateScarlet
- coderofsalvation
- ilyabesk
- gausszhou