mapbox-gl@1.0.0 + improvements

package.json

@@ -89,7 +89,7 @@
     "glslify": "^7.0.0",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
-    "mapbox-gl": "0.45.0",
+    "mapbox-gl": "1.0.0",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
     "mouse-event-offset": "^3.0.2",

src/components/dragelement/unhover.js

@@ -6,19 +6,16 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
-
 var Events = require('../../lib/events');
 var throttle = require('../../lib/throttle');
-var getGraphDiv = require('../../lib/get_graph_div');
+var getGraphDiv = require('../../lib/dom').getGraphDiv;
 
 var hoverConstants = require('../fx/constants');
 
 var unhover = module.exports = {};
 
-
 unhover.wrapped = function(gd, evt, subplot) {
     gd = getGraphDiv(gd);
 

src/lib/dom.js

@@ -0,0 +1,101 @@
+/**
+* Copyright 2012-2019, 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 d3 = require('d3');
+var loggers = require('./loggers');
+
+/**
+ * Allow referencing a graph DOM element either directly
+ * or by its id string
+ *
+ * @param {HTMLDivElement|string} gd: a graph element or its id
+ *
+ * @returns {HTMLDivElement} the DOM element of the graph
+ */
+function getGraphDiv(gd) {
+    var gdElement;
+
+    if(typeof gd === 'string') {
+        gdElement = document.getElementById(gd);
+
+        if(gdElement === null) {
+            throw new Error('No DOM element with id \'' + gd + '\' exists on the page.');
+        }
+
+        return gdElement;
+    } else if(gd === null || gd === undefined) {
+        throw new Error('DOM element provided is null or undefined');
+    }
+
+    // otherwise assume that gd is a DOM element
+    return gd;
+}
+
+function isPlotDiv(el) {
+    var el3 = d3.select(el);
+    return el3.node() instanceof HTMLElement &&
+        el3.size() &&
+        el3.classed('js-plotly-plot');
+}
+
+function removeElement(el) {
+    var elParent = el && el.parentNode;
+    if(elParent) elParent.removeChild(el);
+}
+
+/**
+ * for dynamically adding style rules
+ * makes one stylesheet that contains all rules added
+ * by all calls to this function
+ */
+function addStyleRule(selector, styleString) {
+    addRelatedStyleRule('global', selector, styleString);
+}
+
+/**
+ * for dynamically adding style rules
+ * to a stylesheet uniquely identified by a uid
+ */
+function addRelatedStyleRule(uid, selector, styleString) {
+    var id = 'plotly.js-style-' + uid;
+    var style = document.getElementById(id);
+    if(!style) {
+        style = document.createElement('style');
+        style.setAttribute('id', id);
+        // WebKit hack :(
+        style.appendChild(document.createTextNode(''));
+        document.head.appendChild(style);
+    }
+    var styleSheet = style.sheet;
+
+    if(styleSheet.insertRule) {
+        styleSheet.insertRule(selector + '{' + styleString + '}', 0);
+    } else if(styleSheet.addRule) {
+        styleSheet.addRule(selector, styleString, 0);
+    } else loggers.warn('addStyleRule failed');
+}
+
+/**
+ * to remove from the page a stylesheet identified by a given uid
+ */
+function deleteRelatedStyleRule(uid) {
+    var id = 'plotly.js-style-' + uid;
+    var style = document.getElementById(id);
+    if(style) removeElement(style);
+}
+
+module.exports = {
+    getGraphDiv: getGraphDiv,
+    isPlotDiv: isPlotDiv,
+    removeElement: removeElement,
+    addStyleRule: addStyleRule,
+    addRelatedStyleRule: addRelatedStyleRule,
+    deleteRelatedStyleRule: deleteRelatedStyleRule
+};

src/lib/index.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
@@ -138,7 +137,13 @@ lib.throttle = throttleModule.throttle;
 lib.throttleDone = throttleModule.done;
 lib.clearThrottle = throttleModule.clear;
 
-lib.getGraphDiv = require('./get_graph_div');
+var domModule = require('./dom');
+lib.getGraphDiv = domModule.getGraphDiv;
+lib.isPlotDiv = domModule.isPlotDiv;
+lib.removeElement = domModule.removeElement;
+lib.addStyleRule = domModule.addStyleRule;
+lib.addRelatedStyleRule = domModule.addRelatedStyleRule;
+lib.deleteRelatedStyleRule = domModule.deleteRelatedStyleRule;
 
 lib.clearResponsive = require('./clear_responsive');
 
@@ -676,59 +681,6 @@ lib.containsAny = function(s, fragments) {
     return false;
 };
 
-lib.isPlotDiv = function(el) {
-    var el3 = d3.select(el);
-    return el3.node() instanceof HTMLElement &&
-        el3.size() &&
-        el3.classed('js-plotly-plot');
-};
-
-lib.removeElement = function(el) {
-    var elParent = el && el.parentNode;
-    if(elParent) elParent.removeChild(el);
-};
-
-/**
- * for dynamically adding style rules
- * makes one stylesheet that contains all rules added
- * by all calls to this function
- */
-lib.addStyleRule = function(selector, styleString) {
-    lib.addRelatedStyleRule('global', selector, styleString);
-};
-
-/**
- * for dynamically adding style rules
- * to a stylesheet uniquely identified by a uid
- */
-lib.addRelatedStyleRule = function(uid, selector, styleString) {
-    var id = 'plotly.js-style-' + uid;
-    var style = document.getElementById(id);
-    if(!style) {
-        style = document.createElement('style');
-        style.setAttribute('id', id);
-        // WebKit hack :(
-        style.appendChild(document.createTextNode(''));
-        document.head.appendChild(style);
-    }
-    var styleSheet = style.sheet;
-
-    if(styleSheet.insertRule) {
-        styleSheet.insertRule(selector + '{' + styleString + '}', 0);
-    } else if(styleSheet.addRule) {
-        styleSheet.addRule(selector, styleString, 0);
-    } else lib.warn('addStyleRule failed');
-};
-
-/**
- * to remove from the page a stylesheet identified by a given uid
- */
-lib.deleteRelatedStyleRule = function(uid) {
-    var id = 'plotly.js-style-' + uid;
-    var style = document.getElementById(id);
-    if(style) lib.removeElement(style);
-};
-
 lib.isIE = function() {
     return typeof window.navigator.msSaveBlob !== 'undefined';
 };

src/plots/mapbox/constants.js

@@ -8,7 +8,7 @@
 
 'use strict';
 
-var requiredVersion = '0.45.0';
+var requiredVersion = '1.0.0';
 
 module.exports = {
     requiredVersion: requiredVersion,
@@ -31,11 +31,18 @@ module.exports = {
         'More info here: https://www.mapbox.com/help/define-access-token/'
     ].join('\n'),
 
+    multipleTokensErrorMsg: [
+        'Set multiple mapbox access token across different mapbox subplot,',
+        'using first token found as mapbox-gl does not allow multiple' +
+        'access tokens on the same page.'
+    ].join('\n'),
+
     mapOnErrorMsg: 'Mapbox error.',
 
     // a subset of node_modules/mapbox-gl/dist/mapbox-gl.css
     styleRules: {
         map: 'overflow:hidden;position:relative;',
-        'missing-css': 'display:none',
+        'missing-css': 'display:none;',
+        'canary': 'background-color:salmon;'
     }
 };

src/plots/mapbox/index.js

@@ -14,14 +14,11 @@ var Lib = require('../../lib');
 var getSubplotCalcData = require('../../plots/get_data').getSubplotCalcData;
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
-var createMapbox = require('./mapbox');
-var constants = require('./constants');
+var Mapbox = require('./mapbox');
 
 var MAPBOX = 'mapbox';
 
-for(var k in constants.styleRules) {
-    Lib.addStyleRule('.mapboxgl-' + k, constants.styleRules[k]);
-}
+var constants = exports.constants = require('./constants');
 
 exports.name = MAPBOX;
 
@@ -46,7 +43,7 @@ exports.attributes = {
     }
 };
 
-exports.layoutAttributes = require('./layout_attributes');
+var layoutAttrs = exports.layoutAttributes = require('./layout_attributes');
 
 exports.supplyLayoutDefaults = require('./layout_defaults');
 
@@ -69,14 +66,7 @@ exports.plot = function plot(gd) {
         var mapbox = opts._subplot;
 
         if(!mapbox) {
-            mapbox = createMapbox({
-                gd: gd,
-                container: fullLayout._glcontainer.node(),
-                id: id,
-                fullLayout: fullLayout,
-                staticPlot: gd._context.staticPlot
-            });
-
+            mapbox = new Mapbox(gd, id);
             fullLayout[id]._subplot = mapbox;
         }
 
@@ -132,24 +122,58 @@ exports.toSVG = function(gd) {
     }
 };
 
+// N.B. mapbox-gl only allows one accessToken to be set per page:
+// https://github.com/mapbox/mapbox-gl-js/issues/6331
 function findAccessToken(gd, mapboxIds) {
     var fullLayout = gd._fullLayout;
     var context = gd._context;
 
     // special case for Mapbox Atlas users
     if(context.mapboxAccessToken === '') return '';
 
+    var tokensUseful = [];
+    var tokensListed = [];
+    var wontWork = false;
+
     // Take the first token we find in a mapbox subplot.
     // These default to the context value but may be overridden.
     for(var i = 0; i < mapboxIds.length; i++) {
         var opts = fullLayout[mapboxIds[i]];
+        var style = opts.style;
+        var token = opts.accesstoken;
+
+        if(typeof style === 'string' && layoutAttrs.style.values.indexOf(style) !== -1) {
+            if(token) {
+                Lib.pushUnique(tokensUseful, token);
+            } else {
+                Lib.error('Uses Mapbox map style, but did not set an access token.');
+                wontWork = true;
+            }
+        }
 
-        if(opts.accesstoken) {
-            return opts.accesstoken;
+        if(token) {
+            Lib.pushUnique(tokensListed, token);
         }
     }
 
-    throw new Error(constants.noAccessTokenErrorMsg);
+    if(wontWork) {
+        throw new Error(constants.noAccessTokenErrorMsg);
+    }
+
+    if(tokensUseful.length) {
+        if(tokensUseful.length > 1) {
+            Lib.warn(constants.multipleTokensErrorMsg);
+        }
+        return tokensUseful[0];
+    } else {
+        if(tokensListed.length) {
+            Lib.log([
+                'Listed mapbox access token(s)', tokensListed.join(','),
+                'but did not use a Mapbox map style, ignoring token(s).'
+            ].join(' '));
+        }
+        return '';
+    }
 }
 
 exports.updateFx = function(gd) {

src/plots/mapbox/layers.js

@@ -120,7 +120,7 @@ proto.removeLayer = function() {
     }
 };
 
-proto.dispose = function dispose() {
+proto.dispose = function() {
     var map = this.map;
     map.removeLayer(this.idLayer);
     map.removeSource(this.idSource);