You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.1 KiB
133 lines
3.1 KiB
'use strict'; |
|
|
|
exports.type = 'perItem'; |
|
|
|
exports.active = false; |
|
|
|
exports.description = 'removes elements that are drawn outside of the viewbox (disabled by default)'; |
|
|
|
var SVGO = require('../lib/svgo.js'), |
|
_path = require('./_path.js'), |
|
intersects = _path.intersects, |
|
path2js = _path.path2js, |
|
viewBox, |
|
viewBoxJS; |
|
|
|
/** |
|
* Remove elements that are drawn outside of the viewbox. |
|
* |
|
* @param {Object} item current iteration item |
|
* @return {Boolean} if false, item will be filtered out |
|
* |
|
* @author JoshyPHP |
|
*/ |
|
exports.fn = function(item) { |
|
|
|
if (item.isElem('path') && item.hasAttr('d') && typeof viewBox !== 'undefined') |
|
{ |
|
// Consider that any item with a transform attribute or a M instruction |
|
// within the viewBox is visible |
|
if (hasTransform(item) || pathMovesWithinViewBox(item.attr('d').value)) |
|
{ |
|
return true; |
|
} |
|
|
|
var pathJS = path2js(item); |
|
if (pathJS.length === 2) |
|
{ |
|
// Use a closed clone of the path if it's too short for intersects() |
|
pathJS = JSON.parse(JSON.stringify(pathJS)); |
|
pathJS.push({ instruction: 'z' }); |
|
} |
|
|
|
return intersects(viewBoxJS, pathJS); |
|
} |
|
if (item.isElem('svg')) |
|
{ |
|
parseViewBox(item); |
|
} |
|
|
|
return true; |
|
}; |
|
|
|
/** |
|
* Test whether given item or any of its ancestors has a transform attribute. |
|
* |
|
* @param {String} path |
|
* @return {Boolean} |
|
*/ |
|
function hasTransform(item) |
|
{ |
|
return item.hasAttr('transform') || (item.parentNode && hasTransform(item.parentNode)); |
|
} |
|
|
|
/** |
|
* Parse the viewBox coordinates and compute the JS representation of its path. |
|
* |
|
* @param {Object} svg svg element item |
|
*/ |
|
function parseViewBox(svg) |
|
{ |
|
var viewBoxData = ''; |
|
if (svg.hasAttr('viewBox')) |
|
{ |
|
// Remove commas and plus signs, normalize and trim whitespace |
|
viewBoxData = svg.attr('viewBox').value; |
|
} |
|
else if (svg.hasAttr('height') && svg.hasAttr('width')) |
|
{ |
|
viewBoxData = '0 0 ' + svg.attr('width').value + ' ' + svg.attr('height').value; |
|
} |
|
|
|
// Remove commas and plus signs, normalize and trim whitespace |
|
viewBoxData = viewBoxData.replace(/[,+]|px/g, ' ').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, ''); |
|
|
|
// Ensure that the dimensions are 4 values separated by space |
|
var m = /^(-?\d*\.?\d+) (-?\d*\.?\d+) (\d*\.?\d+) (\d*\.?\d+)$/.exec(viewBoxData); |
|
if (!m) |
|
{ |
|
return; |
|
} |
|
|
|
// Store the viewBox boundaries |
|
viewBox = { |
|
left: parseFloat(m[1]), |
|
top: parseFloat(m[2]), |
|
right: parseFloat(m[1]) + parseFloat(m[3]), |
|
bottom: parseFloat(m[2]) + parseFloat(m[4]) |
|
}; |
|
|
|
var path = new SVGO().createContentItem({ |
|
elem: 'path', |
|
prefix: '', |
|
local: 'path' |
|
}); |
|
path.addAttr({ |
|
name: 'd', |
|
prefix: '', |
|
local: 'd', |
|
value: 'M' + m[1] + ' ' + m[2] + 'h' + m[3] + 'v' + m[4] + 'H' + m[1] + 'z' |
|
}); |
|
|
|
viewBoxJS = path2js(path); |
|
} |
|
|
|
/** |
|
* Test whether given path has a M instruction with coordinates within the viewBox. |
|
* |
|
* @param {String} path |
|
* @return {Boolean} |
|
*/ |
|
function pathMovesWithinViewBox(path) |
|
{ |
|
var regexp = /M\s*(-?\d*\.?\d+)(?!\d)\s*(-?\d*\.?\d+)/g, m; |
|
while (null !== (m = regexp.exec(path))) |
|
{ |
|
if (m[1] >= viewBox.left && m[1] <= viewBox.right && m[2] >= viewBox.top && m[2] <= viewBox.bottom) |
|
{ |
|
return true; |
|
} |
|
} |
|
|
|
return false; |
|
}
|
|
|