perf(memory): Reduce memory pressure on shape set fill

Author: jeromelaban

src/Uno.UI/UI/Xaml/Shapes/Shape.wasm.cs

@@ -80,7 +80,7 @@ partial void OnFillUpdatedPartial()
 			switch (fill)
 			{
 				case SolidColorBrush scb:
-					svgElement.SetStyle("fill", scb.ColorWithOpacity.ToHexString());
+					Uno.UI.Xaml.WindowManagerInterop.SetElementFill(svgElement.HtmlId, scb.ColorWithOpacity);
 					_fillBrushSubscription.Disposable = null;
 					break;
 				case ImageBrush ib:

src/Uno.UI/UI/Xaml/WindowManagerInterop.wasm.cs

@@ -865,7 +865,7 @@ private struct WindowManagerSetPropertyParams
 
 		#endregion
 
-		#region SetVisibility
+		#region SetElementColor
 
 		internal static void SetElementColor(IntPtr htmlId, Color color)
 		{
@@ -898,6 +898,39 @@ private struct WindowManagerSetElementColorParams
 		}
 		#endregion
 
+		#region SetElementFill
+
+		internal static void SetElementFill(IntPtr htmlId, Color color)
+		{
+			var colorAsInteger = color.ToCssInteger();
+
+			if (UseJavascriptEval)
+			{
+				var command = $"Uno.UI.WindowManager.current.setElementFill(\"{htmlId}\", {color});";
+				WebAssemblyRuntime.InvokeJS(command);
+			}
+			else
+			{
+				var parms = new WindowManagerSetElementFillParams()
+				{
+					HtmlId = htmlId,
+					Color = colorAsInteger,
+				};
+
+				TSInteropMarshaller.InvokeJS("Uno:setElementFillNative", parms);
+			}
+		}
+
+		[TSInteropMessage]
+		[StructLayout(LayoutKind.Sequential, Pack = 4)]
+		private struct WindowManagerSetElementFillParams
+		{
+			public IntPtr HtmlId;
+
+			public uint Color;
+		}
+		#endregion
+
 		#region RemoveView
 		internal static void RemoveView(IntPtr htmlId, IntPtr childId)
 		{

src/Uno.UI/WasmScripts/Uno.UI.d.ts

@@ -339,6 +339,12 @@ declare namespace Uno.UI {
         setElementColorNative(pParam: number): boolean;
         private setElementColorInternal;
         /**
+        * Sets the fill property of the specified element
+        */
+        setElementFill(elementId: number, color: number): string;
+        setElementFillNative(pParam: number): boolean;
+        private setElementFillInternal;
+        /**
         * Sets the background color property of the specified element
         */
         setElementBackgroundColor(pParam: number): boolean;
@@ -1457,6 +1463,11 @@ declare class WindowManagerSetElementColorParams {
     Color: number;
     static unmarshal(pData: number): WindowManagerSetElementColorParams;
 }
+declare class WindowManagerSetElementFillParams {
+    HtmlId: number;
+    Color: number;
+    static unmarshal(pData: number): WindowManagerSetElementFillParams;
+}
 declare class WindowManagerSetElementTransformParams {
     HtmlId: number;
     M11: number;

src/Uno.UI/WasmScripts/Uno.UI.js

@@ -888,6 +888,22 @@ var Uno;
                 element.style.setProperty("color", this.numberToCssColor(color));
             }
             /**
+            * Sets the fill property of the specified element
+            */
+            setElementFill(elementId, color) {
+                this.setElementColorInternal(elementId, color);
+                return "ok";
+            }
+            setElementFillNative(pParam) {
+                const params = WindowManagerSetElementFillParams.unmarshal(pParam);
+                this.setElementFillInternal(params.HtmlId, params.Color);
+                return true;
+            }
+            setElementFillInternal(elementId, color) {
+                const element = this.getView(elementId);
+                element.style.setProperty("fill", this.numberToCssColor(color));
+            }
+            /**
             * Sets the background color property of the specified element
             */
             setElementBackgroundColor(pParam) {
@@ -5352,6 +5368,19 @@ class WindowManagerSetElementColorParams {
     }
 }
 /* TSBindingsGenerator Generated code -- this code is regenerated on each build */
+class WindowManagerSetElementFillParams {
+    static unmarshal(pData) {
+        const ret = new WindowManagerSetElementFillParams();
+        {
+            ret.HtmlId = Number(Module.getValue(pData + 0, "*"));
+        }
+        {
+            ret.Color = Module.HEAPU32[(pData + 4) >> 2];
+        }
+        return ret;
+    }
+}
+/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
 class WindowManagerSetElementTransformParams {
     static unmarshal(pData) {
         const ret = new WindowManagerSetElementTransformParams();

src/Uno.UI/ts/WindowManager.ts

@@ -736,6 +736,26 @@ namespace Uno.UI {
 			element.style.setProperty("color", this.numberToCssColor(color));
 		}
 
+		/**
+		* Sets the fill property of the specified element
+		*/
+		public setElementFill(elementId: number, color: number): string {
+			this.setElementColorInternal(elementId, color);
+			return "ok";
+		}
+
+		public setElementFillNative(pParam: number): boolean {
+			const params = WindowManagerSetElementFillParams.unmarshal(pParam);
+			this.setElementFillInternal(params.HtmlId, params.Color);
+			return true;
+		}
+
+		private setElementFillInternal(elementId: number, color: number): void {
+			const element = this.getView(elementId);
+
+			element.style.setProperty("fill", this.numberToCssColor(color));
+		}
+
 		/**
 		* Sets the background color property of the specified element
 		*/

src/Uno.UI/tsBindings/WindowManagerSetElementFillParams.ts

@@ -0,0 +1,20 @@
+/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
+class WindowManagerSetElementFillParams
+{
+	/* Pack=4 */
+	public HtmlId : number;
+	public Color : number;
+	public static unmarshal(pData:number) : WindowManagerSetElementFillParams
+	{
+		const ret = new WindowManagerSetElementFillParams();
+		
+		{
+			ret.HtmlId = Number(Module.getValue(pData + 0, "*"));
+		}
+		
+		{
+			ret.Color = Module.HEAPU32[(pData + 4) >> 2];
+		}
+		return ret;
+	}
+}