diff --git a/tests/app/ui/styling/style-properties-tests.ts b/tests/app/ui/styling/style-properties-tests.ts index d676f5a62..1c294eb41 100644 --- a/tests/app/ui/styling/style-properties-tests.ts +++ b/tests/app/ui/styling/style-properties-tests.ts @@ -48,15 +48,15 @@ export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Sty } export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5", true); + test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5", true); } export function test_setting_borderWidth_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5dip", true); + test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5dip", true); } export function test_setting_borderWidth_multiple_values_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip"); + test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1 2 3 4", "1 2dip 3 4dip"); } export function test_setting_borderColor_property_from_CSS_is_applied_to_Style() { @@ -72,52 +72,51 @@ export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Sty } export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20", true); + test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20", true); } export function test_setting_borderRadius_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20dip", true); + test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20dip", true); } export function test_setting_borderRadius_multiple_values_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip"); + test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1 2 3 4", "1 2dip 3 4dip"); } export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() { test_property_from_CSS_is_applied_to_style("textAlignment", "text-align", "center"); } -const testLength: PercentLength = { value: 200, unit: "dip" }; export function test_setting_width_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200", true); + test_property_from_CSS_is_applied_to_style("width", "width", 200, "200", true); } export function test_setting_width_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200dip", true); + test_property_from_CSS_is_applied_to_style("width", "width", 200, "200dip", true); } export function test_setting_height_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200", true); + test_property_from_CSS_is_applied_to_style("height", "height", 200, "200", true); } export function test_setting_height_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200dip", true); + test_property_from_CSS_is_applied_to_style("height", "height", 200, "200dip", true); } export function test_setting_minWidth_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200", true); + test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200", true); } export function test_setting_minWidth_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200dip", true); + test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200dip", true); } export function test_setting_minHeight_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200", true); + test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200", true); } export function test_setting_minHeight_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200dip", true); + test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200dip", true); } export function test_setting_verticalAlignment_property_from_CSS_is_applied_to_Style() { @@ -137,11 +136,11 @@ export function test_setting_visibility_property_from_CSS_is_applied_to_Style() } export function test_setting_margin_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10", true); + test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10", true); } export function test_setting_margin_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10dip", true); + test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10dip", true); } export function test_setting_margin_percent_property_from_CSS_is_applied_to_Style() { @@ -149,19 +148,19 @@ export function test_setting_margin_percent_property_from_CSS_is_applied_to_Styl } export function test_setting_margin_multiple_values_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("margin", "margin", "1dip 2% 3dip 4dip", "1 2% 3 4dip"); + test_property_from_CSS_is_applied_to_style("margin", "margin", "1 2% 3 4", "1 2% 3 4dip"); } export function test_setting_padding_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10", true); + test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10", true); } export function test_setting_padding_dip_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10dip", true); + test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10dip", true); } export function test_setting_padding_multiple_values_property_from_CSS_is_applied_to_Style() { - test_property_from_CSS_is_applied_to_style("padding", "padding", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip"); + test_property_from_CSS_is_applied_to_style("padding", "padding", "1 2 3 4", "1 2dip 3 4dip"); } export function test_setting_opacity_property_from_CSS_is_applied_to_Style() { diff --git a/tests/app/ui/view/view-tests-common.ts b/tests/app/ui/view/view-tests-common.ts index bd2d09394..6cfef149f 100644 --- a/tests/app/ui/view/view-tests-common.ts +++ b/tests/app/ui/view/view-tests-common.ts @@ -714,7 +714,7 @@ export function test_binding_style_minHeight() { }; export function test_binding_style_margin() { - property_binding_style_test("margin", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip"); + property_binding_style_test("margin", "1 2 3 4", "2 3 2 3"); }; export function test_binding_style_marginLeft() { @@ -734,7 +734,7 @@ export function test_binding_style_marginBottom() { }; export function test_binding_style_padding() { - property_binding_style_test("padding", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip"); + property_binding_style_test("padding", "1 2 3 4", "2 3 2 3"); }; export function test_binding_style_paddingLeft() { diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts index e54c66912..f27d0765a 100644 --- a/tns-core-modules/ui/animation/animation.ios.ts +++ b/tns-core-modules/ui/animation/animation.ios.ts @@ -1,9 +1,9 @@ import { AnimationDefinition } from "."; -import { View, layout } from "../core/view"; +import { View } from "../core/view"; import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, traceWrite, traceEnabled, traceCategories } from "./animation-common"; import { - Length, opacityProperty, backgroundColorProperty, rotateProperty, + opacityProperty, backgroundColorProperty, rotateProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty } from "../styling/style-properties"; @@ -590,8 +590,8 @@ export class Animation extends AnimationBase { export function _getTransformMismatchErrorMessage(view: View): string { // Order is important: translate, rotate, scale let result: CGAffineTransform = CGAffineTransformIdentity; - const tx = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateX || 0, 0)); - const ty = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateY || 0, 0)); + const tx = view.translateX; + const ty = view.translateY; result = CGAffineTransformTranslate(result, tx, ty); result = CGAffineTransformRotate(result, (view.rotate || 0) * Math.PI / 180); result = CGAffineTransformScale(result, view.scaleX || 1, view.scaleY || 1); diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts index dc116b97e..00ef2a0b8 100644 --- a/tns-core-modules/ui/core/view/view-common.ts +++ b/tns-core-modules/ui/core/view/view-common.ts @@ -1,5 +1,5 @@ // Definitions. -import { View as ViewDefinition, Point, Size, Color } from "."; +import { View as ViewDefinition, Point, Size, Color, dip } from "."; import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties"; // Types. @@ -366,17 +366,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.rotate = value; } - get translateX(): Length { + get translateX(): dip { return this.style.translateX; } - set translateX(value: Length) { + set translateX(value: dip) { this.style.translateX = value; } - get translateY(): Length { + get translateY(): dip { return this.style.translateY; } - set translateY(value: Length) { + set translateY(value: dip) { this.style.translateY = value; } diff --git a/tns-core-modules/ui/core/view/view.android.ts b/tns-core-modules/ui/core/view/view.android.ts index 3372762b9..bf2701d70 100644 --- a/tns-core-modules/ui/core/view/view.android.ts +++ b/tns-core-modules/ui/core/view/view.android.ts @@ -1,5 +1,5 @@ // Definitions. -import { Point, CustomLayoutView as CustomLayoutViewDefinition } from "."; +import { Point, CustomLayoutView as CustomLayoutViewDefinition, dip } from "."; import { GestureTypes, GestureEventData } from "../../gestures"; // Types. @@ -415,18 +415,18 @@ export class View extends ViewCommon { org.nativescript.widgets.ViewHelper.setScaleY(this.nativeView, float(value)); } - [translateXProperty.getDefault](): Length | number { - return org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView); + [translateXProperty.getDefault](): dip { + return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView)); } - [translateXProperty.setNative](value: Length) { - org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, Length.toDevicePixels(value, 0)); + [translateXProperty.setNative](value: dip) { + org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, layout.toDevicePixels(value)); } - [translateYProperty.getDefault](): Length | number { - return org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView); + [translateYProperty.getDefault](): dip { + return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView)); } - [translateYProperty.setNative](value: Length) { - org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, Length.toDevicePixels(value, 0)); + [translateYProperty.setNative](value: dip) { + org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, layout.toDevicePixels(value)); } [zIndexProperty.getDefault](): number { diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts index 25336cb16..f739d09f9 100644 --- a/tns-core-modules/ui/core/view/view.d.ts +++ b/tns-core-modules/ui/core/view/view.d.ts @@ -13,6 +13,24 @@ export * from "../../styling/style-properties"; export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator; +/** + * Denotes a length number that is in device independent pixels units. + */ +export type dip = number; + +/** + * Denotes a length number that is in phisical device pixels. + */ +export type px = number; + +/** + * Denotes a normalized percent number. + * 0% is represented as 0 + * 50% is represented as 0.5 + * 100% is represented as 1 + */ +export type percent = number; + /** * The Point interface describes a two dimensional location. * It has two properties x and y, representing the x and y coordinate of the location. @@ -228,14 +246,14 @@ export abstract class View extends ViewBase implements ApplyXmlAttributes { rotate: number; /** - * Gets or sets the translateX affine transform of the view. + * Gets or sets the translateX affine transform of the view in device independent pixels. */ - translateX: Length; + translateX: dip; /** - * Gets or sets the translateY affine transform of the view. + * Gets or sets the translateY affine transform of the view in device independent pixels. */ - translateY: Length; + translateY: dip; /** * Gets or sets the scaleX affine transform of the view. diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts index 5db8afeb1..5585b1dc2 100644 --- a/tns-core-modules/ui/core/view/view.ios.ts +++ b/tns-core-modules/ui/core/view/view.ios.ts @@ -1,5 +1,5 @@ // Definitions. -import { Point, View as ViewDefinition } from "."; +import { Point, View as ViewDefinition, dip } from "."; import { ios, Background } from "../../styling/background"; import { @@ -8,7 +8,7 @@ import { } from "./view-common"; import { - Visibility, Length, + Visibility, visibilityProperty, opacityProperty, rotateProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, @@ -232,13 +232,11 @@ export class View extends ViewCommon { } public updateNativeTransform() { - let translateX = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateX || 0, 0)); - let translateY = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateY || 0, 0)); let scaleX = this.scaleX || 1e-6; let scaleY = this.scaleY || 1e-6; let rotate = this.rotate || 0; let newTransform = CGAffineTransformIdentity; - newTransform = CGAffineTransformTranslate(newTransform, translateX, translateY); + newTransform = CGAffineTransformTranslate(newTransform, this.translateX, this.translateY); newTransform = CGAffineTransformRotate(newTransform, rotate * Math.PI / 180); newTransform = CGAffineTransformScale(newTransform, scaleX, scaleY); if (!CGAffineTransformEqualToTransform(this.nativeView.transform, newTransform)) { @@ -370,17 +368,17 @@ export class View extends ViewCommon { this.updateNativeTransform(); } - [translateXProperty.getDefault](): Length | number { + [translateXProperty.getDefault](): dip { return 0; } - [translateXProperty.setNative](value: Length) { + [translateXProperty.setNative](value: dip) { this.updateNativeTransform(); } - [translateYProperty.getDefault](): Length | number { + [translateYProperty.getDefault](): dip { return 0; } - [translateYProperty.setNative](value: Length) { + [translateYProperty.setNative](value: dip) { this.updateNativeTransform(); } diff --git a/tns-core-modules/ui/styling/style-properties.d.ts b/tns-core-modules/ui/styling/style-properties.d.ts index a885405d7..6ec5f2853 100644 --- a/tns-core-modules/ui/styling/style-properties.d.ts +++ b/tns-core-modules/ui/styling/style-properties.d.ts @@ -6,11 +6,14 @@ import { Color } from "../../color"; import { Style, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from "../core/properties"; import { Font, FontStyle, FontWeight } from "./font"; import { Background } from "./background"; +import { dip, px, percent } from "../core/view"; -export type Length = "auto" | number | { - readonly unit: "dip" | "px"; - readonly value: number; -} +export type LengthDipUnit = { readonly unit: "dip", readonly value: dip }; +export type LengthPxUnit = { readonly unit: "px", readonly value: px }; +export type LengthPercentUnit = { readonly unit: "%", readonly value: percent }; + +export type Length = "auto" | dip | LengthDipUnit | LengthPxUnit; +export type PercentLength = "auto" | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; export namespace Length { export function parse(text: string): Length; @@ -18,19 +21,10 @@ export namespace Length { /** * Converts Length unit to device pixels. * @param length The Length to convert. - * @param auto Value to use for conversion of "auto". + * @param auto Value to use for conversion of "auto". By default is Math.NaN. */ - export function toDevicePixels(length: Length, auto: number): number; + export function toDevicePixels(length: Length, auto?: number): number; export function convertToString(length: Length): string; - -} - -export type PercentLength = "auto" | number | { - readonly unit: "%" | "dip" | "px"; - /** - * Length value. When unit is "%" the value is normalized (ex. for 5% the value is 0.05) - */ - readonly value: number; } export namespace PercentLength { @@ -39,10 +33,10 @@ export namespace PercentLength { /** * Converts PercentLength unit to device pixels. * @param length The PercentLength to convert. - * @param auto Value to use for conversion of "auto". - * @param parentAvailableWidth Value to use as base when converting percent unit. + * @param auto Value to use for conversion of "auto". By default is Math.NaN. + * @param parentAvailableWidth Value to use as base when converting percent unit. By default is Math.NaN. */ - export function toDevicePixels(length: PercentLength, auto: number, parentAvailableWidth: number): number; + export function toDevicePixels(length: PercentLength, auto?: number, parentAvailableWidth?: px): number; export function convertToString(length: PercentLength): string; } @@ -51,8 +45,8 @@ export const zeroLength: Length; export const rotateProperty: CssAnimationProperty; export const scaleXProperty: CssAnimationProperty; export const scaleYProperty: CssAnimationProperty; -export const translateXProperty: CssAnimationProperty; -export const translateYProperty: CssAnimationProperty; +export const translateXProperty: CssAnimationProperty; +export const translateYProperty: CssAnimationProperty; export const clipPathProperty: CssProperty; export const colorProperty: InheritedCssProperty; @@ -85,10 +79,10 @@ export const zIndexProperty: CssProperty; export const visibilityProperty: CssProperty; export const opacityProperty: CssAnimationProperty; -export const minWidthProperty: CssProperty; -export const minHeightProperty: CssProperty; -export const widthProperty: CssProperty; -export const heightProperty: CssProperty; +export const minWidthProperty: CssProperty; +export const minHeightProperty: CssProperty; +export const widthProperty: CssProperty; +export const heightProperty: CssProperty; export const marginProperty: ShorthandProperty; export const marginLeftProperty: CssProperty; export const marginRightProperty: CssProperty; diff --git a/tns-core-modules/ui/styling/style-properties.ts b/tns-core-modules/ui/styling/style-properties.ts index 7048413a1..41bd6142c 100644 --- a/tns-core-modules/ui/styling/style-properties.ts +++ b/tns-core-modules/ui/styling/style-properties.ts @@ -1,3 +1,6 @@ +// Types +import { dip, px, percent } from "../core/view"; + import { Color } from "../../color"; import { Font, parseFont, FontStyle, FontWeight } from "./font"; import { layout } from "../../utils/utils"; @@ -8,6 +11,13 @@ import { Style } from "./style"; import { unsetValue, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty, makeValidator, makeParser } from "../core/properties"; +export type LengthDipUnit = { readonly unit: "dip", readonly value: dip }; +export type LengthPxUnit = { readonly unit: "px", readonly value: px }; +export type LengthPercentUnit = { readonly unit: "%", readonly value: percent }; + +export type Length = "auto" | dip | LengthDipUnit | LengthPxUnit; +export type PercentLength = "auto" | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; + function equalsCommon(a: Length, b: Length): boolean; function equalsCommon(a: PercentLength, b: PercentLength): boolean; function equalsCommon(a: PercentLength, b: PercentLength): boolean { @@ -49,9 +59,7 @@ function convertToStringCommon(length: Length | PercentLength): string { return val + length.unit; } -function toDevicePixelsCommon(length: Length, auto: number): number; -function toDevicePixelsCommon(length: PercentLength, auto: number, parentSize: number): number; -function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailableWidth?: number): number { +function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number { if (length == "auto") { // tslint:disable-line return auto; } @@ -69,50 +77,43 @@ function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailab } } -export type PercentLength = "auto" | number | { - readonly unit: "%" | "dip" | "px"; - readonly value: number; -} - export namespace PercentLength { - export function parse(value: string | Length): PercentLength { - if (value == "auto") { // tslint:disable-line + export function parse(fromValue: string | Length): PercentLength { + if (fromValue == "auto") { // tslint:disable-line return "auto"; } - if (typeof value === "string") { - let type: "%" | "dip" | "px"; - let numberValue = 0; - let stringValue = value.trim(); + if (typeof fromValue === "string") { + let stringValue = fromValue.trim(); let percentIndex = stringValue.indexOf("%"); if (percentIndex !== -1) { - type = "%"; + let value: percent; // if only % or % is not last we treat it as invalid value. if (percentIndex !== (stringValue.length - 1) || percentIndex === 0) { - numberValue = Number.NaN; + value = Number.NaN; } else { - numberValue = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100; + value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100; } + + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); + } + return { unit: "%", value } + } else if (stringValue.indexOf("px") !== -1) { + stringValue = stringValue.replace("px", "").trim(); + let value: px = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); + } + return { unit: "px", value }; } else { - if (stringValue.indexOf("px") !== -1) { - type = "px"; - stringValue = stringValue.replace("px", "").trim(); - } else { - type = "dip"; + let value: dip = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); } - - numberValue = parseFloat(stringValue); + return value; } - - if (isNaN(numberValue) || !isFinite(numberValue)) { - throw new Error(`Invalid value: ${value}`); - } - - return { - value: numberValue, - unit: type - }; } else { - return value; + return fromValue; } } @@ -121,42 +122,33 @@ export namespace PercentLength { export const convertToString: { (length: PercentLength): string } = convertToStringCommon; } -export type Length = "auto" | number | { - readonly unit: "dip" | "px"; - readonly value: number; -}; - export namespace Length { - export function parse(value: string | Length): Length { - if (value == "auto") { // tslint:disable-line + export function parse(fromValue: string | Length): Length { + if (fromValue == "auto") { // tslint:disable-line return "auto"; - } else if (typeof value === "string") { - let type: "dip" | "px"; - let numberValue = 0; - let stringValue = value.trim(); + } + if (typeof fromValue === "string") { + let stringValue = fromValue.trim(); if (stringValue.indexOf("px") !== -1) { - type = "px"; stringValue = stringValue.replace("px", "").trim(); + let value: px = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${stringValue}`); + } + return { unit: "px", value }; } else { - type = "dip"; + let value: dip = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${stringValue}`); + } + return value; } - - numberValue = parseFloat(stringValue); - - if (isNaN(numberValue) || !isFinite(numberValue)) { - throw new Error(`Invalid value: ${value}`); - } - - return { - value: numberValue, - unit: type - }; } else { - return value; + return fromValue; } } export const equals: { (a: Length, b: Length): boolean } = equalsCommon; - export const toDevicePixels: { (length: Length, auto: number): number } = toDevicePixelsCommon; + export const toDevicePixels: { (length: Length, auto?: number): number } = toDevicePixelsCommon; export const convertToString: { (length: Length): string } = convertToStringCommon; } @@ -387,10 +379,18 @@ scaleXProperty.register(Style); export const scaleYProperty = new CssAnimationProperty({ name: "scaleY", cssName: "scaleY", defaultValue: 1, valueConverter: parseFloat }); scaleYProperty.register(Style); -export const translateXProperty = new CssAnimationProperty({ name: "translateX", cssName: "translateX", defaultValue: 0, valueConverter: Length.parse, equalityComparer: Length.equals }); +function parseDIPs(value: string): dip { + if (value.indexOf("px") !== -1) { + return layout.toDeviceIndependentPixels(parseFloat(value.replace("px", "").trim())); + } else { + return parseFloat(value.replace("dip", "").trim()); + } +} + +export const translateXProperty = new CssAnimationProperty({ name: "translateX", cssName: "translateX", defaultValue: 0, valueConverter: parseDIPs }); translateXProperty.register(Style); -export const translateYProperty = new CssAnimationProperty({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: Length.parse, equalityComparer: Length.equals }); +export const translateYProperty = new CssAnimationProperty({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: parseDIPs }); translateYProperty.register(Style); const transformProperty = new ShorthandProperty({ diff --git a/tns-core-modules/ui/styling/style/style.d.ts b/tns-core-modules/ui/styling/style/style.d.ts index 2757b6d3d..2599f819f 100644 --- a/tns-core-modules/ui/styling/style/style.d.ts +++ b/tns-core-modules/ui/styling/style/style.d.ts @@ -2,7 +2,7 @@ * @module "ui/styling/style" */ /** */ -import { Length, PercentLength, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment} from "../../core/view"; +import { Length, PercentLength, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment, dip } from "../../core/view"; import { Color } from "../../../color"; import { Background } from "../background"; import { Font, FontStyle, FontWeight } from "../font"; @@ -55,8 +55,8 @@ export class Style extends Observable { public rotate: number; public scaleX: number; public scaleY: number; - public translateX: Length; - public translateY: Length; + public translateX: dip; + public translateY: dip; public clipPath: string; public color: Color; diff --git a/tns-core-modules/ui/styling/style/style.ts b/tns-core-modules/ui/styling/style/style.ts index d76b901a5..d5d1bc075 100644 --- a/tns-core-modules/ui/styling/style/style.ts +++ b/tns-core-modules/ui/styling/style/style.ts @@ -2,7 +2,7 @@ import { Style as StyleDefinition } from "."; import { Color } from "../../../color"; import { Font, FontStyle, FontWeight } from "../font"; import { Background } from "../background"; -import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment } from "../../core/view"; +import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment, dip } from "../../core/view"; import { Observable } from "../../../data/observable"; import { @@ -23,8 +23,8 @@ export class Style extends Observable implements StyleDefinition { public rotate: number; public scaleX: number; public scaleY: number; - public translateX: Length; - public translateY: Length; + public translateX: dip; + public translateY: dip; public clipPath: string; public color: Color; diff --git a/tns-core-modules/utils/utils.d.ts b/tns-core-modules/utils/utils.d.ts index b1c5636ca..a0afc84b8 100644 --- a/tns-core-modules/utils/utils.d.ts +++ b/tns-core-modules/utils/utils.d.ts @@ -2,6 +2,8 @@ * @module "utils/utils" */ /** */ +import { dip, px } from "../ui/core/view"; + export const RESOURCE_PREFIX: string; export const FILE_PREFIX: string; @@ -29,9 +31,6 @@ interface CacheLayerType { * Utility module related to layout. */ export module layout { - export type px = number; - export type dip = number; - /** * Bits that provide the actual measured size. */ @@ -68,12 +67,12 @@ export module layout { */ export function getDisplayDensity(): number; /** - * Convert value to device pixels. + * Convert device independent pixels to device pixels - dip to px. * @param value - The pixel to convert. */ export function toDevicePixels(value: dip): px; /** - * Convert value to device independent pixels. + * Convert device pixels to device independent pixels - px to dip. * @param value - The pixel to convert. */ export function toDeviceIndependentPixels(value: px): dip;