A library in Javascript to create graphs in the browser similar to Unreal Blueprints.

Overview

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.

Node Graph

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

WebGLStudio

MOI Elephant

MOI Elephant

Mynodes

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 [email protected]

Contributors

  • kriffe
  • rappestad
  • InventivetalentDev
  • NateScarlet
  • coderofsalvation
  • ilyabesk
  • gausszhou
Issues
  • Questions from new user, unable to resize node

    Questions from new user, unable to resize node

    Hello, I have been trying to build a prototype of an animation blending engine using litegraph.js.

    Overall it's been going pretty well but I have run into a few issues. It's likely these are problems on my side but I don't see any other support channel so I am opening an issue for this one I haven't been able to solve on my own. If you want I can keep posting these questions here so I don't clog up the issue tracker.

    Incorrect node size, unable to resize

    After attaching a couple of widgets to the AnimationClip, the node does not auto-resize correctly. I see there's code in there that looks like it should be doing this so I don't know what's going wrong since it works fine on the Blend2 node.

    I have tried setting the size manually in the constructor like I've seen some of the other components do, but this seems to have no visible effect even when I try to make it square or use very large values.

    Screen Shot 2020-09-01 at 10 07 14 AM
    opened by fadookie 15
  • Is it possible to connect two outputs to one input?

    Is it possible to connect two outputs to one input?

    First I connect an output to an input and that works. Then I connect another output to the same input. The second connection is created but this causes the first connection to break.

    Is it possible to connect two outputs to one input?

    opened by fredrik-hjarner 11
  • Investigate if toposort could be useful for auto position of nodes

    Investigate if toposort could be useful for auto position of nodes

    Perhaps the toposort library could be used for automatic node placement (if not already implemented)?

    Or perhaps it could be useful in some other way.

    https://www.npmjs.com/package/toposort

    Used in https://github.com/GooTechnologies/shader-graph

    opened by kriffe 11
  • Is it possible to remove multiple nodes selected?

    Is it possible to remove multiple nodes selected?

    Let's say I have a selection of 10 nodes. At this point, if I right click and click "Remove", it only removes the node on top of which I right clicked. Is there a shortcut that allows to delete the entire selection of nodes?

    opened by alessiapacca 10
  • How to save/load a local file containing the graph

    How to save/load a local file containing the graph

    Dear @jagenjo we would like to make a simplified version of your demo, which allows us loading a local file and downloading the workspace to a json file (which can itself be loaded a second time)

    so far we (@roigcarlo who did the work) achieved this by modifying the 'litegraph.js' by adding the following function

        LGraph.prototype.loadFile = function(url) {
            var that = this;
    
            const reader = new FileReader();
    		reader.addEventListener('load', (event) => {
                var data = JSON.parse(event.target.result);
                that.configure(data);
            });
            
            reader.readAsText(url);
        };
    

    of course such a solution is suboptimal since it implies editing your lib instead of using as it is.

    Do you have any alternative solution?

    opened by RiccardoRossi 10
  • Input / Property duality.  A quick check before I start coding.

    Input / Property duality. A quick check before I start coding.

    Hi @jagenjo,

    I just wanted to have a quick check with you. I am going look at adding the ability to have a dual purpose "input port / property widget". I have several nodes which benefit from having easy to fill in properties using your widget functionality. But on occasion I would instead like to right click on the widget and say "convert to input port". Also, for the same to apply in the reverse direction, by right clicking an input an selecting "convert to property". As an example, on the image below I would like to have the option to make the "Rotation in degrees" an input if I need to provide the value programmatically.

    So, before I start my coding adventure I just wanted to check to see if you have something already in the background, or if this is something others have implemented.

    If not, then I'll make a start and will happily feed back on here how I get on.

    Again, fantastic work! :)

    Ben

    image

    opened by benhar-dev 9
  • Undo feature

    Undo feature

    Hey @jagenjo , I was playing around with the callback OnBeforeChange. I keep track of a queue of graphs every time OnBeforeChange is called. I added an OnUndo callback, which is called when the user wants to undo the last change. In this OnUndo callback I just configure the last entry of the graphs queue.

    However, it happens that, when I undo a certain change, if this change is a new connected link, then the links gets deleted (and this is expected), but the slots keep staying green. So basically the links are not rendered anymore, but they stay in the graph (I checked the graph and they do not get removed from it). Do you have any clue of why this may happen?

    opened by alessiapacca 9
  • Sidepanel 'Delete' button does not trigger 'beforeChange' / 'afterChange' sequence

    Sidepanel 'Delete' button does not trigger 'beforeChange' / 'afterChange' sequence

    Hi! As stated: The 'Delete' button on the side panel does not trigger the 'beforeChange' / 'afterChange' sequence.

    https://github.com/jagenjo/litegraph.js/blob/2fe197bb8bfc0dad3e80e4425b4be7bff1377509/src/litegraph.js#L10414-L10419

    Is this a design 'by intension'? If not: Would you accept a PR to add this functionality?

    opened by ralphwetzel 8
  • Disable double click on canvas?

    Disable double click on canvas?

    I'm not finding any information regarding removing the default double-click functionality in empty areas on the node graph. Is it possible? I'd like to remove access to the search bar.

    opened by damntourists 8
  • feature request: websocket client

    feature request: websocket client

    I would like to add websocket support, so it would imply at least 2 more nodes:

    • websocket server ip, port, a ws/wss toggle, connect button
    • websocket sender

    Eventually a websocket receiver.

    What do yo think?

    opened by brucelane 8
  • Pack

    Pack

    This is a pack of many of the integrations I had made. It was intended as a small pack.. some changes are tied together and others are quite useful and unoffensive, the result is a big change in the sense of portions of code it touches, I think for the good anyway. Let alone minor changes, new behaviors can be enabled and disabled by properties and everything should be retrocompatibile.

    Let's check the changes with some good graphs we have to ensure all the past and new functionaries are stable.

    ::features::

    • improved auto-connect
    • 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
    • wheel-click a slot to create a default node for that slot_type
    • add a quick node creation based on slot_type when releasing a link
    • code widget re-enabled
    • properties panel improvements
    • paste will use mouse coordinates
    • additional shape GRID_SHAPE intended for slot arrays
    • NODE_MODES_COLORS array of colors based on the node modes
    • canvas default_connection_color_byType[Off] allows custom colors type based

    ::settings::

    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 recommended to use them sequentially, one by one

    ::more::

    • 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
    • showConnectionMenu will show the "Add menu" while dragging, to connect after creation
    • ESC will close panels

    ::minor fixes & changes:: ....

    opened by atlasan 7
  • NPM modules

    NPM modules

    Hi Great stuff , was looking for a small foot print option to use node-red kind of editor for esp32.

    Planning to write some custom nodes , before hand , is there a way to import existing NPM modules inside litegraph nodes to use say MQTT , HTTP request serial port , i2c etc.

    Thanks in advance

    opened by spillz-dxb 0
  • Changing input/output shape based on type

    Changing input/output shape based on type

    In the demo I can see that there are EVENT and ACTION type outputs. Is it possible to define the shape of an output or input for a custom type? I'm not seeing where the output shape is being handled in the code.

    PS: I'm looking to hire a developer part time who is good with litegraph. If that's you, let me know!

    opened by arepp23 1
  • Subgraph inputs and outputs

    Subgraph inputs and outputs

    Hello!

    I was customizing the subgraph functionality. Currently, the inputs and the outputs of the subgraph are fixed panels, with their own slots. I wanted to substitute the panels with two nodes, so that a user could also connect the graph inputs to other nodes in the subgraph. I think it would be easier to use nodes (instead of panels), since they already handle connections and links.

    How could I fix them on top of everything? What I would like to do would be to set a flag (for example) in the constructor of a node, so that the node stays in the same position independently from the scale and offset of the canvas: top left and top right of the editor. I tried to update the position of the node inside the method OnDrawForeground, every time that the canvas visible area changed, but I don't think it's a proper solution. Moreover, the scale always changes the dimensions of the node.

    Do you have any suggestion?

    Thanks!

    opened by alessiapacca 0
  • Scaling while canvas is not at {left:0;top:0;} will cause canvas offset works !well

    Scaling while canvas is not at {left:0;top:0;} will cause canvas offset works !well

    • Add a pre-offset before calling changeScale()

      LGraphCanvas.prototype.processMouseWheel = function(e) {

            var rect = e.target.getBoundingClientRect()
      
            this.ds.changeScale(scale, [e.clientX -rect.left, e.clientY -rect.top]);
      
        };
      
    opened by CLOWREAD 0
  • Stop execution from node

    Stop execution from node

    Is there a way to tell the graph engine NOT to execute any connected nodes based on conditions determined in onExecute()? Meaning the rest of the graph still executes, just not the connected nodes.

    opened by neil-119 1
Owner
Javi Agenjo
Researcher and developer at Universitat Pompeu Fabra (Barcelona) Lots of WebGL and graphics algorithms. Always open to consider new options.
Javi Agenjo
Sketch-Based Streaming Anomaly Detection in Dynamic Graphs

AnoGraph Implementation of Sketch-Based Streaming Anomaly Detection in Dynamic Graphs. Siddharth Bhatia, Mohit Wadhwa, Philip S. Yu, Bryan Hooi Existi

Stream-AD 51 May 10, 2022
Selfies but in C++. Celfies is for HPC. Robust representation of semantically constrained graphs, in particular for molecules in chemistry.

celfies Selfies but in C++. Why? Because RDKit in C++ and other speed reasons. Follow the originators of the ideas & code @MarioKrenn, @AlstonLo, @Sey

sevenTM 3 Nov 24, 2021
Vizzu is a free, open-source Javascript/C++ library for animated data visualizations and data stories.

Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them

Vizzu 1.5k Jun 24, 2022
GAMEDEV - Lightweight crash reporter for Unreal Engine

Mayday Mayday is a lightweight crash reporter for Unreal Engine games that uploads the crash context and minidump to an HTTP(S) server of your choosin

Gwennaël Arbona 15 Jun 24, 2022
cartoon plugins for unreal engine

卡通材质 使用方式 在材质编辑器中添加Toon Shading节点,ShadingModel即切换为SHADINGMODELID_STYLIZED_SHADOW 注意:添加节点后不再受编辑器中的ShadingModel变量控制 How to use Add Toon Shading node in

null 41 Jun 7, 2022
Procedural Mesh Modeling Toolkit for Unreal Engine Artists

OpenLand Mesh Procedural Mesh Modeling Toolkit for Unreal Engine Artists. Installation Get it via the marketplace ??️ For non-commercial projects, you

GameDev4K 22 Apr 22, 2022
Horde3D is a small 3D rendering and animation engine. It is written in an effort to create an engine being as lightweight and conceptually clean as possible.

Horde3D Horde3D is a 3D rendering engine written in C++ with an effort being as lightweight and conceptually clean as possible. Horde3D requires a ful

Volker Vogelhuber 1.2k Jun 22, 2022
A personal project that uses DX12 to implement various render techniques to ultimately create breathtaking real-time visuals

D3D12Playground (Real Time) A personal project that uses DX12 to implement various render techniques to ultimately create breathtaking real-time visua

null 3 Apr 27, 2022
A tool to create funscripts

OpenFunscripter I swear this is a C++ project despite what the statistic on this repo says ?? The project is based on OpenGL, SDL2, ImGui, libmpv, & a

null 26 Jun 25, 2022
The official Open-Asset-Importer-Library Repository. Loads 40+ 3D-file-formats into one unified and clean data structure.

Open Asset Import Library (assimp) A library to import and export various 3d-model-formats including scene-post-processing to generate missing render

Open Asset Import Library 7.9k Jun 24, 2022
Cross-platform, graphics API agnostic, "Bring Your Own Engine/Framework" style rendering library.

bgfx - Cross-platform rendering library GitHub Discussions Discord Chat What is it? Cross-platform, graphics API agnostic, "Bring Your Own Engine/Fram

Бранимир Караџић 11.8k Jul 2, 2022
Modern C++14 library for the development of real-time graphical applications

CI Community Support bs::framework is a C++ library that aims to provide a unified foundation for the development of real-time graphical applications,

null 1.7k Jun 29, 2022
A modern cross-platform low-level graphics library and rendering framework

Diligent Engine A Modern Cross-Platform Low-Level 3D Graphics Library Diligent Engine is a lightweight cross-platform graphics API abstraction library

Diligent Graphics 2.4k Jun 29, 2022
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input

GLFW Introduction GLFW is an Open Source, multi-platform library for OpenGL, OpenGL ES and Vulkan application development. It provides a simple, platf

GLFW 9.2k Jun 24, 2022
Low Level Graphics Library (LLGL) is a thin abstraction layer for the modern graphics APIs OpenGL, Direct3D, Vulkan, and Metal

Low Level Graphics Library (LLGL) Documentation NOTE: This repository receives bug fixes only, but no major updates. Pull requests may still be accept

Lukas Hermanns 1.4k Jun 19, 2022
Antialiased 2D vector drawing library on top of OpenGL for UI and visualizations.

This project is not actively maintained. NanoVG NanoVG is small antialiased vector graphics rendering library for OpenGL. It has lean API modeled afte

Mikko Mononen 4.4k Jun 30, 2022
An Open-Source subdivision surface library.

OpenSubdiv OpenSubdiv is a set of open source libraries that implement high performance subdivision surface (subdiv) evaluation on massively parallel

Pixar Animation Studios 2.6k Jun 25, 2022
C++ (with python bindings) library for easily reading/writing/manipulating common animation particle formats such as PDB, BGEO, PTC. See the discussion group @ http://groups.google.com/group/partio-discuss

Partio - A library for particle IO and manipulation This is the initial source code release of partio a tool we used for particle reading/writing. It

Walt Disney Animation Studios 401 Jun 22, 2022