feat: Auto scroll the viewport when dragging to make selection

[aasdkl]

(Related: #114)

This PR allow auto scroll when dragging to make selection using cellrangeselector.

Here is the example page

The scrolling speed is based on: Math.max(MIN, MAX - DelayPerPx * cursorPx)

I'm not sure that setting the option ON by default is appropriate or not.

---

Also, a cypress test is provided. But I'm afraid that these case may failed in some time because they have compared the dragging time interval:

• should MIN interval take effect when auto scroll: 30ms -> 90ms

  • By default the MIN interval to show next cell is 30ms.
  • In the test I set the interval to 90ms (3 times of the default).
  • So ideally if we scrolling to same row by MIN interval, the used time should be 3 times slower than default.
  • Considering the threshold, 1.5 times slower than default is passed:

  expect(newInterval).to.be.greaterThan(1.5 * defaultInterval); // max scrolling speed is slower than before

• should MAX interval take effect when auto scroll: 600ms -> 200ms

  • By default the MAX interval to show next cell is 600ms.
  • In the test I set the interval to 200ms (1/3 of the default).
  • So ideally if we scrolling to same row by MAX interval, the used time should be 3 times faster than default.
  • Considering the threshold, 1.5 times faster than default is passed:

  expect(1.5 * newInterval).to.be.lessThan(defaultInterval); // min scrolling speed is quicker than before

• should Delay per Px take effect when auto scroll: 5ms/px -> 50ms/px'

  • By default the Delay per Px is 5ms/px.
  • In the test I set it to 50ms/px (10 times of the default).
  • So ideally if we scrolling to same row, and set cursor to 17px, the new interval will be set to MIN interval (Math.max(30, 600 - 50 * 17) = 30ms), and the used time should be more than 10 times faster than default.
  • Considering the threshold, 5 times faster than default is passed:

  expect(5 * newInterval).to.be.lessThan(defaultInterval); // scrolling speed is quicker than before

[ghiscoding]

that's is a quite interesting idea, we can probably make the same change to the SlickRowMoveManager plugin and maybe others

[6pac]

if viewportHasVScroll is a private var in SlickGrid, perhaps we should change it to _viewportHasVScroll to reflect that.

Then the property/function could be viewportHasVScroll

[aasdkl]

@ghiscoding @6pac I update the code and add also apply the change to slick.rowselectionmodel.js

please check the example again

(The test is passed in my PC...let me investigate it tomorrow (china standard time) 😭)

[aasdkl]

After some investigate, I realized that I should use as() instead of using return in the cypress. 🎉

refer: https://docs.cypress.io/guides/core-concepts/retry-ability#Only-the-last-command-is-retried

[ghiscoding]

@aasdkl are you done with the changes? It looks good to me.

Out of topic, do you think you could implement the same behavior for Slick.RowMoveManager since you have more knowledge of it? You can see a demo with this Example, I'm using that plugin too and I'd be interested to get that behavior there as well.

[aasdkl]

@ghiscoding Yes it is done.

Out of topic, do you think you could implement the same behavior for Slick.RowMoveManager since you have more knowledge of it? You can see a demo with this Example, I'm using that plugin too and I'd be interested to get that behavior there as well.

Sure, I can do it until I have time.

[ghiscoding]

Sure, I can do it until I have time.

That would be really great, great contribution.

@6pac
I'm done with the review, LGTM

[aasdkl]

@ghiscoding FYI, #114 can be closed.