fix perspective, multiply the result matrix by perspective matrix (#27)

jmurzy · Jul 4, 2018 · 2c13d94 · 2c13d94
1 parent c56d394
commit 2c13d94
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/FoldView.js b/src/FoldView.js
@@ -209,17 +209,18 @@ export default class FoldingCell extends Component {
 
   flushTransform(ref, dx, y) {
     // Matrix multiplication is not commutative
-    const matrix = transformUtil.rotateX(dx);
+    const matrix = transformUtil.createIdentityMatrix();
+    const rotate = transformUtil.rotateX(dx);
     transformUtil.origen(matrix, { x: 0, y, z: 0 });
-
-    const perspective = this.props.perspective || rootDefaultProps.perspective;
+    transformUtil.applyPerspective(
+      matrix,
+      this.props.perspective || rootDefaultProps.perspective,
+    );
+    transformUtil.multiplyInto(matrix, matrix, rotate);
 
     ref.setNativeProps({
       style: {
         transform: [
-          {
-            perspective,
-          },
           {
             matrix,
           },

diff --git a/src/transformUtil.js b/src/transformUtil.js
@@ -24,7 +24,16 @@ function rotateX(deg) {
   ];
 }
 
+function applyPerspective(matrix, value) {
+  const perspective = MatrixMath.createIdentityMatrix();
+  MatrixMath.reusePerspectiveCommand(perspective, value);
+  MatrixMath.multiplyInto(matrix, matrix, perspective);
+}
+
 export default {
   rotateX,
+  applyPerspective,
+  createIdentityMatrix: MatrixMath.createIdentityMatrix,
+  multiplyInto: MatrixMath.multiplyInto,
   origen: transformOrigin,
 };