Merge pull request #2386 from NativeScript/background-position-fix

Fix: background-repeat is not respected

tns-core-modules/ui/styling/background-common.ts

@@ -4,8 +4,9 @@ import enums = require("ui/enums");
 import definition = require("ui/styling/background");
 import cssValue = require("css-value");
 import utils = require("utils/utils");
-import * as typesModule from "utils/types";
+import { isAndroid }  from "platform"; 
 
+import * as typesModule from "utils/types";
 var types: typeof typesModule;
 function ensureTypes() {
     if (!types) {
@@ -28,6 +29,7 @@ export class Background implements definition.Background {
     repeat: string;
     position: string;
     size: string;
+    // The ones below are used on Android only
     borderWidth: number = 0;
     borderColor: colorModule.Color;
     borderRadius: number = 0;
@@ -250,12 +252,18 @@ export class Background implements definition.Background {
     public isEmpty(): boolean {
         ensureTypes();
 
+        if (isAndroid){
             return types.isNullOrUndefined(this.image) 
                 && types.isNullOrUndefined(this.color)
                 && !this.borderWidth
                 && !this.borderRadius
                 && !this.clipPath;
         }
+        else {
+            return types.isNullOrUndefined(this.image) 
+                && types.isNullOrUndefined(this.color);    
+        }
+    }
 
     public static equals(value1: Background, value2: Background): boolean {
         // both values are falsy
@@ -268,6 +276,7 @@ export class Background implements definition.Background {
             return false;
         }
 
+        if (isAndroid){
             return value1.image === value2.image 
                 && value1.position === value2.position 
                 && value1.repeat === value2.repeat 
@@ -278,6 +287,19 @@ export class Background implements definition.Background {
                 && value1.borderRadius === value2.borderRadius
                 && value1.clipPath === value2.clipPath;
         }
+        else {
+            return value1.image === value2.image 
+                && value1.position === value2.position 
+                && value1.repeat === value2.repeat 
+                && value1.size === value2.size 
+                && colorModule.Color.equals(value1.color, value2.color);
+        }
+        
+    }
+    
+    public toString(): string {
+        return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderWidth: ${this.borderWidth}; borderColor: ${this.borderColor}; borderRadius: ${this.borderRadius}; clipPath: ${this.clipPath};`;
+    }
 }
 
 export function cssValueToDevicePixels(source: string, total: number): number {

tns-core-modules/ui/styling/background.android.ts

@@ -44,21 +44,23 @@ export module ad {
         
         ensureLazyRequires();
 
-        let clipPath = v.style._getValue(style.clipPathProperty);
+        let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
-        let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
-        let borderWidth = v.borderWidth;
         let backgroundDrawable = nativeView.getBackground();
         let density = utils.layout.getDisplayDensity();
         let cache = <CacheLayerType>v._nativeView;
-        if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) &&
+        if (v instanceof button.Button 
-            v.borderWidth === 0 && v.borderRadius === 0 && !clipPath &&
+        && !types.isNullOrUndefined(backgroundDrawable) 
-            types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) &&
+        && types.isFunction(backgroundDrawable.setColorFilter) 
-            !types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) {
+        && background.borderWidth === 0 
-            let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
+        && background.borderRadius === 0 
+        && !background.clipPath 
+        && types.isNullOrUndefined(background.image) 
+        && !types.isNullOrUndefined(background.color)) {
+            let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
             backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
             (<any>backgroundDrawable).backgroundColor = backgroundColor;
         } 
-        else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) {
+        else if (!background.isEmpty()) {
             if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
                 let viewClass = types.getClass(v);
                 if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
@@ -73,7 +75,7 @@ export module ad {
                 refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
             }
             
-            if ((v.borderWidth || v.borderRadius || clipPath) && getSDK() < 18) {
+            if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
                 // Switch to software because of unsupported canvas methods if hardware acceleration is on:
                 // http://developer.android.com/guide/topics/graphics/hardware-accel.html
                 cache.layerType = cache.getLayerType();
@@ -100,61 +102,41 @@ export module ad {
         }
 
         nativeView.setPadding(
-            Math.round((borderWidth + v.style.paddingLeft) * density),
+            Math.round((background.borderWidth + v.style.paddingLeft) * density),
-            Math.round((borderWidth + v.style.paddingTop) * density),
+            Math.round((background.borderWidth + v.style.paddingTop) * density),
-            Math.round((borderWidth + v.style.paddingRight) * density),
+            Math.round((background.borderWidth + v.style.paddingRight) * density),
-            Math.round((borderWidth + v.style.paddingBottom) * density)
+            Math.round((background.borderWidth + v.style.paddingBottom) * density)
         );
     }
 }
 
 function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript.widgets.BorderDrawable){
     let background = <background.Background>view.style._getValue(style.backgroundInternalProperty);
-    let borderWidth: number = view.borderWidth;
-    let borderColor: number = 0;
-    if (view.borderColor && view.borderColor.android){
-        borderColor = view.borderColor.android;
-    }
-    let borderRadius: number = view.borderRadius;
-    let clipPath: string = view.style._getValue(style.clipPathProperty);
-    let backgroundColor: number = 0;
-    let backgroundImage: android.graphics.Bitmap = null;
-    let backgroundRepeat: string = null;
-    let backgroundPosition: string = null;
-    let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
-    let backgroundSize: string = null;
-    let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
     if (background){
-        if (background.color && background.color.android){
+        let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
-            backgroundColor = background.color.android;
+        let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
-        }
-        if (background.image && background.image.android){
-            backgroundImage = background.image.android;
-        }
         if (background.position){
-            backgroundPosition = background.position;
             backgroundPositionParsedCSSValues = createNativeCSSValueArray(background.position); 
         }
         if (background.size){
-            backgroundSize = background.size;
             backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size); 
         }
-    }
         
         borderDrawable.refresh(
-        borderWidth, 
+            background.borderWidth, 
-        borderColor,
+            (background.borderColor && background.borderColor.android) ? background.borderColor.android : 0,
-        borderRadius,
+            background.borderRadius,
-        clipPath,
+            background.clipPath,
-        backgroundColor,
+            (background.color && background.color.android) ? background.color.android : 0,
-        backgroundImage,
+            (background.image && background.image.android) ? background.image.android : null,
-        backgroundRepeat,
+            background.repeat,
-        backgroundPosition,
+            background.position,
             backgroundPositionParsedCSSValues,
-        backgroundSize,
+            background.size,
             backgroundSizeParsedCSSValues
         );
     }
+}
 
 function createNativeCSSValueArray(css: string): native.Array<org.nativescript.widgets.CSSValue>{
     if (!css){

tns-core-modules/ui/styling/style.ts

@@ -351,36 +351,44 @@ function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
 }
 
 function onBorderWidthPropertyChanged(data: PropertyChangeData) {
+    if (platform.isAndroid){
         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) {
+    if (platform.isAndroid){
         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) {
+    if (platform.isAndroid){
         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) {
+    if (platform.isAndroid){
         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";