| 'use strict'; |
| |
| exports.type = 'perItem'; |
| |
| exports.active = true; |
| |
| exports.description = 'collapses multiple transformations and optimizes it'; |
| |
| exports.params = { |
| convertToShorts: true, |
| // degPrecision: 3, // transformPrecision (or matrix precision) - 2 by default |
| floatPrecision: 3, |
| transformPrecision: 5, |
| matrixToTransform: true, |
| shortTranslate: true, |
| shortScale: true, |
| shortRotate: true, |
| removeUseless: true, |
| collapseIntoOne: true, |
| leadingZero: true, |
| negativeExtraSpace: false, |
| }; |
| |
| var cleanupOutData = require('../lib/svgo/tools').cleanupOutData, |
| transform2js = require('./_transforms.js').transform2js, |
| transformsMultiply = require('./_transforms.js').transformsMultiply, |
| matrixToTransform = require('./_transforms.js').matrixToTransform, |
| degRound, |
| floatRound, |
| transformRound; |
| |
| /** |
| * Convert matrices to the short aliases, |
| * convert long translate, scale or rotate transform notations to the shorts ones, |
| * convert transforms to the matrices and multiply them all into one, |
| * remove useless transforms. |
| * |
| * @see https://www.w3.org/TR/SVG11/coords.html#TransformMatrixDefined |
| * |
| * @param {Object} item current iteration item |
| * @param {Object} params plugin params |
| * @return {Boolean} if false, item will be filtered out |
| * |
| * @author Kir Belevich |
| */ |
| exports.fn = function (item, params) { |
| if (item.type === 'element') { |
| // transform |
| if (item.attributes.transform != null) { |
| convertTransform(item, 'transform', params); |
| } |
| |
| // gradientTransform |
| if (item.attributes.gradientTransform != null) { |
| convertTransform(item, 'gradientTransform', params); |
| } |
| |
| // patternTransform |
| if (item.attributes.patternTransform != null) { |
| convertTransform(item, 'patternTransform', params); |
| } |
| } |
| }; |
| |
| /** |
| * Main function. |
| * |
| * @param {Object} item input item |
| * @param {String} attrName attribute name |
| * @param {Object} params plugin params |
| */ |
| function convertTransform(item, attrName, params) { |
| let data = transform2js(item.attributes[attrName]); |
| params = definePrecision(data, params); |
| |
| if (params.collapseIntoOne && data.length > 1) { |
| data = [transformsMultiply(data)]; |
| } |
| |
| if (params.convertToShorts) { |
| data = convertToShorts(data, params); |
| } else { |
| data.forEach(roundTransform); |
| } |
| |
| if (params.removeUseless) { |
| data = removeUseless(data); |
| } |
| |
| if (data.length) { |
| item.attributes[attrName] = js2transform(data, params); |
| } else { |
| delete item.attributes[attrName]; |
| } |
| } |
| |
| /** |
| * Defines precision to work with certain parts. |
| * transformPrecision - for scale and four first matrix parameters (needs a better precision due to multiplying), |
| * floatPrecision - for translate including two last matrix and rotate parameters, |
| * degPrecision - for rotate and skew. By default it's equal to (rougly) |
| * transformPrecision - 2 or floatPrecision whichever is lower. Can be set in params. |
| * |
| * @param {Array} transforms input array |
| * @param {Object} params plugin params |
| * @return {Array} output array |
| */ |
| function definePrecision(data, params) { |
| var matrixData = data.reduce(getMatrixData, []), |
| significantDigits = params.transformPrecision; |
| |
| // Clone params so it don't affect other elements transformations. |
| params = Object.assign({}, params); |
| |
| // Limit transform precision with matrix one. Calculating with larger precision doesn't add any value. |
| if (matrixData.length) { |
| params.transformPrecision = Math.min( |
| params.transformPrecision, |
| Math.max.apply(Math, matrixData.map(floatDigits)) || |
| params.transformPrecision |
| ); |
| |
| significantDigits = Math.max.apply( |
| Math, |
| matrixData.map(function (n) { |
| return String(n).replace(/\D+/g, '').length; // Number of digits in a number. 123.45 → 5 |
| }) |
| ); |
| } |
| // No sense in angle precision more then number of significant digits in matrix. |
| if (!('degPrecision' in params)) { |
| params.degPrecision = Math.max( |
| 0, |
| Math.min(params.floatPrecision, significantDigits - 2) |
| ); |
| } |
| |
| floatRound = |
| params.floatPrecision >= 1 && params.floatPrecision < 20 |
| ? smartRound.bind(this, params.floatPrecision) |
| : round; |
| degRound = |
| params.degPrecision >= 1 && params.floatPrecision < 20 |
| ? smartRound.bind(this, params.degPrecision) |
| : round; |
| transformRound = |
| params.transformPrecision >= 1 && params.floatPrecision < 20 |
| ? smartRound.bind(this, params.transformPrecision) |
| : round; |
| |
| return params; |
| } |
| |
| /** |
| * Gathers four first matrix parameters. |
| * |
| * @param {Array} a array of data |
| * @param {Object} transform |
| * @return {Array} output array |
| */ |
| function getMatrixData(a, b) { |
| return b.name == 'matrix' ? a.concat(b.data.slice(0, 4)) : a; |
| } |
| |
| /** |
| * Returns number of digits after the point. 0.125 → 3 |
| */ |
| function floatDigits(n) { |
| return (n = String(n)).slice(n.indexOf('.')).length - 1; |
| } |
| |
| /** |
| * Convert transforms to the shorthand alternatives. |
| * |
| * @param {Array} transforms input array |
| * @param {Object} params plugin params |
| * @return {Array} output array |
| */ |
| function convertToShorts(transforms, params) { |
| for (var i = 0; i < transforms.length; i++) { |
| var transform = transforms[i]; |
| |
| // convert matrix to the short aliases |
| if (params.matrixToTransform && transform.name === 'matrix') { |
| var decomposed = matrixToTransform(transform, params); |
| if ( |
| decomposed != transform && |
| js2transform(decomposed, params).length <= |
| js2transform([transform], params).length |
| ) { |
| transforms.splice.apply(transforms, [i, 1].concat(decomposed)); |
| } |
| transform = transforms[i]; |
| } |
| |
| // fixed-point numbers |
| // 12.754997 → 12.755 |
| roundTransform(transform); |
| |
| // convert long translate transform notation to the shorts one |
| // translate(10 0) → translate(10) |
| if ( |
| params.shortTranslate && |
| transform.name === 'translate' && |
| transform.data.length === 2 && |
| !transform.data[1] |
| ) { |
| transform.data.pop(); |
| } |
| |
| // convert long scale transform notation to the shorts one |
| // scale(2 2) → scale(2) |
| if ( |
| params.shortScale && |
| transform.name === 'scale' && |
| transform.data.length === 2 && |
| transform.data[0] === transform.data[1] |
| ) { |
| transform.data.pop(); |
| } |
| |
| // convert long rotate transform notation to the short one |
| // translate(cx cy) rotate(a) translate(-cx -cy) → rotate(a cx cy) |
| if ( |
| params.shortRotate && |
| transforms[i - 2] && |
| transforms[i - 2].name === 'translate' && |
| transforms[i - 1].name === 'rotate' && |
| transforms[i].name === 'translate' && |
| transforms[i - 2].data[0] === -transforms[i].data[0] && |
| transforms[i - 2].data[1] === -transforms[i].data[1] |
| ) { |
| transforms.splice(i - 2, 3, { |
| name: 'rotate', |
| data: [ |
| transforms[i - 1].data[0], |
| transforms[i - 2].data[0], |
| transforms[i - 2].data[1], |
| ], |
| }); |
| |
| // splice compensation |
| i -= 2; |
| } |
| } |
| |
| return transforms; |
| } |
| |
| /** |
| * Remove useless transforms. |
| * |
| * @param {Array} transforms input array |
| * @return {Array} output array |
| */ |
| function removeUseless(transforms) { |
| return transforms.filter(function (transform) { |
| // translate(0), rotate(0[, cx, cy]), skewX(0), skewY(0) |
| if ( |
| (['translate', 'rotate', 'skewX', 'skewY'].indexOf(transform.name) > -1 && |
| (transform.data.length == 1 || transform.name == 'rotate') && |
| !transform.data[0]) || |
| // translate(0, 0) |
| (transform.name == 'translate' && |
| !transform.data[0] && |
| !transform.data[1]) || |
| // scale(1) |
| (transform.name == 'scale' && |
| transform.data[0] == 1 && |
| (transform.data.length < 2 || transform.data[1] == 1)) || |
| // matrix(1 0 0 1 0 0) |
| (transform.name == 'matrix' && |
| transform.data[0] == 1 && |
| transform.data[3] == 1 && |
| !( |
| transform.data[1] || |
| transform.data[2] || |
| transform.data[4] || |
| transform.data[5] |
| )) |
| ) { |
| return false; |
| } |
| |
| return true; |
| }); |
| } |
| |
| /** |
| * Convert transforms JS representation to string. |
| * |
| * @param {Array} transformJS JS representation array |
| * @param {Object} params plugin params |
| * @return {String} output string |
| */ |
| function js2transform(transformJS, params) { |
| var transformString = ''; |
| |
| // collect output value string |
| transformJS.forEach(function (transform) { |
| roundTransform(transform); |
| transformString += |
| (transformString && ' ') + |
| transform.name + |
| '(' + |
| cleanupOutData(transform.data, params) + |
| ')'; |
| }); |
| |
| return transformString; |
| } |
| |
| function roundTransform(transform) { |
| switch (transform.name) { |
| case 'translate': |
| transform.data = floatRound(transform.data); |
| break; |
| case 'rotate': |
| transform.data = degRound(transform.data.slice(0, 1)).concat( |
| floatRound(transform.data.slice(1)) |
| ); |
| break; |
| case 'skewX': |
| case 'skewY': |
| transform.data = degRound(transform.data); |
| break; |
| case 'scale': |
| transform.data = transformRound(transform.data); |
| break; |
| case 'matrix': |
| transform.data = transformRound(transform.data.slice(0, 4)).concat( |
| floatRound(transform.data.slice(4)) |
| ); |
| break; |
| } |
| return transform; |
| } |
| |
| /** |
| * Rounds numbers in array. |
| * |
| * @param {Array} data input data array |
| * @return {Array} output data array |
| */ |
| function round(data) { |
| return data.map(Math.round); |
| } |
| |
| /** |
| * Decrease accuracy of floating-point numbers |
| * in transforms keeping a specified number of decimals. |
| * Smart rounds values like 2.349 to 2.35. |
| * |
| * @param {Number} fixed number of decimals |
| * @param {Array} data input data array |
| * @return {Array} output data array |
| */ |
| function smartRound(precision, data) { |
| for ( |
| var i = data.length, |
| tolerance = +Math.pow(0.1, precision).toFixed(precision); |
| i--; |
| |
| ) { |
| if (data[i].toFixed(precision) != data[i]) { |
| var rounded = +data[i].toFixed(precision - 1); |
| data[i] = |
| +Math.abs(rounded - data[i]).toFixed(precision + 1) >= tolerance |
| ? +data[i].toFixed(precision) |
| : rounded; |
| } |
| } |
| return data; |
| } |