From 7d3fb56def330fbde407b81853e2a4db255e4ef3 Mon Sep 17 00:00:00 2001 From: Rossen Hristov Date: Mon, 27 Jun 2016 09:41:53 +0300 Subject: [PATCH] Move border properties to Background to avoid unnecessary refreshes. --- tns-core-modules/ui/core/view.android.ts | 16 ++-- .../ui/styling/background-common.ts | 64 +++++++++++--- tns-core-modules/ui/styling/background.d.ts | 18 +++- tns-core-modules/ui/styling/style.ts | 86 +++++++++++++------ 4 files changed, 129 insertions(+), 55 deletions(-) diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts index 1061e0d76..d87698ead 100644 --- a/tns-core-modules/ui/core/view.android.ts +++ b/tns-core-modules/ui/core/view.android.ts @@ -455,11 +455,11 @@ export class CustomLayoutView extends View implements viewDefinition.CustomLayou export class ViewStyler implements style.Styler { // Background and borders methods - private static setBackgroundBorderProperty(view: View, newValue: any, defaultValue?: any) { + private static setBackgroundAndBorder(view: View, newValue: any, defaultValue?: any) { background.ad.onBackgroundOrBorderPropertyChanged(view); } - private static resetBackgroundBorderProperty(view: View, nativeValue: any) { + private static resetBackgroundAndBorder(view: View, nativeValue: any) { background.ad.onBackgroundOrBorderPropertyChanged(view); } @@ -705,15 +705,11 @@ export class ViewStyler implements style.Styler { // Use the same handler for all background/border properties // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged - var borderHandler = new style.StylePropertyChangedHandler( - ViewStyler.setBackgroundBorderProperty, - ViewStyler.resetBackgroundBorderProperty); + var backgroundAndBorderHandler = new style.StylePropertyChangedHandler( + ViewStyler.setBackgroundAndBorder, + ViewStyler.resetBackgroundAndBorder); - style.registerHandler(style.backgroundInternalProperty, borderHandler); - style.registerHandler(style.borderWidthProperty, borderHandler); - style.registerHandler(style.borderColorProperty, borderHandler); - style.registerHandler(style.borderRadiusProperty, borderHandler); - style.registerHandler(style.clipPathProperty, borderHandler); + style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler); style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler( ViewStyler.setNativeLayoutParamsProperty, diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts index 228260930..c20d95244 100644 --- a/tns-core-modules/ui/styling/background-common.ts +++ b/tns-core-modules/ui/styling/background-common.ts @@ -21,46 +21,74 @@ interface CSSValue { } export class Background implements definition.Background { - public static default = new Background(undefined, undefined, undefined, undefined, undefined); + public static default = new Background(undefined, undefined, undefined, undefined, undefined, 0, undefined, 0, undefined); color: colorModule.Color; image: imageSource.ImageSource; repeat: string; position: string; size: string; + borderWidth: number = 0; + borderColor: colorModule.Color; + borderRadius: number = 0; + clipPath: string; constructor( color: colorModule.Color, image: imageSource.ImageSource, repeat: string, position: string, - size: string) { - + size: string, + borderWidth: number, + borderColor: colorModule.Color, + borderRadius: number, + clipPath: string + ) { this.color = color; this.image = image; this.repeat = repeat; this.position = position; this.size = size; + this.borderWidth = borderWidth; + this.borderColor = borderColor; + this.borderRadius = borderRadius; + this.clipPath = clipPath; } public withColor(value: colorModule.Color): Background { - return new Background(value, this.image, this.repeat, this.position, this.size); + return new Background(value, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath); } public withImage(value: imageSource.ImageSource): Background { - return new Background(this.color, value, this.repeat, this.position, this.size); + return new Background(this.color, value, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath); } public withRepeat(value: string): Background { - return new Background(this.color, this.image, value, this.position, this.size); + return new Background(this.color, this.image, value, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath); } public withPosition(value: string): Background { - return new Background(this.color, this.image, this.repeat, value, this.size); + return new Background(this.color, this.image, this.repeat, value, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath); } public withSize(value: string): Background { - return new Background(this.color, this.image, this.repeat, this.position, value); + return new Background(this.color, this.image, this.repeat, this.position, value, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath); + } + + public withBorderWidth(value: number): Background { + return new Background(this.color, this.image, this.repeat, this.position, this.size, value, this.borderColor, this.borderRadius, this.clipPath); + } + + public withBorderColor(value: colorModule.Color): Background { + return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, value, this.borderRadius, this.clipPath); + } + + public withBorderRadius(value: number): Background { + return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, value, this.clipPath); + } + + public withClipPath(value: string): Background { + return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, value); } public getDrawParams(width: number, height: number): definition.BackgroundDrawParams { @@ -222,7 +250,11 @@ export class Background implements definition.Background { public isEmpty(): boolean { ensureTypes(); - return types.isNullOrUndefined(this.image) && types.isNullOrUndefined(this.color); + return types.isNullOrUndefined(this.image) + && types.isNullOrUndefined(this.color) + && !this.borderWidth + && !this.borderRadius + && !this.clipPath; } public static equals(value1: Background, value2: Background): boolean { @@ -236,11 +268,15 @@ export class Background implements definition.Background { return false; } - return value1.image === value2.image && - value1.position === value2.position && - value1.repeat === value2.repeat && - value1.size === value2.size && - colorModule.Color.equals(value1.color, value2.color); + return value1.image === value2.image + && value1.position === value2.position + && value1.repeat === value2.repeat + && value1.size === value2.size + && colorModule.Color.equals(value1.color, value2.color) + && value1.borderWidth === value2.borderWidth + && colorModule.Color.equals(value1.borderColor, value2.borderColor) + && value1.borderRadius === value2.borderRadius + && value1.clipPath === value2.clipPath; } } diff --git a/tns-core-modules/ui/styling/background.d.ts b/tns-core-modules/ui/styling/background.d.ts index de680e1e0..752393f82 100644 --- a/tns-core-modules/ui/styling/background.d.ts +++ b/tns-core-modules/ui/styling/background.d.ts @@ -19,22 +19,32 @@ declare module "ui/styling/background" { repeat: string; position: string; size: string; + borderWidth: number; + borderColor: colorModule.Color; + borderRadius: number; + clipPath: string; constructor( color: colorModule.Color, image: imageSource.ImageSource, repeat: string, position: string, - size: string); + size: string, + borderWidth: number, + borderColor: colorModule.Color, + borderRadius: number, + clipPath: string + ); public withColor(value: colorModule.Color): Background; public withImage(value: imageSource.ImageSource): Background; - public withRepeat(value: string): Background; - public withPosition(value: string): Background; - public withSize(value: string): Background; + public withBorderWidth(value: number): Background; + public withBorderColor(value: colorModule.Color): Background; + public withBorderRadius(value: number): Background; + public withClipPath(value: string): Background; public getDrawParams(width: number, height: number): BackgroundDrawParams; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index d934c4df2..1bee04e98 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -273,6 +273,14 @@ function isMinWidthHeightValid(value: number): boolean { return !isNaN(value) && value >= 0.0 && isFinite(value); } +function onBackgroundColorPropertyChanged(data: PropertyChangeData) { + var style =