Bump mapbox gl to 0.44.0

package.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",

src/components/drawing/index.js

@@ -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/plots/mapbox/constants.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/index.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/layers.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);
 };

src/plots/mapbox/mapbox.js

@@ -120,15 +120,14 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     self.div.removeChild(controlContainer);
 
     // make sure canvas does not inherit left and top css
-    map._canvas.canvas.style.left = '0px';
-    map._canvas.canvas.style.top = '0px';
+    map._canvas.style.left = '0px';
+    map._canvas.style.top = '0px';
 
     self.rejectOnError(reject);
 
     map.once('load', function() {
         self.updateData(calcData);
         self.updateLayout(fullLayout);
-
         self.resolveOnRender(resolve);
     });
 
@@ -223,22 +222,18 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
         self.styleObj = styleObj;
         map.setStyle(styleObj.style);
 
-        map.style.once('load', function() {
-
+        map.once('styledata', function() {
             // need to rebuild trace layers on reload
             // to avoid 'lost event' errors
             self.traceHash = {};
-
             self.updateData(calcData);
             self.updateLayout(fullLayout);
-
             self.resolveOnRender(resolve);
         });
     }
     else {
         self.updateData(calcData);
         self.updateLayout(fullLayout);
-
         self.resolveOnRender(resolve);
     }
 };
@@ -300,7 +295,8 @@ proto.resolveOnRender = function(resolve) {
     map.on('render', function onRender() {
         if(map.loaded()) {
             map.off('render', onRender);
-            resolve();
+            // resolve at end of render loop
+            setTimeout(resolve, 0);
         }
     });
 };
@@ -458,41 +454,15 @@ proto.destroy = function() {
 };
 
 proto.toImage = function() {
+    this.map.stop();
     return this.map.getCanvas().toDataURL();
 };
 
-// convenience wrapper to create blank GeoJSON sources
-// and avoid 'invalid GeoJSON' errors
-proto.initSource = function(idSource) {
-    var blank = {
-        type: 'geojson',
-        data: {
-            type: 'Feature',
-            geometry: {
-                type: 'Point',
-                coordinates: []
-            }
-        }
-    };
-
-    return this.map.addSource(idSource, blank);
-};
-
-// convenience wrapper to set data of GeoJSON sources
-proto.setSourceData = function(idSource, data) {
-    this.map.getSource(idSource).setData(data);
-};
-
 // convenience wrapper to create set multiple layer
 // 'layout' or 'paint options at once.
 proto.setOptions = function(id, methodName, opts) {
-    var map = this.map,
-        keys = Object.keys(opts);
-
-    for(var i = 0; i < keys.length; i++) {
-        var key = keys[i];
-
-        map[methodName](id, key, opts[key]);
+    for(var k in opts) {
+        this.map[methodName](id, k, opts[k]);
     }
 };
 
@@ -536,6 +506,8 @@ function getStyleObj(val) {
         styleObj.style = convertStyleVal(styleDflt);
     }
 
+    styleObj.transition = {duration: 0, delay: 0};
+
     return styleObj;
 }