[Bug]: The padding of PaperScroller's "scrollWhileDragging" is measuring incorrectly the position of the cursor

[alexandernst]

What happened?

I was playing around with the scrollWhileDragging feature of the PaperScroller utility and I think the padding option is calculating incorrectly the position of the cursor.

Let's start with what this feature is supposed to do (according to the docs):

When scrollWhileDragging parameter is set to true, the PaperScroller automatically
scrolls the paper to ensure that the dragged shape stays within the viewport.

This means that if I drag an element around a very big canvas rendered inside a small viewport (paperscroller), the paperscroller will "scroll" to the direction in which I'm dragging the element in order to keep that element visible.

Now let's see the padding specs:

Additional padding to add to the viewport area until scrolling is triggered.
A negative value means that scrolling is triggered when the dragging pointer
approaches the viewport boundary from the inside.
A value of 0 means that scrolling is triggered when the dragging pointer crosses
the viewport boundary.
A positive value means that scrolling is triggered when the dragging pointer is that
much farther from the viewport boundary.

If I understand correctly, this means that, given the following scenario:

the paper scroller will start scrolling when the mouse gets outside of the red square (while dragging the green element).

If my understanding is correct, I think there is a bug in the padding calculation / cursor position.

Let's work on this other scenario:

Let's say I have an HTML body of 620x620px with a 10px padding. Let's also say that I have a 600x600px paper scroller (let's asume the canvas is infinite). Let's also say that I have a scroll padding of -100px on the top and the bottom, and -80px on the left and right side.

So, if I click on an element and start dragging it to the left, the paper scroller should start scrolling when the cursor reaches (89,?)... (88,?)... (87,?)... (being (0,0) the upper left corner of the HTML body).

If I start dragging it to the right, the paper scroller should start scrolling when the cursor reaches (531,?)... (532,?)...(533,?)....

If I start dragging it to the top, the scrolling should start at (?,109)... (?,108)...(?,107)....

But this is not was happens if I recreate this scenario with actual code:

Grabacion.de.pantalla.2022-08-14.a.las.3.56.17.mov

Note that the scrolling to the left (and the bottom) starts before the cursor has even reached the red line. The scrolling to the right (ant top) doesn't start until the cursor has already bypassed the red line by a certain amount of pixels.

I made a POC in order to easily test this, but since it contains JointJS+'s code, I'm not sure if I'm allowed to paste here the link. Please provide me with instructions about how to send you the link to the POC.

Version

3.5.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

What operating system are you seeing the problem on?

Mac

[kumilingus]

Hi Alex, please send the code to support@client.io. We'll look into it.
Btw it's fine to publish code that uses JointJS+. You should only avoid posting JointJS+ library code itself.

[alexandernst]

I just sent the link! 👍

[kumilingus]

I can confirm this was a bug and will be fixed in the next version of JointJS+. Thank you Alex.