Merge pull request #3764 from plotly/dry-hover

DRY loneHover routine

Author: antoinerg

src/components/fx/hover.js

@@ -77,7 +77,7 @@ exports.hover = function hover(gd, evt, subplot, noHoverEvent) {
 };
 
 /*
- * Draw a single hover item in a pre-existing svg container somewhere
+ * Draw a single hover item or an array of hover item in a pre-existing svg container somewhere
  * hoverItem should have keys:
  *    - x and y (or x0, x1, y0, and y1):
  *      the pixel position to mark, relative to opts.container
@@ -104,62 +104,15 @@ exports.hover = function hover(gd, evt, subplot, noHoverEvent) {
  *    - outerContainer:
  *      normally a parent of `container`, sets the bounding box to use to
  *      constrain the hover label and determine whether to show it on the left or right
+ * opts can have optional keys:
+ *    - anchorIndex:
+        the index of the hover item used as an anchor for positioning.
+        The other hover items will be pushed up or down to prevent overlap.
  */
-exports.loneHover = function loneHover(hoverItem, opts) {
-    var pointData = {
-        color: hoverItem.color || Color.defaultLine,
-        x0: hoverItem.x0 || hoverItem.x || 0,
-        x1: hoverItem.x1 || hoverItem.x || 0,
-        y0: hoverItem.y0 || hoverItem.y || 0,
-        y1: hoverItem.y1 || hoverItem.y || 0,
-        xLabel: hoverItem.xLabel,
-        yLabel: hoverItem.yLabel,
-        zLabel: hoverItem.zLabel,
-        text: hoverItem.text,
-        name: hoverItem.name,
-        idealAlign: hoverItem.idealAlign,
-
-        // optional extra bits of styling
-        borderColor: hoverItem.borderColor,
-        fontFamily: hoverItem.fontFamily,
-        fontSize: hoverItem.fontSize,
-        fontColor: hoverItem.fontColor,
-        nameLength: hoverItem.nameLength,
-        textAlign: hoverItem.textAlign,
-
-        // filler to make createHoverText happy
-        trace: hoverItem.trace || {
-            index: 0,
-            hoverinfo: ''
-        },
-        xa: {_offset: 0},
-        ya: {_offset: 0},
-        index: 0,
-
-        hovertemplate: hoverItem.hovertemplate || false,
-        eventData: hoverItem.eventData || false,
-        hovertemplateLabels: hoverItem.hovertemplateLabels || false,
-    };
-
-    var container3 = d3.select(opts.container);
-    var outerContainer3 = opts.outerContainer ?
-        d3.select(opts.outerContainer) : container3;
-
-    var fullOpts = {
-        hovermode: 'closest',
-        rotateLabels: false,
-        bgColor: opts.bgColor || Color.background,
-        container: container3,
-        outerContainer: outerContainer3
-    };
-    var hoverLabel = createHoverText([pointData], fullOpts, opts.gd);
-    alignHoverText(hoverLabel, fullOpts.rotateLabels);
-
-    return hoverLabel.node();
-};
-
-exports.multiHovers = function multiHovers(hoverItems, opts) {
+exports.loneHover = function loneHover(hoverItems, opts) {
+    var multiHover = true;
     if(!Array.isArray(hoverItems)) {
+        multiHover = false;
         hoverItems = [hoverItems];
     }
 
@@ -200,7 +153,6 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
         };
     });
 
-
     var container3 = d3.select(opts.container);
     var outerContainer3 = opts.outerContainer ? d3.select(opts.outerContainer) : container3;
 
@@ -239,7 +191,7 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
 
     alignHoverText(hoverLabel, fullOpts.rotateLabels);
 
-    return hoverLabel;
+    return multiHover ? hoverLabel : hoverLabel.node();
 };
 
 // The actual implementation is here:

src/components/fx/index.js

@@ -46,7 +46,6 @@ module.exports = {
     unhover: dragElement.unhover,
 
     loneHover: hoverModule.loneHover,
-    multiHovers: hoverModule.multiHovers,
     loneUnhover: loneUnhover,
 
     click: require('./click')

src/traces/parcats/parcats.js

@@ -969,7 +969,7 @@ function mouseoverCategoryBand(bandViewModel) {
                 }
 
                 if(hoverItems) {
-                    Fx.multiHovers(hoverItems, {
+                    Fx.loneHover(hoverItems, {
                         container: fullLayout._hoverlayer.node(),
                         outerContainer: fullLayout._paper.node(),
                         gd: gd

src/traces/sankey/plot.js

@@ -221,7 +221,7 @@ module.exports = function plot(gd, calcData) {
             });
         }
 
-        var tooltips = Fx.multiHovers(hoverItems, {
+        var tooltips = Fx.loneHover(hoverItems, {
             container: fullLayout._hoverlayer.node(),
             outerContainer: fullLayout._paper.node(),
             gd: gd,