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
  • It came with an AD: My little station