Improve Mouse Wheel (#1785)

kblok · web-flow · commit 32a57a605d97 · 2021-07-20T11:07:23.000-03:00
* Improve Mouse Wheel

* Code factor
diff --git a/lib/PuppeteerSharp.TestServer/wwwroot/input/wheel.html b/lib/PuppeteerSharp.TestServer/wwwroot/input/wheel.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      body {
+        min-height: 100vh;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      div {
+        width: 105px;
+        height: 105px;
+        background: #cdf;
+        padding: 5px;
+      }
+    </style>
+    <title>Element: wheel event - Scaling_an_element_via_the_wheel - code sample</title>
+  </head>
+  <body>
+    <div>Scale me with your mouse wheel.</div>
+    <script>
+      function zoom(event) {
+        event.preventDefault();
+
+        scale += event.deltaY * -0.01;
+
+        // Restrict scale
+        scale = Math.min(Math.max(.125, scale), 4);
+
+        // Apply scale transform
+        el.style.transform = `scale(${scale})`;
+      }
+
+      let scale = 1;
+      const el = document.querySelector('div');
+      el.onwheel = zoom;
+    </script>
+  </body>
+</html>
diff --git a/lib/PuppeteerSharp.Tests/MouseTests/MouseTests.cs b/lib/PuppeteerSharp.Tests/MouseTests/MouseTests.cs
@@ -26,6 +26,35 @@ public MouseTests(ITestOutputHelper output) : base(output)
         {
         }
 
+        [PuppeteerTest("mouse.spec.ts", "Mouse", "should click the document")]
+        [Fact(Timeout = TestConstants.DefaultTestTimeout)]
+        public async Task ShouldClickTheDocument()
+        {
+            await Page.EvaluateFunctionAsync(@"() => {
+                globalThis.clickPromise = new Promise((resolve) => {
+                    document.addEventListener('click', (event) => {
+                    resolve({
+                        type: event.type,
+                        detail: event.detail,
+                        clientX: event.clientX,
+                        clientY: event.clientY,
+                        isTrusted: event.isTrusted,
+                        button: event.button,
+                    });
+                    });
+                });
+            }");
+            await Page.Mouse.ClickAsync(50, 60);
+            var e = await Page.EvaluateFunctionAsync<MouseEvent>("() => globalThis.clickPromise");
+
+            Assert.Equal("click", e.Type);
+            Assert.Equal(1, e.Detail);
+            Assert.Equal(50, e.ClientX);
+            Assert.Equal(60, e.ClientY);
+            Assert.True(e.IsTrusted);
+            Assert.Equal(0, e.Button);
+        }
+
         [PuppeteerTest("mouse.spec.ts", "Mouse", "should resize the textarea")]
         [SkipBrowserFact(skipFirefox: true)]
         public async Task ShouldResizeTheTextarea()
@@ -115,16 +144,37 @@ public async Task ShouldSetModifierKeysOnClick()
             }
         }
 
+        [PuppeteerTest("mouse.spec.ts", "Mouse", "should send mouse wheel events")]
+        [SkipBrowserFact(skipFirefox: true)]
+        public async Task ShouldSendMouseWheelEvents()
+        {
+            await Page.GoToAsync(TestConstants.ServerUrl + "/input/wheel.html");
+            var elem = await Page.QuerySelectorAsync("div");
+            var boundingBoxBefore = await elem.BoundingBoxAsync();
+            Assert.Equal(115, boundingBoxBefore.Width);
+            Assert.Equal(115, boundingBoxBefore.Height);
+
+            await Page.Mouse.MoveAsync(
+                boundingBoxBefore.X + (boundingBoxBefore.Width / 2),
+                boundingBoxBefore.Y + (boundingBoxBefore.Height / 2)
+            );
+
+            await Page.Mouse.WheelAsync(0, -100);
+            var boundingBoxAfter = await elem.BoundingBoxAsync();
+            Assert.Equal(230, boundingBoxAfter.Width);
+            Assert.Equal(230, boundingBoxAfter.Height);
+        }
+
         [PuppeteerTest("mouse.spec.ts", "Mouse", "should tween mouse movement")]
         [SkipBrowserFact(skipFirefox: true)]
         public async Task ShouldTweenMouseMovement()
         {
             await Page.Mouse.MoveAsync(100, 100);
             await Page.EvaluateExpressionAsync(@"{
-              window.result = [];
-              document.addEventListener('mousemove', event => {
-                window.result.push([event.clientX, event.clientY]);
-              });
+                window.result = [];
+                document.addEventListener('mousemove', event => {
+                    window.result.push([event.clientX, event.clientY]);
+                });
             }");
             await Page.Mouse.MoveAsync(200, 300, new MoveOptions { Steps = 5 });
             Assert.Equal(new[] {
@@ -192,5 +242,20 @@ public void Scroll(decimal deltaX, decimal deltaY)
                 Y = Math.Max(0, Y + deltaY);
             }
         }
+
+        internal struct MouseEvent
+        {
+            public string Type { get; set; }
+
+            public int Detail { get; set; }
+
+            public int ClientX { get; set; }
+
+            public int ClientY { get; set; }
+
+            public bool IsTrusted { get; set; }
+
+            public int Button { get; set; }
+        }
     }
 }
diff --git a/lib/PuppeteerSharp/Input/Mouse.cs b/lib/PuppeteerSharp/Input/Mouse.cs
@@ -143,7 +143,11 @@ public Task WheelAsync(decimal deltaX, decimal deltaY)
                 {
                     Type = MouseEventType.MouseWheel,
                     DeltaX = deltaX,
-                    DeltaY = deltaY
+                    DeltaY = deltaY,
+                    X = _x,
+                    Y = _y,
+                    Modifiers = _keyboard.Modifiers,
+                    PointerType = PointerType.Mouse
                 });
     }
 }
diff --git a/lib/PuppeteerSharp/Input/PointerType.cs b/lib/PuppeteerSharp/Input/PointerType.cs
@@ -0,0 +1,15 @@
+﻿using System.Runtime.Serialization;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
+
+namespace PuppeteerSharp.Input
+{
+    [JsonConverter(typeof(StringEnumConverter))]
+    internal enum PointerType
+    {
+        [EnumMember(Value = "mouse")]
+        Mouse,
+        [EnumMember(Value = "pen")]
+        Pen,
+    }
+}
diff --git a/lib/PuppeteerSharp/Messaging/InputDispatchMouseEventRequest.cs b/lib/PuppeteerSharp/Messaging/InputDispatchMouseEventRequest.cs
@@ -19,5 +19,7 @@ internal class InputDispatchMouseEventRequest
         public decimal DeltaX { get; set; }
 
         public decimal DeltaY { get; set; }
+
+        public PointerType PointerType { get; set; }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,11 @@ public Task WheelAsync(decimal deltaX, decimal deltaY)`
`143`	`143`	`{`
`144`	`144`	`Type = MouseEventType.MouseWheel,`
`145`	`145`	`DeltaX = deltaX,`
`146`		`- DeltaY = deltaY`
	`146`	`+ DeltaY = deltaY,`
	`147`	`+ X = _x,`
	`148`	`+ Y = _y,`
	`149`	`+ Modifiers = _keyboard.Modifiers,`
	`150`	`+ PointerType = PointerType.Mouse`
`147`	`151`	`});`
`148`	`152`	`}`
`149`	`153`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,7 @@ internal class InputDispatchMouseEventRequest`
`19`	`19`	`public decimal DeltaX { get; set; }`
`20`	`20`
`21`	`21`	`public decimal DeltaY { get; set; }`
	`22`	`+`
	`23`	`+ public PointerType PointerType { get; set; }`
`22`	`24`	`}`
`23`	`25`	`}`