feat: Add 3D rotation to view - takeover of PR# 5950 (#8136)

* feat: add 3d rotation

* chore: fix build errors

* chore: fix tslint errors

* chore: add @types/chai dev dep

* chore: unused import cleanup

* chore: update tests for x,y rotation

* chore: rebase upstream/master

* fix: iOS Affine Transform test verification

* feat(css): Added optional css-tree parser (#8076)

* feat(css): Added optional css-tree parser

* test: css-tree parser compat tests

* test: more css-tree compat tests

* feat(dialogs): Setting the size of popup dialog thru dialog options (#8041)

* Added iOS specific height and width attributes to ShowModalOptions

* Set the height and width of the popup dialog to the presenting controller

* dialog options ios attributes presentationStyle, height & width are made optional

* Updated NativeScript.api.md for public API changes

* Update with git properties

* Public API

* CLA update

* fix: use iOS native-helper for 3d-rotate

* test: Fix tests using _getTransformMismatchError

* fix: view.__hasTransfrom not set updating properly

* test: fix css-animations test page

Co-authored-by: Alexander Vakrilov <alexander.vakrilov@gmail.com>
Co-authored-by: Darin Dimitrov <darin.dimitrov@gmail.com>
Co-authored-by: Shailesh Lolam <slolam@live.com>
Co-authored-by: Dimitar Topuzov <dtopuzov@gmail.com>

nativescript-core/ui/styling/style-properties.ts

@@ -472,6 +472,15 @@ function convertToPaddings(this: void, value: string | Length): [CssProperty<any
 export const rotateProperty = new CssAnimationProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0, valueConverter: parseFloat });
 rotateProperty.register(Style);
 
+export const rotateXProperty = new CssAnimationProperty<Style, number>({ name: "rotateX", cssName: "rotatex", defaultValue: 0, valueConverter: parseFloat });
+rotateXProperty.register(Style);
+
+export const rotateYProperty = new CssAnimationProperty<Style, number>({ name: "rotateY", cssName: "rotatey", defaultValue: 0, valueConverter: parseFloat });
+rotateYProperty.register(Style);
+
+export const perspectiveProperty = new CssAnimationProperty<Style, number>({ name: "perspective", cssName: "perspective", defaultValue: 1000, valueConverter: parseFloat });
+perspectiveProperty.register(Style);
+
 export const scaleXProperty = new CssAnimationProperty<Style, number>({ name: "scaleX", cssName: "scaleX", defaultValue: 1, valueConverter: parseFloat });
 scaleXProperty.register(Style);
 
@@ -500,6 +509,8 @@ const transformProperty = new ShorthandProperty<Style, string>({
         let translateX = this.translateX;
         let translateY = this.translateY;
         let rotate = this.rotate;
+        let rotateX = this.rotateX;
+        let rotateY = this.rotateY;
         let result = "";
         if (translateX !== 0 || translateY !== 0) {
             result += `translate(${translateX}, ${translateY}) `;
@@ -507,7 +518,8 @@ const transformProperty = new ShorthandProperty<Style, string>({
         if (scaleX !== 1 || scaleY !== 1) {
             result += `scale(${scaleX}, ${scaleY}) `;
         }
-        if (rotate !== 0) {
+        if (rotateX !== 0 || rotateY !== 0 || rotate !== 0) {
+            result += `rotate(${rotateX}, ${rotateY}, ${rotate}) `;
             result += `rotate (${rotate})`;
         }
 
@@ -519,13 +531,16 @@ transformProperty.register(Style);
 
 const IDENTITY_TRANSFORMATION = {
     translate: { x: 0, y: 0 },
-    rotate: 0,
+    rotate: { x: 0, y: 0, z: 0 },
     scale: { x: 1, y: 1 },
 };
 
 const TRANSFORM_SPLITTER = new RegExp(/\s*(.+?)\((.*?)\)/g);
 const TRANSFORMATIONS = Object.freeze([
     "rotate",
+    "rotateX",
+    "rotateY",
+    "rotate3d",
     "translate",
     "translate3d",
     "translateX",
@@ -547,7 +562,28 @@ const STYLE_TRANSFORMATION_MAP = Object.freeze({
     "translateX": ({ x }) => ({ property: "translate", value: { x, y: IDENTITY_TRANSFORMATION.translate.y } }),
     "translateY": ({ y }) => ({ property: "translate", value: { y, x: IDENTITY_TRANSFORMATION.translate.x } }),
 
-    "rotate": value => ({ property: "rotate", value }),
+    "rotate3d": value => ({ property: "rotate", value }),
+    "rotateX": (x) => ({
+        property: "rotate", value: {
+            x,
+            y: IDENTITY_TRANSFORMATION.rotate.y,
+            z: IDENTITY_TRANSFORMATION.rotate.z
+        }
+    }),
+    "rotateY": (y) => ({
+        property: "rotate", value: {
+            x: IDENTITY_TRANSFORMATION.rotate.x,
+            y,
+            z: IDENTITY_TRANSFORMATION.rotate.z
+        }
+    }),
+    "rotate": (z) => ({
+        property: "rotate", value: {
+            x: IDENTITY_TRANSFORMATION.rotate.x,
+            y: IDENTITY_TRANSFORMATION.rotate.y,
+            z
+        }
+    }),
 });
 
 function convertToTransform(value: string): [CssProperty<any, any>, any][] {
@@ -564,7 +600,9 @@ function convertToTransform(value: string): [CssProperty<any, any>, any][] {
         [scaleXProperty, scale.x],
         [scaleYProperty, scale.y],
 
-        [rotateProperty, rotate],
+        [rotateProperty, rotate.z],
+        [rotateXProperty, rotate.x],
+        [rotateYProperty, rotate.y],
     ];
 }
 
@@ -619,13 +657,13 @@ function normalizeTransformation({ property, value }: Transformation): Transform
 function convertTransformValue(property: string, stringValue: string)
     : TransformationValue {
 
-    const [x, y = x] = stringValue.split(",").map(parseFloat);
+    const [x, y = x, z = y] = stringValue.split(",").map(parseFloat);
 
-    if (property === "rotate") {
+    if (property === "rotate" || property === "rotateX" || property === "rotateY") {
         return stringValue.slice(-3) === "rad" ? radiansToDegrees(x) : x;
     }
 
-    return { x, y };
+    return { x, y, z };
 }
 
 // Background properties.

nativescript-core/ui/styling/style-scope.ts

@@ -525,6 +525,8 @@ export class CssState {
         const view = this.viewRef.get();
         if (view) {
             view.style["keyframe:rotate"] = unsetValue;
+            view.style["keyframe:rotateX"] = unsetValue;
+            view.style["keyframe:rotateY"] = unsetValue;
             view.style["keyframe:scaleX"] = unsetValue;
             view.style["keyframe:scaleY"] = unsetValue;
             view.style["keyframe:translateX"] = unsetValue;

nativescript-core/ui/styling/style/style.d.ts

@@ -53,6 +53,9 @@ export class Style extends Observable {
     public backgroundInternal: Background;
 
     public rotate: number;
+    public rotateX: number;
+    public rotateY: number;
+    public perspective: number;
     public scaleX: number;
     public scaleY: number;
     public translateX: dip;

nativescript-core/ui/styling/style/style.ts

@@ -86,6 +86,10 @@ export class Style extends Observable implements StyleDefinition {
     public backgroundInternal: Background;
 
     public rotate: number;
+    public rotateX: number;
+    public rotateY: number;
+    public perspective: number;
+
     public scaleX: number;
     public scaleY: number;
     public translateX: dip;