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

check other width/height properties in case offset is 0; fixes #278

CHANGES.md

@@ -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

dist/index-es.js

@@ -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;
+              imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-              imgHeight = img.offsetHeight;
+              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 messageListener = function messageListener(_ref16) {
-  var data = _ref15.data,
+  var data = _ref16.data,
-      origin = _ref15.origin;
+      origin = _ref16.origin;
 
   // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
   var messageObj = { data: data, origin: origin };

dist/index-umd.js

@@ -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;
+                imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-                imgHeight = img.offsetHeight;
+                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 messageListener = function messageListener(_ref16) {
-    var data = _ref15.data,
+    var data = _ref16.data,
-        origin = _ref15.origin;
+        origin = _ref16.origin;
 
     // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
     var messageObj = { data: data, origin: origin };

dist/jspdf.plugin.svgToPdf.js

@@ -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':

editor/svg-editor.js

@@ -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;
+              imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-              imgHeight = img.offsetHeight;
+              imgHeight = img.offsetHeight || img.naturalHeight || img.height;
               insertNewImage(imgWidth, imgHeight);
             };
+            img.src = result;
           };
           reader.readAsDataURL(file);
         }

editor/xdomain-svgedit-config-iife.js

@@ -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;
+                imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-                imgHeight = img.offsetHeight;
+                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 messageListener = function messageListener(_ref16) {
-    var data = _ref15.data,
+    var data = _ref16.data,
-        origin = _ref15.origin;
+        origin = _ref16.origin;
 
     // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
     var messageObj = { data: data, origin: origin };

svgedit-config-iife.js

@@ -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;
+                imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-                imgHeight = img.offsetHeight;
+                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 messageListener = function messageListener(_ref16) {
-    var data = _ref15.data,
+    var data = _ref16.data,
-        origin = _ref15.origin;
+        origin = _ref16.origin;
 
     // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
     var messageObj = { data: data, origin: origin };