364 lines
11 KiB
JavaScript
364 lines
11 KiB
JavaScript
|
'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;
|
||
|
|
}
|