improve overlap detection for aligned tick labels

Author: archmoj

src/plots/cartesian/axes.js

@@ -2534,7 +2534,6 @@ function getTickLabelUV(ax) {
         v += 3; // add extra pad
     }
 
-
     if(isLeft || isTop) u = -u;
     if(side === 'bottom' || side === 'right') v = -v;
 
@@ -3102,11 +3101,24 @@ axes.drawLabels = function(gd, ax, opts) {
             } else {
                 var vLen = vals.length;
                 var tickSpacing = Math.abs((vals[vLen - 1].x - vals[0].x) * ax._m) / (vLen - 1);
+
+                var ticklabelposition = ax.ticklabelposition || '';
+                var has = function(str) {
+                    return ticklabelposition.indexOf(str) !== -1;
+                };
+                var isTop = has('top');
+                var isLeft = has('left');
+                var isRight = has('right');
+                var isBottom = has('bottom');
+                var isAligned = isBottom || isLeft || isTop || isRight;
+                var pad = !isAligned ? 0 :
+                    (ax.tickwidth || 0) + 2 * 3; // extra pad
+
                 var rotate90 = (tickSpacing < maxFontSize * 2.5) || ax.type === 'multicategory';
 
                 // any overlap at all - set 30 degrees or 90 degrees
                 for(i = 0; i < lbbArray.length - 1; i++) {
-                    if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1])) {
+                    if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1], pad)) {
                         autoangle = rotate90 ? 90 : 30;
                         break;
                     }

test/image/baselines/ticklabelposition-0.png

@@ -43,7 +43,7 @@
             "ticklabelposition": "outside top",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -56,7 +56,7 @@
             "ticklabelposition": "outside right",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -95,7 +95,7 @@
             "ticklabelposition": "outside bottom",
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -109,7 +109,7 @@
             "tickangle": -60,
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },

test/image/baselines/ticklabelposition-1.png

@@ -2,12 +2,12 @@
     "data": [{
         "xaxis": "x",
         "yaxis": "y",
-        "x": ["20-12-15", "21-01-15"],
+        "x": ["20-12-20", "21-01-20"],
         "y": [1e-1, 1e+6]
     }, {
         "xaxis": "x2",
         "yaxis": "y2",
-        "x": ["20-10", "21-06"],
+        "x": ["20-10", "21-05-15"],
         "y": [1e-1, 1e+6]
     }, {
         "xaxis": "x3",
@@ -45,7 +45,7 @@
             "ticklabelposition": "inside top",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -59,7 +59,7 @@
             "ticklabelposition": "inside left",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -99,7 +99,7 @@
             "ticklabelposition": "inside bottom",
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },
@@ -114,7 +114,7 @@
             "ticklabelposition": "inside",
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "gridcolor": "white"
         },

test/image/baselines/ticklabelposition-2.png

@@ -47,7 +47,7 @@
             "ticklabelposition": "inside right",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "linecolor": "yellow",
             "tickcolor": "yellow",
@@ -63,7 +63,7 @@
             "ticklabelposition": "inside bottom",
             "tickfont": { "size": 20 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "linecolor": "yellow",
             "tickcolor": "yellow",
@@ -109,7 +109,7 @@
             "ticklabelposition": "inside left",
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "linecolor": "yellow",
             "tickcolor": "yellow",
@@ -127,7 +127,7 @@
             "tickangle": -45,
             "tickfont": { "size": 16 },
             "ticklen": 8,
-            "tickwidth": 2,
+            "tickwidth": 4,
             "linewidth": 4,
             "linecolor": "yellow",
             "tickcolor": "yellow",