Skip to content

Commit 8138572

Browse files
mdtuszmdtusz
committed
Merge pull request #415 from plotly/svg-removal [Miklós Tusz]
2 parents c53a00a + 8025725 commit 8138572

File tree

8 files changed

+78
-26
lines changed

8 files changed

+78
-26
lines changed

‎src/components/annotations/index.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -345,8 +345,7 @@ annotations.draw = function(gd, index, opt, value) {
345345
.classed('annotation-text-g', true)
346346
.attr('data-index', String(index));
347347

348-
var ann = anng.append('svg')
349-
.call(Plotly.Drawing.setPosition, 0, 0);
348+
var ann = anng.append('g');
350349

351350
var borderwidth = options.borderwidth,
352351
borderpad = options.borderpad,
@@ -491,10 +490,10 @@ annotations.draw = function(gd, index, opt, value) {
491490

492491
annbg.call(Plotly.Drawing.setRect, borderwidth / 2, borderwidth / 2,
493492
outerwidth-borderwidth, outerheight - borderwidth);
494-
ann.call(Plotly.Drawing.setRect,
495-
Math.round(annPosPx.x - outerwidth / 2),
496-
Math.round(annPosPx.y - outerheight / 2),
497-
outerwidth, outerheight);
493+
494+
var annX = Math.round(annPosPx.x - outerwidth / 2),
495+
annY = Math.round(annPosPx.y - outerheight / 2);
496+
ann.attr('transform', 'translate(' + annX + ', ' + annY + ')');
498497

499498
var annbase = 'annotations['+index+']';
500499

‎src/plot_api/plot_api.js

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -323,9 +323,9 @@ Plotly.plot = function(gd, data, layout, config) {
323323
var donePlotting = Lib.syncOrAsync([
324324
Plots.previousPromises,
325325
marginPushers,
326-
layoutStyles,
327326
marginPushersAgain,
328327
positionAndAutorange,
328+
layoutStyles,
329329
drawAxes,
330330
drawData,
331331
finalDraw
@@ -2756,7 +2756,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
27562756
plotinfo.overgrid = plotgroup.append('g');
27572757
plotinfo.zerolinelayer = plotgroup.append('g');
27582758
plotinfo.overzero = plotgroup.append('g');
2759-
plotinfo.plot = plotgroup.append('svg').call(plotLayers);
2759+
plotinfo.plot = plotgroup.append('g').call(plotLayers);
27602760
plotinfo.overplot = plotgroup.append('g');
27612761
plotinfo.xlines = plotgroup.append('path');
27622762
plotinfo.ylines = plotgroup.append('path');
@@ -2782,7 +2782,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
27822782

27832783
plotinfo.gridlayer = mainplot.overgrid.append('g');
27842784
plotinfo.zerolinelayer = mainplot.overzero.append('g');
2785-
plotinfo.plot = mainplot.overplot.append('svg').call(plotLayers);
2785+
plotinfo.plot = mainplot.overplot.append('g').call(plotLayers);
27862786
plotinfo.xlines = mainplot.overlines.append('path');
27872787
plotinfo.ylines = mainplot.overlines.append('path');
27882788
plotinfo.xaxislayer = mainplot.overaxes.append('g');
@@ -2793,9 +2793,6 @@ function makeCartesianPlotFramwork(gd, subplots) {
27932793
subplots.forEach(function(subplot) {
27942794
var plotinfo = fullLayout._plots[subplot];
27952795

2796-
plotinfo.plot
2797-
.attr('preserveAspectRatio', 'none')
2798-
.style('fill', 'none');
27992796
plotinfo.xlines
28002797
.style('fill', 'none')
28012798
.classed('crisp', true);
@@ -2844,9 +2841,28 @@ function lsInner(gd) {
28442841
xa._length+2*gs.p, ya._length+2*gs.p)
28452842
.call(Color.fill, fullLayout.plot_bgcolor);
28462843
}
2847-
plotinfo.plot
2848-
.call(Drawing.setRect,
2849-
xa._offset, ya._offset, xa._length, ya._length);
2844+
2845+
// Clip so that data only shows up on the plot area.
2846+
var clips = fullLayout._defs.selectAll('g.clips'),
2847+
clipId = 'clip' + fullLayout._uid + subplot + 'plot';
2848+
2849+
clips.selectAll('#' + clipId)
2850+
.data([0])
2851+
.enter().append('clipPath')
2852+
.attr({
2853+
'class': 'plotclip',
2854+
'id': clipId
2855+
})
2856+
.append('rect')
2857+
.attr({
2858+
'width': xa._length,
2859+
'height': ya._length
2860+
});
2861+
2862+
plotinfo.plot.attr({
2863+
'transform': 'translate(' + xa._offset + ', ' + ya._offset + ')',
2864+
'clip-path': 'url(#' + clipId + ')'
2865+
});
28502866

28512867
var xlw = Drawing.crispRound(gd, xa.linewidth, 1),
28522868
ylw = Drawing.crispRound(gd, ya.linewidth, 1),

‎src/plots/cartesian/axes.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1321,8 +1321,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
13211321
var plotinfo = fullLayout._plots[subplot],
13221322
xa = plotinfo.x(),
13231323
ya = plotinfo.y();
1324-
plotinfo.plot.attr('viewBox',
1325-
'0 0 '+xa._length + ' ' + ya._length);
1324+
13261325
plotinfo.xaxislayer
13271326
.selectAll('.' + xa._id + 'tick').remove();
13281327
plotinfo.yaxislayer

‎test/image/baselines/annotations.png

528 Bytes
Loading

‎test/image/baselines/contour_match_edges.png

166 Bytes
Loading

‎test/image/baselines/contour_transposed-irregular.png

174 Bytes
Loading

‎test/image/baselines/titles-avoid-labels.png

35 Bytes
Loading

‎test/jasmine/tests/snapshot_clone_test.js renamed to ‎test/jasmine/tests/snapshot_test.js

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
var Snapshot = require('@src/snapshot');
1+
var Plotly = require('@lib/index');
2+
var createGraphDiv = require('../assets/create_graph_div');
3+
var destroyGraphDiv = require('../assets/destroy_graph_div');
4+
var subplotMock = require('../../image/mocks/multiple_subplots.json');
5+
var annotationMock = require('../../image/mocks/annotations.json');
26

3-
describe('Test Snapshot.clone', function() {
7+
describe('Plotly.Snapshot', function() {
48
'use strict';
59

6-
describe('Test clone', function() {
10+
describe('clone', function() {
711

812
var data,
913
layout,
@@ -76,7 +80,7 @@ describe('Test Snapshot.clone', function() {
7680
setBackground: 'opaque'
7781
};
7882

79-
var themeTile = Snapshot.clone(dummyGraphObj, themeOptions);
83+
var themeTile = Plotly.Snapshot.clone(dummyGraphObj, themeOptions);
8084
expect(themeTile.layout.height).toEqual(THEMETILE_DEFAULT_LAYOUT.height);
8185
expect(themeTile.layout.width).toEqual(THEMETILE_DEFAULT_LAYOUT.width);
8286
expect(themeTile.td.defaultLayout).toEqual(THEMETILE_DEFAULT_LAYOUT);
@@ -101,7 +105,7 @@ describe('Test Snapshot.clone', function() {
101105
'annotations': []
102106
};
103107

104-
var thumbTile = Snapshot.clone(dummyGraphObj, thumbnailOptions);
108+
var thumbTile = Plotly.Snapshot.clone(dummyGraphObj, thumbnailOptions);
105109
expect(thumbTile.layout.hidesources).toEqual(THUMBNAIL_DEFAULT_LAYOUT.hidesources);
106110
expect(thumbTile.layout.showlegend).toEqual(THUMBNAIL_DEFAULT_LAYOUT.showlegend);
107111
expect(thumbTile.layout.borderwidth).toEqual(THUMBNAIL_DEFAULT_LAYOUT.borderwidth);
@@ -115,7 +119,7 @@ describe('Test Snapshot.clone', function() {
115119
width: 888
116120
};
117121

118-
var customTile = Snapshot.clone(dummyGraphObj, customOptions);
122+
var customTile = Plotly.Snapshot.clone(dummyGraphObj, customOptions);
119123
expect(customTile.layout.height).toEqual(customOptions.height);
120124
expect(customTile.layout.width).toEqual(customOptions.width);
121125
});
@@ -125,23 +129,57 @@ describe('Test Snapshot.clone', function() {
125129
tileClass: 'notarealclass'
126130
};
127131

128-
var vanillaPlotTile = Snapshot.clone(dummyGraphObj, vanillaOptions);
132+
var vanillaPlotTile = Plotly.Snapshot.clone(dummyGraphObj, vanillaOptions);
129133
expect(vanillaPlotTile.data[0].x).toEqual(data[0].x);
130134
expect(vanillaPlotTile.layout).toEqual(layout);
131135
expect(vanillaPlotTile.layout.height).toEqual(layout.height);
132136
expect(vanillaPlotTile.layout.width).toEqual(layout.width);
133137
});
134138

135139
it('should set the background parameter appropriately', function() {
136-
var pt = Snapshot.clone(dummyGraphObj, {
140+
var pt = Plotly.Snapshot.clone(dummyGraphObj, {
137141
setBackground: 'transparent'
138142
});
139143
expect(pt.config.setBackground).not.toBeDefined();
140144

141-
pt = Snapshot.clone(dummyGraphObj, {
145+
pt = Plotly.Snapshot.clone(dummyGraphObj, {
142146
setBackground: 'blue'
143147
});
144148
expect(pt.config.setBackground).toEqual('blue');
145149
});
146150
});
151+
152+
describe('toSVG', function() {
153+
var parser = new DOMParser(),
154+
gd;
155+
156+
beforeEach(function() {
157+
gd = createGraphDiv();
158+
});
159+
160+
afterEach(destroyGraphDiv);
161+
162+
163+
it('should not return any nested svg tags of plots', function(done) {
164+
Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() {
165+
return Plotly.Snapshot.toSVG(gd);
166+
}).then(function(svg) {
167+
var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
168+
svgElements = svgDOM.getElementsByTagName('svg');
169+
170+
expect(svgElements.length).toBe(1);
171+
}).then(done);
172+
});
173+
174+
it('should not return any nested svg tags of annotations', function(done) {
175+
Plotly.plot(gd, annotationMock.data, annotationMock.layout).then(function() {
176+
return Plotly.Snapshot.toSVG(gd);
177+
}).then(function(svg) {
178+
var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
179+
svgElements = svgDOM.getElementsByTagName('svg');
180+
181+
expect(svgElements.length).toBe(1);
182+
}).then(done);
183+
});
184+
});
147185
});

0 commit comments

Comments
 (0)