fix scattermapbox hover & selection for 180 < lon < 360

Author: etpinard

src/traces/scattermapbox/hover.js

@@ -10,32 +10,40 @@
 'use strict';
 
 var Fx = require('../../components/fx');
+var Lib = require('../../lib');
 var getTraceColor = require('../scatter/get_trace_color');
 var fillHoverText = require('../scatter/fill_hover_text');
 var BADNUM = require('../../constants/numerical').BADNUM;
 
 module.exports = function hoverPoints(pointData, xval, yval) {
-    var cd = pointData.cd,
-        trace = cd[0].trace,
-        xa = pointData.xa,
-        ya = pointData.ya;
+    var cd = pointData.cd;
+    var trace = cd[0].trace;
+    var xa = pointData.xa;
+    var ya = pointData.ya;
+    var subplot = pointData.subplot;
 
     // compute winding number about [-180, 180] globe
     var winding = (xval >= 0) ?
-            Math.floor((xval + 180) / 360) :
-            Math.ceil((xval - 180) / 360);
+        Math.floor((xval + 180) / 360) :
+        Math.ceil((xval - 180) / 360);
 
     // shift longitude to [-180, 180] to determine closest point
     var lonShift = winding * 360;
     var xval2 = xval - lonShift;
 
+    function wrapLon(lon) {
+        return Lib.wrap180(lon);
+    }
+
     function distFn(d) {
         var lonlat = d.lonlat;
-
         if(lonlat[0] === BADNUM) return Infinity;
 
-        var dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]]));
-        var dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval]));
+        var lon = wrapLon(lonlat[0]);
+        var lat = lonlat[1];
+        var pt = subplot.project([lon, lat]);
+        var dx = pt.x - xa.c2p([xval2, lat]);
+        var dy = pt.y - ya.c2p([lon, yval]);
         var rad = Math.max(3, d.mrc || 0);
 
         return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
@@ -46,14 +54,14 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     // skip the rest (for this trace) if we didn't find a close point
     if(pointData.index === false) return;
 
-    var di = cd[pointData.index],
-        lonlat = di.lonlat,
-        lonlatShifted = [lonlat[0] + lonShift, lonlat[1]];
+    var di = cd[pointData.index];
+    var lonlat = di.lonlat;
+    var lonlatShifted = [wrapLon(lonlat[0]) + lonShift, lonlat[1]];
 
     // shift labels back to original winded globe
-    var xc = xa.c2p(lonlatShifted),
-        yc = ya.c2p(lonlatShifted),
-        rad = di.mrc || 1;
+    var xc = xa.c2p(lonlatShifted);
+    var yc = ya.c2p(lonlatShifted);
+    var rad = di.mrc || 1;
 
     pointData.x0 = xc - rad;
     pointData.x1 = xc + rad;
@@ -72,7 +80,6 @@ function getExtraText(trace, di, labels) {
     var isAll = parts.indexOf('all') !== -1;
     var hasLon = parts.indexOf('lon') !== -1;
     var hasLat = parts.indexOf('lat') !== -1;
-
     var lonlat = di.lonlat;
     var text = [];
 

src/traces/scattermapbox/select.js

@@ -6,9 +6,9 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
+var Lib = require('../../lib');
 var subtypes = require('../scatter/subtypes');
 
 module.exports = function selectPoints(searchInfo, polygon) {
@@ -17,8 +17,7 @@ module.exports = function selectPoints(searchInfo, polygon) {
     var ya = searchInfo.yaxis;
     var selection = [];
     var trace = cd[0].trace;
-
-    var di, lonlat, x, y, i;
+    var i;
 
     if(!subtypes.hasMarkers(trace)) return [];
 
@@ -28,12 +27,12 @@ module.exports = function selectPoints(searchInfo, polygon) {
         }
     } else {
         for(i = 0; i < cd.length; i++) {
-            di = cd[i];
-            lonlat = di.lonlat;
-            x = xa.c2p(lonlat);
-            y = ya.c2p(lonlat);
+            var di = cd[i];
+            var lonlat = di.lonlat;
+            var lonlat2 = [Lib.wrap180(lonlat[0]), lonlat[1]];
+            var xy = [xa.c2p(lonlat2), ya.c2p(lonlat2)];
 
-            if(polygon.contains([x, y])) {
+            if(polygon.contains(xy)) {
                 selection.push({
                     pointNumber: i,
                     lon: lonlat[0],

test/jasmine/tests/scattermapbox_test.js

@@ -417,10 +417,7 @@ describe('scattermapbox convert', function() {
 });
 
 describe('@noCI scattermapbox hover', function() {
-    'use strict';
-
     var hoverPoints = ScatterMapbox.hoverPoints;
-
     var gd;
 
     beforeAll(function(done) {
@@ -432,9 +429,9 @@ describe('@noCI scattermapbox hover', function() {
 
         var data = [{
             type: 'scattermapbox',
-            lon: [10, 20, 30],
-            lat: [10, 20, 30],
-            text: ['A', 'B', 'C']
+            lon: [10, 20, 30, 300],
+            lat: [10, 20, 30, 10],
+            text: ['A', 'B', 'C', 'D']
         }];
 
         Plotly.plot(gd, data, { autosize: true }).then(done);
@@ -446,16 +443,17 @@ describe('@noCI scattermapbox hover', function() {
     });
 
     function getPointData(gd) {
-        var cd = gd.calcdata,
-            mapbox = gd._fullLayout.mapbox._subplot;
+        var cd = gd.calcdata;
+        var subplot = gd._fullLayout.mapbox._subplot;
 
         return {
             index: false,
             distance: 20,
             cd: cd[0],
             trace: cd[0][0].trace,
-            xa: mapbox.xaxis,
-            ya: mapbox.yaxis
+            subplot: subplot,
+            xa: subplot.xaxis,
+            ya: subplot.yaxis
         };
     }
 
@@ -473,6 +471,19 @@ describe('@noCI scattermapbox hover', function() {
         expect(out.color).toEqual('#1f77b4');
     });
 
+    it('should generate hover label info (lon > 180 case)', function() {
+        var xval = 301;
+        var yval = 11;
+        var out = hoverPoints(getPointData(gd), xval, yval)[0];
+
+        expect(out.index).toEqual(3);
+        expect([out.x0, out.x1, out.y0, out.y1]).toBeCloseToArray([
+            1122.33, 1124.33, 105.41, 107.41
+        ]);
+        expect(out.extraText).toEqual('(300°, 10°)<br>D');
+        expect(out.color).toEqual('#1f77b4');
+    });
+
     it('should skip over blank and non-string text items', function(done) {
         var xval = 11,
             yval = 11,