improve autosize in edge cases #3090
Conversation
- provide fixed non-zero width/height when autosize:true and container's size is zero - when setting container's widht/height, ignore autosize:true if width/height is explicitly specified by the user. - 🔒 down in test that explicit width/height win over autosize:true
antoinerg
added
bug
| @@ -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; | |||
There was a problem hiding this comment.
Why are we stashing things on _context now?
| @@ -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; | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
src/plot_api/subroutines.js
Outdated
| width: (fullLayout.autosize) ? '100%' : fullLayout.width + 'px', | ||
| height: (fullLayout.autosize && !fullLayout._hasZeroHeight) ? '100%' : fullLayout.height + 'px' | ||
| width: (fullLayout.autosize && !gd._context._hasZeroWidth && !gd.layout.width) ? '100%' : fullLayout.width + 'px', | ||
| height: (fullLayout.autosize && !gd._context._hasZeroHeight && !gd.layout.height) ? '100%' : fullLayout.height + 'px' |
There was a problem hiding this comment.
The && !gd.layout.width and && !gd.layout.height conditions are there to ensure that explicit width/height wins over autosize:true.
There was a problem hiding this comment.
I just realized that one way of making sure we're not breaking anything out there would be to add a && gd._context.responsive. That way, we would absolutely have no regression for people not using responsive! After all, setting the container's size to 100% is only useful for responsiveness in modern CSS layouts.
There was a problem hiding this comment.
I just realized that one way of making sure we're not breaking anything out there would be to add a
&& gd._context.responsive
👍
This change will prevent any existing applications from breaking. Anyway setting the container's size to 100% was only useful for responsiveness in modern CSS layouts.
|
Nicely done. 💃 Thanks for the quick turnaround! |
In this PR, I address some shortcomings of #3056 by doing the following things: