- Build: Babel 7
- npm: Update qr-manipulation
This commit is contained in:
Brett Zamir
287
dist/jspdf.plugin.svgToPdf.js
vendored
287
dist/jspdf.plugin.svgToPdf.js
vendored
@@ -1,77 +1,85 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var classCallCheck = function (instance, Constructor) {
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var createClass = 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 _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);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
function _createClass(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) _defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
var slicedToArray = function () {
|
||||
function sliceIterator(arr, i) {
|
||||
var _arr = [];
|
||||
var _n = true;
|
||||
var _d = false;
|
||||
var _e = undefined;
|
||||
function _slicedToArray(arr, i) {
|
||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
||||
}
|
||||
|
||||
try {
|
||||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value);
|
||||
function _toConsumableArray(arr) {
|
||||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
||||
}
|
||||
|
||||
if (i && _arr.length === i) break;
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true;
|
||||
_e = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i["return"]) _i["return"]();
|
||||
} finally {
|
||||
if (_d) throw _e;
|
||||
}
|
||||
}
|
||||
|
||||
return _arr;
|
||||
}
|
||||
|
||||
return function (arr, i) {
|
||||
if (Array.isArray(arr)) {
|
||||
return arr;
|
||||
} else if (Symbol.iterator in Object(arr)) {
|
||||
return sliceIterator(arr, i);
|
||||
} else {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
var toConsumableArray = function (arr) {
|
||||
function _arrayWithoutHoles(arr) {
|
||||
if (Array.isArray(arr)) {
|
||||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
||||
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
||||
|
||||
return arr2;
|
||||
} else {
|
||||
return Array.from(arr);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function _arrayWithHoles(arr) {
|
||||
if (Array.isArray(arr)) return arr;
|
||||
}
|
||||
|
||||
function _iterableToArray(iter) {
|
||||
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
||||
}
|
||||
|
||||
function _iterableToArrayLimit(arr, i) {
|
||||
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 _nonIterableSpread() {
|
||||
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
||||
}
|
||||
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
|
||||
/**
|
||||
* For parsing color values
|
||||
@@ -224,9 +232,8 @@
|
||||
whitesmoke: 'f5f5f5',
|
||||
yellow: 'ffff00',
|
||||
yellowgreen: '9acd32'
|
||||
};
|
||||
}; // array of color definition objects
|
||||
|
||||
// array of color definition objects
|
||||
var colorDefs = [{
|
||||
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
|
||||
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
|
||||
@@ -246,136 +253,141 @@
|
||||
return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)];
|
||||
}
|
||||
}];
|
||||
|
||||
/**
|
||||
* A class to parse color values
|
||||
*/
|
||||
|
||||
var RGBColor = function () {
|
||||
var RGBColor =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
classCallCheck(this, RGBColor);
|
||||
_classCallCheck(this, RGBColor);
|
||||
|
||||
this.ok = false;
|
||||
this.ok = false; // strip any leading #
|
||||
|
||||
// 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
|
||||
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
|
||||
|
||||
} // end of simple type-in colors
|
||||
// search through the definitions to find a match
|
||||
|
||||
|
||||
for (var i = 0; i < colorDefs.length; i++) {
|
||||
var re = colorDefs[i].re;
|
||||
|
||||
var processor = colorDefs[i].process;
|
||||
var bits = re.exec(colorString);
|
||||
|
||||
if (bits) {
|
||||
var _processor = processor(bits),
|
||||
_processor2 = slicedToArray(_processor, 3),
|
||||
_processor2 = _slicedToArray(_processor, 3),
|
||||
r = _processor2[0],
|
||||
g = _processor2[1],
|
||||
b = _processor2[2];
|
||||
|
||||
Object.assign(this, { r: r, g: g, b: b });
|
||||
Object.assign(this, {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b
|
||||
});
|
||||
this.ok = true;
|
||||
}
|
||||
}
|
||||
} // validate/cleanup values
|
||||
|
||||
|
||||
// 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
|
||||
|
||||
// some getters
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
createClass(RGBColor, [{
|
||||
key: 'toRGB',
|
||||
_createClass(RGBColor, [{
|
||||
key: "toRGB",
|
||||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'toHex',
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* help
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'getHelpXML',
|
||||
key: "getHelpXML",
|
||||
value: function getHelpXML() {
|
||||
var examples = [];
|
||||
// add regexps
|
||||
var examples = []; // add regexps
|
||||
|
||||
for (var i = 0; i < colorDefs.length; i++) {
|
||||
var example = colorDefs[i].example;
|
||||
|
||||
for (var j = 0; j < example.length; j++) {
|
||||
examples[examples.length] = example[j];
|
||||
}
|
||||
}
|
||||
// add type-in colors
|
||||
examples.push.apply(examples, toConsumableArray(Object.keys(simpleColors)));
|
||||
} // add type-in colors
|
||||
|
||||
|
||||
examples.push.apply(examples, _toConsumableArray(Object.keys(simpleColors)));
|
||||
var xml = document.createElement('ul');
|
||||
xml.setAttribute('id', 'rgbcolor-examples');
|
||||
|
||||
for (var _i = 0; _i < examples.length; _i++) {
|
||||
try {
|
||||
var listItem = document.createElement('li');
|
||||
var listColor = new RGBColor(examples[_i]);
|
||||
var exampleDiv = document.createElement('div');
|
||||
exampleDiv.style.cssText = 'margin: 3px;\nborder: 1px solid black;\nbackground: ' + listColor.toHex() + ';\ncolor: ' + listColor.toHex() + ';';
|
||||
exampleDiv.style.cssText = "margin: 3px;\nborder: 1px solid black;\nbackground: ".concat(listColor.toHex(), ";\ncolor: ").concat(listColor.toHex(), ";");
|
||||
exampleDiv.append('test');
|
||||
var listItemValue = ' ' + examples[_i] + ' -> ' + listColor.toRGB() + ' -> ' + listColor.toHex();
|
||||
var listItemValue = " ".concat(examples[_i], " -> ").concat(listColor.toRGB(), " -> ").concat(listColor.toHex());
|
||||
listItem.append(exampleDiv, listItemValue);
|
||||
xml.append(listItem);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return xml;
|
||||
}
|
||||
}]);
|
||||
|
||||
return RGBColor;
|
||||
}();
|
||||
|
||||
/* globals jsPDF */
|
||||
|
||||
var jsPDFAPI = jsPDF.API;
|
||||
var pdfSvgAttr = {
|
||||
// allowed attributes. all others are removed from the preview.
|
||||
@@ -405,29 +417,32 @@
|
||||
toRemove.push(a.name);
|
||||
}
|
||||
});
|
||||
|
||||
toRemove.forEach(function (a) {
|
||||
node.removeAttribute(a.name);
|
||||
});
|
||||
};
|
||||
|
||||
var numRgx = /[+-]?(?:\d+\.\d*|\d+|\.\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(Number);
|
||||
|
||||
if (nums.length % 2) {
|
||||
nums.length--;
|
||||
}
|
||||
}
|
||||
|
||||
if (nums.length < 4) {
|
||||
console.log('invalid points attribute:', node);
|
||||
return;
|
||||
}
|
||||
|
||||
var _nums = nums,
|
||||
_nums2 = slicedToArray(_nums, 2),
|
||||
_nums2 = _slicedToArray(_nums, 2),
|
||||
x = _nums2[0],
|
||||
y = _nums2[1],
|
||||
lines = [];
|
||||
@@ -435,7 +450,12 @@
|
||||
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 };
|
||||
|
||||
return {
|
||||
x: x,
|
||||
y: y,
|
||||
lines: lines
|
||||
};
|
||||
};
|
||||
|
||||
var svgElementToPdf = function svgElementToPdf(element, pdf, options) {
|
||||
@@ -448,11 +468,14 @@
|
||||
// console.log('passing: ', node);
|
||||
// let hasStrokeColor = false;
|
||||
var hasFillColor = false;
|
||||
var fillRGB = void 0;
|
||||
var fillRGB;
|
||||
|
||||
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline', 'text'])) {
|
||||
var fillColor = node.getAttribute('fill');
|
||||
|
||||
if (attributeIsNotEmpty(fillColor)) {
|
||||
fillRGB = new RGBColor(fillColor);
|
||||
|
||||
if (fillRGB.ok) {
|
||||
hasFillColor = true;
|
||||
colorMode = 'F';
|
||||
@@ -461,19 +484,25 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline'])) {
|
||||
if (hasFillColor) {
|
||||
pdf.setFillColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
||||
}
|
||||
|
||||
if (attributeIsNotEmpty(node, 'stroke-width')) {
|
||||
pdf.setLineWidth(k * parseInt(node.getAttribute('stroke-width'), 10));
|
||||
}
|
||||
|
||||
var strokeColor = node.getAttribute('stroke');
|
||||
|
||||
if (attributeIsNotEmpty(strokeColor)) {
|
||||
var strokeRGB = new RGBColor(strokeColor);
|
||||
|
||||
if (strokeRGB.ok) {
|
||||
// hasStrokeColor = true;
|
||||
pdf.setDrawColor(strokeRGB.r, strokeRGB.g, strokeRGB.b);
|
||||
|
||||
if (colorMode === 'F') {
|
||||
colorMode = 'FD';
|
||||
} else {
|
||||
@@ -484,7 +513,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tag = node.tagName.toLowerCase();
|
||||
|
||||
switch (tag) {
|
||||
case 'svg':
|
||||
case 'a':
|
||||
@@ -492,48 +523,63 @@
|
||||
svgElementToPdf(node, pdf, options);
|
||||
removeAttributes(node, pdfSvgAttr.g);
|
||||
break;
|
||||
|
||||
case 'line':
|
||||
pdf.line(k * parseInt(node.getAttribute('x1'), 10), k * parseInt(node.getAttribute('y1'), 10), k * parseInt(node.getAttribute('x2'), 10), k * parseInt(node.getAttribute('y2'), 10));
|
||||
removeAttributes(node, pdfSvgAttr.line);
|
||||
break;
|
||||
|
||||
case 'rect':
|
||||
pdf.rect(k * parseInt(node.getAttribute('x'), 10), k * parseInt(node.getAttribute('y'), 10), k * parseInt(node.getAttribute('width'), 10), k * parseInt(node.getAttribute('height'), 10), colorMode);
|
||||
removeAttributes(node, pdfSvgAttr.rect);
|
||||
break;
|
||||
|
||||
case 'ellipse':
|
||||
pdf.ellipse(k * parseInt(node.getAttribute('cx'), 10), k * parseInt(node.getAttribute('cy'), 10), k * parseInt(node.getAttribute('rx'), 10), k * parseInt(node.getAttribute('ry'), 10), colorMode);
|
||||
removeAttributes(node, pdfSvgAttr.ellipse);
|
||||
break;
|
||||
|
||||
case 'circle':
|
||||
pdf.circle(k * parseInt(node.getAttribute('cx'), 10), k * parseInt(node.getAttribute('cy'), 10), k * parseInt(node.getAttribute('r'), 10), 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;
|
||||
// TODO: path
|
||||
|
||||
case 'text':
|
||||
if (node.hasAttribute('font-family')) {
|
||||
switch ((node.getAttribute('font-family') || '').toLowerCase()) {
|
||||
case 'serif':
|
||||
pdf.setFont('times');break;
|
||||
pdf.setFont('times');
|
||||
break;
|
||||
|
||||
case 'monospace':
|
||||
pdf.setFont('courier');break;
|
||||
pdf.setFont('courier');
|
||||
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';
|
||||
@@ -541,6 +587,7 @@
|
||||
node.removeAttribute('font-weight');
|
||||
}
|
||||
}
|
||||
|
||||
if (node.hasAttribute('font-style')) {
|
||||
if (node.getAttribute('font-style') === 'italic') {
|
||||
fontType += 'italic';
|
||||
@@ -548,11 +595,13 @@
|
||||
node.removeAttribute('font-style');
|
||||
}
|
||||
}
|
||||
|
||||
pdf.setFontType(fontType);
|
||||
var pdfFontSize = node.hasAttribute('font-size') ? parseInt(node.getAttribute('font-size'), 10) : 16;
|
||||
|
||||
var getWidth = function getWidth(node) {
|
||||
var box = void 0;
|
||||
var box;
|
||||
|
||||
try {
|
||||
box = node.getBBox(); // Firefox on MacOS will raise error here
|
||||
} catch (err) {
|
||||
@@ -561,43 +610,60 @@
|
||||
var svg = node.ownerSVGElement.cloneNode(false);
|
||||
svg.appendChild(nodeCopy);
|
||||
document.body.appendChild(svg);
|
||||
|
||||
try {
|
||||
box = nodeCopy.getBBox();
|
||||
} catch (err) {
|
||||
box = { width: 0 };
|
||||
box = {
|
||||
width: 0
|
||||
};
|
||||
}
|
||||
|
||||
document.body.removeChild(svg);
|
||||
}
|
||||
|
||||
return box.width;
|
||||
};
|
||||
// FIXME: use more accurate positioning!!
|
||||
var x = void 0,
|
||||
y = void 0,
|
||||
}; // FIXME: 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;
|
||||
xOffset = getWidth(node);
|
||||
break;
|
||||
|
||||
case 'middle':
|
||||
xOffset = getWidth(node) / 2;break;
|
||||
xOffset = getWidth(node) / 2;
|
||||
break;
|
||||
|
||||
case 'start':
|
||||
break;
|
||||
|
||||
case 'default':
|
||||
node.setAttribute('text-anchor', 'start');break;
|
||||
node.setAttribute('text-anchor', 'start');
|
||||
break;
|
||||
}
|
||||
|
||||
x = parseInt(node.getAttribute('x'), 10) - xOffset;
|
||||
y = parseInt(node.getAttribute('y'), 10);
|
||||
}
|
||||
// console.log('fontSize:', pdfFontSize, 'text:', node.textContent);
|
||||
} // 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);
|
||||
node.remove();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
return pdf;
|
||||
@@ -611,6 +677,7 @@
|
||||
if (typeof element === 'string') {
|
||||
element = new DOMParser().parseFromString(element, 'text/xml').documentElement;
|
||||
}
|
||||
|
||||
svgElementToPdf(element, this, options);
|
||||
return this;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user