PointerDragBehavior doesn't cancel drag when you mouse up outside the canvas

Bugs
1
  1. Open https://playground.babylonjs.com/#1EBCJY#21 (or most any playground with a PointerDragBehavior).
  2. Drag the green box to the left, continuing off the canvas onto the code editor.
  3. Mouse up while still over the editor.
  4. Mouse over the canvas again.
    Result: drag continues as if the mouse button is still down.
    Expect: drag to be canceled.

Reproes with latest alpha, but not with 4.2, so it seems like this must have recently broken.

2

Lemme take a look and see what’s going on

3

Related issue it seems: Scale Gizmos When Cursor Goes Off/On Canvas

Thanks for pointing this one out to me, @Knar

4

I retested against 5.0.0-alpha.16, presuming that this PR was intended to fix this issue. Now the drag does get canceled in the above case, but it also cancels even if you don’t mouse up while outside the canvas bounds. So, new steps:

  1. Open https://playground.babylonjs.com/#1EBCJY#21 .
  2. Drag the green box to the left, continuing off the canvas onto the code editor.
  3. Mouse over the canvas again (with mouse button still down).
    Result: drag has been canceled, green box doesn’t continue moving.
    Expect: drag to continue.

Reproes in 5.0.0-alpha.16, but not with 4.2, in which the drag continues as expected.

5

The behavior seems to have changed again in 5.0.0-alpha.17. Now the drag-out-and-back behaves as expected the first time, but not on subsequent drags. Full steps:

  1. Open https://playground.babylonjs.com/#1EBCJY#21 .
  2. Drag the green box to the left, continuing off the canvas onto the code editor.
  3. Mouse over the canvas again (with mouse button still down).
    Result: drag continues, as expected.
  4. Mouse up.
  5. Drag the green box in the same way as before (off the canvas and back on).
    Result: drag cancels as soon as you leave the canvas.
    Expect: drag to continue if you keep the mouse button down, as in Babylon 4.2.

@PolygonalSun, any ideas?

6

I’m thinking that a change may need to be made to handle the logic for held pointer clicks when the leave the canvas area. As it stands now, when the input leaves the canvas, all pressed pointer buttons are treated as though a pointerup event was created. I think what may need to be done is to extend the context of the pointer input to the window and explicitly handle how the input is interpreted when in the context of the window but not the canvas. I’m still working on a way to accomplish this that isn’t effectively “reinventing the wheel” with the DeviceInputSystem.

7

I may have been overthinking things. Fix is in PR: DeviceInputSystem: Fix pointer events when cursor leaves canvas by PolygonalSun ¡ Pull Request #10249 ¡ BabylonJS/Babylon.js (github.com)

2 Likes
8

Working great in alpha.18. Thanks @PolygonalSun!

1 Like
9

May I suspect that this has regressed with this PR?
As @PolygonalSun is author of both PR, I don’t think you overlooked the issue, but the pointerUp event outside the canvas does not fire for me. :frowning:

Sorry if I’m necromancing naively.

11

Hey @zb_sj,

When you say that you’re not having the pointerup event outside of the canvas, are you saying that your drag isn’t releasing? If so, what browsers/OS are you seeing this with?

12

Yes that is correct.

It could be the issue with iframe since I’m developing in Storybook environment.

It reproduces in these browsers:

  • Chrome(‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36’)
  • Safari(Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15)
  • Edge(Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.62)

Strangely works as intended only on firefox:

  • Firefox(Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/114.0)