可视化编辑器已成为前端发展趋势,相关产品层出不穷,但是用户较难根据自身需求去完整实现一个功能较为全面的可视化编辑器,我将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器,通过这个案例来介绍meta2d的相关功能,并向读者展示如何用meta2d从零出发搭建一个较为完整的项目,让我们在实际项目中来体验meta2d的强大之处吧。
meta2d是乐吾乐开源的2D图元组成的可视化引擎,集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点,最大程度减少研发和运维的成本,并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。
乐吾乐已将其meta2d核心库完全免费开源,本系列教程就是基于meta2d从零实现web端可视化流程图编辑器。
乐吾乐 meta2d开源项目地址:https://github.com/le5le-com/meta2d.js
乐吾乐 meta2d官方文档:https://doc.le5le.com/document/119359590
此可视化流程图编辑器项目地址:github.com/Grnetsky/me…
在线体验地址: http://editor.xroot.top/
本章节介绍meta2d核心库的使用流程及其相关概念,你也可以去官网查看最新的官方文档对相关内容的叙述
在开始介绍meta2d核心库的使用流程之前,先介绍几个概念:
有了上面三个基本概念,我们开始今天的核心库使用教程
其实,图元本质就是一个js对象,他是带有一定属性的js对象,这些属性主要由通用属性和自定义属性组成,所谓通用属性是指由meta2d核心库能够识别到的,通用属性在后期可以通过api查看,不过,最基本的通用属性有:
(1) name:用于制定该图元是什么类型,用于区分不同的图元,例如:square、triangle、circle等,meta2d内部提供了一些基本类型,请移步官方文档,除了这些基本类型,meta2d提供了一些扩展类型,需要安装相关的依赖包,具体如下:
名称 | 依赖包 | 备注 |
流程图 | @meta2d/flow-diagram | |
时序图 | @meta2d/sequence-diagram | |
类图 | @meta2d/class-diagram | |
Echarts、hightcharts、lightningchart | @meta2d/chart-diagram | 需在html中手动引入相关charts,详见官方文档 |
表单控件、表格 | @meta2d/form-diagram | |
乐吾乐图表 | @meta2d/le5le-charts | |
svg | @meta2d/svg | 该库用于解析svg |
(2)wight、height:指定图元的宽高
(3)text:指定图元的文字描述
其他属性根据不同的图元对象有不同的配置,详情移步官网。
我们都知道,图元(一定格式的json对象)是meta2d能够识别认识的东西,所以我们在开发中最主要的工作就是根据不同需求,按照相关文档来配置不同的图元,然后将这些图元数据拖拽到meta2d的画板中,meta2d就能根据所传信息,自动生成相关图形,那么仔细思考会有两个问题
第一个问题很好回答,即meta2d通过图元的name属性进行判断,第二个问题的答案是,我们要在meta2d工作之前,要将相关图形进行注册,meta2d提供了register函数进行图元的注册,那这就串通起来了,我们先将图元进行注册,再将对应的图元信息拖拽进去,就能实现图元的显示。然后通过不同图元之间的联系交互,最终我们的基本的编辑器就大功告成了。另外对于图元的编辑,mate2d也提供快了setValue API 对于改变图元样式也极其方便,具体细节我们在后面章节展开。
接下来让我们在实际操作中验证吧
首先我们学习进行相关图元信息的注册
内置图元是meta2d自带的图元,不需要额外注册
参考官方文档,内置图元有以下一些
name | 描述 |
rectangle | 矩形 |
circle | 圆 |
triangle | 三角形 |
diamond | 菱形 |
pentagon | 五边形 |
pentagram | 五角星 |
hexagon | 六边形 |
leftArrow | 左箭头 |
rightArrow | 右箭头 |
twowayArrow | 双向箭头 |
message | 消息框 |
cloud | 云 |
file | 文件 |
cube | 立方体 |
people | 人 |
line | 线 |
iframe | 网页 |
video | 音视频 |
gif | gif 动画 |
svgPath | svg path |
我们先尝试引入一个矩形试试,首先最重要的是定制图元信息,我们在icons.js中配置defaultIcon对象如下:
可以看到该defaultIcon数组中有一个对象,对象的name属性用于前端显示分组的标题,该对象的list属性就包括了在该分组下的所有图元,title属性为该图元的描述信息,是非必要的,id用于序列,icon属性用于侧边栏显示的图形,具体图标根据需求和爱好去iconfont下载即可,另外也可以使用image和svg用于展示,根据爱好自定义即可。 data属性就是最核心的图元信息了,meta2d核心库就是根据此消息进行图元匹配的,相关字段在注释中有解释,这里不过多叙述。
有了基本的信息后,让我们看看前端代码如何编写:首先,为了在侧边栏展示图标,我们需要引入相关iconfont文件(引入步骤这里忽略,详情见iconfont官网),然后在Meta2d.vue组件中导入defaultIcon对象,通过遍历渲染,最终展示如下:
详细代码见下:
管理图元
注意,e.dataTransfer.setData()函数在设置数据名时必须为"Meta2d" 或者为"Text"
可以看到,展示效果与预设效果一致。接下来我们要处理拖拽能力,用html原生拖拽实现,首先在每个图元素身上设置draggable="true"将原生的拖拽能力打开,然后监听dragstart事件,在回调函数中将该元素的图元数据传递进去,然后将数据存在事件对象的dataTransfer中,当鼠标松开时,数据就会通过dataTransfer自动传递给meta2d。
到此,我们就能够通过拖拽侧边栏元素将图元渲染在画布中了,效果如下:
同样的方式,我们可以引入其他内置图元。最终效果如下
具体案例见项目代码
首先进行流程图图元的注册,需要安装:
npm install @meta2d/flow-diagram --save
安装成功
然后在Meta2d.vue中导入注册
// Meta2d.vue