Support FireFox

This commit is contained in:
David Evans 2017-11-09 21:08:16 +00:00
parent 01e43fd3eb
commit b562120c33
2 changed files with 41 additions and 12 deletions

View File

@ -4,9 +4,13 @@ define(() => {
// Thanks, https://stackoverflow.com/a/23522755/1180785 // Thanks, https://stackoverflow.com/a/23522755/1180785
const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
// Thanks, https://stackoverflow.com/a/9851769/1180785
const firefox = (typeof window.InstallTrigger !== 'undefined');
return class Exporter { return class Exporter {
constructor() { constructor() {
this.latestSVG = null; this.latestSVG = null;
this.latestInternalSVG = null;
this.canvas = null; this.canvas = null;
this.context = null; this.context = null;
this.indexPNG = 0; this.indexPNG = 0;
@ -14,24 +18,42 @@ define(() => {
this.latestPNG = null; this.latestPNG = null;
} }
getSVGContent(renderer) { getSVGContent(renderer, size = null) {
return renderer.svg().outerHTML; let code = renderer.svg().outerHTML;
if(firefox && size) {
// Firefox fails to render SVGs unless they have size
// attributes on the <svg> tag
code = code.replace(
/^<svg/,
'<svg width="' + size.width +
'" height="' + size.height + '" '
);
}
return code;
} }
getSVGBlob(renderer) { getSVGBlob(renderer, size = null) {
return new Blob( return new Blob(
[this.getSVGContent(renderer)], [this.getSVGContent(renderer, size)],
{type: 'image/svg+xml'} {type: 'image/svg+xml'}
); );
} }
getSVGURL(renderer) { getSVGURL(renderer, size = null) {
const blob = this.getSVGBlob(renderer); const blob = this.getSVGBlob(renderer, size);
if(this.latestSVG) { if(size) {
URL.revokeObjectURL(this.latestSVG); if(this.latestInternalSVG) {
URL.revokeObjectURL(this.latestInternalSVG);
}
this.latestInternalSVG = URL.createObjectURL(blob);
return this.latestInternalSVG;
} else {
if(this.latestSVG) {
URL.revokeObjectURL(this.latestSVG);
}
this.latestSVG = URL.createObjectURL(blob);
return this.latestSVG;
} }
this.latestSVG = URL.createObjectURL(blob);
return this.latestSVG;
} }
getPNGBlob(renderer, resolution, callback) { getPNGBlob(renderer, resolution, callback) {
@ -68,7 +90,7 @@ define(() => {
this.canvas.toBlob(callback, 'image/png'); this.canvas.toBlob(callback, 'image/png');
}, {once: true}); }, {once: true});
img.src = this.getSVGURL(renderer); img.src = this.getSVGURL(renderer, {width, height});
} }
getPNGURL(renderer, resolution, callback) { getPNGURL(renderer, resolution, callback) {

View File

@ -1,6 +1,9 @@
define(['./SVGUtilities'], (svg) => { define(['./SVGUtilities'], (svg) => {
'use strict'; 'use strict';
// Thanks, https://stackoverflow.com/a/9851769/1180785
const firefox = (typeof window.InstallTrigger !== 'undefined');
function fontDetails(attrs) { function fontDetails(attrs) {
const size = Number(attrs['font-size']); const size = Number(attrs['font-size']);
const lineHeight = size * (Number(attrs['line-height']) || 1); const lineHeight = size * (Number(attrs['line-height']) || 1);
@ -130,7 +133,11 @@ define(['./SVGUtilities'], (svg) => {
class SizeTester { class SizeTester {
constructor(container) { constructor(container) {
this.testers = svg.make('g', {'display': 'none'}); this.testers = svg.make('g', {
// Firefox fails to measure non-displayed text
'display': firefox ? 'block' : 'none',
'visibility': 'hidden',
});
this.container = container; this.container = container;
this.cache = new Map(); this.cache = new Map();
} }