Merge pull request #9261 from AvaloniaUI/fixes/more-wasm-fixes-3

Fixes/more wasm fixes 3

samples/ControlCatalog.Web/ControlCatalog.Web.csproj

@@ -16,9 +16,8 @@
     <TrimMode>full</TrimMode>
     <WasmBuildNative>true</WasmBuildNative>
     <InvariantGlobalization>true</InvariantGlobalization>
-    <WasmEnableSIMD>true</WasmEnableSIMD>
+    <EmccCompileOptimizationFlag>-O2</EmccCompileOptimizationFlag>
-    <EmccCompileOptimizationFlag>-O3</EmccCompileOptimizationFlag>
+    <EmccLinkOptimizationFlag>-O2</EmccLinkOptimizationFlag>
-    <EmccLinkOptimizationFlag>-O3</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/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) {
+        this.requestAnimationFrame();
-            const GL = (globalThis as any).AvaloniaGL;
-            // make current
-            GL.makeContextCurrent(this.glInfo.context);
-        }
     }
 
     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;
+        callback(element.clientWidth, element.clientHeight);
-        watcherElement.SizeWatcher = {
-            callback
-        };
 
-        SizeWatcher.elements.set(elementId ?? element.id, element);
+        const handleResize = (args: UIEvent) => {
-        SizeWatcher.observer.observe(element);
+            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/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) {