adjust large margins instead of dropping them

plotly · Nov 2, 2020 · 565f942 · 565f942
1 parent 670d238
commit 565f942
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 20 deletions.
diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -1864,6 +1864,9 @@ function initMargins(fullLayout) {
     if(!fullLayout._pushmarginIds) fullLayout._pushmarginIds = {};
 }
 
+var minFinalWidth = 64; // could possibly be exposed as layout.margin.minfinalwidth
+var minFinalHeight = 64; // could possibly be exposed as layout.margin.minfinalheight
+
 /**
  * autoMargin: called by components that may need to expand the margins to
  * be rendered on-plot.
@@ -1881,12 +1884,10 @@ function initMargins(fullLayout) {
  */
 plots.autoMargin = function(gd, id, o) {
     var fullLayout = gd._fullLayout;
-    var minFinalWidth = Math.max(0, fullLayout.width -
-        64 // TODO: could be exposed as layout.margin.minfinalwidth
-    );
-    var minFinalHeight = Math.max(0, fullLayout.height -
-        64 // TODO: could be exposed as layout.margin.minfinalheight
-    );
+    var width = fullLayout.width;
+    var height = fullLayout.height;
+    var maxSpaceW = Math.max(0, width - minFinalWidth);
+    var maxSpaceH = Math.max(0, height - minFinalHeight);
 
     var pushMargin = fullLayout._pushmargin;
     var pushMarginIds = fullLayout._pushmarginIds;
@@ -1906,15 +1907,13 @@ plots.autoMargin = function(gd, id, o) {
 
             // if the item is too big, just give it enough automargin to
             // make sure you can still grab it and bring it back
-            var rW = (o.l + o.r) / minFinalWidth;
+            var rW = (o.l + o.r) / maxSpaceW;
             if(rW > 1) {
-                Lib.log('Margin push', id, 'is too big in x, adjusting');
                 o.l /= rW;
                 o.r /= rW;
             }
-            var rH = (o.t + o.b) / minFinalHeight;
+            var rH = (o.t + o.b) / maxSpaceH;
             if(rH > 1) {
-                Lib.log('Margin push', id, 'is too big in y, adjusting');
                 o.t /= rH;
                 o.b /= rH;
             }
@@ -1941,6 +1940,11 @@ plots.autoMargin = function(gd, id, o) {
 
 plots.doAutoMargin = function(gd) {
     var fullLayout = gd._fullLayout;
+    var width = fullLayout.width;
+    var height = fullLayout.height;
+    var maxSpaceW = Math.max(0, width - minFinalWidth);
+    var maxSpaceH = Math.max(0, height - minFinalHeight);
+
     if(!fullLayout._size) fullLayout._size = {};
     initMargins(fullLayout);
 
@@ -1955,8 +1959,6 @@ plots.doAutoMargin = function(gd) {
     var mr = margin.r;
     var mt = margin.t;
     var mb = margin.b;
-    var width = fullLayout.width;
-    var height = fullLayout.height;
     var pushMargin = fullLayout._pushmargin;
     var pushMarginIds = fullLayout._pushmarginIds;
 
@@ -1988,11 +1990,10 @@ plots.doAutoMargin = function(gd) {
                 if(isNumeric(pl) && pushMargin[k2].r) {
                     var fr = pushMargin[k2].r.val;
                     var pr = pushMargin[k2].r.size;
-
                     if(fr > fl) {
                         var newL = (pl * fr + (pr - width) * fl) / (fr - fl);
                         var newR = (pr * (1 - fl) + (pl - width) * (1 - fr)) / (fr - fl);
-                        if(newL >= 0 && newR >= 0 && width - (newL + newR) > 0 && newL + newR > ml + mr) {
+                        if(newL + newR > ml + mr) {
                             ml = newL;
                             mr = newR;
                         }
@@ -2002,11 +2003,10 @@ plots.doAutoMargin = function(gd) {
                 if(isNumeric(pb) && pushMargin[k2].t) {
                     var ft = pushMargin[k2].t.val;
                     var pt = pushMargin[k2].t.size;
-
                     if(ft > fb) {
                         var newB = (pb * ft + (pt - height) * fb) / (ft - fb);
                         var newT = (pt * (1 - fb) + (pb - height) * (1 - ft)) / (ft - fb);
-                        if(newB >= 0 && newT >= 0 && height - (newT + newB) > 0 && newB + newT > mb + mt) {
+                        if(newB + newT > mb + mt) {
                             mb = newB;
                             mt = newT;
                         }
@@ -2016,6 +2016,18 @@ plots.doAutoMargin = function(gd) {
         }
     }
 
+    var rW = (ml + mr) / maxSpaceW;
+    if(rW > 1) {
+        ml /= rW;
+        mr /= rW;
+    }
+
+    var rH = (mb + mt) / maxSpaceH;
+    if(rH > 1) {
+        mb /= rH;
+        mt /= rH;
+    }
+
     gs.l = Math.round(ml);
     gs.r = Math.round(mr);
     gs.t = Math.round(mt);

diff --git a/test/image/baselines/automargin-large-margins-both-sides.png b/test/image/baselines/automargin-large-margins-both-sides.png
diff --git a/test/image/baselines/automargin-large-margins-horizontal.png b/test/image/baselines/automargin-large-margins-horizontal.png
diff --git a/test/image/baselines/automargin-large-margins.png b/test/image/baselines/automargin-large-margins.png
diff --git a/test/image/baselines/legend_small_horizontal.png b/test/image/baselines/legend_small_horizontal.png
diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js
@@ -3856,7 +3856,7 @@ describe('Test axes', function() {
             .then(function() { return Plotly.relayout(gd, 'height', 100); })
             .then(function() {
                 _assert('after relayout to *small* height', {
-                    bottomLowerBound: 30,
+                    bottomLowerBound: 15,
                     totalHeight: 100
                 });
             })
@@ -3896,7 +3896,7 @@ describe('Test axes', function() {
             .then(function() { return Plotly.relayout(gd, 'width', 100); })
             .then(function() {
                 _assert('after relayout to *small* width', {
-                    leftLowerBound: 30,
+                    leftLowerBound: 15,
                     totalWidth: 100
                 });
             })

diff --git a/test/jasmine/tests/indicator_test.js b/test/jasmine/tests/indicator_test.js
@@ -171,7 +171,7 @@ describe('Indicator plot', function() {
                 return Plotly.relayout(gd, {width: 200, height: 200});
             })
             .then(function() {
-                checkNumbersScale(0.2, 'should scale down');
+                checkNumbersScale(0.4794007490636704, 'should scale down');
                 return Plotly.relayout(gd, {width: 400, height: 400});
             })
             .then(function() {

diff --git a/test/jasmine/tests/legend_scroll_test.js b/test/jasmine/tests/legend_scroll_test.js
@@ -405,7 +405,7 @@ describe('The legend', function() {
                 expect(countLegendClipPaths(gd)).toBe(1);
 
                 // clippath resized to new height less than new plot height
-                expect(+legendHeight).toBe(getPlotHeight(gd));
+                expect(+legendHeight).toBeGreaterThan(getPlotHeight(gd));
                 expect(+legendHeight).toBeLessThan(+origLegendHeight);
 
                 done();