9f65b1adb9
- Breaking change: Locale now formatted as export - Breaking change: Moved out remaining modular i18n (imagelib) to own folder - Breaking change: Drop `executeAfterLoads` (and getJSPDF/getCanvg) - Breaking change: `RGBColor` must accept `new` - Breaking change: canvg - `stackBlurCanvasRGBA` must be set now by function (`setStackBlurCanvasRGBA`) rather than global; `canvg` now a named export - Breaking change: Avoid passing `canvg`/`buildCanvgCallback` to extensions (have them import) - Fix: i18nize imaglib more deeply - Fix: Positioning of Document Properties dialog (Fixes #246) - Fix (regression): PDF Export (Fixes #249) - Fix (regression): Add polyfill for `ChildNode`/`ParentNode` (and use further) - Fix (regression): Apply Babel universally to dependencies - Fix (regression): Ordering of `uaPrefix` function in `svgEditor.js` - Fix (regression): Embedded API - Fix (embedded editor): Fix backspace key in Firefox so it doesn't navigate out of frame - Fix: Alert if no exportWindow for PDF (e.g., if blocked) - Refactoring( RGBColor) `RGBColor` as class, without rebuilding constants, optimize string replacement, move methods to prototype, use templates and object literals, use `Object.keys` - Refactoring (canvg) Use classes more internally, use shorthand objects; array extras, return to lazy-loading - Refactoring: Use Promises in place of `$.getScript`; always return Promises in case deciding to await resolving - Refactoring: Avoid importing `RGBColor` into `svgutils.js` (jsPDF imports it itself) - Refactoring: Arrow functions, destructuring, shorter property references - Refactoring: Fix `lang` and `dir` for locales (though not in use currently anyways) - Refactoring: Provide path config for canvg, jspdf
85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
/* globals jQuery */
|
|
import EmbeddedSVGEdit from './embedapi.js';
|
|
|
|
const $ = jQuery;
|
|
|
|
let svgCanvas = null;
|
|
|
|
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 () {
|
|
const 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 () {
|
|
svgCanvas.getUIStrings()(function (uiStrings) {
|
|
const str = uiStrings.notification.loadingImage;
|
|
|
|
const 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 () {
|
|
svgCanvas.getUIStrings()(function (uiStrings) {
|
|
const str = 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;
|
|
*/
|
|
|
|
const 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);
|
|
|
|
const iframe = $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
|
|
(location.href.includes('?')
|
|
? location.href.replace(/\?(.*)$/, '&$1')
|
|
: '') + // Append arguments to this file onto the iframe
|
|
'" width="900px" height="600px" id="svgedit""></iframe>'
|
|
);
|
|
iframe[0].addEventListener('load', function () {
|
|
svgCanvas = new EmbeddedSVGEdit(frame);
|
|
// Hide main button, as we will be controlling new, load, save, etc. from the host document
|
|
let doc;
|
|
try {
|
|
doc = frame.contentDocument || frame.contentWindow.document;
|
|
} catch (err) {
|
|
console.log('Blocked from accessing document');
|
|
return;
|
|
}
|
|
const mainButton = doc.getElementById('main_button');
|
|
mainButton.style.display = 'none';
|
|
});
|
|
$('body').append(iframe);
|
|
const frame = document.getElementById('svgedit');
|