Merge pull request #2121 from plotly/layer-fix

Layer fix

Author: alexcjohnson

src/components/shapes/draw.js

@@ -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
         .selectAll('.shapelayer [data-index="' + index + '"]')
         .remove();
 

src/components/updatemenus/draw.js

@@ -54,7 +54,7 @@ module.exports = function draw(gd) {
      */
 
     // draw update menu container
-    var menus = fullLayout._infolayer
+    var menus = fullLayout._menulayer
         .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());
+
         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;

src/plot_api/plot_api.js

@@ -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);
 

test/image/baselines/pie_style.png

@@ -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"
+    }]
   }
 }

test/image/baselines/updatemenus.png

@@ -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
               ]
             ],

test/image/mocks/pie_style.json

@@ -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);
     });
 });