fix mobile touch coordinates

[yakyouk]

Fixes buttons partially clickable or not clickable on mobile
#4075
#4297
#4394

Touch coordinates calculation in shouldMoveCursor was using window.innerWidth and window.innerHeight, but the a-frame canvas is not always filling the window, e.g. with the new UI's toolbar.

Changed window.innerWidth and window.innerHeight to a-canvas element's width and height.
In case the canvas is further embedded in a UI in the future, the code also subtracts the canvas' left and top offsets from touch.clientX and touch.clientY.

Notes:

• This does not fix the issue where taps on singleActionButton buttons don't work for users who do not have the right to move objects.
• On an iPhone you have to go to Settings > Safari and turn off Block Pop-ups and Fraudulent Website Warning, or else the link silently fails to open.

┆Issue is synchronized with this Jira Task

[netpro2k]

Yikes good catch. I had assumed the reports we were getting about this were just about our touch controls in general being pretty floaty and unreliable (they need to be reworked) but this fixes a clear regression from adding the toolbar/sidebar. Made some minor suggestions you can apply if you like, but I can also just handle them when merging.

[netpro2k]

This only gets called in touchStart anyway so its not a huge deal, but querySelectors can be really slow so we try to avoid them when we can. Also the use of left and top on the next lines threw me because of the variable name, didn't notice the getBoundingClientRect() at first

Suggested change

	const canvas = document.querySelector(".a-canvas").getBoundingClientRect();
	const canvasRect = AFRAME.scense[0].getBoundingClientRect();

[yakyouk]

I wanted to use AFRAME.scene[0] but for some reason it includes the toolbar as well, whereas the canvas doesn't.

But we can store a ref to canvas to avoid querying it every time.

[yakyouk]

I pushed some changes:
We actually have a ref to canvas in this.canvas, and I store canvas rect in this.canvasRect and update it on resize using ResizeObserver.
Since shouldMoveCursor is outside of the class and does not see this.canvasRect, I pass rect to the function as well.

[netpro2k]

Suggested change

	x: ((touch.clientX - canvas.left) / canvas.width) * 2 - 1,
	x: ((touch.clientX - canvasRect.left) / canvasRect.width) * 2 - 1,

[netpro2k]

Suggested change

	y: -((touch.clientY - canvas.top) / canvas.height) * 2 + 1
	y: -((touch.clientY - canvasRect.top) / canvasRect.height) * 2 + 1

[yakyouk]

Updated calculation here too

[wmurphyrd]

@netpro2k @yakyouk we also have a fix for this, since the main issue was that shouldMoveCursor was casting a slightly different ray than what start would later set as assignment.cursorPose, I just re-arranged the code to ensure that both places were able to share a single pose calculation.

immers-space@298f8d0

We have this in production on https://vreign.space if you'd like to test.

Dom, let me know if you'd like to see this in its own PR or combined yakyouk's work here

[netpro2k]

Dom, let me know if you'd like to see this in its own PR or combined yakyouk's work here

Yep I think a separate PR would be nice, since this is already ready to merge.

[Softvision-GeluHaiduc]

After verifying some mobile issues I noticed that waypoints and links to other rooms or websites don’t work on mobile devices if the “Create and move objects” setting from room settings is disabled, the issues are not reproducible for the creator of the room but all the other users are affected.
I logged issue #4691 to track this.