Table of contents
Determine which edge the box is closest to
When resizing, the middle alignment line needs to double the adsorption force
The effect of the free layout snap line is shown in the figure below:
So how to achieve the adsorption line? Let's first summarize the characteristics of the adsorption line:
-
Snaplines are displayed when the box being dragged is close to other boxes horizontally or vertically.
-
When the adsorption effect occurs, the mouse moves within a certain range without changing the position of the component, so that the mouse alignment produces a certain degree of fault tolerance, 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 components the current drag box is close enough to.
Determine which edge the box is closest to
There may be more than one nearest side, and the horizontal and vertical positions should be judged separately. Let's take the horizontal position as an example, and the same is true for the vertical position.
The drag box may have upper, middle and lower sides in the horizontal position to generate adsorption, and other boxes also have upper, middle and lower sides to interact with it, so for each target box, we need to calculate 9 distances :
-
source on vs target on
-
source on vs target
-
source up vs target down
-
In source vs on target
-
source vs target
-
In source vs target
-
source down vs target up
-
source vs target
-
source vs target
Because each side of the source can only have at most one adsorption line, so according to the source, aggregate the nearest target side of each side:
-
source up vs min(target up, middle, down) = min up
-
source medium vs min(target upper, middle, lower) = min medium
-
source down vs min(target up, middle, down) = min down
It can be imagined that when the source and the target box are exactly the same size, there will be at most three adsorption lines (up vs up, middle vs middle, down vs down). But once the height of the box is different, the result will be different, so we also need to calculate the closest distance between the top, middle and bottom of the source:
Min distance of all source positions = min(min up, min in, min down)
Then, according to the minimum distance of all positions of the source, filter the upper min, middle min, and lower min, and what remains is the adsorption line closest to the horizontal position of the source from the target.
We also need to set the snap threshold, otherwise all mouse positions will snap. Therefore, when the minimum distance of all positions of the source is greater than the adsorption threshold, the adsorption effect will not occur.
produce adsorption effect
The implementation of adsorption is related to the implementation of dragging.
Assuming that the implementation of dragging is: record the starting position of the mouse when dragStart mouseStartX(the same is true for Y), and the displacement occurs during dragging movementX, then the current position of the component is mouseStartX + movementX.
If we can get the reverse displacement generated by the adsorption snapX, then the component position can be realized as:
mouseStartX + movementX + snapX
It can be imagined that when the mouse moves from top to bottom, when adsorption occurs, snapX a reverse effect will be produced to offset the downward displacement of the box, so as to ensure that the box does not move in the vertical direction during adsorption, so that the adsorption effect is realized.
snapX How is the value calculated? In fact, it is the inversion of the "minimum distance of all source positions" in the previous step.
When resizing, the middle alignment line needs to double the adsorption force
Resize is different from drag. Imagine dragging the lower edge of the box with the mouse to resize . At this time, in addition to moving the component, it also produces the effect of increasing the height of the component. Then observe the box from the upper, middle and lower sections. Its position is the same as The change relationship of mouse displacement is:
-
Top: The position does not change.
-
Middle: The downward displacement of the position is the mouse displacement * 0.5
-
Down: The downward displacement of the position is the mouse displacement * 1
Therefore, if a snap line is generated in the middle position, in order to offset the downward movement of the mouse, twice the reverse displacement of the snap needs to be generated:
mouseStartX + movementX + snapX * 2
Summarize
We sorted out the judgment conditions of adsorption and how the adsorption effect takes effect, as well as the special processing logic of the middle line adsorption during resize.
In addition to adsorption, what other boundary interactions are there in the free layout, and how to achieve it? I hope you all think about it and leave a message.