From 851c03fa70d53675edc2693ed23299ca8c407bef Mon Sep 17 00:00:00 2001 From: Rustam Sayfutdinov Date: Mon, 10 Aug 2020 17:08:53 +0300 Subject: [PATCH] Add handling wheel --- .../Remote/HtmlTransport/HtmlTransport.cs | 26 ++++++++++++++----- .../webapp/src/FramePresenter.tsx | 11 +++++++- .../Models/Input/PointerEventMessageBase.ts | 2 +- .../Models/Input/PointerMovedEventMessage.ts | 2 +- .../Input/PointerPressedEventMessage.ts | 4 +-- .../Input/PointerReleasedEventMessage.ts | 4 +-- .../src/Models/Input/ScrollEventMessage.ts | 17 ++++++++++++ 7 files changed, 53 insertions(+), 13 deletions(-) create mode 100644 src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/ScrollEventMessage.ts diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/HtmlTransport.cs b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/HtmlTransport.cs index eb64f83d35..c32aefe308 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/HtmlTransport.cs +++ b/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; + } } } } diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/FramePresenter.tsx b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/FramePresenter.tsx index b35e611c95..5182a087e7 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/FramePresenter.tsx +++ b/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 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 this.props.conn.sendMouseEvent(pointerMovedEventMessage); } + handleWheel(e: React.WheelEvent) { + e.preventDefault(); + const scrollEventMessage = new ScrollEventMessage(e); + this.props.conn.sendMouseEvent(scrollEventMessage); + } + render() { return + onMouseMove={this.handleMouseMove} + onWheel={this.handleWheel} /> } } diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerEventMessageBase.ts b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerEventMessageBase.ts index e43362ac1c..fc304c2965 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerEventMessageBase.ts +++ b/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; } diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerMovedEventMessage.ts b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerMovedEventMessage.ts index 3ca8e91b8d..cd135dfa39 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerMovedEventMessage.ts +++ b/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 => { diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerPressedEventMessage.ts b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerPressedEventMessage.ts index 712ec64a14..e75551e0b3 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerPressedEventMessage.ts +++ b/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}`; } } diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerReleasedEventMessage.ts b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerReleasedEventMessage.ts index 46234263db..c2bc368323 100644 --- a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/PointerReleasedEventMessage.ts +++ b/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}`; } } diff --git a/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/ScrollEventMessage.ts b/src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/Models/Input/ScrollEventMessage.ts new file mode 100644 index 0000000000..427ccc5e5e --- /dev/null +++ b/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}`; + } +}