'use strict'; exports.type = 'perItem'; exports.active = true; exports.description = 'converts basic shapes to more compact path form'; exports.params = { convertArcs: false }; var none = { value: 0 }, regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g; /** * Converts basic shape to more compact path. * It also allows further optimizations like * combining paths with similar attributes. * * @see http://www.w3.org/TR/SVG/shapes.html * * @param {Object} item current iteration item * @param {Object} params plugin params * @return {Boolean} if false, item will be filtered out * * @author Lev Solntsev */ exports.fn = function(item, params) { var convertArcs = params && params.convertArcs; if ( item.isElem('rect') && item.hasAttr('width') && item.hasAttr('height') && !item.hasAttr('rx') && !item.hasAttr('ry') ) { var x = +(item.attr('x') || none).value, y = +(item.attr('y') || none).value, width = +item.attr('width').value, height = +item.attr('height').value; // Values like '100%' compute to NaN, thus running after // cleanupNumericValues when 'px' units has already been removed. // TODO: Calculate sizes from % and non-px units if possible. if (isNaN(x - y + width - height)) return; var pathData = 'M' + x + ' ' + y + 'H' + (x + width) + 'V' + (y + height) + 'H' + x + 'z'; item.addAttr({ name: 'd', value: pathData, prefix: '', local: 'd' }); item.renameElem('path') .removeAttr(['x', 'y', 'width', 'height']); } else if (item.isElem('line')) { var x1 = +(item.attr('x1') || none).value, y1 = +(item.attr('y1') || none).value, x2 = +(item.attr('x2') || none).value, y2 = +(item.attr('y2') || none).value; if (isNaN(x1 - y1 + x2 - y2)) return; item.addAttr({ name: 'd', value: 'M' + x1 + ' ' + y1 + 'L' + x2 + ' ' + y2, prefix: '', local: 'd' }); item.renameElem('path') .removeAttr(['x1', 'y1', 'x2', 'y2']); } else if (( item.isElem('polyline') || item.isElem('polygon') ) && item.hasAttr('points') ) { var coords = (item.attr('points').value.match(regNumber) || []).map(Number); if (coords.length < 4) return false; item.addAttr({ name: 'd', value: 'M' + coords.slice(0,2).join(' ') + 'L' + coords.slice(2).join(' ') + (item.isElem('polygon') ? 'z' : ''), prefix: '', local: 'd' }); item.renameElem('path') .removeAttr('points'); } else if (item.isElem('circle') && convertArcs) { var cx = +(item.attr('cx') || none).value; var cy = +(item.attr('cy') || none).value; var r = +(item.attr('r') || none).value; if (isNaN(cx - cy + r)) { return; } var cPathData = 'M' + cx + ' ' + (cy - r) + 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy + r) + 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy - r) + 'Z'; item.addAttr({ name: 'd', value: cPathData, prefix: '', local: 'd', }); item.renameElem('path').removeAttr(['cx', 'cy', 'r']); } else if (item.isElem('ellipse') && convertArcs) { var ecx = +(item.attr('cx') || none).value; var ecy = +(item.attr('cy') || none).value; var rx = +(item.attr('rx') || none).value; var ry = +(item.attr('ry') || none).value; if (isNaN(ecx - ecy + rx - ry)) { return; } var ePathData = 'M' + ecx + ' ' + (ecy - ry) + 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy + ry) + 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy - ry) + 'Z'; item.addAttr({ name: 'd', value: ePathData, prefix: '', local: 'd', }); item.renameElem('path').removeAttr(['cx', 'cy', 'rx', 'ry']); } };