987 lines
28 KiB
JavaScript
987 lines
28 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
}
|
|
|
|
function _slicedToArray(arr, i) {
|
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
}
|
|
|
|
function _toConsumableArray(arr) {
|
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
}
|
|
|
|
function _arrayWithoutHoles(arr) {
|
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
}
|
|
|
|
function _arrayWithHoles(arr) {
|
|
if (Array.isArray(arr)) return arr;
|
|
}
|
|
|
|
function _iterableToArray(iter) {
|
|
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
}
|
|
|
|
function _iterableToArrayLimit(arr, i) {
|
|
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
var _arr = [];
|
|
var _n = true;
|
|
var _d = false;
|
|
var _e = undefined;
|
|
|
|
try {
|
|
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
_arr.push(_s.value);
|
|
|
|
if (i && _arr.length === i) break;
|
|
}
|
|
} catch (err) {
|
|
_d = true;
|
|
_e = err;
|
|
} finally {
|
|
try {
|
|
if (!_n && _i["return"] != null) _i["return"]();
|
|
} finally {
|
|
if (_d) throw _e;
|
|
}
|
|
}
|
|
|
|
return _arr;
|
|
}
|
|
|
|
function _unsupportedIterableToArray(o, minLen) {
|
|
if (!o) return;
|
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
if (n === "Map" || n === "Set") return Array.from(o);
|
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
}
|
|
|
|
function _arrayLikeToArray(arr, len) {
|
|
if (len == null || len > arr.length) len = arr.length;
|
|
|
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
|
|
return arr2;
|
|
}
|
|
|
|
function _nonIterableSpread() {
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
function _nonIterableRest() {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
/**
|
|
* For parsing color values.
|
|
* @module RGBColor
|
|
* @author Stoyan Stefanov <sstoo@gmail.com>
|
|
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
|
* @license MIT
|
|
*/
|
|
var simpleColors = {
|
|
aliceblue: 'f0f8ff',
|
|
antiquewhite: 'faebd7',
|
|
aqua: '00ffff',
|
|
aquamarine: '7fffd4',
|
|
azure: 'f0ffff',
|
|
beige: 'f5f5dc',
|
|
bisque: 'ffe4c4',
|
|
black: '000000',
|
|
blanchedalmond: 'ffebcd',
|
|
blue: '0000ff',
|
|
blueviolet: '8a2be2',
|
|
brown: 'a52a2a',
|
|
burlywood: 'deb887',
|
|
cadetblue: '5f9ea0',
|
|
chartreuse: '7fff00',
|
|
chocolate: 'd2691e',
|
|
coral: 'ff7f50',
|
|
cornflowerblue: '6495ed',
|
|
cornsilk: 'fff8dc',
|
|
crimson: 'dc143c',
|
|
cyan: '00ffff',
|
|
darkblue: '00008b',
|
|
darkcyan: '008b8b',
|
|
darkgoldenrod: 'b8860b',
|
|
darkgray: 'a9a9a9',
|
|
darkgreen: '006400',
|
|
darkkhaki: 'bdb76b',
|
|
darkmagenta: '8b008b',
|
|
darkolivegreen: '556b2f',
|
|
darkorange: 'ff8c00',
|
|
darkorchid: '9932cc',
|
|
darkred: '8b0000',
|
|
darksalmon: 'e9967a',
|
|
darkseagreen: '8fbc8f',
|
|
darkslateblue: '483d8b',
|
|
darkslategray: '2f4f4f',
|
|
darkturquoise: '00ced1',
|
|
darkviolet: '9400d3',
|
|
deeppink: 'ff1493',
|
|
deepskyblue: '00bfff',
|
|
dimgray: '696969',
|
|
dodgerblue: '1e90ff',
|
|
feldspar: 'd19275',
|
|
firebrick: 'b22222',
|
|
floralwhite: 'fffaf0',
|
|
forestgreen: '228b22',
|
|
fuchsia: 'ff00ff',
|
|
gainsboro: 'dcdcdc',
|
|
ghostwhite: 'f8f8ff',
|
|
gold: 'ffd700',
|
|
goldenrod: 'daa520',
|
|
gray: '808080',
|
|
green: '008000',
|
|
greenyellow: 'adff2f',
|
|
honeydew: 'f0fff0',
|
|
hotpink: 'ff69b4',
|
|
indianred: 'cd5c5c',
|
|
indigo: '4b0082',
|
|
ivory: 'fffff0',
|
|
khaki: 'f0e68c',
|
|
lavender: 'e6e6fa',
|
|
lavenderblush: 'fff0f5',
|
|
lawngreen: '7cfc00',
|
|
lemonchiffon: 'fffacd',
|
|
lightblue: 'add8e6',
|
|
lightcoral: 'f08080',
|
|
lightcyan: 'e0ffff',
|
|
lightgoldenrodyellow: 'fafad2',
|
|
lightgrey: 'd3d3d3',
|
|
lightgreen: '90ee90',
|
|
lightpink: 'ffb6c1',
|
|
lightsalmon: 'ffa07a',
|
|
lightseagreen: '20b2aa',
|
|
lightskyblue: '87cefa',
|
|
lightslateblue: '8470ff',
|
|
lightslategray: '778899',
|
|
lightsteelblue: 'b0c4de',
|
|
lightyellow: 'ffffe0',
|
|
lime: '00ff00',
|
|
limegreen: '32cd32',
|
|
linen: 'faf0e6',
|
|
magenta: 'ff00ff',
|
|
maroon: '800000',
|
|
mediumaquamarine: '66cdaa',
|
|
mediumblue: '0000cd',
|
|
mediumorchid: 'ba55d3',
|
|
mediumpurple: '9370d8',
|
|
mediumseagreen: '3cb371',
|
|
mediumslateblue: '7b68ee',
|
|
mediumspringgreen: '00fa9a',
|
|
mediumturquoise: '48d1cc',
|
|
mediumvioletred: 'c71585',
|
|
midnightblue: '191970',
|
|
mintcream: 'f5fffa',
|
|
mistyrose: 'ffe4e1',
|
|
moccasin: 'ffe4b5',
|
|
navajowhite: 'ffdead',
|
|
navy: '000080',
|
|
oldlace: 'fdf5e6',
|
|
olive: '808000',
|
|
olivedrab: '6b8e23',
|
|
orange: 'ffa500',
|
|
orangered: 'ff4500',
|
|
orchid: 'da70d6',
|
|
palegoldenrod: 'eee8aa',
|
|
palegreen: '98fb98',
|
|
paleturquoise: 'afeeee',
|
|
palevioletred: 'd87093',
|
|
papayawhip: 'ffefd5',
|
|
peachpuff: 'ffdab9',
|
|
peru: 'cd853f',
|
|
pink: 'ffc0cb',
|
|
plum: 'dda0dd',
|
|
powderblue: 'b0e0e6',
|
|
purple: '800080',
|
|
red: 'ff0000',
|
|
rosybrown: 'bc8f8f',
|
|
royalblue: '4169e1',
|
|
saddlebrown: '8b4513',
|
|
salmon: 'fa8072',
|
|
sandybrown: 'f4a460',
|
|
seagreen: '2e8b57',
|
|
seashell: 'fff5ee',
|
|
sienna: 'a0522d',
|
|
silver: 'c0c0c0',
|
|
skyblue: '87ceeb',
|
|
slateblue: '6a5acd',
|
|
slategray: '708090',
|
|
snow: 'fffafa',
|
|
springgreen: '00ff7f',
|
|
steelblue: '4682b4',
|
|
tan: 'd2b48c',
|
|
teal: '008080',
|
|
thistle: 'd8bfd8',
|
|
tomato: 'ff6347',
|
|
turquoise: '40e0d0',
|
|
violet: 'ee82ee',
|
|
violetred: 'd02090',
|
|
wheat: 'f5deb3',
|
|
white: 'ffffff',
|
|
whitesmoke: 'f5f5f5',
|
|
yellow: 'ffff00',
|
|
yellowgreen: '9acd32'
|
|
}; // array of color definition objects
|
|
|
|
var colorDefs = [{
|
|
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
|
|
// re: /^rgb\((?<r>\d{1,3}),\s*(?<g>\d{1,3}),\s*(?<b>\d{1,3})\)$/,
|
|
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
|
|
process: function process(_) {
|
|
for (var _len = arguments.length, bits = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
bits[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
return bits.map(function (b) {
|
|
return Number.parseInt(b);
|
|
});
|
|
}
|
|
}, {
|
|
re: /^(\w{2})(\w{2})(\w{2})$/,
|
|
// re: /^(?<r>\w{2})(?<g>\w{2})(?<b>\w{2})$/,
|
|
example: ['#00ff00', '336699'],
|
|
process: function process(_) {
|
|
for (var _len2 = arguments.length, bits = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
bits[_key2 - 1] = arguments[_key2];
|
|
}
|
|
|
|
return bits.map(function (b) {
|
|
return Number.parseInt(b, 16);
|
|
});
|
|
}
|
|
}, {
|
|
re: /^(\w)(\w)(\w)$/,
|
|
// re: /^(?<r>\w{1})(?<g>\w{1})(?<b>\w{1})$/,
|
|
example: ['#fb0', 'f0f'],
|
|
process: function process(_) {
|
|
for (var _len3 = arguments.length, bits = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
|
bits[_key3 - 1] = arguments[_key3];
|
|
}
|
|
|
|
return bits.map(function (b) {
|
|
return Number.parseInt(b + b, 16);
|
|
});
|
|
}
|
|
}];
|
|
/**
|
|
* A class to parse color values.
|
|
*/
|
|
|
|
var RGBColor = /*#__PURE__*/function () {
|
|
/**
|
|
* @param {string} colorString
|
|
*/
|
|
function RGBColor(colorString) {
|
|
var _this = this;
|
|
|
|
_classCallCheck(this, RGBColor);
|
|
|
|
this.ok = false; // strip any leading #
|
|
|
|
if (colorString.charAt(0) === '#') {
|
|
// remove # if any
|
|
colorString = colorString.substr(1, 6);
|
|
}
|
|
|
|
colorString = colorString.replace(/ /g, '');
|
|
colorString = colorString.toLowerCase(); // before getting into regexps, try simple matches
|
|
// and overwrite the input
|
|
|
|
if (colorString in simpleColors) {
|
|
colorString = simpleColors[colorString];
|
|
} // end of simple type-in colors
|
|
// search through the definitions to find a match
|
|
|
|
|
|
colorDefs.forEach(function (_ref) {
|
|
var re = _ref.re,
|
|
processor = _ref.process;
|
|
var bits = re.exec(colorString);
|
|
|
|
if (bits) {
|
|
var _processor = processor.apply(void 0, _toConsumableArray(bits)),
|
|
_processor2 = _slicedToArray(_processor, 3),
|
|
r = _processor2[0],
|
|
g = _processor2[1],
|
|
b = _processor2[2];
|
|
|
|
Object.assign(_this, {
|
|
r: r,
|
|
g: g,
|
|
b: b
|
|
});
|
|
_this.ok = true;
|
|
}
|
|
}); // validate/cleanup values
|
|
|
|
this.r = this.r < 0 || isNaN(this.r) ? 0 : this.r > 255 ? 255 : this.r;
|
|
this.g = this.g < 0 || isNaN(this.g) ? 0 : this.g > 255 ? 255 : this.g;
|
|
this.b = this.b < 0 || isNaN(this.b) ? 0 : this.b > 255 ? 255 : this.b;
|
|
} // some getters
|
|
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
|
|
|
|
_createClass(RGBColor, [{
|
|
key: "toRGB",
|
|
value: function toRGB() {
|
|
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
|
}
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
|
|
}, {
|
|
key: "toHex",
|
|
value: function toHex() {
|
|
var r = this.r.toString(16);
|
|
var g = this.g.toString(16);
|
|
var b = this.b.toString(16);
|
|
|
|
if (r.length === 1) {
|
|
r = '0' + r;
|
|
}
|
|
|
|
if (g.length === 1) {
|
|
g = '0' + g;
|
|
}
|
|
|
|
if (b.length === 1) {
|
|
b = '0' + b;
|
|
}
|
|
|
|
return '#' + r + g + b;
|
|
}
|
|
/**
|
|
* Offers a bulleted list of help.
|
|
* @returns {HTMLUListElement}
|
|
*/
|
|
|
|
}], [{
|
|
key: "getHelpXML",
|
|
value: function getHelpXML() {
|
|
var examples = [].concat(_toConsumableArray(colorDefs.flatMap(function (_ref2) {
|
|
var example = _ref2.example;
|
|
return example;
|
|
})), _toConsumableArray(Object.keys(simpleColors)));
|
|
var xml = document.createElement('ul');
|
|
xml.setAttribute('id', 'rgbcolor-examples');
|
|
xml.append.apply(xml, _toConsumableArray(examples.map(function (example) {
|
|
try {
|
|
var listItem = document.createElement('li');
|
|
var listColor = new RGBColor(example);
|
|
var exampleDiv = document.createElement('div');
|
|
exampleDiv.style.cssText = "\n margin: 3px;\n border: 1px solid black;\n background: ".concat(listColor.toHex(), ";\n color: ").concat(listColor.toHex(), ";");
|
|
exampleDiv.append('test');
|
|
var listItemValue = " ".concat(example, " -> ").concat(listColor.toRGB(), " -> ").concat(listColor.toHex());
|
|
listItem.append(exampleDiv, listItemValue);
|
|
return listItem;
|
|
} catch (e) {
|
|
return '';
|
|
}
|
|
})));
|
|
return xml;
|
|
}
|
|
}]);
|
|
|
|
return RGBColor;
|
|
}();
|
|
|
|
var jsPDFAPI = jsPDF.API;
|
|
var pdfSvgAttr = {
|
|
// allowed attributes. all others are removed from the preview.
|
|
g: ['stroke', 'fill', 'stroke-width'],
|
|
line: ['x1', 'y1', 'x2', 'y2', 'stroke', 'stroke-width'],
|
|
rect: ['x', 'y', 'width', 'height', 'stroke', 'fill', 'stroke-width'],
|
|
ellipse: ['cx', 'cy', 'rx', 'ry', 'stroke', 'fill', 'stroke-width'],
|
|
circle: ['cx', 'cy', 'r', 'stroke', 'fill', 'stroke-width'],
|
|
polygon: ['points', 'stroke', 'fill', 'stroke-width'],
|
|
// polyline attributes are the same as those of polygon
|
|
path: ['d', 'stroke', 'fill', 'stroke-width'],
|
|
text: ['x', 'y', 'font-size', 'font-family', 'text-anchor', 'font-weight', 'font-style', 'fill']
|
|
};
|
|
|
|
var attributeIsNotEmpty = function attributeIsNotEmpty(node, attr) {
|
|
var attVal = attr ? node.getAttribute(attr) : node;
|
|
return attVal !== '' && attVal !== null && attVal !== 'null';
|
|
};
|
|
|
|
var nodeIs = function nodeIs(node, possible) {
|
|
return possible.includes(node.tagName.toLowerCase());
|
|
};
|
|
|
|
var removeAttributes = function removeAttributes(node, attributes) {
|
|
var toRemove = [];
|
|
[].forEach.call(node.attributes, function (a) {
|
|
if (attributeIsNotEmpty(a) && !attributes.includes(a.name.toLowerCase())) {
|
|
toRemove.push(a.name);
|
|
}
|
|
});
|
|
toRemove.forEach(function (a) {
|
|
node.removeAttribute(a.name);
|
|
});
|
|
};
|
|
|
|
var numRgx = /[+-]?(?:\d+\.\d*|\d+|\.\d+)(?:[eE]\d+|[eE][+-]\d+|)/g;
|
|
|
|
var getLinesOptionsOfPoly = function getLinesOptionsOfPoly(node) {
|
|
var nums = node.getAttribute('points');
|
|
nums = nums && nums.match(numRgx) || [];
|
|
|
|
if (nums && nums.length) {
|
|
nums = nums.map(function (n) {
|
|
return Number(n);
|
|
});
|
|
|
|
if (nums.length % 2) {
|
|
nums.length--;
|
|
}
|
|
}
|
|
|
|
if (nums.length < 4) {
|
|
console.log('invalid points attribute:', node); // eslint-disable-line no-console
|
|
|
|
return undefined;
|
|
}
|
|
|
|
var _nums = nums,
|
|
_nums2 = _slicedToArray(_nums, 2),
|
|
x = _nums2[0],
|
|
y = _nums2[1],
|
|
lines = [];
|
|
|
|
for (var i = 2; i < nums.length; i += 2) {
|
|
lines.push([nums[i] - nums[i - 2], nums[i + 1] - nums[i - 1]]);
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
lines: lines
|
|
};
|
|
};
|
|
|
|
var getLinesOptionsOfPath = function getLinesOptionsOfPath(node) {
|
|
var segList = node.pathSegList,
|
|
n = segList.numberOfItems,
|
|
opsList = [];
|
|
var ops = {
|
|
lines: []
|
|
};
|
|
var curr = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
var reflectControl = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
var toRelative = function toRelative(nums, relativeTo) {
|
|
var re = [];
|
|
|
|
for (var i = 0; i < nums.length - 1; i += 2) {
|
|
re[i] = nums[i] - relativeTo.x;
|
|
re[i + 1] = nums[i + 1] - relativeTo.y;
|
|
}
|
|
|
|
return re;
|
|
};
|
|
|
|
var curveQToC = function curveQToC(nums) {
|
|
var a = 2 / 3;
|
|
var re = [nums[0] * a, nums[1] * a, nums[2] + (nums[0] - nums[2]) * a, nums[3] + (nums[1] - nums[3]) * a, nums[2], nums[3]];
|
|
return re;
|
|
};
|
|
|
|
for (var i = 0, letterPrev; i < n; i++) {
|
|
var seg = segList.getItem(i);
|
|
var x1 = seg.x1,
|
|
y1 = seg.y1,
|
|
x2 = seg.x2,
|
|
y2 = seg.y2,
|
|
x = seg.x,
|
|
y = seg.y,
|
|
letter = seg.pathSegTypeAsLetter;
|
|
var isRelative = letter >= 'a'; // lowercase letter
|
|
|
|
switch (letter) {
|
|
case 'M':
|
|
case 'm':
|
|
{
|
|
if (ops.lines.length && Object.prototype.hasOwnProperty.call(ops, 'x')) {
|
|
opsList.push(ops);
|
|
}
|
|
|
|
ops = {
|
|
lines: [],
|
|
x: isRelative ? x + curr.x : x,
|
|
y: isRelative ? y + curr.y : y,
|
|
closed: false
|
|
};
|
|
ops.closed = false;
|
|
break;
|
|
}
|
|
|
|
case 'L':
|
|
{
|
|
ops.lines.push(toRelative([x, y], curr));
|
|
break;
|
|
}
|
|
|
|
case 'l':
|
|
{
|
|
ops.lines.push([x, y]);
|
|
break;
|
|
}
|
|
|
|
case 'H':
|
|
{
|
|
ops.lines.push([x - curr.x, 0]);
|
|
break;
|
|
}
|
|
|
|
case 'h':
|
|
{
|
|
ops.lines.push([x, 0]);
|
|
break;
|
|
}
|
|
|
|
case 'V':
|
|
{
|
|
ops.lines.push([0, y - curr.y]);
|
|
break;
|
|
}
|
|
|
|
case 'v':
|
|
{
|
|
ops.lines.push([0, y]);
|
|
break;
|
|
}
|
|
|
|
case 'Q':
|
|
{
|
|
ops.lines.push(curveQToC(toRelative([x1, y1, x, y], curr)));
|
|
reflectControl.x = x - x1;
|
|
reflectControl.y = y - y1;
|
|
break;
|
|
}
|
|
|
|
case 'q':
|
|
{
|
|
ops.lines.push(curveQToC([x1, y1, x, y]));
|
|
reflectControl.x = x - x1;
|
|
reflectControl.y = y - y1;
|
|
break;
|
|
}
|
|
|
|
case 'T':
|
|
{
|
|
var p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
ops.lines.push(curveQToC([p1.x, p1.y, x - curr.x, y - curr.y]));
|
|
reflectControl.x = x - curr.x - p1.x;
|
|
reflectControl.y = y - curr.y - p1.y;
|
|
break;
|
|
}
|
|
|
|
case 't':
|
|
{
|
|
var _p = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
ops.lines.push([_p.x, _p.y, x, y]);
|
|
reflectControl.x = x - _p.x;
|
|
reflectControl.y = y - _p.y;
|
|
break;
|
|
}
|
|
|
|
case 'C':
|
|
{
|
|
ops.lines.push(toRelative([x1, y1, x2, y2, x, y], curr));
|
|
break;
|
|
}
|
|
|
|
case 'c':
|
|
{
|
|
ops.lines.push([x1, y1, x2, y2, x, y]);
|
|
break;
|
|
}
|
|
|
|
case 'S':
|
|
case 's':
|
|
{
|
|
var _p2 = letterPrev && 'CcSs'.includes(letterPrev) ? reflectControl : {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
if (isRelative) {
|
|
ops.lines.push([_p2.x, _p2.y, x2, y2, x, y]);
|
|
} else {
|
|
ops.lines.push([_p2.x, _p2.y].concat(toRelative([x2, y2, x, y], curr)));
|
|
}
|
|
|
|
reflectControl.x = x - x2;
|
|
reflectControl.y = y - y2;
|
|
break;
|
|
}
|
|
|
|
case 'A':
|
|
case 'a':
|
|
{
|
|
// Not support command 'A' and 'a' yet. Treat it as straight line instead.
|
|
if (isRelative) {
|
|
ops.lines.push([x, y]);
|
|
} else {
|
|
ops.lines.push(toRelative([x, y], curr));
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
case 'z':
|
|
case 'Z':
|
|
{
|
|
ops.closed = true;
|
|
break;
|
|
}
|
|
|
|
default:
|
|
{
|
|
// throw new Error('Unknown path command ' + letter);
|
|
return opsList;
|
|
}
|
|
}
|
|
|
|
if (letter === 'Z' || letter === 'z') {
|
|
curr.x = ops.x;
|
|
curr.y = ops.y;
|
|
} else {
|
|
if (letter !== 'V' && letter !== 'v') {
|
|
curr.x = isRelative ? x + curr.x : x;
|
|
}
|
|
|
|
if (letter !== 'H' && letter !== 'h') {
|
|
curr.y = isRelative ? y + curr.y : y;
|
|
}
|
|
}
|
|
|
|
letterPrev = letter;
|
|
}
|
|
|
|
if (ops.lines.length && Object.prototype.hasOwnProperty.call(ops, 'x')) {
|
|
opsList.push(ops);
|
|
}
|
|
|
|
return opsList;
|
|
};
|
|
|
|
var svgElementToPdf = function svgElementToPdf(element, pdf, options) {
|
|
// pdf is a jsPDF object
|
|
// console.log('options =', options);
|
|
var remove = options.removeInvalid === undefined ? false : options.removeInvalid;
|
|
var k = options.scale === undefined ? 1.0 : options.scale;
|
|
var colorMode = null;
|
|
[].forEach.call(element.children, function (node) {
|
|
// console.log('passing: ', node);
|
|
// let hasStrokeColor = false;
|
|
var hasFillColor = false;
|
|
var fillRGB;
|
|
colorMode = null;
|
|
|
|
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline', 'path', 'text'])) {
|
|
var fillColor = node.getAttribute('fill');
|
|
|
|
if (attributeIsNotEmpty(fillColor) && node.getAttribute('fill-opacity') !== '0') {
|
|
fillRGB = new RGBColor(fillColor);
|
|
|
|
if (fillRGB.ok) {
|
|
hasFillColor = true;
|
|
colorMode = 'F';
|
|
} else {
|
|
colorMode = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline', 'path'])) {
|
|
if (hasFillColor) {
|
|
pdf.setFillColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
|
}
|
|
|
|
if (attributeIsNotEmpty(node, 'stroke-width')) {
|
|
pdf.setLineWidth(k * Number.parseInt(node.getAttribute('stroke-width')));
|
|
}
|
|
|
|
var strokeColor = node.getAttribute('stroke');
|
|
|
|
if (attributeIsNotEmpty(strokeColor) && node.getAttribute('stroke-width') !== '0' && node.getAttribute('stroke-opacity') !== '0') {
|
|
var strokeRGB = new RGBColor(strokeColor);
|
|
|
|
if (strokeRGB.ok) {
|
|
// hasStrokeColor = true;
|
|
pdf.setDrawColor(strokeRGB.r, strokeRGB.g, strokeRGB.b);
|
|
|
|
if (hasFillColor) {
|
|
colorMode = 'FD';
|
|
} else {
|
|
colorMode = 'S';
|
|
}
|
|
} else {
|
|
colorMode = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
var tag = node.tagName.toLowerCase();
|
|
|
|
switch (tag) {
|
|
case 'svg':
|
|
case 'a':
|
|
case 'g':
|
|
svgElementToPdf(node, pdf, options);
|
|
removeAttributes(node, pdfSvgAttr.g);
|
|
break;
|
|
|
|
case 'line':
|
|
pdf.line(k * Number.parseInt(node.getAttribute('x1')), k * Number.parseInt(node.getAttribute('y1')), k * Number.parseInt(node.getAttribute('x2')), k * Number.parseInt(node.getAttribute('y2')));
|
|
removeAttributes(node, pdfSvgAttr.line);
|
|
break;
|
|
|
|
case 'rect':
|
|
pdf.rect(k * Number.parseInt(node.getAttribute('x')), k * Number.parseInt(node.getAttribute('y')), k * Number.parseInt(node.getAttribute('width')), k * Number.parseInt(node.getAttribute('height')), colorMode);
|
|
removeAttributes(node, pdfSvgAttr.rect);
|
|
break;
|
|
|
|
case 'ellipse':
|
|
pdf.ellipse(k * Number.parseInt(node.getAttribute('cx')), k * Number.parseInt(node.getAttribute('cy')), k * Number.parseInt(node.getAttribute('rx')), k * Number.parseInt(node.getAttribute('ry')), colorMode);
|
|
removeAttributes(node, pdfSvgAttr.ellipse);
|
|
break;
|
|
|
|
case 'circle':
|
|
pdf.circle(k * Number.parseInt(node.getAttribute('cx')), k * Number.parseInt(node.getAttribute('cy')), k * Number.parseInt(node.getAttribute('r')), colorMode);
|
|
removeAttributes(node, pdfSvgAttr.circle);
|
|
break;
|
|
|
|
case 'polygon':
|
|
case 'polyline':
|
|
{
|
|
var linesOptions = getLinesOptionsOfPoly(node);
|
|
|
|
if (linesOptions) {
|
|
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], colorMode, tag === 'polygon' // polygon is closed, polyline is not closed
|
|
);
|
|
}
|
|
|
|
removeAttributes(node, pdfSvgAttr.polygon);
|
|
break;
|
|
}
|
|
|
|
case 'path':
|
|
{
|
|
if (colorMode) {
|
|
var linesOptionsList = getLinesOptionsOfPath(node);
|
|
|
|
if (linesOptionsList.length > 0) {
|
|
linesOptionsList.forEach(function (linesOptions) {
|
|
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], null, linesOptions.closed);
|
|
}); // svg fill rule default is nonzero
|
|
|
|
var fillRule = node.getAttribute('fill-rule');
|
|
|
|
if (fillRule === 'evenodd') {
|
|
// f* : fill using even-odd rule
|
|
// B* : stroke and fill using even-odd rule
|
|
if (colorMode === 'F') {
|
|
colorMode = 'f*';
|
|
} else if (colorMode === 'FD') {
|
|
colorMode = 'B*';
|
|
}
|
|
}
|
|
|
|
pdf.internal.write(pdf.internal.getStyle(colorMode));
|
|
}
|
|
}
|
|
|
|
removeAttributes(node, pdfSvgAttr.path);
|
|
break;
|
|
}
|
|
|
|
case 'text':
|
|
{
|
|
if (node.hasAttribute('font-family')) {
|
|
switch ((node.getAttribute('font-family') || '').toLowerCase()) {
|
|
case 'serif':
|
|
pdf.setFont('times');
|
|
break;
|
|
|
|
case 'monospace':
|
|
pdf.setFont('courier');
|
|
break;
|
|
|
|
case 'times':
|
|
pdf.setFont('times');
|
|
break;
|
|
|
|
case 'courier':
|
|
pdf.setFont('courier');
|
|
break;
|
|
|
|
case 'helvetica':
|
|
pdf.setFont('helvetica');
|
|
break;
|
|
|
|
default:
|
|
node.setAttribute('font-family', 'sans-serif');
|
|
pdf.setFont('helvetica');
|
|
}
|
|
}
|
|
|
|
if (hasFillColor) {
|
|
pdf.setTextColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
|
}
|
|
|
|
var fontType = '';
|
|
|
|
if (node.hasAttribute('font-weight')) {
|
|
if (node.getAttribute('font-weight') === 'bold') {
|
|
fontType = 'bold';
|
|
} else {
|
|
node.removeAttribute('font-weight');
|
|
}
|
|
}
|
|
|
|
if (node.hasAttribute('font-style')) {
|
|
if (node.getAttribute('font-style') === 'italic') {
|
|
fontType += 'italic';
|
|
} else {
|
|
node.removeAttribute('font-style');
|
|
}
|
|
}
|
|
|
|
pdf.setFontType(fontType);
|
|
var pdfFontSize = node.hasAttribute('font-size') ? Number.parseInt(node.getAttribute('font-size')) : 16;
|
|
/**
|
|
*
|
|
* @param {Element} elem
|
|
* @returns {Float}
|
|
*/
|
|
|
|
var getWidth = function getWidth(elem) {
|
|
var box;
|
|
|
|
try {
|
|
box = elem.getBBox(); // Firefox on MacOS will raise error here
|
|
} catch (err) {
|
|
// copy and append to body so that getBBox is available
|
|
var nodeCopy = elem.cloneNode(true);
|
|
var svg = elem.ownerSVGElement.cloneNode(false);
|
|
svg.appendChild(nodeCopy);
|
|
document.body.appendChild(svg);
|
|
|
|
try {
|
|
box = nodeCopy.getBBox();
|
|
} catch (error) {
|
|
box = {
|
|
width: 0
|
|
};
|
|
}
|
|
|
|
svg.remove();
|
|
}
|
|
|
|
return box.width;
|
|
}; // TODO: use more accurate positioning!!
|
|
|
|
|
|
var x,
|
|
y,
|
|
xOffset = 0;
|
|
|
|
if (node.hasAttribute('text-anchor')) {
|
|
switch (node.getAttribute('text-anchor')) {
|
|
case 'end':
|
|
xOffset = getWidth(node);
|
|
break;
|
|
|
|
case 'middle':
|
|
xOffset = getWidth(node) / 2;
|
|
break;
|
|
|
|
case 'start':
|
|
break;
|
|
|
|
case 'default':
|
|
node.setAttribute('text-anchor', 'start');
|
|
break;
|
|
}
|
|
|
|
x = Number.parseInt(node.getAttribute('x')) - xOffset;
|
|
y = Number.parseInt(node.getAttribute('y'));
|
|
} // console.log('fontSize:', pdfFontSize, 'text:', node.textContent);
|
|
|
|
|
|
pdf.setFontSize(pdfFontSize).text(k * x, k * y, node.textContent);
|
|
removeAttributes(node, pdfSvgAttr.text);
|
|
break; // TODO: image
|
|
}
|
|
|
|
default:
|
|
if (remove) {
|
|
console.log("can't translate to pdf:", node); // eslint-disable-line no-console
|
|
|
|
node.remove();
|
|
}
|
|
|
|
}
|
|
});
|
|
return pdf;
|
|
};
|
|
|
|
jsPDFAPI.addSVG = function (element, x, y, options) {
|
|
options = options === undefined ? {} : options;
|
|
options.x_offset = x;
|
|
options.y_offset = y;
|
|
|
|
if (typeof element === 'string') {
|
|
element = new DOMParser().parseFromString(element, 'text/xml').documentElement;
|
|
}
|
|
|
|
svgElementToPdf(element, this, options);
|
|
return this;
|
|
};
|
|
|
|
}());
|