123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- 'use strict';
- /**
- * @typedef {import('../lib/types').PathDataItem} PathDataItem
- */
- const { stringifyPathData } = require('../lib/path.js');
- const { detachNodeFromParent } = require('../lib/xast.js');
- exports.name = 'convertShapeToPath';
- exports.type = 'visitor';
- exports.active = true;
- exports.description = 'converts basic shapes to more compact path form';
- const 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 https://www.w3.org/TR/SVG11/shapes.html
- *
- * @author Lev Solntsev
- *
- * @type {import('../lib/types').Plugin<{
- * convertArcs?: boolean,
- * floatPrecision?: number
- * }>}
- */
- exports.fn = (root, params) => {
- const { convertArcs = false, floatPrecision: precision } = params;
- return {
- element: {
- enter: (node, parentNode) => {
- // convert rect to path
- if (
- node.name === 'rect' &&
- node.attributes.width != null &&
- node.attributes.height != null &&
- node.attributes.rx == null &&
- node.attributes.ry == null
- ) {
- const x = Number(node.attributes.x || '0');
- const y = Number(node.attributes.y || '0');
- const width = Number(node.attributes.width);
- const height = Number(node.attributes.height);
- // 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 (Number.isNaN(x - y + width - height)) return;
- /**
- * @type {Array<PathDataItem>}
- */
- const pathData = [
- { command: 'M', args: [x, y] },
- { command: 'H', args: [x + width] },
- { command: 'V', args: [y + height] },
- { command: 'H', args: [x] },
- { command: 'z', args: [] },
- ];
- node.name = 'path';
- node.attributes.d = stringifyPathData({ pathData, precision });
- delete node.attributes.x;
- delete node.attributes.y;
- delete node.attributes.width;
- delete node.attributes.height;
- }
- // convert line to path
- if (node.name === 'line') {
- const x1 = Number(node.attributes.x1 || '0');
- const y1 = Number(node.attributes.y1 || '0');
- const x2 = Number(node.attributes.x2 || '0');
- const y2 = Number(node.attributes.y2 || '0');
- if (Number.isNaN(x1 - y1 + x2 - y2)) return;
- /**
- * @type {Array<PathDataItem>}
- */
- const pathData = [
- { command: 'M', args: [x1, y1] },
- { command: 'L', args: [x2, y2] },
- ];
- node.name = 'path';
- node.attributes.d = stringifyPathData({ pathData, precision });
- delete node.attributes.x1;
- delete node.attributes.y1;
- delete node.attributes.x2;
- delete node.attributes.y2;
- }
- // convert polyline and polygon to path
- if (
- (node.name === 'polyline' || node.name === 'polygon') &&
- node.attributes.points != null
- ) {
- const coords = (node.attributes.points.match(regNumber) || []).map(
- Number
- );
- if (coords.length < 4) {
- detachNodeFromParent(node, parentNode);
- return;
- }
- /**
- * @type {Array<PathDataItem>}
- */
- const pathData = [];
- for (let i = 0; i < coords.length; i += 2) {
- pathData.push({
- command: i === 0 ? 'M' : 'L',
- args: coords.slice(i, i + 2),
- });
- }
- if (node.name === 'polygon') {
- pathData.push({ command: 'z', args: [] });
- }
- node.name = 'path';
- node.attributes.d = stringifyPathData({ pathData, precision });
- delete node.attributes.points;
- }
- // optionally convert circle
- if (node.name === 'circle' && convertArcs) {
- const cx = Number(node.attributes.cx || '0');
- const cy = Number(node.attributes.cy || '0');
- const r = Number(node.attributes.r || '0');
- if (Number.isNaN(cx - cy + r)) {
- return;
- }
- /**
- * @type {Array<PathDataItem>}
- */
- const pathData = [
- { command: 'M', args: [cx, cy - r] },
- { command: 'A', args: [r, r, 0, 1, 0, cx, cy + r] },
- { command: 'A', args: [r, r, 0, 1, 0, cx, cy - r] },
- { command: 'z', args: [] },
- ];
- node.name = 'path';
- node.attributes.d = stringifyPathData({ pathData, precision });
- delete node.attributes.cx;
- delete node.attributes.cy;
- delete node.attributes.r;
- }
- // optionally covert ellipse
- if (node.name === 'ellipse' && convertArcs) {
- const ecx = Number(node.attributes.cx || '0');
- const ecy = Number(node.attributes.cy || '0');
- const rx = Number(node.attributes.rx || '0');
- const ry = Number(node.attributes.ry || '0');
- if (Number.isNaN(ecx - ecy + rx - ry)) {
- return;
- }
- /**
- * @type {Array<PathDataItem>}
- */
- const pathData = [
- { command: 'M', args: [ecx, ecy - ry] },
- { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy + ry] },
- { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy - ry] },
- { command: 'z', args: [] },
- ];
- node.name = 'path';
- node.attributes.d = stringifyPathData({ pathData, precision });
- delete node.attributes.cx;
- delete node.attributes.cy;
- delete node.attributes.rx;
- delete node.attributes.ry;
- }
- },
- },
- };
- };
|