move input interop code to component.

samples/ControlCatalog.Web/wwwroot/index.html

@@ -20,31 +20,4 @@
     <script src="js/app.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
-
-<script>
-    clearInput = () => {
-        document.getElementById("inputBox").value = "";
-    }
-    
-    focusInput = () => {
-        document.getElementById("inputBox").focus();
-    }
-    
-    finishInput = () => {
-        document.getElementById("container").focus();
-    };
-    
-    setCursor = (kind) => {
-        document.getElementById("inputBox").style.cursor = kind;  
-    };
-
-    hideInput = () => {
-        document.getElementById('inputBox').style.display = 'none';
-    };
-
-    showInput = () => {
-        document.getElementById('inputBox').style.display = 'block';
-    };
-</script>
-
 </html>

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor

@@ -8,8 +8,8 @@
     
     <canvas @ref="_htmlCanvas" @attributes="AdditionalAttributes"/>
     
-    <input id="inputBox"
+    <input @ref="_inputElement"
            class="overlay"
            type="text"
            oninput="@OnInput"/>
-</div>
+</div>

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor.cs

@@ -21,7 +21,9 @@ namespace Avalonia.Web.Blazor
         private SizeWatcherInterop _sizeWatcher = null!;
         private DpiWatcherInterop _dpiWatcher = null!;
         private SKHtmlCanvasInterop.GLInfo _jsGlInfo = null!;
+        private InputHelperInterop _inputHelper = null!;
         private ElementReference _htmlCanvas;
+        private ElementReference _inputElement;
         private double _dpi;
         private SKSize _canvasSize;
 
@@ -42,7 +44,9 @@ namespace Avalonia.Web.Blazor
             if (Application.Current.ApplicationLifetime is ISingleViewApplicationLifetime lifetime)
             {
                 _topLevel.Content = lifetime.MainView;
-            };
+            }
+
+            ;
         }
 
         void OnMouseMove(MouseEventArgs e)
@@ -112,13 +116,13 @@ namespace Avalonia.Web.Blazor
                 modifiers |= RawInputModifiers.Shift;
             if (e.MetaKey)
                 modifiers |= RawInputModifiers.Meta;
-            
+
             if ((e.Buttons & 1L) == 1)
                 modifiers |= RawInputModifiers.LeftMouseButton;
-            
+
             if ((e.Buttons & 2L) == 2)
                 modifiers |= RawInputModifiers.RightMouseButton;
-            
+
             if ((e.Buttons & 4L) == 4)
                 modifiers |= RawInputModifiers.MiddleMouseButton;
 
@@ -140,10 +144,10 @@ namespace Avalonia.Web.Blazor
 
             if ((e.Buttons & 1L) == 1)
                 modifiers |= RawInputModifiers.LeftMouseButton;
-            
+
             if ((e.Buttons & 2L) == 2)
                 modifiers |= RawInputModifiers.RightMouseButton;
-            
+
             if ((e.Buttons & 4L) == 4)
                 modifiers |= RawInputModifiers.MiddleMouseButton;
 
@@ -180,22 +184,22 @@ namespace Avalonia.Web.Blazor
         {
             _topLevelImpl.RawTextEvent(e.Value.ToString());
 
-            Js.InvokeVoidAsync("clearInput");
+            _inputHelper.Clear();
         }
 
         [Parameter(CaptureUnmatchedValues = true)]
         public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
 
-
-
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
                 Threading.Dispatcher.UIThread.Post(async () =>
                 {
-                    await Js.InvokeVoidAsync("hideInput");
-                    await Js.InvokeVoidAsync("setCursor", "default");
+                    _inputHelper = await InputHelperInterop.ImportAsync(Js, _inputElement);
+
+                    _inputHelper.Hide();
+                    _inputHelper.SetCursor("default");
 
                     Console.WriteLine("starting html canvas setup");
                     _interop = await SKHtmlCanvasInterop.ImportAsync(Js, _htmlCanvas, OnRenderFrame);
@@ -288,16 +292,16 @@ namespace Avalonia.Web.Blazor
         {
             Console.WriteLine($"focus input box. {active}");
 
-            Js.InvokeVoidAsync("clearInput");
+            _inputHelper.Clear();
 
             if (active)
             {
-                Js.InvokeVoidAsync("showInput");
-                Js.InvokeVoidAsync("focusInput");
+                _inputHelper.Show();
+                _inputHelper.Focus();
             }
             else
             {
-                Js.InvokeVoidAsync("hideInput");
+                _inputHelper.Hide();
             }
         }
 
@@ -314,7 +318,8 @@ namespace Avalonia.Web.Blazor
         public void Reset()
         {
             Console.WriteLine("reset");
-            Js.InvokeVoidAsync("clearInput");
+
+            _inputHelper.Clear();
         }
     }
 }

src/Web/Avalonia.Web.Blazor/Interop/InputHelperInterop.cs

@@ -0,0 +1,42 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using SkiaSharp;
+
+namespace Avalonia.Web.Blazor.Interop
+{
+    internal class InputHelperInterop : JSModuleInterop
+    {
+        private const string JsFilename = "./_content/Avalonia.Web.Blazor/InputHelper.js";
+        private const string InitSymbol = "InputHelper.init";
+        private const string ClearSymbol = "InputHelper.clear";
+        private const string FocusSymbol = "InputHelper.focus";
+        private const string SetCursorSymbol = "InputHelper.setCursor";
+        private const string HideSymbol = "InputHelper.hide";
+        private const string ShowSymbol = "InputHelper.show";
+
+        private readonly ElementReference inputElement;
+
+        public static async Task<InputHelperInterop> ImportAsync(IJSRuntime js, ElementReference element)
+        {
+            var interop = new InputHelperInterop(js, element);
+            await interop.ImportAsync();
+            return interop;
+        }
+
+        public InputHelperInterop(IJSRuntime js, ElementReference element)
+            : base(js, JsFilename)
+        {
+            inputElement = element;
+        }
+
+        public void Clear() => Invoke(ClearSymbol, inputElement);
+
+        public void Focus() => Invoke(FocusSymbol, inputElement);
+
+        public void SetCursor(string kind) => Invoke(SetCursorSymbol, inputElement, kind);
+
+        public void Hide() => Invoke(HideSymbol, inputElement);
+
+        public void Show() => Invoke(ShowSymbol, inputElement);
+    }
+}

src/Web/Avalonia.Web.Blazor/Interop/Typescript/InputHelper.ts

@@ -0,0 +1,22 @@
+
+export class InputHelper {
+    public static clear (inputElement: HTMLInputElement){
+        inputElement.value = "";
+    }
+    
+    public static focus (inputElement: HTMLInputElement){
+        inputElement.focus();
+    }
+    
+    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';
+    }
+}