Support FireFox
This commit is contained in:
parent
01e43fd3eb
commit
b562120c33
|
@ -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,25 +18,43 @@ 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(size) {
|
||||||
|
if(this.latestInternalSVG) {
|
||||||
|
URL.revokeObjectURL(this.latestInternalSVG);
|
||||||
|
}
|
||||||
|
this.latestInternalSVG = URL.createObjectURL(blob);
|
||||||
|
return this.latestInternalSVG;
|
||||||
|
} else {
|
||||||
if(this.latestSVG) {
|
if(this.latestSVG) {
|
||||||
URL.revokeObjectURL(this.latestSVG);
|
URL.revokeObjectURL(this.latestSVG);
|
||||||
}
|
}
|
||||||
this.latestSVG = URL.createObjectURL(blob);
|
this.latestSVG = URL.createObjectURL(blob);
|
||||||
return this.latestSVG;
|
return this.latestSVG;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
getPNGBlob(renderer, resolution, callback) {
|
getPNGBlob(renderer, resolution, callback) {
|
||||||
if(!this.canvas) {
|
if(!this.canvas) {
|
||||||
|
@ -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) {
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue