Skip to content
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

Layer fix #2121

Merged
merged 5 commits into from
Oct 27, 2017
+72 −36
Merged

Layer fix #2121

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
af9f8f9
move layer: above shapes and images to toppaper
alexcjohnson Oct 25, 2017
0162797
move updatemenus to their own layer above infolayer
alexcjohnson Oct 25, 2017
5039aa5
fix shape editing
alexcjohnson Oct 26, 2017
4e627d9
fix updatemenu test
alexcjohnson Oct 26, 2017
e0a10af
keep dropdown button container on top when new menus are added
alexcjohnson Oct 27, 2017
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: 1 addition & 1 deletion src/components/shapes/draw.js
View file
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ function draw(gd) {
function drawOne(gd, index) {
// remove the existing shape if there is one.
// because indices can change, we need to look in all shape layers
gd._fullLayout._paper
gd._fullLayout._paperdiv
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Really we should just move shapes (and annotations for that matter) to the standard d3 update pattern like images already use (and which did not require this kind of change to adapt to the changed layering)... but that's a bigger project than I had an appetite for right now!

Copy link
Contributor

Choose a reason for hiding this comment

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

but that's a bigger project than I had an appetite for right now!

Fixing two 🪲 in one PR, but hungry for more 🍔

.selectAll('.shapelayer [data-index="' + index + '"]')
.remove();

18 changes: 10 additions & 8 deletions src/components/updatemenus/draw.js
View file
Original file line number Diff line number Diff line change
@@ -54,7 +54,7 @@ module.exports = function draw(gd) {
*/

// draw update menu container
var menus = fullLayout._infolayer
var menus = fullLayout._menulayer
Copy link
Contributor

Choose a reason for hiding this comment

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

Ha I guess that does it. I first thought about splitting the updatemenu buttons from their header <g> i.e. the header would have remained in <g infolayer> and the buttons moved to <g menulayer>.

Can anyone think of a situation where one would want to place an updatemenu below other <g infolayer> features?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I can't see when you'd want the updatemenu below anything else, but I guess it could be useful to separate <g menulayer> itself into two pieces, so that regardless of the order you draw the menus, when they open up the transient parts will be on top. The only case I can think of that would really need this is if you have two menus that each overlaps the other when opened - one above that opens downward and one below that opens upward for example. If you have a lot of menus that might become necessary at times.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updatemenus were already smart enough to put the dropdown buttons (but not always-visible buttons) on top - exactly what I was suggesting 🎉 🏆 But there was a bug with this that if a new menu was added when other menus already existed, this would get added on top of the dropdown buttons -> fixed in e0a10af

.selectAll('g.' + constants.containerClassName)
.data(menuData.length > 0 ? [0] : []);

@@ -97,6 +97,9 @@ module.exports = function draw(gd) {

// remove exiting header, remove dropped buttons and reset margins
if(headerGroups.enter().size()) {
// make sure gButton is on top of all headers
gButton.node().parentNode.appendChild(gButton.node());
Copy link
Contributor

Choose a reason for hiding this comment

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

Nicely done.


gButton
.call(removeAllButtons)
.attr(constants.menuIndexAttrName, '-1');
@@ -135,13 +138,12 @@ module.exports = function draw(gd) {
});
};

/**
* get only visible menus for display
*/
function makeMenuData(fullLayout) {
var contOpts = fullLayout[constants.name],
menuData = [];

// Filter visible dropdowns and attach '_index' to each
// fullLayout options object to be used for 'object constancy'
// in the data join key function.
var contOpts = fullLayout[constants.name];
var menuData = [];

for(var i = 0; i < contOpts.length; i++) {
var item = contOpts[i];
@@ -154,7 +156,7 @@ function makeMenuData(fullLayout) {

// Note that '_index' is set at the default step,
// it corresponds to the menu index in the user layout update menu container.
// Because a menu can b set invisible,
// Because a menu can be set invisible,
// this is a more 'consistent' field than the index in the menuData.
function keyFunction(menuOpts) {
return menuOpts._index;
20 changes: 10 additions & 10 deletions src/plot_api/plot_api.js
View file
Original file line number Diff line number Diff line change
@@ -2830,25 +2830,25 @@ function makePlotFramework(gd) {
// single geo layer for the whole plot
fullLayout._geolayer = fullLayout._paper.append('g').classed('geolayer', true);

// upper shape layer
// (only for shapes to be drawn above the whole plot, including subplots)
var layerAbove = fullLayout._paper.append('g')
.classed('layer-above', true);
fullLayout._imageUpperLayer = layerAbove.append('g')
.classed('imagelayer', true);
fullLayout._shapeUpperLayer = layerAbove.append('g')
.classed('shapelayer', true);

// single pie layer for the whole plot
fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);

// fill in image server scrape-svg
fullLayout._glimages = fullLayout._paper.append('g').classed('glimages', true);

// lastly info (legend, annotations) and hover layers go on top
// lastly upper shapes, info (legend, annotations) and hover layers go on top
// these are in a different svg element normally, but get collapsed into a single
// svg when exporting (after inserting 3D)
// upper shapes/images are only those drawn above the whole plot, including subplots
var layerAbove = fullLayout._toppaper.append('g')
.classed('layer-above', true);
fullLayout._imageUpperLayer = layerAbove.append('g')
.classed('imagelayer', true);
fullLayout._shapeUpperLayer = layerAbove.append('g')
.classed('shapelayer', true);

fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true);
fullLayout._menulayer = fullLayout._toppaper.append('g').classed('menulayer', true);
fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true);
fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true);

Binary file modified test/image/baselines/pie_style.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/updatemenus.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 24 additions & 1 deletion test/image/mocks/pie_style.json
View file
Original file line number Diff line number Diff line change
@@ -30,6 +30,29 @@
"height": 400,
"width": 500,
"paper_bgcolor": "#ddd",
"showlegend": false
"showlegend": false,
"shapes": [{
"type": "rect",
"xref": "paper",
"yref": "paper",
"x0": 0,
"y0": 0.4,
"x1": 1,
"y1": 0.6,
"fillcolor": "rgba(128, 0, 0, 0.5)",
"line": {"width": 0},
"layer": "below"
}, {
"type": "rect",
"xref": "paper",
"yref": "paper",
"x0": 0.4,
"y0": 0,
"x1": 0.6,
"y1": 1,
"fillcolor": "rgba(0, 0, 128, 0.5)",
"line": {"width": 0},
"layer": "above"
}]
}
}
20 changes: 17 additions & 3 deletions test/image/mocks/updatemenus.json
View file
Original file line number Diff line number Diff line change
@@ -79,6 +79,16 @@
},
"visible": false,
"name": "Data set 3"
},
{
"x": [2, 3, 4],
"y": [0.4, 0.6, 0.8],
"z": [[1, 2], [3, 4]],
"type": "heatmap",
"colorbar": {
"x": -0.2,
"y": 0.6
}
}
],
"layout": {
@@ -123,7 +133,8 @@
true,
false,
false,
false
false,
true
]
],
"label": "Data set 0"
@@ -136,7 +147,8 @@
false,
true,
false,
false
false,
true
]
],
"label": "Data set 1"
@@ -149,7 +161,8 @@
false,
false,
true,
false
false,
true
]
],
"label": "Data set 2"
@@ -162,6 +175,7 @@
false,
false,
false,
true,
true
]
],
23 changes: 10 additions & 13 deletions test/jasmine/tests/updatemenus_test.js
View file
Original file line number Diff line number Diff line change
@@ -671,6 +671,10 @@ describe('update menus interactions', function() {
// fold up buttons whenever new menus are added
assertMenus([0, 0]);

// dropdown buttons container should still be on top of headers (and non-dropdown buttons)
var gButton = d3.select('.updatemenu-dropdown-button-group');
expect(gButton.node().nextSibling).toBe(null);

return Plotly.relayout(gd, {
'updatemenus[0].bgcolor': null,
'paper_bgcolor': 'black'
@@ -826,7 +830,7 @@ describe('update menus interaction with other components:', function() {

afterEach(destroyGraphDiv);

it('buttons show be drawn above sliders', function(done) {
it('draws buttons above sliders', function(done) {

Plotly.plot(createGraphDiv(), [{
x: [1, 2, 3],
@@ -869,19 +873,12 @@ describe('update menus interaction with other components:', function() {
})
.then(function() {
var infoLayer = d3.select('g.infolayer');
var containerClassNames = ['slider-container', 'updatemenu-container'];
var list = [];

infoLayer.selectAll('*').each(function() {
var className = d3.select(this).attr('class');

if(containerClassNames.indexOf(className) !== -1) {
list.push(className);
}
});

expect(list).toEqual(containerClassNames);
var menuLayer = d3.select('g.menulayer');
expect(infoLayer.selectAll('.slider-container').size()).toBe(1);
expect(menuLayer.selectAll('.updatemenu-container').size()).toBe(1);
expect(infoLayer.node().nextSibling).toBe(menuLayer.node());
})
.catch(fail)
.then(done);
});
});