|
|
'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 http://www.w3.org/TR/SVG/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.elem) {
// transform
if (item.hasAttr('transform')) { convertTransform(item, 'transform', params); }
// gradientTransform
if (item.hasAttr('gradientTransform')) { convertTransform(item, 'gradientTransform', params); }
// patternTransform
if (item.hasAttr('patternTransform')) { 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) { var data = transform2js(item.attr(attrName).value); 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.attr(attrName).value = js2transform(data, params); } else { item.removeAttr(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) { /* jshint validthis: true */ 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;
transform = transforms[i]; }
}
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(.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; }
|