关于数据库:开源图编辑库-NebulaGraph-VEditor-的设计思路分享

本文首发于 Nebula Graph Community 公众号

NebulaGraph VEditor 是一个领有高性能、高可定制的所见即所得图可视化编辑器前端库。

NebulaGraph VEditor 底层基于 SVG 绘图，它通过正当形象代码构造以易于二次开发和自定义绘制，极实用于审批流，工作流，血缘关系，ETL 解决，图查问等图（Graph）和网络（Network）型拓扑信息的所见即所得编辑和预览场景。在 NebulaGraph 我的项目中，VEditor 轻松反对了图查问，图编辑，图建模，图构造，图门路展现等可视化场景。

在 NebulaGraph 中通过一直迭代、打磨之后，VEditor 曾经绝对欠缺，开源了相干代码。基于此，明天我就来为大家分享一下它的一些设计的思路与思考。

高定制性的点，线形态，所有部件皆可定制
扁平，简略，间接的代码架构
小地图，磁吸线
各类快捷键反对
历史记录
轻量化，压缩前仅 160kb

最早开始接触图编辑库时，自身需要其实并不高，能满足定制 + 动画即可，但看了业界十分多的流程图库后，作为一名前端工程师的自我涵养让人很难对有些适度设计的架构，臃肿的接口，简单的类关系有好感，这与我追寻简略，精简，低耦合的代码理念相悖。因而最终决定手写一个轻量的库，并能满足各种业务场景的定制需要。VEditor 的设计理念就是心愿在可定制性和可了解性的根底上能让开发者用起来更轻便，缩小学习各类 API，缩小依赖各类库。

整体架构次要通过事件来做实体间的依赖治理，也倡议次要通过事件来获取整个流程图的状态变动。

其中渲染流程为半自动渲染，扭转流程图数据后须要手动触发渲染，其余状态下对画布进行操作会触发用户定义的 shape 渲染函数，实现自定义节点渲染节点或线渲染。

VEditor 主体应用 SVG 进行渲染，得益于 SVG 的申明式应用形式，其内部结构都是外置可见的，对其进行款式定制化会十分的容易，用户能够在外界间接复写相干的 SVG 款式即可，同时还能够间接操作 SVGDOM 监听相干的鼠标事件，及对某些节点增加各类动画。

在形态渲染上，次要通过裸露进去的 Shape 接口注册用户的自定义渲染函数。从这个角度上来看，VEditor 能够基于任意应用渲染技术进行渲染，只有渲染接口返回 SVGDOM 即可，这个 DOM 能够是 SVGElement 或 ForeignObject 等。因而在应用 React 或 Vue 等虚构 DOM 框架时，十分举荐用其治理 SVG 的渲染。甚至某些状况下能够包裹一个 Canvas 来渲染 WebGL 的节点，这十分大的拓展了业务中的定制性。

除了节点外，锚点及线也反对实现对应接口后注册为 Shape 的对象渲染，在咱们的 Explorer 的理论业务中利用这个特点，实现了图计算流配置反对动静增删改算法参数锚点和 TP 查问输入输出锚点（图 1），以及图可视化查问中边的过滤，步数渲染（图 2)。也欢送大家申请 Explorer 试用，体验下流程图相干性能，试用地址 https://nebula-graph.com.cn/p…

整体架构次要通过事件来做实体间的依赖治理，也倡议次要通过事件来获取整个流程图的状态变动。

VEditor 的数据结构和绝大部分的同类库相似，但不会毁坏用户的对象援用，也就是在用户往节点或线的对象上挂载相干数据时，会对齐进行保留，这样会不便用户实现诸如节点配置，边配置等操作后将相干数据间接挂载到点数据上。因而历史记录的 Redo，Undo 等操作会将用户的数据当做快照一起存储下来。

{
    nodes:[{
        uuid:"uuid",
        type:"default",// shape 类型 
    }],
    lines:[{
        from:"uuid",
        to:"uuid",
        fromPoint:0,
        toPoint:0
    }]
}

家喻户晓，SVG 在小分辨率的渲染上，性能比 Canvas 差了许多，这也是易用性晋升带来的一个毛病。尤其是在初始化时大量比较复杂或有动画的节点时，非常明显。针对这种状况，VEditor 的数据渲染局部采纳的是异步流程，将锚点的渲染放到了下一个事件循环里，防止同步过程中大量获取 bbox 带来的浏览器强制重绘。在完结绘制后，缓存对应的节点数据防止反复获取。

而在增加节点或线等操作时，SVG 的 DOM 个性会让浏览器主动进行脏渲染，因而增量渲染的性能和 Canvas 差距并不，次要是进行交互和动画时导致 DOM 大量重绘会比较慢。目前设计的性能指标是 1000 个简单形态的节点进行晦涩渲染，在流程编辑类场景下是比拟轻松的。

VEdtior 默认提供了基于 Dagre 的有向图布局，但对其进行了优化，调用 Dagre 布局后，会主动对所有节点进行居中解决。同时提供了自适应大小性能，在自适应后，不同于其余库，这里会将以后节点的坐标重置为自适应的地位，在用户保留以后数据，能够间接还原自适应的地位。

VEditor 的小地图采纳了 canvg 渲染，间接将 SVG 转换为 Canvas，能够保障小地图的准确性，同时缩小性能损耗。在交互上则提供了全套的视图扭转和拖拽性能。

前面的布局中，VEditor 更偏向做一个不限畛域的图数据编辑和渲染器，在残缺缺失性能的同时，会扩充图编辑能施展的场景并放弃易用度。

增加框选器和多选操作
无向图，双箭头反对
性能进一步优化

👉 GitHub 开源地址：https://github.com/vesoft-inc…

欢送来给咱们提倡议 and 奉献 PR 呦~

交换图数据库技术？退出 NebulaGraph 交换群请先填写下你的 NebulaGraph 名片，Nebula 小助手会拉你进群哦~~

关于数据库:开源图编辑库-NebulaGraph-VEditor-的设计思路分享

根本个性

设计理念

技术架构

渲染实现

数据结构设计

性能设计

交互设计

将来打算