Add initial InputHelper

4 years ago · 4b5885fab6
7 changed files with 298 additions and 9 deletions
--- a/src/Web/Avalonia.Web.Sample/index.html
+++ b/src/Web/Avalonia.Web.Sample/index.html
@ -13,7 +13,7 @@
 </head>

 <body>
-  <div id="out"></div>
+  <div id="out" tabindex="0"></div>
  <script type='module' src="./main.js"></script>
 </body>

--- a/src/Web/Avalonia.Web/AvaloniaView.cs
+++ b/src/Web/Avalonia.Web/AvaloniaView.cs
@ -13,6 +13,8 @@ using Avalonia.Input.TextInput;
 using Avalonia.Platform.Storage;
 using Avalonia.Rendering.Composition;
 using Avalonia.Web.Blazor;
+using Avalonia.Web.Interop;
+
 using SkiaSharp;
 using static Avalonia.Web.AvaloniaRuntime;

@ -72,8 +74,10 @@ namespace Avalonia.Web

            _topLevel.Renderer.Start();

-
-            
+            InputHelper.SubscribeKeyboardEvents(
+                div,
+                (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(Input.Raw.RawKeyEventType.KeyDown, code, key, (Input.RawInputModifiers)modifier),
+                (code, key, modifier) => _topLevelImpl.RawKeyboardEvent(Input.Raw.RawKeyEventType.KeyUp, code, key, (Input.RawInputModifiers)modifier));

            //_interop = new SKHtmlCanvasInterop(_avaloniaModule, _htmlCanvas, OnRenderFrame);

--- a/src/Web/Avalonia.Web/Interop/InputHelper.cs
+++ b/src/Web/Avalonia.Web/Interop/InputHelper.cs
@ -0,0 +1,46 @@
+using System;
+using System.Runtime.InteropServices.JavaScript;
+
+namespace Avalonia.Web.Interop;
+
+internal static partial class InputHelper
+{
+    //[JSImport("InputHelper.subscribePointerEvents", "avalonia.ts")]
+    //public static partial void SubscribePointerEvents(
+    //    JSObject htmlElement,
+    //    [JSMarshalAs<JSType.Function<JSType.Number, JSType.Number, JSType.Number, JSType.Number, JSType.Number, JSType.Boolean>>]
+    //            Func<double, double, double, double, int, bool> wheel);
+
+    [JSImport("InputHelper.subscribeKeyboardEvents", "avalonia.ts")]
+    public static partial void SubscribeKeyboardEvents(
+        JSObject htmlElement,
+        [JSMarshalAs<JSType.Function<JSType.String, JSType.String, JSType.Number, JSType.Boolean>>]
+        Func<string, string, int, bool> keyDown,
+        [JSMarshalAs<JSType.Function<JSType.String, JSType.String, JSType.Number, JSType.Boolean>>]
+        Func<string, string, int, bool> keyUp);
+
+    [JSImport("InputHelper.subscribeInputEvents", "avalonia.ts")]
+    public static partial void SubscribeInputEvents(
+        JSObject htmlElement,
+        [JSMarshalAs<JSType.Function<JSType.String, JSType.Boolean>>]
+        Func<string, bool> input);
+
+
+    [JSImport("InputHelper.clearInput", "avalonia.ts")]
+    public static partial void ClearInputElement(JSObject htmlElement);
+
+    [JSImport("InputHelper.isInputElement", "avalonia.ts")]
+    public static partial void IsInputElement(JSObject htmlElement);
+
+    [JSImport("InputHelper.focusElement", "avalonia.ts")]
+    public static partial void FocusElement(JSObject htmlElement);
+
+    [JSImport("InputHelper.setCursor", "avalonia.ts")]
+    public static partial void SetCursor(JSObject htmlElement, string kind);
+
+    [JSImport("InputHelper.hide", "avalonia.ts")]
+    public static partial void HideElement(JSObject htmlElement);
+
+    [JSImport("InputHelper.show", "avalonia.ts")]
+    public static partial void ShowElement(JSObject htmlElement);
+}
--- a/src/Web/Avalonia.Web/Keycodes.cs
+++ b/src/Web/Avalonia.Web/Keycodes.cs
@ -0,0 +1,129 @@
+using System.Collections.Generic;
+
+using Avalonia.Input;
+
+namespace Avalonia.Web
+{
+    internal static class Keycodes
+    {
+        public static Dictionary<string, Key> KeyCodes = new()
+        {
+            { "Escape", Key.Escape },
+            { "Digit1", Key.D1 },
+            { "Digit2", Key.D2 },
+            { "Digit3", Key.D3 },
+            { "Digit4", Key.D4 },
+            { "Digit5", Key.D5 },
+            { "Digit6", Key.D6 },
+            { "Digit7", Key.D7 },
+            { "Digit8", Key.D8 },
+            { "Digit9", Key.D9 },
+            { "Digit0", Key.D0 },
+            { "Minus", Key.OemMinus },
+            //{	"Equal"	, Key. },
+            { "Backspace", Key.Back },
+            { "Tab", Key.Tab },
+            { "KeyQ", Key.Q },
+            { "KeyW", Key.W },
+            { "KeyE", Key.E },
+            { "KeyR", Key.R },
+            { "KeyT", Key.T },
+            { "KeyY", Key.Y },
+            { "KeyU", Key.U },
+            { "KeyI", Key.I },
+            { "KeyO", Key.O },
+            { "KeyP", Key.P },
+            { "BracketLeft", Key.OemOpenBrackets },
+            { "BracketRight", Key.OemCloseBrackets },
+            { "Enter", Key.Enter },
+            { "ControlLeft", Key.LeftCtrl },
+            { "KeyA", Key.A },
+            { "KeyS", Key.S },
+            { "KeyD", Key.D },
+            { "KeyF", Key.F },
+            { "KeyG", Key.G },
+            { "KeyH", Key.H },
+            { "KeyJ", Key.J },
+            { "KeyK", Key.K },
+            { "KeyL", Key.L },
+            { "Semicolon", Key.OemSemicolon },
+            { "Quote", Key.OemQuotes },
+            //{	"Backquote"	, Key. },
+            { "ShiftLeft", Key.LeftShift },
+            { "Backslash", Key.OemBackslash },
+            { "KeyZ", Key.Z },
+            { "KeyX", Key.X },
+            { "KeyC", Key.C },
+            { "KeyV", Key.V },
+            { "KeyB", Key.B },
+            { "KeyN", Key.N },
+            { "KeyM", Key.M },
+            { "Comma", Key.OemComma },
+            { "Period", Key.OemPeriod },
+            //{	"Slash"	, Key. },
+            { "ShiftRight", Key.RightShift },
+            { "NumpadMultiply", Key.Multiply },
+            { "AltLeft", Key.LeftAlt },
+            { "Space", Key.Space },
+            { "CapsLock", Key.CapsLock },
+            { "F1", Key.F1 },
+            { "F2", Key.F2 },
+            { "F3", Key.F3 },
+            { "F4", Key.F4 },
+            { "F5", Key.F5 },
+            { "F6", Key.F6 },
+            { "F7", Key.F7 },
+            { "F8", Key.F8 },
+            { "F9", Key.F9 },
+            { "F10", Key.F10 },
+            { "NumLock", Key.NumLock },
+            { "ScrollLock", Key.Scroll },
+            { "Numpad7", Key.NumPad7 },
+            { "Numpad8", Key.NumPad8 },
+            { "Numpad9", Key.NumPad9 },
+            { "NumpadSubtract", Key.Subtract },
+            { "Numpad4", Key.NumPad4 },
+            { "Numpad5", Key.NumPad5 },
+            { "Numpad6", Key.NumPad6 },
+            { "NumpadAdd", Key.Add },
+            { "Numpad1", Key.NumPad1 },
+            { "Numpad2", Key.NumPad2 },
+            { "Numpad3", Key.NumPad3 },
+            { "Numpad0", Key.NumPad0 },
+            { "NumpadDecimal", Key.Decimal },
+            { "Unidentified", Key.NoName },
+            //{	"IntlBackslash"	, Key.bac },
+            { "F11", Key.F11 },
+            { "F12", Key.F12 },
+            //{	"IntlRo"	, Key.Ro },
+            //{	"Unidentified"	, Key. },
+            { "Convert", Key.ImeConvert },
+            { "KanaMode", Key.KanaMode },
+            { "NonConvert", Key.ImeNonConvert },
+            //{	"Unidentified"	, Key. },
+            { "NumpadEnter", Key.Enter },
+            { "ControlRight", Key.RightCtrl },
+            { "NumpadDivide", Key.Divide },
+            { "PrintScreen", Key.PrintScreen },
+            { "AltRight", Key.RightAlt },
+            //{	"Unidentified"	, Key. },
+            { "Home", Key.Home },
+            { "ArrowUp", Key.Up },
+            { "PageUp", Key.PageUp },
+            { "ArrowLeft", Key.Left },
+            { "ArrowRight", Key.Right },
+            { "End", Key.End },
+            { "ArrowDown", Key.Down },
+            { "PageDown", Key.PageDown },
+            { "Insert", Key.Insert },
+            { "Delete", Key.Delete },
+            //{	"Unidentified"	, Key. },
+            { "AudioVolumeMute", Key.VolumeMute },
+            { "AudioVolumeDown", Key.VolumeDown },
+            { "AudioVolumeUp", Key.VolumeUp },
+            //{	"NumpadEqual"	, Key. },
+            { "Pause", Key.Pause },
+            { "NumpadComma", Key.OemComma }
+        };
+    }
+}
--- a/src/Web/Avalonia.Web/RazorViewTopLevelImpl.cs
+++ b/src/Web/Avalonia.Web/RazorViewTopLevelImpl.cs
@ -110,14 +110,15 @@ namespace Avalonia.Web.Blazor

        public bool RawKeyboardEvent(RawKeyEventType type, string code, string key, RawInputModifiers modifiers)
        {
-            /*if (Keycodes.KeyCodes.TryGetValue(code, out var avkey))
+            Console.WriteLine($"{type} {code} {key} {modifiers}");
+            if (Keycodes.KeyCodes.TryGetValue(code, out var avkey))
            {
                if (_inputRoot is { })
                {
                    var args = new RawKeyEventArgs(KeyboardDevice, Timestamp, _inputRoot, type, avkey, modifiers);
-                    
+
                    Input?.Invoke(args);
-                    
+
                    return args.Handled;
                }
            }
@ -126,12 +127,12 @@ namespace Avalonia.Web.Blazor
                if (_inputRoot is { })
                {
                    var args = new RawKeyEventArgs(KeyboardDevice, Timestamp, _inputRoot, type, avkey, modifiers);
-                    
+
                    Input?.Invoke(args);

                    return args.Handled;
                }
-            }*/
+            }

            return false;
        }
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts
@ -0,0 +1,107 @@
+enum RawInputModifiers
+{
+    None = 0,
+    Alt = 1,
+    Control = 2,
+    Shift = 4,
+    Meta = 8,
+
+    LeftMouseButton = 16,
+    RightMouseButton = 32,
+    MiddleMouseButton = 64,
+    XButton1MouseButton = 128,
+    XButton2MouseButton = 256,
+    KeyboardMask = Alt | Control | Shift | Meta,
+
+    PenInverted = 512,
+    PenEraser = 1024,
+    PenBarrelButton = 2048
+}
+
+export class InputHelper {
+    public static subscribeKeyboardEvents(
+        element: HTMLInputElement,
+        keyDownCallback: (code: string, key: string, modifiers: RawInputModifiers) => boolean,
+        keyUpCallback: (code: string, key: string, modifiers: RawInputModifiers) => boolean,
+    ) {
+        const keyDownHandler = (args: Event) => {
+            const keyArgs = <KeyboardEvent>args;
+            if (keyDownCallback(keyArgs.code, keyArgs.key, this.getModifiers(keyArgs))) {
+                args.preventDefault();
+            }
+        };
+        element.addEventListener("keydown", keyDownHandler);
+
+        const keyUpHandler = (args: Event) => {
+            const keyArgs = <KeyboardEvent>args;
+            if (keyUpCallback(keyArgs.code, keyArgs.key, this.getModifiers(keyArgs))) {
+                args.preventDefault();
+            }
+        };
+        element.addEventListener("keyup", keyUpHandler);
+
+        return () => {
+            element.removeEventListener("keydown", keyDownHandler);
+            element.removeEventListener("keyup", keyUpHandler);
+        };
+    }
+    
+    public static subscribeInputEvents(
+        element: HTMLInputElement,
+        inputCallback: (value: string) => boolean
+    ) {
+        const inputHandler = (args: Event) => {
+            if (inputCallback((args as any).value)) {
+                args.preventDefault();
+            }
+        };
+        element.addEventListener("input", inputHandler);
+
+        return () => {
+            element.removeEventListener("input", inputHandler);
+        };
+    }
+
+    public static clearInput(inputElement: HTMLInputElement) {
+        inputElement.value = "";
+    }
+
+    public static isInputElement(element: HTMLInputElement | HTMLElement): element is HTMLInputElement {
+        return (element as HTMLInputElement).setSelectionRange !== undefined;
+    }
+
+    public static focusElement(inputElement: HTMLElement) {
+        inputElement.focus();
+
+        if (this.isInputElement(inputElement)) {
+            (inputElement as HTMLInputElement).setSelectionRange(0, 0);
+        }
+    }
+
+    public static setCursor(inputElement: HTMLInputElement, kind: string) {
+        inputElement.style.cursor = kind;
+    }
+
+    public static hide(inputElement: HTMLInputElement) {
+        inputElement.style.display = 'none';
+    }
+
+    public static show(inputElement: HTMLInputElement) {
+        inputElement.style.display = 'block';
+    }
+
+    private static getModifiers(args: KeyboardEvent): RawInputModifiers {
+        var modifiers = RawInputModifiers.None;
+
+        if (args.ctrlKey)
+            modifiers |= RawInputModifiers.Control;
+        if (args.altKey)
+            modifiers |= RawInputModifiers.Alt;
+        if (args.shiftKey)
+            modifiers |= RawInputModifiers.Shift;
+        if (args.metaKey)
+            modifiers |= RawInputModifiers.Meta;
+
+        return modifiers;
+    }
+}
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/runtime.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/runtime.ts
@ -1,6 +1,7 @@
 import { RuntimeAPI } from "../../types/dotnet";

 import { Canvas } from "./canvas";
+import { InputHelper } from "./input";

 export class AvaloniaRuntime {
    constructor(
@ -8,7 +9,8 @@ export class AvaloniaRuntime {
        api: RuntimeAPI
    ) {
        api.setModuleImports("avalonia.ts", {
-            Canvas
+            Canvas,
+            InputHelper
        });
    }
 }