Merge pull request #8285 from Oxc3/fix-web-mixing-pointer-touch-event

mixing touch and pointer breaks gestures

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor

@@ -1,12 +1,11 @@
 <div id="container" class="avalonia-container" tabindex="0" oncontextmenu="return false;"
-     @ontouchcancel="OnTouchCancel"
-     @ontouchmove="OnTouchMove"
      @onwheel="OnWheel"
      @onkeydown="OnKeyDown"
      @onkeyup="OnKeyUp"
      @onpointerdown="OnPointerDown"
      @onpointerup="OnPointerUp"
-     @onpointermove="OnPointerMove">
+     @onpointermove="OnPointerMove"
+     @onpointercancel="OnPointerCancel">
     
     <canvas id="htmlCanvas" @ref="_htmlCanvas" @attributes="AdditionalAttributes"/>
 
@@ -19,6 +18,9 @@
 </div>
 
 <style>
+#container{
+    touch-action: none;
+}
 #htmlCanvas {
     opacity: 1;
     background-color: #ccc;

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor.cs

@@ -57,27 +57,23 @@ namespace Avalonia.Web.Blazor
             return _nativeControlHost ?? throw new InvalidOperationException("Blazor View wasn't initialized yet");
         }
         
-        private void OnTouchCancel(TouchEventArgs e)
+        private void OnPointerCancel(Microsoft.AspNetCore.Components.Web.PointerEventArgs e)
         {
-            foreach (var touch in e.ChangedTouches)
+            if (e.PointerType == "touch")
             {
-                _topLevelImpl.RawTouchEvent(RawPointerEventType.TouchCancel, new Point(touch.ClientX, touch.ClientY),
-                    GetModifiers(e), touch.Identifier);
+                _topLevelImpl.RawTouchEvent(RawPointerEventType.TouchCancel, new Point(e.ClientX, e.ClientY),
+                    GetModifiers(e), e.PointerId);
             }
         }
 
-        private void OnTouchMove(TouchEventArgs e)
+        private void OnPointerMove(Microsoft.AspNetCore.Components.Web.PointerEventArgs e)
         {
-            foreach (var touch in e.ChangedTouches)
+            if (e.PointerType == "touch")
             {
-                _topLevelImpl.RawTouchEvent(RawPointerEventType.TouchUpdate, new Point(touch.ClientX, touch.ClientY),
-                    GetModifiers(e), touch.Identifier);
+                _topLevelImpl.RawTouchEvent(RawPointerEventType.TouchUpdate, new Point(e.ClientX, e.ClientY),
+                    GetModifiers(e), e.PointerId);
             }
-        }
-
-        private void OnPointerMove(Microsoft.AspNetCore.Components.Web.PointerEventArgs e)
-        {
-            if (e.PointerType != "touch")
+            else
             {
                 _topLevelImpl.RawMouseEvent(RawPointerEventType.Move, new Point(e.ClientX, e.ClientY), GetModifiers(e));
             }
@@ -174,22 +170,6 @@ namespace Avalonia.Web.Blazor
             return modifiers;
         }
 
-        private static RawInputModifiers GetModifiers(TouchEventArgs e)
-        {
-            var modifiers = RawInputModifiers.None;
-
-            if (e.CtrlKey)
-                modifiers |= RawInputModifiers.Control;
-            if (e.AltKey)
-                modifiers |= RawInputModifiers.Alt;
-            if (e.ShiftKey)
-                modifiers |= RawInputModifiers.Shift;
-            if (e.MetaKey)
-                modifiers |= RawInputModifiers.Meta;
-
-            return modifiers;
-        }
-
         private static RawInputModifiers GetModifiers(Microsoft.AspNetCore.Components.Web.PointerEventArgs e)
         {
             var modifiers = RawInputModifiers.None;