From 90ed494c4fc87481eecca3faa4841bd1369808ec Mon Sep 17 00:00:00 2001 From: Felipe Martim Date: Mon, 19 Oct 2015 20:29:12 -0200 Subject: [PATCH 1/2] implementing perspective, rotateX, rotateY, skewX and skewY for Android --- Libraries/Utilities/MatrixMath.js | 6 +-- .../react/uimanager/BaseViewManager.java | 50 +++++++++++++++++-- .../uimanager/BaseViewPropertyApplicator.java | 41 +++++++++++++-- 3 files changed, 87 insertions(+), 10 deletions(-) diff --git a/Libraries/Utilities/MatrixMath.js b/Libraries/Utilities/MatrixMath.js index 23db73811f18..d73ac99c5781 100755 --- a/Libraries/Utilities/MatrixMath.js +++ b/Libraries/Utilities/MatrixMath.js @@ -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( @@ -581,7 +581,7 @@ var MatrixMath = { skew, translation, - rotate: rotationDegrees[2], + perspectiveZ: perspective[2] != 0 ? -1/perspective[2] : 1280, scaleX: scale[0], scaleY: scale[1], translateX: translation[0], diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index fbbae4c1b180..0146fe6f3940 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -7,19 +7,22 @@ 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}. * It provides support for base view properties such as backgroundColor, opacity, etc. */ -public abstract class BaseViewManager +public abstract class BaseViewManager extends ViewManager { 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_Z = "perspectiveZ"; + 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"; @@ -30,7 +33,10 @@ public abstract class BaseViewManager Date: Thu, 22 Oct 2015 21:23:30 -0200 Subject: [PATCH 2/2] corrections --- Libraries/Utilities/MatrixMath.js | 3 +- .../react/uimanager/BaseViewManager.java | 11 +++--- .../uimanager/BaseViewPropertyApplicator.java | 35 ++++--------------- 3 files changed, 14 insertions(+), 35 deletions(-) diff --git a/Libraries/Utilities/MatrixMath.js b/Libraries/Utilities/MatrixMath.js index d73ac99c5781..00eaaaad67be 100755 --- a/Libraries/Utilities/MatrixMath.js +++ b/Libraries/Utilities/MatrixMath.js @@ -575,13 +575,12 @@ var MatrixMath = { // expose both base data and convenience names return { rotationDegrees, - perspective, quaternion, scale, skew, translation, - perspectiveZ: perspective[2] != 0 ? -1/perspective[2] : 1280, + perspective: perspective[2] != 0 ? -1/perspective[2] : 1280, scaleX: scale[0], scaleY: scale[1], translateX: translation[0], diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 0146fe6f3940..0fd53a59b2e0 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -13,12 +13,12 @@ * Base class that should be suitable for the majority of subclasses of {@link ViewManager}. * It provides support for base view properties such as backgroundColor, opacity, etc. */ -public abstract class BaseViewManager +public abstract class BaseViewManager extends ViewManager { 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_PERSPECTIVE_Z = "perspectiveZ"; + 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"; @@ -171,8 +171,10 @@ private static void setTransformMatrix(View view, ReadableMap matrix) { (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_Z)); + (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_PERSPECTIVE) * scale); ReadableArray skewArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_SKEW); view.getMatrix().setSkew( @@ -196,7 +198,8 @@ private static void resetTransformMatrix(View view) { view.setRotationY(0); view.setScaleX(1); view.setScaleY(1); - view.setCameraDistance(1280); + float scale = DisplayMetricsHolder.getDisplayMetrics().density; + view.setCameraDistance(1280 * scale); view.getMatrix().setSkew(0, 0); } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewPropertyApplicator.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewPropertyApplicator.java index fa460f2fd466..834c082a4e5d 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewPropertyApplicator.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewPropertyApplicator.java @@ -27,7 +27,7 @@ public class BaseViewPropertyApplicator { private static final String PROP_DECOMPOSED_MATRIX = "decomposedMatrix"; - private static final String PROP_DECOMPOSED_MATRIX_PERSPECTIVE_Z = "perspectiveZ"; + 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"; @@ -139,32 +139,6 @@ public static void applyCommonViewProperties(View view, CatalystStylesDiffMap pr view.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS); } } - - // DEPRECATED - if (props.hasKey(PROP_PERSPECTIVE)) { - view.setCameraDistance(props.getFloat(PROP_PERSPECTIVE, 1280)); - } - if (props.hasKey(PROP_ROTATION)) { - view.setRotation(props.getFloat(PROP_ROTATION, 0)); - } - if (props.hasKey(PROP_ROTATION_X)) { - view.setRotationX(props.getFloat(PROP_ROTATION_X, 0)); - } - if (props.hasKey(PROP_ROTATION_Y)) { - view.setRotationY(props.getFloat(PROP_ROTATION_Y, 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) { @@ -176,8 +150,10 @@ private static void setTransformMatrix(View view, ReadableMap matrix) { (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_Z)); + (float) matrix.getDouble(PROP_DECOMPOSED_MATRIX_PERSPECTIVE) * scale); ReadableArray skewArray = matrix.getArray(PROP_DECOMPOSED_MATRIX_SKEW); view.getMatrix().setSkew( @@ -201,7 +177,8 @@ private static void resetTransformMatrix(View view) { view.setRotationY(0); view.setScaleX(1); view.setScaleY(1); - view.setCameraDistance(1280); + float scale = DisplayMetricsHolder.getDisplayMetrics().density; + view.setCameraDistance(1280 * scale); view.getMatrix().setSkew(0, 0); } }