Make control pointerEnter/pointerOut observables behave correctly on mobile

[darraghjburke]

Forum Issue: https://forum.babylonjs.com/t/button-recalls-memory-after-drag-and-drop/28799/3

This table of pointer events, from MDN, is helpful in understanding this issue:

Currently, our onPointerEnter and onPointerOut observables behave like pointerover and pointerleave respectively: they only fire when the browser sends a POINTERMOVE, from moving the pointer device. This presents problems on mobile, where you can release your finger over a control, and not be notified by onPointerOut, because there was no POINTERMOVE. When you then place your finger on another control on the screen, it does not notify the observables correctly there either.

We should change onPointerEnter and onPointerOut to behave like the matching HTML events. If we need to, we can add onPointerOver and onPointerLeave observables, but IMO we should only do this if the community specifically asks for them.

This is a very long standing bug, and I want to be careful to test any changes that we make here, so this will take some time to resolve.

[darraghjburke]

This issue is still open - I am not sure if we will tackle it as party of our road to 6.0, but wanted to keep some eyes on it.

[sebavan]

@RaananW let me know if you can repro on your devices, I can not seem to be able to on mine.

[RaananW]

I am closing this, as this was resolved. Under very specific scenarios it will fail, but these are cases that we can't fully support anyhow. For example - if moving over a button and then pressing (with another finger) on the address bar (to change the URL), the pointerout event will not be triggered. There is no real solution for that, apart from hurting performance (checking for pointer move on the scene as well, and always pass it to the GUI).