@litegraph-ts/core

readme here

Example Usage

1import { LiteGraph, LGraph, LGraphCanvas } from "@litegraph-ts/core"
2import { ConstantNumber, Watch } from "@litegraph-ts/nodes-basic"
3
4// Include litegraph's css, required for the UI to function properly
5import "@litegraph-ts/core/css/litegraph.css"
6
7// Grab canvas element from the index.html
8const root = document.getElementById("main") as HTMLDivElement;
9const canvas = root.querySelector<HTMLCanvasElement>(".graphCanvas");
10
11// Setup graph (nodes/logic) and graph canvas (rendering/canvas/UI)
12const graph = new LGraph();
13const graphCanvas = new LGraphCanvas(canvas, graph);
14graphCanvas.background_image = "imgs/grid.png";
15(window as any).graph = graph;
16(window as any).graphCanvas = graphCanvas;
17
18// Refresh graph on every draw tick in a loop
19graph.onAfterExecute = () => {
20    graphCanvas.draw(true);
21};
22
23// Create a ConstantNumber, sends a constant number on its output
24var constNumber = LiteGraph.createNode(ConstantNumber);
25constNumber.pos = [200, 200];
26constNumber.setValue(4.5);
27
28// Create a Watch, displays input value on its panel
29var watch = LiteGraph.createNode(Watch);
30watch.pos = [600, 300];
31
32// Add components to the graph
33graph.add(constNumber);
34graph.add(watch);
35
36// Connect the first output of the number (output 0) to the first input of the watch (input 0)
37constNumber.connect(0, watch, 0);
38
39// Begin executing logic on the graph
40graph.start();