Add handling mouse events in webapp

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

@@ -1,5 +1,8 @@
-import {PreviewerFrame, PreviewerServerConnection} from "src/PreviewerServerConnection";
 import * as React from "react";
+import {PreviewerFrame, PreviewerServerConnection} from "src/PreviewerServerConnection";
+import {PointerPressedEventMessage} from "src/Models/Input/PointerPressedEventMessage";
+import {PointerReleasedEventMessage} from "src/Models/Input/PointerReleasedEventMessage";
+import {PointerMovedEventMessage} from "src/Models/Input/PointerMovedEventMessage";
 
 interface PreviewerPresenterProps {
     conn: PreviewerServerConnection;
@@ -51,7 +54,25 @@ export class PreviewerPresenter extends React.Component<PreviewerPresenterProps>
         }
     }
 
+    handleMouseDown(e: React.MouseEvent) {
+        const pointerPressedEventMessage = new PointerPressedEventMessage(e);
+        // TODO: Send message to server
+    }
+
+    handleMouseUp(e: React.MouseEvent) {
+        const pointerReleasedEventMessage = new PointerReleasedEventMessage(e);
+        // TODO: Send message to server
+    }
+
+    handleMouseMove(e: React.MouseEvent) {
+        const pointerMovedEventMessage = new PointerMovedEventMessage(e);
+        // TODO: Send message to server
+    }
+
     render() {
-        return <canvas ref={this.canvasRef}/>
+        return <canvas ref={this.canvasRef}
+                       onMouseDown={this.handleMouseDown}
+                       onMouseUp={this.handleMouseUp}
+                       onMouseMove={this.handleMouseMove} />
     }
 }

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import {InputModifiers} from "src/Models/Input/InputModifiers";
+import {getModifiers} from "src/Models/Input/MouseEventHelpers";
+
+export abstract class InputEventMessageBase {
+    public readonly modifiers : Array<InputModifiers>;
+
+    protected constructor(e: React.MouseEvent) {
+        this.modifiers = getModifiers(e);
+    }
+}

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

@@ -0,0 +1,9 @@
+export enum InputModifiers {
+    Alt,
+    Control,
+    Shift,
+    Windows,
+    LeftMouseButton,
+    RightMouseButton,
+    MiddleMouseButton,
+}

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

@@ -0,0 +1,6 @@
+export enum MouseButton {
+    None,
+    Left,
+    Right,
+    Middle,
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {InputModifiers} from "src/Models/Input/InputModifiers";
+import {MouseButton} from "src/Models/Input/MouseButton";
+
+export function getModifiers(e: React.MouseEvent): Array<InputModifiers> {
+
+    let modifiers : Array<InputModifiers> = [];
+
+    if (e.altKey)
+        modifiers.push(InputModifiers.Alt);
+    if (e.ctrlKey)
+        modifiers.push(InputModifiers.Control);
+    if (e.shiftKey)
+        modifiers.push(InputModifiers.Shift);
+    if (e.metaKey)
+        modifiers.push(InputModifiers.Windows);
+    if ((e.buttons & 1) != 0)
+        modifiers.push(InputModifiers.LeftMouseButton);
+    if ((e.buttons & 2) != 0)
+        modifiers.push(InputModifiers.RightMouseButton);
+    if ((e.buttons & 4) != 0)
+        modifiers.push(InputModifiers.MiddleMouseButton);
+
+    return modifiers;
+}
+
+export function getMouseButton(e: React.MouseEvent) : MouseButton {
+    if (e.button == 1) {
+        return MouseButton.Left;
+    } else if (e.button == 2) {
+        return MouseButton.Right;
+    } else if (e.button == 4) {
+        return MouseButton.Middle
+    } else {
+        return MouseButton.None;
+    }
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import {InputEventMessageBase} from "src/Models/Input/InputEventMessageBase";
+
+export abstract class PointerEventMessageBase extends InputEventMessageBase {
+    public readonly x: number;
+    public readonly y: number;
+
+    protected constructor(e: React.MouseEvent) {
+        super(e)
+        this.x = e.clientX;
+        this.y = e.clientY;
+    }
+}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {PointerEventMessageBase} from "src/Models/Input/PointerEventMessageBase";
+
+export class PointerMovedEventMessage extends PointerEventMessageBase {
+    constructor(e: React.MouseEvent) {
+        super(e)
+    }
+
+    public toString = () : string => {
+        return `pointer-moved:${this.modifiers}:${this.x}:${this.y}`;
+    }
+}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import {PointerEventMessageBase} from "src/Models/Input/PointerEventMessageBase";
+import {MouseButton} from "src/Models/Input/MouseButton";
+import {getMouseButton} from "src/Models/Input/MouseEventHelpers";
+
+export class PointerPressedEventMessage extends PointerEventMessageBase {
+    public readonly button: MouseButton
+
+    constructor(e: React.MouseEvent) {
+        super(e)
+        this.button = getMouseButton(e);
+    }
+
+    public toString = () : string => {
+        return `pointer-pressed:${this.modifiers}:${this.button}:${this.x}:${this.y}`;
+    }
+}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import {PointerEventMessageBase} from "src/Models/Input/PointerEventMessageBase";
+import {MouseButton} from "src/Models/Input/MouseButton";
+import {getMouseButton} from "src/Models/Input/MouseEventHelpers";
+
+export class PointerReleasedEventMessage extends PointerEventMessageBase {
+    public readonly button: MouseButton
+
+    constructor(e: React.MouseEvent) {
+        super(e)
+        this.button = getMouseButton(e);
+    }
+
+    public toString = () : string => {
+        return `pointer-released:${this.modifiers}:${this.button}:${this.x}:${this.y}`;
+    }
+}