Skip to content

Commit

Permalink
perf: [Wasm] Improve SetBackgroundBrush performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeromelaban
jeromelaban committed May 7, 2021
1 parent 31d0192 commit 14d996e
Show file tree
Hide file tree
Showing 9 changed files with 307 additions and 17 deletions.
6 changes: 3 additions & 3 deletions src/Uno.UI/UI/Xaml/FrameworkElement.Interface.wasm.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,15 +159,15 @@ private void SetBackgroundBrush(Brush brush)
{
case SolidColorBrush solidColorBrush:
var color = solidColorBrush.ColorWithOpacity;
SetStyle(("background-color", color.ToHexString()), ("background-image", ""));
WindowManagerInterop.SetElementBackgroundColor(HtmlId, color);
RecalculateBrushOnSizeChanged(false);
break;
case GradientBrush gradientBrush:
SetStyle(("background-color", ""), ("background-image", gradientBrush.ToCssString(RenderSize)));
WindowManagerInterop.SetElementBackgroundGradient(HtmlId, gradientBrush.ToCssString(RenderSize));
RecalculateBrushOnSizeChanged(true);
break;
default:
ResetStyle("background-color", "background-image", "background-size");
WindowManagerInterop.ResetElementBackground(HtmlId);
RecalculateBrushOnSizeChanged(false);
break;
}
Expand Down
72 changes: 67 additions & 5 deletions src/Uno.UI/UI/Xaml/WindowManagerInterop.wasm.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ private struct WindowManagerRegisterUIElementReturn
{
public int RegistrationId;
}

#endregion

#region SetElementTransform
Expand Down Expand Up @@ -831,11 +832,7 @@ private struct WindowManagerSetPropertyParams

internal static void SetElementColor(IntPtr htmlId, Color color)
{
var colorAsInteger =
(uint)(color.R << 24)
| (uint)(color.G << 16)
| (uint)(color.B << 8)
| color.A;
var colorAsInteger = color.ToCssInteger();

if (UseJavascriptEval)
{
Expand Down Expand Up @@ -1263,6 +1260,71 @@ private struct WindowManagerScrollToOptionsParams
}
#endregion

#region SetElementBackgroundColor
internal static void SetElementBackgroundColor(IntPtr htmlId, Color color)
{
var parms = new WindowManagerSetElementBackgroundColorParams
{
HtmlId = htmlId,
Color = color.ToCssInteger()
};

TSInteropMarshaller.InvokeJS("Uno:setElementBackgroundColor", parms);
}

[TSInteropMessage]
[StructLayout(LayoutKind.Sequential, Pack = 4)]
private struct WindowManagerSetElementBackgroundColorParams
{
public IntPtr HtmlId;

public uint Color;
}
#endregion

#region SetElementBackgroundColor
internal static void SetElementBackgroundGradient(IntPtr htmlId, string cssGradient)
{
var parms = new WindowManagerSetElementBackgroundGradientParams
{
HtmlId = htmlId,
CssGradient = cssGradient
};

TSInteropMarshaller.InvokeJS("Uno:setElementBackgroundGradient", parms);
}

[TSInteropMessage]
[StructLayout(LayoutKind.Sequential, Pack = 4)]
private struct WindowManagerSetElementBackgroundGradientParams
{
public IntPtr HtmlId;

[MarshalAs(TSInteropMarshaller.LPUTF8Str)]
public string CssGradient;
}
#endregion

#region SetElementBackgroundColor

internal static void ResetElementBackground(IntPtr htmlId)
{
var parms = new WindowManagerResetElementBackgroundParams
{
HtmlId = htmlId,
};

TSInteropMarshaller.InvokeJS("Uno:resetElementBackground", parms);
}

[TSInteropMessage]
[StructLayout(LayoutKind.Sequential, Pack = 4)]
private struct WindowManagerResetElementBackgroundParams
{
public IntPtr HtmlId;
}
#endregion

#region Pointers
[Flags]
internal enum HtmlPointerButtonsState
Expand Down
29 changes: 28 additions & 1 deletion src/Uno.UI/WasmScripts/Uno.UI.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,12 +318,24 @@ declare namespace Uno.UI {
private setAsArranged;
private setAsUnarranged;
/**
* Sets the visibility of the specified element
* Sets the color property of the specified element
*/
setElementColor(elementId: number, color: number): string;
setElementColorNative(pParam: number): boolean;
private setElementColorInternal;
/**
* Sets the background color property of the specified element
*/
setElementBackgroundColor(pParam: number): boolean;
/**
* Sets the background image property of the specified element
*/
setElementBackgroundGradient(pParam: number): boolean;
/**
* Clears the background property of the specified element
*/
resetElementBackground(pParam: number): boolean;
/**
* Sets the transform matrix of an element
*
*/
Expand Down Expand Up @@ -553,6 +565,7 @@ declare namespace Uno.UI {
private dispatchEvent;
private getIsConnectedToRootElement;
private handleToString;
private numberToCssColor;
setCursor(cssCursor: string): string;
getNaturalImageSize(imageUrl: string): Promise<string>;
}
Expand Down Expand Up @@ -1299,6 +1312,10 @@ declare class WindowManagerRemoveViewParams {
ChildView: number;
static unmarshal(pData: number): WindowManagerRemoveViewParams;
}
declare class WindowManagerResetElementBackgroundParams {
HtmlId: number;
static unmarshal(pData: number): WindowManagerResetElementBackgroundParams;
}
declare class WindowManagerResetStyleParams {
HtmlId: number;
Styles_Length: number;
Expand Down Expand Up @@ -1338,6 +1355,16 @@ declare class WindowManagerSetContentHtmlParams {
Html: string;
static unmarshal(pData: number): WindowManagerSetContentHtmlParams;
}
declare class WindowManagerSetElementBackgroundColorParams {
HtmlId: number;
Color: number;
static unmarshal(pData: number): WindowManagerSetElementBackgroundColorParams;
}
declare class WindowManagerSetElementBackgroundGradientParams {
HtmlId: number;
CssGradient: string;
static unmarshal(pData: number): WindowManagerSetElementBackgroundGradientParams;
}
declare class WindowManagerSetElementColorParams {
HtmlId: number;
Color: number;
Expand Down
83 changes: 81 additions & 2 deletions src/Uno.UI/WasmScripts/Uno.UI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -830,7 +830,7 @@ var Uno;
}
}
/**
* Sets the visibility of the specified element
* Sets the color property of the specified element
*/
setElementColor(elementId, color) {
this.setElementColorInternal(elementId, color);
Expand All @@ -843,7 +843,41 @@ var Uno;
}
setElementColorInternal(elementId, color) {
const element = this.getView(elementId);
element.style.setProperty("color", "#" + color.toString(16).padStart(8, '0'));
element.style.setProperty("color", this.numberToCssColor(color));
}
/**
* Sets the background color property of the specified element
*/
setElementBackgroundColor(pParam) {
const params = WindowManagerSetElementBackgroundColorParams.unmarshal(pParam);
const element = this.getView(params.HtmlId);
const style = element.style;
style.setProperty("background-color", this.numberToCssColor(params.Color));
style.removeProperty("background-image");
return true;
}
/**
* Sets the background image property of the specified element
*/
setElementBackgroundGradient(pParam) {
const params = WindowManagerSetElementBackgroundGradientParams.unmarshal(pParam);
const element = this.getView(params.HtmlId);
const style = element.style;
style.removeProperty("background-color");
style.setProperty("background-image", params.CssGradient);
return true;
}
/**
* Clears the background property of the specified element
*/
resetElementBackground(pParam) {
const params = WindowManagerResetElementBackgroundParams.unmarshal(pParam);
const element = this.getView(params.HtmlId);
const style = element.style;
style.removeProperty("background-color");
style.removeProperty("background-image");
style.removeProperty("background-size");
return true;
}
/**
* Sets the transform matrix of an element
Expand Down Expand Up @@ -1792,6 +1826,9 @@ var Uno;
// Fastest conversion as of 2020-03-25 (when compared to String(handle) or handle.toString())
return handle + "";
}
numberToCssColor(color) {
return "#" + color.toString(16).padStart(8, '0');
}
setCursor(cssCursor) {
const unoBody = document.getElementById(this.containerElementId);
if (unoBody) {
Expand Down Expand Up @@ -4631,6 +4668,16 @@ class WindowManagerRemoveViewParams {
}
}
/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
class WindowManagerResetElementBackgroundParams {
static unmarshal(pData) {
const ret = new WindowManagerResetElementBackgroundParams();
{
ret.HtmlId = Number(Module.getValue(pData + 0, "*"));
}
return ret;
}
}
/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
class WindowManagerResetStyleParams {
static unmarshal(pData) {
const ret = new WindowManagerResetStyleParams();
Expand Down Expand Up @@ -4799,6 +4846,38 @@ class WindowManagerSetContentHtmlParams {
}
}
/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
class WindowManagerSetElementBackgroundColorParams {
static unmarshal(pData) {
const ret = new WindowManagerSetElementBackgroundColorParams();
{
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 WindowManagerSetElementBackgroundGradientParams {
static unmarshal(pData) {
const ret = new WindowManagerSetElementBackgroundGradientParams();
{
ret.HtmlId = Number(Module.getValue(pData + 0, "*"));
}
{
const ptr = Module.getValue(pData + 4, "*");
if (ptr !== 0) {
ret.CssGradient = String(Module.UTF8ToString(ptr));
}
else {
ret.CssGradient = null;
}
}
return ret;
}
}
/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
class WindowManagerSetElementColorParams {
static unmarshal(pData) {
const ret = new WindowManagerSetElementColorParams();
Expand Down
53 changes: 51 additions & 2 deletions src/Uno.UI/ts/WindowManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -679,7 +679,6 @@ namespace Uno.UI {
}
}


/**
* Sets the color property of the specified element
*/
Expand All @@ -697,7 +696,53 @@ namespace Uno.UI {
private setElementColorInternal(elementId: number, color: number): void {
const element = this.getView(elementId);

element.style.setProperty("color", "#" + color.toString(16).padStart(8, '0'));
element.style.setProperty("color", this.numberToCssColor(color));
}

/**
* Sets the background color property of the specified element
*/
public setElementBackgroundColor(pParam: number): boolean {
const params = WindowManagerSetElementBackgroundColorParams.unmarshal(pParam);

const element = this.getView(params.HtmlId);
const style = element.style;

style.setProperty("background-color", this.numberToCssColor(params.Color));
style.removeProperty("background-image");

return true;
}

/**
* Sets the background image property of the specified element
*/
public setElementBackgroundGradient(pParam: number): boolean {
const params = WindowManagerSetElementBackgroundGradientParams.unmarshal(pParam);

const element = this.getView(params.HtmlId);
const style = element.style;

style.removeProperty("background-color");
style.setProperty("background-image", params.CssGradient);

return true;
}

/**
* Clears the background property of the specified element
*/
public resetElementBackground(pParam: number): boolean {
const params = WindowManagerResetElementBackgroundParams.unmarshal(pParam);

const element = this.getView(params.HtmlId);
const style = element.style;

style.removeProperty("background-color");
style.removeProperty("background-image");
style.removeProperty("background-size");

return true;
}

/**
Expand Down Expand Up @@ -1904,6 +1949,10 @@ namespace Uno.UI {
return handle + "";
}

private numberToCssColor(color: number): string {
return "#" + color.toString(16).padStart(8, '0');
}

public setCursor(cssCursor: string): string {
const unoBody = document.getElementById(this.containerElementId);

Expand Down
15 changes: 15 additions & 0 deletions src/Uno.UI/tsBindings/WindowManagerResetElementBackgroundParams.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* TSBindingsGenerator Generated code -- this code is regenerated on each build */
class WindowManagerResetElementBackgroundParams
{
/* Pack=4 */
public HtmlId : number;
public static unmarshal(pData:number) : WindowManagerResetElementBackgroundParams
{
const ret = new WindowManagerResetElementBackgroundParams();

{
ret.HtmlId = Number(Module.getValue(pData + 0, "*"));
}
return ret;
}
}
Loading

0 comments on commit 14d996e

Please sign in to comment.