Shapes/Images: Reorganize above/below/subplot layers

plotly · mdtusz · May 12, 2016 · May 6, 2016 · May 6, 2016 · May 6, 2016
commit 82c68a207b29bd19d1b30e809e597267da7a6014
diff --git a/src/components/shapes/index.js b/src/components/shapes/index.js
@@ -98,7 +98,7 @@ shapes.drawAll = function(gd) {
    // Remove previous shapes before drawing new in shapes in fullLayout.shapes
    fullLayout._shapeUpperLayer.selectAll('path').remove();
    fullLayout._shapeLowerLayer.selectAll('path').remove();
-    fullLayout._subplotShapeLayer.selectAll('path').remove();
+    fullLayout._shapeSubplotLayer.selectAll('path').remove();

    for(var i = 0; i < fullLayout.shapes.length; i++) {
        shapes.draw(gd, i);
@@ -356,7 +356,7 @@ function getShapeLayer(gd, index) {
    else if(shape.layer === 'below') {
        shapeLayer = (shape.xref === 'paper' && shape.yref === 'paper') ?
            gd._fullLayout._shapeLowerLayer :
-            gd._fullLayout._subplotShapeLayer;
+            gd._fullLayout._shapeSubplotLayer;
    }

    return shapeLayer;

diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -2646,6 +2646,8 @@ function makePlotFramework(gd) {
        .classed('layer-below', true);
    fullLayout._shapeLowerLayer = layerBelow.append('g')
        .classed('shapelayer', true);
+    fullLayout._imageLowerLayer = layerBelow.append('g')
+        .classed('imagelayer', true);

    var subplots = Plotly.Axes.getSubplots(gd);
    if(subplots.join('') !== Object.keys(gd._fullLayout._plots || {}).join('')) {
@@ -2658,15 +2660,18 @@ function makePlotFramework(gd) {
    fullLayout._ternarylayer = fullLayout._paper.append('g').classed('ternarylayer', true);

    // shape layers in subplots
-    fullLayout._subplotShapeLayer = fullLayout._paper
-        .selectAll('.shapelayer-subplot');
+    var layerSubplot = fullLayout._paper.selectAll('.layer-subplot');
+    fullLayout._shapeSubplotLayer = layerSubplot.selectAll('.shapelayer');
+    fullLayout._imageSubplotLayer = layerSubplot.selectAll('.imagelayer');

    // 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._shapeUpperLayer = layerAbove.append('g')
        .classed('shapelayer', true);
+    fullLayout._imageUpperLayer = layerAbove.append('g')
+        .classed('imagelayer', true);

    // single pie layer for the whole plot
    fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);
@@ -2797,10 +2802,16 @@ function makeCartesianPlotFramwork(gd, subplots) {
                // the plot and containers for overlays
                plotinfo.bg = plotgroup.append('rect')
                    .style('stroke-width', 0);
-                // shape layer
-                // (only for shapes to be drawn below a subplot)
-                plotinfo.shapelayer = plotgroup.append('g')
-                    .classed('shapelayer shapelayer-subplot', true);
+
+                // back layer for shapes and images to
+                // be drawn below a subplot
+                var backlayer = plotgroup.append('g')
+                    .classed('layer-subplot', true);
+
+                plotinfo.shapelayer = backlayer.append('g')
+                    .classed('shapelayer', true);
+                plotinfo.imagelayer = backlayer.append('g')
+                    .classed('imagelayer', true);
                plotinfo.gridlayer = plotgroup.append('g');
                plotinfo.overgrid = plotgroup.append('g');
                plotinfo.zerolinelayer = plotgroup.append('g');