Merge branch 'master' into fixes/Issue_9182

samples/ControlCatalog.Web/ControlCatalog.Web.csproj

@@ -16,9 +16,8 @@
     <TrimMode>full</TrimMode>
     <WasmBuildNative>true</WasmBuildNative>
     <InvariantGlobalization>true</InvariantGlobalization>
-    <WasmEnableSIMD>true</WasmEnableSIMD>
-    <EmccCompileOptimizationFlag>-O3</EmccCompileOptimizationFlag>
-    <EmccLinkOptimizationFlag>-O3</EmccLinkOptimizationFlag>
+    <EmccCompileOptimizationFlag>-O2</EmccCompileOptimizationFlag>
+    <EmccLinkOptimizationFlag>-O2</EmccLinkOptimizationFlag>
   </PropertyGroup>
 
   <ItemGroup>

samples/ControlCatalog.Web/Roots.xml

@@ -3,4 +3,5 @@
   <assembly fullname="ControlCatalog.Web" preserve="All" />
   <assembly fullname="Avalonia.Themes.Fluent" preserve="All" />
   <assembly fullname="Avalonia.Themes.Simple" preserve="All" />
+  <assembly fullname="Avalonia.Controls.ColorPicker" preserve="All" />
 </linker>

src/Web/Avalonia.Web/AvaloniaView.cs

@@ -77,8 +77,7 @@ namespace Avalonia.Web
 
             _topLevelImpl.SetCssCursor = (cursor) =>
             {
-                InputHelper.SetCursor(_containerElement, cursor); // macOS
-                InputHelper.SetCursor(_canvas, cursor); // windows
+                InputHelper.SetCursor(_containerElement, cursor);
             };
 
             _topLevel.Prepare();
@@ -136,6 +135,8 @@ namespace Avalonia.Web
             DomHelper.ObserveSize(host, null, OnSizeChanged);
 
             CanvasHelper.RequestAnimationFrame(_canvas, true);
+            
+            InputHelper.FocusElement(_containerElement);
         }
 
         private static RawPointerPoint ExtractRawPointerFromJSArgs(JSObject args)
@@ -252,7 +253,14 @@ namespace Avalonia.Web
 
         private bool OnKeyDown (string code, string key, int modifier)
         {
-            return _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier);
+            var handled = _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier);
+
+            if (!handled && key.Length == 1)
+            {
+                handled = _topLevelImpl.RawTextEvent(key);
+            }
+
+            return handled;
         }
 
         private bool OnKeyUp(string code, string key, int modifier)

src/Web/Avalonia.Web/webapp/build.js

@@ -5,7 +5,7 @@ require("esbuild").build({
     ],
     outdir: "../wwwroot",
     bundle: true,
-    minify: false,
+    minify: true,
     format: "esm",
     target: "es2016",
     platform: "browser",

src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts

@@ -106,12 +106,6 @@ export class Canvas {
 
         // add the draw to the next frame
         this.renderLoopRequest = window.requestAnimationFrame(() => {
-            if (this.glInfo) {
-                const GL = (globalThis as any).AvaloniaGL;
-                // make current
-                GL.makeContextCurrent(this.glInfo.context);
-            }
-
             if (this.htmlCanvas.width !== this.newWidth) {
                 this.htmlCanvas.width = this.newWidth ?? 0;
             }
@@ -131,6 +125,11 @@ export class Canvas {
     }
 
     public setCanvasSize(width: number, height: number): void {
+        if (this.renderLoopRequest !== 0) {
+            window.cancelAnimationFrame(this.renderLoopRequest);
+            this.renderLoopRequest = 0;
+        }
+
         this.newWidth = width;
         this.newHeight = height;
 
@@ -142,11 +141,7 @@ export class Canvas {
             this.htmlCanvas.height = this.newHeight;
         }
 
-        if (this.glInfo) {
-            const GL = (globalThis as any).AvaloniaGL;
-            // make current
-            GL.makeContextCurrent(this.glInfo.context);
-        }
+        this.requestAnimationFrame();
     }
 
     public static setCanvasSize(element: HTMLCanvasElement, width: number, height: number): void {
@@ -210,23 +205,25 @@ interface SizeWatcherInstance {
 export class SizeWatcher {
     static observer: ResizeObserver;
     static elements: Map<string, HTMLElement>;
+    private static lastMove: number;
 
     public static observe(element: HTMLElement, elementId: string | undefined, callback: (width: number, height: number) => void): void {
         if (!element || !callback) {
             return;
         }
 
-        SizeWatcher.init();
+        SizeWatcher.lastMove = Date.now();
 
-        const watcherElement = element as SizeWatcherElement;
-        watcherElement.SizeWatcher = {
-            callback
-        };
+        callback(element.clientWidth, element.clientHeight);
 
-        SizeWatcher.elements.set(elementId ?? element.id, element);
-        SizeWatcher.observer.observe(element);
+        const handleResize = (args: UIEvent) => {
+            if (Date.now() - SizeWatcher.lastMove > 33) {
+                callback(element.clientWidth, element.clientHeight);
+                SizeWatcher.lastMove = Date.now();
+            }
+        };
 
-        SizeWatcher.invoke(element);
+        window.addEventListener("resize", handleResize);
     }
 
     public static unobserve(elementId: string): void {

src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts

@@ -11,6 +11,7 @@ export class AvaloniaDOM {
         host.tabIndex = 0;
         host.oncontextmenu = function () { return false; };
         host.style.overflow = "hidden";
+        host.style.touchAction = "none";
 
         // Rendering target canvas
         const canvas = document.createElement("canvas");
@@ -23,7 +24,7 @@ export class AvaloniaDOM {
 
         // Native controls host
         const nativeHost = document.createElement("div");
-        canvas.id = `nativeHost${randomIdPart}`;
+        nativeHost.id = `nativeHost${randomIdPart}`;
         nativeHost.classList.add("avalonia-native-host");
         nativeHost.style.left = "0px";
         nativeHost.style.top = "0px";
@@ -33,7 +34,7 @@ export class AvaloniaDOM {
 
         // IME
         const inputElement = document.createElement("input");
-        canvas.id = `input${randomIdPart}`;
+        inputElement.id = `inputElement${randomIdPart}`;
         inputElement.classList.add("avalonia-input-element");
         inputElement.autocapitalize = "none";
         inputElement.type = "text";

src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts

@@ -159,7 +159,11 @@ export class InputHelper {
     }
 
     public static setCursor(inputElement: HTMLInputElement, kind: string) {
-        inputElement.style.cursor = kind;
+        if (kind === "pointer") {
+            inputElement.style.removeProperty("cursor");
+        } else {
+            inputElement.style.cursor = kind;
+        }
     }
 
     public static setBounds(inputElement: HTMLInputElement, x: number, y: number, caretWidth: number, caretHeight: number, caret: number) {