UIMouseEventArgs should include OffsetX and OffsetY

[petergolde]

I'm using Razor Components (server-side Blazor) to handle mouse events on a canvas element, although the issue could arise with any HTML element. I would like to know where on the canvas element the mouse event occurred (obviously a key piece of data!)

Currently, UIMouseEventArgs includes only ScreenX/Y and ClientX/Y. Neither of these directly give the location of the mouse event within the element. Typically, JavaScript code will call getBoundingClientRect() on the given element, and subtract those values from ClientX/Y to get the mouse location with the element.

Doing that using server-side Blazor presents two problems. First, it requires another round-trip to the client to make that Javascript call. This is a performance problem. Second, because that Javascript call is asynchronous, the bounding client rect might have changed since the event happened. For example, the web page might have scrolled or there might be an animation occurring. In that case, the adjusted mouse coordinates still won't be correct.

In order to remedy this, I think that UIMouseEventArgs should include two new fields: OffsetX and OffsetY, which indicate the position within that element that the mouse event occurred. Most modern browsers already include those properties on mouse events; for those that do not, the client size Blazor code should provide the trivial emulation.

[mkArtakMSFT]

Thanks for contacting us, @petergolde.
@danroth27 assigning to you to collect the actual need from community regarding similar asks.

[Bartmax]

👍 I need this to implement material design ripple without js interop.

[VR-Architect]

I need this too please. Also consider adding a reference to the actual element that was clicked too!

[VR-Architect]

Here is the code I used to get the offset:

    Vector2 mouseOffset = new Vector2 { top = 0, left = 0 };
    void mouseDown(UIMouseEventArgs args)
    {
        mouseOffset.left = args.ClientX - MyElement.left;
        mouseOffset.top = args.ClientY - MyElement.top;
    }
   void mouseMove(UIMouseEventArgs args)
    {
        if (isMouseDown)
        {
            MyElement.left = args.ClientX - mouseOffset.left;
            MyElement].top = args.ClientY - mouseOffset.top;
        }
    }
    public class Vector2
    {
        public long left { get; set; }
        public long top { get; set; }
    }

Full code here #12259

[Zigby]

I need this too.
Are there any plans to support OffsetX and OffsetY as properties of the MouseEventArgs?

[tleylan]

While the OffsetX and Y values would be useful it seems to me that the PageX and PageY are values we need. Generally speaking once a page is rendered the Page positions won't change often while the Client positions change if the page scrolls.