0


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

0.概述

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

在这里插入图片描述

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遇到的一些坑

欢迎留言提问!


本文转载自: https://blog.csdn.net/qq_44831907/article/details/122923483
版权归原作者 mizuhokaga 所有, 如有侵权,请联系我们删除。

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

还没有评论