Skip to content

Commit 0a1c88e

Browse files
hamorphishamorphis
authored
Merge pull request NativeScript#2386 from NativeScript/background-position-fix
Fix: background-repeat is not respected
2 parents 5cc8051 + 2cff891 commit 0a1c88e

File tree

3 files changed

+93
-81
lines changed

3 files changed

+93
-81
lines changed

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

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import enums = require("ui/enums");
44
import definition = require("ui/styling/background");
55
import cssValue = require("css-value");
66
import utils = require("utils/utils");
7-
import * as typesModule from "utils/types";
7+
import { isAndroid } from "platform";
88

9+
import * as typesModule from "utils/types";
910
var types: typeof typesModule;
1011
function ensureTypes() {
1112
if (!types) {
@@ -28,6 +29,7 @@ export class Background implements definition.Background {
2829
repeat: string;
2930
position: string;
3031
size: string;
32+
// The ones below are used on Android only
3133
borderWidth: number = 0;
3234
borderColor: colorModule.Color;
3335
borderRadius: number = 0;
@@ -250,11 +252,17 @@ export class Background implements definition.Background {
250252
public isEmpty(): boolean {
251253
ensureTypes();
252254

253-
return types.isNullOrUndefined(this.image)
254-
&& types.isNullOrUndefined(this.color)
255-
&& !this.borderWidth
256-
&& !this.borderRadius
257-
&& !this.clipPath;
255+
if (isAndroid){
256+
return types.isNullOrUndefined(this.image)
257+
&& types.isNullOrUndefined(this.color)
258+
&& !this.borderWidth
259+
&& !this.borderRadius
260+
&& !this.clipPath;
261+
}
262+
else {
263+
return types.isNullOrUndefined(this.image)
264+
&& types.isNullOrUndefined(this.color);
265+
}
258266
}
259267

260268
public static equals(value1: Background, value2: Background): boolean {
@@ -268,15 +276,29 @@ export class Background implements definition.Background {
268276
return false;
269277
}
270278

271-
return value1.image === value2.image
272-
&& value1.position === value2.position
273-
&& value1.repeat === value2.repeat
274-
&& value1.size === value2.size
275-
&& colorModule.Color.equals(value1.color, value2.color)
276-
&& value1.borderWidth === value2.borderWidth
277-
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
278-
&& value1.borderRadius === value2.borderRadius
279-
&& value1.clipPath === value2.clipPath;
279+
if (isAndroid){
280+
return value1.image === value2.image
281+
&& value1.position === value2.position
282+
&& value1.repeat === value2.repeat
283+
&& value1.size === value2.size
284+
&& colorModule.Color.equals(value1.color, value2.color)
285+
&& value1.borderWidth === value2.borderWidth
286+
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
287+
&& value1.borderRadius === value2.borderRadius
288+
&& value1.clipPath === value2.clipPath;
289+
}
290+
else {
291+
return value1.image === value2.image
292+
&& value1.position === value2.position
293+
&& value1.repeat === value2.repeat
294+
&& value1.size === value2.size
295+
&& colorModule.Color.equals(value1.color, value2.color);
296+
}
297+
298+
}
299+
300+
public toString(): string {
301+
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};`;
280302
}
281303
}
282304

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

Lines changed: 32 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,23 @@ export module ad {
4444

4545
ensureLazyRequires();
4646

47-
let clipPath = v.style._getValue(style.clipPathProperty);
48-
let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
49-
let borderWidth = v.borderWidth;
47+
let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
5048
let backgroundDrawable = nativeView.getBackground();
5149
let density = utils.layout.getDisplayDensity();
5250
let cache = <CacheLayerType>v._nativeView;
53-
if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) &&
54-
v.borderWidth === 0 && v.borderRadius === 0 && !clipPath &&
55-
types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) &&
56-
!types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) {
57-
let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
51+
if (v instanceof button.Button
52+
&& !types.isNullOrUndefined(backgroundDrawable)
53+
&& types.isFunction(backgroundDrawable.setColorFilter)
54+
&& background.borderWidth === 0
55+
&& background.borderRadius === 0
56+
&& !background.clipPath
57+
&& types.isNullOrUndefined(background.image)
58+
&& !types.isNullOrUndefined(background.color)) {
59+
let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
5860
backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
5961
(<any>backgroundDrawable).backgroundColor = backgroundColor;
6062
}
61-
else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) {
63+
else if (!background.isEmpty()) {
6264
if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
6365
let viewClass = types.getClass(v);
6466
if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
@@ -73,7 +75,7 @@ export module ad {
7375
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
7476
}
7577

76-
if ((v.borderWidth || v.borderRadius || clipPath) && getSDK() < 18) {
78+
if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
7779
// Switch to software because of unsupported canvas methods if hardware acceleration is on:
7880
// http://developer.android.com/guide/topics/graphics/hardware-accel.html
7981
cache.layerType = cache.getLayerType();
@@ -100,60 +102,40 @@ export module ad {
100102
}
101103

102104
nativeView.setPadding(
103-
Math.round((borderWidth + v.style.paddingLeft) * density),
104-
Math.round((borderWidth + v.style.paddingTop) * density),
105-
Math.round((borderWidth + v.style.paddingRight) * density),
106-
Math.round((borderWidth + v.style.paddingBottom) * density)
105+
Math.round((background.borderWidth + v.style.paddingLeft) * density),
106+
Math.round((background.borderWidth + v.style.paddingTop) * density),
107+
Math.round((background.borderWidth + v.style.paddingRight) * density),
108+
Math.round((background.borderWidth + v.style.paddingBottom) * density)
107109
);
108110
}
109111
}
110112

111113
function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript.widgets.BorderDrawable){
112114
let background = <background.Background>view.style._getValue(style.backgroundInternalProperty);
113-
let borderWidth: number = view.borderWidth;
114-
let borderColor: number = 0;
115-
if (view.borderColor && view.borderColor.android){
116-
borderColor = view.borderColor.android;
117-
}
118-
let borderRadius: number = view.borderRadius;
119-
let clipPath: string = view.style._getValue(style.clipPathProperty);
120-
let backgroundColor: number = 0;
121-
let backgroundImage: android.graphics.Bitmap = null;
122-
let backgroundRepeat: string = null;
123-
let backgroundPosition: string = null;
124-
let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
125-
let backgroundSize: string = null;
126-
let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
127115
if (background){
128-
if (background.color && background.color.android){
129-
backgroundColor = background.color.android;
130-
}
131-
if (background.image && background.image.android){
132-
backgroundImage = background.image.android;
133-
}
116+
let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
117+
let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
134118
if (background.position){
135-
backgroundPosition = background.position;
136119
backgroundPositionParsedCSSValues = createNativeCSSValueArray(background.position);
137120
}
138121
if (background.size){
139-
backgroundSize = background.size;
140122
backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size);
141123
}
124+
125+
borderDrawable.refresh(
126+
background.borderWidth,
127+
(background.borderColor && background.borderColor.android) ? background.borderColor.android : 0,
128+
background.borderRadius,
129+
background.clipPath,
130+
(background.color && background.color.android) ? background.color.android : 0,
131+
(background.image && background.image.android) ? background.image.android : null,
132+
background.repeat,
133+
background.position,
134+
backgroundPositionParsedCSSValues,
135+
background.size,
136+
backgroundSizeParsedCSSValues
137+
);
142138
}
143-
144-
borderDrawable.refresh(
145-
borderWidth,
146-
borderColor,
147-
borderRadius,
148-
clipPath,
149-
backgroundColor,
150-
backgroundImage,
151-
backgroundRepeat,
152-
backgroundPosition,
153-
backgroundPositionParsedCSSValues,
154-
backgroundSize,
155-
backgroundSizeParsedCSSValues
156-
);
157139
}
158140

159141
function createNativeCSSValueArray(css: string): native.Array<org.nativescript.widgets.CSSValue>{

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

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -351,34 +351,42 @@ function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
351351
}
352352

353353
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
354-
var style = <Style>data.object;
355-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
356-
if (data.newValue !== currentBackground.borderWidth) {
357-
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
354+
if (platform.isAndroid){
355+
var style = <Style>data.object;
356+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
357+
if (data.newValue !== currentBackground.borderWidth) {
358+
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
359+
}
358360
}
359361
}
360362

361363
function onBorderColorPropertyChanged(data: PropertyChangeData) {
362-
var style = <Style>data.object;
363-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
364-
if (data.newValue !== currentBackground.borderColor) {
365-
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
364+
if (platform.isAndroid){
365+
var style = <Style>data.object;
366+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
367+
if (data.newValue !== currentBackground.borderColor) {
368+
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
369+
}
366370
}
367371
}
368372

369373
function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
370-
var style = <Style>data.object;
371-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
372-
if (data.newValue !== currentBackground.borderRadius) {
373-
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
374+
if (platform.isAndroid){
375+
var style = <Style>data.object;
376+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
377+
if (data.newValue !== currentBackground.borderRadius) {
378+
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
379+
}
374380
}
375381
}
376382

377383
function onClipPathPropertyChanged(data: PropertyChangeData) {
378-
var style = <Style>data.object;
379-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
380-
if (data.newValue !== currentBackground.clipPath) {
381-
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
384+
if (platform.isAndroid){
385+
var style = <Style>data.object;
386+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
387+
if (data.newValue !== currentBackground.clipPath) {
388+
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
389+
}
382390
}
383391
}
384392

0 commit comments

Comments
 (0)