convertShapeToPath.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. 'use strict';
  2. /**
  3. * @typedef {import('../lib/types').PathDataItem} PathDataItem
  4. */
  5. const { stringifyPathData } = require('../lib/path.js');
  6. const { detachNodeFromParent } = require('../lib/xast.js');
  7. exports.name = 'convertShapeToPath';
  8. exports.type = 'visitor';
  9. exports.active = true;
  10. exports.description = 'converts basic shapes to more compact path form';
  11. const regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
  12. /**
  13. * Converts basic shape to more compact path.
  14. * It also allows further optimizations like
  15. * combining paths with similar attributes.
  16. *
  17. * @see https://www.w3.org/TR/SVG11/shapes.html
  18. *
  19. * @author Lev Solntsev
  20. *
  21. * @type {import('../lib/types').Plugin<{
  22. * convertArcs?: boolean,
  23. * floatPrecision?: number
  24. * }>}
  25. */
  26. exports.fn = (root, params) => {
  27. const { convertArcs = false, floatPrecision: precision } = params;
  28. return {
  29. element: {
  30. enter: (node, parentNode) => {
  31. // convert rect to path
  32. if (
  33. node.name === 'rect' &&
  34. node.attributes.width != null &&
  35. node.attributes.height != null &&
  36. node.attributes.rx == null &&
  37. node.attributes.ry == null
  38. ) {
  39. const x = Number(node.attributes.x || '0');
  40. const y = Number(node.attributes.y || '0');
  41. const width = Number(node.attributes.width);
  42. const height = Number(node.attributes.height);
  43. // Values like '100%' compute to NaN, thus running after
  44. // cleanupNumericValues when 'px' units has already been removed.
  45. // TODO: Calculate sizes from % and non-px units if possible.
  46. if (Number.isNaN(x - y + width - height)) return;
  47. /**
  48. * @type {Array<PathDataItem>}
  49. */
  50. const pathData = [
  51. { command: 'M', args: [x, y] },
  52. { command: 'H', args: [x + width] },
  53. { command: 'V', args: [y + height] },
  54. { command: 'H', args: [x] },
  55. { command: 'z', args: [] },
  56. ];
  57. node.name = 'path';
  58. node.attributes.d = stringifyPathData({ pathData, precision });
  59. delete node.attributes.x;
  60. delete node.attributes.y;
  61. delete node.attributes.width;
  62. delete node.attributes.height;
  63. }
  64. // convert line to path
  65. if (node.name === 'line') {
  66. const x1 = Number(node.attributes.x1 || '0');
  67. const y1 = Number(node.attributes.y1 || '0');
  68. const x2 = Number(node.attributes.x2 || '0');
  69. const y2 = Number(node.attributes.y2 || '0');
  70. if (Number.isNaN(x1 - y1 + x2 - y2)) return;
  71. /**
  72. * @type {Array<PathDataItem>}
  73. */
  74. const pathData = [
  75. { command: 'M', args: [x1, y1] },
  76. { command: 'L', args: [x2, y2] },
  77. ];
  78. node.name = 'path';
  79. node.attributes.d = stringifyPathData({ pathData, precision });
  80. delete node.attributes.x1;
  81. delete node.attributes.y1;
  82. delete node.attributes.x2;
  83. delete node.attributes.y2;
  84. }
  85. // convert polyline and polygon to path
  86. if (
  87. (node.name === 'polyline' || node.name === 'polygon') &&
  88. node.attributes.points != null
  89. ) {
  90. const coords = (node.attributes.points.match(regNumber) || []).map(
  91. Number
  92. );
  93. if (coords.length < 4) {
  94. detachNodeFromParent(node, parentNode);
  95. return;
  96. }
  97. /**
  98. * @type {Array<PathDataItem>}
  99. */
  100. const pathData = [];
  101. for (let i = 0; i < coords.length; i += 2) {
  102. pathData.push({
  103. command: i === 0 ? 'M' : 'L',
  104. args: coords.slice(i, i + 2),
  105. });
  106. }
  107. if (node.name === 'polygon') {
  108. pathData.push({ command: 'z', args: [] });
  109. }
  110. node.name = 'path';
  111. node.attributes.d = stringifyPathData({ pathData, precision });
  112. delete node.attributes.points;
  113. }
  114. // optionally convert circle
  115. if (node.name === 'circle' && convertArcs) {
  116. const cx = Number(node.attributes.cx || '0');
  117. const cy = Number(node.attributes.cy || '0');
  118. const r = Number(node.attributes.r || '0');
  119. if (Number.isNaN(cx - cy + r)) {
  120. return;
  121. }
  122. /**
  123. * @type {Array<PathDataItem>}
  124. */
  125. const pathData = [
  126. { command: 'M', args: [cx, cy - r] },
  127. { command: 'A', args: [r, r, 0, 1, 0, cx, cy + r] },
  128. { command: 'A', args: [r, r, 0, 1, 0, cx, cy - r] },
  129. { command: 'z', args: [] },
  130. ];
  131. node.name = 'path';
  132. node.attributes.d = stringifyPathData({ pathData, precision });
  133. delete node.attributes.cx;
  134. delete node.attributes.cy;
  135. delete node.attributes.r;
  136. }
  137. // optionally covert ellipse
  138. if (node.name === 'ellipse' && convertArcs) {
  139. const ecx = Number(node.attributes.cx || '0');
  140. const ecy = Number(node.attributes.cy || '0');
  141. const rx = Number(node.attributes.rx || '0');
  142. const ry = Number(node.attributes.ry || '0');
  143. if (Number.isNaN(ecx - ecy + rx - ry)) {
  144. return;
  145. }
  146. /**
  147. * @type {Array<PathDataItem>}
  148. */
  149. const pathData = [
  150. { command: 'M', args: [ecx, ecy - ry] },
  151. { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy + ry] },
  152. { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy - ry] },
  153. { command: 'z', args: [] },
  154. ];
  155. node.name = 'path';
  156. node.attributes.d = stringifyPathData({ pathData, precision });
  157. delete node.attributes.cx;
  158. delete node.attributes.cy;
  159. delete node.attributes.rx;
  160. delete node.attributes.ry;
  161. }
  162. },
  163. },
  164. };
  165. };