implement select/lasso dragmode for scattermapbox

- create dragElement on mapbox subplot <div>
  when dragmode is set to select or lasso,
- undo dragElement onmousedown handle for other dragmode values
- keep ref to scattermapbox/plot instance in calcdata to call
  its update method directly in select
- must keep track of trace with dimmed pts to go through arrayOk logic
  in scatter/convert

Author: etpinard

src/plot_api/subroutines.js

@@ -378,21 +378,27 @@ exports.doTicksRelayout = function(gd) {
 
 exports.doModeBar = function(gd) {
     var fullLayout = gd._fullLayout;
-    var subplotIds, scene, i;
+    var subplotIds, subplotObj, i;
 
     ModeBar.manage(gd);
     initInteractions(gd);
 
     subplotIds = Plots.getSubplotIds(fullLayout, 'gl3d');
     for(i = 0; i < subplotIds.length; i++) {
-        scene = fullLayout[subplotIds[i]]._scene;
-        scene.updateFx(fullLayout.dragmode, fullLayout.hovermode);
+        subplotObj = fullLayout[subplotIds[i]]._scene;
+        subplotObj.updateFx(fullLayout.dragmode, fullLayout.hovermode);
     }
 
     subplotIds = Plots.getSubplotIds(fullLayout, 'gl2d');
     for(i = 0; i < subplotIds.length; i++) {
-        scene = fullLayout._plots[subplotIds[i]]._scene2d;
-        scene.updateFx(fullLayout.dragmode);
+        subplotObj = fullLayout._plots[subplotIds[i]]._scene2d;
+        subplotObj.updateFx(fullLayout.dragmode);
+    }
+
+    subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox');
+    for(i = 0; i < subplotIds.length; i++) {
+        subplotObj = fullLayout[subplotIds[i]]._subplot;
+        subplotObj.updateFx(fullLayout);
     }
 
     return Plots.previousPromises(gd);

src/plots/mapbox/mapbox.js

@@ -13,6 +13,8 @@ var mapboxgl = require('mapbox-gl');
 
 var Fx = require('../../components/fx');
 var Lib = require('../../lib');
+var dragElement = require('../../components/dragelement');
+var prepSelect = require('../cartesian/select');
 var constants = require('./constants');
 var layoutAttributes = require('./layout_attributes');
 var createMapboxLayer = require('./layers');
@@ -86,9 +88,9 @@ proto.plot = function(calcData, fullLayout, promises) {
 };
 
 proto.createMap = function(calcData, fullLayout, resolve, reject) {
-    var self = this,
-        gd = self.gd,
-        opts = self.opts;
+    var self = this;
+    var gd = self.gd;
+    var opts = self.opts;
 
     // store style id and URL or object
     var styleObj = self.styleObj = getStyleObj(opts.style);
@@ -107,7 +109,9 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         pitch: opts.pitch,
 
         interactive: !self.isStatic,
-        preserveDrawingBuffer: self.isStatic
+        preserveDrawingBuffer: self.isStatic,
+
+        boxZoom: false
     });
 
     // clear navigation container
@@ -128,6 +132,8 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         self.resolveOnRender(resolve);
     });
 
+    if(self.isStatic) return;
+
     // keep track of pan / zoom in user layout and emit relayout event
     map.on('moveend', function(eventData) {
         if(!self.map) return;
@@ -261,6 +267,7 @@ proto.updateLayout = function(fullLayout) {
 
     this.updateLayers();
     this.updateFramework(fullLayout);
+    this.updateFx(fullLayout);
     this.map.resize();
 };
 
@@ -314,6 +321,73 @@ proto.createFramework = function(fullLayout) {
     self.updateFramework(fullLayout);
 };
 
+proto.updateFx = function(fullLayout) {
+    var self = this;
+    var map = self.map;
+    var gd = self.gd;
+
+    if(self.isStatic) return;
+
+    function clearSelect() {
+        fullLayout._zoomlayer.selectAll('.select-outline').remove();
+    }
+
+    function invert(pxpy) {
+        var obj = self.map.unproject(pxpy);
+        return [obj.lng, obj.lat];
+    }
+
+    var dragMode = fullLayout.dragmode;
+    var fillRangeItems;
+
+    if(dragMode === 'select') {
+        fillRangeItems = function(eventData, poly) {
+            var ranges = eventData.range = {};
+            ranges[self.id] = [
+                invert([poly.xmin, poly.ymin]),
+                invert([poly.xmax, poly.ymax])
+            ];
+        };
+    } else {
+        fillRangeItems = function(eventData, poly, pts) {
+            var dataPts = eventData.lassoPoints = {};
+            dataPts[self.id] = pts.filtered.map(invert);
+        };
+    }
+
+    if(dragMode === 'select' || dragMode === 'lasso') {
+        map.dragPan.disable();
+
+        var dragOptions = {
+            element: self.div,
+            gd: gd,
+            plotinfo: {
+                xaxis: self.xaxis,
+                yaxis: self.yaxis,
+                fillRangeItems: fillRangeItems
+            },
+            xaxes: [self.xaxis],
+            yaxes: [self.yaxis],
+            subplot: self.id
+        };
+
+        dragOptions.prepFn = function(e, startX, startY) {
+            prepSelect(e, startX, startY, dragOptions, dragMode);
+        };
+
+        dragOptions.doneFn = function(dragged, numClicks) {
+            if(numClicks === 2) clearSelect();
+        };
+
+        dragElement.init(dragOptions);
+    } else {
+        map.dragPan.enable();
+        self.div.onmousedown = null;
+    }
+
+    clearSelect();
+};
+
 proto.updateFramework = function(fullLayout) {
     var domain = fullLayout[this.id].domain,
         size = fullLayout._size;

src/traces/scattermapbox/convert.js

@@ -23,6 +23,7 @@ var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 var COLOR_PROP = 'circle-color';
 var SIZE_PROP = 'circle-radius';
 var OPACITY_PROP = 'circle-opacity';
+var DESELECTDIM = 0.2;
 
 module.exports = function convert(calcTrace) {
     var trace = calcTrace[0].trace;
@@ -185,7 +186,7 @@ function makeCircleGeoJSON(calcTrace, hash) {
     }
 
     function combineOpacities(d, mo) {
-        return trace.opacity * mo;
+        return trace.opacity * mo * (d.dim ? DESELECTDIM : 1);
     }
 
     var opacityFn;
@@ -194,6 +195,10 @@ function makeCircleGeoJSON(calcTrace, hash) {
             var mo = isNumeric(d.mo) ? +Lib.constrain(d.mo, 0, 1) : 0;
             return combineOpacities(d, mo);
         };
+    } else if(trace._hasDimmedPts) {
+        opacityFn = function(d) {
+            return combineOpacities(d, marker.opacity);
+        };
     }
 
     // Translate vals in trace arrayOk containers

src/traces/scattermapbox/index.js

@@ -15,9 +15,10 @@ ScatterMapbox.attributes = require('./attributes');
 ScatterMapbox.supplyDefaults = require('./defaults');
 ScatterMapbox.colorbar = require('../scatter/colorbar');
 ScatterMapbox.calc = require('../scattergeo/calc');
+ScatterMapbox.plot = require('./plot');
 ScatterMapbox.hoverPoints = require('./hover');
 ScatterMapbox.eventData = require('./event_data');
-ScatterMapbox.plot = require('./plot');
+ScatterMapbox.selectPoints = require('./select');
 
 ScatterMapbox.moduleType = 'trace';
 ScatterMapbox.name = 'scattermapbox';

src/traces/scattermapbox/plot.js

@@ -92,6 +92,9 @@ proto.update = function update(calcTrace) {
         mapbox.setSourceData(this.idSourceSymbol, opts.symbol.geojson);
         mapbox.setOptions(this.idLayerSymbol, 'setPaintProperty', opts.symbol.paint);
     }
+
+    // link ref for quick update during selections
+    calcTrace[0].trace._glTrace = this;
 };
 
 proto.dispose = function dispose() {

src/traces/scattermapbox/select.js

@@ -0,0 +1,57 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var subtypes = require('../scatter/subtypes');
+
+module.exports = function selectPoints(searchInfo, polygon) {
+    var cd = searchInfo.cd;
+    var xa = searchInfo.xaxis;
+    var ya = searchInfo.yaxis;
+    var selection = [];
+    var trace = cd[0].trace;
+
+    var di, lonlat, x, y, i;
+
+    // flag used in ./convert.js
+    // to not insert data-driven 'circle-opacity' when we don't need to
+    trace._hasDimmedPts = false;
+
+    if(trace.visible !== true || !subtypes.hasMarkers(trace)) return;
+
+    if(polygon === false) {
+        for(i = 0; i < cd.length; i++) {
+            cd[i].dim = 0;
+        }
+    } else {
+        for(i = 0; i < cd.length; i++) {
+            di = cd[i];
+            lonlat = di.lonlat;
+            x = xa.c2p(lonlat);
+            y = ya.c2p(lonlat);
+
+            if(polygon.contains([x, y])) {
+                trace._hasDimmedPts = true;
+                selection.push({
+                    pointNumber: i,
+                    lon: lonlat[0],
+                    lat: lonlat[1]
+                });
+                di.dim = 0;
+            } else {
+                di.dim = 1;
+            }
+        }
+    }
+
+    trace._glTrace.update(cd);
+
+    return selection;
+};

test/jasmine/tests/scattermapbox_test.js

@@ -114,14 +114,26 @@ describe('scattermapbox convert', function() {
         jasmine.addMatchers(customMatchers);
     });
 
-    function _convert(trace) {
+    function _convert(trace, selected) {
         var gd = { data: [trace] };
         Plots.supplyDefaults(gd);
 
         var fullTrace = gd._fullData[0];
         Plots.doCalcdata(gd, fullTrace);
 
         var calcTrace = gd.calcdata[0];
+
+        if(selected) {
+            var hasDimmedPts = false;
+
+            selected.forEach(function(v, i) {
+                if(v) hasDimmedPts = true;
+                calcTrace[i].dim = v;
+            });
+
+            fullTrace._hasDimmedPts = hasDimmedPts;
+        }
+
         return convert(calcTrace);
     }
 
@@ -208,6 +220,58 @@ describe('scattermapbox convert', function() {
         ], 'geojson feature properties');
     });
 
+    it('should fill circle-opacity correctly during selections', function() {
+        var _base = {
+            type: 'scattermapbox',
+            mode: 'markers',
+            lon: [-10, 30, 20],
+            lat: [45, 90, 180],
+            marker: {symbol: 'circle'}
+        };
+
+        var specs = [{
+            patch: {},
+            selected: [0, 1, 1],
+            expected: {stops: [[0, 1], [1, 0.2]], props: [0, 1, 1]}
+        }, {
+            patch: {opacity: 0.5},
+            selected: [0, 1, 1],
+            expected: {stops: [[0, 0.5], [1, 0.1]], props: [0, 1, 1]}
+        }, {
+            patch: {
+                marker: {opacity: 0.6}
+            },
+            selected: [1, 0, 1],
+            expected: {stops: [[0, 0.12], [1, 0.6]], props: [0, 1, 0]}
+        }, {
+            patch: {
+                marker: {opacity: [0.5, 1, 0.6]}
+            },
+            selected: [1, 0, 1],
+            expected: {stops: [[0, 0.1], [1, 1], [2, 0.12]], props: [0, 1, 2]}
+        }, {
+            patch: {
+                marker: {opacity: [2, null, -0.6]}
+            },
+            selected: [1, 1, 1],
+            expected: {stops: [[0, 0.2], [1, 0]], props: [0, 1, 1]}
+        }];
+
+        specs.forEach(function(s, i) {
+            var msg0 = '- case ' + i + ' ';
+            var opts = _convert(Lib.extendDeep({}, _base, s.patch), s.selected);
+
+            expect(opts.circle.paint['circle-opacity'].stops)
+                .toEqual(s.expected.stops, msg0 + 'stops');
+
+            var props = opts.circle.geojson.features.map(function(f) {
+                return f.properties['circle-opacity'];
+            });
+
+            expect(props).toEqual(s.expected.props, msg0 + 'props');
+        });
+    });
+
     it('should generate correct output for fill + markers + lines traces', function() {
         var opts = _convert(Lib.extendFlat({}, base, {
             mode: 'markers+lines',