Start from scratch – Basic flowchart editing library
February 6, 2024
by Inaaya Barman
No Comments
preface
Everyone passing by, wait a step, let me share with you the process of making the flow chart drawing library. Go here to see the demo example: Demo address source code
background
Why is redevelopment needed?
Business requirements (No sell, no kill O (╥﹏╥)o)
The powerful go.js can make flow chart function perfectly. Limited by its license, it can only be discarded
The G6 library is also very powerful. A version was developed with G6 as the base, but it could not be configured freely when drawing connections between nodes, leading to the function failing to keep up with the demand and was abandoned
The target
Clear goals: What does the library need to accomplish?
There need to be start/end, steps, judgments, connections, the basic nodes of the flowchart
Given a set of data, the flow chart can be displayed normally
Flow chart should be editable: add and delete nodes, free positioning
Analysis of the
How are nodes drawn?
Nodes are composed of a series of basic graphics
For example, to draw the start node, it is a combination of two basic shapes: the ellipse and the text
By defining the base graph, the style of the node can vary
A set of basic figures is a node, and the coordinates of the figures within the node are relative to the node
How do I avoid repeating refresh calculations?
The library has display mode and edit mode
In edit mode, there are operation of adding and deleting nodes. If each operation redraws the entire artboard, it will undoubtedly increase the calculation
Design two artboards, one for displaying nodes that do not change often: display layer; Another node for drawing frequently refreshed: the edit layer; This saves a lot of computing resources
Connecting logic between nodes?
The connection between nodes should comply with as far as possible do not overlap, do not intersect
The logic currently used is to wrap the node in a rectangle with four sides and have 4 * 4 drawing logic from the start node to the end node
implementation
Provides a global method to register a custom node, where you can define any graph you want to draw. For later use, just provide the name and configuration information of the graph
Create an editor instance, which initializes the internal rendering engine, ID manager, node manager, and event distribution center
Rendering engine: Actually draw graphics on the panel, drawing according to the description of custom graphics
ID manager: Each node has a unique ID that is generated here
Node manager: Manages adding, deleting, and modifying nodes
Event distribution center: receives browser events and converts them into internal processing events for internal digestion and external exposure
Here is the system architecture diagram
Here is the program running diagram
Write in the last
Thank you for your patience to see the end
The completion of this project is still not enough. Now only demo is produced, and there are many follow-up areas to be followed up
This project refers to the flow chart operation of Go.js and the API writing method of G6
If you find anything uncomfortable, please point it out
If you have any suggestions or ideas, welcome to discuss