Add handling wheel

src/Avalonia.DesignerSupport/Remote/HtmlTransport/HtmlTransport.cs

@@ -135,9 +135,9 @@ namespace Avalonia.DesignerSupport.Remote.HtmlTransport
                                         new InputProtocol.PointerReleasedEventMessage
                                         {
                                             Modifiers = ParseInputModifiers(parts[1]),
-                                            Button = ParseMouseButton(parts[2]),
-                                            X = double.Parse(parts[3]),
-                                            Y = double.Parse(parts[4]),
+                                            X = double.Parse(parts[2]),
+                                            Y = double.Parse(parts[3]),
+                                            Button = ParseMouseButton(parts[4]),
                                         });
                                     break;
                                 }
@@ -148,9 +148,9 @@ namespace Avalonia.DesignerSupport.Remote.HtmlTransport
                                         new InputProtocol.PointerPressedEventMessage
                                         {
                                             Modifiers = ParseInputModifiers(parts[1]),
-                                            Button = ParseMouseButton(parts[2]),
-                                            X = double.Parse(parts[3]),
-                                            Y = double.Parse(parts[4]),
+                                            X = double.Parse(parts[2]),
+                                            Y = double.Parse(parts[3]),
+                                            Button = ParseMouseButton(parts[4]),
                                         });
                                     break;
                                 }
@@ -166,6 +166,20 @@ namespace Avalonia.DesignerSupport.Remote.HtmlTransport
                                         });
                                     break;
                                 }
+                            case "scroll":
+                                {
+                                    _onMessage?.Invoke(
+                                        this,
+                                        new InputProtocol.ScrollEventMessage
+                                        {
+                                            Modifiers = ParseInputModifiers(parts[1]),
+                                            X = double.Parse(parts[2]),
+                                            Y = double.Parse(parts[3]),
+                                            DeltaX = double.Parse(parts[4]),
+                                            DeltaY = double.Parse(parts[5]),
+                                        });
+                                    break;
+                                }
                         }
                     }
                 }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/FramePresenter.tsx

@@ -3,6 +3,7 @@ import {PreviewerFrame, PreviewerServerConnection} from "src/PreviewerServerConn
 import {PointerPressedEventMessage} from "src/Models/Input/PointerPressedEventMessage";
 import {PointerReleasedEventMessage} from "src/Models/Input/PointerReleasedEventMessage";
 import {PointerMovedEventMessage} from "src/Models/Input/PointerMovedEventMessage";
+import {ScrollEventMessage} from "src/Models/Input/ScrollEventMessage";
 
 interface PreviewerPresenterProps {
     conn: PreviewerServerConnection;
@@ -22,6 +23,7 @@ export class PreviewerPresenter extends React.Component<PreviewerPresenterProps>
         this.handleMouseDown = this.handleMouseDown.bind(this);
         this.handleMouseUp = this.handleMouseUp.bind(this);
         this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleWheel = this.handleWheel.bind(this);
     }
 
     componentDidMount(): void {
@@ -73,10 +75,17 @@ export class PreviewerPresenter extends React.Component<PreviewerPresenterProps>
         this.props.conn.sendMouseEvent(pointerMovedEventMessage);
     }
 
+    handleWheel(e: React.WheelEvent) {
+        e.preventDefault();
+        const scrollEventMessage = new ScrollEventMessage(e);
+        this.props.conn.sendMouseEvent(scrollEventMessage);
+    }
+
     render() {
         return <canvas ref={this.canvasRef}
                        onMouseDown={this.handleMouseDown}
                        onMouseUp={this.handleMouseUp}
-                       onMouseMove={this.handleMouseMove} />
+                       onMouseMove={this.handleMouseMove}
+                       onWheel={this.handleWheel} />
     }
 }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerEventMessageBase.ts

@@ -6,7 +6,7 @@ export abstract class PointerEventMessageBase extends InputEventMessageBase {
     public readonly y: number;
 
     protected constructor(e: React.MouseEvent) {
-        super(e)
+        super(e);
         this.x = e.clientX;
         this.y = e.clientY;
     }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerMovedEventMessage.ts

@@ -3,7 +3,7 @@ import {PointerEventMessageBase} from "src/Models/Input/PointerEventMessageBase"
 
 export class PointerMovedEventMessage extends PointerEventMessageBase {
     constructor(e: React.MouseEvent) {
-        super(e)
+        super(e);
     }
 
     public toString = () : string => {

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerPressedEventMessage.ts

@@ -7,11 +7,11 @@ export class PointerPressedEventMessage extends PointerEventMessageBase {
     public readonly button: MouseButton
 
     constructor(e: React.MouseEvent) {
-        super(e)
+        super(e);
         this.button = getMouseButton(e);
     }
 
     public toString = () : string => {
-        return `pointer-pressed:${this.modifiers}:${this.button}:${this.x}:${this.y}`;
+        return `pointer-pressed:${this.modifiers}:${this.x}:${this.y}:${this.button}`;
     }
 }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerReleasedEventMessage.ts

@@ -7,11 +7,11 @@ export class PointerReleasedEventMessage extends PointerEventMessageBase {
     public readonly button: MouseButton
 
     constructor(e: React.MouseEvent) {
-        super(e)
+        super(e);
         this.button = getMouseButton(e);
     }
 
     public toString = () : string => {
-        return `pointer-released:${this.modifiers}:${this.button}:${this.x}:${this.y}`;
+        return `pointer-released:${this.modifiers}:${this.x}:${this.y}:${this.button}`;
     }
 }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/ScrollEventMessage.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import {PointerEventMessageBase} from "src/Models/Input/PointerEventMessageBase";
+
+export class ScrollEventMessage extends PointerEventMessageBase {
+    public readonly deltaX: number;
+    public readonly deltaY: number;
+
+    constructor(e: React.WheelEvent) {
+        super(e);
+        this.deltaX = -e.deltaX;
+        this.deltaY = -e.deltaY;
+    }
+
+    public toString = () : string => {
+        return `scroll:${this.modifiers}:${this.x}:${this.y}:${this.deltaX}:${this.deltaY}`;
+    }
+}