Merge pull request #673 from plotly/hoveron-fill

Hover on fills

Author: alexcjohnson

src/lib/coerce.js

@@ -192,7 +192,7 @@ exports.valObjects = {
                 propOut.set(dflt);
                 return;
             }
-            if(opts.extras.indexOf(v) !== -1) {
+            if((opts.extras || []).indexOf(v) !== -1) {
                 propOut.set(v);
                 return;
             }

src/traces/scatter/attributes.js

@@ -92,6 +92,17 @@ module.exports = {
             'then the default is *lines+markers*. Otherwise, *lines*.'
         ].join(' ')
     },
+    hoveron: {
+        valType: 'flaglist',
+        flags: ['points', 'fills'],
+        role: 'info',
+        description: [
+            'Do the hover effects highlight individual points (markers or',
+            'line points) or do they highlight filled regions?',
+            'If the fill is *toself* or *tonext* and there are no markers',
+            'or text, then the default is *fills*, otherwise it is *points*.'
+        ].join(' ')
+    },
     line: {
         color: {
             valType: 'color',

src/traces/scatter/defaults.js

@@ -53,8 +53,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         handleTextDefaults(traceIn, traceOut, layout, coerce);
     }
 
+    var dfltHoverOn = [];
+
     if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) {
         coerce('marker.maxdisplayed');
+        dfltHoverOn.push('points');
     }
 
     coerce('fill');
@@ -63,6 +66,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         if(!subTypes.hasLines(traceOut)) handleLineShapeDefaults(traceIn, traceOut, coerce);
     }
 
+    if(traceOut.fill === 'tonext' || traceOut.fill === 'toself') {
+        dfltHoverOn.push('fills');
+    }
+    coerce('hoveron', dfltHoverOn.join('+') || 'points');
+
     errorBarsSupplyDefaults(traceIn, traceOut, defaultColor, {axis: 'y'});
     errorBarsSupplyDefaults(traceIn, traceOut, defaultColor, {axis: 'x', inherit: 'y'});
 };

src/traces/scatter/hover.js

@@ -9,61 +9,150 @@
 
 'use strict';
 
+var Lib = require('../../lib');
 var Fx = require('../../plots/cartesian/graph_interact');
+var constants = require('../../plots/cartesian/constants');
 var ErrorBars = require('../../components/errorbars');
 var getTraceColor = require('./get_trace_color');
+var Color = require('../../components/color');
 
 
 module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var cd = pointData.cd,
         trace = cd[0].trace,
         xa = pointData.xa,
         ya = pointData.ya,
-        dx = function(di) {
-            // scatter points: d.mrc is the calculated marker radius
-            // adjust the distance so if you're inside the marker it
-            // always will show up regardless of point size, but
-            // prioritize smaller points
-            var rad = Math.max(3, di.mrc || 0);
-            return Math.max(Math.abs(xa.c2p(di.x) - xa.c2p(xval)) - rad, 1 - 3 / rad);
-        },
-        dy = function(di) {
-            var rad = Math.max(3, di.mrc || 0);
-            return Math.max(Math.abs(ya.c2p(di.y) - ya.c2p(yval)) - rad, 1 - 3 / rad);
-        },
-        dxy = function(di) {
-            var rad = Math.max(3, di.mrc || 0),
-                dx = Math.abs(xa.c2p(di.x) - xa.c2p(xval)),
-                dy = Math.abs(ya.c2p(di.y) - ya.c2p(yval));
-            return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
-        },
-        distfn = Fx.getDistanceFunction(hovermode, dx, dy, dxy);
-
-    Fx.getClosest(cd, distfn, pointData);
-
-    // skip the rest (for this trace) if we didn't find a close point
-    if(pointData.index === false) return;
-
-    // the closest data point
-    var di = cd[pointData.index],
-        xc = xa.c2p(di.x, true),
-        yc = ya.c2p(di.y, true),
-        rad = di.mrc || 1;
-
-    pointData.color = getTraceColor(trace, di);
-
-    pointData.x0 = xc - rad;
-    pointData.x1 = xc + rad;
-    pointData.xLabelVal = di.x;
-
-    pointData.y0 = yc - rad;
-    pointData.y1 = yc + rad;
-    pointData.yLabelVal = di.y;
-
-    if(di.tx) pointData.text = di.tx;
-    else if(trace.text) pointData.text = trace.text;
-
-    ErrorBars.hoverInfo(di, trace, pointData);
-
-    return [pointData];
+        xpx = xa.c2p(xval),
+        ypx = ya.c2p(yval),
+        pt = [xpx, ypx];
+
+    // look for points to hover on first, then take fills only if we
+    // didn't find a point
+    if(trace.hoveron.indexOf('points') !== -1) {
+        var dx = function(di) {
+                // scatter points: d.mrc is the calculated marker radius
+                // adjust the distance so if you're inside the marker it
+                // always will show up regardless of point size, but
+                // prioritize smaller points
+                var rad = Math.max(3, di.mrc || 0);
+                return Math.max(Math.abs(xa.c2p(di.x) - xpx) - rad, 1 - 3 / rad);
+            },
+            dy = function(di) {
+                var rad = Math.max(3, di.mrc || 0);
+                return Math.max(Math.abs(ya.c2p(di.y) - ypx) - rad, 1 - 3 / rad);
+            },
+            dxy = function(di) {
+                var rad = Math.max(3, di.mrc || 0),
+                    dx = xa.c2p(di.x) - xpx,
+                    dy = ya.c2p(di.y) - ypx;
+                return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
+            },
+            distfn = Fx.getDistanceFunction(hovermode, dx, dy, dxy);
+
+        Fx.getClosest(cd, distfn, pointData);
+
+        // skip the rest (for this trace) if we didn't find a close point
+        if(pointData.index !== false) {
+
+            // the closest data point
+            var di = cd[pointData.index],
+                xc = xa.c2p(di.x, true),
+                yc = ya.c2p(di.y, true),
+                rad = di.mrc || 1;
+
+            Lib.extendFlat(pointData, {
+                color: getTraceColor(trace, di),
+
+                x0: xc - rad,
+                x1: xc + rad,
+                xLabelVal: di.x,
+
+                y0: yc - rad,
+                y1: yc + rad,
+                yLabelVal: di.y
+            });
+
+            if(di.tx) pointData.text = di.tx;
+            else if(trace.text) pointData.text = trace.text;
+
+            ErrorBars.hoverInfo(di, trace, pointData);
+
+            return [pointData];
+        }
+    }
+
+    // even if hoveron is 'fills', only use it if we have polygons too
+    if(trace.hoveron.indexOf('fills') !== -1 && trace._polygons) {
+        var polygons = trace._polygons,
+            polygonsIn = [],
+            inside = false,
+            xmin = Infinity,
+            xmax = -Infinity,
+            ymin = Infinity,
+            ymax = -Infinity,
+            i, j, polygon, pts, xCross, x0, x1, y0, y1;
+
+        for(i = 0; i < polygons.length; i++) {
+            polygon = polygons[i];
+            // TODO: this is not going to work right for curved edges, it will
+            // act as though they're straight. That's probably going to need
+            // the elements themselves to capture the events. Worth it?
+            if(polygon.contains(pt)) {
+                inside = !inside;
+                // TODO: need better than just the overall bounding box
+                polygonsIn.push(polygon);
+                ymin = Math.min(ymin, polygon.ymin);
+                ymax = Math.max(ymax, polygon.ymax);
+            }
+        }
+
+        if(inside) {
+            // find the overall left-most and right-most points of the
+            // polygon(s) we're inside at their combined vertical midpoint.
+            // This is where we will draw the hover label.
+            // Note that this might not be the vertical midpoint of the
+            // whole trace, if it's disjoint.
+            var yAvg = (ymin + ymax) / 2;
+            for(i = 0; i < polygonsIn.length; i++) {
+                pts = polygonsIn[i].pts;
+                for(j = 1; j < pts.length; j++) {
+                    y0 = pts[j - 1][1];
+                    y1 = pts[j][1];
+                    if((y0 > yAvg) !== (y1 >= yAvg)) {
+                        x0 = pts[j - 1][0];
+                        x1 = pts[j][0];
+                        xCross = x0 + (x1 - x0) * (yAvg - y0) / (y1 - y0);
+                        xmin = Math.min(xmin, xCross);
+                        xmax = Math.max(xmax, xCross);
+                    }
+                }
+            }
+
+            // get only fill or line color for the hover color
+            var color = Color.defaultLine;
+            if(Color.opacity(trace.fillcolor)) color = trace.fillcolor;
+            else if(Color.opacity((trace.line || {}).color)) {
+                color = trace.line.color;
+            }
+
+            Lib.extendFlat(pointData, {
+                // never let a 2D override 1D type as closest point
+                distance: constants.MAXDIST + 10,
+                x0: xmin,
+                x1: xmax,
+                y0: yAvg,
+                y1: yAvg,
+                color: color
+            });
+
+            delete pointData.index;
+
+            if(trace.text && !Array.isArray(trace.text)) {
+                pointData.text = String(trace.text);
+            }
+            else pointData.text = trace.name;
+
+            return [pointData];
+        }
+    }
 };

src/traces/scatter/plot.js

@@ -15,6 +15,8 @@ var Lib = require('../../lib');
 var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
+var polygonTester = require('../../lib/polygon').tester;
+
 var subTypes = require('./subtypes');
 var arraysToCalcdata = require('./arrays_to_calcdata');
 var linePoints = require('./line_points');
@@ -41,6 +43,7 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
 
     // BUILD LINES AND FILLS
     var prevpath = '',
+        prevPolygons = [],
         ownFillEl3, ownFillDir, tonext, nexttonext;
 
     scattertraces.each(function(d) {
@@ -125,12 +128,23 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
             linear: line.shape === 'linear'
         });
 
+        // since we already have the pixel segments here, use them to make
+        // polygons for hover on fill
+        // TODO: can we skip this if hoveron!=fills? That would mean we
+        // need to redraw when you change hoveron...
+        var thisPolygons = trace._polygons = new Array(segments.length),
+            i;
+
+        for(i = 0; i < segments.length; i++) {
+            trace._polygons[i] = polygonTester(segments[i]);
+        }
+
         if(segments.length) {
             var pt0 = segments[0][0],
                 lastSegment = segments[segments.length - 1],
                 pt1 = lastSegment[lastSegment.length - 1];
 
-            for(var i = 0; i < segments.length; i++) {
+            for(i = 0; i < segments.length; i++) {
                 var pts = segments[i];
                 thispath = pathfn(pts);
                 thisrevpath = revpathfn(pts);
@@ -185,8 +199,10 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
                     // existing curve or off the end of it
                     tonext.attr('d', fullpath + 'L' + prevpath.substr(1) + 'Z');
                 }
+                trace._polygons = trace._polygons.concat(prevPolygons);
             }
             prevpath = revpath;
+            prevPolygons = thisPolygons;
         }
     });
 

src/traces/scatterternary/attributes.js

@@ -117,6 +117,7 @@ module.exports = {
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         flags: ['a', 'b', 'c', 'text', 'name']
     }),
+    hoveron: scatterAttrs.hoveron,
     _nestedModules: {
         'marker.colorbar': 'Colorbar'
     }

src/traces/scatterternary/defaults.js

@@ -81,8 +81,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         handleTextDefaults(traceIn, traceOut, layout, coerce);
     }
 
+    var dfltHoverOn = [];
+
     if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) {
         coerce('marker.maxdisplayed');
+        dfltHoverOn.push('points');
     }
 
     coerce('fill');
@@ -92,4 +95,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('hoverinfo', (layout._dataLength === 1) ? 'a+b+c+text' : undefined);
+
+    if(traceOut.fill === 'tonext' || traceOut.fill === 'toself') {
+        dfltHoverOn.push('fills');
+    }
+    coerce('hoveron', dfltHoverOn.join('+') || 'points');
 };

src/traces/scatterternary/hover.js

@@ -17,6 +17,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var scatterPointData = scatterHover(pointData, xval, yval, hovermode);
     if(!scatterPointData || scatterPointData[0].index === false) return;
 
+    // if hovering on a fill, we don't show any point data so the label is
+    // unchanged from what scatter gives us.
+    if(scatterPointData[0].index === undefined) return scatterPointData;
+
     var newPointData = scatterPointData[0],
         cdi = newPointData.cd[newPointData.index];
 

test/jasmine/assets/create_graph_div.js

@@ -4,5 +4,11 @@ module.exports = function createGraphDiv() {
     var gd = document.createElement('div');
     gd.id = 'graph';
     document.body.appendChild(gd);
+
+    // force the graph to be at position 0,0 no matter what
+    gd.style.position = 'fixed';
+    gd.style.left = 0;
+    gd.style.top = 0;
+
     return gd;
 };