From abc9cd6ffb6971998b65030db57462c2572cd9bd Mon Sep 17 00:00:00 2001
From: Brett Zamir <brettz9@gmail.com>
Date: Thu, 22 May 2014 10:21:29 +0000
Subject: [PATCH] Move embedapi.html code which is not part of the API into
 embedapi-dom.js; demo export PDF in embedded editor; add new exportPDF method
 to canvas (and exposed to embedded editor) which can support JSON-able data
 URI string response, removing PDF exporting from rasterExport; JSLint; move
 dependency checking code for canvg and jsPDF to utilities; simplify Utils
 calls; allow for custom PDF export handler (but not yet implemented in
 server-based extensions); import PDF todo

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2860 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/embedapi-dom.js                   |  76 ++++++++++++++++
 editor/embedapi.html                     |  59 +-----------
 editor/embedapi.js                       |   2 +-
 editor/extensions/ext-server_moinsave.js |   8 +-
 editor/extensions/ext-server_opensave.js |   9 +-
 editor/svg-editor.js                     | 109 ++++++++---------------
 editor/svgcanvas.js                      |  52 +++++++++--
 editor/svgutils.js                       |  51 +++++++++--
 8 files changed, 216 insertions(+), 150 deletions(-)
 create mode 100644 editor/embedapi-dom.js

diff --git a/editor/embedapi-dom.js b/editor/embedapi-dom.js
new file mode 100644
index 00000000..f0c1f51e
--- /dev/null
+++ b/editor/embedapi-dom.js
@@ -0,0 +1,76 @@
+/*globals $, EmbeddedSVGEdit*/
+/*jslint vars: true */
+var initEmbed;
+
+$(function () {'use strict';
+    
+    var svgCanvas = null;
+    var frame;
+
+    initEmbed = function () {
+        var doc, mainButton;
+        svgCanvas = new EmbeddedSVGEdit(frame);
+        // Hide main button, as we will be controlling new, load, save, etc. from the host document
+        doc = frame.contentDocument || frame.contentWindow.document;
+        mainButton = doc.getElementById('main_button');
+        mainButton.style.display = 'none';
+    };
+
+    function handleSvgData(data, error) {
+        if (error) {
+            alert('error ' + error);
+        } else {
+            alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
+        }
+    }
+
+    function loadSvg() {
+        var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
+        svgCanvas.setSvgString(svgexample);
+    }
+
+    function saveSvg() {
+        svgCanvas.getSvgString()(handleSvgData);
+    }
+    
+    function exportPNG() {
+        var str = frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
+        var exportWindow = window.open(
+            'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+            'svg-edit-exportWindow'
+        );
+        svgCanvas.rasterExport('PNG', null, exportWindow.name);
+    }
+    
+    function exportPDF() {
+        var str = frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
+        
+		/**
+        // If you want to handle the PDF blob yourself, do as follows
+		svgCanvas.bind('exportedPDF', function (win, data) {
+			alert(data.dataurlstring);
+		});
+		svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
+        return;
+        */
+		
+        var exportWindow = window.open(
+            'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+            'svg-edit-exportWindow'
+        );
+		svgCanvas.exportPDF(exportWindow.name);
+    }
+    
+    // Add event handlers
+    $('#load').click(loadSvg);
+    $('#save').click(saveSvg);
+    $('#exportPNG').click(exportPNG);
+    $('#exportPDF').click(exportPDF);
+    $('body').append(
+        $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
+            window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
+            '" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
+        )
+    );
+    frame = document.getElementById('svgedit');
+});
diff --git a/editor/embedapi.html b/editor/embedapi.html
index d410f0d0..44ee3308 100644
--- a/editor/embedapi.html
+++ b/editor/embedapi.html
@@ -5,66 +5,13 @@
     <title>Embed API</title>
     <script src="jquery.js"></script>
     <script src="embedapi.js"></script>
-    <script>
-    /*globals $, EmbeddedSVGEdit*/
-    var initEmbed;
-    $(function () {'use strict';
-        
-        var svgCanvas = null;
-
-        initEmbed = function () {
-            var doc, mainButton,
-                frame = document.getElementById('svgedit');
-            svgCanvas = new EmbeddedSVGEdit(frame);
-            // Hide main button, as we will be controlling new, load, save, etc. from the host document
-            doc = frame.contentDocument || frame.contentWindow.document;
-            mainButton = doc.getElementById('main_button');
-            mainButton.style.display = 'none';
-        };
-
-        function handleSvgData(data, error) {
-            if (error) {
-                alert('error ' + error);
-            } else {
-                alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
-            }
-        }
-
-        function loadSvg() {
-            var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
-            svgCanvas.setSvgString(svgexample);
-        }
-
-        function saveSvg() {
-            svgCanvas.getSvgString()(handleSvgData);
-        }
-        
-        function exportSvg() {
-            var str = document.getElementById('svgedit').contentWindow.svgEditor.uiStrings.notification.loadingImage;
-            var exportWindow = window.open(
-                'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
-                'svg-edit-exportWindow'
-            );
-            svgCanvas.rasterExport('PNG', null, exportWindow.name);
-        }
-        
-        // Add event handlers
-        $('#load').click(loadSvg);
-        $('#save').click(saveSvg);
-        $('#export').click(exportSvg);
-        $('body').append(
-            $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
-                window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
-                '" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
-            )
-        );
-    });
-    </script>
+    <script src="embedapi-dom.js"></script>
 </head>
 <body>
     <button id="load">Load example</button>
     <button id="save">Save data</button>
-    <button id="export">Export data</button>
+    <button id="exportPNG">Export data to PNG</button>
+    <button id="exportPDF">Export data to PDF</button>
     <br/>
 </body>
 </html>
diff --git a/editor/embedapi.js b/editor/embedapi.js
index ea4e45ee..b50a896b 100644
--- a/editor/embedapi.js
+++ b/editor/embedapi.js
@@ -120,7 +120,7 @@ function EmbeddedSVGEdit (frame, allowedOrigins) {
   // Run in svgedit itself
   var i,
 	functions = [
-		'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready'
+		'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'exportPDF', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready'
 	];
 
   // TODO: rewrite the following, it's pretty scary.
diff --git a/editor/extensions/ext-server_moinsave.js b/editor/extensions/ext-server_moinsave.js
index c71efa65..f11b9210 100644
--- a/editor/extensions/ext-server_moinsave.js
+++ b/editor/extensions/ext-server_moinsave.js
@@ -14,7 +14,7 @@
 
 svgEditor.addExtension("server_opensave", {
 	callback: function() {'use strict';
-
+		var Utils = svgedit.utilities;
 		var save_svg_action = '/+modify';
 		
 		// Create upload target (hidden iframe)
@@ -25,18 +25,18 @@ svgEditor.addExtension("server_opensave", {
 				var svg = "<?xml version=\"1.0\"?>\n" + data;
 				var qstr = $.param.querystring();
 				var name = qstr.substr(9).split('/+get/')[1];
-				var svg_data = svgedit.utilities.encode64(svg);
+				var svg_data = Utils.encode64(svg);
 				if(!$('#export_canvas').length) {
 					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
 				}
 				var c = $('#export_canvas')[0];
 				c.width = svgCanvas.contentW;
 				c.height = svgCanvas.contentH;
-				svgEditor.buildCanvgCallback(function () {
+				Utils.buildCanvgCallback(function () {
 					canvg(c, svg, {renderCallback: function() {
 						var datauri = c.toDataURL('image/png');
 						// var uiStrings = svgEditor.uiStrings;
-						var png_data = svgedit.utilities.encode64(datauri);
+						var png_data = Utils.encode64(datauri);
 						var form = $('<form>').attr({
 						method: 'post',
 						action: save_svg_action + '/' + name,
diff --git a/editor/extensions/ext-server_opensave.js b/editor/extensions/ext-server_opensave.js
index b4ccf293..5ac21552 100644
--- a/editor/extensions/ext-server_opensave.js
+++ b/editor/extensions/ext-server_opensave.js
@@ -34,7 +34,8 @@ svgEditor.addExtension("server_opensave", {
 			save_svg_action = svgEditor.curConfig.extPath + 'filesave.php',
 			save_img_action = svgEditor.curConfig.extPath + 'filesave.php',
 			// Create upload target (hidden iframe)
-			cancelled = false;
+			cancelled = false,
+			Utils = svgedit.utilities;
 	
 		$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
 		svgEditor.setCustomHandlers({
@@ -42,7 +43,7 @@ svgEditor.addExtension("server_opensave", {
 				var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data, // Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
 					filename = getFileNameFromTitle();
 
-				if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + svgedit.utilities.encode64(svg))) {
+				if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + Utils.encode64(svg))) {
 					return;
 				}
 
@@ -68,7 +69,7 @@ svgEditor.addExtension("server_opensave", {
 				
 				c.width = svgCanvas.contentW;
 				c.height = svgCanvas.contentH;
-				svgEditor.buildCanvgCallback(function () {
+				Utils.buildCanvgCallback(function () {
 					canvg(c, data.svg, {renderCallback: function() {
 						var pre, filename, suffix,
 							datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType),
@@ -125,7 +126,7 @@ svgEditor.addExtension("server_opensave", {
 			$('#dialog_box').hide();
 
 			if (type !== 'import_img') {
-				xmlstr = svgedit.utilities.decode64(str64);
+				xmlstr = Utils.decode64(str64);
 			}
 			
 			switch (type) {
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index c66c33a9..8a5574cc 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -43,6 +43,7 @@ TODOS
 			Utils = svgedit.utilities,
 			isReady = false,
 			customExportImage = false,
+			customExportPDF = false,
 			callbacks = [],
 			/**
 			* PREFS AND CONFIG
@@ -203,30 +204,6 @@ TODOS
 			}
 		}
 		
-		/**
-		* @param {string} globalCheck A global which can be used to determine if the script is already loaded
-		* @param {array} scripts An array of scripts to preload (in order)
-		* @param {function} cb The callback to execute upon load.
-		*/
-		function executeAfterLoads (globalCheck, scripts, cb) {
-			return function () {
-				var args = arguments;
-				function endCallback () {
-					cb.apply(null, args);
-				}
-				if (window[globalCheck]) {
-					endCallback();
-				}
-				else {
-					scripts.reduceRight(function (oldFunc, script) {
-						return function () {
-							$.getScript(script, oldFunc);
-						};
-					}, endCallback)();
-				}
-			};
-		}
-		
 		/**
 		* EXPORTS
 		*/
@@ -259,14 +236,6 @@ TODOS
 		* @todo Prevent execution until init executes if dependent on it?
 		*/
 
-		var buildCanvgCallback = editor.buildCanvgCallback = function (callCanvg) {
-			return executeAfterLoads('canvg', ['canvg/rgbcolor.js', 'canvg/canvg.js'], callCanvg);
-		};
-		
-		var executeJSPDFCallback = editor.executeJSPDFCallback = function (callJSPDF) {
-			return executeAfterLoads('jsPDF', ['jspdf/underscore-min.js', 'jspdf/jspdf.min.js', 'jspdf/jspdf.plugin.svgToPdf.js'], callJSPDF)();
-		};
-
 		/**
 		* Where permitted, sets canvas and/or defaultPrefs based on previous
 		*	storage. This will override URL settings (for security reasons) but
@@ -440,7 +409,11 @@ TODOS
 				}
 				if (opts.exportImage) {
 					customExportImage = opts.exportImage;
-					svgCanvas.bind('exported', buildCanvgCallback(customExportImage));
+					svgCanvas.bind('exported', Utils.buildCanvgCallback(customExportImage));
+				}
+				if (opts.exportPDF) {
+					customExportPDF = opts.exportPDF;
+					svgCanvas.bind('exportedPDF', Utils.buildJSPDFCallback(customExportPDF));					
 				}
 			});
 		};
@@ -1100,8 +1073,7 @@ TODOS
 			var exportHandler = function(win, data) {
 				var issues = data.issues,
 					type = data.type || 'PNG',
-					exportWindowName = data.exportWindowName,
-					dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
+					exportWindowName = data.exportWindowName;
 
 				if (exportWindowName) {
 					exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
@@ -1110,41 +1082,11 @@ TODOS
 					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
 				}
 				var c = $('#export_canvas')[0];
-				if (type === 'PDF') {
-					var res = svgCanvas.getResolution();
-					var orientation = res.w > res.h ? 'landscape' : 'portrait';
-					var units = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
-
-					executeJSPDFCallback(function () {
-						var doc = jsPDF({
-							orientation: orientation,
-							unit: units,
-							format: [res.w, res.h]
-							// , compressPdf: true
-						}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
-						var docTitle = svgCanvas.getDocumentTitle();
-						doc.setProperties({
-							title: docTitle/*,
-							subject: '',
-							author: '',
-							keywords: '',
-							creator: ''*/
-						});
-						svgElementToPdf(data.svg, doc, {});
-
-						// doc.output('save'); // Works to open in a new
-						//  window; todo: configure this and other export
-						//  options to optionally work in this manner as
-						//  opposed to opening a new tab
-						// return;
-						exportWindow.location.href = doc.output('dataurlstring');
-					});
-					return;
-				}
 				c.width = svgCanvas.contentW;
 				c.height = svgCanvas.contentH;
 				
 				canvg(c, data.svg, {renderCallback: function() {
+					var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
 					var datauri = data.quality ? c.toDataURL('image/' + dataURLType, data.quality) : c.toDataURL('image/' + dataURLType);
 					exportWindow.location.href = datauri;
 					var done = $.pref('export_notice_done');
@@ -2902,7 +2844,14 @@ TODOS
 			svgCanvas.bind('transition', elementTransition);
 			svgCanvas.bind('changed', elementChanged);
 			svgCanvas.bind('saved', saveHandler);
-			svgCanvas.bind('exported', buildCanvgCallback(exportHandler));
+			svgCanvas.bind('exported', Utils.buildCanvgCallback(exportHandler));
+			svgCanvas.bind('exportedPDF', function (win, data) {
+				var exportWindowName = data.exportWindowName;
+				if (exportWindowName) {
+					exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
+				}
+				exportWindow.location.href = data.dataurlstring;
+			});
 			svgCanvas.bind('zoomed', zoomChanged);
 			svgCanvas.bind('contextset', contextChanged);
 			svgCanvas.bind('extension_added', extAdded);
@@ -3650,19 +3599,31 @@ TODOS
 						return;
 					}
 					// Open placeholder window (prevents popup)
-					if (!customExportImage) {
+					var exportWindowName;
+					function openExportWindow () {
 						var str = uiStrings.notification.loadingImage;
 						if (curConfig.exportWindowType === 'new') {
 							editor.exportWindowCt++;
 						}
-						var exportWindowName = curConfig.canvasName + editor.exportWindowCt;
+						exportWindowName = curConfig.canvasName + editor.exportWindowCt;
 						exportWindow = window.open(
 							'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
 							exportWindowName
 						);
 					}
-					var quality = parseInt($('#image-slider').val(), 10)/100;
-					svgCanvas.rasterExport(imgType, quality, exportWindowName);
+					if (imgType === 'PDF') {
+						if (!customExportPDF) {
+							openExportWindow();
+						}
+						svgCanvas.exportPDF(exportWindowName);
+					}
+					else {
+						if (!customExportImage) {
+							openExportWindow();
+						}
+						var quality = parseInt($('#image-slider').val(), 10)/100;
+						svgCanvas.rasterExport(imgType, quality, exportWindowName);
+					}
 				}, function () {
 					var sel = $(this);
 					if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
@@ -4943,6 +4904,10 @@ TODOS
 					if (!file) {
 						return;
 					}
+					/* if (file.type === 'application/pdf') { // Todo: Handle PDF imports
+						
+					}
+					else */
 					if (file.type.indexOf('image') != -1) {
 						// Detected an image
 						// svg handling
@@ -4981,7 +4946,7 @@ TODOS
 									svgCanvas.alignSelectedElements('c', 'page');
 									updateContextPanel();
 								};
-									// create dummy img so we know the default dimensions
+								// create dummy img so we know the default dimensions
 								var imgWidth = 100;
 								var imgHeight = 100;
 								var img = new Image();
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index fd16d0aa..d4bbaa37 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -4329,12 +4329,7 @@ this.save = function(opts) {
 	call('saved', str);
 };
 
-// Function: rasterExport
-// Generates a Data URL based on the current image, then calls "exported" 
-// with an object including the string, image information, and any issues found
-this.rasterExport = function(imgType, quality, exportWindowName) {
-	var mimeType = 'image/' + imgType.toLowerCase();
-
+function getIssues () {
 	// remove the selected outline before serializing
 	clearSelection();
 	
@@ -4359,11 +4354,54 @@ this.rasterExport = function(imgType, quality, exportWindowName) {
 			issues.push(descr);
 		}
 	});
+	return issues;
+}
 
+// Function: rasterExport
+// Generates a Data URL based on the current image, then calls "exported" 
+// with an object including the string, image information, and any issues found
+this.rasterExport = function(imgType, quality, exportWindowName) {
+	var mimeType = 'image/' + imgType.toLowerCase();
+	var issues = getIssues();
 	var str = this.svgCanvasToString();
 	call('exported', {svg: str, issues: issues, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName});
 };
 
+this.exportPDF = function (exportWindowName, outputType) {
+	var that = this;
+	svgedit.utilities.buildJSPDFCallback(function () {
+		var res = getResolution();
+		var orientation = res.w > res.h ? 'landscape' : 'portrait';
+		var units = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
+		var doc = jsPDF({
+			orientation: orientation,
+			unit: units,
+			format: [res.w, res.h]
+			// , compressPdf: true
+		}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
+		var docTitle = getDocumentTitle();
+		doc.setProperties({
+			title: docTitle/*,
+			subject: '',
+			author: '',
+			keywords: '',
+			creator: ''*/
+		});
+		var issues = getIssues();
+		var str = that.svgCanvasToString();
+		svgElementToPdf(str, doc, {});
+
+		// doc.output('save'); // Works to open in a new
+		//  window; todo: configure this and other export
+		//  options to optionally work in this manner as
+		//  opposed to opening a new tab
+		var obj = {svg: str, issues: issues, exportWindowName: exportWindowName};
+		var method = outputType || 'dataurlstring';
+		obj[method] = doc.output(method);
+		call('exportedPDF', obj);
+	})();
+};
+
 // Function: getSvgString
 // Returns the current drawing as raw SVG XML text.
 //
@@ -5531,7 +5569,7 @@ this.setGroupTitle = function(val) {
 
 // Function: getDocumentTitle
 // Returns the current document title or an empty string if not found
-this.getDocumentTitle = function() {
+var getDocumentTitle = this.getDocumentTitle = function() {
 	return canvas.getTitle(svgcontent);
 };
 
diff --git a/editor/svgutils.js b/editor/svgutils.js
index 6653f45b..771288f7 100644
--- a/editor/svgutils.js
+++ b/editor/svgutils.js
@@ -15,7 +15,7 @@
 // 3) svgtransformlist.js
 // 4) units.js
 
-(function() {'use strict';
+(function(undef) {'use strict';
 
 if (!svgedit.utilities) {
 	svgedit.utilities = {};
@@ -88,8 +88,9 @@ svgedit.utilities.encode64 = function(input) {
 	// input = svgedit.utilities.convertToXMLReferences(input);
 	if (window.btoa) {
 		return window.btoa(input); // Use native if available
-  }
-	var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
+    }
+    var output = [];
+	output.length = Math.floor( (input.length + 2) / 3 ) * 4;
 	var chr1, chr2, chr3;
 	var enc1, enc2, enc3, enc4;
 	var i = 0, p = 0;
@@ -163,7 +164,7 @@ svgedit.utilities.decode64 = function(input) {
 // codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded
 svgedit.utilities.encodeUTF8 = function (argString) {
 	//return unescape(encodeURIComponent(input)); //may or may not work
-  if (argString === null || typeof argString === 'undefined') {
+  if (argString === null || argString === undef) {
     return '';
   }
 
@@ -398,13 +399,13 @@ svgedit.utilities.getPathBBox = function(path) {
 	for (i = 0; i < tot; i++) {
 		var seg = seglist.getItem(i);
 
-		if(typeof seg.x === 'undefined') {continue;}
+		if(seg.x === undef) {continue;}
 
 		// Add actual points to limits
 		bounds[0].push(P0[0]);
 		bounds[1].push(P0[1]);
 
-		if(seg.x1) {
+		if (seg.x1) {
 			var P1 = [seg.x1, seg.y1],
 				P2 = [seg.x2, seg.y2],
 				P3 = [seg.x, seg.y];
@@ -723,4 +724,42 @@ svgedit.utilities.preg_quote = function (str, delimiter) {
   return String(str).replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
 };
 
+/**
+* @param {string} globalCheck A global which can be used to determine if the script is already loaded
+* @param {array} scripts An array of scripts to preload (in order)
+* @param {function} cb The callback to execute upon load.
+*/
+svgedit.utilities.executeAfterLoads = function (globalCheck, scripts, cb) {
+	return function () {
+		var args = arguments;
+		function endCallback () {
+			cb.apply(null, args);
+		}
+		if (window[globalCheck]) {
+			endCallback();
+		}
+		else {
+			scripts.reduceRight(function (oldFunc, script) {
+				return function () {
+					$.getScript(script, oldFunc);
+				};
+			}, endCallback)();
+		}
+	};
+};
+
+svgedit.utilities.buildCanvgCallback = function (callCanvg) {
+	return svgedit.utilities.executeAfterLoads('canvg', ['canvg/rgbcolor.js', 'canvg/canvg.js'], callCanvg);
+};
+
+svgedit.utilities.buildJSPDFCallback = function (callJSPDF) {
+	return svgedit.utilities.executeAfterLoads('RGBColor', ['canvg/rgbcolor.js'], function () {
+		var arr = [];
+		if (!RGBColor || RGBColor.ok === undef) { // It's not our RGBColor, so we'll need to load it
+			arr.push('canvg/rgbcolor.js');
+		}
+		svgedit.utilities.executeAfterLoads('jsPDF', arr.concat('jspdf/underscore-min.js', 'jspdf/jspdf.min.js', 'jspdf/jspdf.plugin.svgToPdf.js'), callJSPDF)();
+	});
+};
+
 }());