prelim stuff for geo selections

- make sure dragmode is set to 'pan' by default for geo plots
- add select and lasso mode bar button to geo plots
- add updateFx fast relayout pass
- init dragElement instance *just for* lasso and select drag modes,
  note that 'pan' still uses d3's drag abstaction

Author: etpinard

src/components/fx/layout_defaults.js

@@ -29,11 +29,17 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 
     coerce('hovermode', hovermodeDflt);
 
-    // if only mapbox subplots is present on graph,
+    // if only mapbox or geo subplots is present on graph,
     // reset 'zoom' dragmode to 'pan' until 'zoom' is implemented,
     // so that the correct modebar button is active
-    if(layoutOut._has('mapbox') && layoutOut._basePlotModules.length === 1 &&
-       layoutOut.dragmode === 'zoom') {
+    var hasMapbox = layoutOut._has('mapbox');
+    var hasGeo = layoutOut._has('geo');
+    var len = layoutOut._basePlotModules.length;
+
+    if(layoutOut.dragmode === 'zoom' && (
+        ((hasMapbox || hasGeo) && len === 1) ||
+        (hasMapbox && hasGeo && len === 2)
+    )) {
         layoutOut.dragmode = 'pan';
     }
 };

src/components/modebar/manage.js

@@ -71,16 +71,16 @@ module.exports = function manageModeBar(gd) {
 
 // logic behind which buttons are displayed by default
 function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
-    var fullLayout = gd._fullLayout,
-        fullData = gd._fullData;
+    var fullLayout = gd._fullLayout;
+    var fullData = gd._fullData;
 
-    var hasCartesian = fullLayout._has('cartesian'),
-        hasGL3D = fullLayout._has('gl3d'),
-        hasGeo = fullLayout._has('geo'),
-        hasPie = fullLayout._has('pie'),
-        hasGL2D = fullLayout._has('gl2d'),
-        hasTernary = fullLayout._has('ternary'),
-        hasMapbox = fullLayout._has('mapbox');
+    var hasCartesian = fullLayout._has('cartesian');
+    var hasGL3D = fullLayout._has('gl3d');
+    var hasGeo = fullLayout._has('geo');
+    var hasPie = fullLayout._has('pie');
+    var hasGL2D = fullLayout._has('gl2d');
+    var hasTernary = fullLayout._has('ternary');
+    var hasMapbox = fullLayout._has('mapbox');
 
     var groups = [];
 
@@ -112,18 +112,13 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
         addGroup(['hoverClosest3d']);
     }
 
-    if(hasGeo) {
-        addGroup(['zoomInGeo', 'zoomOutGeo', 'resetGeo']);
-        addGroup(['hoverClosestGeo']);
-    }
-
     var allAxesFixed = areAllAxesFixed(fullLayout),
         dragModeGroup = [];
 
     if(((hasCartesian || hasGL2D) && !allAxesFixed) || hasTernary) {
         dragModeGroup = ['zoom2d', 'pan2d'];
     }
-    if(hasMapbox) {
+    if(hasMapbox || hasGeo) {
         dragModeGroup = ['pan2d'];
     }
     if(isSelectable(fullData)) {
@@ -138,18 +133,17 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
 
     if(hasCartesian && hasPie) {
         addGroup(['toggleHover']);
-    }
-    else if(hasGL2D) {
+    } else if(hasGL2D) {
         addGroup(['hoverClosestGl2d']);
-    }
-    else if(hasCartesian) {
+    } else if(hasCartesian) {
         addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
-    }
-    else if(hasPie) {
+    } else if(hasPie) {
         addGroup(['hoverClosestPie']);
-    }
-    else if(hasMapbox) {
+    } else if(hasMapbox) {
         addGroup(['resetViewMapbox', 'toggleHover']);
+    } else if(hasGeo) {
+        addGroup(['zoomInGeo', 'zoomOutGeo', 'resetGeo']);
+        addGroup(['hoverClosestGeo']);
     }
 
     return appendButtonsToGroups(groups, buttonsToAdd);

src/plot_api/subroutines.js

@@ -490,7 +490,7 @@ exports.doTicksRelayout = function(gd) {
 
 exports.doModeBar = function(gd) {
     var fullLayout = gd._fullLayout;
-    var subplotIds, subplotObj, i;
+    var subplotIds, subplotLayout, subplotObj, i;
 
     ModeBar.manage(gd);
     initInteractions(gd);
@@ -513,6 +513,13 @@ exports.doModeBar = function(gd) {
         subplotObj.updateFx(fullLayout);
     }
 
+    subplotIds = Plots.getSubplotIds(fullLayout, 'geo');
+    for(i = 0; i < subplotIds.length; i++) {
+        subplotLayout = fullLayout[subplotIds[i]];
+        subplotObj = subplotLayout._subplot;
+        subplotObj.updateFx(fullLayout, subplotLayout);
+    }
+
     return Plots.previousPromises(gd);
 };
 

src/plots/cartesian/select.js

@@ -79,16 +79,18 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
         if(!trace._module || !trace._module.selectPoints) continue;
 
         if(dragOptions.subplot) {
-            if(trace.subplot !== dragOptions.subplot) continue;
-
-            searchTraces.push({
-                selectPoints: trace._module.selectPoints,
-                cd: cd,
-                xaxis: dragOptions.xaxes[0],
-                yaxis: dragOptions.yaxes[0]
-            });
-        }
-        else {
+            if(
+                trace.subplot === dragOptions.subplot ||
+                trace.geo === dragOptions.subplot
+            ) {
+                searchTraces.push({
+                    selectPoints: trace._module.selectPoints,
+                    cd: cd,
+                    xaxis: dragOptions.xaxes[0],
+                    yaxis: dragOptions.yaxes[0]
+                });
+            }
+        } else {
             if(xAxisIds.indexOf(trace.xaxis) === -1) continue;
             if(yAxisIds.indexOf(trace.yaxis) === -1) continue;
 

src/plots/geo/geo2.js

@@ -19,6 +19,8 @@ var Drawing = require('../../components/drawing');
 var Fx = require('../../components/fx');
 var Plots = require('../plots');
 var Axes = require('../cartesian/axes');
+var dragElement = require('../../components/dragelement');
+var prepSelect = require('../cartesian/select');
 
 var createGeoZoom = require('./zoom');
 var constants = require('./constants');
@@ -351,6 +353,51 @@ proto.updateFx = function(fullLayout, geoLayout) {
         framework.call(createGeoZoom(_this, geoLayout));
         framework.on('dblclick.zoom', zoomReset);
     }
+    else if(dragMode === 'select' || dragMode === 'lasso') {
+        framework.on('.zoom', null);
+
+        var fillRangeItems;
+
+        if(dragMode === 'select') {
+            fillRangeItems = function(eventData, poly) {
+                var ranges = eventData.range = {};
+                ranges[_this.id] = [
+                    invert([poly.xmin, poly.ymin]),
+                    invert([poly.xmax, poly.ymax])
+                ];
+            };
+        } else if(dragMode === 'lasso') {
+            fillRangeItems = function(eventData, poly, pts) {
+                var dataPts = eventData.lassoPoints = {};
+                dataPts[_this.id] = pts.filtered.map(invert);
+            };
+        }
+
+        var dragOptions = {
+            element: _this.bgRect.node(),
+            gd: gd,
+            plotinfo: {
+                xaxis: _this.xaxis,
+                yaxis: _this.yaxis,
+                fillRangeItems: fillRangeItems
+            },
+            xaxes: [_this.xaxis],
+            yaxes: [_this.yaxis],
+            subplot: _this.id
+        };
+
+        dragOptions.prepFn = function(e, startX, startY) {
+            prepSelect(e, startX, startY, dragOptions, dragMode);
+        };
+
+        dragOptions.doneFn = function(dragged, numClicks) {
+            if(numClicks === 2) {
+                fullLayout._zoomlayer.selectAll('.select-outline').remove();
+            }
+        };
+
+        dragElement.init(dragOptions);
+    }
 
     framework.on('mousemove', function() {
         var lonlat = _this.projection.invert(d3.mouse(this));

test/jasmine/tests/fx_test.js

@@ -76,7 +76,7 @@ describe('Fx defaults', function() {
         .layout;
 
         expect(layoutOut.hovermode).toBe('closest', 'hovermode to closest');
-        expect(layoutOut.dragmode).toBe('zoom', 'dragmode to zoom');
+        expect(layoutOut.dragmode).toBe('pan', 'dragmode to zoom');
     });
 
     it('should default (multi plot type version)', function() {

test/jasmine/tests/modebar_test.js

@@ -173,10 +173,10 @@ describe('ModeBar', function() {
                 expectedButtonCount += group.length;
             });
 
-            expect(modeBar.hasButtons(buttons)).toBe(true);
-            expect(countGroups(modeBar)).toEqual(expectedGroupCount);
-            expect(countButtons(modeBar)).toEqual(expectedButtonCount);
-            expect(countLogo(modeBar)).toEqual(1);
+            expect(modeBar.hasButtons(buttons)).toBe(true, 'modeBar.hasButtons');
+            expect(countGroups(modeBar)).toEqual(expectedGroupCount, 'correct group count');
+            expect(countButtons(modeBar)).toEqual(expectedButtonCount, 'correct button count');
+            expect(countLogo(modeBar)).toEqual(1, 'correct logo count');
         }
 
         it('creates mode bar (unselectable cartesian version)', function() {
@@ -256,6 +256,7 @@ describe('ModeBar', function() {
         it('creates mode bar (geo version)', function() {
             var buttons = getButtons([
                 ['toImage', 'sendDataToCloud'],
+                ['pan2d'],
                 ['zoomInGeo', 'zoomOutGeo', 'resetGeo'],
                 ['hoverClosestGeo']
             ]);
@@ -269,6 +270,29 @@ describe('ModeBar', function() {
             checkButtons(modeBar, buttons, 1);
         });
 
+        it('creates mode bar (geo + selected version)', function() {
+            var buttons = getButtons([
+                ['toImage', 'sendDataToCloud'],
+                ['pan2d', 'select2d', 'lasso2d'],
+                ['zoomInGeo', 'zoomOutGeo', 'resetGeo'],
+                ['hoverClosestGeo']
+            ]);
+
+            var gd = getMockGraphInfo();
+            gd._fullLayout._basePlotModules = [{ name: 'geo' }];
+            gd._fullData = [{
+                type: 'scattergeo',
+                visible: true,
+                mode: 'markers',
+                _module: {selectPoints: true}
+            }];
+
+            manageModeBar(gd);
+            var modeBar = gd._fullLayout._modeBar;
+
+            checkButtons(modeBar, buttons, 1);
+        });
+
         it('creates mode bar (mapbox version)', function() {
             var buttons = getButtons([
                 ['toImage', 'sendDataToCloud'],