Skip to content

Commit

Permalink
fix uirevision behavior on mapbox subplots
Browse files Browse the repository at this point in the history 
... and remove `self.opts` use `self.gd._fullLayout[self.id]`
    instead, which always points to the correct container
    even on redraw-less updates
  • Loading branch information
@etpinard
etpinard committed Jan 3, 2019
1 parent 8151197 commit 4b8a05b
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 37 deletions.
74 changes: 37 additions & 37 deletions src/plots/mapbox/mapbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,6 @@ function Mapbox(opts) {
// unique id for this Mapbox instance
this.uid = fullLayout._uid + '-' + this.id;

// full mapbox options (N.B. needs to be updated on every updates)
this.opts = fullLayout[this.id];

// create framework on instantiation for a smoother first plot call
this.div = null;
this.xaxis = null;
Expand All @@ -57,9 +54,7 @@ module.exports = function createMapbox(opts) {

proto.plot = function(calcData, fullLayout, promises) {
var self = this;

// feed in new mapbox options
var opts = self.opts = fullLayout[this.id];
var opts = fullLayout[self.id];

// remove map and create a new map if access token has change
if(self.map && (opts.accesstoken !== self.accessToken)) {
Expand Down Expand Up @@ -88,7 +83,7 @@ proto.plot = function(calcData, fullLayout, promises) {
proto.createMap = function(calcData, fullLayout, resolve, reject) {
var self = this;
var gd = self.gd;
var opts = self.opts;
var opts = fullLayout[self.id];

// store style id and URL or object
var styleObj = self.styleObj = getStyleObj(opts.style);
Expand Down Expand Up @@ -147,14 +142,16 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
// duplicate 'plotly_relayout' events.

if(eventData.originalEvent || wheeling) {
var view = self.getView();
var optsNow = gd._fullLayout[self.id];
Registry.call('_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, self.getViewEdits(optsNow));

opts._input.center = opts.center = view.center;
opts._input.zoom = opts.zoom = view.zoom;
opts._input.bearing = opts.bearing = view.bearing;
opts._input.pitch = opts.pitch = view.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;

emitRelayoutFromView(view);
gd.emit('plotly_relayout', self.getViewEdits(viewNow));
}
wheeling = false;
});
Expand Down Expand Up @@ -186,35 +183,25 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
map.on('zoomstart', unhover);

map.on('dblclick', function() {
gd.emit('plotly_doubleclick', null);
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;

opts._input.center = opts.center = viewNow.center;
opts._input.zoom = opts.zoom = viewNow.zoom;
opts._input.bearing = opts.bearing = viewNow.bearing;
opts._input.pitch = opts.pitch = viewNow.pitch;

emitRelayoutFromView(viewNow);
gd.emit('plotly_doubleclick', null);
gd.emit('plotly_relayout', self.getViewEdits(viewNow));
});

function emitRelayoutFromView(view) {
var id = self.id;
var evtData = {};
for(var k in view) {
evtData[id + '.' + k] = view[k];
}
Registry.call('_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, evtData);
gd.emit('plotly_relayout', evtData);
}

// 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() {
Expand Down Expand Up @@ -248,10 +235,11 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
proto.updateMap = function(calcData, fullLayout, resolve, reject) {
var self = this;
var map = self.map;
var opts = fullLayout[this.id];

self.rejectOnError(reject);

var styleObj = getStyleObj(self.opts.style);
var styleObj = getStyleObj(opts.style);

if(self.styleObj.id !== styleObj.id) {
self.styleObj = styleObj;
Expand Down Expand Up @@ -309,14 +297,14 @@ proto.updateData = function(calcData) {

proto.updateLayout = function(fullLayout) {
var map = this.map;
var opts = this.opts;
var opts = fullLayout[this.id];

map.setCenter(convertCenter(opts.center));
map.setZoom(opts.zoom);
map.setBearing(opts.bearing);
map.setPitch(opts.pitch);

this.updateLayers();
this.updateLayers(fullLayout);
this.updateFramework(fullLayout);
this.updateFx(fullLayout);
this.map.resize();
Expand Down Expand Up @@ -463,8 +451,8 @@ proto.updateFramework = function(fullLayout) {
this.yaxis._length = size.h * (domain.y[1] - domain.y[0]);
};

proto.updateLayers = function() {
var opts = this.opts;
proto.updateLayers = function(fullLayout) {
var opts = fullLayout[this.id];
var layers = opts.layers;
var layerList = this.layerList;
var i;
Expand Down Expand Up @@ -519,7 +507,6 @@ proto.project = function(v) {
// get map's current view values in plotly.js notation
proto.getView = function() {
var map = this.map;

var mapCenter = map.getCenter();
var center = { lon: mapCenter.lng, lat: mapCenter.lat };

Expand All @@ -531,6 +518,19 @@ proto.getView = function() {
};
};

proto.getViewEdits = function(cont) {
var id = this.id;
var keys = ['center', 'zoom', 'bearing', 'pitch'];
var obj = {};

for(var i = 0; i < keys.length; i++) {
var k = keys[i];
obj[id + '.' + k] = cont[k];
}

return obj;
};

function getStyleObj(val) {
var styleValues = layoutAttributes.style.values;
var styleDflt = layoutAttributes.style.dflt;
Expand Down
74 changes: 74 additions & 0 deletions test/jasmine/tests/plot_api_react_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1930,4 +1930,78 @@ describe('Test Plotly.react + interactions under uirevision:', function() {
.catch(failTest)
.then(done);
});

it('@gl mapbox subplots should preserve viewport changes after panning', function(done) {
Plotly.setPlotConfig({
mapboxAccessToken: MAPBOX_ACCESS_TOKEN
});

function _react() {
return Plotly.react(gd, [{
type: 'scattermapbox',
lon: [3, 1, 2],
lat: [2, 3, 1]
}], {
width: 500,
height: 500,
uirevision: true
});
}

// see mapbox_test.js for rationale
function _mouseEvent(type, pos) {
return new Promise(function(resolve) {
mouseEvent(type, pos[0], pos[1]);
setTimeout(resolve, 100);
});
}

// see mapbox_test.js for rationale
function _drag(p0, p1) {
return _mouseEvent('mousemove', p0)
.then(function() { return _mouseEvent('mousedown', p0); })
.then(function() { return _mouseEvent('mousemove', p1); })
.then(function() { return _mouseEvent('mousemove', p1); })
.then(function() { return _mouseEvent('mouseup', p1); })
.then(function() { return _mouseEvent('mouseup', p1); });
}

// should be same before & after 2nd react()
function _assertGUI(msg) {
var TOL = 2;

var mapbox = gd.layout.mapbox || {};
expect((mapbox.center || {}).lon).toBeCloseTo(-17.578, TOL, msg);
expect((mapbox.center || {}).lat).toBeCloseTo(17.308, TOL, msg);
expect(mapbox.zoom).toBe(1);

var fullMapbox = gd._fullLayout.mapbox || {};
expect(fullMapbox.center.lon).toBeCloseTo(-17.578, TOL, msg);
expect(fullMapbox.center.lat).toBeCloseTo(17.308, TOL, msg);
expect(fullMapbox.zoom).toBe(1);

var preGUI = gd._fullLayout._preGUI;
expect(preGUI['mapbox.center.lon']).toBe(null, msg);
expect(preGUI['mapbox.center.lat']).toBe(null, msg);
expect(preGUI['mapbox.zoom']).toBe(null, msg);
}

_react()
.then(function() {
expect(gd.layout.mapbox).toEqual({});

var fullMapbox = gd._fullLayout.mapbox;
expect(fullMapbox.center.lon).toBe(0);
expect(fullMapbox.center.lat).toBe(0);
expect(fullMapbox.zoom).toBe(1);

expect(gd._fullLayout._preGUI).toEqual({});
})
.then(function() { return _drag([200, 200], [250, 250]); })
.then(function() { _assertGUI('before'); })
.then(_react)
.then(function() { _assertGUI('after'); })
.catch(failTest)
.then(done);
});
});

0 comments on commit 4b8a05b

Please sign in to comment.