【已开源】基于Vue2和jsPlumb.js的模仿sqlFlow数据血缘图的前端页面【源代码已更新】

0.概述

【已开源】基于jsPlumb.js的模仿sqlFlow数据血缘图的前端页面 开源后，
一些小伙伴咨询是否有Vue版本的计划。拖拖拉拉写完了，参考了这个项目jsplumb-vue-wordflow写的，毕竟自己前端功底着实不行。效果如下图：

• Vue2 + jsplumb 2.15.5 编写
• 项目地址： jsplumb-dataLineage-vue https://github.com/mizuhokaga/jsplumb-dataLineage-vue

1. 功能特点

1. 根据json渲染血缘图，任意节点可自由拖动；移动到连线上高亮相关列和线
2. 画布支持整体缩放 （滚轮缩放）和整体拖动
3. 下载JSON
4. 下载血缘保存为png图片

因为是基于原生js版修改而来，部分代码是从我之前的js代码搬过来的。「之前代码」指的是js版本，文章可以看这里：【已开源】基于jsPlumb.js的模仿sqlFlow数据血缘图的前端页面 !

2. 项目结构 && 功能实现

目前介绍的是最新的代码(github sha:

b043bc2

),最初的完整代码是 Feb 14, 2022的

135b383

2.1 项目结构

├─assets # 图片资源
├─common # 通用js
├─router# vue路由
├─views
│ ├─components # 单个节点的组件
│ │ ├─TableNode.vue
│ ├─config # 配置相关
│ │ ├─buttonGroup.js #按钮组的配置文件
│ │ ├─jsplumbConfig.js # jsplumb的配置文件
│ │ ├─sampleData.json #示例的json文件
│ │ └─tableTypeMappingColor.js #表类型对应的颜色配置文件
│ └─methods # jsplumb调用的方法函数和按钮组的方法
│ │ ├─buttonMethods.js # 按钮组的调用的方法
│ │ └─comm.js #jsplumb调用的方法等
└─Index.vue# 首页，也是核心内容

2.2 先看样例samp.json

由

edges

数组和

nodes

数组构成，具体的设计来源于我的从SQLFlow的json格式中学习数据血缘json格式设计这篇文章
和js版的不同是对象的字段略有调整。

"edges":[{"from":{"field":"name",
                "name":"data2"},
            "to":{"field":"name",
                "name":"middle1"}},
        ..]"nodes":[{"name":"data1",
            "type":"Origin",
            "fields":[{"name":"age"}, {"name":"name"}, {"name":"class"}],
            "top":135,
            "left":10},
        ..]

2.3 功能实现

2.3.1. 渲染、高亮功能

和之前一样,走 渲染node-》添加端点-》连线这一套，期间完成事件绑定，只不过部分jsplumb的api自己封装了下根据自己的需求

//1 绘制节点信息this.json.nodes.forEach(node=>{//使节点可拖动this.draggableNode(node.name)
          node.fields.forEach(field=>{this.addEndpoint(node.name +this.minus+ field.name, anchorArr)})})

//2 绘制节点间连线this.json.edges.forEach(edge=>{let from = edge.from.name +this.minus + edge.from.field +this.minus +"Right",
              to = edge.to.name +this.minus + edge.to.field +this.minus +"Left"this.connectEndpoint(from, to);...

2.3.2. 画布整体缩放和 整体平移

这里用是原项目的功能，底层使用 panzoom 这个lib实现的，具体参考comm.js的

initPanZoom

方法，也可以直接去jsplumb-vue-wordflow看源项目

2.3.3. 下载json和图片功能

• json：直接打开下载框，下载json
• 图片：使用html2canvas + canvg 实现功能，利用中间元素生成，解决了之前生成图片后dom结构被破坏连线无法移动的问题，注意canvg 版本，我开始使用2.X的版本总由各种报错，换回1.5就可以了

3. QA

Q1:后端呢？为什么只有前端代码？
A1:后端代码丢失了，也不打算再写了。这里有条思路：后端可以利用sqlflow开源的jar包完成sql解析，再构建本项目所需要的json配合使用。sqlflow的项目地址：https://github.com/sqlparser/gsp_demo_java

Q2:json中的节点坐标是如何确定的呢？
A2：坐标在最开始设计的时候是由后端负责计算处理的。前端只负责渲染表达。后端这里提供思路：前端传递渲染区域长宽，后端利用拓扑排序生成每个节点的坐标，注意如果你的json有成环的情况，还需要在拓扑排序之前自行处理环的情况！推荐阅读：https://www.dazhuanlan.com/tong08/topics/982245

Q3：有问题如何联系你？
A3：+qq 1538413737 or github 提issue

4. 其他

一些参考文章：

• 在jsplumb中使用html2canvas + svgToCanvas 将svg图片以及canvas生成缩略图并用于用户在界面下载和上传后台
• 基于jsplumb+vue的流程图绘制
• 【已开源】基于jsPlumb.js的模仿sqlFlow数据血缘图的前端页面
• Vue中使用jsplumb遇到的一些坑

欢迎留言提问！