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