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

基于Vue和jsplumb的模仿sqlFLow数据血缘图的前端

mizuhokaga

9907人浏览 · 2022-02-14 14:58:53

mizuhokaga · 2022-02-14 14:58:53 发布

0.概述

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

在这里插入图片描述
2022-03-15 17:07:05 更新了vue3版本,仅供参考.githu切换vue3分支即是vue3编写的

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

1. 功能特点

根据json渲染血缘图，任意节点可自由拖动；移动到连线上高亮相关列和线
画布支持整体缩放（滚轮缩放）和整体拖动
下载JSON
下载血缘保存为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 ,该参考文档转载存档:https://blog.csdn.net/qq_44831907/article/details/128370539