Skip to content

Implementing perspective, rotateX, rotateY, skewX and skewY for Android #3522

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

Closed
felipemartim wants to merge 3 commits into from
Closed

Implementing perspective, rotateX, rotateY, skewX and skewY for Android #3522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90ed494
implementing perspective, rotateX, rotateY, skewX and skewY for Android
Oct 19, 2015
9cc31ff
Merge branch 'master' of https://github.com/facebook/react-native
Oct 22, 2015
74e460b
corrections
Oct 22, 2015
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
7 changes: 3 additions & 4 deletions Libraries/Utilities/MatrixMath.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,10 +464,10 @@ var MatrixMath = {

// Solve the equation by inverting perspectiveMatrix and multiplying
// rightHandSide by the inverse.
var inversePerspectiveMatrix = MatrixMath.inverse3x3(
var inversePerspectiveMatrix = MatrixMath.inverse(
perspectiveMatrix
);
var transposedInversePerspectiveMatrix = MatrixMath.transpose4x4(
var transposedInversePerspectiveMatrix = MatrixMath.transpose(
inversePerspectiveMatrix
);
var perspective = MatrixMath.multiplyVectorByMatrix(
Expand Down Expand Up @@ -575,13 +575,12 @@ var MatrixMath = {
// expose both base data and convenience names
return {
rotationDegrees,
perspective,
quaternion,
scale,
skew,
translation,

rotate: rotationDegrees[2],
perspective: perspective[2] != 0 ? -1/perspective[2] : 1280,
Copy link
Copy Markdown
Contributor

@mkonicek mkonicek Nov 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 1280? Can you add a comment explaining this?

scaleX: scale[0],
scaleY: scale[1],
translateX: translation[0],
Copy link
Copy Markdown
Contributor

@mkonicek mkonicek Oct 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are the changes in this file needed? What's your test plan to make sure it doesn't break existing iOS behavior?

Expand Down
51 changes: 48 additions & 3 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import android.view.View;

import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReadableArray;

/**
* Base class that should be suitable for the majority of subclasses of {@link ViewManager}.
Expand All @@ -17,9 +18,11 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode

private static final String PROP_BACKGROUND_COLOR = ViewProps.BACKGROUND_COLOR;
private static final String PROP_DECOMPOSED_MATRIX = "decomposedMatrix";
private static final String PROP_DECOMPOSED_MATRIX_ROTATE = "rotate";
private static final String PROP_DECOMPOSED_MATRIX_PERSPECTIVE = "perspective";
private static final String PROP_DECOMPOSED_MATRIX_ROTATION = "rotationDegrees";
Copy link
Copy Markdown
Contributor

@mkonicek mkonicek Nov 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh OK, is it rotationDegrees, rather than rotate on iOS as well?

private static final String PROP_DECOMPOSED_MATRIX_SCALE_X = "scaleX";
private static final String PROP_DECOMPOSED_MATRIX_SCALE_Y = "scaleY";
private static final String PROP_DECOMPOSED_MATRIX_SKEW = "skew";
private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_X = "translateX";
private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_Y = "translateY";
private static final String PROP_OPACITY = "opacity";
Expand All @@ -30,7 +33,10 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
private static final String PROP_IMPORTANT_FOR_ACCESSIBILITY = "importantForAccessibility";

// DEPRECATED
Copy link
Copy Markdown
Contributor

@chirag04 chirag04 Oct 19, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kmagiera can we take out deprecated ones just like ios?

private static final String PROP_PERSPECTIVE = "perspective";
private static final String PROP_ROTATION = "rotation";
private static final String PROP_ROTATION_X = "rotationX";
private static final String PROP_ROTATION_Y = "rotationY";
private static final String PROP_SCALE_X = "scaleX";
private static final String PROP_SCALE_Y = "scaleY";
private static final String PROP_TRANSLATE_X = "translateX";
Expand Down Expand Up @@ -94,12 +100,30 @@ public void setImportantForAccessibility(T view, String importantForAccessibilit
}
}

@Deprecated
@ReactProp(name = PROP_PERSPECTIVE)
public void setCameraDistance(T view, float perspective) {
view.setCameraDistance(perspective);
}

@Deprecated
@ReactProp(name = PROP_ROTATION)
public void setRotation(T view, float rotation) {
view.setRotation(rotation);
}

@Deprecated
@ReactProp(name = PROP_ROTATION_X)
public void setRotationX(T view, float rotation) {
view.setRotationX(rotation);
}

@Deprecated
Copy link
Copy Markdown
Contributor

@mkonicek mkonicek Oct 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why Deprecated? You've just added this code.

@ReactProp(name = PROP_ROTATION_Y)
public void setRotationY(T view, float rotation) {
view.setRotationY(rotation);
}

@Deprecated
@ReactProp(name = PROP_SCALE_X, defaultFloat = 1f)
public void setScaleX(T view, float scaleX) {
Expand Down Expand Up @@ -142,19 +166,40 @@ private static void setTransformMatrix(View view, ReadableMap matrix) {
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_TRANSLATE_X)));
view.setTranslationY(PixelUtil.toPixelFromDIP(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_TRANSLATE_Y)));
view.setRotation(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_ROTATE));

view.setScaleX(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_SCALE_X));
view.setScaleY(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_SCALE_Y));

float scale = DisplayMetricsHolder.getDisplayMetrics().density;
view.setCameraDistance(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_PERSPECTIVE) * scale);

ReadableArray skewArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_SKEW);
view.getMatrix().setSkew(
(float) skewArray.getDouble(0), (float) skewArray.getDouble(1)
);

ReadableArray rotationArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_ROTATION);
view.setRotationX(
(float) rotationArray.getDouble(0));
view.setRotationY(
(float) rotationArray.getDouble(1));
view.setRotation(
(float) rotationArray.getDouble(2));
}

private static void resetTransformMatrix(View view) {
view.setTranslationX(PixelUtil.toPixelFromDIP(0));
view.setTranslationY(PixelUtil.toPixelFromDIP(0));
view.setRotation(0);
view.setRotationX(0);
view.setRotationY(0);
view.setScaleX(1);
view.setScaleY(1);
float scale = DisplayMetricsHolder.getDisplayMetrics().density;
view.setCameraDistance(1280 * scale);
view.getMatrix().setSkew(0, 0);
}
}
52 changes: 32 additions & 20 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewPropertyApplicator.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import android.os.Build;
import android.view.View;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReadableArray;

/**
* Takes common view properties from JS and applies them to a given {@link View}.
Expand All @@ -26,9 +27,11 @@
public class BaseViewPropertyApplicator {

private static final String PROP_DECOMPOSED_MATRIX = "decomposedMatrix";
private static final String PROP_DECOMPOSED_MATRIX_ROTATE = "rotate";
private static final String PROP_DECOMPOSED_MATRIX_PERSPECTIVE = "perspective";
private static final String PROP_DECOMPOSED_MATRIX_ROTATION = "rotationDegrees";
private static final String PROP_DECOMPOSED_MATRIX_SCALE_X = "scaleX";
private static final String PROP_DECOMPOSED_MATRIX_SCALE_Y = "scaleY";
private static final String PROP_DECOMPOSED_MATRIX_SKEW = "skew";
private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_X = "translateX";
private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_Y = "translateY";
private static final String PROP_OPACITY = "opacity";
Expand All @@ -39,7 +42,10 @@ public class BaseViewPropertyApplicator {
private static final String PROP_IMPORTANT_FOR_ACCESSIBILITY = "importantForAccessibility";

// DEPRECATED
private static final String PROP_PERSPECTIVE = "perspective";
private static final String PROP_ROTATION = "rotation";
private static final String PROP_ROTATION_X = "rotationX";
private static final String PROP_ROTATION_Y = "rotationY";
private static final String PROP_SCALE_X = "scaleX";
private static final String PROP_SCALE_Y = "scaleY";
private static final String PROP_TRANSLATE_X = "translateX";
Expand All @@ -59,7 +65,10 @@ public class BaseViewPropertyApplicator {
props.put(ViewProps.BACKGROUND_COLOR, UIProp.Type.STRING);
props.put(PROP_IMPORTANT_FOR_ACCESSIBILITY, UIProp.Type.STRING);
props.put(PROP_OPACITY, UIProp.Type.NUMBER);
props.put(PROP_PERSPECTIVE, UIProp.Type.NUMBER);
props.put(PROP_ROTATION, UIProp.Type.NUMBER);
props.put(PROP_ROTATION_X, UIProp.Type.NUMBER);
props.put(PROP_ROTATION_Y, UIProp.Type.NUMBER);
props.put(PROP_SCALE_X, UIProp.Type.NUMBER);
props.put(PROP_SCALE_Y, UIProp.Type.NUMBER);
props.put(PROP_TRANSLATE_X, UIProp.Type.NUMBER);
Expand Down Expand Up @@ -130,43 +139,46 @@ public static void applyCommonViewProperties(View view, CatalystStylesDiffMap pr
view.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS);
}
}

// DEPRECATED
if (props.hasKey(PROP_ROTATION)) {
view.setRotation(props.getFloat(PROP_ROTATION, 0));
}
if (props.hasKey(PROP_SCALE_X)) {
view.setScaleX(props.getFloat(PROP_SCALE_X, 1.f));
}
if (props.hasKey(PROP_SCALE_Y)) {
view.setScaleY(props.getFloat(PROP_SCALE_Y, 1.f));
}
if (props.hasKey(PROP_TRANSLATE_X)) {
view.setTranslationX(PixelUtil.toPixelFromDIP(props.getFloat(PROP_TRANSLATE_X, 0)));
}
if (props.hasKey(PROP_TRANSLATE_Y)) {
view.setTranslationY(PixelUtil.toPixelFromDIP(props.getFloat(PROP_TRANSLATE_Y, 0)));
}
}

private static void setTransformMatrix(View view, ReadableMap matrix) {
view.setTranslationX(PixelUtil.toPixelFromDIP(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_TRANSLATE_X)));
view.setTranslationY(PixelUtil.toPixelFromDIP(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_TRANSLATE_Y)));
view.setRotation(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_ROTATE));
view.setScaleX(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_SCALE_X));
view.setScaleY(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_SCALE_Y));

float scale = DisplayMetricsHolder.getDisplayMetrics().density;
view.setCameraDistance(
(float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_PERSPECTIVE) * scale);

ReadableArray skewArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_SKEW);
view.getMatrix().setSkew(
(float) skewArray.getDouble(0), (float) skewArray.getDouble(1)
);

ReadableArray rotationArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_ROTATION);
view.setRotationX(
(float) rotationArray.getDouble(0));
view.setRotationY(
(float) rotationArray.getDouble(1));
view.setRotation(
(float) rotationArray.getDouble(2));
}

private static void resetTransformMatrix(View view) {
view.setTranslationX(PixelUtil.toPixelFromDIP(0));
view.setTranslationY(PixelUtil.toPixelFromDIP(0));
view.setRotation(0);
view.setRotationX(0);
view.setRotationY(0);
view.setScaleX(1);
view.setScaleY(1);
float scale = DisplayMetricsHolder.getDisplayMetrics().density;
view.setCameraDistance(1280 * scale);
Copy link
Copy Markdown
Contributor

@mkonicek mkonicek Nov 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 1280? Can you add a comment?

view.getMatrix().setSkew(0, 0);
}
}