From bb4e4bed692e3bc793945964ef5fcf0c7237a1fc Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 Apr 2022 13:00:15 -0700 Subject: [PATCH 1/3] Unify platform behavior of processTransform --- Libraries/StyleSheet/processTransform.js | 121 +---------------------- 1 file changed, 1 insertion(+), 120 deletions(-) diff --git a/Libraries/StyleSheet/processTransform.js b/Libraries/StyleSheet/processTransform.js index c05375bd5912..94e3a2addb66 100644 --- a/Libraries/StyleSheet/processTransform.js +++ b/Libraries/StyleSheet/processTransform.js @@ -10,9 +10,6 @@ 'use strict'; -const MatrixMath = require('../Utilities/MatrixMath'); -const Platform = require('../Utilities/Platform'); - const invariant = require('invariant'); const stringifySafe = require('../Utilities/stringifySafe').default; @@ -31,123 +28,7 @@ function processTransform( _validateTransforms(transform); } - // Android & iOS implementations of transform property accept the list of - // transform properties as opposed to a transform Matrix. This is necessary - // to control transform property updates completely on the native thread. - if (Platform.OS === 'android' || Platform.OS === 'ios') { - return transform; - } - - const result = MatrixMath.createIdentityMatrix(); - - transform.forEach(transformation => { - const key = Object.keys(transformation)[0]; - const value = transformation[key]; - - switch (key) { - case 'matrix': - MatrixMath.multiplyInto(result, result, value); - break; - case 'perspective': - _multiplyTransform(result, MatrixMath.reusePerspectiveCommand, [value]); - break; - case 'rotateX': - _multiplyTransform(result, MatrixMath.reuseRotateXCommand, [ - _convertToRadians(value), - ]); - break; - case 'rotateY': - _multiplyTransform(result, MatrixMath.reuseRotateYCommand, [ - _convertToRadians(value), - ]); - break; - case 'rotate': - case 'rotateZ': - _multiplyTransform(result, MatrixMath.reuseRotateZCommand, [ - _convertToRadians(value), - ]); - break; - case 'scale': - _multiplyTransform(result, MatrixMath.reuseScaleCommand, [value]); - break; - case 'scaleX': - _multiplyTransform(result, MatrixMath.reuseScaleXCommand, [value]); - break; - case 'scaleY': - _multiplyTransform(result, MatrixMath.reuseScaleYCommand, [value]); - break; - case 'translate': - _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [ - value[0], - value[1], - value[2] || 0, - ]); - break; - case 'translateX': - _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [ - value, - 0, - ]); - break; - case 'translateY': - _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [ - 0, - value, - ]); - break; - case 'skewX': - _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [ - _convertToRadians(value), - ]); - break; - case 'skewY': - _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [ - _convertToRadians(value), - ]); - break; - default: - throw new Error('Invalid transform name: ' + key); - } - }); - - return result; -} - -/** - * Performs a destructive operation on a transform matrix. - */ -function _multiplyTransform( - result: Array, - matrixMathFunction: Function, - args: Array, -): void { - const matrixToApply = MatrixMath.createIdentityMatrix(); - const argsWithIdentity = [matrixToApply].concat(args); - matrixMathFunction.apply(this, argsWithIdentity); - MatrixMath.multiplyInto(result, result, matrixToApply); -} - -/** - * Parses a string like '0.5rad' or '60deg' into radians expressed in a float. - * Note that validation on the string is done in `_validateTransform()`. - */ -function _convertToRadians(value: string): number { - const floatValue = parseFloat(value); - return value.indexOf('rad') > -1 ? floatValue : (floatValue * Math.PI) / 180; -} - -function _validateTransforms(transform: Array): void { - transform.forEach(transformation => { - const keys = Object.keys(transformation); - invariant( - keys.length === 1, - 'You must specify exactly one property per transform object. Passed properties: %s', - stringifySafe(transformation), - ); - const key = keys[0]; - const value = transformation[key]; - _validateTransform(key, value, transformation); - }); + return transform; } function _validateTransform( From 494591ccf919613cb077a41658f1bfb60f0314e4 Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 Apr 2022 13:13:44 -0700 Subject: [PATCH 2/3] deleted too much --- Libraries/StyleSheet/processTransform.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Libraries/StyleSheet/processTransform.js b/Libraries/StyleSheet/processTransform.js index 94e3a2addb66..85f35df6fef3 100644 --- a/Libraries/StyleSheet/processTransform.js +++ b/Libraries/StyleSheet/processTransform.js @@ -31,6 +31,20 @@ function processTransform( return transform; } +function _validateTransforms(transform: Array): void { + transform.forEach((transformation) => { + const keys = Object.keys(transformation); + invariant( + keys.length === 1, + 'You must specify exactly one property per transform object. Passed properties: %s', + stringifySafe(transformation), + ); + const key = keys[0]; + const value = transformation[key]; + _validateTransform(key, value, transformation); + }); +} + function _validateTransform( key: | string From 626b58c07ce5985b79dd034e749e7262b69609be Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 Apr 2022 13:14:48 -0700 Subject: [PATCH 3/3] format --- Libraries/StyleSheet/processTransform.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/StyleSheet/processTransform.js b/Libraries/StyleSheet/processTransform.js index 85f35df6fef3..7b065c040375 100644 --- a/Libraries/StyleSheet/processTransform.js +++ b/Libraries/StyleSheet/processTransform.js @@ -32,7 +32,7 @@ function processTransform( } function _validateTransforms(transform: Array): void { - transform.forEach((transformation) => { + transform.forEach(transformation => { const keys = Object.keys(transformation); invariant( keys.length === 1,