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

This issue has been tracked since 2022-08-14.

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:

Dump mental-16

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:

Dump mental-15

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 wrote this answer on 2022-08-18

Hi Alex, please send the code to [email protected]. 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 wrote this answer on 2022-08-18

I just sent the link! 👍

kumilingus wrote this answer on 2022-08-18

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

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date