Mouse events like dragging sometimes incorrectly offset

Open
  • Is something wrong?
#716 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

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

Research direction

Start by tracing pointer event coordinates through the editor’s popup, context menu, and media or sprite dragging entry points; the issue does not name specific files or tests. Compare behavior after scrolling the page and a list pane, then verify that popups and dragged items track the pointer consistently in both cases.

Written by the indexing model from the issue text.

Description

Expected Behavior

All mouse events and dragging are consistent - that is in relation to the entire page including any scroll offset for elements that can/may scroll, such as sprite/graphic/audio list, or dragging blocks, or the page is scrolled down on a less-optimal screen

Actual Behavior

On non-optimal screens less than the minimum size of the gui, popups are offset by the scroll height. Dragging blocks/media and scrolling does not move further than the original panel size and is offset by that scroll amount when scrolled.

This would be demonstrated by, for example, using PointerEvent.prototype.clientX /Y instead of PointerEvent.prototype.pageX /Y

Steps to Reproduce

Explain what someone needs to do in order to see what's described in "Actual Behavior" above.

Steps to reproduce the behavior:

Blocks editor:

  1. Go to the scratch editor https://scratch.mit.edu/projects/editor
  2. Add a block with a dropdown, color, or number entry (touch input)
  3. Shrink the browser window, or zoom in, so the editor gui is blocked by the window and scroll bars appear. Smaller pronounces the effect more.
  4. Scroll down the browser page using the scroll bar, all the way you can, some frame elements elements at the top will be outside the window
  5. Click a block dropdown, or open a number entry popup (touch input), or color selection
  6. Note the popup is offset, right-click context menus are unaffected.
  7. Note when right-clicking blocks or stage the menu is offset.
  8. Popup elements / lists stay at the same position on screen (relative to browser window / client, when scrolling the browser/page up and down, while everything else moves normally.

Media/sprites:

  1. In the media list (costumes/sounds), and the sprite list below Stage, you have a set of elements in a scrollable list pane.
  2. Add several elements to the list by creating new media items, taller than the height of the pane, ideally double the height, or about 10 or so items.
  3. Drag a media item / sprite button, and while held, scroll down with the mouse wheel
  4. Notice that the button/element stays in the same position relative to the list of items, while the list scrolls

Screenshots

Block dropdown menu Number entry

If applicable, add screenshots to help explain your problem.

System Details

Browser - browser independent - mobile, desktop, firefox, chromium.
Android, Linux, Windows.

Dominant language
JavaScript
Stars
310
Forks
299
Avg merge
19h 41m
Merged PRs (30d)
14

Getting set up

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.

More from scratchfoundation/scratch-editor

All issues in scratchfoundation/scratch-editor

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.