implement mouse events.

src/Web/Avalonia.Web/AvaloniaView.cs

@@ -3,6 +3,7 @@ using System.Runtime.InteropServices.JavaScript;
 using Avalonia.Controls;
 using Avalonia.Controls.Embedding;
 using Avalonia.Controls.Platform;
+using Avalonia.Input.Raw;
 using Avalonia.Input.TextInput;
 using Avalonia.Platform.Storage;
 using Avalonia.Rendering.Composition;
@@ -67,6 +68,85 @@ namespace Avalonia.Web
                 (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(Input.Raw.RawKeyEventType.KeyDown, code, key, (Input.RawInputModifiers)modifier),
                 (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(Input.Raw.RawKeyEventType.KeyUp, code, key, (Input.RawInputModifiers)modifier));
 
+            InputHelper.SubscribePointerEvents(_canvas, args =>
+            {
+                var type = args.GetPropertyAsString("pointertype");
+
+                var point = new RawPointerPoint
+                {
+                    Position = new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
+                    Pressure = (float)args.GetPropertyAsDouble("pressure"),
+                    XTilt = (float)args.GetPropertyAsDouble("tiltX"),
+                    YTilt = (float)args.GetPropertyAsDouble("tiltY")
+                    // Twist = args.Twist - read from JS code directly when
+                };
+
+                _topLevelImpl.RawPointerEvent(Input.Raw.RawPointerEventType.Move, type!, point, Input.RawInputModifiers.None, args.GetPropertyAsInt32("pointerId"));
+
+                return false;
+
+            }, args => {
+
+                var pointerType = args.GetPropertyAsString("pointerType");
+
+                var type = pointerType switch
+                {
+                    "touch" => RawPointerEventType.TouchBegin,
+                    _ => args.GetPropertyAsInt32("button") switch
+                    {
+                        0 => RawPointerEventType.LeftButtonDown,
+                        1 => RawPointerEventType.MiddleButtonDown,
+                        2 => RawPointerEventType.RightButtonDown,
+                        3 => RawPointerEventType.XButton1Down,
+                        4 => RawPointerEventType.XButton2Down,
+                        // 5 => Pen eraser button,
+                        _ => RawPointerEventType.Move
+                    }
+                };
+
+                var point = new RawPointerPoint
+                {
+                    Position = new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
+                    Pressure = (float)args.GetPropertyAsDouble("pressure"),
+                    XTilt = (float)args.GetPropertyAsDouble("tiltX"),
+                    YTilt = (float)args.GetPropertyAsDouble("tiltY")
+                    // Twist = args.Twist - read from JS code directly when
+                };
+
+                _topLevelImpl.RawPointerEvent(type, pointerType!, point, Input.RawInputModifiers.None, args.GetPropertyAsInt32("pointerId"));
+                return false;
+            }, args => {
+                var pointerType = args.GetPropertyAsString("pointerType");
+
+                var type = pointerType switch
+                {
+                    "touch" => RawPointerEventType.TouchEnd,
+                    _ => args.GetPropertyAsInt32("button") switch
+                    {
+                        0 => RawPointerEventType.LeftButtonUp,
+                        1 => RawPointerEventType.MiddleButtonUp,
+                        2 => RawPointerEventType.RightButtonUp,
+                        3 => RawPointerEventType.XButton1Up,
+                        4 => RawPointerEventType.XButton2Up,
+                        // 5 => Pen eraser button,
+                        _ => RawPointerEventType.Move
+                    }
+                };
+
+                var point = new RawPointerPoint
+                {
+                    Position = new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
+                    Pressure = (float)args.GetPropertyAsDouble("pressure"),
+                    XTilt = (float)args.GetPropertyAsDouble("tiltX"),
+                    YTilt = (float)args.GetPropertyAsDouble("tiltY")
+                    // Twist = args.Twist - read from JS code directly when
+                };
+
+                _topLevelImpl.RawPointerEvent(type, pointerType!, point, Input.RawInputModifiers.None, args.GetPropertyAsInt32("pointerId"));
+                return false;
+            });
+            
+
             var skiaOptions = AvaloniaLocator.Current.GetService<SkiaOptions>();
 
             _dpi = ObserveDpi(OnDpiChanged);

src/Web/Avalonia.Web/Interop/InputHelper.cs

@@ -19,6 +19,20 @@ internal static partial class InputHelper
         [JSMarshalAs<JSType.Function<JSType.String, JSType.String, JSType.Number, JSType.Boolean>>]
         Func<string, string, int, bool> keyUp);
 
+    
+   
+
+    [JSImport("InputHelper.subscribePointerEvents", "avalonia.ts")]
+    public static partial void SubscribePointerEvents(
+        JSObject htmlElement,
+        [JSMarshalAs<JSType.Function<JSType.Object, JSType.Boolean>>]
+        Func<JSObject, bool> pointerMove,
+        [JSMarshalAs<JSType.Function<JSType.Object, JSType.Boolean>>]
+        Func<JSObject, bool> pointerDown,
+        [JSMarshalAs<JSType.Function<JSType.Object, JSType.Boolean>>]
+        Func<JSObject, bool> pointerUp);
+        
+
     [JSImport("InputHelper.subscribeInputEvents", "avalonia.ts")]
     public static partial void SubscribeInputEvents(
         JSObject htmlElement,

src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts

@@ -45,6 +45,46 @@ export class InputHelper {
             element.removeEventListener("keyup", keyUpHandler);
         };
     }
+
+    public static subscribePointerEvents(
+        element: HTMLInputElement,
+        pointerMoveCallback: (args: PointerEvent) => boolean,
+        pointerDownCallback: (args: PointerEvent) => boolean,
+        pointerUpCallback: (args: PointerEvent) => boolean,
+    ) {
+        const pointerMoveHandler = (args: PointerEvent) => {
+            
+            if (pointerMoveCallback(args)) {
+                args.preventDefault();
+            }
+        };
+
+        const pointerDownHandler = (args: PointerEvent) => {
+
+            if (pointerDownCallback(args)) {
+                args.preventDefault();
+            }
+        };
+
+        const pointerUpHandler = (args: PointerEvent) => {
+
+            if (pointerUpCallback(args)) {
+                args.preventDefault();
+            }
+        };
+
+        element.addEventListener("pointermove", pointerMoveHandler);
+        element.addEventListener("pointerdown", pointerDownHandler);
+        element.addEventListener("pointerup", pointerUpHandler);
+
+       
+
+        return () => {
+            element.removeEventListener("pointerover", pointerMoveHandler);
+            element.removeEventListener("pointerdown", pointerDownHandler);
+            element.removeEventListener("pointerup", pointerUpHandler);
+        };
+    }
     
     public static subscribeInputEvents(
         element: HTMLInputElement,