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