preface

Recently I was working on a low code platform to quickly generate simple information display and marketing pages by dragging and dropping layouts. Components are dragged and zoomed using React-RND, but it does not provide guides, so it encapsulates itself.

The effect is shown below:

Components have been uploaded to NPM and Github.

Train of thought

1: Where is the auxiliary wire?

The initial idea was to render inside the current drag element and position it relative to the current element. However, it was later discovered that the levels of each component were not necessarily the same, which would cause the high levels to cover the auxiliary lines. Finally, use createPortal() to render the guides above the body, which solves the hierarchy problem

2: How many auxiliary lines are there?

As shown in the figure, there are at most 6 auxiliary lines simultaneously.

3: How to calculate the length of auxiliary line?

So if you look at the auxiliary line on the left, for example, there are probably a couple of cases in the diagram, which are overlap and non-overlap, and if you look at these cases, you can figure out how to do it, you take the top left and bottom left coordinates of all the elements that have the same x coordinate, and then you take the largest y coordinate minus the smallest y coordinate.

In short: length = maximum y minus minimum y.

4: How to calculate the coordinate of auxiliary line?

In the figure, the length of the auxiliary line coordinates will be the same whether you are currently dragging element A, element B, or element C, which is the blue one in the figure.

So there are two methods:

Method 1: Get all x-coordinates of the same element as the current drag element x, find the coordinate with the smallest y, get (x1,y1).

Method 2: Take the sitting Angle of the element being dragged as the starting point and calculate the upward offset. For example, when dragging B, take (x2,y2) as the starting point and then offset the distance from y2-y1 upward. The auxiliary line coordinate is also obtained as (x1,y1).

Note, however, that the guides are positioned relative to the body, so the coordinates computed above are also relative to the body.

5: When to display auxiliary lines, and how to adsorb?

The logic of these two is similar, that is, during drag, the coordinate of the current drag element and the coordinate of other elements are constantly calculated. When the value is less than a certain threshold, the auxiliary line will be displayed. If the adsorption is to change the coordinate of the current element.

code

Although the code is not much, but also add up to hundreds of lines, I will not post, interested can go to Github to look, incidentally for a star. 😂

conclusion

In general, the trouble is that there are a lot of places to deal with display and coordinate calculations.

For now, I’ll name this component react-Rnd-Dragline. Posted to NPM and Github. This component is encapsulated according to its own business requirements, so it may not be encapsulated in a general way, and there is a need for further improvement.

And finally, let’s find star. 🤣