Fix UI Element input events on multiple touches.

[jpauloruschel]

Fixes #4341 and #4470

Issue #4341 root cause is that the element-drag-helper class (used by Scrollview components and similar) uses Window DOM Events for handling dragging, and does not check the actual target of the event. This leads to any touch interaction being handled by all UI Elements at once. Issue #4470 is also related to multitouch.

This PR makes the element-drag-helper use the Events triggered by element-input system (rather than Window DOM events) for handling dragging. The element-input system already contains all logic and checks necessary to figure out which is the correct element a given user events (like touch or mouse) should target.

The only reason element-drag-helper was still using Window DOM events was to handle the cases of outside-of-canvas events (like letting go of mouse or touch outside the bounds of the screen), whereas element-input system was not. This PR also addresses that by having element-input handle that use-case properly, by removing hard-coded checks that prevent such events from firing. Note that element-input system does also Window DOM events.

Finally, this PR also makes the mouse events also use element-input system so everything is standardised to use the same system.

Testing

Test project with custom engine build: https://launch.playcanvas.com/1223792

Before

Before, any touch event (to any target) was being processed by all element-drag-helpers, so there were flickering and unwanted movement of bars. Also, if there was any touch still active, you couldn't click the button. It would highlight, but not increase its value on click.

RPReplay_Final1660816738.MP4

After

After, each touch finger is handled properly by its target element only, and you can click on the button.

RPReplay_Final1660817255.MP4

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[mvaligursky]

looks great!

[yaustar]

I noticed that when both scrollbars were moving, they weren't highlighted as white. Is that expected behaviour?

[jpauloruschel]

I noticed that when both scrollbars were moving, they weren't highlighted as white. Is that expected behaviour?

Yes, because my fingers moved outside the bounding boxes of the elements, but keeping them pressed in order to test and show that the original pressed element continued to receive the touch events, as expected. If you keep the fingers(or mouse) within the bounding box of the element, they continue to be highlighted.