generalize tick labels selection stash

etpinard · etpinard · commit 9ebbe7d72c66 · 2018-11-30T12:15:10.000-05:00
- so that it can still be relevant for multi-category axes.
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -1637,6 +1637,10 @@ axes.drawOne = function(gd, ax, opts) {
 
     if(!ax.visible) return;
 
+    // stash selections to avoid DOM queries e.g.
+    // - stash tickLabels selection, so that drawTitle can use it to scoot title
+    ax._selections = {};
+
     var transFn = axes.makeTransFn(ax);
 
     // We remove zero lines, grid lines, and inside ticks if they're within 1px of the end
@@ -1737,12 +1741,6 @@ axes.drawOne = function(gd, ax, opts) {
         });
     }
 
-    // stash tickLabels selection, so that drawTitle can use it
-    // to scoot title w/o having to query the axis layer again
-    //
-    // TODO? Stash this per class?
-    ax._tickLabels = null;
-
     var seq = [];
 
     // tick labels - for now just the main labels.
@@ -2216,6 +2214,7 @@ axes.drawZeroLine = function(gd, ax, opts) {
  *  - {string} _id
  *  - {boolean} showticklabels
  *  - {number} tickangle
+ *  - {object (optional)} _selections
  * @param {object} opts
  * - {array of object} vals (calcTicks output-like)
  * - {d3 selection} layer
@@ -2273,8 +2272,6 @@ axes.drawLabels = function(gd, ax, opts) {
 
     tickLabels.exit().remove();
 
-    ax._tickLabels = tickLabels;
-
     // TODO ??
     if(isAngular(ax)) {
         tickLabels.each(function(d) {
@@ -2422,32 +2419,25 @@ axes.drawLabels = function(gd, ax, opts) {
         }
     }
 
+    if(ax._selections) {
+        ax._selections[cls] = tickLabels;
+    }
+
     var done = Lib.syncOrAsync([allLabelsReady, fixLabelOverlaps]);
     if(done && done.then) gd._promises.push(done);
     return done;
 };
 
+function drawTitle(gd, ax) {
 axes.drawTitle = function(gd, ax) {
     var fullLayout = gd._fullLayout;
-    var tickLabels = ax._tickLabels;
-
-    var avoid = {
-        selection: tickLabels,
-        side: ax.side
-    };
-
     var axId = ax._id;
     var axLetter = axId.charAt(0);
     var offsetBase = 1.5;
     var gs = fullLayout._size;
     var fontSize = ax.title.font.size;
 
     var transform, counterAxis, x, y;
-
-    if(tickLabels && tickLabels.node() && tickLabels.node().parentNode) {
-        var translation = Drawing.getTranslate(tickLabels.node().parentNode);
-        avoid.offsetLeft = translation.x;
-        avoid.offsetTop = translation.y;
     }
 
     var titleStandoff = 10 + fontSize * offsetBase +
@@ -2467,8 +2457,6 @@ axes.drawTitle = function(gd, ax) {
                 fontSize * (ax.showticklabels ? 1.5 : 0.5);
         }
         y += counterAxis._offset;
-
-        if(!avoid.side) avoid.side = 'bottom';
     }
     else {
         counterAxis = (ax.anchor === 'free') ?
@@ -2485,7 +2473,23 @@ axes.drawTitle = function(gd, ax) {
         x += counterAxis._offset;
 
         transform = {rotate: '-90', offset: 0};
-        if(!avoid.side) avoid.side = 'left';
+    }
+
+    var avoid;
+
+    if(ax.type !== 'multicategory') {
+        var tickLabels = ax._selections[ax._id + 'tick'];
+
+        avoid = {
+            selection: tickLabels,
+            side: ax.side
+        };
+
+        if(tickLabels && tickLabels.node() && tickLabels.node().parentNode) {
+            var translation = Drawing.getTranslate(tickLabels.node().parentNode);
+            avoid.offsetLeft = translation.x;
+            avoid.offsetTop = translation.y;
+        }
     }
 
     Titles.draw(gd, axId + 'title', {
