Skip to content

Commit 826c922

Browse files
PanayotCankovPanayotCankov
authored
Merge pull request #4056 from NativeScript/revert-translate
Revert the translateX/Y to be in dip, Length prefer number to object type
2 parents 2e8490e + e26032f commit 826c922

File tree

12 files changed

+159
-151
lines changed

12 files changed

+159
-151
lines changed

‎tests/app/ui/styling/style-properties-tests.ts‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Sty
4848
}
4949

5050
export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
51-
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5", true);
51+
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5", true);
5252
}
5353

5454
export function test_setting_borderWidth_dip_property_from_CSS_is_applied_to_Style() {
55-
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5dip", true);
55+
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5dip", true);
5656
}
5757

5858
export function test_setting_borderWidth_multiple_values_property_from_CSS_is_applied_to_Style() {
59-
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
59+
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1 2 3 4", "1 2dip 3 4dip");
6060
}
6161

6262
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
7272
}
7373

7474
export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
75-
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20", true);
75+
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20", true);
7676
}
7777

7878
export function test_setting_borderRadius_dip_property_from_CSS_is_applied_to_Style() {
79-
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20dip", true);
79+
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20dip", true);
8080
}
8181

8282
export function test_setting_borderRadius_multiple_values_property_from_CSS_is_applied_to_Style() {
83-
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
83+
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1 2 3 4", "1 2dip 3 4dip");
8484
}
8585

8686
export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
8787
test_property_from_CSS_is_applied_to_style("textAlignment", "text-align", "center");
8888
}
8989

90-
const testLength: PercentLength = { value: 200, unit: "dip" };
9190
export function test_setting_width_property_from_CSS_is_applied_to_Style() {
92-
test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200", true);
91+
test_property_from_CSS_is_applied_to_style("width", "width", 200, "200", true);
9392
}
9493

9594
export function test_setting_width_dip_property_from_CSS_is_applied_to_Style() {
96-
test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200dip", true);
95+
test_property_from_CSS_is_applied_to_style("width", "width", 200, "200dip", true);
9796
}
9897

9998
export function test_setting_height_property_from_CSS_is_applied_to_Style() {
100-
test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200", true);
99+
test_property_from_CSS_is_applied_to_style("height", "height", 200, "200", true);
101100
}
102101

103102
export function test_setting_height_dip_property_from_CSS_is_applied_to_Style() {
104-
test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200dip", true);
103+
test_property_from_CSS_is_applied_to_style("height", "height", 200, "200dip", true);
105104
}
106105

107106
export function test_setting_minWidth_property_from_CSS_is_applied_to_Style() {
108-
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200", true);
107+
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200", true);
109108
}
110109

111110
export function test_setting_minWidth_dip_property_from_CSS_is_applied_to_Style() {
112-
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200dip", true);
111+
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200dip", true);
113112
}
114113

115114
export function test_setting_minHeight_property_from_CSS_is_applied_to_Style() {
116-
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200", true);
115+
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200", true);
117116
}
118117

119118
export function test_setting_minHeight_dip_property_from_CSS_is_applied_to_Style() {
120-
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200dip", true);
119+
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200dip", true);
121120
}
122121

123122
export function test_setting_verticalAlignment_property_from_CSS_is_applied_to_Style() {
@@ -137,31 +136,31 @@ export function test_setting_visibility_property_from_CSS_is_applied_to_Style()
137136
}
138137

139138
export function test_setting_margin_property_from_CSS_is_applied_to_Style() {
140-
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10", true);
139+
test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10", true);
141140
}
142141

143142
export function test_setting_margin_dip_property_from_CSS_is_applied_to_Style() {
144-
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10dip", true);
143+
test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10dip", true);
145144
}
146145

147146
export function test_setting_margin_percent_property_from_CSS_is_applied_to_Style() {
148147
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 0.05, unit: "%" }, "5%", true);
149148
}
150149

151150
export function test_setting_margin_multiple_values_property_from_CSS_is_applied_to_Style() {
152-
test_property_from_CSS_is_applied_to_style("margin", "margin", "1dip 2% 3dip 4dip", "1 2% 3 4dip");
151+
test_property_from_CSS_is_applied_to_style("margin", "margin", "1 2% 3 4", "1 2% 3 4dip");
153152
}
154153

155154
export function test_setting_padding_property_from_CSS_is_applied_to_Style() {
156-
test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10", true);
155+
test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10", true);
157156
}
158157

159158
export function test_setting_padding_dip_property_from_CSS_is_applied_to_Style() {
160-
test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10dip", true);
159+
test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10dip", true);
161160
}
162161

163162
export function test_setting_padding_multiple_values_property_from_CSS_is_applied_to_Style() {
164-
test_property_from_CSS_is_applied_to_style("padding", "padding", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
163+
test_property_from_CSS_is_applied_to_style("padding", "padding", "1 2 3 4", "1 2dip 3 4dip");
165164
}
166165

167166
export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {

‎tests/app/ui/view/view-tests-common.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -714,7 +714,7 @@ export function test_binding_style_minHeight() {
714714
};
715715

716716
export function test_binding_style_margin() {
717-
property_binding_style_test("margin", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip");
717+
property_binding_style_test("margin", "1 2 3 4", "2 3 2 3");
718718
};
719719

720720
export function test_binding_style_marginLeft() {
@@ -734,7 +734,7 @@ export function test_binding_style_marginBottom() {
734734
};
735735

736736
export function test_binding_style_padding() {
737-
property_binding_style_test("padding", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip");
737+
property_binding_style_test("padding", "1 2 3 4", "2 3 2 3");
738738
};
739739

740740
export function test_binding_style_paddingLeft() {

‎tns-core-modules/ui/animation/animation.ios.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { AnimationDefinition } from ".";
2-
import { View, layout } from "../core/view";
2+
import { View } from "../core/view";
33

44
import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, traceWrite, traceEnabled, traceCategories } from "./animation-common";
55
import {
6-
Length, opacityProperty, backgroundColorProperty, rotateProperty,
6+
opacityProperty, backgroundColorProperty, rotateProperty,
77
translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
88
} from "../styling/style-properties";
99

@@ -590,8 +590,8 @@ export class Animation extends AnimationBase {
590590
export function _getTransformMismatchErrorMessage(view: View): string {
591591
// Order is important: translate, rotate, scale
592592
let result: CGAffineTransform = CGAffineTransformIdentity;
593-
const tx = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateX || 0, 0));
594-
const ty = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateY || 0, 0));
593+
const tx = view.translateX;
594+
const ty = view.translateY;
595595
result = CGAffineTransformTranslate(result, tx, ty);
596596
result = CGAffineTransformRotate(result, (view.rotate || 0) * Math.PI / 180);
597597
result = CGAffineTransformScale(result, view.scaleX || 1, view.scaleY || 1);

‎tns-core-modules/ui/core/view/view-common.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions.
2-
import { View as ViewDefinition, Point, Size, Color } from ".";
2+
import { View as ViewDefinition, Point, Size, Color, dip } from ".";
33
import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
44

55
// Types.
@@ -366,17 +366,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
366366
this.style.rotate = value;
367367
}
368368

369-
get translateX(): Length {
369+
get translateX(): dip {
370370
return this.style.translateX;
371371
}
372-
set translateX(value: Length) {
372+
set translateX(value: dip) {
373373
this.style.translateX = value;
374374
}
375375

376-
get translateY(): Length {
376+
get translateY(): dip {
377377
return this.style.translateY;
378378
}
379-
set translateY(value: Length) {
379+
set translateY(value: dip) {
380380
this.style.translateY = value;
381381
}
382382

‎tns-core-modules/ui/core/view/view.android.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions.
2-
import { Point, CustomLayoutView as CustomLayoutViewDefinition } from ".";
2+
import { Point, CustomLayoutView as CustomLayoutViewDefinition, dip } from ".";
33
import { GestureTypes, GestureEventData } from "../../gestures";
44

55
// Types.
@@ -415,18 +415,18 @@ export class View extends ViewCommon {
415415
org.nativescript.widgets.ViewHelper.setScaleY(this.nativeView, float(value));
416416
}
417417

418-
[translateXProperty.getDefault](): Length | number {
419-
return org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView);
418+
[translateXProperty.getDefault](): dip {
419+
return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView));
420420
}
421-
[translateXProperty.setNative](value: Length) {
422-
org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, Length.toDevicePixels(value, 0));
421+
[translateXProperty.setNative](value: dip) {
422+
org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, layout.toDevicePixels(value));
423423
}
424424

425-
[translateYProperty.getDefault](): Length | number {
426-
return org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView);
425+
[translateYProperty.getDefault](): dip {
426+
return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView));
427427
}
428-
[translateYProperty.setNative](value: Length) {
429-
org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, Length.toDevicePixels(value, 0));
428+
[translateYProperty.setNative](value: dip) {
429+
org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, layout.toDevicePixels(value));
430430
}
431431

432432
[zIndexProperty.getDefault](): number {

‎tns-core-modules/ui/core/view/view.d.ts‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,24 @@ export * from "../../styling/style-properties";
1313

1414
export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
1515

16+
/**
17+
* Denotes a length number that is in device independent pixels units.
18+
*/
19+
export type dip = number;
20+
21+
/**
22+
* Denotes a length number that is in phisical device pixels.
23+
*/
24+
export type px = number;
25+
26+
/**
27+
* Denotes a normalized percent number.
28+
* 0% is represented as 0
29+
* 50% is represented as 0.5
30+
* 100% is represented as 1
31+
*/
32+
export type percent = number;
33+
1634
/**
1735
* The Point interface describes a two dimensional location.
1836
* 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 {
228246
rotate: number;
229247

230248
/**
231-
* Gets or sets the translateX affine transform of the view.
249+
* Gets or sets the translateX affine transform of the view in device independent pixels.
232250
*/
233-
translateX: Length;
251+
translateX: dip;
234252

235253
/**
236-
* Gets or sets the translateY affine transform of the view.
254+
* Gets or sets the translateY affine transform of the view in device independent pixels.
237255
*/
238-
translateY: Length;
256+
translateY: dip;
239257

240258
/**
241259
* Gets or sets the scaleX affine transform of the view.

‎tns-core-modules/ui/core/view/view.ios.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions.
2-
import { Point, View as ViewDefinition } from ".";
2+
import { Point, View as ViewDefinition, dip } from ".";
33

44
import { ios, Background } from "../../styling/background";
55
import {
@@ -8,7 +8,7 @@ import {
88
} from "./view-common";
99

1010
import {
11-
Visibility, Length,
11+
Visibility,
1212
visibilityProperty, opacityProperty,
1313
rotateProperty, scaleXProperty, scaleYProperty,
1414
translateXProperty, translateYProperty, zIndexProperty,
@@ -232,13 +232,11 @@ export class View extends ViewCommon {
232232
}
233233

234234
public updateNativeTransform() {
235-
let translateX = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateX || 0, 0));
236-
let translateY = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateY || 0, 0));
237235
let scaleX = this.scaleX || 1e-6;
238236
let scaleY = this.scaleY || 1e-6;
239237
let rotate = this.rotate || 0;
240238
let newTransform = CGAffineTransformIdentity;
241-
newTransform = CGAffineTransformTranslate(newTransform, translateX, translateY);
239+
newTransform = CGAffineTransformTranslate(newTransform, this.translateX, this.translateY);
242240
newTransform = CGAffineTransformRotate(newTransform, rotate * Math.PI / 180);
243241
newTransform = CGAffineTransformScale(newTransform, scaleX, scaleY);
244242
if (!CGAffineTransformEqualToTransform(this.nativeView.transform, newTransform)) {
@@ -370,17 +368,17 @@ export class View extends ViewCommon {
370368
this.updateNativeTransform();
371369
}
372370

373-
[translateXProperty.getDefault](): Length | number {
371+
[translateXProperty.getDefault](): dip {
374372
return 0;
375373
}
376-
[translateXProperty.setNative](value: Length) {
374+
[translateXProperty.setNative](value: dip) {
377375
this.updateNativeTransform();
378376
}
379377

380-
[translateYProperty.getDefault](): Length | number {
378+
[translateYProperty.getDefault](): dip {
381379
return 0;
382380
}
383-
[translateYProperty.setNative](value: Length) {
381+
[translateYProperty.setNative](value: dip) {
384382
this.updateNativeTransform();
385383
}
386384

0 commit comments

Comments
 (0)