Vue3 + litegraph.js 实现蓝图功能

litegraph.js

	[github](https://github.com/jagenjo/litegraph.js)  [demo](https://tamats.com/projects/litegraph/editor/)

vue - html

    <canvas id="mycanvas" width="1524" height="720" style="border: 1px solid" ></canvas>

vue - ts

import {LGraph, LGraphCanvas, LiteGraph} from "litegraph.js";
import "litegraph.js/css/litegraph.css"onMounted(()=>{initGraph();
})const initGraph = ()=>{graph = new LGraph();var canvas = new LGraphCanvas('#mycanvas', graph)
}//导入json文件
//graph.load(文件地址）；//导入json数据
graph.configure(json)

获取画布数据

graph.serialize()

json说明

{"last_node_id": 2, //必填，最后一个节点的id"last_link_id": 4, //必填，最后一根连线的id"nodes": [{"id": 2,"type": "event/explode","pos": [847,479],"size": {"0": 200,"1": 150},"flags": {"horizontal": true},"order": 1,"mode": 2,"inputs": [{"name": "ABB结构","links": null,"link": 4}],"outputs": [],"title": "事件-爆炸图","properties": {}},{"id": 1,"type": "button","pos": [100,100],"size": {"0": 130,"1": 60},"flags": {"horizontal": true},"order": 0,"mode": 0,"inputs": [],"outputs": [{"name": "点击","type": "number","links": [2,3,4],"slot_index": 0},{"name": "双击","type": "number","links": null}],"title": "按钮","properties": {}}],"links": [[4, //连线id1, //origin_id 		源头节点id0, //origin_slot 	源头-出口序号2, //target-id 		目标节点id0, //target_slot 	目标-入口序号"number" //type]],"groups": [],"config": {},"extra": {},"version": 0.4}