VEdtior 默认提供了基于 Dagre 的有向图布局

数据结构设计

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/nebulagraph-veditor