Feature/drag elements as a block

[rendertom]

User story:
As a user I do not want draggable elements to get cramped into one blob when I hit edges of the container while dragging.

Description:
Dragging multiple elements and hitting the edges of the container does not stop the drag event. Elements, that hit the edge become non-draggable (as expected), however, the rest of the elements are still being dragged. Therefore, when hitting all of the container edges, all elements might get cramped into a blob in DragSelect v2.5.5.

This PR adds an option to prevent this effect. Once implemented, the drag event will stop (based on drag direction) if at least one of the draggable elements hits the edge.

Settings.dragAsBlock: boolean, defaults to false: Whether to drag multiple elements as a single block (true) or as individual items (false).

Usage example:

const ds = new DragSelect({
  selectables: document.getElementsByClassName('item'),
  area: document.getElementById('container'),
  dragAsBlock: true, // optional, defaults to false
});

[ThibaultJanBeyer]

Hi @rendertom thanks a lot for your contribution! 🎉 🎉 🎉
This sounds great, sounds like this should be the default behaviour? I’ll have a look asap 👀

[ThibaultJanBeyer]

Just tested it locally and seems to work great. I think in the long run this should probably be default behaviour, what do you think?
Also, would you mind adding a test case file for this change? This also helps reviewers like me play around and test various use-cases! Thank you 🤗

[ThibaultJanBeyer]

the only issue I see here is that re-calculating the rects is quite expensive. The rect is also calculated within the moveElement method on every move. Would it make sense to writte this somehow that the element rect is only calculated once?

[rendertom]

Good catch.

I pre-calculated the selection rect on drag start, so it should improve the performance. I also believe that we could pre-calculate the react of each element on dragStart as well, and then pass that value to moveElement method. However, I am not sure if such change belongs on this PR though.

[rendertom]

Thanks @ThibaultJanBeyer for kind reply. I am happy to contribute.

I am not familiar with puppeteer and jest tests, so I am not sure if I can be of any help here. Regarding the default behaviour - personally for me, I think I'd chose it as a default, as it is more expected. But that's just me. Feel free to change functionality how you feel is best.

[ThibaultJanBeyer]

I'm working on a few improvements on this one to potentially make it the standard behaviour. Then it will come with the next version.

[ThibaultJanBeyer]

So I found a few issues when running the tests which I was not able to fix in a few hours. I want to fix them first before making this a default behaviour. So this is available now in 2.7.0 behind the flag dragAsBlock as you intended until I manage to fix the issues.