Move border properties to Background to avoid unnecessary refreshes.

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(
+        var backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
-            ViewStyler.setBackgroundBorderProperty,
+            ViewStyler.setBackgroundAndBorder,
-            ViewStyler.resetBackgroundBorderProperty);
+            ViewStyler.resetBackgroundAndBorder);
 
-        style.registerHandler(style.backgroundInternalProperty, borderHandler);
+        style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
-        style.registerHandler(style.borderWidthProperty, borderHandler);
-        style.registerHandler(style.borderColorProperty, borderHandler);
-        style.registerHandler(style.borderRadiusProperty, borderHandler);
-        style.registerHandler(style.clipPathProperty, borderHandler);
 
         style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setNativeLayoutParamsProperty,

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 &&
+        return value1.image === value2.image 
-            value1.position === value2.position &&
+            && value1.position === value2.position 
-            value1.repeat === value2.repeat &&
+            && value1.repeat === value2.repeat 
-            value1.size === value2.size &&
+            && value1.size === value2.size 
-            colorModule.Color.equals(value1.color, value2.color);
+            && 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;
     }
 }
 

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;
 

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 = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (!Color.equals(currentBackground.color, data.newValue)) {
+        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
+    }
+}
+
 function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
     var style = <Style>data.object;
     var url: string = data.newValue;
@@ -318,22 +326,6 @@ function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
     }
 }
 
-function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (!Color.equals(currentBackground.color, data.newValue)) {
-        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
-    }
-}
-
-function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (data.newValue !== currentBackground.size) {
-        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
-    }
-}
-
 function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
     var style = <Style>data.object;
     var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
@@ -350,6 +342,46 @@ function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
     }
 }
 
+function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.size) {
+        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
+    }
+}
+
+function onBorderWidthPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
+    }
+}
+
+function onBorderColorPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
+    }
+}
+
+function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
+    }
+}
+
+function onClipPathPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.clipPath) {
+        style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
+    }
+}
+
 function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): definition.StylePropertyChangedHandler {
     var className = classInfo ? classInfo.name : "default";
     var handlerKey = className + propertyId;
@@ -399,7 +431,7 @@ function isWhiteSpaceValid(value: string): boolean {
     return value === enums.WhiteSpace.nowrap || value === enums.WhiteSpace.normal;
 }
 
-function isPaddingValid(value: number): boolean {
+function isNonNegativeFiniteNumber(value: number): boolean {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
 
@@ -1065,17 +1097,17 @@ export var backgroundSizeProperty = new styleProperty.Property("backgroundSize",
 export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
 
-export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals), converters.colorConverter);
-
 export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
-    new PropertyMetadata(0, AffectsLayout, null, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
 
 export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
-    new PropertyMetadata(0, AffectsLayout, null, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
     
 export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
-    new PropertyMetadata(undefined, AffectsLayout, null, isClipPathValid));    
+    new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));    
 
 export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
     new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
@@ -1204,16 +1236,16 @@ export var nativePaddingsProperty = new styleProperty.Property("paddingNative",
 var defaultPadding = platform.device.os === platform.platformNames.android ? undefined : 0;
 
 export var paddingLeftProperty = new styleProperty.Property("paddingLeft", "padding-left",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingRightProperty = new styleProperty.Property("paddingRight", "padding-right",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingTopProperty = new styleProperty.Property("paddingTop", "padding-top",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingBottomProperty = new styleProperty.Property("paddingBottom", "padding-bottom",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 // TODO: separate into .android/.ios files so that there is no need for such checks
 if (platform.device.os === platform.platformNames.android) {