Skip to content

Include gl3d scene.aspectmode changes in relayout updates#4579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
archmoj merged 5 commits into from
Feb 14, 2020
Merged

Include gl3d scene.aspectmode changes in relayout updates #4579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c50559a
include aspectmode changes in relayout updates
archmoj Feb 13, 2020
20d4b3c
improve tests for aspectmode in relayouts
archmoj Feb 13, 2020
1fdc49c
keep track of gl3d scene.aspectmode for modebar buttons
archmoj Feb 13, 2020
6ae2809
improve aspectmode tests
archmoj Feb 13, 2020
c730f12
record initial aspectmode safely
archmoj Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/modebar/buttons.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -346,6 +346,7 @@ function handleCamera3d(gd, ev) {
var sceneId = sceneIds[i];
var camera = sceneId + '.camera';
var aspectratio = sceneId + '.aspectratio';
var aspectmode = sceneId + '.aspectmode';
var scene = fullLayout[sceneId]._scene;
var didUpdate;

Expand All@@ -365,6 +366,7 @@ function handleCamera3d(gd, ev) {
aobj[aspectratio + '.x'] = scene.viewInitial.aspectratio.x;
aobj[aspectratio + '.y'] = scene.viewInitial.aspectratio.y;
aobj[aspectratio + '.z'] = scene.viewInitial.aspectratio.z;
aobj[aspectmode] = scene.viewInitial.aspectmode;
}
}

Expand Down
14 changes: 11 additions & 3 deletions src/plots/gl3d/scene.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -155,7 +155,7 @@ proto.tryCreatePlot = function() {
'webgl setup failed possibly due to',
isMobile ? 'disabling' : 'enabling',
'preserveDrawingBuffer config.',
'The device may not be supported by isMobile module!',
'The device may not be supported by is-mobile module!',
'Inverting preserveDrawingBuffer option in second attempt to create webgl scene.'
].join(' '));
isMobile = opts.glOptions.preserveDrawingBuffer = !opts.glOptions.preserveDrawingBuffer;
Expand DownExpand Up@@ -219,6 +219,12 @@ proto.initializeGLPlot = function() {
if(scene.isAspectChanged(layout)) {
// scene updates
update[scene.id + '.aspectratio'] = scene.glplot.getAspectratio();

if(layout[scene.id].aspectmode !== 'manual') {

@etpinardetpinardFeb 13, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do we get back to the original aspectmode ?

@archmojarchmojFeb 13, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we?

@etpinardetpinardFeb 13, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When resetting the view (e.g via the modebar buttons), yes.

@archmojarchmojFeb 13, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. I think we have some tests related to that.

@archmojarchmojFeb 13, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

plotly.js/test/jasmine/tests/plot_api_test.js

Lines 394 to 411 in 4d24c36

it('sets aspectmode to manual when you provide any aspectratio',function(done){
Plotly.plot(gd,[{x: [1,2],y: [1,2],z: [1,2],type: 'scatter3d'}])
.then(function(){
expect(gd.layout.scene.aspectmode).toBe('auto');
returnPlotly.relayout(gd,{'scene.aspectratio.x': 2});
})
.then(function(){
expect(gd.layout.scene.aspectmode).toBe('manual');
returnQueue.undo(gd);
})
.then(function(){
expect(gd.layout.scene.aspectmode).toBe('auto');
})
.catch(failTest)
.then(done);
});

@etpinardetpinardFeb 13, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, to be clear, once a user scrolls into a orthographic scene, the aspectmode is turned to 'manual' and the only way to get back to original aspectmode is by resetting the view?

@archmojarchmojFeb 13, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or we should keep that in viewInitial props?

@etpinardetpinardFeb 13, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is it handled currently?

@archmojarchmojFeb 13, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

apsectmode added to viewInitial in 1fdc49c and tests are added in 6ae2809.

scene.fullSceneLayout.aspectmode =
layout[scene.id].aspectmode =
update[scene.id + '.aspectmode'] = 'manual';
}
}

return update;
Expand DownExpand Up@@ -246,7 +252,6 @@ proto.initializeGLPlot = function() {
y: s * o.y,
z: s * o.z
});
scene.fullSceneLayout.aspectmode = layout[scene.id].aspectmode = 'manual';
}

relayoutCallback(scene);
Expand DownExpand Up@@ -778,14 +783,17 @@ proto.plot = function(sceneData, fullLayout, layout) {
*/
scene.glplot.setAspectratio(fullSceneLayout.aspectratio);

// save 'initial' camera view settings for modebar button
// save 'initial' aspectratio & aspectmode view settings for modebar buttons
if(!scene.viewInitial.aspectratio) {
scene.viewInitial.aspectratio = {
x: fullSceneLayout.aspectratio.x,
y: fullSceneLayout.aspectratio.y,
z: fullSceneLayout.aspectratio.z
};
}
if(!scene.viewInitial.aspectmode) {
scene.viewInitial.aspectmode = fullSceneLayout.aspectmode;

@etpinardetpinardFeb 14, 2020•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be

if(!scene.viewInitial.aspectmode){scene.viewInitial.aspectmode=fullSceneLayout.aspectmode}

that way we don't override viewInitia.aspectmodel on updates?

@archmojarchmojFeb 14, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call.
We could. Done in c730f12.

}

// Update frame position for multi plots
var domain = fullSceneLayout.domain || null;
Expand Down
63 changes: 58 additions & 5 deletions test/jasmine/tests/gl3d_plot_interact_test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -575,13 +575,19 @@ describe('Test gl3d modebar handlers - perspective case', function() {
buttonDefault.click();
});

it('@gl button resetCameraDefault3d should reset to initial aspectratios', function(done) {
it('@gl button resetCameraDefault3d should reset to initial aspectmode & aspectratios', function(done) {
var buttonDefault = selectButton(modeBar, 'resetCameraDefault3d');

expect(gd._fullLayout.scene._scene.viewInitial.aspectmode).toEqual('auto');
expect(gd._fullLayout.scene2._scene.viewInitial.aspectmode).toEqual('manual');

expect(gd._fullLayout.scene._scene.viewInitial.aspectratio).toEqual({ x: 1, y: 1, z: 1 });
expect(gd._fullLayout.scene2._scene.viewInitial.aspectratio).toEqual({ x: 3, y: 2, z: 1 });

gd.once('plotly_relayout', function() {
expect(gd._fullLayout.scene._scene.fullSceneLayout.aspectmode).toBe('auto');
expect(gd._fullLayout.scene2._scene.fullSceneLayout.aspectmode).toBe('manual');

expect(gd._fullLayout.scene._scene.glplot.getAspectratio().x).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().y).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().z).toBeCloseTo(1);
Expand All@@ -595,9 +601,12 @@ describe('Test gl3d modebar handlers - perspective case', function() {
buttonDefault.click();
});

it('@gl button resetCameraLastSave3d should reset to initial aspectratios', function(done) {
it('@gl button resetCameraLastSave3d should reset to initial aspectmode & aspectratios', function(done) {
var buttonDefault = selectButton(modeBar, 'resetCameraDefault3d');

expect(gd._fullLayout.scene._scene.viewInitial.aspectmode).toEqual('auto');
expect(gd._fullLayout.scene2._scene.viewInitial.aspectmode).toEqual('manual');

expect(gd._fullLayout.scene._scene.viewInitial.aspectratio).toEqual({ x: 1, y: 1, z: 1 });
expect(gd._fullLayout.scene2._scene.viewInitial.aspectratio).toEqual({ x: 3, y: 2, z: 1 });

Expand DownExpand Up@@ -771,13 +780,19 @@ describe('Test gl3d modebar handlers - orthographic case', function() {
buttonDefault.click();
});

it('@gl button resetCameraDefault3d should reset to initial aspectratios', function(done) {
it('@gl button resetCameraDefault3d should reset to initial aspectmode & aspectratios', function(done) {
var buttonDefault = selectButton(modeBar, 'resetCameraDefault3d');

expect(gd._fullLayout.scene._scene.viewInitial.aspectmode).toEqual('auto');
expect(gd._fullLayout.scene2._scene.viewInitial.aspectmode).toEqual('manual');

expect(gd._fullLayout.scene._scene.viewInitial.aspectratio).toEqual({ x: 1, y: 1, z: 1 });
expect(gd._fullLayout.scene2._scene.viewInitial.aspectratio).toEqual({ x: 3, y: 2, z: 1 });

gd.once('plotly_relayout', function() {
expect(gd._fullLayout.scene._scene.aspectmode).toEqual(undefined);
expect(gd._fullLayout.scene2._scene.aspectmode).toEqual(undefined);

expect(gd._fullLayout.scene._scene.glplot.getAspectratio().x).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().y).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().z).toBeCloseTo(1);
Expand All@@ -791,13 +806,19 @@ describe('Test gl3d modebar handlers - orthographic case', function() {
buttonDefault.click();
});

it('@gl button resetCameraLastSave3d should reset to initial aspectratios', function(done) {
it('@gl button resetCameraLastSave3d should reset to initial aspectmode & aspectratios', function(done) {
var buttonDefault = selectButton(modeBar, 'resetCameraDefault3d');

expect(gd._fullLayout.scene._scene.viewInitial.aspectmode).toEqual('auto');
expect(gd._fullLayout.scene2._scene.viewInitial.aspectmode).toEqual('manual');

expect(gd._fullLayout.scene._scene.viewInitial.aspectratio).toEqual({ x: 1, y: 1, z: 1 });
expect(gd._fullLayout.scene2._scene.viewInitial.aspectratio).toEqual({ x: 3, y: 2, z: 1 });

gd.once('plotly_relayout', function() {
expect(gd._fullLayout.scene._scene.fullSceneLayout.aspectmode).toBe('auto');
expect(gd._fullLayout.scene2._scene.fullSceneLayout.aspectmode).toBe('manual');

expect(gd._fullLayout.scene._scene.glplot.getAspectratio().x).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().y).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().z).toBeCloseTo(1);
Expand DownExpand Up@@ -1175,7 +1196,7 @@ describe('Test gl3d drag and wheel interactions', function() {
.then(done);
});

it('@gl should update the scene aspectratio when zooming with scroll wheel i.e. orthographic case', function(done) {
it('@gl should update the scene aspectmode & aspectratio when zooming with scroll wheel i.e. orthographic case', function(done) {
var sceneLayout, sceneLayout2, sceneTarget, sceneTarget2;

var mock = {
Expand All@@ -1192,8 +1213,13 @@ describe('Test gl3d drag and wheel interactions', function() {
var aspectratio;
var relayoutEvent;
var relayoutCnt = 0;
var modeBar;

Plotly.plot(gd, mock)
.then(delay(20))
.then(function() {
modeBar = gd._fullLayout._modeBar;
})
.then(function() {
gd.on('plotly_relayout', function(e) {
relayoutCnt++;
Expand All@@ -1218,6 +1244,9 @@ describe('Test gl3d drag and wheel interactions', function() {
expect(aspectratio.x).toBeCloseTo(0.909, 3, 'aspectratio.x');
expect(aspectratio.y).toBeCloseTo(0.909, 3, 'aspectratio.y');
expect(aspectratio.z).toBeCloseTo(0.909, 3, 'aspectratio.z');

expect(relayoutEvent['scene.aspectmode']).toBe('manual');
expect(gd._fullLayout.scene._scene.fullSceneLayout.aspectmode).toBe('manual');
})
.then(function() {
return scroll(sceneTarget2);
Expand All@@ -1229,6 +1258,25 @@ describe('Test gl3d drag and wheel interactions', function() {
expect(aspectratio.x).toBeCloseTo(2.727, 3, 'aspectratio.x');
expect(aspectratio.y).toBeCloseTo(1.818, 3, 'aspectratio.y');
expect(aspectratio.z).toBeCloseTo(0.909, 3, 'aspectratio.z');

expect(relayoutEvent['scene2.aspectmode']).toBe('manual');
expect(gd._fullLayout.scene2._scene.fullSceneLayout.aspectmode).toBe('manual');
})
.then(function() {
var buttonDefault = selectButton(modeBar, 'resetCameraDefault3d');

buttonDefault.click();
})
.then(function() {
expect(gd._fullLayout.scene._scene.aspectmode).toEqual(undefined);
expect(gd._fullLayout.scene2._scene.aspectmode).toEqual(undefined);

expect(gd._fullLayout.scene._scene.glplot.getAspectratio().x).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().y).toBeCloseTo(1);
expect(gd._fullLayout.scene._scene.glplot.getAspectratio().z).toBeCloseTo(1);
expect(gd._fullLayout.scene2._scene.glplot.getAspectratio().x).toBeCloseTo(3);
expect(gd._fullLayout.scene2._scene.glplot.getAspectratio().y).toBeCloseTo(2);
expect(gd._fullLayout.scene2._scene.glplot.getAspectratio().z).toBeCloseTo(1);
})
.catch(failTest)
.then(done);
Expand DownExpand Up@@ -1279,6 +1327,7 @@ describe('Test gl3d drag and wheel interactions', function() {
Object.keys(relayoutEvent).sort().forEach(function(key) {
expect(Object.keys(events[0])).toContain(key);
expect(key).not.toBe('scene.aspectratio');
expect(key).not.toBe('scene.aspectmode');
});
})
.catch(failTest)
Expand DownExpand Up@@ -1329,6 +1378,7 @@ describe('Test gl3d drag and wheel interactions', function() {
Object.keys(relayoutEvent).sort().forEach(function(key) {
expect(Object.keys(events[0])).toContain(key);
expect(key).not.toBe('scene.aspectratio');
expect(key).not.toBe('scene.aspectmode');
});
})
.catch(failTest)
Expand DownExpand Up@@ -1456,6 +1506,9 @@ describe('Test gl3d drag and wheel interactions', function() {
expect(aspectratio.x).toBeCloseTo(0.816, 3, 'aspectratio.x');
expect(aspectratio.y).toBeCloseTo(0.725, 3, 'aspectratio.y');
expect(aspectratio.z).toBeCloseTo(1.269, 3, 'aspectratio.z');

expect(relayoutEvent['scene.aspectmode']).toBe('manual');
expect(gd._fullLayout.scene._scene.fullSceneLayout.aspectmode).toBe('manual');
})
.then(function() {
// select a point
Expand Down