preface

LogicFlow is a front-end framework focused on business flow chart visualization (hereinafter referred to as LF). Before this, we respectively introduced the overall design and expansion mechanism of LF. Today, we will talk about a core concept in the flow chart — Edge.

Firstly, the elements in the flow chart are mainly composed of nodes and edges. The role of edges in LF is to establish the relationship between nodes. Different scenarios have requirements on diagram layout and aesthetics. Currently, LF provides three types of lines, namely straight lines, broken lines, and curves, to meet different requirements. As shown in the figure below.

In addition, the basic functions of the edge include path drawing, arrows, copywriting, in order to enrich the operation also includes selection, adjustment and other functions. This paper will introduce the line, broken line, curve drawing, edge text setting, selected area expansion, selected status identification, position adjustment, style adjustment and other implementation ideas and functional design.

To make it easier to understand, let’s explain some nouns and functions. Draw: Draw the shape of a line. Expanded selection area: Generally, the width of the edge is small (1-2px), so it is difficult to select the edge accurately. After expanding the selection area, it can make the edge easier to be selected by the mouse. Select status identifier: Identifies the selected edge from other edges. Position adjustment: the edge is created by connecting the anchor points and automatically calculating its path. However, the path has some disadvantages of fixed calculation. You can manually adjust the position to achieve visual optimization. Side copy setting: Set the side copy to enrich the information expression. Styles: The system provides default styles for edges, such as #000000 in color and 2px in width. LF also provides ways to adjust styles if different host systems require different styles.

In LF, there are three types of edges: straight line, right-angle broken line and smooth curve. This paper will introduce the relevant implementation ideas one by one.

A straight line

Two points determine a straight line, only need the starting point and end point of the edge to draw a straight line, in LF using SVG to draw.

The selected area enlargement is achieved by adding rectangles on the line. The point with a distance of 10 adjacent to the two endpoints is taken as the vertical point, and the point with a distance of 5 perpendicular to both sides of the line is calculated. The result can be obtained as 4 points to form a rectangle. Lines currently do not support starting position adjustment.

In the figure, purple is the pointable region expanded by a line

Ps: Why set offset = 10 instead of 0, or use the same drawing to increase the stroke-width? This approach is more flexible and controllable, considering that there will be side start and end position adjustments, and extension functions.

Rectangular polyline

If only straight lines are used to connect two points, when the number of nodes increases and the location relationship is complex, a large number of lines and nodes will cross and overlap. In order to more clearly express the relationship between nodes, LF supports right-angle broken lines to connect two nodes. In LF, rectangular polylines are drawn using the polyline tag in SVG. The key step is to find the points that make up the polyline. Considering aesthetics, the strategy is to minimize the intersection and overlap between edges and nodes. First, assume that the anchor point on the node Start — > anchor point End is used to connect. The figure below shows how to calculate the points of the right-angle polyline path.

The first step: Calculate the points perpendicular to Start and End as vertical feet, and the distance between Start and End is 100, as shown in the figure below. First calculate the SBbox with the distance between Start and the node frame where Start is 100, and Start perpendicular to Start can be found on SBbox. The point with a distance of 100 from the border of the node where it is located is the next point of Start, and it is named StartNext. Same thing with EndPre. This calculation results in four points, [Start, StartNext, EndPre, End], which are the points that the path is determined to pass through.

The second step: Name the box containing StartNext and EndPre cables LBox, the box containing SBbox and LBbox SLBbox, the box containing EBbox and LBbox ELBbox, Take the points on the four corners of SLBbox and ELBbox, namely the blue points in the figure, and these points are the possible points in the broken line path. The possible points for this step are the blue points.

Step 3: Find the midpoints of StartNext and EndPre (green points in the figure below). Find the midpoints of X and Y axis where the line intersects LBbox, SLBbox and ELBbox and is not in SBbox and EBbox, namely the purple points in the figure. These points are possible points in the broken line path. The possible points for this step are [purple points].

Step 4: Summarize the points obtained in the previous three steps, and then de-duplicate the points with the same coordinates. The red points in the figure below will be obtained. The next step is to find the optimal path from StartNext to EndPre.

Step 5: Use A* search combined with Manhattan distance to calculate the path and obtain the path as shown in the figure.

Step 6: Filter the intermediate nodes on the same line to obtain the following points and connect them into broken lines. At this point, the path part of broken lines is drawn.

The above describes the path calculation method when there is a certain distance between two nodes, that is, there is no overlap between SBbox and EBbox, which is also the scenario that most plots will involve. When the two nodes are close to each other, other simple strategies will be used to realize right-angle polylines, which will not be described in detail in this paper. The extension of the polyline click area is realized by dividing the polyline into multiple line segments, and each line segment adopts the same method as a straight line. See the straight lines section for details. The following is an example:

In the figure, purple is the pointable region of the expanded polyline

The discount is divided into several line segments, which is also convenient to adjust the position of the broken line. At present, LF can adjust the horizontal/vertical movement of each line segment in the broken line. The position adjustment of LF line segment is realized by realtime recalculating the path according to the moving position. The steps are as follows: Step 1: According to the moving coordinates, calculate the coordinates of the two endpoints of the current line segment after dragging and moving. Step 2: calculate the intersection point between line segment and node outer frame after drag and move adjustment.

  • If the moving front segment does not connect the starting point and ending point, remove the part that the line segment will intersperse inside the node, and take the nearest point of the whole node offline segment as the intersection point.
  • If the moving front segment is connected to the starting point, judge whether the end point of the segment is on the node. If not, change the starting point to the intersection point of the segment and the node.
  • If the moving front segment is connected to the end point, judge whether the end point of the segment is on the node. If not, change the end point to the intersection point of the segment and the node.

Step 3: After adjusting to the position of the corresponding outer frame, find the exact intersection between the current line segment and the graph and update the path. The following picture shows an example of vertical downward adjustment of rectangles and circles. The adjustment effect is as follows.

Smooth curve

LF also provides a curvilinear way to draw edges. LF is drawn based on SVG, and the PATH tag in SVG naturally supports the drawing of Bezier curves. In order to reduce calculation, smooth curves in LF are realized based on Bezier curves. Bezier curves can be drawn based on four points at any coordinates. Create and edit a graph by controlling four points on the curve (starting point, ending point, and two separated middle fulcrum points). Curve shape adjustment can be made in LF by moving the position of the two fulcrum points.

To draw bezier, need to calculate the control four point on the curve, the starting point and end point is known, and the key point is how to calculate the two intermediate support, in order to figure beautiful sex, line and the border maximum node does not produce overlap, and the computational complexity, implementation steps are as follows: the first step: calculate the node relevant coordinate frame

  • The x-coordinate of the center
  • The y-coordinate of the center
  • Maximum X coordinate
  • Minimum X coordinate
  • Maximum y-coordinate
  • Minimum Y coordinate

Step 2: Calculate the coordinates of the outer frame of the node whose distance from the node’s frame offset = 100.

  • The x-coordinate of the center
  • The y-coordinate of the center
  • Maximum X coordinate
  • Minimum X coordinate
  • Maximum y-coordinate
  • Minimum Y coordinate

Step 3: determine central point and the starting point in the direction of the line (horizontal/vertical), on the center is the same as the starting point in the direction of the offset distance = 100 corresponds to the starting point of calculating distance protection, the protection is described in the second step of nodes on the outer frame, the example shown above, according to its location, node of the casing outside the points (coordinates is: x: The maximum X-axis coordinate, y: center point y coordinate) is the fulcrum. Similarly, the fulcrum corresponding to the end point can be calculated. This method is the same as finding StartNext and EndPre in the polyline path. Step 4: Once you have two fulcrums, combine the starting and ending points and draw them using the path tag. The curve drawing effect is as follows, in which the blue circle is the fulcrum. You can adjust the shape of the line by moving the fulcrum position.

Expand the selected region of the Bessel curve and draw a Bessel curve at the same position, but with the following style properties:

strokeWidth="10"

stroke="transparent"

fill="none"
Copy the code

An enlarged region is a Bezier curve with an increase in width of 10.

The purple is the pointable region of the expanded Bezier curve

The arrow

The arrows in the flow chart indicate the direction of process nodes. In LF, the arrows of straight lines, broken lines and curves are realized using a unified scheme. In LF, the essence of the arrow is a triangle containing the end point, in which the end point is determined and the other two points need to be calculated to form a triangle.

  • Find the end tangent vector segment of the line.

Straight line: vector from the starting point to the ending point. Broken line: vector curve of the last line segment in the broken line: there are four points in the curve. Take the vector from the fulcrum corresponding to the end point to the end point

  • Calculate the other two points of the triangle

Take the point with a distance of 10 adjacent to the end point as the vertical point, calculate the two points perpendicular to the vector with a distance of 5 from the vertical point, and the result can get three points to form a triangle, namely the arrow. As shown below, the arrow size can be adjusted by setting offset and verticalLength to the theme style.

Currently, only one-way arrows are supported in LF, and the arrow style is only triangle. In the future, it will continue to enrich the display of arrows.

The selected identifier of the edge

The selection of an edge is identified by a rectangle that contains all the points on the edge. By calculating the rectangle coordinates and size information: x, Y, width, height, and then rendering, these selected symbols and nodes are drawn on different SVG layers, LF is based on MVVM (see LogicFlow for details) : Focus on the front end of the flow visualization framework), can easily through the data-driven layered rendering, of the same node selected logo is similar hierarchical way, so that we can more flexible processing under the condition of different patterns and rendering, download the pictures at the same time is also convenient to select the logo layer, get more pure and clean. Because of the difference of path calculation of straight line, broken line and curve, the calculation method of selected mark is also different.

The calculation logic of a line is as follows:

  • The starting point the startPoint:
  • The endPoint: the end
const x = (startPoint.x + endPoint.x) / 2;

const y = (startPoint.y + endPoint.y) / 2;

const width = Math.abs(startPoint.x - endPoint.x) + 10;

const height = Math.abs(startPoint.y - endPoint.y) + 10;
Copy the code

The calculation logic of broken lines is as follows:

  • Points: indicates a broken path
// bbox: box containing all points on the polyline
const { points } = polyline;
const pointsList = points2PointsList(points);
const bbox = getBBoxOfPoints(pointsList, 8);
const { x, y, width, height, } = bbox; 
Copy the code

The calculation logic of the curve is as follows:

  • PointsList: a list of all points on a Bessel curve, including the start, end, and two fulcrum points
  • Bbox: Box containing all points on the Bezier curve
const { path } = bezier;
const pointsList = getBezierPoints(path);
const bbox = getBBoxOfPoints(pointsList, 8);
const { x, y, width, height, } = bbox; 
Copy the code

Side text setting

The text can be set on the side to enrich the expression of information. In LF, you can double-click the side to open the text editing. The default position of the text is as follows:

  • Straight line: midpoint.
  • Polyline: Double click to manually add the vertical point with the shortest distance between the double click position and the polyline. Non-double click to add the default midpoint of the longest line segment.
  • Curve: mean value of X-axis and Y-axis coordinates of starting point, ending point and two control points.

Of course, the text position can also be manually adjusted by dragging.

Style adjustment

For details on how to style edges, see the official documentation – Theme.

The last

I believe that through this article you have a general understanding of the implementation of Edge. In fact, in the process of doing LogicFlow, we have encountered a lot of non-pure front-end problems, which requires us to regain the knowledge of geometry and algorithm. If you are also very interested in this aspect or have research, welcome to communicate with us. The LogicFlow user base is now over 200, and we are all talking about process visualization /LowCode implementation. We look forward to your participation

Read more:

  • LogicFlow github:github.com/didi/LogicF…
  • Official document of LogicFlow: logic-flow.org/
  • LogicFlow design principle overview: juejin.cn/post/693341…
  • LogicFlow extension mechanism: juejin.cn/post/693831…
  • Add wechat to user group: logic-flow