You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							363 lines
						
					
					
						
							11 KiB
						
					
					
				
			
		
		
	
	
							363 lines
						
					
					
						
							11 KiB
						
					
					
				'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; | 
						|
}
 | 
						|
 |