removeOffCanvasPaths.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. 'use strict';
  2. exports.type = 'perItem';
  3. exports.active = false;
  4. exports.description = 'removes elements that are drawn outside of the viewbox (disabled by default)';
  5. var SVGO = require('../lib/svgo.js'),
  6. _path = require('./_path.js'),
  7. intersects = _path.intersects,
  8. path2js = _path.path2js,
  9. viewBox,
  10. viewBoxJS;
  11. /**
  12. * Remove elements that are drawn outside of the viewbox.
  13. *
  14. * @param {Object} item current iteration item
  15. * @return {Boolean} if false, item will be filtered out
  16. *
  17. * @author JoshyPHP
  18. */
  19. exports.fn = function(item) {
  20. if (item.isElem('path') && item.hasAttr('d') && typeof viewBox !== 'undefined')
  21. {
  22. // Consider that any item with a transform attribute or a M instruction
  23. // within the viewBox is visible
  24. if (hasTransform(item) || pathMovesWithinViewBox(item.attr('d').value))
  25. {
  26. return true;
  27. }
  28. var pathJS = path2js(item);
  29. if (pathJS.length === 2)
  30. {
  31. // Use a closed clone of the path if it's too short for intersects()
  32. pathJS = JSON.parse(JSON.stringify(pathJS));
  33. pathJS.push({ instruction: 'z' });
  34. }
  35. return intersects(viewBoxJS, pathJS);
  36. }
  37. if (item.isElem('svg'))
  38. {
  39. parseViewBox(item);
  40. }
  41. return true;
  42. };
  43. /**
  44. * Test whether given item or any of its ancestors has a transform attribute.
  45. *
  46. * @param {String} path
  47. * @return {Boolean}
  48. */
  49. function hasTransform(item)
  50. {
  51. return item.hasAttr('transform') || (item.parentNode && hasTransform(item.parentNode));
  52. }
  53. /**
  54. * Parse the viewBox coordinates and compute the JS representation of its path.
  55. *
  56. * @param {Object} svg svg element item
  57. */
  58. function parseViewBox(svg)
  59. {
  60. var viewBoxData = '';
  61. if (svg.hasAttr('viewBox'))
  62. {
  63. // Remove commas and plus signs, normalize and trim whitespace
  64. viewBoxData = svg.attr('viewBox').value;
  65. }
  66. else if (svg.hasAttr('height') && svg.hasAttr('width'))
  67. {
  68. viewBoxData = '0 0 ' + svg.attr('width').value + ' ' + svg.attr('height').value;
  69. }
  70. // Remove commas and plus signs, normalize and trim whitespace
  71. viewBoxData = viewBoxData.replace(/[,+]|px/g, ' ').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
  72. // Ensure that the dimensions are 4 values separated by space
  73. var m = /^(-?\d*\.?\d+) (-?\d*\.?\d+) (\d*\.?\d+) (\d*\.?\d+)$/.exec(viewBoxData);
  74. if (!m)
  75. {
  76. return;
  77. }
  78. // Store the viewBox boundaries
  79. viewBox = {
  80. left: parseFloat(m[1]),
  81. top: parseFloat(m[2]),
  82. right: parseFloat(m[1]) + parseFloat(m[3]),
  83. bottom: parseFloat(m[2]) + parseFloat(m[4])
  84. };
  85. var path = new SVGO().createContentItem({
  86. elem: 'path',
  87. prefix: '',
  88. local: 'path'
  89. });
  90. path.addAttr({
  91. name: 'd',
  92. prefix: '',
  93. local: 'd',
  94. value: 'M' + m[1] + ' ' + m[2] + 'h' + m[3] + 'v' + m[4] + 'H' + m[1] + 'z'
  95. });
  96. viewBoxJS = path2js(path);
  97. }
  98. /**
  99. * Test whether given path has a M instruction with coordinates within the viewBox.
  100. *
  101. * @param {String} path
  102. * @return {Boolean}
  103. */
  104. function pathMovesWithinViewBox(path)
  105. {
  106. var regexp = /M\s*(-?\d*\.?\d+)(?!\d)\s*(-?\d*\.?\d+)/g, m;
  107. while (null !== (m = regexp.exec(path)))
  108. {
  109. if (m[1] >= viewBox.left && m[1] <= viewBox.right && m[2] >= viewBox.top && m[2] <= viewBox.bottom)
  110. {
  111. return true;
  112. }
  113. }
  114. return false;
  115. }