The origin of

To use SVG to make a flowchart similar to the visio wiring, as shown below

There are many libraries that implement flowcharts, such as JointJS, GoJS, JSPLumb, and so on. Unfortunately, none of it is free.

Analysis of the

If you want to do something simple, just use the Bezier curve, just provide the coordinates of the start and end points, and you can use a simple algorithm to generate an SVG path. This algorithm should be available online.

But if you want to implement it with orthogonal wires, the complexity goes up several notches. Let’s look at multiple cases of orthogonal lines:

Assuming that the starting point is down and the target node is to the lower right of the starting node, there are four possible scenarios. Considering that there are four possible directions of the target node relative to the starting node, there are 4*4=16 possibilities of all connections. Considering that there are also four directions of the starting point, there are 16 *4= 64 possibilities of all connections. In other words, if you were to write if else, you would have to write 64 branches.

What do I do

You don’t have to write 64 if else, because you’re abstracting the rules. Divide the connection into several parts:

But IT took me a lot of effort to find the pattern.

The truth

The final direction of the connection is related to these conditions:

  1. The departure direction of the starting point
  2. The direction of entry of the destination
  3. The direction of the end relative to the beginning
  4. The minimum extension from the starting point
  5. The minimum extension line before entering the end point (see figure below)

Implementation approach

  1. Because SVG’s path is used to draw orthogonal lines. The core point is to find the coordinates of the turning point (it doesn’t matter what you use).
  2. Get the vectors from the starting point to the ending point (hereinafter referred to as the direct vector), and two orthogonal vectors (hereinafter referred to as the horizontal and vertical vectors of the direct vector).

    3. Start to calculate the orthogonal lines. First obtain the initial direction of the orthogonal lines. It can be seen that the starting direction is opposite to the vertical vector in the direct direction, so the orthogonal line does not need to go down, so the orthogonal line must start horizontally. In fact we do not know the specific situation of the vertical and horizontal, in practice is this: first from directly found in the horizontal and vertical vector of vectors and parallel to the direction of the starting point of the vector, to determine whether, if it is a direction, the initial direction and the starting point of the orthogonal direction, if not, take another vertical direction.

X0 * y1-x1 * y0 === = 0; If the Angle between vectors is 0 degrees, the dot product of vectors is 1: x0 * y0 + x1 * y1 === 1Copy the code
  1. And then we want to get the final direction of the orthogonal lines. Same idea, if the entry direction of the end is opposite to the direct direction, take the vertical direction, if the same direction, take the same direction
  2. We have the initial and final directions of the orthogonal line, now we need to obtain the middle turn of the orthogonal line. Determine whether the initial and final directions of the orthogonal lines are in the same direction. If they are in the same direction, two turns are required. If they are not in the same direction, only one turn is required.

If the initial direction of the orthogonal line is equal to the final direction of the orthogonal line then the number of turns is equal to 2 otherwise the number of turns is equal to 1Copy the code
  1. If you make a turn, get the coordinates of the turn

The coordinate point of the turn = the first point of the orthogonal line + the initial direction vector of the orthogonal lineCopy the code

If you make two turns, take the first one, which is the midpoint of the orthogonal line

The first turning point = the first point on the orthogonal line + the initial direction vector of the orthogonal line * 0.5Copy the code

And get the second turn,

Non-initial direction vector = Take the vector perpendicular to the initial direction vector from the horizontal and vertical vectors of the direct vector second turn point = first turn point + non-initial direction vectorCopy the code
  1. Finally, the coordinate set of all points is generated

Set of coordinates of all points = [starting point, starting point of orthogonal line,... turning point of orthogonal line, end point of orthogonal line, end point]Copy the code

conclusion

The calculation of this algorithm is not very large, the performance is OK, suitable for side drag side redraw. However, it is not a pathfinding algorithm, which means there is no function of avoiding nodes.

The next step is to do one using the Manhattan algorithm.

Play with the demo

Desdesdesgo. Making. IO/flow – connec…

Generative point algorithm github.com/Desdesdesgo…