Merge branch 'master' into master

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/Avalonia.Base/Media/PathMarkupParser.cs

@@ -188,7 +188,7 @@ namespace Avalonia.Media
             _isOpen = true;
         }
 
-        private void SetFillRule(ref ReadOnlySpan<char> span)
+        private void SetFillRule(scoped ref ReadOnlySpan<char> span)
         {
             ThrowIfDisposed();
 
@@ -452,7 +452,7 @@ namespace Avalonia.Media
             return !span.IsEmpty && (span[0] == ',' || span[0] == '-' || span[0] == '.' || char.IsDigit(span[0]));
         }
 
-        private static bool ReadArgument(ref ReadOnlySpan<char> remaining, out ReadOnlySpan<char> argument)
+        private static bool ReadArgument(scoped ref ReadOnlySpan<char> remaining, out ReadOnlySpan<char> argument)
         {
             remaining = SkipWhitespace(remaining);
             if (remaining.IsEmpty)

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();
@@ -254,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/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

@@ -24,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";
@@ -34,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) {