litegraph.js是一款图形节点引擎和工作流编辑器插件-BFW插件库

litegraph.js是一款图形节点引擎和工作流编辑器插件

litegraph.js一个Javascript库，用于在浏览器中创建类似于虚幻蓝图的图形。节点可以很容易地编程，它包括一个编辑器来构造和测试图形。

它可以很容易地集成到任何现有的web应用程序中，并且可以在不需要编辑器的情况下运行图形。
特点：
在Canvas2D上渲染（放大/缩小和平移，易于渲染复杂的界面，可在WebGLTexture中使用）
易于使用的编辑器（搜索框、键盘快捷键、多选、上下文菜单…）
优化为支持每个图形数百个节点（在编辑器上，也在执行时）
可自定义主题（颜色、形状、背景）
回调以个性化节点的每个操作/绘图/事件
子图（包含图本身的节点）
实时模式系统（隐藏图形，但调用节点渲染它们想要的任何内容，这对创建ui很有用）
图可以在NodeJS中执行
高度可定制的节点（颜色、形状、垂直或水平的插槽、小部件、自定义渲染）
易于集成在任何JS应用程序中（一个文件，无依赖关系）
Typescript support
Nodes provided
虽然创建新的节点类型很容易，但LiteGraph附带了一些默认节点，这些节点在许多情况下都很有用：

Interface (Widgets)

数学（三角学，数学运算）

音频（AudioAPI和MIDI）

三维图形（WebGL中的后处理）

输入（读取游戏板）

使用方式：

你可以用npm安装它

npm install litegraph.js

也可以通过cdn直接引入

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/litegraph.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/litegraph.js"></script>

实例代码

<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/litegraph.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/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);


        //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);

        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 = [200, 300];
        graph.add(node_watch);

        var node_add = LiteGraph.createNode("basic/sum");
        node_add.pos = [200, 400];
        graph.add(node_add);

        node_add.connect(0, node_watch, 0);
        node_const.connect(0, node_add, 0);
        node_const.connect(0, node_add, 1);
        // node_const.connect(0, node_watch, 0);

        graph.start()
    </script>
</body>
</html>

如何编码新的节点类型？

以下是如何构建两个输入相加的节点的示例：

//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 );

也可以包装现有函数：

function sum(a,b)
{
   return a+b;
}

LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");

Server side

它也可以使用nodejs在服务端工作，尽管有些节点在服务器中不工作（音频、图形、输入等）。

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()

github地址https://github.com/jagenjo/litegraph.js