Skip to content

improve autosize in edge cases #3090

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 2 commits into from
Oct 10, 2018
Merged

improve autosize in edge cases #3090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f7a8e7
improve autosize in edge case
antoinerg Oct 10, 2018
af4a2ce
only set container's size to 100% when responsive:true
antoinerg Oct 10, 2018
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
7 changes: 4 additions & 3 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,6 +488,10 @@ function setPlotContext(gd, config) {
if(context.setBackground === 'transparent' || typeof context.setBackground !== 'function') {
context.setBackground = setBackground;
}

// Check if gd has a specified widht/height to begin with
context._hasZeroHeight = context._hasZeroHeight || gd.clientHeight === 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are we stashing things on _context now?

context._hasZeroWidth = context._hasZeroWidth || gd.clientWidth === 0;
}

function plotPolar(gd, data, layout) {
Expand Down Expand Up @@ -3248,9 +3252,6 @@ function makePlotFramework(gd) {
var gd3 = d3.select(gd);
var fullLayout = gd._fullLayout;

// Check if gd has a specified height
fullLayout._hasZeroHeight = gd.clientHeight === 0;
Copy link
Contributor Author

@antoinerg antoinerg Oct 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

The reason I removed _hasZeroHeight from fullLayout and put it into context is because it would get cleared by a call to Plotly.newPlot. However, because this call does not remove the plot from the container, gd.clientHeight would be non-zero leading us to believe the container has a specified width/height in CSS. This is not the case: it simply expanded to accomodate the plot. As soon as the plot is removed, it goes back to being zero size which messes things up.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok. That looks good to me. Stashing those things _context is "great", but I can't think of a better place, so 👌

The problems brought up in #3056 (comment) seemed to now be resolved.

I'll test this thing on stage after lunch.


// Plot container
fullLayout._container = gd3.selectAll('.plot-container').data([0]);
fullLayout._container.enter().insert('div', ':first-child')
Expand Down
5 changes: 4 additions & 1 deletion src/plot_api/plot_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ module.exports = {
*/
autosizable: false,

// responsive: determines whether to change the layout size when window is resized
/*
* responsive: determines whether to change the layout size when window is resized.
* In v2, this option will be removed and will always be true.
*/
responsive: false,

// set the length of the undo/redo queue
Expand Down
4 changes: 2 additions & 2 deletions src/plot_api/subroutines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ function lsInner(gd) {
var i, subplot, plotinfo, xa, ya;

fullLayout._paperdiv.style({
width: (fullLayout.autosize) ? '100%' : fullLayout.width + 'px',
height: (fullLayout.autosize && !fullLayout._hasZeroHeight) ? '100%' : fullLayout.height + 'px'
width: (gd._context.responsive && fullLayout.autosize && !gd._context._hasZeroWidth && !gd.layout.width) ? '100%' : fullLayout.width + 'px',
height: (gd._context.responsive && fullLayout.autosize && !gd._context._hasZeroHeight && !gd.layout.height) ? '100%' : fullLayout.height + 'px'
})
.selectAll('.main-svg')
.call(Drawing.setSize, fullLayout.width, fullLayout.height);
Expand Down
45 changes: 45 additions & 0 deletions test/jasmine/tests/config_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,5 +705,50 @@ describe('config argument', function() {
.then(testResponsive)
.then(done);
});

it('should provide a fixed non-zero width/height when autosize/responsive: true and container\' size is zero', function(done) {
fillParent(1, 1, function() {
this.style.display = 'inline-block';
this.style.width = null;
this.style.height = null;
});
Plotly.plot(gd, data, {autosize: true}, {responsive: true})
.then(function() {
checkLayoutSize(700, 450);
expect(gd.clientWidth).toBe(700);
expect(gd.clientHeight).toBe(450);
})
.then(function() {
return Plotly.newPlot(gd, data, {autosize: true}, {responsive: true});
})
// It is important to test newPlot to make sure an initially zero size container
// is still considered to have zero size after a plot is drawn into it.
.then(function() {
checkLayoutSize(700, 450);
expect(gd.clientWidth).toBe(700);
expect(gd.clientHeight).toBe(450);
})
.catch(failTest)
.then(done);
});

// The following test is to guarantee we're not breaking the existing (although maybe not ideal) behaviour.
// In a future version, one may prefer responsive/autosize:true winning over an explicit width/height when embedded in a webpage.
it('should use the explicitly provided width/height even if autosize/responsive:true', function(done) {
fillParent(1, 1, function() {
this.style.width = '1000px';
this.style.height = '500px';
});

Plotly.plot(gd, data, {autosize: true, width: 1200, height: 700}, {responsive: true})
.then(function() {
expect(gd.clientWidth).toBe(1000);
expect(gd.clientHeight).toBe(500);
// The plot should overflow the container!
checkLayoutSize(1200, 700);
})
.catch(failTest)
.then(done);
});
});
});