update mouse handling

Author: mizrael

samples/Blazorex.Samples.DoomFire/Pages/Home.razor

@@ -98,6 +98,6 @@
         _context.Font = "24px verdana";
         _context.FillStyle = "red";
         _context.FillText($"FPS: {fps:###}", 20, 40);
-        _context.FillText($"Mouse Coords: {_mousecoords.X} : {_mousecoords.Y}", 20, 60);
+        _context.FillText($"Mouse Coords: {_mousecoords.ClientX} : {_mousecoords.ClientY}", 20, 60);
     }
 }

samples/Blazorex.Samples.MouseCoords/Pages/Home.razor

@@ -70,6 +70,6 @@
         _context.Font = "24px verdana";
         _context.FillStyle = "red";
         _context.FillText($"FPS: {fps:###}", 20, 40);
-        _context.FillText($"Mouse Coords: {_mousecoords.X} : {_mousecoords.Y}", 20, 60);
+        _context.FillText($"Mouse Coords: {_mousecoords.ClientX} : {_mousecoords.ClientY}", 20, 60);
     }
 }

samples/Blazorex.Samples.PanAndZoom/Components/Pages/Home.razor

@@ -22,6 +22,12 @@
         y = 0,
         scale = 1
     };
+    MouseCoords _lastClickCoords = new()
+    {
+        ClientX = 0,
+        ClientY = 0
+    };
+    bool _isMouseDown = false;
 
     protected override void OnAfterRender(bool firstRender)
     {
@@ -35,7 +41,28 @@
             Height = _height,
             OnCanvasReady = this.OnMainCanvasReady,
             OnFrameReady = this.OnMainFrameReady,
-            OnWheel = this.OnWheel
+            OnMouseWheel = this.OnMouseWheel,
+            OnMouseDown = this.OnMouseDown,
+            OnMouseUp = this.OnMouseUp,
+            OnMouseMove = (MouseCoords evt) =>
+            {
+                if (_isMouseDown)
+                {
+                    var newX = evt.ClientX - _lastClickCoords.ClientX;
+                    var newY = evt.ClientY - _lastClickCoords.ClientY;
+                    _viewportTransform = new()
+                    {
+                        x = _viewportTransform.x + newX,
+                        y = _viewportTransform.y + newY,
+                        scale = _viewportTransform.scale
+                    };
+                }
+                _lastClickCoords = new MouseCoords()
+                {
+                    ClientX = evt.ClientX,
+                    ClientY = evt.ClientY
+                };
+            }
         });
 
         base.OnAfterRender(firstRender);
@@ -51,8 +78,16 @@
         this.Render();
     }
 
+    private void OnMouseDown(MouseButtonData evt)
+    {
+        _isMouseDown = true;
+    }
+    private void OnMouseUp(MouseButtonData evt)
+    {
+        _isMouseDown = false;
+    }
 
-    private void OnWheel(WheelDelta evt)
+    private void OnMouseWheel(WheelDelta evt)
     {
         var newScale = _viewportTransform.scale + evt.DeltaY * -0.001f;
         var newX = evt.ClientX - (evt.ClientX - _viewportTransform.x) * (newScale / _viewportTransform.scale);
@@ -81,6 +116,7 @@
         _context.Font = "24px verdana";
         _context.FillStyle = "yellow";
         _context.FillText("Use the wheel to change the zoom", 20, 20);
+        _context.FillText("Click to pan the view", 20, 80);
 
         _context.SetTransform(_viewportTransform.scale, 0, 0, _viewportTransform.scale, _viewportTransform.x, _viewportTransform.y);
         DrawRect(100, 100, 100, 100, "red");

src/Blazorex/Blazorex.csproj

@@ -2,14 +2,14 @@
 
 	<PropertyGroup>
 		<TargetFramework>net8.0</TargetFramework>
-		<PackageVersion>1.1.3</PackageVersion>
+		<PackageVersion>1.1.4</PackageVersion>
 		<IsPackable>true</IsPackable>
 		<Authors>davidguida</Authors>
 		<Product>Blazorex</Product>
 		<NeutralLanguage>en-US</NeutralLanguage>
 		<Title>Blazorex</Title>
 		<PackageDescription>Blazorex is an HTML Canvas wrapper library for Blazor, written with .NET.</PackageDescription>
-		<Copyright>Copyright 2023</Copyright>
+		<Copyright>Copyright 2025</Copyright>
 		<PackageRequireLicenseAcceptance>true</PackageRequireLicenseAcceptance>
 		<PackageLicenseExpression>Apache-2.0</PackageLicenseExpression>
 		<PackageTags>blazor dotnet dotnet-core canvas gamedev</PackageTags>

src/Blazorex/CanvasBase.cs

@@ -68,7 +68,19 @@ public async ValueTask Resized(int width, int height)
     [JSInvokable]
     public async ValueTask Wheel(WheelDelta evt)
     {
-        await this.OnWheel.InvokeAsync(evt);
+        await this.OnMouseWheel.InvokeAsync(evt);
+    }
+
+    [JSInvokable]
+    public async ValueTask MouseDown(MouseButtonData evt)
+    {
+        await this.OnMouseDown.InvokeAsync(evt);
+    }
+
+    [JSInvokable]
+    public async ValueTask MouseUp(MouseButtonData evt)
+    {
+        await this.OnMouseUp.InvokeAsync(evt);
     }
 
     #endregion JS interop
@@ -85,13 +97,19 @@ public async ValueTask Wheel(WheelDelta evt)
     public EventCallback<MouseCoords> OnMouseMove { get; set; }
 
     [Parameter]
-    public EventCallback<Size> OnResize { get; set; }
+    public EventCallback<WheelDelta> OnMouseWheel { get; set; }
+
+    [Parameter]
+    public EventCallback<MouseButtonData> OnMouseDown { get; set; }
 
     [Parameter]
-    public EventCallback<float> OnFrameReady { get; set; }
+    public EventCallback<MouseButtonData> OnMouseUp { get; set; }
+
+    [Parameter]
+    public EventCallback<Size> OnResize { get; set; }
 
     [Parameter]
-    public EventCallback<WheelDelta> OnWheel { get; set; }
+    public EventCallback<float> OnFrameReady { get; set; }    
 
     [Parameter]
     public EventCallback<CanvasBase> OnCanvasReady { get; set; }

src/Blazorex/CanvasCreationOptions.cs

@@ -47,7 +47,9 @@ public readonly struct CanvasCreationOptions
 
 
     public Action<MouseCoords> OnMouseMove { get; init; }
-    public Action<WheelDelta> OnWheel { get; init; }
+    public Action<WheelDelta> OnMouseWheel { get; init; }
+    public Action<MouseButtonData> OnMouseDown { get; init; }
+    public Action<MouseButtonData> OnMouseUp { get; init; }
 
     public Action<Size> OnResize { get; init; }
 }

src/Blazorex/CanvasManager.razor

@@ -19,7 +19,9 @@
                     OnCanvasReady="@onCanvasReady"
                     OnFrameReady="@options.OnFrameReady"
                     OnMouseMove="@options.OnMouseMove"
-                    OnWheel="@options.OnWheel"
+                    OnMouseWheel="@options.OnMouseWheel"
+                    OnMouseDown="@options.OnMouseDown"
+                    OnMouseUp="@options.OnMouseUp"
                     OnKeyDown="@options.OnKeyDown"
                     OnKeyUp="@options.OnKeyUp"
                     OnResize="@options.OnResize"

src/Blazorex/MouseCoords.cs

@@ -0,0 +1,24 @@
+namespace Blazorex;
+
+public readonly struct MouseCoords
+{
+    public int ClientX { get; init; }
+    public int ClientY { get; init; }
+    public int OffsetX { get; init; }
+    public int OffsetY { get; init; }
+}
+
+public readonly struct MouseButtonData
+{
+    public int Button { get; init; }
+    public int ClientX { get; init; }
+    public int ClientY { get; init; }
+}
+
+public readonly struct WheelDelta
+{
+    public int DeltaX { get; init; }
+    public int DeltaY { get; init; }
+    public int ClientX { get; init; }
+    public int ClientY { get; init; }
+}