From be1eb45bf93cf971e833ee3767e4cb4d5343e0b3 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 26 Feb 2016 13:10:02 -0800
Subject: [PATCH] Fix #6 - add interpolateTransformCss.

---
 README.md                  |  12 +++--
 index.js                   |   2 +-
 package.json               |   2 +-
 src/transform.js           | 105 -------------------------------------
 src/transform/decompose.js |  34 ++++++++++++
 src/transform/index.js     |  63 ++++++++++++++++++++++
 src/transform/parse.js     |  24 +++++++++
 7 files changed, 131 insertions(+), 111 deletions(-)
 delete mode 100644 src/transform.js
 create mode 100644 src/transform/decompose.js
 create mode 100644 src/transform/index.js
 create mode 100644 src/transform/parse.js

diff --git a/README.md b/README.md
index 6056b15..2fb3bea 100644
--- a/README.md
+++ b/README.md
@@ -31,11 +31,11 @@ Note that the generic value interpolator detects not only nested objects and arr
 
 ## Installing
 
-If you use NPM, `npm install d3-interpolate`. Otherwise, download the [latest release](https://github.com/d3/d3-interpolate/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-interpolate.v0.5.min.js) or as part of [D3 4.0 alpha](https://github.com/mbostock/d3/tree/4). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3_interpolate` global is exported:
+If you use NPM, `npm install d3-interpolate`. Otherwise, download the [latest release](https://github.com/d3/d3-interpolate/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-interpolate.v0.6.min.js) or as part of [D3 4.0 alpha](https://github.com/mbostock/d3/tree/4). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3_interpolate` global is exported:
 
 ```html
 <script src="https://d3js.org/d3-color.v0.4.min.js"></script>
-<script src="https://d3js.org/d3-interpolate.v0.5.min.js"></script>
+<script src="https://d3js.org/d3-interpolate.v0.6.min.js"></script>
 <script>
 
 var interpolate = d3_interpolate.interpolateRgb("steelblue", "brown");
@@ -122,9 +122,13 @@ Object interpolation is particularly useful for *dataspace interpolation*, where
 
 Note: **no defensive copy** of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator. No copy is made for performance reasons; interpolators are often part of the inner loop of [animated transitions](https://github.com/d3/d3-transition).
 
-<a name="interpolateTransform" href="#interpolateTransform">#</a> d3.<b>interpolateTransform</b>(<i>a</i>, <i>b</i>)
+<a name="interpolateTransformCss" href="#interpolateTransformCss">#</a> d3.<b>interpolateTransformCss</b>(<i>a</i>, <i>b</i>)
 
-Returns an interpolator between the two 2D affine transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
+Returns an interpolator between the two 2D CSS transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
+
+<a name="interpolateTransformSvg" href="#interpolateTransformSvg">#</a> d3.<b>interpolateTransformSvg</b>(<i>a</i>, <i>b</i>)
+
+Returns an interpolator between the two 2D SVG transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
 
 <a name="interpolateZoom" href="#interpolateZoom">#</a> d3.<b>interpolateZoom</b>(<i>a</i>, <i>b</i>)
 
diff --git a/index.js b/index.js
index 2392414..6a9f927 100644
--- a/index.js
+++ b/index.js
@@ -5,7 +5,7 @@ export {default as interpolateNumber} from "./src/number";
 export {default as interpolateObject} from "./src/object";
 export {default as interpolateRound} from "./src/round";
 export {default as interpolateString} from "./src/string";
-export {default as interpolateTransform} from "./src/transform";
+export {interpolateTransformCss, interpolateTransformSvg} from "./src/transform/index";
 export {default as interpolateZoom} from "./src/zoom";
 export {default as interpolateRgb} from "./src/rgb";
 export {default as interpolateHsl} from "./src/hsl";
diff --git a/package.json b/package.json
index 9b167fb..4069ee4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "pretest": "mkdir -p build && node -e 'process.stdout.write(\"var version = \\\"\" + require(\"./package.json\").version + \"\\\"; export * from \\\"../index\\\"; export {version};\");' > build/bundle.js && rollup -f umd -g d3-color:d3_color -n d3_interpolate -o build/d3-interpolate.js -- build/bundle.js",
     "test": "faucet `find test -name '*-test.js'` && eslint index.js src test",
     "prepublish": "npm run test && uglifyjs build/d3-interpolate.js -c -m -o build/d3-interpolate.min.js && rm -f build/d3-interpolate.zip && zip -j build/d3-interpolate.zip -- LICENSE README.md build/d3-interpolate.js build/d3-interpolate.min.js",
-    "postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-interpolate.js ../d3.github.com/d3-interpolate.v0.5.js && cp build/d3-interpolate.min.js ../d3.github.com/d3-interpolate.v0.5.min.js && cd ../d3.github.com && git add d3-interpolate.v0.5.js d3-interpolate.v0.5.min.js && git commit -m \"d3-interpolate ${VERSION}\" && git push"
+    "postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-interpolate.js ../d3.github.com/d3-interpolate.v0.6.js && cp build/d3-interpolate.min.js ../d3.github.com/d3-interpolate.v0.6.min.js && cd ../d3.github.com && git add d3-interpolate.v0.6.js d3-interpolate.v0.6.min.js && git commit -m \"d3-interpolate ${VERSION}\" && git push"
   },
   "dependencies": {
     "d3-color": "~0.4.0"
diff --git a/src/transform.js b/src/transform.js
deleted file mode 100644
index 8d7a2af..0000000
--- a/src/transform.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import number from "./number";
-
-var rad2deg = 180 / Math.PI,
-    identity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0},
-    g;
-
-// Compute x-scale and normalize the first row.
-// Compute shear and make second row orthogonal to first.
-// Compute y-scale and normalize the second row.
-// Finally, compute the rotation.
-function Transform(string) {
-  if (!g) g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  if (string) g.setAttribute("transform", string), t = g.transform.baseVal.consolidate();
-
-  var t,
-      m = t ? t.matrix : identity,
-      r0 = [m.a, m.b],
-      r1 = [m.c, m.d],
-      kx = normalize(r0),
-      kz = dot(r0, r1),
-      ky = normalize(combine(r1, r0, -kz)) || 0;
-
-  if (r0[0] * r1[1] < r1[0] * r0[1]) {
-    r0[0] *= -1;
-    r0[1] *= -1;
-    kx *= -1;
-    kz *= -1;
-  }
-
-  this.rotate = (kx ? Math.atan2(r0[1], r0[0]) : Math.atan2(-r1[0], r1[1])) * rad2deg;
-  this.translate = [m.e, m.f];
-  this.scale = [kx, ky];
-  this.skew = ky ? Math.atan2(kz, ky) * rad2deg : 0;
-}
-
-function dot(a, b) {
-  return a[0] * b[0] + a[1] * b[1];
-}
-
-function normalize(a) {
-  var k = Math.sqrt(dot(a, a));
-  if (k) a[0] /= k, a[1] /= k;
-  return k;
-}
-
-function combine(a, b, k) {
-  a[0] += k * b[0];
-  a[1] += k * b[1];
-  return a;
-}
-
-function pop(s) {
-  return s.length ? s.pop() + "," : "";
-}
-
-function translate(ta, tb, s, q) {
-  if (ta[0] !== tb[0] || ta[1] !== tb[1]) {
-    var i = s.push("translate(", null, ",", null, ")");
-    q.push({i: i - 4, x: number(ta[0], tb[0])}, {i: i - 2, x: number(ta[1], tb[1])});
-  } else if (tb[0] || tb[1]) {
-    s.push("translate(" + tb + ")");
-  }
-}
-
-function rotate(ra, rb, s, q) {
-  if (ra !== rb) {
-    if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360; // shortest path
-    q.push({i: s.push(pop(s) + "rotate(", null, ")") - 2, x: number(ra, rb)});
-  } else if (rb) {
-    s.push(pop(s) + "rotate(" + rb + ")");
-  }
-}
-
-function skew(wa, wb, s, q) {
-  if (wa !== wb) {
-    q.push({i: s.push(pop(s) + "skewX(", null, ")") - 2, x: number(wa, wb)});
-  } else if (wb) {
-    s.push(pop(s) + "skewX(" + wb + ")");
-  }
-}
-
-function scale(ka, kb, s, q) {
-  if (ka[0] !== kb[0] || ka[1] !== kb[1]) {
-    var i = s.push(pop(s) + "scale(", null, ",", null, ")");
-    q.push({i: i - 4, x: number(ka[0], kb[0])}, {i: i - 2, x: number(ka[1], kb[1])});
-  } else if (kb[0] !== 1 || kb[1] !== 1) {
-    s.push(pop(s) + "scale(" + kb + ")");
-  }
-}
-
-export default function(a, b) {
-  var s = [], // string constants and placeholders
-      q = []; // number interpolators
-  a = new Transform(a), b = new Transform(b);
-  translate(a.translate, b.translate, s, q);
-  rotate(a.rotate, b.rotate, s, q);
-  skew(a.skew, b.skew, s, q);
-  scale(a.scale, b.scale, s, q);
-  a = b = null; // gc
-  return function(t) {
-    var i = -1, n = q.length, o;
-    while (++i < n) s[(o = q[i]).i] = o.x(t);
-    return s.join("");
-  };
-}
diff --git a/src/transform/decompose.js b/src/transform/decompose.js
new file mode 100644
index 0000000..1f4d962
--- /dev/null
+++ b/src/transform/decompose.js
@@ -0,0 +1,34 @@
+var rad2deg = 180 / Math.PI;
+
+export default function(matrix) {
+  var r0 = [matrix.a, matrix.b],
+      r1 = [matrix.c, matrix.d],
+      kx = normalize(r0),
+      kz = dot(r0, r1),
+      ky = normalize(combine(r1, r0, -kz)) || 0;
+
+  if (r0[0] * r1[1] < r1[0] * r0[1]) r0[0] *= -1, r0[1] *= -1, kx *= -1, kz *= -1;
+
+  return {
+    rotate: (kx ? Math.atan2(r0[1], r0[0]) : Math.atan2(-r1[0], r1[1])) * rad2deg,
+    translate: [matrix.e, matrix.f],
+    scale: [kx, ky],
+    skew: ky ? Math.atan2(kz, ky) * rad2deg : 0
+  };
+}
+
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1];
+}
+
+function normalize(a) {
+  var k = Math.sqrt(dot(a, a));
+  if (k) a[0] /= k, a[1] /= k;
+  return k;
+}
+
+function combine(a, b, k) {
+  a[0] += k * b[0];
+  a[1] += k * b[1];
+  return a;
+}
diff --git a/src/transform/index.js b/src/transform/index.js
new file mode 100644
index 0000000..8c56dc7
--- /dev/null
+++ b/src/transform/index.js
@@ -0,0 +1,63 @@
+import number from "../number";
+import {parseCss, parseSvg} from "./parse";
+
+function interpolateTransform(parse, pxComma, pxParen, degParen) {
+
+  function pop(s) {
+    return s.length ? s.pop() + " " : "";
+  }
+
+  function translate(ta, tb, s, q) {
+    if (ta[0] !== tb[0] || ta[1] !== tb[1]) {
+      var i = s.push("translate(", null, pxComma, null, pxParen);
+      q.push({i: i - 4, x: number(ta[0], tb[0])}, {i: i - 2, x: number(ta[1], tb[1])});
+    } else if (tb[0] || tb[1]) {
+      s.push("translate(" + tb[0] + pxComma + tb[1] + pxParen);
+    }
+  }
+
+  function rotate(ra, rb, s, q) {
+    if (ra !== rb) {
+      if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360; // shortest path
+      q.push({i: s.push(pop(s) + "rotate(", null, degParen) - 2, x: number(ra, rb)});
+    } else if (rb) {
+      s.push(pop(s) + "rotate(" + rb + degParen);
+    }
+  }
+
+  function skew(wa, wb, s, q) {
+    if (wa !== wb) {
+      q.push({i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: number(wa, wb)});
+    } else if (wb) {
+      s.push(pop(s) + "skewX(" + wb + degParen);
+    }
+  }
+
+  function scale(ka, kb, s, q) {
+    if (ka[0] !== kb[0] || ka[1] !== kb[1]) {
+      var i = s.push(pop(s) + "scale(", null, ",", null, ")");
+      q.push({i: i - 4, x: number(ka[0], kb[0])}, {i: i - 2, x: number(ka[1], kb[1])});
+    } else if (kb[0] !== 1 || kb[1] !== 1) {
+      s.push(pop(s) + "scale(" + kb + ")");
+    }
+  }
+
+  return function(a, b) {
+    var s = [], // string constants and placeholders
+        q = []; // number interpolators
+    a = parse(a), b = parse(b);
+    translate(a.translate, b.translate, s, q);
+    rotate(a.rotate, b.rotate, s, q);
+    skew(a.skew, b.skew, s, q);
+    scale(a.scale, b.scale, s, q);
+    a = b = null; // gc
+    return function(t) {
+      var i = -1, n = q.length, o;
+      while (++i < n) s[(o = q[i]).i] = o.x(t);
+      return s.join("");
+    };
+  };
+}
+
+export var interpolateTransformCss = interpolateTransform(parseCss, "px, ", "px)", "deg)");
+export var interpolateTransformSvg = interpolateTransform(parseSvg, ", ", ")", ")");
diff --git a/src/transform/parse.js b/src/transform/parse.js
new file mode 100644
index 0000000..67c4f70
--- /dev/null
+++ b/src/transform/parse.js
@@ -0,0 +1,24 @@
+import decompose from "./decompose";
+
+var identity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0},
+    cssNode,
+    cssRoot,
+    cssView,
+    svgNode;
+
+export function parseCss(value) {
+  if (value === "none") return decompose(identity);
+  if (!cssNode) cssNode = document.createElement("DIV"), cssRoot = document.documentElement, cssView = document.defaultView;
+  cssNode.style.transform = value;
+  cssRoot.appendChild(cssNode);
+  value = cssView.getComputedStyle(cssNode, null).getPropertyValue("transform");
+  cssRoot.removeChild(cssNode);
+  var m = value.slice(7, -1).split(",");
+  return decompose({a: +m[0], b: +m[1], c: +m[2], d: +m[3], e: +m[4], f: +m[5]});
+};
+
+export function parseSvg(value) {
+  if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  svgNode.setAttribute("transform", value == null ? "" : value);
+  return decompose(svgNode.transform.baseVal.consolidate().matrix);
+};