Merge pull request #2361 from plotly/bump-mapbox-gl

Bump mapbox gl to 0.44.0

Author: etpinard

package-lock.json

@@ -87,7 +87,7 @@
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
     "kdgrass": "^1.0.1",
-    "mapbox-gl": "^0.22.0",
+    "mapbox-gl": "^0.44.0",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
     "mouse-event-offset": "^3.0.2",

package.json

@@ -439,8 +439,8 @@ drawing.pointStyle = function(s, trace, gd) {
     });
 };
 
-drawing.selectedPointStyle = function(s, trace) {
-    if(!s.size() || !trace.selectedpoints) return;
+drawing.makeSelectedPointStyleFns = function(trace) {
+    var out = {};
 
     var selectedAttrs = trace.selected || {};
     var unselectedAttrs = trace.unselected || {};
@@ -455,59 +455,77 @@ drawing.selectedPointStyle = function(s, trace) {
     var smoIsDefined = smo !== undefined;
     var usmoIsDefined = usmo !== undefined;
 
-    s.each(function(d) {
-        var pt = d3.select(this);
+    out.opacityFn = function(d) {
         var dmo = d.mo;
         var dmoIsDefined = dmo !== undefined;
-        var mo2;
 
         if(dmoIsDefined || smoIsDefined || usmoIsDefined) {
             if(d.selected) {
-                if(smoIsDefined) mo2 = smo;
+                if(smoIsDefined) return smo;
             } else {
-                if(usmoIsDefined) mo2 = usmo;
-                else mo2 = DESELECTDIM * (dmoIsDefined ? dmo : mo);
+                if(usmoIsDefined) return usmo;
+                return DESELECTDIM * (dmoIsDefined ? dmo : mo);
             }
         }
-
-        if(mo2 !== undefined) pt.style('opacity', mo2);
-    });
+    };
 
     var smc = selectedMarker.color;
     var usmc = unselectedMarker.color;
 
     if(smc || usmc) {
-        s.each(function(d) {
-            var pt = d3.select(this);
-            var mc2;
-
+        out.colorFn = function(d) {
             if(d.selected) {
-                if(smc) mc2 = smc;
+                if(smc) return smc;
             } else {
-                if(usmc) mc2 = usmc;
+                if(usmc) return usmc;
             }
-
-            if(mc2) Color.fill(pt, mc2);
-        });
+        };
     }
 
     var sms = selectedMarker.size;
     var usms = unselectedMarker.size;
     var smsIsDefined = sms !== undefined;
     var usmsIsDefined = usms !== undefined;
 
-    if(Registry.traceIs(trace, 'symbols') && (smsIsDefined || usmsIsDefined)) {
-        s.each(function(d) {
-            var pt = d3.select(this);
+    if(smsIsDefined || usmsIsDefined) {
+        out.sizeFn = function(d) {
             var mrc = d.mrc;
-            var mx = d.mx || marker.symbol || 0;
-            var mrc2;
-
             if(d.selected) {
-                mrc2 = (smsIsDefined) ? sms / 2 : mrc;
+                return smsIsDefined ? sms / 2 : mrc;
             } else {
-                mrc2 = (usmsIsDefined) ? usms / 2 : mrc;
+                return usmsIsDefined ? usms / 2 : mrc;
             }
+        };
+    }
+
+    return out;
+};
+
+drawing.selectedPointStyle = function(s, trace) {
+    if(!s.size() || !trace.selectedpoints) return;
+
+    var fns = drawing.makeSelectedPointStyleFns(trace);
+    var marker = trace.marker || {};
+
+    s.each(function(d) {
+        var pt = d3.select(this);
+        var mo2 = fns.opacityFn(d);
+        if(mo2 !== undefined) pt.style('opacity', mo2);
+    });
+
+    if(fns.colorFn) {
+        s.each(function(d) {
+            var pt = d3.select(this);
+            var mc2 = fns.colorFn(d);
+            if(mc2) Color.fill(pt, mc2);
+        });
+    }
+
+    if(Registry.traceIs(trace, 'symbols') && fns.sizeFn) {
+        s.each(function(d) {
+            var pt = d3.select(this);
+            var mx = d.mx || marker.symbol || 0;
+            var mrc2 = fns.sizeFn(d);
 
             pt.attr('d', makePointPath(drawing.symbolNumber(mx), mrc2));
 

src/components/drawing/index.js

@@ -358,6 +358,10 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return;
         }
 
+        if(redrawTimer === null) {
+            clearSelect(zoomlayer);
+        }
+
         // If a transition is in progress, then disable any behavior:
         if(gd._transitioningWithDuration) {
             e.preventDefault();

src/plots/cartesian/dragbox.js

@@ -9,13 +9,21 @@
 
 'use strict';
 
+var requiredVersion = '0.44.0';
 
 module.exports = {
+    requiredVersion: requiredVersion,
+
     styleUrlPrefix: 'mapbox://styles/mapbox/',
     styleUrlSuffix: 'v9',
 
     controlContainerClassName: 'mapboxgl-control-container',
 
+    wrongVersionErrorMsg: [
+        'Your custom plotly.js bundle is not using the correct mapbox-gl version',
+        'Please install mapbox-gl@' + requiredVersion + '.'
+    ].join('\n'),
+
     noAccessTokenErrorMsg: [
         'Missing Mapbox access token.',
         'Mapbox trace type require a Mapbox access token to be registered.',
@@ -24,5 +32,11 @@ module.exports = {
         'More info here: https://www.mapbox.com/help/define-access-token/'
     ].join('\n'),
 
-    mapOnErrorMsg: 'Mapbox error.'
+    mapOnErrorMsg: 'Mapbox error.',
+
+    // a subset of node_modules/mapbox-gl/dist/mapbox-gl.css
+    styleRules: {
+        map: 'overflow:hidden;position:relative;',
+        'missing-css': 'display:none',
+    }
 };

src/plots/mapbox/constants.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var mapboxgl = require('mapbox-gl');
@@ -20,6 +19,9 @@ var constants = require('./constants');
 
 var MAPBOX = 'mapbox';
 
+for(var k in constants.styleRules) {
+    Lib.addStyleRule('.mapboxgl-' + k, constants.styleRules[k]);
+}
 
 exports.name = MAPBOX;
 
@@ -53,6 +55,10 @@ exports.plot = function plotMapbox(gd) {
     var calcData = gd.calcdata;
     var mapboxIds = fullLayout._subplots[MAPBOX];
 
+    if(mapboxgl.version !== constants.requiredVersion) {
+        throw new Error(constants.wrongVersionErrorMsg);
+    }
+
     var accessToken = findAccessToken(gd, mapboxIds);
     mapboxgl.accessToken = accessToken;
 

src/plots/mapbox/index.js

@@ -6,13 +6,11 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var Lib = require('../../lib');
 var convertTextOpts = require('./convert_text_opts');
 
-
 function MapboxLayer(mapbox, index) {
     this.mapbox = mapbox;
     this.map = mapbox.map;
@@ -36,32 +34,26 @@ var proto = MapboxLayer.prototype;
 
 proto.update = function update(opts) {
     if(!this.visible) {
-
         // IMPORTANT: must create source before layer to not cause errors
         this.updateSource(opts);
         this.updateLayer(opts);
-    }
-    else if(this.needsNewSource(opts)) {
-
+    } else if(this.needsNewSource(opts)) {
         // IMPORTANT: must delete layer before source to not cause errors
         this.updateLayer(opts);
         this.updateSource(opts);
-    }
-    else if(this.needsNewLayer(opts)) {
+    } else if(this.needsNewLayer(opts)) {
         this.updateLayer(opts);
+    } else {
+        this.updateStyle(opts);
     }
 
-    this.updateStyle(opts);
-
     this.visible = isVisible(opts);
 };
 
 proto.needsNewSource = function(opts) {
-
     // for some reason changing layer to 'fill' or 'symbol'
     // w/o changing the source throws an exception in mapbox-gl 0.18 ;
     // stay safe and make new source on type changes
-
     return (
         this.sourceType !== opts.sourcetype ||
         this.source !== opts.source ||
@@ -93,37 +85,34 @@ proto.updateSource = function(opts) {
 
 proto.updateLayer = function(opts) {
     var map = this.map;
+    var convertedOpts = convertOpts(opts);
 
     if(map.getLayer(this.idLayer)) map.removeLayer(this.idLayer);
 
     this.layerType = opts.type;
 
-    if(!isVisible(opts)) return;
-
-    map.addLayer({
-        id: this.idLayer,
-        source: this.idSource,
-        'source-layer': opts.sourcelayer || '',
-        type: opts.type
-    }, opts.below);
-
-    // the only way to make a layer invisible is to remove it
-    var layoutOpts = { visibility: 'visible' };
-    this.mapbox.setOptions(this.idLayer, 'setLayoutProperty', layoutOpts);
+    if(isVisible(opts)) {
+        map.addLayer({
+            id: this.idLayer,
+            source: this.idSource,
+            'source-layer': opts.sourcelayer || '',
+            type: opts.type,
+            layout: convertedOpts.layout,
+            paint: convertedOpts.paint
+        }, opts.below);
+    }
 };
 
 proto.updateStyle = function(opts) {
-    var convertedOpts = convertOpts(opts);
-
     if(isVisible(opts)) {
+        var convertedOpts = convertOpts(opts);
         this.mapbox.setOptions(this.idLayer, 'setLayoutProperty', convertedOpts.layout);
         this.mapbox.setOptions(this.idLayer, 'setPaintProperty', convertedOpts.paint);
     }
 };
 
 proto.dispose = function dispose() {
     var map = this.map;
-
     map.removeLayer(this.idLayer);
     map.removeSource(this.idSource);
 };
@@ -198,19 +187,18 @@ function convertOpts(opts) {
 }
 
 function convertSourceOpts(opts) {
-    var sourceType = opts.sourcetype,
-        source = opts.source,
-        sourceOpts = { type: sourceType },
-        isSourceAString = (typeof source === 'string'),
-        field;
-
-    if(sourceType === 'geojson') field = 'data';
-    else if(sourceType === 'vector') {
-        field = isSourceAString ? 'url' : 'tiles';
+    var sourceType = opts.sourcetype;
+    var source = opts.source;
+    var sourceOpts = {type: sourceType};
+    var field;
+
+    if(sourceType === 'geojson') {
+        field = 'data';
+    } else if(sourceType === 'vector') {
+        field = typeof source === 'string' ? 'url' : 'tiles';
     }
 
     sourceOpts[field] = source;
-
     return sourceOpts;
 }