Transition scattermapbox trace type to new selection interface [1852]

Author: rmoestl

src/plots/mapbox/mapbox.js

@@ -15,6 +15,7 @@ var Fx = require('../../components/fx');
 var Lib = require('../../lib');
 var dragElement = require('../../components/dragelement');
 var prepSelect = require('../cartesian/select').prepSelect;
+var selectOnClick = require('../cartesian/select').selectOnClick;
 var constants = require('./constants');
 var layoutAttributes = require('./layout_attributes');
 var createMapboxLayer = require('./layers');
@@ -176,15 +177,6 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         Fx.hover(gd, evt, self.id);
     });
 
-    map.on('click', function(evt) {
-        // TODO: this does not support right-click. If we want to support it, we
-        // would likely need to change mapbox to use dragElement instead of straight
-        // mapbox event binding. Or perhaps better, make a simple wrapper with the
-        // right mousedown, mousemove, and mouseup handlers just for a left/right click
-        // pie would use this too.
-        Fx.click(gd, evt.originalEvent);
-    });
-
     function unhover() {
         Fx.loneUnhover(fullLayout._toppaper);
     }
@@ -221,11 +213,17 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         gd.emit('plotly_relayout', evtData);
     }
 
-    // define clear select on map creation, to keep one ref per map,
+    // define event handlers on map creation, to keep one ref per map,
     // so that map.on / map.off in updateFx works as expected
     self.clearSelect = function() {
         gd._fullLayout._zoomlayer.selectAll('.select-outline').remove();
     };
+
+    self.onClickInPan = function(evt) {
+        // TODO Add condition evaluating clickmode attr when it has been introduced
+        selectOnClick(gd, 1, evt.originalEvent, [self.xaxis], [self.yaxis], undefined, self.id);
+        Fx.click(gd, evt.originalEvent);
+    };
 };
 
 proto.updateMap = function(calcData, fullLayout, resolve, reject) {
@@ -404,10 +402,19 @@ proto.updateFx = function(fullLayout) {
         };
 
         dragElement.init(dragOptions);
+
+        map.off('click', self.onClickInPan);
     } else {
         map.dragPan.enable();
         map.off('zoomstart', self.clearSelect);
         self.div.onmousedown = null;
+
+        // TODO: this does not support right-click. If we want to support it, we
+        // would likely need to change mapbox to use dragElement instead of straight
+        // mapbox event binding. Or perhaps better, make a simple wrapper with the
+        // right mousedown, mousemove, and mouseup handlers just for a left/right click
+        // pie would use this too.
+        map.on('click', self.onClickInPan);
     }
 };
 

src/traces/scattermapbox/index.js

@@ -18,7 +18,8 @@ ScatterMapbox.calc = require('../scattergeo/calc');
 ScatterMapbox.plot = require('./plot');
 ScatterMapbox.hoverPoints = require('./hover');
 ScatterMapbox.eventData = require('./event_data');
-ScatterMapbox.selectPoints = require('./select');
+ScatterMapbox.getPointsIn = require('./select').getPointsIn;
+ScatterMapbox.toggleSelected = require('./select').toggleSelected;
 
 ScatterMapbox.style = function(_, cd) {
     if(cd) {

src/traces/scattermapbox/select.js

@@ -11,43 +11,66 @@
 var Lib = require('../../lib');
 var subtypes = require('../scatter/subtypes');
 var BADNUM = require('../../constants/numerical').BADNUM;
+var arrayRange = require('array-range');
 
-module.exports = function selectPoints(searchInfo, polygon) {
+exports.getPointsIn = function(searchInfo, polygon) {
+    var pointsIn = [];
     var cd = searchInfo.cd;
     var xa = searchInfo.xaxis;
     var ya = searchInfo.yaxis;
-    var selection = [];
     var trace = cd[0].trace;
     var i;
 
     if(!subtypes.hasMarkers(trace)) return [];
 
-    if(polygon === false) {
-        for(i = 0; i < cd.length; i++) {
-            cd[i].selected = 0;
-        }
-    } else {
-        for(i = 0; i < cd.length; i++) {
-            var di = cd[i];
-            var lonlat = di.lonlat;
-
-            if(lonlat[0] !== BADNUM) {
-                var lonlat2 = [Lib.wrap180(lonlat[0]), lonlat[1]];
-                var xy = [xa.c2p(lonlat2), ya.c2p(lonlat2)];
-
-                if(polygon.contains(xy)) {
-                    selection.push({
-                        pointNumber: i,
-                        lon: lonlat[0],
-                        lat: lonlat[1]
-                    });
-                    di.selected = 1;
-                } else {
-                    di.selected = 0;
-                }
+    for(i = 0; i < cd.length; i++) {
+        var di = cd[i];
+        var lonlat = di.lonlat;
+
+        if(lonlat[0] !== BADNUM) {
+            var lonlat2 = [Lib.wrap180(lonlat[0]), lonlat[1]];
+            var xy = [xa.c2p(lonlat2), ya.c2p(lonlat2)];
+
+            if(polygon.contains(xy)) {
+                pointsIn.push(i);
             }
         }
     }
 
+    return pointsIn;
+};
+
+exports.toggleSelected = function(searchInfo, selected, pointIds) {
+    var selection = [];
+    var cd = searchInfo.cd;
+    var modifyAll = !Array.isArray(pointIds);
+    var di;
+    var pointId;
+    var lonlat;
+    var i;
+
+    if(modifyAll) {
+        pointIds = arrayRange(cd.length);
+    }
+
+    // Mutate state
+    for(i = 0; i < pointIds.length; i++) {
+        pointId = pointIds[i];
+        cd[pointId].selected = selected ? 1 : 0;
+    }
+
+    // Compute selection array from internal state
+    for(i = 0; i < cd.length; i++) {
+        di = cd[i];
+        if(di.selected === 1) {
+            lonlat = di.lonlat;
+            selection.push({
+                pointNumber: i,
+                lon: lonlat[0],
+                lat: lonlat[1]
+            });
+        }
+    }
+
     return selection;
 };