shift multi-line <tspan> in common hovermode:'y' hover label

... so that each start-of-line is always visible.

Author: etpinard

src/components/fx/hover.js

@@ -772,18 +772,19 @@ function createHoverText(hoverData, opts, gd) {
         var commonBgColor = commonLabelOpts.bgcolor || Color.defaultLine;
         var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor);
         var contrastColor = Color.contrast(commonBgColor);
+        var commonLabelFont = {
+            family: commonLabelOpts.font.family || fontFamily,
+            size: commonLabelOpts.font.size || fontSize,
+            color: commonLabelOpts.font.color || contrastColor
+        };
 
         lpath.style({
             fill: commonBgColor,
             stroke: commonStroke
         });
 
         ltext.text(t0)
-            .call(Drawing.font,
-                commonLabelOpts.font.family || fontFamily,
-                commonLabelOpts.font.size || fontSize,
-                commonLabelOpts.font.color || contrastColor
-             )
+            .call(Drawing.font, commonLabelFont)
             .call(svgTextUtils.positionText, 0, 0)
             .call(svgTextUtils.convertToTspans, gd);
 
@@ -861,23 +862,39 @@ function createHoverText(hoverData, opts, gd) {
                 'H' + leftsign + HOVERARROWSIZE + 'V-' + HOVERARROWSIZE + 'Z');
 
             var halfHeight = tbb.height / 2;
+            var lty = outerTop - tbb.top - halfHeight;
             var clipId = 'clip' + fullLayout._uid + 'commonlabel' + ya._id;
             var clipPath;
-            var ltx;
 
             if(lx < (tbb.width + 2 * HOVERTEXTPAD + HOVERARROWSIZE)) {
-                ltx = tbb.width - lx + HOVERTEXTPAD;
                 clipPath = 'M-' + (HOVERARROWSIZE + HOVERTEXTPAD) + '-' + halfHeight +
                     'h-' + (tbb.width - HOVERTEXTPAD) +
                     'V' + halfHeight +
                     'h' + (tbb.width - HOVERTEXTPAD) + 'Z';
+
+                var ltx = tbb.width - lx + HOVERTEXTPAD;
+                svgTextUtils.positionText(ltext, ltx, lty);
+
+                // shift each line (except the longest) so that start-of-line
+                // is always visible
+                if(anchor === 'end') {
+                    ltext.selectAll('tspan').each(function() {
+                        var s = d3.select(this);
+                        var dummy = Drawing.tester.append('text')
+                            .text(s.text())
+                            .call(Drawing.font, commonLabelFont);
+                        var dummyBB = dummy.node().getBoundingClientRect();
+                        if(dummyBB.width < tbb.width) {
+                            s.attr('x', ltx - dummyBB.width);
+                        }
+                        dummy.remove();
+                    });
+                }
             } else {
-                ltx = sgn * (HOVERTEXTPAD + HOVERARROWSIZE);
+                svgTextUtils.positionText(ltext, sgn * (HOVERTEXTPAD + HOVERARROWSIZE), lty);
                 clipPath = null;
             }
 
-            svgTextUtils.positionText(ltext, ltx, outerTop - tbb.top - halfHeight);
-
             var textClip = fullLayout._topclips.selectAll('#' + clipId).data(clipPath ? [0] : []);
             textClip.enter().append('clipPath').attr('id', clipId).append('path');
             textClip.exit().remove();

test/jasmine/tests/hover_label_test.js

@@ -1767,6 +1767,18 @@ describe('hover info', function() {
                         var clipId = 'clip' + fullLayout._uid + 'commonlabely';
                         var clipPath = d3.select('#' + clipId);
                         negateIf(exp.clip, expect(clipPath.node())).toBe(null, 'text clip path|' + msg);
+
+                        if(exp.tspanX) {
+                            var tspans = label.selectAll('tspan');
+                            if(tspans.size()) {
+                                tspans.each(function(d, i) {
+                                    var s = d3.select(this);
+                                    expect(s.attr('x')).toBeWithin(exp.tspanX[i], 5, i + '- tspan shift| ' + msg);
+                                });
+                            } else {
+                                fail('fail to generate tspans in hover label');
+                            }
+                        }
                     } else {
                         fail('fail to generate common hover label');
                     }
@@ -1790,6 +1802,18 @@ describe('hover info', function() {
             .then(_assert('on way long label', {txt: 'Waay loooong label', clip: true, ltx: 38}))
             .then(_hoverA)
             .then(_assert('on "a" label', {txt: 'a', clip: false, ltx: -9}))
+            .then(function() {
+                return Plotly.restyle(gd, {
+                    y: [['Looong label', 'Loooooger label', 'SHORT!<br>Waay loooong label', 'a']]
+                });
+            })
+            .then(_hoverWayLong)
+            .then(_assert('on way long label (multi-line case)', {
+                txt: 'SHORT!Waay loooong label',
+                clip: true,
+                ltx: 38,
+                tspanX: [-11, 38]
+            }))
             .catch(failTest)
             .then(done);
         });