Optimize transform extraction, allow passing arrays to avoid parsing

lib/extract/extractColor.js

@@ -352,35 +352,33 @@ const hslRegEx = /^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s
 
 function rgbFromHslString(string) {
   const match = string.match(hslRegEx);
-
-  if (match) {
-    const alpha = parseFloat(match[4]);
-    const h = (parseFloat(match[1]) + 360) % 360;
-    const s = clamp(parseFloat(match[2]), 0, 100);
-    const l = clamp(parseFloat(match[3]), 0, 100);
-    const a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-
-    return hslToRgb([h, s, l, a]);
+  if (!match) {
+    return null;
   }
 
-  return null;
+  const alpha = parseFloat(match[4]);
+  const h = (parseFloat(match[1]) + 360) % 360;
+  const s = clamp(parseFloat(match[2]), 0, 100);
+  const l = clamp(parseFloat(match[3]), 0, 100);
+  const a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+
+  return hslToRgb([h, s, l, a]);
 }
 
 const hwbRegEx = /^hwb\(\s*([+-]?\d*[.]?\d+)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/;
 
 function rgbFromHwbString(string) {
   const match = string.match(hwbRegEx);
-
-  if (match) {
-    const alpha = parseFloat(match[4]);
-    const h = ((parseFloat(match[1]) % 360) + 360) % 360;
-    const w = clamp(parseFloat(match[2]), 0, 100);
-    const b = clamp(parseFloat(match[3]), 0, 100);
-    const a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-    return hwbToRgb([h, w, b, a]);
+  if (!match) {
+    return null;
   }
 
-  return null;
+  const alpha = parseFloat(match[4]);
+  const h = ((parseFloat(match[1]) % 360) + 360) % 360;
+  const w = clamp(parseFloat(match[2]), 0, 100);
+  const b = clamp(parseFloat(match[3]), 0, 100);
+  const a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+  return hwbToRgb([h, w, b, a]);
 }
 
 export default function extractColor(string) {

lib/extract/extractTransform.js

@@ -3,20 +3,35 @@ import transformParser from './transform';
 
 const pooledMatrix = new Matrix2D();
 
+function appendTransform(props) {
+  pooledMatrix.appendTransform(
+    props.x + props.originX,
+    props.y + props.originY,
+    props.scaleX,
+    props.scaleY,
+    props.rotation,
+    props.skewX,
+    props.skewY,
+    props.originX,
+    props.originY,
+  );
+}
+
 function transformToMatrix(props, transform) {
   pooledMatrix.reset();
   appendTransform(props);
 
   if (transform) {
-    appendTransform(transform);
-  }
-
-  return pooledMatrix.toArray();
-}
-
-function appendTransform(transform) {
-  if (transform) {
-    if (typeof transform === 'string') {
+    if (Array.isArray(transform)) {
+      pooledMatrix.append(
+        transform[0],
+        transform[1],
+        transform[2],
+        transform[3],
+        transform[4],
+        transform[5],
+      );
+    } else if (typeof transform === 'string') {
       try {
         const t = transformParser.parse(transform);
         pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]);
@@ -24,19 +39,11 @@ function appendTransform(transform) {
         console.error(e);
       }
     } else {
-      pooledMatrix.appendTransform(
-        transform.x + transform.originX,
-        transform.y + transform.originY,
-        transform.scaleX,
-        transform.scaleY,
-        transform.rotation,
-        transform.skewX,
-        transform.skewY,
-        transform.originX,
-        transform.originY,
-      );
+      appendTransform(transform);
     }
   }
+
+  return pooledMatrix.toArray();
 }
 
 function universal2axis(universal, axisX, axisY, defaultValue) {
@@ -68,7 +75,7 @@ function universal2axis(universal, axisX, axisY, defaultValue) {
 }
 
 export function props2transform(props) {
-  if (props && typeof props === 'string') {
+  if (Array.isArray(props) || typeof props === 'string') {
     return props;
   }
   const origin = universal2axis(props.origin, props.originX, props.originY);
@@ -95,9 +102,22 @@ export function props2transform(props) {
   };
 }
 
+const identity = [1, 0, 0, 1, 0, 0];
+
 export default function extractTransform(props) {
+  if (Array.isArray(props)) {
+    return props;
+  } else if (typeof props === 'string') {
+    try {
+      const t = transformParser.parse(props);
+      return [t[0], t[3], t[1], t[4], t[2], t[5]];
+    } catch (e) {
+      console.error(e);
+      return identity;
+    }
+  }
   return transformToMatrix(
     props2transform(props),
-    props.transform ? props2transform(props.transform) : null,
+    props.transform && props2transform(props.transform),
   );
 }