Fix for #7416: Hidden ticklabels with ticklabelposition "inside" take up plot space

draftlogs/7417_fix.md

@@ -0,0 +1 @@
+- Fix hidden ticklabels taking up plot space [[#7417](https://github.com/plotly/plotly.js/pull/7417)]

src/plots/cartesian/axes.js

@@ -2946,20 +2946,42 @@ function calcLabelLevelBbox(ax, cls, mainLinePositionShift) {
         bottom = -Infinity;
         left = Infinity;
         right = -Infinity;
+        var xAxis = ax._id.charAt(0) === 'x';
         ax._selections[cls].each(function() {
             var thisLabel = selectTickLabel(this);
+            var hidden = thisLabel.style('display') === 'none';
             // Use parent node <g.(x|y)tick>, to make Drawing.bBox
             // retrieve a bbox computed with transform info
             //
             // To improve perf, it would be nice to use `thisLabel.node()`
             // (like in fixLabelOverlaps) instead and use Axes.getPxPosition
             // together with the makeLabelFns outputs and `tickangle`
             // to compute one bbox per (tick value x tick style)
+            if (hidden) {
+                // turn on label display temporarily to calculate its bbox
+                thisLabel.style('display', null);
+            }
             var bb = Drawing.bBox(thisLabel.node().parentNode);
-            top = Math.min(top, bb.top);
-            bottom = Math.max(bottom, bb.bottom);
-            left = Math.min(left, bb.left);
-            right = Math.max(right, bb.right);
+            if (hidden) {
+                selectTickLabel(this).style('display', 'none');
+            }
+            var currentTop = bb.top;
+            var currentBottom = bb.bottom;
+            var currentLeft = bb.left;
+            var currentRight = bb.right;
+            if (hidden) {
+                if (xAxis) {
+                    currentTop = top;
+                    currentBottom = bottom;
+                } else {
+                    currentLeft = left;
+                    currentRight = right;
+                }
+            }
+            top = Math.min(top, currentTop);
+            bottom = Math.max(bottom, currentBottom);
+            left = Math.min(left, currentLeft);
+            right = Math.max(right, currentRight);
         });
     } else {
         var dummyCalc = axes.makeLabelFns(ax, mainLinePositionShift);
@@ -3648,7 +3670,7 @@ axes.drawLabels = function(gd, ax, opts) {
                     'text-anchor': anchor
                 });
 
-                thisText.style('opacity', 1); // visible
+                thisText.style('display', null); // visible
 
                 if(ax._adjustTickLabelsOverflow) {
                     ax._adjustTickLabelsOverflow();
@@ -3706,9 +3728,9 @@ axes.drawLabels = function(gd, ax, opts) {
 
                 var t = thisLabel.select('text');
                 if(adjust) {
-                    if(hideOverflow) t.style('opacity', 0); // hidden
-                } else {
-                    t.style('opacity', 1); // visible
+                    if(hideOverflow) t.style('display', 'none'); // hidden
+                } else if(t.node().style.display !== 'none'){
+                    t.style('display', null);
 
                     if(side === 'bottom' || side === 'right') {
                         visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left);
@@ -3783,7 +3805,7 @@ axes.drawLabels = function(gd, ax, opts) {
                                 q > ax['_visibleLabelMin_' + anchorAx._id]
                             ) {
                                 t.style('display', 'none'); // hidden
-                            } else if(e.K === 'tick' && !idx) {
+                            } else if(e.K === 'tick' && !idx && t.node().style.display !== 'none') {
                                 t.style('display', null); // visible
                             }
                         });

test/image/mocks/zz-label-spacing.json

@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "x": ["A", "B", "C"],
+      "y": [0, 40, 80],
+      "type": "scatter"
+    },
+    {
+      "x": ["A", "B", "C"],
+      "y": [0, 40, 80],
+      "type": "scatter",
+      "xaxis": "x2",
+      "yaxis": "y2"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "The vertical grid lines in the subplots should be aligned."
+    },
+    "width": 600,
+    "xaxis": {
+      "anchor": "y"
+     },
+     "xaxis2": {
+      "anchor": "y2"
+     },
+    "yaxis": {
+      "range": [0, 80],
+      "dtick": 20,
+      "side": "right",
+      "ticklabelposition": "inside",
+      "anchor": "x",
+      "domain": [0, 0.45]
+    },
+    "yaxis2": {
+      "range": [0, 100],
+      "dtick": 20,
+      "side": "right",
+      "ticklabelposition": "inside",
+      "anchor": "x2",
+      "domain": [0.55, 1]
+     }
+  }
+}

test/jasmine/tests/axes_test.js

@@ -1696,6 +1696,7 @@ describe('Test axes', function() {
 
                 return Plotly.relayout(gd, 'xaxis.autorange', true);
             }).then(function() {
+
                 expect(gd._fullLayout.xaxis.range).toBeCloseToArray([0.37, 3.22], 1);
             })
             .then(done, done.fail);
@@ -6901,6 +6902,18 @@ describe('Test axes', function() {
             expect(positions).toEqual(expPositions);
         }
 
+        function _assertClose(expPositions) {
+            var ax = gd._fullLayout.xaxis;
+
+            // minor positions
+            var positions =
+                ax._vals
+                    .filter(function(d) { return d.minor; })
+                    .map(function(d) { return d.x; });
+
+            expect(positions).toBeCloseToArray(expPositions, 3);
+        }
+
         it('minor tickvals', function(done) {
             Plotly.newPlot(gd, {
                 data: [{
@@ -7127,7 +7140,7 @@ describe('Test axes', function() {
                 }
             })
             .then(function() {
-                _assert([ -0.22184874961635648, -0.1549019599857433, -0.09691001300805657, -0.04575749056067513, 0.4771212547196623, 0.6020599913279623, 0.7781512503836435, 0.8450980400142567, 0.9030899869919434, 0.9542425094393249, 1.4771212547196624, 1.6020599913279623, 1.7781512503836434, 1.8450980400142567, 1.9030899869919433, 1.9542425094393248, 2.477121254719662, 2.6020599913279625, 2.7781512503836434, 2.845098040014257, 2.9030899869919433, 2.9542425094393248, 3.477121254719662, 3.6020599913279625, 3.7781512503836434, 3.845098040014257, 3.9030899869919433, 3.9542425094393248 ]);
+                _assertClose([ -0.22184874961635648, -0.1549019599857433, -0.09691001300805657, -0.04575749056067513, 0.4771212547196623, 0.6020599913279623, 0.7781512503836435, 0.8450980400142567, 0.9030899869919434, 0.9542425094393249, 1.4771212547196624, 1.6020599913279623, 1.7781512503836434, 1.8450980400142567, 1.9030899869919433, 1.9542425094393248, 2.477121254719662, 2.6020599913279625, 2.7781512503836434, 2.845098040014257, 2.9030899869919433, 2.9542425094393248, 3.477121254719662, 3.6020599913279625, 3.7781512503836434, 3.845098040014257, 3.9030899869919433, 3.9542425094393248 ]);
             })
             .then(done, done.fail);
         });
@@ -7169,7 +7182,7 @@ describe('Test axes', function() {
                 }
             })
             .then(function() {
-                _assert([ -0.017728766960431602, -0.00877392430750515, 0.008600171761917567, 0.017033339298780367, 0.025305865264770258, 0.03342375548694973, 0.049218022670181646, 0.056904851336472634, 0.06445798922691853, 0.07188200730612543, 0.08635983067474828, 0.09342168516223513, 0.10037054511756296, 0.10720996964786844, 0.12057393120584996, 0.1271047983648077, 0.13353890837021762, 0.13987908640123659, 0.15228834438305658, 0.15836249209524975, 0.1643528557844372, 0.17026171539495752, 0.18184358794477265, 0.18752072083646318, 0.1931245983544617, 0.1986570869544227, 0.20951501454263102, 0.21484384804769796, 0.22010808804005513, 0.22530928172586287, 0.23552844690754896, 0.24054924828259974, 0.24551266781414988, 0.250420002308894, 0.2600713879850748, 0.2648178230095364, 0.26951294421791616, 0.2741578492636797, 0.28330122870354935, 0.2878017299302258, 0.29225607135647574, 0.29666519026153076, 0.30535136944662333, 0.3096301674258983, 0.31386722036915293, 0.31806333496276107 ]);
+                _assertClose([ -0.017728766960431602, -0.00877392430750515, 0.008600171761917567, 0.017033339298780367, 0.025305865264770258, 0.03342375548694973, 0.049218022670181646, 0.056904851336472634, 0.06445798922691853, 0.07188200730612543, 0.08635983067474828, 0.09342168516223513, 0.10037054511756296, 0.10720996964786844, 0.12057393120584996, 0.1271047983648077, 0.13353890837021762, 0.13987908640123659, 0.15228834438305658, 0.15836249209524975, 0.1643528557844372, 0.17026171539495752, 0.18184358794477265, 0.18752072083646318, 0.1931245983544617, 0.1986570869544227, 0.20951501454263102, 0.21484384804769796, 0.22010808804005513, 0.22530928172586287, 0.23552844690754896, 0.24054924828259974, 0.24551266781414988, 0.250420002308894, 0.2600713879850748, 0.2648178230095364, 0.26951294421791616, 0.2741578492636797, 0.28330122870354935, 0.2878017299302258, 0.29225607135647574, 0.29666519026153076, 0.30535136944662333, 0.3096301674258983, 0.31386722036915293, 0.31806333496276107 ]);
             })
             .then(done, done.fail);
         });
@@ -7191,7 +7204,7 @@ describe('Test axes', function() {
                 }
             })
             .then(function() {
-                _assert([ -0.30102999566398125, 0.30102999566398114, 0.6989700043360187, 1.3010299956639813, 1.6989700043360187, 2.3010299956639813, 2.6989700043360187, 3.3010299956639813, 3.6989700043360187, 4.301029995663981, 4.698970004336019, 5.301029995663981, 5.698970004336019, 6.301029995663981, 6.698970004336019, 7.301029995663981 ]);
+                _assertClose([ -0.30102999566398125, 0.30102999566398114, 0.6989700043360187, 1.3010299956639813, 1.6989700043360187, 2.3010299956639813, 2.6989700043360187, 3.3010299956639813, 3.6989700043360187, 4.301029995663981, 4.698970004336019, 5.301029995663981, 5.698970004336019, 6.301029995663981, 6.698970004336019, 7.301029995663981 ]);
             })
             .then(done, done.fail);
         });
@@ -7213,7 +7226,7 @@ describe('Test axes', function() {
                 }
             })
             .then(function() {
-                _assert([ 0.17609125905568124, 0.3979400086720376, 0.5440680443502756, 0.6532125137753436, 0.7403626894942437, 0.8129133566428552, 0.8750612633916998, 0.9294189257142923, 0.9777236052888472, 1.0211892990699374, 1.0413926851582243, 1.0606978403536107 ]);
+                _assertClose([ 0.17609125905568124, 0.3979400086720376, 0.5440680443502756, 0.6532125137753436, 0.7403626894942437, 0.8129133566428552, 0.8750612633916998, 0.9294189257142923, 0.9777236052888472, 1.0211892990699374, 1.0413926851582243, 1.0606978403536107 ]);
             })
             .then(done, done.fail);
         });