UIMouseEventArgs ClientX and ScreenX producing wierd values in Canvas tag

[johnmott59]

I'm exploring Blazor as a replacement for some TypeScript libraries to do 2D drawing in an HMTL5 canvas. I'm capturing mousedown like this

<canvas id="cvmain" width="500" height="500" @onmousedown="@(e=> MouseDown(e))" style="border:1px solid black" />

@code {
private async void MouseDown(UIMouseEventArgs args)
{
    long X = args.ScreenX;  // or args.ClientX
    var sts = await JsRuntime.InvokeAsync<int>("alert",X);
}
}

The ClientX and ScreenX values of UIMouseEventArgs don't make sense. I would have expected the ClientX to be based on the canvas element but it appears to be the screen, and the ScreenX value is a large negative value.

bug or feature?

John Mott CTO, Surge Holdings.

[danroth27]

I'm going to move this issue over to the aspnet/aspnetcore repo, which is where all the active Blazor development is taking place.

[mkArtakMSFT]

Thanks for contacting us, @johnmott59. @SteveSandersonMS can you please look into this? Thanks!

[pranavkm]

@johnmott59 what version of Blazor are you using? We made changes to the data type used to represent ScreenX in the preview7 release, perhaps that addresses this.

[johnmott59]

Thank you for your response. I’m using whatever comes with core version 3, as shown below.

[johnmott59]

My mistake, I forgot Blazor was a nuget package. Where would I retrieve an updated nuget?

[danroth27]

@johnmott59 It looks some of your response didn't make it to your github comment. To verify which .NET Core version you are using, could you please share the output of dotnet --version? Also, which specific Blazor template are you using?

[johnmott59]

Dotnet –version is 3.0.100-preview6-012264

Blazor from nuget is v3.0.0-preview6-19307.2

[johnmott59]

I've figured out that Screen values are for the screen. I have 3 monitors and for some reason it picked the middle moniter as x=0. screen values to the left were 0 and to the right were positive. It looks like the ClientX is related to the browser, not to the element. Is there an element bias that I'm supposed to retrieve to find out displacement within the element?

[SteveSandersonMS]

Ah, that makes sense. So this is working as expected.

Is there an element bias that I'm supposed to retrieve to find out displacement within the element?

You'll need to combine your event handler with some extra JS interop to get the information you need: https://stackoverflow.com/a/42111623