The Implementation of Free Layout Adsorption Lines
The effect of the free layout of adsorption lines is shown in the figure below:
So how to realize the adsorption line? Let’s first summarize the characteristics of adsorption lines:
- When the box being dragged is close to other boxes horizontally or vertically, alignment lines will be displayed.
- When the adsorption effect occurs, the position of the component will not change even if the mouse moves within a certain range. This creates a certain tolerance for mouse alignment, and the user does not need to adjust the position pixel by pixel.
- When the mouse is dragged far enough, the adsorption effect disappears, and the box moves with the hand.
According to these rules, the first thing we need to achieve is to determine which component edges the current drag box is close enough to.
Determine which edge the box is closest to
There may be more than one nearest edge, and the horizontal and vertical positions must be judged separately. Let’s take the horizontal position as an example, and the same goes for the vertical position.
The dragging box may have upper, middle, and lower edges in the horizontal position that can cause adsorption, and other boxes also have upper, middle, and lower edges that can interact with it. Therefore, for each target box, we need to calculate 9 distances. :
- on source vs on target
- source on vs target
- source up vs target down
- in source vs on target
- source in vs target
- source medium vs target bottom
- source down vs target up
- source lower vs target middle
- source down vs target down
Because each edge of the source can only have one adsorption line at most, the nearest target edge of each edge is aggregated according to the source:
- source upper vs min(target upper, middle, lower) = min upper
- source in vs min(target upper, middle, lower) = min in
- source lower vs min(target upper, middle…