mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 03:31:45 +08:00
Revert the translateX/Y to be in dip
This commit is contained in:
Panayot Cankov
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
26
tns-core-modules/ui/core/view/view.d.ts
vendored
26
tns-core-modules/ui/core/view/view.d.ts
vendored
@ -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.
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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<Style, number>;
|
||||
export const scaleXProperty: CssAnimationProperty<Style, number>;
|
||||
export const scaleYProperty: CssAnimationProperty<Style, number>;
|
||||
export const translateXProperty: CssAnimationProperty<Style, Length>;
|
||||
export const translateYProperty: CssAnimationProperty<Style, Length>;
|
||||
export const translateXProperty: CssAnimationProperty<Style, dip>;
|
||||
export const translateYProperty: CssAnimationProperty<Style, dip>;
|
||||
|
||||
export const clipPathProperty: CssProperty<Style, string>;
|
||||
export const colorProperty: InheritedCssProperty<Style, Color>;
|
||||
@ -85,10 +79,10 @@ export const zIndexProperty: CssProperty<Style, number>;
|
||||
export const visibilityProperty: CssProperty<Style, Visibility>;
|
||||
export const opacityProperty: CssAnimationProperty<Style, number>;
|
||||
|
||||
export const minWidthProperty: CssProperty<Style, Length>;
|
||||
export const minHeightProperty: CssProperty<Style, Length>;
|
||||
export const widthProperty: CssProperty<Style, Length>;
|
||||
export const heightProperty: CssProperty<Style, Length>;
|
||||
export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
|
||||
export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
|
||||
export const widthProperty: CssProperty<Style, PercentLength>;
|
||||
export const heightProperty: CssProperty<Style, PercentLength>;
|
||||
export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
|
||||
export const marginLeftProperty: CssProperty<Style, PercentLength>;
|
||||
export const marginRightProperty: CssProperty<Style, PercentLength>;
|
||||
|
||||
@ -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,51 +77,44 @@ 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;
|
||||
}
|
||||
} else {
|
||||
if (stringValue.indexOf("px") !== -1) {
|
||||
type = "px";
|
||||
|
||||
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 {
|
||||
type = "dip";
|
||||
let value: dip = parseFloat(stringValue);
|
||||
if (isNaN(value) || !isFinite(value)) {
|
||||
throw new Error(`Invalid value: ${fromValue}`);
|
||||
}
|
||||
|
||||
numberValue = parseFloat(stringValue);
|
||||
}
|
||||
|
||||
if (isNaN(numberValue) || !isFinite(numberValue)) {
|
||||
throw new Error(`Invalid value: ${value}`);
|
||||
}
|
||||
|
||||
return {
|
||||
value: numberValue,
|
||||
unit: type
|
||||
};
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
} else {
|
||||
return fromValue;
|
||||
}
|
||||
}
|
||||
|
||||
export const equals: { (a: PercentLength, b: PercentLength): boolean } = equalsCommon;
|
||||
@ -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();
|
||||
} else {
|
||||
type = "dip";
|
||||
let value: px = parseFloat(stringValue);
|
||||
if (isNaN(value) || !isFinite(value)) {
|
||||
throw new Error(`Invalid value: ${stringValue}`);
|
||||
}
|
||||
|
||||
numberValue = parseFloat(stringValue);
|
||||
|
||||
if (isNaN(numberValue) || !isFinite(numberValue)) {
|
||||
throw new Error(`Invalid value: ${value}`);
|
||||
}
|
||||
|
||||
return {
|
||||
value: numberValue,
|
||||
unit: type
|
||||
};
|
||||
return { unit: "px", value };
|
||||
} else {
|
||||
let value: dip = parseFloat(stringValue);
|
||||
if (isNaN(value) || !isFinite(value)) {
|
||||
throw new Error(`Invalid value: ${stringValue}`);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
} else {
|
||||
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<Style, number>({ name: "scaleY", cssName: "scaleY", defaultValue: 1, valueConverter: parseFloat });
|
||||
scaleYProperty.register(Style);
|
||||
|
||||
export const translateXProperty = new CssAnimationProperty<Style, Length>({ 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<Style, dip>({ name: "translateX", cssName: "translateX", defaultValue: 0, valueConverter: parseDIPs });
|
||||
translateXProperty.register(Style);
|
||||
|
||||
export const translateYProperty = new CssAnimationProperty<Style, Length>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: Length.parse, equalityComparer: Length.equals });
|
||||
export const translateYProperty = new CssAnimationProperty<Style, dip>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: parseDIPs });
|
||||
translateYProperty.register(Style);
|
||||
|
||||
const transformProperty = new ShorthandProperty<Style, string>({
|
||||
|
||||
6
tns-core-modules/ui/styling/style/style.d.ts
vendored
6
tns-core-modules/ui/styling/style/style.d.ts
vendored
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
9
tns-core-modules/utils/utils.d.ts
vendored
9
tns-core-modules/utils/utils.d.ts
vendored
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user