Skip to content

Trigger plotly_relayout event when camera is reset to default or saved (Solves #FI29) #458

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
merged 4 commits into from
Apr 21, 2016
Merged

Trigger plotly_relayout event when camera is reset to default or saved (Solves #FI29) #458

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d6037c0
#29 add plotly_relayout event emission when camera is reset to defaul…
monfera Apr 21, 2016
8dedb6e
#29 add test cases (they're in the CI excluded file but they pass fin…
monfera Apr 21, 2016
ff1d418
#29 different camera format, and ensuing code unification
monfera Apr 21, 2016
57b2650
#29 ensure one call per scene, checking against correct callback argu…
monfera Apr 21, 2016
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
12 changes: 8 additions & 4 deletions src/plots/gl3d/scene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,11 +559,13 @@ proto.destroy = function() {
// for reset camera button in mode bar
proto.setCameraToDefault = function setCameraToDefault() {
// as in Gl3d.layoutAttributes
this.glplot.camera.lookAt(
var lookAtInput = [
[1.25, 1.25, 1.25],
[0, 0, 0],
[0, 0, 1]
);
];
this.glplot.camera.lookAt.apply(this, lookAtInput);
this.graphDiv.emit('plotly_relayout', lookAtInput);
Copy link
Contributor

Choose a reason for hiding this comment

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

We could do even better passing the corresponding camera attribute update object e.g:

this.graphDiv.emit('plotly_relayout', {
  scene: {
    eye: { x: 1.25, y: 1.25, z: 1.25 },
    center: { x: 0, y: 0, z: 0 },
    up: { x: 0, y: 0, z: 1 }
  }
});

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@etpinard I'm glad to refactor for it; I'll extract the object-to-array logic into a separate function so we can be DRY among these two emit places.

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

Copy link
Contributor

@etpinard etpinard Apr 21, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Oh. To handle the mulit-scene case ⏫ should in fact be:

var update = {};

update[this.id] = {
    eye: { x: 1.25, y: 1.25, z: 1.25 },
    center: { x: 0, y: 0, z: 0 },
    up: { x: 0, y: 0, z: 1 }
  };

this.graphDiv.emit('plotly_relayout', update);

where this.id can be scene, scene2, scene3, etc.

};

// get camera position in plotly coords from 'orbit-camera' coords
Expand All @@ -586,11 +588,13 @@ proto.setCamera = function setCamera(cameraData) {
var up = cameraData.up;
var center = cameraData.center;
var eye = cameraData.eye;
this.glplot.camera.lookAt(
var lookAtInput = [
Copy link
Contributor

Choose a reason for hiding this comment

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

similarly here.

[eye.x, eye.y, eye.z],
[center.x, center.y, center.z],
[up.x, up.y, up.z]
);
];
this.glplot.camera.lookAt.apply(this, lookAtInput);
this.graphDiv.emit('plotly_relayout', lookAtInput);
};

// save camera to user layout (i.e. gd.layout)
Expand Down
27 changes: 26 additions & 1 deletion test/jasmine/tests/gl_plot_interact_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ describe('Test gl plot interactions', function() {
});

describe('gl3d modebar click handlers', function() {
var modeBar;
var modeBar, relayoutCallback;

beforeEach(function(done) {
var mockData = [{
Expand All @@ -245,8 +245,13 @@ describe('Test gl plot interactions', function() {

gd = createGraphDiv();
Plotly.plot(gd, mockData, mockLayout).then(function() {

modeBar = gd._fullLayout._modeBar;

relayoutCallback = jasmine.createSpy('relayoutCallback');

gd.on('plotly_relayout', relayoutCallback);

delay(done);
});
});
Expand Down Expand Up @@ -342,7 +347,16 @@ describe('Test gl plot interactions', function() {
.toEqual({x: 2.5, y: 2.5, z: 2.5});

selectButton(modeBar, 'resetCameraDefault3d').click();

setTimeout(function() {

expect(relayoutCallback).toHaveBeenCalled(); // initiator: resetCameraDefault3d
expect(relayoutCallback).toHaveBeenCalledWith([
[1.25, 1.25, 1.25],
[0, 0, 0],
[0, 0, 1]
]);

expect(sceneLayout.camera.eye)
.toEqual({x: 0.1, y: 0.1, z: 1}, 'does not change the layout objects');
expect(scene.camera.eye)
Expand All @@ -353,7 +367,16 @@ describe('Test gl plot interactions', function() {
.toBeCloseToArray([1.25, 1.25, 1.25], 4);

selectButton(modeBar, 'resetCameraLastSave3d').click();

setTimeout(function() {

expect(relayoutCallback).toHaveBeenCalled(); // initiator: resetCameraLastSave3d
expect(relayoutCallback).toHaveBeenCalledWith([
[1.25, 1.25, 1.25],
[0, 0, 0],
[0, 0, 1]
]); // looks like there's no real saved data so it reverts to default

expect(sceneLayout.camera.eye)
.toEqual({x: 0.1, y: 0.1, z: 1}, 'does not change the layout objects');
expect(scene.camera.eye)
Expand All @@ -364,7 +387,9 @@ describe('Test gl plot interactions', function() {
.toBeCloseToArray([2.5, 2.5, 2.5], 4);

done();

}, MODEBAR_DELAY);

}, MODEBAR_DELAY);
});
});
Expand Down