Vue + litegraph.js 实现蓝图功能

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, //连线id
                1, //origin_id 		源头节点id
                0, //origin_slot 	源头-出口序号
                2, //target-id 		目标节点id
                0, //target_slot 	目标-入口序号
                "number" //type
            ]
        ],
        "groups": [],
        "config": {},
        "extra": {},
        "version": 0.4
    }