Moveable: Full Drag Select Demo

[ladifire]

@daybrush and All,

I've made a tool with moveable package, support drag select with 2 options:

• Drag select from Left to Right: Select all elements within drag area:
  

• Drag select from Right to Left: Select all elements that cross drag area
  

In my library, I've used Intersection Observer to detect elements available on screen only. Because when we have very amount of elements, if we don't use Intersection Observer, it's very slow to detect elements (I've test with 10,000 elements without using Intersection Observer and it's weird).

My library work very well in Production mode, but in Development mode, the Intersection observer is abit slow to initialization. So if you increase demo elements to > 1000, you should wait until Intersection observer finish detect elements for the first time before use.

Can @daybrush and all of you help me resolve this problem?

This is my library demo and source code:
https://codesandbox.io/s/react-moveable-with-full-drag-select-9cg81

And this is my demo how to use Intersection observer for js:
https://codesandbox.io/s/test-intersect-observer-uog2j

[daybrush]

@ladifire

I think it's too much of a setState.

It seems that setState is called more than 1000 times in the forEach of a full drag select or in handleChildMounted. It may look good because there are fewer setState calculations in production mode than dev mode, but it will be a problem as performance drops a bit or more elements.

[bxchang04]

@ladifire Have you been able to optimize the performance of this plugin? I'd be willing to take a shot at this as this is exactly what my project needs.