convertTransform.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. 'use strict';
  2. exports.type = 'perItem';
  3. exports.active = true;
  4. exports.description = 'collapses multiple transformations and optimizes it';
  5. exports.params = {
  6. convertToShorts: true,
  7. // degPrecision: 3, // transformPrecision (or matrix precision) - 2 by default
  8. floatPrecision: 3,
  9. transformPrecision: 5,
  10. matrixToTransform: true,
  11. shortTranslate: true,
  12. shortScale: true,
  13. shortRotate: true,
  14. removeUseless: true,
  15. collapseIntoOne: true,
  16. leadingZero: true,
  17. negativeExtraSpace: false
  18. };
  19. var cleanupOutData = require('../lib/svgo/tools').cleanupOutData,
  20. transform2js = require('./_transforms.js').transform2js,
  21. transformsMultiply = require('./_transforms.js').transformsMultiply,
  22. matrixToTransform = require('./_transforms.js').matrixToTransform,
  23. degRound,
  24. floatRound,
  25. transformRound;
  26. /**
  27. * Convert matrices to the short aliases,
  28. * convert long translate, scale or rotate transform notations to the shorts ones,
  29. * convert transforms to the matrices and multiply them all into one,
  30. * remove useless transforms.
  31. *
  32. * @see http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
  33. *
  34. * @param {Object} item current iteration item
  35. * @param {Object} params plugin params
  36. * @return {Boolean} if false, item will be filtered out
  37. *
  38. * @author Kir Belevich
  39. */
  40. exports.fn = function(item, params) {
  41. if (item.elem) {
  42. // transform
  43. if (item.hasAttr('transform')) {
  44. convertTransform(item, 'transform', params);
  45. }
  46. // gradientTransform
  47. if (item.hasAttr('gradientTransform')) {
  48. convertTransform(item, 'gradientTransform', params);
  49. }
  50. // patternTransform
  51. if (item.hasAttr('patternTransform')) {
  52. convertTransform(item, 'patternTransform', params);
  53. }
  54. }
  55. };
  56. /**
  57. * Main function.
  58. *
  59. * @param {Object} item input item
  60. * @param {String} attrName attribute name
  61. * @param {Object} params plugin params
  62. */
  63. function convertTransform(item, attrName, params) {
  64. var data = transform2js(item.attr(attrName).value);
  65. params = definePrecision(data, params);
  66. if (params.collapseIntoOne && data.length > 1) {
  67. data = [transformsMultiply(data)];
  68. }
  69. if (params.convertToShorts) {
  70. data = convertToShorts(data, params);
  71. } else {
  72. data.forEach(roundTransform);
  73. }
  74. if (params.removeUseless) {
  75. data = removeUseless(data);
  76. }
  77. if (data.length) {
  78. item.attr(attrName).value = js2transform(data, params);
  79. } else {
  80. item.removeAttr(attrName);
  81. }
  82. }
  83. /**
  84. * Defines precision to work with certain parts.
  85. * transformPrecision - for scale and four first matrix parameters (needs a better precision due to multiplying),
  86. * floatPrecision - for translate including two last matrix and rotate parameters,
  87. * degPrecision - for rotate and skew. By default it's equal to (rougly)
  88. * transformPrecision - 2 or floatPrecision whichever is lower. Can be set in params.
  89. *
  90. * @param {Array} transforms input array
  91. * @param {Object} params plugin params
  92. * @return {Array} output array
  93. */
  94. function definePrecision(data, params) {
  95. /* jshint validthis: true */
  96. var matrixData = data.reduce(getMatrixData, []),
  97. significantDigits = params.transformPrecision;
  98. // Clone params so it don't affect other elements transformations.
  99. params = Object.assign({}, params);
  100. // Limit transform precision with matrix one. Calculating with larger precision doesn't add any value.
  101. if (matrixData.length) {
  102. params.transformPrecision = Math.min(params.transformPrecision,
  103. Math.max.apply(Math, matrixData.map(floatDigits)) || params.transformPrecision);
  104. significantDigits = Math.max.apply(Math, matrixData.map(function(n) {
  105. return String(n).replace(/\D+/g, '').length; // Number of digits in a number. 123.45 → 5
  106. }));
  107. }
  108. // No sense in angle precision more then number of significant digits in matrix.
  109. if (!('degPrecision' in params)) {
  110. params.degPrecision = Math.max(0, Math.min(params.floatPrecision, significantDigits - 2));
  111. }
  112. floatRound = params.floatPrecision >= 1 && params.floatPrecision < 20 ?
  113. smartRound.bind(this, params.floatPrecision) :
  114. round;
  115. degRound = params.degPrecision >= 1 && params.floatPrecision < 20 ?
  116. smartRound.bind(this, params.degPrecision) :
  117. round;
  118. transformRound = params.transformPrecision >= 1 && params.floatPrecision < 20 ?
  119. smartRound.bind(this, params.transformPrecision) :
  120. round;
  121. return params;
  122. }
  123. /**
  124. * Gathers four first matrix parameters.
  125. *
  126. * @param {Array} a array of data
  127. * @param {Object} transform
  128. * @return {Array} output array
  129. */
  130. function getMatrixData(a, b) {
  131. return b.name == 'matrix' ? a.concat(b.data.slice(0, 4)) : a;
  132. }
  133. /**
  134. * Returns number of digits after the point. 0.125 → 3
  135. */
  136. function floatDigits(n) {
  137. return (n = String(n)).slice(n.indexOf('.')).length - 1;
  138. }
  139. /**
  140. * Convert transforms to the shorthand alternatives.
  141. *
  142. * @param {Array} transforms input array
  143. * @param {Object} params plugin params
  144. * @return {Array} output array
  145. */
  146. function convertToShorts(transforms, params) {
  147. for(var i = 0; i < transforms.length; i++) {
  148. var transform = transforms[i];
  149. // convert matrix to the short aliases
  150. if (
  151. params.matrixToTransform &&
  152. transform.name === 'matrix'
  153. ) {
  154. var decomposed = matrixToTransform(transform, params);
  155. if (decomposed != transform &&
  156. js2transform(decomposed, params).length <= js2transform([transform], params).length) {
  157. transforms.splice.apply(transforms, [i, 1].concat(decomposed));
  158. }
  159. transform = transforms[i];
  160. }
  161. // fixed-point numbers
  162. // 12.754997 → 12.755
  163. roundTransform(transform);
  164. // convert long translate transform notation to the shorts one
  165. // translate(10 0) → translate(10)
  166. if (
  167. params.shortTranslate &&
  168. transform.name === 'translate' &&
  169. transform.data.length === 2 &&
  170. !transform.data[1]
  171. ) {
  172. transform.data.pop();
  173. }
  174. // convert long scale transform notation to the shorts one
  175. // scale(2 2) → scale(2)
  176. if (
  177. params.shortScale &&
  178. transform.name === 'scale' &&
  179. transform.data.length === 2 &&
  180. transform.data[0] === transform.data[1]
  181. ) {
  182. transform.data.pop();
  183. }
  184. // convert long rotate transform notation to the short one
  185. // translate(cx cy) rotate(a) translate(-cx -cy) → rotate(a cx cy)
  186. if (
  187. params.shortRotate &&
  188. transforms[i - 2] &&
  189. transforms[i - 2].name === 'translate' &&
  190. transforms[i - 1].name === 'rotate' &&
  191. transforms[i].name === 'translate' &&
  192. transforms[i - 2].data[0] === -transforms[i].data[0] &&
  193. transforms[i - 2].data[1] === -transforms[i].data[1]
  194. ) {
  195. transforms.splice(i - 2, 3, {
  196. name: 'rotate',
  197. data: [
  198. transforms[i - 1].data[0],
  199. transforms[i - 2].data[0],
  200. transforms[i - 2].data[1]
  201. ]
  202. });
  203. // splice compensation
  204. i -= 2;
  205. transform = transforms[i];
  206. }
  207. }
  208. return transforms;
  209. }
  210. /**
  211. * Remove useless transforms.
  212. *
  213. * @param {Array} transforms input array
  214. * @return {Array} output array
  215. */
  216. function removeUseless(transforms) {
  217. return transforms.filter(function(transform) {
  218. // translate(0), rotate(0[, cx, cy]), skewX(0), skewY(0)
  219. if (
  220. ['translate', 'rotate', 'skewX', 'skewY'].indexOf(transform.name) > -1 &&
  221. (transform.data.length == 1 || transform.name == 'rotate') &&
  222. !transform.data[0] ||
  223. // translate(0, 0)
  224. transform.name == 'translate' &&
  225. !transform.data[0] &&
  226. !transform.data[1] ||
  227. // scale(1)
  228. transform.name == 'scale' &&
  229. transform.data[0] == 1 &&
  230. (transform.data.length < 2 || transform.data[1] == 1) ||
  231. // matrix(1 0 0 1 0 0)
  232. transform.name == 'matrix' &&
  233. transform.data[0] == 1 &&
  234. transform.data[3] == 1 &&
  235. !(transform.data[1] || transform.data[2] || transform.data[4] || transform.data[5])
  236. ) {
  237. return false;
  238. }
  239. return true;
  240. });
  241. }
  242. /**
  243. * Convert transforms JS representation to string.
  244. *
  245. * @param {Array} transformJS JS representation array
  246. * @param {Object} params plugin params
  247. * @return {String} output string
  248. */
  249. function js2transform(transformJS, params) {
  250. var transformString = '';
  251. // collect output value string
  252. transformJS.forEach(function(transform) {
  253. roundTransform(transform);
  254. transformString += (transformString && ' ') + transform.name + '(' + cleanupOutData(transform.data, params) + ')';
  255. });
  256. return transformString;
  257. }
  258. function roundTransform(transform) {
  259. switch (transform.name) {
  260. case 'translate':
  261. transform.data = floatRound(transform.data);
  262. break;
  263. case 'rotate':
  264. transform.data = degRound(transform.data.slice(0, 1)).concat(floatRound(transform.data.slice(1)));
  265. break;
  266. case 'skewX':
  267. case 'skewY':
  268. transform.data = degRound(transform.data);
  269. break;
  270. case 'scale':
  271. transform.data = transformRound(transform.data);
  272. break;
  273. case 'matrix':
  274. transform.data = transformRound(transform.data.slice(0, 4)).concat(floatRound(transform.data.slice(4)));
  275. break;
  276. }
  277. return transform;
  278. }
  279. /**
  280. * Rounds numbers in array.
  281. *
  282. * @param {Array} data input data array
  283. * @return {Array} output data array
  284. */
  285. function round(data) {
  286. return data.map(Math.round);
  287. }
  288. /**
  289. * Decrease accuracy of floating-point numbers
  290. * in transforms keeping a specified number of decimals.
  291. * Smart rounds values like 2.349 to 2.35.
  292. *
  293. * @param {Number} fixed number of decimals
  294. * @param {Array} data input data array
  295. * @return {Array} output data array
  296. */
  297. function smartRound(precision, data) {
  298. for (var i = data.length, tolerance = +Math.pow(.1, precision).toFixed(precision); i--;) {
  299. if (data[i].toFixed(precision) != data[i]) {
  300. var rounded = +data[i].toFixed(precision - 1);
  301. data[i] = +Math.abs(rounded - data[i]).toFixed(precision + 1) >= tolerance ?
  302. +data[i].toFixed(precision) :
  303. rounded;
  304. }
  305. }
  306. return data;
  307. }