Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix 11781: save svg image with toolbox #568

Merged
merged 4 commits into from
Feb 14, 2020
Merged

Fix 11781: save svg image with toolbox #568

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed2d0d3
fix(svg): download svg image with toolbox
Ovilia Feb 12, 2020
4a376a1
feat(svg): support exporting svg with connected charts
Ovilia Feb 13, 2020
6265ea4
fix(svg): remove previous bg node and rename function
Ovilia Feb 14, 2020
d7f8978
fix(svg): remove toDataURL from createMethodNotSupport
Ovilia Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 54 additions & 17 deletions src/svg/Painter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,16 @@ var SVGPainter = function (root, storage, opts, zrId) {
this.storage = storage;
this._opts = opts = util.extend({}, opts || {});

var svgRoot = createElement('svg');
svgRoot.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgRoot.setAttribute('version', '1.1');
svgRoot.setAttribute('baseProfile', 'full');
svgRoot.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
var svgDom = createElement('svg');
svgDom.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgDom.setAttribute('version', '1.1');
svgDom.setAttribute('baseProfile', 'full');
svgDom.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';

var bgRoot = createElement('g');
svgDom.appendChild(bgRoot);
var svgRoot = createElement('g');
svgDom.appendChild(svgRoot);

this.gradientManager = new GradientManager(zrId, svgRoot);
this.clipPathManager = new ClippathManager(zrId, svgRoot);
Expand All @@ -104,11 +109,13 @@ var SVGPainter = function (root, storage, opts, zrId) {
var viewport = document.createElement('div');
viewport.style.cssText = 'overflow:hidden;position:relative';

this._svgDom = svgDom;
this._svgRoot = svgRoot;
this._backgroundRoot = bgRoot;
this._viewport = viewport;

root.appendChild(viewport);
viewport.appendChild(svgRoot);
viewport.appendChild(svgDom);

this.resize(opts.width, opts.height);

Expand All @@ -127,6 +134,14 @@ SVGPainter.prototype = {
return this._viewport;
},

getSvgDom: function () {
return this._svgDom;
},

getSvgRoot: function () {
return this._svgRoot;
},

getViewportRootOffset: function () {
var viewportRoot = this.getViewportRoot();
if (viewportRoot) {
Expand All @@ -146,7 +161,21 @@ SVGPainter.prototype = {

setBackgroundColor: function (backgroundColor) {
// TODO gradient
this._viewport.style.background = backgroundColor;
// Insert a bg rect instead of setting background to viewport.
// Otherwise, the exported SVG don't have background.
if (this._backgroundRoot && this._backgroundNode) {
this._backgroundRoot.removeChild(this._backgroundNode);
}

var bgNode = createElement('rect');
bgNode.setAttribute('width', this.getWidth());
bgNode.setAttribute('height', this.getHeight());
bgNode.setAttribute('x', 0);
bgNode.setAttribute('y', 0);
bgNode.setAttribute('id', 0);
bgNode.style.fill = backgroundColor;
this._backgroundRoot.appendChild(bgNode);
this._backgroundNode = bgNode;
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
},

_paintList: function (list) {
Expand Down Expand Up @@ -276,8 +305,8 @@ SVGPainter.prototype = {
},

_getDefs: function (isForceCreating) {
var svgRoot = this._svgRoot;
var defs = this._svgRoot.getElementsByTagName('defs');
var svgRoot = this._svgDom;
var defs = svgRoot.getElementsByTagName('defs');
if (defs.length === 0) {
// Not exist
if (isForceCreating) {
Expand Down Expand Up @@ -334,11 +363,16 @@ SVGPainter.prototype = {
viewportStyle.width = width + 'px';
viewportStyle.height = height + 'px';

var svgRoot = this._svgRoot;
var svgRoot = this._svgDom;
// Set width by 'svgRoot.width = width' is invalid
svgRoot.setAttribute('width', width);
svgRoot.setAttribute('height', height);
}

if (this._backgroundNode) {
this._backgroundNode.setAttribute('width', width);
this._backgroundNode.setAttribute('height', height);
}
},

/**
Expand Down Expand Up @@ -380,10 +414,13 @@ SVGPainter.prototype = {
dispose: function () {
this.root.innerHTML = '';

this._svgRoot =
this._viewport =
this.storage =
null;
this._svgRoot
= this._backgroundRoot
= this._svgDom
= this._backgroundNode
= this._viewport
= this.storage
= null;
},

clear: function () {
Expand All @@ -392,9 +429,9 @@ SVGPainter.prototype = {
}
},

pathToDataUrl: function () {
toDataURL: function () {
this.refresh();
var html = this._svgRoot.outerHTML;
var html = encodeURIComponent(this._svgDom.outerHTML.replace(/></g, '>\n\r<'));
return 'data:image/svg+xml;charset=UTF-8,' + html;
}
};
Expand All @@ -410,7 +447,7 @@ function createMethodNotSupport(method) {
util.each([
'getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer',
'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer',
'toDataURL', 'pathToImage'
'pathToImage'
], function (name) {
SVGPainter.prototype[name] = createMethodNotSupport(name);
});
Expand Down