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
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
If I start dragging it to the top, the scrolling should start at
But this is not was happens if I recreate this scenario with actual code:
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.
Firefox, Chrome, Safari
|Issue Title||Created Date||Updated Date|