Add OffsetX and OffsetY for touch events

[janseris]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

onclick event in its MouseEventArgs has OffsetX and OffsetX. These return coordinates in the current element. The coordinates are fine also when the element is scaled or transformed.
There is no such functionality for touch events. Although onclick fires on short tap and oncontextmenu fires on long tap and they both fire event with MouseEventArgs which contains OffsetX and OffsetY, ontouchstart and ontouchend don't have OffsetX and OffsetY in their event args.
This is crucial for applications like drawing on canvas which supports zooming and moving of the canvas within a parent container.
Calculating OffsetX and OffsetY in such scenario is not possible afaik with plain Blazor and would require some complicated calculations via JS interop considering the fact that the canvas can be moved, zoomed and transformed within the parent container.

Issues using JS interop:

1. slow - especially for MAUI Blazor app on Android (my scenario)
2. complicated

The coordinates are exposed in onclick, thus they are probably known also when touch starts/ends. The issue is that they are not published.

The events are fired in this sequence (depends of duration of the tap):

ontouchstart
onclick
ontouchend

or

ontouchstart
oncontextmenu
ontouchend

Describe the solution you'd like

Add OffsetX and OffsetY coordinates to TouchEventArgs. They are present in MouseEventArgs

Additional context

No response

[TanayParikh]

OffsetX, OffsetY are defined as part of the official spec for Mouse Events: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX

These properties are not part of the official spec for Touch Events: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

The values for the *EventArgs are directly derived from the official Web API. As such, these aren't properties we're likely to support out of the box for Touch Events.

Note however, you may be able to leverage the TouchPoints to get X/Y co-ordinates and adapt them for your use case:

aspnetcore/src/Components/Web/src/Web/TouchPoint.cs

Lines 19 to 49 in dc98f4b

	/// <summary>
	/// The X coordinate of the touch point relative to the left edge of the screen.
	/// </summary>
	public double ScreenX { get; set; }
	/// <summary>
	/// The Y coordinate of the touch point relative to the top edge of the screen.
	/// </summary>
	public double ScreenY { get; set; }
	/// <summary>
	/// The X coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.
	/// </summary>
	public double ClientX { get; set; }
	/// <summary>
	/// The Y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.
	/// </summary>
	public double ClientY { get; set; }
	/// <summary>
	/// The X coordinate of the touch point relative to the left edge of the document.
	/// Unlike <see cref="ClientX"/>, this value includes the horizontal scroll offset, if any.
	/// </summary>
	public double PageX { get; set; }
	/// <summary>
	/// The Y coordinate of the touch point relative to the top of the document.
	/// Unlike <see cref="ClientY"/>, this value includes the vertical scroll offset, if any.
	/// </summary>
	public double PageY { get; set; }

https://developer.mozilla.org/en-US/docs/Web/API/Touch

[janseris]

@TanayParikh
Thank you, however the ScreenX/Y, ClientX/Y and PageX/Y are useless for this scenario.
This is why I am asking for OffsetX and OffsetY.
I have read an issue from 2020 with the argument that it is not defined in MDN (Mozilla Developer Network) web docs.
Can't Blazor have better features - more than the standard defines? Features very useful for the practical usage scenarios?

[TanayParikh]

For consistency and maintainability we stick to the official spec as closely as possible for event args. Given these offset values aren't present in the official spec (ie. not shown in MDN), this isn't something we'd add to the TouchEventArgs at this time.

Can't Blazor have better features - more than the standard defines?

Extensions beyond the official specs are handled on a case-by-case basis based on community interest and functionality scope. As far as I know we haven't considered any expansions in the underlying *EventArgs as they represent core web functionality that many users expect to just work in a standards compliant manner.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.