refactor subscription of pointer events to share code, and preventdefault when handled.

src/Web/Avalonia.Web/AvaloniaView.cs

@@ -78,88 +78,7 @@ namespace Avalonia.Web
                 (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier),
                 (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyUp, code, key, (RawInputModifiers)modifier));
 
-            InputHelper.SubscribePointerEvents(_containerElement, args =>
+            InputHelper.SubscribePointerEvents(_containerElement, OnPointerMove, OnPointerDown, OnPointerUp, OnWheel);
-            {
-                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 = (float)args.GetPropertyAsDouble("twist")
-                };
-
-                _topLevelImpl.RawPointerEvent(RawPointerEventType.Move, type!, point, GetModifiers(args), 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 = (float)args.GetPropertyAsDouble("twist")
-                };
-
-                _topLevelImpl.RawPointerEvent(type, pointerType!, point, GetModifiers(args), args.GetPropertyAsInt32("pointerId"));
-                return false;
-            }, args => {
-                var pointerType = args.GetPropertyAsString("pointerType") ?? "mouse";
-
-                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 = (float)args.GetPropertyAsDouble("twist")
-                };
-
-                _topLevelImpl.RawPointerEvent(type, pointerType, point, GetModifiers(args), args.GetPropertyAsInt32("pointerId"));
-                return false;
-            }, args =>
-            {
-                _topLevelImpl.RawMouseWheelEvent(new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
-                    new Vector(-(args.GetPropertyAsDouble("deltaX") / 50), -(args.GetPropertyAsDouble("deltaY") / 50)), GetModifiers(args));
-                return false;
-            });
             
 
             var skiaOptions = AvaloniaLocator.Current.GetService<SkiaOptions>();
@@ -196,11 +115,88 @@ namespace Avalonia.Web
 
             _topLevelImpl.SetClientSize(_canvasSize, _dpi);
 
-            DomHelper.ObserveSize(_canvas, "mycanvas", OnSizeChanged);
+            DomHelper.ObserveSize(_canvas, _canvas.GetPropertyAsString("id")!, OnSizeChanged);
 
             CanvasHelper.RequestAnimationFrame(_canvas, true);
         }
 
+        private static RawPointerPoint ExtractRawPointerFromJSArgs(JSObject args)
+        {
+            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 = (float)args.GetPropertyAsDouble("twist")
+            };
+
+            return point;
+        }
+
+        private bool OnPointerMove(JSObject args)
+        {
+            var type = args.GetPropertyAsString("pointertype");
+
+            var point = ExtractRawPointerFromJSArgs(args);
+
+            return _topLevelImpl.RawPointerEvent(RawPointerEventType.Move, type!, point, GetModifiers(args), args.GetPropertyAsInt32("pointerId"));
+        }
+
+        private bool OnPointerDown(JSObject 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 = ExtractRawPointerFromJSArgs(args);
+
+            return _topLevelImpl.RawPointerEvent(type, pointerType!, point, GetModifiers(args), args.GetPropertyAsInt32("pointerId"));
+        }
+
+        private bool OnPointerUp(JSObject args)
+        {
+            var pointerType = args.GetPropertyAsString("pointerType") ?? "mouse";
+
+            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 = ExtractRawPointerFromJSArgs(args);
+
+            return _topLevelImpl.RawPointerEvent(type, pointerType, point, GetModifiers(args), args.GetPropertyAsInt32("pointerId"));
+        }
+
+        private bool OnWheel(JSObject args)
+        {
+            return _topLevelImpl.RawMouseWheelEvent(new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
+                new Vector(-(args.GetPropertyAsDouble("deltaX") / 50), -(args.GetPropertyAsDouble("deltaY") / 50)), GetModifiers(args));
+        }
+
         private static RawInputModifiers GetModifiers(JSObject e)
         {
             var modifiers = RawInputModifiers.None;
@@ -291,7 +287,7 @@ namespace Avalonia.Web
             {
                 _dpi = newDpi;
 
-                CanvasHelper.SetCanvasSize(_canvas, (int)(_canvasSize.Width * _dpi), (int)(_canvasSize.Height * _dpi));
+                //CanvasHelper.SetCanvasSize(_canvas, (int)(_canvasSize.Width * _dpi), (int)(_canvasSize.Height * _dpi));
 
                 _topLevelImpl.SetClientSize(_canvasSize, _dpi);
 
@@ -307,7 +303,7 @@ namespace Avalonia.Web
             {
                 _canvasSize = newSize;
 
-                CanvasHelper.SetCanvasSize(_canvas, (int)(_canvasSize.Width * _dpi), (int)(_canvasSize.Height * _dpi));
+                //CanvasHelper.SetCanvasSize(_canvas, (int)(_canvasSize.Width * _dpi), (int)(_canvasSize.Height * _dpi));
 
                 _topLevelImpl.SetClientSize(_canvasSize, _dpi);
 

src/Web/Avalonia.Web/BrowserTopLevelImpl.cs

@@ -66,7 +66,7 @@ namespace Avalonia.Web
             }
         }
 
-        public void RawPointerEvent(
+        public bool RawPointerEvent(
             RawPointerEventType eventType, string pointerType,
             RawPointerPoint p, RawInputModifiers modifiers, long touchPointId)
         {
@@ -82,7 +82,11 @@ namespace Avalonia.Web
                     };
 
                 input.Invoke(args);
+
+                return args.Handled;
             }
+
+            return false;
         }
 
         private IPointerDevice GetPointerDevice(string pointerType)
@@ -95,12 +99,18 @@ namespace Avalonia.Web
             };
         }
 
-        public void RawMouseWheelEvent(Point p, Vector v, RawInputModifiers modifiers)
+        public bool RawMouseWheelEvent(Point p, Vector v, RawInputModifiers modifiers)
         {
             if (_inputRoot is { })
             {
-                Input?.Invoke(new RawMouseWheelEventArgs(MouseDevice, Timestamp, _inputRoot, p, v, modifiers));
+                var args = new RawMouseWheelEventArgs(MouseDevice, Timestamp, _inputRoot, p, v, modifiers);
+                
+                Input?.Invoke(args);
+
+                return args.Handled;
             }
+
+            return false;
         }
 
         public bool RawKeyboardEvent(RawKeyEventType type, string code, string key, RawInputModifiers modifiers)