头图

Sharing of design ideas of the open source graph editing library NebulaGraph VEditor

This article was first published on the Nebula Graph Community public account

NebulaGraph VEditor is a high-performance, highly customizable WYSIWYG graph visual editor front-end library.

The bottom layer of NebulaGraph VEditor is based on SVG drawing. It is easy for secondary development and custom drawing through a reasonable abstract code structure. It is very suitable for approval flow, workflow, blood relationship, ETL processing, graph query and other graphs (Graph) and network (Network) WYSIWYG editing and preview scenarios for type topology information. In the NebulaGraph project, VEditor easily supports visualization scenarios such as graph query, graph editing, graph modeling, graph structure, and graph path display.

After continuous iteration and polishing in NebulaGraph, VEditor has been relatively complete, and related codes have been open sourced. Based on this, today I will share with you some of its design ideas and thoughts.

Basic Features

  • Highly customizable point, line shape, all parts can be customized
  • Flat, simple, straightforward code architecture
  • Minimap, Magnetic Lines
  • Various shortcut keys support
  • history record
  • Lightweight, only 160kb before compression

design concept

When I first came into contact with the diagram editing library, my own needs were not high. It could meet customization + animation, but after reading a lot of flowchart libraries in the industry, self-cultivation as a front-end engineer made it difficult to over-design. The architecture, bloated interfaces, and complex class relationships are favorable, which is contrary to my pursuit of simple, streamlined, and low-coupling code concepts. Therefore, I finally decided to write a lightweight library that can meet the customization needs of various business scenarios. The design concept of VEditor is to make it easier for developers to use it on the basis of customizability and understandability, reduce learning of various APIs, and reduce dependence on various libraries.

Technology Architecture

开源图编辑库 NebulaGraph VEditor 的设计思路分享

The overall architecture mainly uses events to manage dependencies between entities. It is also recommended to obtain the state changes of the entire flowchart mainly through events.

The rendering process is semi-automatic rendering. After changing the flowchart data, you need to manually trigger the rendering. In other states, the operation of the canvas will trigger the user-defined shape rendering function to complete the custom node rendering node or line rendering.

Rendering implementation

The main body of VEditor uses SVG for rendering. Thanks to the declarative use of SVG, its internal structure is externally visible, and it is very easy to customize its style. Users can directly copy the relevant SVG styles in the outside world. , and can also directly manipulate SVGDOM to monitor related mouse events, and add various animations to certain nodes.

In shape rendering, the user's custom rendering function is registered mainly through the exposed Shape interface. From this point of view, VEditor can render based on any rendering technology, as long as the rendering interface returns SVGDOM, which can be SVGElement or ForeignObject. Therefore, when using a virtual DOM framework such as React or Vue, it is highly recommended to manage the rendering of SVG. In some cases, a Canvas can even be wrapped to render WebGL nodes, which greatly expands the customization in the business.

In addition to nodes, anchors and lines also support rendering of objects registered as Shapes after implementing the corresponding interface. Using this feature in our Explorer's actual business, the graph computing flow configuration supports dynamic addition, deletion and modification of algorithm parameters, anchors and TP queries. Input and output anchors (Fig. 1), as well as edge filtering in graph visualization query, step count rendering (Fig. 2). You are also welcome to apply for a trial of Explorer to experience the functions related to the flowchart. The trial address is https://nebula-graph.com.cn/products/explorer/

开源图编辑库 NebulaGraph VEditor 的设计思路分享
开源图编辑库 NebulaGraph VEditor 的设计思路分享

The overall architecture mainly uses events to manage dependencies between entities. It is also recommended to obtain the state changes of the entire flowchart mainly through events.

The rendering process is semi-automatic rendering. After changing the flowchart data, you need to manually trigger the rendering. In other states, the operation of the canvas will trigger the user-defined shape rendering function to complete the custom node rendering node or line rendering.

data structure design

The data structure of VEditor is similar to most similar libraries, but it will not destroy the user's object reference, that is, when the user mounts the relevant data on the node or line object, it will be aligned and retained, which will facilitate the user to implement such as After node configuration, edge configuration and other operations, the related data is directly mounted to the point data. Therefore, operations such as Redo and Undo in the history record will store the user's data as a snapshot.

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

performance design

As we all know, the performance of SVG is much worse than that of Canvas in small resolution rendering, which is also a disadvantage brought by the improvement of ease of use. This is especially noticeable when initializing a large number of complex or animated nodes. In response to this situation, the data rendering part of VEditor adopts an asynchronous process, and the rendering of the anchor point is placed in the next event loop to avoid the forced redraw of the browser caused by a large number of acquisitions of bbox during the synchronization process. After finishing drawing, cache the corresponding node data to avoid repeated acquisition.

开源图编辑库 NebulaGraph VEditor 的设计思路分享

When adding nodes or lines, the DOM feature of SVG allows the browser to automatically perform dirty rendering. Therefore, the performance of incremental rendering is not different from that of Canvas. The main reason is that a large number of DOM redraws will be slower during interaction and animation. . The performance index currently designed is that 1000 nodes with complex shapes can be rendered smoothly, which is relatively easy in process editing scenarios.

Interactive Design

VEdtior provides a Dagre-based directed graph layout by default, but it is optimized. After calling Dagre layout, all nodes will be automatically centered. At the same time, the adaptive size function is provided. After the adaptive, different from other libraries, the coordinates of the current node will be reset to the adaptive position. After the user saves the current data, the adaptive position can be directly restored.

VEditor's minimap uses canvg rendering, which directly converts SVG to Canvas, which can ensure the accuracy of the minimap and reduce performance loss. In terms of interaction, it provides a full set of view changing and dragging functions.

Future plan

In the future planning, VEditor is more inclined to be an open-ended graph data editor and renderer. While completely missing functions, it will expand the scenes that graph editing can play and maintain ease of use.

  • Add box selector and multi-select actions
  • Undirected graph, double arrow support
  • Further optimization of performance

👉 GitHub open source address: https://github.com/vesoft-inc/nebulagraph-veditor

Welcome to give us suggestions and contribute PR~

Exchange graph database technology? To join the NebulaGraph exchange group, please fill in your NebulaGraph business card first, and the Nebula assistant will pull you into the group~~


Nebula 的图数据库世界
介绍图数据库和 Nebula 的一切

NebulaGraph:一个开源的分布式图数据库。欢迎来 GitHub 交流:[链接]

163 声望
674 粉丝
0 条评论
推荐阅读
可视化探索开源项目的 contributor 关系
引语:作为国内外最大的代码托管平台,根据最新的 GitHub 数据,它拥有超 372,000,000 个仓库,其中有 28,000,000 是公开仓。分布式图数据库 NebulaGraph 便是其中之一,同其他开源项目一样,NebulaGrpah 也有自...

NebulaGraph

终于卷完了!Redis 打怪升级进阶成神之路(2023 最新版)!
是一种非关系型数据库服务,它能解决常规数据库的并发能力,比如传统的数据库的IO与性能的瓶颈,同样它是关系型数据库的一个补充,有着比较好的高效率与高性能。专注于key-value查询的redis、memcached、ttserver。

民工哥8阅读 810

封面图
硬卷完了!MongoDB 打怪升级进阶成神之路( 2023 最新版 )!
前面我们学习:MySQL 打怪升级进阶成神之路、Redis 打怪升级进阶成神之路,然后我们还在继续 NoSQL 的卷王之路。从第一篇文章开始,我们逐步详细介绍了 MogoDB 基础概念、安装和最基本的CURD操作、索引和聚合、工...

民工哥6阅读 450

封面图
初学后端,如何做好表结构设计?
这篇文章介绍了设计数据库表结构应该考虑的4个方面,还有优雅设计的6个原则,举了一个例子分享了我的设计思路,为了提高性能我们也要从多方面考虑缓存问题。

王中阳Go4阅读 1.7k评论 2

封面图
又一款内存数据库横空出世,比 Redis 更强,性能直接飙升一倍!杀疯了
KeyDB是Redis的高性能分支,专注于多线程,内存效率和高吞吐量。除了多线程之外,KeyDB还具有仅在Redis Enterprise中可用的功能,例如Active Replication,FLASH存储支持以及一些根本不可用的功能,例如直接备份...

民工哥4阅读 1.7k评论 2

封面图
面试官:请说一下如何优化结构体的性能?
使用内存对齐机制优化结构体性能,妙啊!前言之前分享过2篇结构体文章:10秒改struct性能直接提升15%,产品姐姐都夸我好棒 和 Go语言空结构体这3种妙用,你知道吗? 得到了大家的好评。这篇继续分享进阶内容:结...

王中阳Go4阅读 3.8k评论 2

封面图
MySQL百万数据深度分页优化思路分析
一般在项目开发中会有很多的统计数据需要进行上报分析,一般在分析过后会在后台展示出来给运营和产品进行分页查看,最常见的一种就是根据日期进行筛选。这种统计数据随着时间的推移数据量会慢慢的变大,达到百万...

一个程序员的成长7阅读 893

封面图

NebulaGraph:一个开源的分布式图数据库。欢迎来 GitHub 交流:[链接]

163 声望
674 粉丝
宣传栏