Bug when dragging overlapping sprites

[nimeratus]

https://scratch.mit.edu/discuss/topic/847056/

Expected Behavior

The topmost sprite is picked up

Actual Behavior

Depending on the dragging speed, different things can happen:

• the wrong sprite is picked up
• the right sprite is picked up, but the other sprite is hidden and it's motion blocks are disabled

Steps to Reproduce

Place two sprites such that they are overlapping and the first sprite from the sprite list is on top of the second sprite. Try dragging the first sprite where it covers the second sprite.

If you click and wait until the sprite is automatically picked up, then it usually picks up the second sprite.
If you press the mouse button while the mouse is already moving then it usually hides the second sprite and picks up the first one

Steps to reproduce the behavior:

1. Go to 'https://scratch.mit.edu/projects/editor/'
2. Add a sprite (eg. 'Bear')
3. Drag and drop the Scratch Cat on the Bear
4. Try dragging the Scratch Cat where it covers the Bear

System Details

Windows 10, Chrome 132

Screenshots

scratchbug.webm

I've looked into the code and in stage.jsx#L345-L364 the draggable targets are tested in the order they appear in vm.runtime.targets, which is not the layer order

[nimeratus]

Actually, the bug where the wrong sprite is picked up can also happen on the project page

[nimeratus]

I've used Chrome's DevTools to disable the last parameter on this.renderer.pick() and that fixes that the wrong sprite is picked up, but it doesn't fix that sprites sometimes disappear.

I've added logpoints and it looks like that onStartDrag is called multiple times in the same frame but this.state.dragId updates asynchronously, and I think this causes the bug where the sprites disappear