implement hoverlabel.align to loneHover traces

Author: etpinard

src/components/fx/hover.js

@@ -125,6 +125,7 @@ exports.loneHover = function loneHover(hoverItem, opts) {
         fontSize: hoverItem.fontSize,
         fontColor: hoverItem.fontColor,
         nameLength: hoverItem.nameLength,
+        textAlign: hoverItem.textAlign,
 
         // filler to make createHoverText happy
         trace: hoverItem.trace || {
@@ -182,6 +183,7 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
             fontSize: hoverItem.fontSize,
             fontColor: hoverItem.fontColor,
             nameLength: hoverItem.nameLength,
+            textAlign: hoverItem.textAlign,
 
             // filler to make createHoverText happy
             trace: hoverItem.trace || {

src/plots/gl2d/scene2d.js

@@ -687,7 +687,8 @@ proto.draw = function() {
                     fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
                     fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
                     fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
-                    nameLength: Fx.castHoverOption(trace, ptNumber, 'namelength')
+                    nameLength: Fx.castHoverOption(trace, ptNumber, 'namelength'),
+                    textAlign: Fx.castHoverOption(trace, ptNumber, 'align')
                 }, {
                     container: this.svgContainer,
                     gd: this.graphDiv

src/plots/gl3d/scene.js

@@ -170,6 +170,7 @@ function render(scene) {
                 fontSize: Fx.castHoverOption(traceNow, ptNumber, 'font.size'),
                 fontColor: Fx.castHoverOption(traceNow, ptNumber, 'font.color'),
                 nameLength: Fx.castHoverOption(traceNow, ptNumber, 'namelength'),
+                textAlign: Fx.castHoverOption(traceNow, ptNumber, 'align'),
                 hovertemplate: Lib.castOption(traceNow, ptNumber, 'hovertemplate'),
                 hovertemplateLabels: Lib.extendFlat({}, pointData, labels),
                 eventData: [pointData]

src/traces/pie/plot.js

@@ -380,6 +380,7 @@ function attachFxHandlers(sliceTop, gd, cd) {
                 fontSize: helpers.castOption(hoverFont.size, pt.pts),
                 fontColor: helpers.castOption(hoverFont.color, pt.pts),
                 nameLength: helpers.castOption(hoverLabel.namelength, pt.pts),
+                textAlign: helpers.castOption(hoverLabel.align, pt.pts),
                 hovertemplate: helpers.castOption(trace2.hovertemplate, pt.pts),
                 hovertemplateLabels: pt,
                 eventData: [eventData(pt, trace2)]

src/traces/sankey/plot.js

@@ -212,6 +212,7 @@ module.exports = function plot(gd, calcData) {
                 fontSize: castHoverOption(obj, 'font.size'),
                 fontColor: castHoverOption(obj, 'font.color'),
                 nameLength: castHoverOption(obj, 'namelength'),
+                textAlign: castHoverOption(obj, 'align'),
                 idealAlign: d3.event.x < hoverCenter[0] ? 'right' : 'left',
 
                 hovertemplate: obj.hovertemplate,
@@ -301,6 +302,7 @@ module.exports = function plot(gd, calcData) {
             fontSize: castHoverOption(obj, 'font.size'),
             fontColor: castHoverOption(obj, 'font.color'),
             nameLength: castHoverOption(obj, 'namelength'),
+            textAlign: castHoverOption(obj, 'align'),
             idealAlign: 'left',
 
             hovertemplate: obj.hovertemplate,

src/traces/sunburst/plot.js

@@ -594,6 +594,7 @@ function attachFxHandlers(sliceTop, gd, cd) {
                 fontSize: _cast('hoverlabel.font.size'),
                 fontColor: _cast('hoverlabel.font.color'),
                 nameLength: _cast('hoverlabel.namelength'),
+                textAlign: _cast('hoverlabel.align'),
                 hovertemplate: hovertemplate,
                 hovertemplateLabels: hoverPt,
                 eventData: [makeEventData(pt, traceNow)]

test/jasmine/tests/pie_test.js

@@ -1187,6 +1187,61 @@ describe('pie hovering', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should honor *hoverlabel.align*', function(done) {
+            function _assert(msg, exp) {
+                var tx = d3.select('g.hovertext').select('text');
+                expect(tx.attr('text-anchor')).toBe(exp.textAnchor, 'text anchor|' + msg);
+                expect(Number(tx.attr('x'))).toBeCloseTo(exp.posX, 2, 'x position|' + msg);
+            }
+
+            function _hoverLeft() {
+                mouseEvent('mouseover', 100, 200);
+                Lib.clearThrottle();
+            }
+
+            function _hoverRight() {
+                mouseEvent('mouseover', 300, 200);
+                Lib.clearThrottle();
+            }
+
+            Plotly.plot(gd, [{
+                type: 'pie',
+                labels: ['a', 'b']
+            }], {
+                showlegend: false,
+                margin: {l: 0, t: 0, b: 0, r: 0},
+                width: 400,
+                height: 400
+            })
+            .then(_hoverLeft)
+            .then(function() { _assert('base left sector', {textAnchor: 'start', posX: 9}); })
+            .then(_hoverRight)
+            .then(function() { _assert('base right sector', {textAnchor: 'end', posX: -9}); })
+            .then(function() {
+                return Plotly.relayout(gd, 'hoverlabel.align', 'left');
+            })
+            .then(_hoverLeft)
+            .then(function() { _assert('align:left left sector', {textAnchor: 'start', posX: 9}); })
+            .then(_hoverRight)
+            .then(function() { _assert('align:left right sector', {textAnchor: 'start', posX: -37.45}); })
+            .then(function() {
+                return Plotly.restyle(gd, 'hoverlabel.align', 'right');
+            })
+            .then(_hoverLeft)
+            .then(function() { _assert('align:right left sector', {textAnchor: 'end', posX: 37.45}); })
+            .then(_hoverRight)
+            .then(function() { _assert('align:right right sector', {textAnchor: 'end', posX: -9}); })
+            .then(function() {
+                return Plotly.restyle(gd, 'hoverlabel.align', [['left', 'right']]);
+            })
+            .then(_hoverLeft)
+            .then(function() { _assert('arrayOk align:right left sector', {textAnchor: 'end', posX: 37.45}); })
+            .then(_hoverRight)
+            .then(function() { _assert('arrayOk align:left right sector', {textAnchor: 'start', posX: -37.45}); })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('should fit labels within graph div', function() {