improve mapbox hover after drag

- use _rehover wrapper similar to cartesian subplots and
  call it on moveend
- split fx init code into prototype.initFx

Author: etpinard

src/plots/mapbox/mapbox.js

@@ -83,7 +83,6 @@ proto.plot = function(calcData, fullLayout, promises) {
 
 proto.createMap = function(calcData, fullLayout, resolve, reject) {
     var self = this;
-    var gd = self.gd;
     var opts = fullLayout[self.id];
 
     // store style id and URL or object
@@ -115,6 +114,10 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
 
     self.rejectOnError(reject);
 
+    if(!self.isStatic) {
+        self.initFx(calcData, fullLayout);
+    }
+
     var promises = [];
 
     promises.push(new Promise(function(resolve) {
@@ -127,121 +130,7 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         self.updateData(calcData);
         self.updateLayout(fullLayout);
         self.resolveOnRender(resolve);
-    });
-
-    if(self.isStatic) return;
-
-    var wheeling = false;
-
-    // keep track of pan / zoom in user layout and emit relayout event
-    map.on('moveend', function(eventData) {
-        if(!self.map) return;
-
-        // 'moveend' gets triggered by map.setCenter, map.setZoom,
-        // map.setBearing and map.setPitch.
-        //
-        // Here, we make sure that state updates amd 'plotly_relayout'
-        // are triggered only when the 'moveend' originates from a
-        // mouse target (filtering out API calls) to not
-        // duplicate 'plotly_relayout' events.
-
-        if(eventData.originalEvent || wheeling) {
-            var optsNow = gd._fullLayout[self.id];
-            Registry.call('_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, self.getViewEdits(optsNow));
-
-            var viewNow = self.getView();
-            optsNow._input.center = optsNow.center = viewNow.center;
-            optsNow._input.zoom = optsNow.zoom = viewNow.zoom;
-            optsNow._input.bearing = optsNow.bearing = viewNow.bearing;
-            optsNow._input.pitch = optsNow.pitch = viewNow.pitch;
-
-            gd.emit('plotly_relayout', self.getViewEdits(viewNow));
-        }
-        wheeling = false;
-    });
-
-    map.on('wheel', function() {
-        wheeling = true;
-    });
-
-    map.on('mousemove', function(evt) {
-        var bb = self.div.getBoundingClientRect();
-
-        // some hackery to get Fx.hover to work
-        evt.clientX = evt.point.x + bb.left;
-        evt.clientY = evt.point.y + bb.top;
-
-        evt.target.getBoundingClientRect = function() { return bb; };
-
-        self.xaxis.p2c = function() { return evt.lngLat.lng; };
-        self.yaxis.p2c = function() { return evt.lngLat.lat; };
-
-        Fx.hover(gd, evt, self.id);
-    });
-
-    function unhover() {
-        Fx.loneUnhover(fullLayout._toppaper);
-    }
-
-    map.on('dragstart', unhover);
-    map.on('zoomstart', unhover);
-
-    function emitUpdate() {
-        var viewNow = self.getView();
-        gd.emit('plotly_relayouting', self.getViewEdits(viewNow));
-    }
-
-    map.on('drag', emitUpdate);
-    map.on('zoom', emitUpdate);
-
-    map.on('dblclick', function() {
-        var optsNow = gd._fullLayout[self.id];
-        Registry.call('_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, self.getViewEdits(optsNow));
-
-        var viewInitial = self.viewInitial;
-        map.setCenter(convertCenter(viewInitial.center));
-        map.setZoom(viewInitial.zoom);
-        map.setBearing(viewInitial.bearing);
-        map.setPitch(viewInitial.pitch);
-
-        var viewNow = self.getView();
-        optsNow._input.center = optsNow.center = viewNow.center;
-        optsNow._input.zoom = optsNow.zoom = viewNow.zoom;
-        optsNow._input.bearing = optsNow.bearing = viewNow.bearing;
-        optsNow._input.pitch = optsNow.pitch = viewNow.pitch;
-
-        gd.emit('plotly_doubleclick', null);
-        gd.emit('plotly_relayout', self.getViewEdits(viewNow));
-    });
-
-    // define event handlers on map creation, to keep one ref per map,
-    // so that map.on / map.off in updateFx works as expected
-    self.clearSelect = function() {
-        gd._fullLayout._zoomlayer.selectAll('.select-outline').remove();
-    };
-
-    /**
-     * Returns a click handler function that is supposed
-     * to handle clicks in pan mode.
-     */
-    self.onClickInPanFn = function(dragOptions) {
-        return function(evt) {
-            var clickMode = gd._fullLayout.clickmode;
-
-            if(clickMode.indexOf('select') > -1) {
-                selectOnClick(evt.originalEvent, gd, [self.xaxis], [self.yaxis], self.id, dragOptions);
-            }
-
-            if(clickMode.indexOf('event') > -1) {
-                // TODO: this does not support right-click. If we want to support it, we
-                // would likely need to change mapbox to use dragElement instead of straight
-                // mapbox event binding. Or perhaps better, make a simple wrapper with the
-                // right mousedown, mousemove, and mouseup handlers just for a left/right click
-                // pie would use this too.
-                Fx.click(gd, evt.originalEvent);
-            }
-        };
-    };
+    }).catch(reject);
 };
 
 proto.fetchMapData = function(calcData) {
@@ -251,6 +140,7 @@ proto.fetchMapData = function(calcData) {
         return new Promise(function(resolve, reject) {
             d3.json(url, function(err, d) {
                 if(err) {
+                    delete PlotlyGeoAssets[url];
                     var msg = err.status === 404 ?
                         ('GeoJSON at URL ' + url + ' does not exist.') :
                         ('Unexpected error while fetching from ' + url);
@@ -305,7 +195,7 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
         self.updateData(calcData);
         self.updateLayout(fullLayout);
         self.resolveOnRender(resolve);
-    });
+    }).catch(reject);
 };
 
 var traceType2orderIndex = {
@@ -431,6 +321,141 @@ proto.createFramework = function(fullLayout) {
     Axes.setConvert(self.mockAxis, fullLayout);
 };
 
+proto.initFx = function(calcData, fullLayout) {
+    var self = this;
+    var gd = self.gd;
+    var map = self.map;
+
+    var wheeling = false;
+
+    // keep track of pan / zoom in user layout and emit relayout event
+    map.on('moveend', function(evt) {
+        if(!self.map) return;
+
+        var fullLayoutNow = gd._fullLayout;
+
+        // 'moveend' gets triggered by map.setCenter, map.setZoom,
+        // map.setBearing and map.setPitch.
+        //
+        // Here, we make sure that state updates amd 'plotly_relayout'
+        // are triggered only when the 'moveend' originates from a
+        // mouse target (filtering out API calls) to not
+        // duplicate 'plotly_relayout' events.
+
+        if(evt.originalEvent || wheeling) {
+            var optsNow = fullLayoutNow[self.id];
+            Registry.call('_storeDirectGUIEdit', gd.layout, fullLayoutNow._preGUI, self.getViewEdits(optsNow));
+
+            var viewNow = self.getView();
+            optsNow._input.center = optsNow.center = viewNow.center;
+            optsNow._input.zoom = optsNow.zoom = viewNow.zoom;
+            optsNow._input.bearing = optsNow.bearing = viewNow.bearing;
+            optsNow._input.pitch = optsNow.pitch = viewNow.pitch;
+
+            gd.emit('plotly_relayout', self.getViewEdits(viewNow));
+        }
+        wheeling = false;
+
+        if(fullLayoutNow._rehover) {
+            fullLayoutNow._rehover();
+        }
+    });
+
+    map.on('wheel', function() {
+        wheeling = true;
+    });
+
+    map.on('mousemove', function(evt) {
+        var bb = self.div.getBoundingClientRect();
+
+        // some hackery to get Fx.hover to work
+        evt.clientX = evt.point.x + bb.left;
+        evt.clientY = evt.point.y + bb.top;
+
+        evt.target.getBoundingClientRect = function() { return bb; };
+
+        self.xaxis.p2c = function() { return evt.lngLat.lng; };
+        self.yaxis.p2c = function() { return evt.lngLat.lat; };
+
+        gd._fullLayout._rehover = function() {
+            if(gd._fullLayout._hoversubplot === self.id) {
+                Fx.hover(gd, evt, self.id);
+            }
+        };
+
+        Fx.hover(gd, evt, self.id);
+        gd._fullLayout._hoversubplot = self.id;
+    });
+
+    function unhover() {
+        Fx.loneUnhover(fullLayout._hoverlayer);
+    }
+
+    map.on('dragstart', unhover);
+    map.on('zoomstart', unhover);
+
+    map.on('mouseout', function() {
+        gd._fullLayout._hoversubplot = null;
+    });
+
+    function emitUpdate() {
+        var viewNow = self.getView();
+        gd.emit('plotly_relayouting', self.getViewEdits(viewNow));
+    }
+
+    map.on('drag', emitUpdate);
+    map.on('zoom', emitUpdate);
+
+    map.on('dblclick', function() {
+        var optsNow = gd._fullLayout[self.id];
+        Registry.call('_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, self.getViewEdits(optsNow));
+
+        var viewInitial = self.viewInitial;
+        map.setCenter(convertCenter(viewInitial.center));
+        map.setZoom(viewInitial.zoom);
+        map.setBearing(viewInitial.bearing);
+        map.setPitch(viewInitial.pitch);
+
+        var viewNow = self.getView();
+        optsNow._input.center = optsNow.center = viewNow.center;
+        optsNow._input.zoom = optsNow.zoom = viewNow.zoom;
+        optsNow._input.bearing = optsNow.bearing = viewNow.bearing;
+        optsNow._input.pitch = optsNow.pitch = viewNow.pitch;
+
+        gd.emit('plotly_doubleclick', null);
+        gd.emit('plotly_relayout', self.getViewEdits(viewNow));
+    });
+
+    // define event handlers on map creation, to keep one ref per map,
+    // so that map.on / map.off in updateFx works as expected
+    self.clearSelect = function() {
+        gd._fullLayout._zoomlayer.selectAll('.select-outline').remove();
+    };
+
+    /**
+     * Returns a click handler function that is supposed
+     * to handle clicks in pan mode.
+     */
+    self.onClickInPanFn = function(dragOptions) {
+        return function(evt) {
+            var clickMode = gd._fullLayout.clickmode;
+
+            if(clickMode.indexOf('select') > -1) {
+                selectOnClick(evt.originalEvent, gd, [self.xaxis], [self.yaxis], self.id, dragOptions);
+            }
+
+            if(clickMode.indexOf('event') > -1) {
+                // TODO: this does not support right-click. If we want to support it, we
+                // would likely need to change mapbox to use dragElement instead of straight
+                // mapbox event binding. Or perhaps better, make a simple wrapper with the
+                // right mousedown, mousemove, and mouseup handlers just for a left/right click
+                // pie would use this too.
+                Fx.click(gd, evt.originalEvent);
+            }
+        };
+    };
+};
+
 proto.updateFx = function(fullLayout) {
     var self = this;
     var map = self.map;

test/jasmine/tests/mapbox_test.js

@@ -1292,6 +1292,72 @@ describe('@noCI, mapbox plots', function() {
     }
 });
 
+describe('@noCI Test mapbox GeoJSON fetching:', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(function(done) {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+        setTimeout(done, 200);
+    });
+
+    it('@gl should fetch GeoJSON using URLs found in the traces', function(done) {
+        var url = 'https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json';
+        var url2 = 'https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json';
+        var cnt = 0;
+
+        Plotly.plot(gd, [{
+            type: 'choroplethmapbox',
+            locations: ['a'],
+            z: [1],
+            geojson: url
+        }, {
+            type: 'choroplethmapbox',
+            locations: ['a'],
+            z: [1],
+            geojson: url2
+        }])
+        .catch(function() {
+            cnt++;
+        })
+        .then(function() {
+            expect(cnt).toBe(0, 'no failures!');
+            expect(Lib.isPlainObject(window.PlotlyGeoAssets[url])).toBe(true, 'is a GeoJSON object');
+            expect(Lib.isPlainObject(window.PlotlyGeoAssets[url2])).toBe(true, 'is a GeoJSON object');
+        })
+        .then(done);
+    });
+
+    it('@gl should fetch GeoJSON using URLs found in the traces', function(done) {
+        var actual = '';
+
+        Plotly.plot(gd, [{
+            type: 'choroplethmapbox',
+            locations: ['a'],
+            z: [1],
+            geojson: 'invalidUrl'
+        }, {
+            type: 'choroplethmapbox',
+            locations: ['a'],
+            z: [1],
+            geojson: 'invalidUrl-two'
+        }])
+        .catch(function(reason) {
+            // bails up after first failure
+            actual = reason;
+        })
+        .then(function() {
+            expect(actual).toEqual(new Error('GeoJSON at URL invalidUrl does not exist.'));
+            expect(window.PlotlyGeoAssets.invalidUrl).toBe(undefined);
+        })
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
+});
+
 describe('@noCI, mapbox toImage', function() {
     // decreased from 1e5 - perhaps chrome got better at encoding these
     // because I get 99330 and the image still looks correct