123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363 |
- '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;
- }
|