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/cartesian/dragbox.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/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);
 };
@@ -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;
 }