Skip to content

Nested <svg> removal #415

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

Merged
merged 7 commits into from
Apr 13, 2016
Merged

Nested <svg> removal #415

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f213006
Switch subplot svg -> g
mdtusz Apr 8, 2016
ab0b6bf
Switch annotation svg -> g
mdtusz Apr 8, 2016
d0d5577
Add test for nested svg tags
mdtusz Apr 11, 2016
4d48fb1
Move `layoutStyles` call in Plotly.plot
mdtusz Apr 11, 2016
75897f3
Update image baselines for nested svg removal
Apr 11, 2016
787c903
Make nested-svg test more strict
mdtusz Apr 11, 2016
21f5cc9
Remove unnecessary transform
mdtusz Apr 11, 2016
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
12 changes: 6 additions & 6 deletions src/components/annotations/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,8 +343,8 @@ annotations.draw = function(gd, index, opt, value) {
.classed('annotation-text-g', true)
.attr('data-index', String(index));

var ann = anng.append('svg')
.call(Plotly.Drawing.setPosition, 0, 0);
var ann = anng.append('g')
.attr('transform', 'translate(0,0)');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep - the call to setPosition only sets x and y attributes - for <g>'s, we need to position using transform.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose we could add a drawing.setTranslate method though too. Thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. I meant, 'transform', 'translate(0,0)' as no effects, right?

By the why, I like the idea of having a drawing.setTranslate method. No need to do that right now though.


var borderwidth = options.borderwidth,
borderpad = options.borderpad,
Expand Down Expand Up @@ -489,10 +489,10 @@ annotations.draw = function(gd, index, opt, value) {

annbg.call(Plotly.Drawing.setRect, borderwidth / 2, borderwidth / 2,
outerwidth-borderwidth, outerheight - borderwidth);
ann.call(Plotly.Drawing.setRect,
Math.round(annPosPx.x - outerwidth / 2),
Math.round(annPosPx.y - outerheight / 2),
outerwidth, outerheight);

var annX = Math.round(annPosPx.x - outerwidth / 2),
annY = Math.round(annPosPx.y - outerheight / 2);
ann.attr('transform', 'translate(' + annX + ', ' + annY + ')');

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

Expand Down
34 changes: 25 additions & 9 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,9 +322,9 @@ Plotly.plot = function(gd, data, layout, config) {
var donePlotting = Lib.syncOrAsync([
Plots.previousPromises,
marginPushers,
layoutStyles,
marginPushersAgain,
positionAndAutorange,
layoutStyles,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

layoutStyles is what calls the code that creates the plotclip - if it is called earlier, the value of axis._length is incorrect and the plotclip is too small.

This image diff shows the improper clip. It's sort of hard to see, but the right side of the longest bars is clipped.

drawAxes,
drawData,
finalDraw
Expand Down Expand Up @@ -2753,7 +2753,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
plotinfo.overgrid = plotgroup.append('g');
plotinfo.zerolinelayer = plotgroup.append('g');
plotinfo.overzero = plotgroup.append('g');
plotinfo.plot = plotgroup.append('svg').call(plotLayers);
plotinfo.plot = plotgroup.append('g').call(plotLayers);
plotinfo.overplot = plotgroup.append('g');
plotinfo.xlines = plotgroup.append('path');
plotinfo.ylines = plotgroup.append('path');
Expand All @@ -2779,7 +2779,7 @@ function makeCartesianPlotFramwork(gd, subplots) {

plotinfo.gridlayer = mainplot.overgrid.append('g');
plotinfo.zerolinelayer = mainplot.overzero.append('g');
plotinfo.plot = mainplot.overplot.append('svg').call(plotLayers);
plotinfo.plot = mainplot.overplot.append('g').call(plotLayers);
plotinfo.xlines = mainplot.overlines.append('path');
plotinfo.ylines = mainplot.overlines.append('path');
plotinfo.xaxislayer = mainplot.overaxes.append('g');
Expand All @@ -2790,9 +2790,6 @@ function makeCartesianPlotFramwork(gd, subplots) {
subplots.forEach(function(subplot) {
var plotinfo = fullLayout._plots[subplot];

plotinfo.plot
.attr('preserveAspectRatio', 'none')
.style('fill', 'none');
plotinfo.xlines
.style('fill', 'none')
.classed('crisp', true);
Expand Down Expand Up @@ -2841,9 +2838,28 @@ function lsInner(gd) {
xa._length+2*gs.p, ya._length+2*gs.p)
.call(Color.fill, fullLayout.plot_bgcolor);
}
plotinfo.plot
.call(Drawing.setRect,
xa._offset, ya._offset, xa._length, ya._length);

// Clip so that data only shows up on the plot area.
var clips = fullLayout._defs.selectAll('g.clips'),
clipId = 'clip' + fullLayout._uid + subplot + 'plot';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maybe:

 clipId = 'clip' + fullLayout._uid + '-' + subplot;

would be more readable?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thang. I was just copying the id format from axesclip's - e.g. clip3e4675xy.


clips.selectAll('#' + clipId)
.data([0])
.enter().append('clipPath')
.attr({
'class': 'plotclip',
'id': clipId
})
.append('rect')
.attr({
'width': xa._length,
'height': ya._length
});

plotinfo.plot.attr({
'transform': 'translate(' + xa._offset + ', ' + ya._offset + ')',
'clip-path': 'url(#' + clipId + ')'
});

var xlw = Drawing.crispRound(gd, xa.linewidth, 1),
ylw = Drawing.crispRound(gd, ya.linewidth, 1),
Expand Down
3 changes: 1 addition & 2 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1321,8 +1321,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
var plotinfo = fullLayout._plots[subplot],
xa = plotinfo.x(),
ya = plotinfo.y();
plotinfo.plot.attr('viewBox',
'0 0 '+xa._length+' '+ya._length);

plotinfo.xaxislayer
.selectAll('.'+xa._id+'tick').remove();
plotinfo.yaxislayer
Expand Down
75 changes: 35 additions & 40 deletions src/plots/cartesian/graph_interact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1341,20 +1341,17 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
pw = xa[0]._length,
ph = ya[0]._length,
MINDRAG = constants.MINDRAG,
MINZOOM = constants.MINZOOM,
i,
subplotXa,
subplotYa;

for(i = 1; i < subplots.length; i++) {
subplotXa = subplots[i].x();
subplotYa = subplots[i].y();
MINZOOM = constants.MINZOOM;

for(var i = 1; i < subplots.length; i++) {
var subplotXa = subplots[i].x(),
subplotYa = subplots[i].y();
if(xa.indexOf(subplotXa) === -1) xa.push(subplotXa);
if(ya.indexOf(subplotYa) === -1) ya.push(subplotYa);
}

function isDirectionActive(axList, activeVal) {
for(i = 0; i < axList.length; i++) {
for(var i = 0; i < axList.length; i++) {
if(!axList[i].fixedrange) return activeVal;
}
return '';
Expand Down Expand Up @@ -1472,7 +1469,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
.attr('d','M0,0Z');

clearSelect();
for(i = 0; i < allaxes.length; i++) forceNumbers(allaxes[i].range);
for(var i = 0; i < allaxes.length; i++) forceNumbers(allaxes[i].range);
}

function clearSelect() {
Expand Down Expand Up @@ -1692,7 +1689,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
}

// viewbox redraw at first
updateViewBoxes(scrollViewBox);
updateSubplots(scrollViewBox);
ticksAndAnnotations(ns,ew);

// then replot after a delay to make sure
Expand Down Expand Up @@ -1726,7 +1723,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
if(xActive === 'ew' || yActive === 'ns') {
if(xActive) dragAxList(xa, dx);
if(yActive) dragAxList(ya, dy);
updateViewBoxes([xActive ? -dx : 0, yActive ? -dy : 0, pw, ph]);
updateSubplots([xActive ? -dx : 0, yActive ? -dy : 0, pw, ph]);
ticksAndAnnotations(yActive, xActive);
return;
}
Expand Down Expand Up @@ -1768,7 +1765,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
else if(yActive === 's') dy = dz(ya, 0, -dy);
else if(!yActive) dy = 0;

updateViewBoxes([
updateSubplots([
(xActive === 'w') ? dx : 0,
(yActive === 'n') ? dy : 0,
pw - dx,
Expand Down Expand Up @@ -1869,41 +1866,39 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
axi.range=axi._r.slice();
}

updateViewBoxes([0,0,pw,ph]);
updateSubplots([0,0,pw,ph]);
Plotly.relayout(gd,attrs);
}

// updateViewBoxes - find all plot viewboxes that should be
// updateSubplots - find all plot viewboxes that should be
// affected by this drag, and update them. look for all plots
// sharing an affected axis (including the one being dragged)
function updateViewBoxes(viewBox) {
function updateSubplots(viewBox) {
var plotinfos = fullLayout._plots,
subplots = Object.keys(plotinfos),
i,
plotinfo2,
xa2,
ya2,
editX,
editY;

for(i = 0; i < subplots.length; i++) {
plotinfo2 = plotinfos[subplots[i]];
xa2 = plotinfo2.x();
ya2 = plotinfo2.y();
editX = ew && xa.indexOf(xa2)!==-1 && !xa2.fixedrange;
editY = ns && ya.indexOf(ya2)!==-1 && !ya2.fixedrange;
subplots = Object.keys(plotinfos);

for(var i = 0; i < subplots.length; i++) {
var subplot = plotinfos[subplots[i]],

xa2 = subplot.x(),
ya2 = subplot.y(),
editX = ew && xa.indexOf(xa2)!==-1 && !xa2.fixedrange,
editY = ns && ya.indexOf(ya2)!==-1 && !ya2.fixedrange;

if(editX || editY) {
var newVB = [0,0,xa2._length,ya2._length];
if(editX) {
newVB[0] = viewBox[0];
newVB[2] = viewBox[2];
}
if(editY) {
newVB[1] = viewBox[1];
newVB[3] = viewBox[3];
}
plotinfo2.plot.attr('viewBox',newVB.join(' '));
// plot requires offset position and
// clip moves with opposite sign
var clipDx = editX ? viewBox[0] : 0,
clipDy = editY ? viewBox[1] : 0,
plotDx = xa2._offset - clipDx,
plotDy = ya2._offset - clipDy;

var clipId = 'clip' + fullLayout._uid + subplots[i] + 'plot';

fullLayout._defs.selectAll('#' + clipId)
.attr('transform', 'translate(' + clipDx + ', ' + clipDy + ')');
subplot.plot
.attr('transform', 'translate(' + plotDx + ', ' + plotDy + ')');
}
}
}
Expand Down
Binary file modified test/image/baselines/annotations.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/contour_match_edges.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/contour_transposed-irregular.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/titles-avoid-labels.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 44 additions & 9 deletions test/jasmine/tests/snapshot_clone_test.js → test/jasmine/tests/snapshot_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
var Snapshot = require('@src/snapshot');
var Plotly = require('@lib/index');
var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var subplotMock = require('../../image/mocks/multiple_subplots.json');
var annotationMock = require('../../image/mocks/annotations.json');

describe('Test Snapshot.clone', function() {
describe('Plotly.Snapshot', function() {
'use strict';

describe('Test clone', function() {
describe('clone', function() {

var data,
layout,
Expand Down Expand Up @@ -76,7 +80,7 @@ describe('Test Snapshot.clone', function() {
setBackground: 'opaque'
};

var themeTile = Snapshot.clone(dummyGraphObj, themeOptions);
var themeTile = Plotly.Snapshot.clone(dummyGraphObj, themeOptions);
expect(themeTile.layout.height).toEqual(THEMETILE_DEFAULT_LAYOUT.height);
expect(themeTile.layout.width).toEqual(THEMETILE_DEFAULT_LAYOUT.width);
expect(themeTile.td.defaultLayout).toEqual(THEMETILE_DEFAULT_LAYOUT);
Expand All @@ -101,7 +105,7 @@ describe('Test Snapshot.clone', function() {
'annotations': []
};

var thumbTile = Snapshot.clone(dummyGraphObj, thumbnailOptions);
var thumbTile = Plotly.Snapshot.clone(dummyGraphObj, thumbnailOptions);
expect(thumbTile.layout.hidesources).toEqual(THUMBNAIL_DEFAULT_LAYOUT.hidesources);
expect(thumbTile.layout.showlegend).toEqual(THUMBNAIL_DEFAULT_LAYOUT.showlegend);
expect(thumbTile.layout.borderwidth).toEqual(THUMBNAIL_DEFAULT_LAYOUT.borderwidth);
Expand All @@ -115,7 +119,7 @@ describe('Test Snapshot.clone', function() {
width: 888
};

var customTile = Snapshot.clone(dummyGraphObj, customOptions);
var customTile = Plotly.Snapshot.clone(dummyGraphObj, customOptions);
expect(customTile.layout.height).toEqual(customOptions.height);
expect(customTile.layout.width).toEqual(customOptions.width);
});
Expand All @@ -125,23 +129,54 @@ describe('Test Snapshot.clone', function() {
tileClass: 'notarealclass'
};

var vanillaPlotTile = Snapshot.clone(dummyGraphObj, vanillaOptions);
var vanillaPlotTile = Plotly.Snapshot.clone(dummyGraphObj, vanillaOptions);
expect(vanillaPlotTile.data[0].x).toEqual(data[0].x);
expect(vanillaPlotTile.layout).toEqual(layout);
expect(vanillaPlotTile.layout.height).toEqual(layout.height);
expect(vanillaPlotTile.layout.width).toEqual(layout.width);
});

it('should set the background parameter appropriately', function() {
var pt = Snapshot.clone(dummyGraphObj, {
var pt = Plotly.Snapshot.clone(dummyGraphObj, {
setBackground: 'transparent'
});
expect(pt.config.setBackground).not.toBeDefined();

pt = Snapshot.clone(dummyGraphObj, {
pt = Plotly.Snapshot.clone(dummyGraphObj, {
setBackground: 'blue'
});
expect(pt.config.setBackground).toEqual('blue');
});
});

describe('toSVG', function() {
var gd;

beforeEach(function() {
gd = createGraphDiv();
});

afterEach(destroyGraphDiv);


it('should not return any nested svg tags of plots', function(done) {
Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() {
return Plotly.Snapshot.toSVG(gd);
}).then(function(svg) {
var splitSVG = svg.split('<svg');

expect(splitSVG.length).toBe(2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we make this test even better by searching for one and only one <svg> and one and only one </svg> ?

}).then(done);
});

it('should not return any nested svg tags of annotations', function(done) {
Plotly.plot(gd, annotationMock.data, annotationMock.layout).then(function() {
return Plotly.Snapshot.toSVG(gd);
}).then(function(svg) {
var splitSVG = svg.split('<svg');

expect(splitSVG.length).toBe(2);
}).then(done);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nicely done 🎉

});
});
});