- Fix (image import): Put src after onload to avoid missing event;

check other width/height properties in case offset is 0; fixes #278
master
Brett Zamir 2018-09-13 17:54:40 +08:00
parent 837678bfa7
commit 0688b9af60
11 changed files with 104 additions and 60 deletions

View File

@ -6,6 +6,8 @@
distinguish from other downloads
- Fix: Given lack of support now for dataURI export in Chrome, provide
PDF as export (#273 @cuixiping); fixes #124 and #254
- Fix (image import): Put src after onload to avoid missing event;
check other width/height properties in case offset is 0; fixes #278
- npm: Update devDeps
- npm: Point to official sinon-test package now that ES6 Modules
support landed

30
dist/index-es.js vendored
View File

@ -16418,7 +16418,7 @@ function SvgCanvas(container, config) {
* Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName
* @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@ -16490,7 +16490,7 @@ function SvgCanvas(container, config) {
outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType);
obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) {
cb(obj);
}
@ -28403,6 +28403,10 @@ editor.init = function () {
svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName;
if (exportWindowName) {
@ -29253,10 +29257,10 @@ editor.init = function () {
exportWindow = window.open(popURL, exportWindowName);
}
if (imgType === 'PDF') {
if (!customExportPDF) {
if (!customExportPDF && !isChrome()) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName);
svgCanvas.exportPDF(exportWindowName, isChrome() ? 'save' : undefined);
} else {
if (!customExportImage) {
openExportWindow();
@ -30702,7 +30706,9 @@ editor.init = function () {
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function (e) {
reader.onloadend = function (_ref15) {
var result = _ref15.target.result;
// let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({
@ -30716,7 +30722,7 @@ editor.init = function () {
style: 'pointer-events:inherit'
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
@ -30727,13 +30733,13 @@ editor.init = function () {
var imgWidth = 100;
var imgHeight = 100;
var img = new Image();
img.src = e.target.result;
img.style.opacity = 0;
img.onload = function () {
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
};
img.src = result;
};
reader.readAsDataURL(file);
}
@ -31038,9 +31044,9 @@ var messageQueue = [];
* @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined}
*/
var messageListener = function messageListener(_ref15) {
var data = _ref15.data,
origin = _ref15.origin;
var messageListener = function messageListener(_ref16) {
var data = _ref16.data,
origin = _ref16.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

30
dist/index-umd.js vendored
View File

@ -16424,7 +16424,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName
* @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@ -16496,7 +16496,7 @@
outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType);
obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) {
cb(obj);
}
@ -28409,6 +28409,10 @@
svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName;
if (exportWindowName) {
@ -29259,10 +29263,10 @@
exportWindow = window.open(popURL, exportWindowName);
}
if (imgType === 'PDF') {
if (!customExportPDF) {
if (!customExportPDF && !isChrome()) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName);
svgCanvas.exportPDF(exportWindowName, isChrome() ? 'save' : undefined);
} else {
if (!customExportImage) {
openExportWindow();
@ -30708,7 +30712,9 @@
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function (e) {
reader.onloadend = function (_ref15) {
var result = _ref15.target.result;
// let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({
@ -30722,7 +30728,7 @@
style: 'pointer-events:inherit'
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
@ -30733,13 +30739,13 @@
var imgWidth = 100;
var imgHeight = 100;
var img = new Image();
img.src = e.target.result;
img.style.opacity = 0;
img.onload = function () {
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
};
img.src = result;
};
reader.readAsDataURL(file);
}
@ -31044,9 +31050,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined}
*/
var messageListener = function messageListener(_ref15) {
var data = _ref15.data,
origin = _ref15.origin;
var messageListener = function messageListener(_ref16) {
var data = _ref16.data,
origin = _ref16.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -511,7 +511,25 @@
pdf.setFontType(fontType);
var pdfFontSize = node.hasAttribute('font-size') ? parseInt(node.getAttribute('font-size'), 10) : 16;
var box = node.getBBox();
var getWidth = function getWidth(node) {
var box = void 0;
try {
box = node.getBBox(); // Firefox on MacOS will raise error here
} catch (err) {
// copy and append to body so that getBBox is available
var nodeCopy = node.cloneNode(true);
var svg = node.ownerSVGElement.cloneNode(false);
svg.appendChild(nodeCopy);
document.body.appendChild(svg);
try {
box = nodeCopy.getBBox();
} catch (err) {
box = { width: 0 };
}
document.body.removeChild(svg);
}
return box.width;
};
// FIXME: use more accurate positioning!!
var x = void 0,
y = void 0,
@ -519,9 +537,9 @@
if (node.hasAttribute('text-anchor')) {
switch (node.getAttribute('text-anchor')) {
case 'end':
xOffset = box.width;break;
xOffset = getWidth(node);break;
case 'middle':
xOffset = box.width / 2;break;
xOffset = getWidth(node) / 2;break;
case 'start':
break;
case 'default':

View File

@ -5635,7 +5635,7 @@ editor.init = function () {
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function (e) {
reader.onloadend = function ({target: {result}}) {
// let's insert the new image until we know its dimensions
const insertNewImage = function (width, height) {
const newImage = svgCanvas.addSVGElementFromJson({
@ -5649,7 +5649,7 @@ editor.init = function () {
style: 'pointer-events:inherit'
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
@ -5660,13 +5660,13 @@ editor.init = function () {
let imgWidth = 100;
let imgHeight = 100;
const img = new Image();
img.src = e.target.result;
img.style.opacity = 0;
img.onload = function () {
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
};
img.src = result;
};
reader.readAsDataURL(file);
}

View File

@ -16421,7 +16421,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName
* @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@ -16493,7 +16493,7 @@
outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType);
obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) {
cb(obj);
}
@ -28406,6 +28406,10 @@
svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName;
if (exportWindowName) {
@ -29256,10 +29260,10 @@
exportWindow = window.open(popURL, exportWindowName);
}
if (imgType === 'PDF') {
if (!customExportPDF) {
if (!customExportPDF && !isChrome()) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName);
svgCanvas.exportPDF(exportWindowName, isChrome() ? 'save' : undefined);
} else {
if (!customExportImage) {
openExportWindow();
@ -30705,7 +30709,9 @@
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function (e) {
reader.onloadend = function (_ref15) {
var result = _ref15.target.result;
// let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({
@ -30719,7 +30725,7 @@
style: 'pointer-events:inherit'
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
@ -30730,13 +30736,13 @@
var imgWidth = 100;
var imgHeight = 100;
var img = new Image();
img.src = e.target.result;
img.style.opacity = 0;
img.onload = function () {
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
};
img.src = result;
};
reader.readAsDataURL(file);
}
@ -31041,9 +31047,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined}
*/
var messageListener = function messageListener(_ref15) {
var data = _ref15.data,
origin = _ref15.origin;
var messageListener = function messageListener(_ref16) {
var data = _ref16.data,
origin = _ref16.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin };

View File

@ -16421,7 +16421,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName
* @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@ -16493,7 +16493,7 @@
outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType);
obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) {
cb(obj);
}
@ -28406,6 +28406,10 @@
svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName;
if (exportWindowName) {
@ -29256,10 +29260,10 @@
exportWindow = window.open(popURL, exportWindowName);
}
if (imgType === 'PDF') {
if (!customExportPDF) {
if (!customExportPDF && !isChrome()) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName);
svgCanvas.exportPDF(exportWindowName, isChrome() ? 'save' : undefined);
} else {
if (!customExportImage) {
openExportWindow();
@ -30705,7 +30709,9 @@
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function (e) {
reader.onloadend = function (_ref15) {
var result = _ref15.target.result;
// let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({
@ -30719,7 +30725,7 @@
style: 'pointer-events:inherit'
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
@ -30730,13 +30736,13 @@
var imgWidth = 100;
var imgHeight = 100;
var img = new Image();
img.src = e.target.result;
img.style.opacity = 0;
img.onload = function () {
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
};
img.src = result;
};
reader.readAsDataURL(file);
}
@ -31041,9 +31047,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined}
*/
var messageListener = function messageListener(_ref15) {
var data = _ref15.data,
origin = _ref15.origin;
var messageListener = function messageListener(_ref16) {
var data = _ref16.data,
origin = _ref16.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin };