javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move border properties to Background to avoid unnecessary refreshes.

Browse Source
This commit is contained in:
Rossen Hristov
2016-06-27 09:41:53 +03:00
parent 05a3f3c846
commit 7d3fb56def
4 changed files with 129 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tns-core-modules/ui/core/view.android.ts
View File

@ -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,

64
tns-core-modules/ui/styling/background-common.ts
View File

@ -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;
}
}

18
tns-core-modules/ui/styling/background.d.ts vendored
View File

@ -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;

86
tns-core-modules/ui/styling/style.ts
View File

@ -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) {