JavaScriptLiteGraph
/
index.html

<script type="text/javascript" src="build/litegraph.js"></script>
<link rel="stylesheet" type="text/css" href="css/litegraph.css">
<link rel="stylesheet" type="text/css" href="css/litegraph-editor.css">

<body style='width:100%; height:100%'>
  <button id="saveButton">Save JSON</button>
  <button id="loadButton">Load JSON</button>
  <canvas id='mycanvas' width='1920' height='1080' style='border: 1px solid'></canvas>
  <script>
    //注册自定义node
    //node constructor class
    function MyAddNode() {
      this.addInput("数字1", "number");
      this.addInput("数字2", "number");
      this.addOutput("数字1+数字2", "number");
      this.properties = { precision: 1 };
    }

    //name to show
    MyAddNode.title = "数字相加";

    //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/sumdd", MyAddNode);

    //#region 自定义节点
    // 创建自定义HTTP请求节点类
    function CustomHttpRequestNode() {
      this.addInput("URL", "string");
      this.addInput("Method", "string");
      this.addOutput("Response", "object");
    }

    CustomHttpRequestNode.title = "Custom HTTP Request";

    // 执行节点操作
    CustomHttpRequestNode.prototype.onExecute = function () {
      // 从输入端获取URL和HTTP方法
      var url = this.getInputData(0);
      var method = this.getInputData(1);

      // 执行HTTP请求，这里使用了简化示例，你可以根据需要使用更复杂的HTTP请求库
      if (url && method) {
        fetch(url, { method: method })
          .then(function (response) {
            return response.text();
          })
          .then(function (data) {
            // 将响应数据输出到节点的输出端
            this.setOutputData(0, data.substring(0,100));
          }.bind(this))
          .catch(function (error) {
            console.error("Error in HTTP request:", error);
          });
      }
    };

    // 注册自定义节点类
    LiteGraph.registerNodeType("custom/http_request", CustomHttpRequestNode);
    //#endregion

    //开始
    var graph = new LGraph();
    var canvas = new LGraphCanvas("#mycanvas", graph);

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

    var constant1 = LiteGraph.createNode("basic/const");
    constant1.pos = [100, 100];
    graph.add(constant1);

    var constant2 = LiteGraph.createNode("basic/const");
    constant2.pos = [100, 200];
    graph.add(constant2);

    var sumNode = LiteGraph.createNode("math/operation");
    sumNode.pos = [300, 150];
    graph.add(sumNode);

    var outputNode = LiteGraph.createNode("basic/watch");
    outputNode.pos = [500, 150];
    graph.add(outputNode);

    constant1.setValue(2);
    constant2.setValue(3);


    graph.start();


    //初始化默认
    dfjson = {"last_node_id":17,"last_link_id":7,"nodes":[{"id":9,"type":"basic/watch","pos":[854,295],"size":{"0":850,"1":361.3999938964844},"flags":{},"order":7,"mode":0,"inputs":[{"name":"value","type":0,"link":4,"label":"<!DOCTYPE html><!--STATUS OK--><html><head><meta http-equiv=\"Content-Type\" content=\"text/html;charse"}],"properties":{}},{"id":7,"type":"basic/string","pos":[187,485],"size":[180,30],"flags":{},"order":0,"mode":0,"outputs":[{"name":"string","type":"string","links":[2],"slot_index":0}],"title":"请求方法","properties":{"value":"get"}},{"id":6,"type":"basic/string","pos":[193,407],"size":[180,30],"flags":{},"order":1,"mode":0,"outputs":[{"name":"string","type":"string","links":[1],"slot_index":0}],"title":"网址","properties":{"value":"http://www.baidu.com"}},{"id":5,"type":"custom/http_request","pos":[456,307],"size":{"0":350,"1":212.39999389648438},"flags":{},"order":5,"mode":3,"inputs":[{"name":"URL","type":"string","link":1},{"name":"Method","type":"string","link":2},{"name":"onTrigger","type":-1,"link":3,"optional":true,"nameLocked":true}],"outputs":[{"name":"Response","type":"object","links":[4],"slot_index":0},{"name":"onExecuted","type":-1,"links":null,"optional":true,"nameLocked":true}],"title":"自定义请求","properties":{}},{"id":8,"type":"widget/button","pos":[398,589],"size":[164,84],"flags":{},"order":2,"mode":0,"outputs":[{"name":"","type":-1,"links":[3],"slot_index":0},{"name":"","type":"boolean","links":null}],"title":"执行","properties":{"text":"click me","font_size":30,"message":""}},{"id":14,"type":"basic/sumdd","pos":[451,166],"size":{"0":140,"1":46},"flags":{},"order":6,"mode":0,"inputs":[{"name":"数字1","type":"number","link":5,"slot_index":0},{"name":"数字2","type":"number","link":6}],"outputs":[{"name":"数字1+数字2","type":"number","links":[7],"slot_index":0}],"properties":{"precision":1}},{"id":15,"type":"basic/const","pos":[168,147],"size":[180,30],"flags":{},"order":3,"mode":0,"outputs":[{"name":"value","type":"number","links":[5],"label":"100.000","slot_index":0}],"properties":{"value":100}},{"id":16,"type":"basic/const","pos":[184,237],"size":[180,30],"flags":{},"order":4,"mode":0,"outputs":[{"name":"value","type":"number","links":[6],"label":"123.000","slot_index":0}],"properties":{"value":123}},{"id":17,"type":"basic/watch","pos":[714,163],"size":{"0":140,"1":26},"flags":{},"order":8,"mode":0,"inputs":[{"name":"value","type":0,"link":7,"label":"223.000"}],"properties":{}}],"links":[[1,6,0,5,0,"string"],[2,7,0,5,1,"string"],[3,8,0,5,2,-1],[4,5,0,9,0,"object"],[5,15,0,14,0,"number"],[6,16,0,14,1,"number"],[7,14,0,17,0,"number"]],"groups":[],"config":{},"extra":{},"version":0.4}
    graph.configure(dfjson, this); // 配置图数据
    canvas.setDirty(true); // 更新画布

    // 添加保存功能
    function saveGraph() {
      var data = graph.serialize();
      var json = JSON.stringify(data);
      var blob = new Blob([json], { type: "application/json" });
      var url = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = "graph.json";
      document.body.appendChild(a);
      a.click();
      URL.revokeObjectURL(url);
    }
    // 添加加载功能
    function loadGraph() {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = ".json";

      input.onchange = (event) => {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            const data = JSON.parse(e.target.result);
            graph.configure(data, this); // 配置图数据
            canvas.setDirty(true); // 更新画布

          };
          reader.readAsText(file);
        }
      };

      input.click();
    }
    // 创建保存按钮
    const saveButton = document.getElementById("saveButton");
    saveButton.textContent = "保存图";
    saveButton.onclick = saveGraph;

    // 创建加载按钮
    const loadButton = document.getElementById("loadButton");
    loadButton.textContent = "加载图";
    loadButton.onclick = loadGraph;

  </script>

  <script>
  </script>
</body>