| 1 | 'use strict';
|
|---|
| 2 |
|
|---|
| 3 | exports.type = 'perItem';
|
|---|
| 4 |
|
|---|
| 5 | exports.active = true;
|
|---|
| 6 |
|
|---|
| 7 | exports.description = 'converts basic shapes to more compact path form';
|
|---|
| 8 |
|
|---|
| 9 | exports.params = {
|
|---|
| 10 | convertArcs: false
|
|---|
| 11 | };
|
|---|
| 12 |
|
|---|
| 13 | var none = { value: 0 },
|
|---|
| 14 | regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
|
|---|
| 15 |
|
|---|
| 16 | /**
|
|---|
| 17 | * Converts basic shape to more compact path.
|
|---|
| 18 | * It also allows further optimizations like
|
|---|
| 19 | * combining paths with similar attributes.
|
|---|
| 20 | *
|
|---|
| 21 | * @see http://www.w3.org/TR/SVG/shapes.html
|
|---|
| 22 | *
|
|---|
| 23 | * @param {Object} item current iteration item
|
|---|
| 24 | * @param {Object} params plugin params
|
|---|
| 25 | * @return {Boolean} if false, item will be filtered out
|
|---|
| 26 | *
|
|---|
| 27 | * @author Lev Solntsev
|
|---|
| 28 | */
|
|---|
| 29 | exports.fn = function(item, params) {
|
|---|
| 30 | var convertArcs = params && params.convertArcs;
|
|---|
| 31 |
|
|---|
| 32 | if (
|
|---|
| 33 | item.isElem('rect') &&
|
|---|
| 34 | item.hasAttr('width') &&
|
|---|
| 35 | item.hasAttr('height') &&
|
|---|
| 36 | !item.hasAttr('rx') &&
|
|---|
| 37 | !item.hasAttr('ry')
|
|---|
| 38 | ) {
|
|---|
| 39 |
|
|---|
| 40 | var x = +(item.attr('x') || none).value,
|
|---|
| 41 | y = +(item.attr('y') || none).value,
|
|---|
| 42 | width = +item.attr('width').value,
|
|---|
| 43 | height = +item.attr('height').value;
|
|---|
| 44 |
|
|---|
| 45 | // Values like '100%' compute to NaN, thus running after
|
|---|
| 46 | // cleanupNumericValues when 'px' units has already been removed.
|
|---|
| 47 | // TODO: Calculate sizes from % and non-px units if possible.
|
|---|
| 48 | if (isNaN(x - y + width - height)) return;
|
|---|
| 49 |
|
|---|
| 50 | var pathData =
|
|---|
| 51 | 'M' + x + ' ' + y +
|
|---|
| 52 | 'H' + (x + width) +
|
|---|
| 53 | 'V' + (y + height) +
|
|---|
| 54 | 'H' + x +
|
|---|
| 55 | 'z';
|
|---|
| 56 |
|
|---|
| 57 | item.addAttr({
|
|---|
| 58 | name: 'd',
|
|---|
| 59 | value: pathData,
|
|---|
| 60 | prefix: '',
|
|---|
| 61 | local: 'd'
|
|---|
| 62 | });
|
|---|
| 63 |
|
|---|
| 64 | item.renameElem('path')
|
|---|
| 65 | .removeAttr(['x', 'y', 'width', 'height']);
|
|---|
| 66 |
|
|---|
| 67 | } else if (item.isElem('line')) {
|
|---|
| 68 |
|
|---|
| 69 | var x1 = +(item.attr('x1') || none).value,
|
|---|
| 70 | y1 = +(item.attr('y1') || none).value,
|
|---|
| 71 | x2 = +(item.attr('x2') || none).value,
|
|---|
| 72 | y2 = +(item.attr('y2') || none).value;
|
|---|
| 73 | if (isNaN(x1 - y1 + x2 - y2)) return;
|
|---|
| 74 |
|
|---|
| 75 | item.addAttr({
|
|---|
| 76 | name: 'd',
|
|---|
| 77 | value: 'M' + x1 + ' ' + y1 + 'L' + x2 + ' ' + y2,
|
|---|
| 78 | prefix: '',
|
|---|
| 79 | local: 'd'
|
|---|
| 80 | });
|
|---|
| 81 |
|
|---|
| 82 | item.renameElem('path')
|
|---|
| 83 | .removeAttr(['x1', 'y1', 'x2', 'y2']);
|
|---|
| 84 |
|
|---|
| 85 | } else if ((
|
|---|
| 86 | item.isElem('polyline') ||
|
|---|
| 87 | item.isElem('polygon')
|
|---|
| 88 | ) &&
|
|---|
| 89 | item.hasAttr('points')
|
|---|
| 90 | ) {
|
|---|
| 91 |
|
|---|
| 92 | var coords = (item.attr('points').value.match(regNumber) || []).map(Number);
|
|---|
| 93 | if (coords.length < 4) return false;
|
|---|
| 94 |
|
|---|
| 95 | item.addAttr({
|
|---|
| 96 | name: 'd',
|
|---|
| 97 | value: 'M' + coords.slice(0,2).join(' ') +
|
|---|
| 98 | 'L' + coords.slice(2).join(' ') +
|
|---|
| 99 | (item.isElem('polygon') ? 'z' : ''),
|
|---|
| 100 | prefix: '',
|
|---|
| 101 | local: 'd'
|
|---|
| 102 | });
|
|---|
| 103 |
|
|---|
| 104 | item.renameElem('path')
|
|---|
| 105 | .removeAttr('points');
|
|---|
| 106 | } else if (item.isElem('circle') && convertArcs) {
|
|---|
| 107 |
|
|---|
| 108 | var cx = +(item.attr('cx') || none).value;
|
|---|
| 109 | var cy = +(item.attr('cy') || none).value;
|
|---|
| 110 | var r = +(item.attr('r') || none).value;
|
|---|
| 111 | if (isNaN(cx - cy + r)) {
|
|---|
| 112 | return;
|
|---|
| 113 | }
|
|---|
| 114 | var cPathData =
|
|---|
| 115 | 'M' + cx + ' ' + (cy - r) +
|
|---|
| 116 | 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy + r) +
|
|---|
| 117 | 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy - r) +
|
|---|
| 118 | 'Z';
|
|---|
| 119 | item.addAttr({
|
|---|
| 120 | name: 'd',
|
|---|
| 121 | value: cPathData,
|
|---|
| 122 | prefix: '',
|
|---|
| 123 | local: 'd',
|
|---|
| 124 | });
|
|---|
| 125 | item.renameElem('path').removeAttr(['cx', 'cy', 'r']);
|
|---|
| 126 |
|
|---|
| 127 | } else if (item.isElem('ellipse') && convertArcs) {
|
|---|
| 128 |
|
|---|
| 129 | var ecx = +(item.attr('cx') || none).value;
|
|---|
| 130 | var ecy = +(item.attr('cy') || none).value;
|
|---|
| 131 | var rx = +(item.attr('rx') || none).value;
|
|---|
| 132 | var ry = +(item.attr('ry') || none).value;
|
|---|
| 133 | if (isNaN(ecx - ecy + rx - ry)) {
|
|---|
| 134 | return;
|
|---|
| 135 | }
|
|---|
| 136 | var ePathData =
|
|---|
| 137 | 'M' + ecx + ' ' + (ecy - ry) +
|
|---|
| 138 | 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy + ry) +
|
|---|
| 139 | 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy - ry) +
|
|---|
| 140 | 'Z';
|
|---|
| 141 | item.addAttr({
|
|---|
| 142 | name: 'd',
|
|---|
| 143 | value: ePathData,
|
|---|
| 144 | prefix: '',
|
|---|
| 145 | local: 'd',
|
|---|
| 146 | });
|
|---|
| 147 | item.renameElem('path').removeAttr(['cx', 'cy', 'rx', 'ry']);
|
|---|
| 148 | }
|
|---|
| 149 | };
|
|---|