clientIO / clientIO/joint

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

Open
#2,306 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement jointjs+
Dominant language
JavaScript
Stars
5.4k
Forks
893
Avg merge
3d 3h
Merged PRs (30d)
26

Description

What happened?

This is an issue closely related to https://github.com/clientIO/joint/issues/1779 (which I opened last year), hence I'll use the code that I provided there.

I found out that if the paperscroller is zoomed, the padding that is used to trigger the scrollWhileDragging feature is wrongly calculated.

If I set the zoom to 0, the scrolling starts once the cursor surpasses the red border:

https://github.com/clientIO/joint/assets/89727/02ec4657-95d0-4c47-a144-d84061ab7ab1

But if I set the zoom to '1.5', the padding is wrongly calculated and the scrolling starts way before the cursor has reached the red border:

https://github.com/clientIO/joint/assets/89727/dc9ad17e-7fad-4184-9543-2d9a3796df46

Code with the poc: https://codesandbox.io/s/rappid-paperscroller-bug-zoom-z4zdqf

Version

3.7.5

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

What operating system are you seeing the problem on?

Mac

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the PaperScroller implementation and the scrollWhileDragging path, using the linked CodeSandbox to reproduce the behavior at zoom 0 and 1.5. Compare where the cursor position and padding are calculated, then verify that scrolling begins at the expected border in the reported browsers and zoom levels.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.