Add touchenter event, add JSDoc, small refactor

[kungfooman]

Fixes #4755

Firing mousemove even when the mouse is outside the ElementComponent is actually correct behaviour and other elements depend on this, e.g. ScrollViewComponent. So the first misconception in the issue is to imply "mouse must be over element" based on "mousemove". The events that actually give you this information are mouseenter/mouseleave.

That works just fine, but when I tested this on iPhone, I realized there isn't even a touchenter event yet, so this PR is adding that for the same abilities across plattforms.

I saw @jpauloruschel working with this and your last PR also changed the mousemove behaviour: ff00ed5

IMO the current behaviour is exactly how it should be, otherwise any developer who can only rely on mousemove events trying to implement e.g. a custom scroll element simply has no events to base the scrolling behaviour on.

Maybe I am completely wrong, any thoughts/feedback?

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

[kungfooman]

Can anyone think of any objections to making _clickedEntities a definitely assigned property of ElementInput?

Right now in ElementInput#constructor:

engine/src/framework/input/element-input.js

Lines 378 to 381 in b232b13

	if (platform.touch)
	this._clickedEntities = {};

First it checks platform.touch and then later AppBase is calling ElementInput#attachSelectEvents:

engine/src/framework/app-base.js

Lines 519 to 522 in b232b13

	if (this.elementInput)
	this.elementInput.attachSelectEvents();

Which usually assigns ElementInput#_clickedEntities (just not in cases that a browser doesn't support XR):

engine/src/framework/input/element-input.js

Lines 435 to 443 in b232b13

	attachSelectEvents() {
	if (!this._selectEventsAttached && this._useXr && this.app && this.app.xr && this.app.xr.supported) {
	if (!this._clickedEntities)
	this._clickedEntities = {};
	this._selectEventsAttached = true;
	this.app.xr.on('start', this._onXrStart, this);
	}
	}

It would remove some lines of code and simplify the {}|undefined type to {}.

[kungfooman]

I forked @mgawinKatana's project which handles now mouse/touch for testing this PR:

https://playcanvas.com/project/1007930/overview/elementmousemove-fix

https://launch.playcanvas.com/1587642

https://launch.playcanvas.com/1587642?use_local_engine=http://localhost/playcanvas-engine-pr/build/playcanvas.js

Is there a way to use_local_engine for 10.*.*.* or 192.168.*.* private networks? Then it would be testable on local touch devices connected via LAN/WLAN.

[yaustar]

Is there a way to use_local_engine for 10...* or 192.168.. private networks? Then it would be testable on local touch devices connected via LAN/WLAN.

I'm afraid not, no.

The way I've been doing it is either overrides in the devtools or putting the engine file into the project and having it load after the engine.

Added ticket here: playcanvas/editor#925

[yaustar]

We also need to bubble these events to button like we do for touch leave https://github.com/playcanvas/engine/blob/main/src/framework/components/button/component.js#L297

[yaustar]

I feel like we should fire touchenter if a user has clicked outside the element and moved into it as well. Seems odd to only fire it if we started in an element, leave and then re-enter