move layer: above shapes and images to toppaper

Author: alexcjohnson

src/plot_api/plot_api.js

@@ -2830,24 +2830,23 @@ 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._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"
+    }]
   }
 }