allow passing in vectors as props

Author: baseten

examples/3d-cubes/package-lock.json

@@ -5,7 +5,7 @@ import { FlatMaterial } from './FlatMaterial';
 import { halfPi, yAxis, xAxis } from '../constants';
 
 export function Cube(props) {
-  const { faceSize, color, shadowColor, ...otherProps } = props;
+  const { faceSize, color, ...otherProps } = props;
 
   const halfFaceSize = faceSize / 2;
 

examples/3d-cubes/src/components/Cube.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-//import { glMatrixType, vec3Shape } from 'react-css-transform';
+import { glMatrixType } from 'react-css-transform';
 import { vec3, mat3 } from 'gl-matrix';
 
 function hexStringToRgb(hexString) {
@@ -88,7 +88,7 @@ export class FlatMaterial extends React.Component {
 
 FlatMaterial.propTypes = {
   color: PropTypes.string.isRequired,
-  parentMatrixWorld: PropTypes.oneOfType([PropTypes.instanceOf(Float32Array), PropTypes.array]),
+  parentMatrixWorld: glMatrixType,
   style: PropTypes.object,
   children: PropTypes.node.isRequired,
 };

examples/3d-cubes/src/components/FlatMaterial.js

@@ -1,6 +1,6 @@
 {
   "name": "react-css-transform",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A React component to help handle complex nested 2d and 3d css transformations ",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package.json

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { mat2d, vec2 } from 'gl-matrix';
 
 import { MULTIPLICATION_ORDER, vec2Shape, glMatrixType } from './constants';
+import { setVec2FromProp } from './utils';
 
 export default class Transform2d extends React.Component {
   static propTypes = {
     parentMatrixWorld: glMatrixType,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: vec2Shape,
-    scale: PropTypes.oneOfType([vec2Shape, glMatrixType, PropTypes.number]),
+    translate: PropTypes.oneOfType([glMatrixType, vec2Shape]),
+    scale: PropTypes.oneOfType([glMatrixType, vec2Shape, PropTypes.number]),
     rotate: PropTypes.number,
     children: PropTypes.node.isRequired,
   };
@@ -28,24 +29,11 @@ export default class Transform2d extends React.Component {
     const { children, parentMatrixWorld, multiplicationOrder, translate, scale, rotate } = this.props;
     const { matrix, matrixWorld, vTranslation, vScale } = this;
 
-    const tx = translate && translate.x ? translate.x : 0;
-    const ty = translate && translate.y ? translate.y : 0;
-
-    let sx, sy;
-
-    if (typeof scale === 'number') {
-      sx = scale;
-      sy = scale;
-    } else {
-      sx = scale && scale.x ? scale.x : 1;
-      sy = scale && scale.y ? scale.y : 1;
-    }
-
-    vec2.set(vTranslation, tx, ty);
-    vec2.set(vScale, sx, sy);
-
     mat2d.identity(matrix);
 
+    setVec2FromProp(vTranslation, translate);
+    setVec2FromProp(vScale, scale, 1);
+
     // T * R * S
     mat2d.translate(matrix, matrix, vTranslation);
     mat2d.rotate(matrix, matrix, rotate || 0);

src/Transform2d.js

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import { mat4, vec3 } from 'gl-matrix';
 
 import { MULTIPLICATION_ORDER, vec3Shape, glMatrixType } from './constants';
+import { setVec3FromProp } from './utils';
 
 export default class Transform3d extends React.Component {
   static propTypes = {
     parentMatrixWorld: glMatrixType,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: vec3Shape,
-    scale: PropTypes.oneOfType([vec3Shape, PropTypes.number]),
+    translate: PropTypes.oneOfType([glMatrixType, vec3Shape]),
+    scale: PropTypes.oneOfType([glMatrixType, vec3Shape, PropTypes.number]),
     rotate: PropTypes.number,
-    rotateAxis: vec3Shape,
+    rotateAxis: PropTypes.oneOfType([glMatrixType, vec3Shape]),
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   };
 
@@ -35,33 +36,15 @@ export default class Transform3d extends React.Component {
     const { children, parentMatrixWorld, multiplicationOrder, translate, rotate, rotateAxis, scale } = this.props;
     const { matrix, matrixWorld, vTranslation, vScale, vRotationAxis } = this;
 
-    const tx = translate && translate.x ? translate.x : 0;
-    const ty = translate && translate.y ? translate.y : 0;
-    const tz = translate && translate.z ? translate.z : 0;
-
-    const theta = typeof rotate === 'number' ? rotate : 0;
-
-    let sx, sy, sz;
-
-    if (typeof scale === 'number') {
-      sx = scale;
-      sy = scale;
-      sz = scale;
-    } else {
-      sx = scale && scale.x ? scale.x : 1;
-      sy = scale && scale.y ? scale.y : 1;
-      sz = scale && scale.z ? scale.z : 1;
-    }
-
-    vec3.set(vTranslation, tx, ty, tz);
-    vec3.set(vScale, sx, sy, sz);
-    vec3.set(vRotationAxis, rotateAxis.x, rotateAxis.y, rotateAxis.z);
-
     mat4.identity(matrix);
 
+    setVec3FromProp(vTranslation, translate);
+    setVec3FromProp(vScale, scale, 1, 1, 1);
+    setVec3FromProp(vRotationAxis, rotateAxis, 0, 0, 1);
+
     // T * R * S
     mat4.translate(matrix, matrix, vTranslation);
-    mat4.rotate(matrix, matrix, theta, vRotationAxis);
+    mat4.rotate(matrix, matrix, rotate || 0, vRotationAxis);
     mat4.scale(matrix, matrix, vScale);
 
     if (multiplicationOrder === MULTIPLICATION_ORDER.PRE) {

src/Transform3d.js

@@ -0,0 +1,56 @@
+import { vec2, vec3, glMatrix } from 'gl-matrix';
+
+export function setVec2FromProp(v, prop, defaultValue = 0) {
+  let x = defaultValue;
+  let y = defaultValue;
+
+  if (!prop) {
+    return vec2.set(v, x, y);
+  }
+
+  if (typeof prop === 'number') {
+    x = prop;
+    y = prop;
+  } else {
+    const usingTypedArray = glMatrix.ARRAY_TYPE === Float32Array;
+    const isArray = usingTypedArray ? prop.byteLength !== undefined : Array.isArray(prop);
+
+    if (isArray) {
+      [x, y] = prop;
+    } else if (typeof prop === 'object') {
+      x = prop.x || defaultValue;
+      y = prop.y || defaultValue;
+    }
+  }
+
+  return vec2.set(v, x, y);
+}
+
+export function setVec3FromProp(v, prop, defaultX = 0, defaultY = 0, defaultZ = 0) {
+  let x = defaultX;
+  let y = defaultY;
+  let z = defaultZ;
+
+  if (!prop) {
+    return vec3.set(v, x, y, z);
+  }
+
+  if (typeof prop === 'number') {
+    x = prop;
+    y = prop;
+    z = prop;
+  } else {
+    const usingTypedArray = glMatrix.ARRAY_TYPE === Float32Array;
+    const isArray = usingTypedArray ? prop.byteLength !== undefined : Array.isArray(prop);
+
+    if (isArray) {
+      [x, y, z] = prop;
+    } else if (typeof prop === 'object') {
+      x = prop.x || defaultX;
+      y = prop.y || defaultY;
+      z = prop.z || defaultZ;
+    }
+  }
+
+  return vec3.set(v, x, y, z);
+}