Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
foreword
I believe that everyone often uses flowcharts in the workplace. In the Internet industry, drawing flowcharts is of great value no matter in the product design stage or in the later stage of optimizing business processes. In fact, not only the Internet industry, flowcharts are actually widely used in all walks of life.
For example, when a bank handles the account opening business, it will have a relatively complicated process. There are not only fixed steps in the process, such as reviewing materials, printing vouchers, etc., but also some judgment conditions, such as whether the amount exceeds 200,000, whether it is necessary to prove Password withdrawal, etc. At this time, a flow chart can be used to clearly show the entire business flow:
For another example, during the training of new employees, there may be collaboration between multiple departments, so the flow chart can also be used to help employees understand the subsequent training steps:
To give another example, in the Internet industry, a complete test needs to be carried out before a project goes online. The test is divided into many types, such as black box, white box, smoke test, etc., which are carried out according to the steps and corresponding test reports are generated. If one of the steps of the test fails, you need to notify R&D to modify the bug and retest. The flow chart below can clearly show the process of cooperation between R&D, products and testing:
The reason why so many industries are using flowcharts is because it has the following benefits:
1. Make complex processes easy to understand.
2. It is convenient to identify business bottlenecks and improve existing processes.
3. Easy to explain business to others.
And SpreadJS (our company's product, a front-end online Excel table ) also supports inserting flowcharts, but sometimes we don't want to draw the flowchart ourselves, but hope to automatically generate a flowchart based on a certain data structure , and this data can be It is automatically spliced on the server side, or it can be directly the data of other third-party services. After the data is sent to the front end, a flow chart is automatically generated. If certain modifications are made to the flow chart, the data will also change accordingly, so that the data in the flow chart can also be saved for future use.
Suppose we currently have such a data structure (some data omitted).
Among them, the elements array saves all the processes, and id is the unique id value of the process; text represents the text in the process box; type represents whether it is a rectangular frame of a normal process or a decision-making diamond frame; process represents the progress of the current process, divided into future Started, in progress, and completed, the default is not started; width and height represent the width and height of the shape, and can be omitted.
The edge array contains the connection relationship among the various processes. In the flow chart, the arrow points from the source to the target, and the flag represents the result in the decision-making process.
Finally, I want to generate such a flowchart in SpreadJS:
So how can such an effect be achieved? I think roughly the following work needs to be done:
1. Insert all flowchart shapes into SpreadJS according to the information of elements
2. According to the connection relationship of the edge, place each shape in the correct position
3. Create connections between shapes
4. Add monitoring, when the process changes, dynamically change the data
Implementation steps
Next, let's talk about how to implement the above four steps.
1. Insert all flowchart shapes into SpreadJS according to the information of elements
This step is relatively simple, nothing more than traversing elements and inserting shapes into the current sheet:
We use the information in the data to modify the style of the shape, including width, height and background color.
Here we can hang the id on the shape, and then find the corresponding shape or data model through the id.
In addition, readers can notice that I have mounted two functions on the data model, namely next and prev, which are for the convenience of finding the next or upper level of the process, and these two functions will be frequently used in the future.
After doing this, the shape in SpreadJS has been generated:
2. According to the connection relationship of the edge, place each shape in the correct position
This step is more difficult. Assuming that our flow chart expands from left to right, then the position of the abscissa (x direction) is well determined. Every time you go deeper, the abscissa moves to the right. It is difficult It lies in the calculation of the position of the ordinate (y direction). I am here to throw a brick to attract jade. If you have a better algorithm, you can share it in the comment area~
The general idea is as follows: Please see the structure in the figure below. In the left and right figures, the longitudinal positions of nodes B and C from A are different. This is because node B in the left figure has more child nodes, while the right figure has more child nodes Less, so the left side needs to be opened more in the vertical direction to place the subsequent nodes.
Of course, this does not refer to the number of child nodes alone, but depends on the height they occupy, that is, the number of sibling nodes. So in the code, we need to recursively calculate the subsequent height value of a node:
Among them, the hasCountMax value is to prevent node loops, such as A→B→A, and there are similar processing in the code.
After getting the height value of the node, the position can be calculated. The larger the height value, the farther the vertical distance from the parent node is. Of course, the number of sibling nodes occupied by the current node, as well as the parent, The height of sibling nodes:
In the final code, you can see that this is also a recursive calculation, which needs to calculate the position of the next level of each node.
3. Create connections between shapes
The idea of this step is a little complicated, but it is relatively simple to implement.
The difficulty lies mainly in determining the position of the connection point. Both the rectangle and the rhombus have 4 connection points. In the figure below, it is not the best way to connect the left 2 to the right 2. We hope the following three ways: left 2 right 1, left 3 right 1, left 3 right 0, So we need to determine the connection point according to the positional relationship between the two shapes.
A little junior high school mathematics knowledge is used here. We need to calculate the connection line from the starting shape to the center position of the target shape, and the sine value of the angle with the horizontal axis to determine the connection point:
There are a total of 12 situations here, so I won’t repeat them one by one.
The connection line of the decision diagram should also indicate two different situations of "yes" and "no". Just calculate the center point of the connection line and insert the shape:
4. Add monitoring, when the flow chart changes, dynamically change the data
Because the user can drag the flow chart at any time, and the change attributes of the flow chart are roughly as follows: position, length and width, and text attributes. We need to record their latest values for the convenience of restoring next time. In addition, when the position and length and width change, the connection will also be automatically updated. We need to update the positions of the "Yes" and "No" text mentioned above. Here, the anti-shake mode is used to improve performance.
In addition, I also added some new menus in the designer, which can modify the status of the process, export the flow chart as a picture, or print the data model of the flow chart, etc. Interested readers can check it in the source code Method to realize.
Here is a demonstration of the function of data synchronous modification after modifying the flow chart. Let’s take “replacement” as an example. By default, the data of replacement is as follows:
We adjust the replacement to completed through the button above, modify the text, and move its position, after changing its width and height:
It can be seen that the process indicating its status has changed from 1 (in progress) to 2 (completed), and the width, height, position, and text have also changed accordingly.
Conclusion:
Flowchart is a very useful and commonly used tool. Combined with SpreadJS, you can easily implement the function of dynamically generating flowcharts. On the basis of this demo, you can also add new children and brothers by right-clicking Level elements and other functions, with the help of SpreadJS's rich and open Api, you can achieve the functions you want very flexibly.
Finally, I hope this article can help you~
Source address:
Extension link:
Implementing Excel server-side import and export under the Spring Boot framework
Project Combat: Online Quotation Procurement System (React +SpreadJS+Echarts)
Svelte framework combined with SpreadJS to realize pure front-end Excel online report design