[6a3a178] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | const { removeLeadingZero } = require('../lib/svgo/tools.js');
|
---|
| 4 |
|
---|
| 5 | exports.name = 'cleanupListOfValues';
|
---|
| 6 | exports.type = 'visitor';
|
---|
| 7 | exports.active = false;
|
---|
| 8 | exports.description = 'rounds list of values to the fixed precision';
|
---|
| 9 |
|
---|
| 10 | const regNumericValues =
|
---|
| 11 | /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/;
|
---|
| 12 | const regSeparator = /\s+,?\s*|,\s*/;
|
---|
| 13 | const absoluteLengths = {
|
---|
| 14 | // relative to px
|
---|
| 15 | cm: 96 / 2.54,
|
---|
| 16 | mm: 96 / 25.4,
|
---|
| 17 | in: 96,
|
---|
| 18 | pt: 4 / 3,
|
---|
| 19 | pc: 16,
|
---|
| 20 | px: 1,
|
---|
| 21 | };
|
---|
| 22 |
|
---|
| 23 | /**
|
---|
| 24 | * Round list of values to the fixed precision.
|
---|
| 25 | *
|
---|
| 26 | * @example
|
---|
| 27 | * <svg viewBox="0 0 200.28423 200.28423" enable-background="new 0 0 200.28423 200.28423">
|
---|
| 28 | * ⬇
|
---|
| 29 | * <svg viewBox="0 0 200.284 200.284" enable-background="new 0 0 200.284 200.284">
|
---|
| 30 | *
|
---|
| 31 | * <polygon points="208.250977 77.1308594 223.069336 ... "/>
|
---|
| 32 | * ⬇
|
---|
| 33 | * <polygon points="208.251 77.131 223.069 ... "/>
|
---|
| 34 | *
|
---|
| 35 | * @author kiyopikko
|
---|
| 36 | *
|
---|
| 37 | * @type {import('../lib/types').Plugin<{
|
---|
| 38 | * floatPrecision?: number,
|
---|
| 39 | * leadingZero?: boolean,
|
---|
| 40 | * defaultPx?: boolean,
|
---|
| 41 | * convertToPx?: boolean
|
---|
| 42 | * }>}
|
---|
| 43 | */
|
---|
| 44 | exports.fn = (_root, params) => {
|
---|
| 45 | const {
|
---|
| 46 | floatPrecision = 3,
|
---|
| 47 | leadingZero = true,
|
---|
| 48 | defaultPx = true,
|
---|
| 49 | convertToPx = true,
|
---|
| 50 | } = params;
|
---|
| 51 |
|
---|
| 52 | /**
|
---|
| 53 | * @type {(lists: string) => string}
|
---|
| 54 | */
|
---|
| 55 | const roundValues = (lists) => {
|
---|
| 56 | const roundedList = [];
|
---|
| 57 |
|
---|
| 58 | for (const elem of lists.split(regSeparator)) {
|
---|
| 59 | const match = elem.match(regNumericValues);
|
---|
| 60 | const matchNew = elem.match(/new/);
|
---|
| 61 |
|
---|
| 62 | // if attribute value matches regNumericValues
|
---|
| 63 | if (match) {
|
---|
| 64 | // round it to the fixed precision
|
---|
| 65 | let num = Number(Number(match[1]).toFixed(floatPrecision));
|
---|
| 66 | /**
|
---|
| 67 | * @type {any}
|
---|
| 68 | */
|
---|
| 69 | let matchedUnit = match[3] || '';
|
---|
| 70 | /**
|
---|
| 71 | * @type{'' | keyof typeof absoluteLengths}
|
---|
| 72 | */
|
---|
| 73 | let units = matchedUnit;
|
---|
| 74 |
|
---|
| 75 | // convert absolute values to pixels
|
---|
| 76 | if (convertToPx && units && units in absoluteLengths) {
|
---|
| 77 | const pxNum = Number(
|
---|
| 78 | (absoluteLengths[units] * Number(match[1])).toFixed(floatPrecision)
|
---|
| 79 | );
|
---|
| 80 |
|
---|
| 81 | if (pxNum.toString().length < match[0].length) {
|
---|
| 82 | num = pxNum;
|
---|
| 83 | units = 'px';
|
---|
| 84 | }
|
---|
| 85 | }
|
---|
| 86 |
|
---|
| 87 | // and remove leading zero
|
---|
| 88 | let str;
|
---|
| 89 | if (leadingZero) {
|
---|
| 90 | str = removeLeadingZero(num);
|
---|
| 91 | } else {
|
---|
| 92 | str = num.toString();
|
---|
| 93 | }
|
---|
| 94 |
|
---|
| 95 | // remove default 'px' units
|
---|
| 96 | if (defaultPx && units === 'px') {
|
---|
| 97 | units = '';
|
---|
| 98 | }
|
---|
| 99 |
|
---|
| 100 | roundedList.push(str + units);
|
---|
| 101 | }
|
---|
| 102 | // if attribute value is "new"(only enable-background).
|
---|
| 103 | else if (matchNew) {
|
---|
| 104 | roundedList.push('new');
|
---|
| 105 | } else if (elem) {
|
---|
| 106 | roundedList.push(elem);
|
---|
| 107 | }
|
---|
| 108 | }
|
---|
| 109 |
|
---|
| 110 | return roundedList.join(' ');
|
---|
| 111 | };
|
---|
| 112 |
|
---|
| 113 | return {
|
---|
| 114 | element: {
|
---|
| 115 | enter: (node) => {
|
---|
| 116 | if (node.attributes.points != null) {
|
---|
| 117 | node.attributes.points = roundValues(node.attributes.points);
|
---|
| 118 | }
|
---|
| 119 |
|
---|
| 120 | if (node.attributes['enable-background'] != null) {
|
---|
| 121 | node.attributes['enable-background'] = roundValues(
|
---|
| 122 | node.attributes['enable-background']
|
---|
| 123 | );
|
---|
| 124 | }
|
---|
| 125 |
|
---|
| 126 | if (node.attributes.viewBox != null) {
|
---|
| 127 | node.attributes.viewBox = roundValues(node.attributes.viewBox);
|
---|
| 128 | }
|
---|
| 129 |
|
---|
| 130 | if (node.attributes['stroke-dasharray'] != null) {
|
---|
| 131 | node.attributes['stroke-dasharray'] = roundValues(
|
---|
| 132 | node.attributes['stroke-dasharray']
|
---|
| 133 | );
|
---|
| 134 | }
|
---|
| 135 |
|
---|
| 136 | if (node.attributes.dx != null) {
|
---|
| 137 | node.attributes.dx = roundValues(node.attributes.dx);
|
---|
| 138 | }
|
---|
| 139 |
|
---|
| 140 | if (node.attributes.dy != null) {
|
---|
| 141 | node.attributes.dy = roundValues(node.attributes.dy);
|
---|
| 142 | }
|
---|
| 143 |
|
---|
| 144 | if (node.attributes.x != null) {
|
---|
| 145 | node.attributes.x = roundValues(node.attributes.x);
|
---|
| 146 | }
|
---|
| 147 |
|
---|
| 148 | if (node.attributes.y != null) {
|
---|
| 149 | node.attributes.y = roundValues(node.attributes.y);
|
---|
| 150 | }
|
---|
| 151 | },
|
---|
| 152 | },
|
---|
| 153 | };
|
---|
| 154 | };
|
---|