Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use JS+CSS+HTML to make native sequence diagrams related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to use JS+CSS+HTML to make native sequence diagrams, let's take a look.

After thinking about it, I decided to use the original sound js+css+html to implement it, because the performance under the original sound js is the best. Let's start with the requirements of the new version:

The task is displayed in a tree structure on the left, which can be folded

The length of time spent running the task is shown on the right.

You need to link the relationships between tasks with lines

Zoom on the right to view detailed task status

When zooming, the drawing remains zoomed in with the mouse as the center, and the text description is not affected when zoomed in.

When the graph is zoomed out, it indicates the time taken by the task and the coordinates need to be changed according to the magnification of the image.

When the mouse moves over the timing chart, a line appears indicating the current time and information.

Difficulties in implementation

Mouse zoom, x-axis zoom mode

Mouse zooming produces the scaling of the X axis of the sequence diagram. The scaling of timing diagrams provides three ideas here:

Do data interception, intercept the data before and after according to a certain algorithm, and then re-render the whole page

Use the scaleX of css3 to scale the dom of the timing diagram

In the width of the actual change sequence diagram dom, the length of the task running, the length of the connection line, and the estimated time required for the task to run are all shown as a percentage.

Advantages and disadvantages of three ideas:

Advantages: there is no need to manipulate the css attribute of dom, and it is convenient to re-render between. Disadvantages: for using dom redrawing, the performance is very expensive, and the performance of a large number of tasks is very slow when rendering.

Advantages: only need to change the css of dom, load faster, better than the process. Disadvantages: troublesome calculation, friends who have used scaleX will find that when I zoom in on the X axis, the vertical connection line will become wider, the word will stretch horizontally, and all need to shrink in reverse.

Advantages: fast loading, very smooth, calculate the percentage of the width of a good element at a time, the following operations do not need to calculate. Disadvantages: there will be some errors in the percentage calculation, which can be seen by zooming in to a certain extent. (all things considered, I use the third one.)

/ / function to calculate width percentage / / endTime: task end time / / startTime: task start time / / maxTime: maximum end time of all tasks / / minTime: minimum start time of all tasks / / time: sort ascending order of start time and end time of all tasks / / task_width: length of task, length of horizontal connection, const widthFun value of vertical connection const widthFun = function (endTime StartTime, maxTime, minTime) {const task_width = ((Number (endTime)-Number (startTime)) / (maxTime | | time [time.length-1])-(minTime | | time [0])) * (body_width-tree_box_dom.offsetWidth) / dom.offsetWidth) * 100 Return task_width > 100,100: task_width;}

Zoom the mouse, keep the mouse as the center, and zoom in on both sides

Put the reasoning process diagram first:

/ / explanation of the above figure / / dom = dom element / / domL1 of the sequence diagram, domeL2 = dom.scrollLeft;// domeL1 indicates that the previous dom.scrollLeft;// domeL2 represents the current dom.scrollLeft / / scale represents the current magnification / / scale1 represents the previous magnification / / tree_dom.offsetWidth represents the width of the left tree / / clientX1 represents the last mouse position distance to the left of the sequence diagram = e.clientX-tree_dom.offsetWidth// clientX2 represents the current mouse position distance distance of the sequence diagram / / mouse-centered zoom The formula is: domL2 = domeL1 (scale/scale1) + clientX1 (scale/scale1)-e.clientX + tree_dom.offsetWidth// Formula explanation: / / 1. Scale/scale1 indicates that the current zoom ratio is divided by the previous zoom ratio, indicating that the current zoom ratio / / the width removed by the left roll will also be scaled with the second zoom. So the width on the left side needs to be multiplied by the zoom ratio / / mouse position distance, and the width on the left side of the sequence chart will also be scaled as it is zoomed. So also multiply the zoom ratio / / the last minus the mouse position distance, the actual distance on the left side of the sequence chart is equal to the length / / page code time_box_parent.scrollLeft = (time_box_parent.scrollLeft + e.clientX-tree_box_dom.offsetWidth) * (scale_x / scale_x1)-e.clientX + tree_box_dom.offsetWidth.

Use connections to represent the relationship between tasks

Scheme:

When css3 + js + html5 is used, it is drawn with pseudo elements.

Wrap the right-angle picture with dom and set its position and height.

Draw with label

Advantages and disadvantages:

Advantages: no extra tags are added, which is good for rendering. Disadvantages: the parent task produces multiple subtasks, so it is difficult to add pseudo-classes and set the height and width of pseudo-classes.

Advantages: convenient, as long as calculate the height of the child task from the parent task. Disadvantages: when there are too many tasks, there will be too many pictures, which will affect performance.

Advantages: separately control the height and position of each element, high controllability, can add feedback color. Disadvantages: added more elements, have an impact on rendering (I use the third, this is a stupid method, there is a better way, can give advice, thank you)

The idea of realization is:

A variable is used to record the hierarchical depth of each task, which starts with the parent task of the current task, that is, from which task the current task is generated, and the subtasks of the same level are added up. The height of the vertical connection and the top value of the horizontal connection are obtained according to a certain proportion with cumulative variables, and the length of the horizontal connection is determined by the creation time and start time of the task. (use the width percentage function above)

Unit of time: days, hours, minutes, seconds

This is relatively simple, the implementation of the idea:

Because the time 4 scale of this demo is a scale, determine whether there is still one day (60 * 60 * 24, converted to seconds) between the minimum timestamp and the maximum timestamp divided by 4, and get the time unit in descending order from large to small.

This is the end of the article on "how to make native sequence diagrams with JS+CSS+HTML". Thank you for reading! I believe you all have a certain understanding of "how to use JS+CSS+HTML to make native sequence diagrams". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.