github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2860 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Brett Zamir
2014-05-22 10:21:29 +00:00
parent 36dfb2bd17
commit abc9cd6ffb
8 changed files with 216 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
editor/embedapi-dom.js Normal file
View File

@@ -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');
});

59
editor/embedapi.html
View File

@@ -5,66 +5,13 @@
<title>Embed API</title> <title>Embed API</title>
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="embedapi.js"></script> <script src="embedapi.js"></script>
<script> <script src="embedapi-dom.js"></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>
</head> </head>
<body> <body>
<button id="load">Load example</button> <button id="load">Load example</button>
<button id="save">Save data</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/> <br/>
</body> </body>
</html> </html>

2
editor/embedapi.js
View File

@@ -120,7 +120,7 @@ function EmbeddedSVGEdit (frame, allowedOrigins) {
// Run in svgedit itself // Run in svgedit itself
var i, var i,
functions = [ 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. // TODO: rewrite the following, it's pretty scary.

8
editor/extensions/ext-server_moinsave.js
View File

@@ -14,7 +14,7 @@
svgEditor.addExtension("server_opensave", { svgEditor.addExtension("server_opensave", {
callback: function() {'use strict'; callback: function() {'use strict';
var Utils = svgedit.utilities;
var save_svg_action = '/+modify'; var save_svg_action = '/+modify';
// Create upload target (hidden iframe) // Create upload target (hidden iframe)
@@ -25,18 +25,18 @@ svgEditor.addExtension("server_opensave", {
var svg = "<?xml version=\"1.0\"?>\n" + data; var svg = "<?xml version=\"1.0\"?>\n" + data;
var qstr = $.param.querystring(); var qstr = $.param.querystring();
var name = qstr.substr(9).split('/+get/')[1]; 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) { if(!$('#export_canvas').length) {
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
} }
var c = $('#export_canvas')[0]; var c = $('#export_canvas')[0];
c.width = svgCanvas.contentW; c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; c.height = svgCanvas.contentH;
svgEditor.buildCanvgCallback(function () { Utils.buildCanvgCallback(function () {
canvg(c, svg, {renderCallback: function() { canvg(c, svg, {renderCallback: function() {
var datauri = c.toDataURL('image/png'); var datauri = c.toDataURL('image/png');
// var uiStrings = svgEditor.uiStrings; // var uiStrings = svgEditor.uiStrings;
var png_data = svgedit.utilities.encode64(datauri); var png_data = Utils.encode64(datauri);
var form = $('<form>').attr({ var form = $('<form>').attr({
method: 'post', method: 'post',
action: save_svg_action + '/' + name, action: save_svg_action + '/' + name,

9
editor/extensions/ext-server_opensave.js
View File

@@ -34,7 +34,8 @@ svgEditor.addExtension("server_opensave", {
save_svg_action = svgEditor.curConfig.extPath + 'filesave.php', save_svg_action = svgEditor.curConfig.extPath + 'filesave.php',
save_img_action = svgEditor.curConfig.extPath + 'filesave.php', save_img_action = svgEditor.curConfig.extPath + 'filesave.php',
// Create upload target (hidden iframe) // Create upload target (hidden iframe)
cancelled = false; cancelled = false,
Utils = svgedit.utilities;
$('<iframe name="output_frame" src="#"/>').hide().appendTo('body'); $('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
svgEditor.setCustomHandlers({ 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 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(); 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; return;
} }
@@ -68,7 +69,7 @@ svgEditor.addExtension("server_opensave", {
c.width = svgCanvas.contentW; c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; c.height = svgCanvas.contentH;
svgEditor.buildCanvgCallback(function () { Utils.buildCanvgCallback(function () {
canvg(c, data.svg, {renderCallback: function() { canvg(c, data.svg, {renderCallback: function() {
var pre, filename, suffix, var pre, filename, suffix,
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType), datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType),
@@ -125,7 +126,7 @@ svgEditor.addExtension("server_opensave", {
$('#dialog_box').hide(); $('#dialog_box').hide();
if (type !== 'import_img') { if (type !== 'import_img') {
xmlstr = svgedit.utilities.decode64(str64); xmlstr = Utils.decode64(str64);
} }
switch (type) { switch (type) {

109
editor/svg-editor.js
View File

@@ -43,6 +43,7 @@ TODOS
Utils = svgedit.utilities, Utils = svgedit.utilities,
isReady = false, isReady = false,
customExportImage = false, customExportImage = false,
customExportPDF = false,
callbacks = [], callbacks = [],
/** /**
* PREFS AND CONFIG * 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 * EXPORTS
*/ */
@@ -259,14 +236,6 @@ TODOS
* @todo Prevent execution until init executes if dependent on it? * @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 * Where permitted, sets canvas and/or defaultPrefs based on previous
* storage. This will override URL settings (for security reasons) but * storage. This will override URL settings (for security reasons) but
@@ -440,7 +409,11 @@ TODOS
} }
if (opts.exportImage) { if (opts.exportImage) {
customExportImage = 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 exportHandler = function(win, data) {
var issues = data.issues, var issues = data.issues,
type = data.type || 'PNG', type = data.type || 'PNG',
exportWindowName = data.exportWindowName, exportWindowName = data.exportWindowName;
dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
if (exportWindowName) { if (exportWindowName) {
exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one 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'); $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
} }
var c = $('#export_canvas')[0]; 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.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; c.height = svgCanvas.contentH;
canvg(c, data.svg, {renderCallback: function() { 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); var datauri = data.quality ? c.toDataURL('image/' + dataURLType, data.quality) : c.toDataURL('image/' + dataURLType);
exportWindow.location.href = datauri; exportWindow.location.href = datauri;
var done = $.pref('export_notice_done'); var done = $.pref('export_notice_done');
@@ -2902,7 +2844,14 @@ TODOS
svgCanvas.bind('transition', elementTransition); svgCanvas.bind('transition', elementTransition);
svgCanvas.bind('changed', elementChanged); svgCanvas.bind('changed', elementChanged);
svgCanvas.bind('saved', saveHandler); 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('zoomed', zoomChanged);
svgCanvas.bind('contextset', contextChanged); svgCanvas.bind('contextset', contextChanged);
svgCanvas.bind('extension_added', extAdded); svgCanvas.bind('extension_added', extAdded);
@@ -3650,19 +3599,31 @@ TODOS
return; return;
} }
// Open placeholder window (prevents popup) // Open placeholder window (prevents popup)
if (!customExportImage) { var exportWindowName;
function openExportWindow () {
var str = uiStrings.notification.loadingImage; var str = uiStrings.notification.loadingImage;
if (curConfig.exportWindowType === 'new') { if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++; editor.exportWindowCt++;
} }
var exportWindowName = curConfig.canvasName + editor.exportWindowCt; exportWindowName = curConfig.canvasName + editor.exportWindowCt;
exportWindow = window.open( exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'), 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
exportWindowName exportWindowName
); );
} }
var quality = parseInt($('#image-slider').val(), 10)/100; if (imgType === 'PDF') {
svgCanvas.rasterExport(imgType, quality, exportWindowName); if (!customExportPDF) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName);
}
else {
if (!customExportImage) {
openExportWindow();
}
var quality = parseInt($('#image-slider').val(), 10)/100;
svgCanvas.rasterExport(imgType, quality, exportWindowName);
}
}, function () { }, function () {
var sel = $(this); var sel = $(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
@@ -4943,6 +4904,10 @@ TODOS
if (!file) { if (!file) {
return; return;
} }
/* if (file.type === 'application/pdf') { // Todo: Handle PDF imports
}
else */
if (file.type.indexOf('image') != -1) { if (file.type.indexOf('image') != -1) {
// Detected an image // Detected an image
// svg handling // svg handling
@@ -4981,7 +4946,7 @@ TODOS
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
updateContextPanel(); updateContextPanel();
}; };
// create dummy img so we know the default dimensions // create dummy img so we know the default dimensions
var imgWidth = 100; var imgWidth = 100;
var imgHeight = 100; var imgHeight = 100;
var img = new Image(); var img = new Image();

52
editor/svgcanvas.js
View File

@@ -4329,12 +4329,7 @@ this.save = function(opts) {
call('saved', str); call('saved', str);
}; };
// Function: rasterExport function getIssues () {
// 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();
// remove the selected outline before serializing // remove the selected outline before serializing
clearSelection(); clearSelection();
@@ -4359,11 +4354,54 @@ this.rasterExport = function(imgType, quality, exportWindowName) {
issues.push(descr); 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(); var str = this.svgCanvasToString();
call('exported', {svg: str, issues: issues, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName}); 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 // Function: getSvgString
// Returns the current drawing as raw SVG XML text. // Returns the current drawing as raw SVG XML text.
// //
@@ -5531,7 +5569,7 @@ this.setGroupTitle = function(val) {
// Function: getDocumentTitle // Function: getDocumentTitle
// Returns the current document title or an empty string if not found // Returns the current document title or an empty string if not found
this.getDocumentTitle = function() { var getDocumentTitle = this.getDocumentTitle = function() {
return canvas.getTitle(svgcontent); return canvas.getTitle(svgcontent);
}; };

51
editor/svgutils.js
View File

@@ -15,7 +15,7 @@
// 3) svgtransformlist.js // 3) svgtransformlist.js
// 4) units.js // 4) units.js
(function() {'use strict'; (function(undef) {'use strict';
if (!svgedit.utilities) { if (!svgedit.utilities) {
svgedit.utilities = {}; svgedit.utilities = {};
@@ -88,8 +88,9 @@ svgedit.utilities.encode64 = function(input) {
// input = svgedit.utilities.convertToXMLReferences(input); // input = svgedit.utilities.convertToXMLReferences(input);
if (window.btoa) { if (window.btoa) {
return window.btoa(input); // Use native if available 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 chr1, chr2, chr3;
var enc1, enc2, enc3, enc4; var enc1, enc2, enc3, enc4;
var i = 0, p = 0; 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 // codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded
svgedit.utilities.encodeUTF8 = function (argString) { svgedit.utilities.encodeUTF8 = function (argString) {
//return unescape(encodeURIComponent(input)); //may or may not work //return unescape(encodeURIComponent(input)); //may or may not work
if (argString === null || typeof argString === 'undefined') { if (argString === null || argString === undef) {
return ''; return '';
} }
@@ -398,13 +399,13 @@ svgedit.utilities.getPathBBox = function(path) {
for (i = 0; i < tot; i++) { for (i = 0; i < tot; i++) {
var seg = seglist.getItem(i); var seg = seglist.getItem(i);
if(typeof seg.x === 'undefined') {continue;} if(seg.x === undef) {continue;}
// Add actual points to limits // Add actual points to limits
bounds[0].push(P0[0]); bounds[0].push(P0[0]);
bounds[1].push(P0[1]); bounds[1].push(P0[1]);
if(seg.x1) { if (seg.x1) {
var P1 = [seg.x1, seg.y1], var P1 = [seg.x1, seg.y1],
P2 = [seg.x2, seg.y2], P2 = [seg.x2, seg.y2],
P3 = [seg.x, seg.y]; P3 = [seg.x, seg.y];
@@ -723,4 +724,42 @@ svgedit.utilities.preg_quote = function (str, delimiter) {
return String(str).replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&'); 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)();
});
};
}()); }());