Merge pull request #577 from n-riesco/remove-autosize-initial

Remove internal option layout.autosize='initial' (Fixes #537)

Author: etpinard

src/lib/index.js

@@ -379,7 +379,9 @@ lib.getPlotDiv = function(el) {
 
 lib.isPlotDiv = function(el) {
     var el3 = d3.select(el);
-    return el3.size() && el3.classed('js-plotly-plot');
+    return el3.node() instanceof HTMLElement &&
+        el3.size() &&
+        el3.classed('js-plotly-plot');
 };
 
 lib.removeElement = function(el) {

src/plot_api/plot_api.js

@@ -409,10 +409,6 @@ function plotPolar(gd, data, layout) {
     if(layout) gd.layout = layout;
     Plotly.micropolar.manager.fillLayout(gd);
 
-    if(gd._fullLayout.autosize === 'initial' && gd._context.autosizable) {
-        plotAutoSize(gd, {});
-        gd._fullLayout.autosize = layout.autosize = true;
-    }
     // resize canvas
     paperDiv.style({
         width: gd._fullLayout.width + 'px',
@@ -2148,8 +2144,6 @@ Plotly.relayout = function relayout(gd, astr, val) {
         return (fullLayout[axName] || {}).autorange;
     }
 
-    var hw = ['height', 'width'];
-
     // alter gd.layout
     for(var ai in aobj) {
         var p = Lib.nestedProperty(layout, ai),
@@ -2172,14 +2166,8 @@ Plotly.relayout = function relayout(gd, astr, val) {
         // op and has no flag.
         undoit[ai] = (pleaf === 'reverse') ? vi : p.get();
 
-        // check autosize or autorange vs size and range
-        if(hw.indexOf(ai) !== -1) {
-            doextra('autosize', false);
-        }
-        else if(ai === 'autosize') {
-            doextra(hw, undefined);
-        }
-        else if(pleafPlus.match(/^[xyz]axis[0-9]*\.range(\[[0|1]\])?$/)) {
+        // check autorange vs range
+        if(pleafPlus.match(/^[xyz]axis[0-9]*\.range(\[[0|1]\])?$/)) {
             doextra(ptrunk + '.autorange', false);
         }
         else if(pleafPlus.match(/^[xyz]axis[0-9]*\.autorange$/)) {
@@ -2357,11 +2345,20 @@ Plotly.relayout = function relayout(gd, astr, val) {
         Queue.add(gd, relayout, [gd, undoit], relayout, [gd, redoit]);
     }
 
-    // calculate autosizing - if size hasn't changed,
-    // will remove h&w so we don't need to redraw
-    if(aobj.autosize) aobj = plotAutoSize(gd, aobj);
+    var oldWidth = gd._fullLayout.width,
+        oldHeight = gd._fullLayout.height;
 
-    if(aobj.height || aobj.width || aobj.autosize) docalc = true;
+    // coerce the updated layout
+    Plots.supplyDefaults(gd);
+
+    // calculate autosizing
+    if(gd.layout.autosize) Plots.plotAutoSize(gd, gd.layout, gd._fullLayout);
+
+    // avoid unnecessary redraws
+    var changed = aobj.height || aobj.width ||
+        (gd._fullLayout.width !== oldWidth) ||
+        (gd._fullLayout.height !== oldHeight);
+    if(changed) docalc = true;
 
     // redraw
     // first check if there's still anything to do
@@ -2382,7 +2379,6 @@ Plotly.relayout = function relayout(gd, astr, val) {
     }
     else if(ak.length) {
         // if we didn't need to redraw entirely, just do the needed parts
-        Plots.supplyDefaults(gd);
         fullLayout = gd._fullLayout;
 
         if(dolegend) {
@@ -2491,86 +2487,6 @@ Plotly.purge = function purge(gd) {
     return gd;
 };
 
-/**
- * Reduce all reserved margin objects to a single required margin reservation.
- *
- * @param {Object} margins
- * @returns {{left: number, right: number, bottom: number, top: number}}
- */
-function calculateReservedMargins(margins) {
-    var resultingMargin = {left: 0, right: 0, bottom: 0, top: 0},
-        marginName;
-
-    if(margins) {
-        for(marginName in margins) {
-            if(margins.hasOwnProperty(marginName)) {
-                resultingMargin.left += margins[marginName].left || 0;
-                resultingMargin.right += margins[marginName].right || 0;
-                resultingMargin.bottom += margins[marginName].bottom || 0;
-                resultingMargin.top += margins[marginName].top || 0;
-            }
-        }
-    }
-    return resultingMargin;
-}
-
-function plotAutoSize(gd, aobj) {
-    var fullLayout = gd._fullLayout,
-        context = gd._context,
-        computedStyle;
-
-    var newHeight, newWidth;
-
-    gd.emit('plotly_autosize');
-
-    // embedded in an iframe - just take the full iframe size
-    // if we get to this point, with no aspect ratio restrictions
-    if(gd._context.fillFrame) {
-        newWidth = window.innerWidth;
-        newHeight = window.innerHeight;
-
-        // somehow we get a few extra px height sometimes...
-        // just hide it
-        document.body.style.overflow = 'hidden';
-    }
-    else if(isNumeric(context.frameMargins) && context.frameMargins > 0) {
-        var reservedMargins = calculateReservedMargins(gd._boundingBoxMargins),
-            reservedWidth = reservedMargins.left + reservedMargins.right,
-            reservedHeight = reservedMargins.bottom + reservedMargins.top,
-            gdBB = fullLayout._container.node().getBoundingClientRect(),
-            factor = 1 - 2 * context.frameMargins;
-
-        newWidth = Math.round(factor * (gdBB.width - reservedWidth));
-        newHeight = Math.round(factor * (gdBB.height - reservedHeight));
-    }
-    else {
-        // plotly.js - let the developers do what they want, either
-        // provide height and width for the container div,
-        // specify size in layout, or take the defaults,
-        // but don't enforce any ratio restrictions
-        computedStyle = window.getComputedStyle(gd);
-        newHeight = parseFloat(computedStyle.height) || fullLayout.height;
-        newWidth = parseFloat(computedStyle.width) || fullLayout.width;
-    }
-
-    if(Math.abs(fullLayout.width - newWidth) > 1 ||
-            Math.abs(fullLayout.height - newHeight) > 1) {
-        fullLayout.height = gd.layout.height = newHeight;
-        fullLayout.width = gd.layout.width = newWidth;
-    }
-    // if there's no size change, update layout but
-    // delete the autosize attr so we don't redraw
-    // but can't call layoutStyles for initial autosize
-    else if(fullLayout.autosize !== 'initial') {
-        delete(aobj.autosize);
-        fullLayout.autosize = gd.layout.autosize = true;
-    }
-
-    Plots.sanitizeMargins(fullLayout);
-
-    return aobj;
-}
-
 // -------------------------------------------------------
 // makePlotFramework: Create the plot container and axes
 // -------------------------------------------------------
@@ -2590,13 +2506,6 @@ function makePlotFramework(gd) {
         .classed('svg-container', true)
         .style('position', 'relative');
 
-    // Initial autosize
-    if(fullLayout.autosize === 'initial') {
-        plotAutoSize(gd, {});
-        fullLayout.autosize = true;
-        gd.layout.autosize = true;
-    }
-
     // Make the graph containers
     // start fresh each time we get here, so we know the order comes out
     // right, rather than enter/exit which can muck up the order

src/plot_api/plot_config.js

@@ -26,7 +26,8 @@ module.exports = {
     // we can edit titles, move annotations, etc
     editable: false,
 
-    // plot will respect layout.autosize=true and infer its container size
+    // DO autosize once regardless of layout.autosize
+    // (use default width or height values otherwise)
     autosizable: false,
 
     // if we DO autosize, do we fill the container or the screen?

src/plots/layout_attributes.js

@@ -45,13 +45,17 @@ module.exports = {
         description: 'Sets the title font.'
     }),
     autosize: {
-        valType: 'enumerated',
+        valType: 'boolean',
         role: 'info',
-        // TODO: better handling of 'initial'
-        values: [true, false, 'initial'],
+        dflt: false,
         description: [
-            'Determines whether or not the dimensions of the figure are',
-            'computed as a function of the display size.'
+            'Determines whether or not a layout width or height',
+            'that has been left undefined by the user',
+            'is initialized on each relayout.',
+
+            'Note that, regardless of this attribute,',
+            'an undefined layout width or height',
+            'is always initialized on the first call to plot.'
         ].join(' ')
     },
     width: {