unified hoverlabel: fix position to fit on screen

antoinerg · antoinerg · commit 903cefc957a1 · 2020-03-03T15:10:01.000-05:00
diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
@@ -924,15 +924,15 @@ function createHoverText(hoverData, opts, gd) {
 
     // Show a single hover label
     if(['xunified', 'yunified'].indexOf(hovermode) !== -1) {
-        // similarly to compare mode, we remove the "close but not quite" points
+        // similarly to compare mode, we remove the "close but not quite together" points
         hoverData = filterClosePoints(hoverData);
         var mockLayoutIn = {
             showlegend: true,
             legend: {
                 title: {text: t0},
-                bgcolor: '#fff',
-                borderwidth: 1,
-                bordercolor: '#aaa'
+                bgcolor: '#fff', // TODO: use layout.hoverlabel.bg or layout.paper_bgcolor
+                borderwidth: 1, // TODO: use default or 1
+                bordercolor: '#aaa' // TODO: use default
             }
         };
         var mockLayoutOut = {};
@@ -958,6 +958,29 @@ function createHoverText(hoverData, opts, gd) {
         var tbb = legendContainer.node().getBoundingClientRect();
         lx += xa._offset;
         ly += ya._offset - tbb.height / 2;
+
+        // Change horizontal alignment to end up on screen
+        var txWidth = tbb.width + 2 * HOVERTEXTPAD;
+        var anchorStartOK = lx + txWidth <= outerWidth;
+        var anchorEndOK = lx - txWidth >= 0;
+        if(!anchorStartOK && anchorEndOK) {
+            lx -= txWidth;
+        } else {
+            lx += 2 * HOVERTEXTPAD;
+        }
+
+        // Change vertical alignement to end up on screen
+        var txHeight = tbb.height + 2 * HOVERTEXTPAD;
+        var overflowTop = ly <= outerTop;
+        var overflowBottom = ly + txHeight >= outerHeight;
+        var canFit = txHeight <= outerHeight;
+        if(canFit) {
+            if(overflowTop) {
+                ly = outerTop - tbb.top + 2 * HOVERTEXTPAD;
+            } else if(overflowBottom) {
+                ly = outerHeight - txHeight;
+            }
+        }
         legendContainer.attr('transform', 'translate(' + lx + ',' + ly + ')');
 
         return legendContainer;
@@ -1180,6 +1203,7 @@ function getHoverLabelText(d, showCommonLabel, hovermode, fullLayout, t0, g) {
     }
     return [text, name];
 }
+
 // Make groups of touching points, and within each group
 // move each point so that no labels overlap, but the average
 // label position is the same as it was before moving. Indicentally,
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
@@ -159,7 +159,7 @@ module.exports = function draw(gd, layer, opts) {
             scrollBar.on('.drag', null);
             legend.on('wheel', null);
 
-            if(opts._height <= opts._maxHeight || gd._context.staticPlot) {
+            if(!main || opts._height <= opts._maxHeight || gd._context.staticPlot) {
                 // if scrollbar should not be shown.
                 bg.attr({
                     width: opts._width - bw,
diff --git a/test/image/baselines/hovermode_xunified.png b/test/image/baselines/hovermode_xunified.png
diff --git a/test/image/mocks/hovermode_xunified.json b/test/image/mocks/hovermode_xunified.json
@@ -1,57 +1,42 @@
 {
   "data": [
     {
-      "x": [
-        0,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        7,
-        8
-      ],
       "y": [
         0,
         3,
         6,
         4,
-        5,
+        10,
         2,
         3,
         5,
-        4
+        4,
+        0,
+        5
       ],
       "type": "scatter"
     },
     {
-      "x": [
-        0,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        7,
-        8
-      ],
       "y": [
         0,
         4,
         7,
         8,
-        3,
+        10,
         6,
         3,
         3,
-        4
+        4,
+        0,
+        5
       ],
       "type": "scatter"
     }
   ],
   "layout": {
+    "margin": {"t": 0, "l": 0, "r": 0, "b": 0},
+    "xaxis": {"range": [0, 10]},
+    "yaxis": {"range": [0, 10]},
     "showlegend": false,
     "hovermode": "xunified"
   }
