Skip to content

Revert the translateX/Y to be in dip, Length prefer number to object type #4056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PanayotCankov merged 1 commit into from
Apr 25, 2017
Merged

Revert the translateX/Y to be in dip, Length prefer number to object type #4056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions tests/app/ui/styling/style-properties-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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() {
Expand All @@ -137,31 +136,31 @@ 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() {
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 0.05, unit: "%" }, "5%", true);
}

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() {
Expand Down
4 changes: 2 additions & 2 deletions tests/app/ui/view/view-tests-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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() {
Expand Down
8 changes: 4 additions & 4 deletions tns-core-modules/ui/animation/animation.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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);
Expand Down
10 changes: 5 additions & 5 deletions tns-core-modules/ui/core/view/view-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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;
}

Expand Down
18 changes: 9 additions & 9 deletions tns-core-modules/ui/core/view/view.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Definitions.
import { Point, CustomLayoutView as CustomLayoutViewDefinition } from ".";
import { Point, CustomLayoutView as CustomLayoutViewDefinition, dip } from ".";
import { GestureTypes, GestureEventData } from "../../gestures";

// Types.
Expand Down Expand Up @@ -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 {
Expand Down
26 changes: 22 additions & 4 deletions tns-core-modules/ui/core/view/view.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
16 changes: 7 additions & 9 deletions tns-core-modules/ui/core/view/view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -8,7 +8,7 @@ import {
} from "./view-common";

import {
Visibility, Length,
Visibility,
visibilityProperty, opacityProperty,
rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty,
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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();
}

Expand Down
Loading