smooth resizing wasm.

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/webapp/modules/avalonia/canvas.ts

@@ -210,23 +210,23 @@ 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();
+        callback(element.clientWidth, element.clientHeight);
 
-        const watcherElement = element as SizeWatcherElement;
-        watcherElement.SizeWatcher = {
-            callback
+        const handleResize = (args: UIEvent) => {
+            if (Date.now() - this.lastMove > 33) {
+                callback(element.clientWidth, element.clientHeight);
+                SizeWatcher.lastMove = Date.now();
+            }
         };
 
-        SizeWatcher.elements.set(elementId ?? element.id, element);
-        SizeWatcher.observer.observe(element);
-
-        SizeWatcher.invoke(element);
+        window.addEventListener("resize", handleResize);
     }
 
     public static unobserve(elementId: string): void {

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

@@ -159,10 +159,9 @@ export class InputHelper {
     }
 
     public static setCursor(inputElement: HTMLInputElement, kind: string) {
-        if(kind == "pointer"){
+        if (kind === "pointer") {
             inputElement.style.removeProperty("cursor");
-        }
-        else {
+        } else {
             inputElement.style.cursor = kind;
         }
     }