Add support for xref/yref paper for shapes with layer "between"

draftlogs/6989_fix.md

@@ -0,0 +1 @@
+ - Add support for xref and yref "paper" for shapes with layer "between" [[#6989](https://github.com/plotly/plotly.js/pull/6989)]

src/components/rangeslider/draw.js

@@ -504,7 +504,7 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
 
         var plotinfo = {
             id: id,
-            plotgroup: plotgroup,
+            plotgroup: [undefined, plotgroup],
             xaxis: xa,
             yaxis: ya,
             isRangePlot: true

src/components/shapes/draw.js

@@ -93,10 +93,10 @@ function drawOne(gd, index) {
 
     if(options.layer === 'above') {
         drawShape(gd._fullLayout._shapeUpperLayer);
+    } else if(options.layer === 'between') {
+        drawShape(gd._fullLayout._shapeLayerBetween);
     } else if(options.xref === 'paper' || options.yref === 'paper') {
         drawShape(gd._fullLayout._shapeLowerLayer);
-    } else if(options.layer === 'between') {
-        drawShape(plotinfo.shapelayerBetween);
     } else {
         if(plotinfo._hadPlotinfo) {
             var mainPlot = plotinfo.mainplotinfo || plotinfo;

src/plot_api/plot_api.js

@@ -3782,8 +3782,11 @@ function makePlotFramework(gd) {
         .classed('shapelayer', true);
 
     // single cartesian layer for the whole plot
-    fullLayout._cartesianlayer = fullLayout._paper.append('g').classed('cartesianlayer', true);
-
+    fullLayout._cartesianlayerBelow = fullLayout._paper.append('g').classed('cartesianlayer-below', true);
+    var layerBetween = fullLayout._paper.append('g').classed('layer-between', true);
+    fullLayout._imageLayerBetween = layerBetween.append('g').classed('imagelayer', true);
+    fullLayout._shapeLayerBetween = layerBetween.append('g').classed('shapelayer', true);
+    fullLayout._cartesianlayerAbove = fullLayout._paper.append('g').classed('cartesianlayer', true);
     // single polar layer for the whole plot
     fullLayout._polarlayer = fullLayout._paper.append('g').classed('polarlayer', true);
 

src/plot_api/subroutines.js

@@ -133,8 +133,7 @@ function lsInner(gd) {
         } else {
             var xDomain = plotinfo.xaxis.domain;
             var yDomain = plotinfo.yaxis.domain;
-            var plotgroup = plotinfo.plotgroup;
-
+            var plotgroup = plotinfo.plotgroup[0];
             if(overlappingDomain(xDomain, yDomain, lowerDomains)) {
                 var pgNode = plotgroup.node();
                 var plotgroupBg = plotinfo.bg = Lib.ensureSingle(plotgroup, 'rect', 'bg');

src/plots/cartesian/index.js

@@ -322,7 +322,11 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
     if(oldFullLayout._hasOnlyLargeSploms && !newFullLayout._hasOnlyLargeSploms) {
         for(k in oldPlots) {
             plotinfo = oldPlots[k];
-            if(plotinfo.plotgroup) plotinfo.plotgroup.remove();
+            if(plotinfo.plotgroup) {
+                for(var idx = 0; idx < plotinfo.plotgroup.length; idx++) {
+                    plotinfo.plotgroup[idx].remove();
+                }
+            }
         }
     }
 
@@ -353,8 +357,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 
     if(hadCartesian && !hasCartesian) {
         // if we've gotten rid of all cartesian traces, remove all the subplot svg items
-
-        purgeSubplotLayers(oldFullLayout._cartesianlayer.selectAll('.subplot'), oldFullLayout);
+        purgeSubplotLayers(oldFullLayout._cartesianlayerBelow.selectAll('.subplot'), oldFullLayout);
+        purgeSubplotLayers(oldFullLayout._cartesianlayerAbove.selectAll('.subplot'), oldFullLayout);
         oldFullLayout._defs.selectAll('.axesclip').remove();
         delete oldFullLayout._axisConstraintGroups;
         delete oldFullLayout._axisMatchGroups;
@@ -365,7 +369,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
             var oldSubplotId = oldSubplotList.cartesian[i];
             if(!newPlots[oldSubplotId]) {
                 var selector = '.' + oldSubplotId + ',.' + oldSubplotId + '-x,.' + oldSubplotId + '-y';
-                oldFullLayout._cartesianlayer.selectAll(selector).remove();
+                oldFullLayout._cartesianlayerAbove.selectAll(selector).remove();
+                oldFullLayout._cartesianlayerBelow.selectAll(selector).remove();
                 removeSubplotExtras(oldSubplotId, oldFullLayout);
             }
         }
@@ -376,23 +381,39 @@ exports.drawFramework = function(gd) {
     var fullLayout = gd._fullLayout;
     var subplotData = makeSubplotData(gd);
 
-    var subplotLayers = fullLayout._cartesianlayer.selectAll('.subplot')
+    var subplotLayersAbove = fullLayout._cartesianlayerAbove.selectAll('.subplot')
         .data(subplotData, String);
-
-    subplotLayers.enter().append('g')
+    subplotLayersAbove.enter().append('g')
         .attr('class', function(d) { return 'subplot ' + d[0]; });
+    subplotLayersAbove.order();
+    subplotLayersAbove.exit()
+        .call(purgeSubplotLayers, fullLayout);
 
-    subplotLayers.order();
-
-    subplotLayers.exit()
+    var subplotLayersBelow = fullLayout._cartesianlayerBelow.selectAll('.subplot')
+        .data(subplotData, String);
+    subplotLayersBelow.enter().append('g')
+        .attr('class', function(d) { return 'subplot ' + d[0] + '-below'; });
+    subplotLayersBelow.order();
+    subplotLayersBelow.exit()
         .call(purgeSubplotLayers, fullLayout);
 
-    subplotLayers.each(function(d) {
+    subplotLayersBelow.each(function(d) {
         var id = d[0];
         var plotinfo = fullLayout._plots[id];
 
-        plotinfo.plotgroup = d3.select(this);
-        makeSubplotLayer(gd, plotinfo);
+        plotinfo.plotgroup = [d3.select(this)];
+        makeSubplotLayerBelow(gd, plotinfo);
+
+        // make separate drag layers for each subplot,
+        // but append them to paper rather than the plot groups,
+        // so they end up on top of the rest
+        plotinfo.draglayer = ensureSingle(fullLayout._draggers, 'g', id);
+    });
+    subplotLayersAbove.each(function(d) {
+        var id = d[0];
+        var plotinfo = fullLayout._plots[id];
+        plotinfo.plotgroup = plotinfo.plotgroup.concat([d3.select(this)]);
+        makeSubplotLayerAbove(gd, plotinfo);
 
         // make separate drag layers for each subplot,
         // but append them to paper rather than the plot groups,
@@ -402,7 +423,7 @@ exports.drawFramework = function(gd) {
 };
 
 exports.rangePlot = function(gd, plotinfo, cdSubplot) {
-    makeSubplotLayer(gd, plotinfo);
+    makeSubplotLayerAbove(gd, plotinfo);
     plotOne(gd, plotinfo, cdSubplot);
     Plots.style(gd);
 };
@@ -468,8 +489,50 @@ function makeSubplotData(gd) {
     return subplotData;
 }
 
-function makeSubplotLayer(gd, plotinfo) {
-    var plotgroup = plotinfo.plotgroup;
+function makeSubplotLayerBelow(gd, plotinfo) {
+    var plotgroup = plotinfo.plotgroup[0];
+    var hasOnlyLargeSploms = gd._fullLayout._hasOnlyLargeSploms;
+
+    if(!plotinfo.mainplot) {
+        var backLayer = ensureSingle(plotgroup, 'g', 'layer-subplot');
+        plotinfo.shapelayer = ensureSingle(backLayer, 'g', 'shapelayer');
+        plotinfo.imagelayer = ensureSingle(backLayer, 'g', 'imagelayer');
+
+        plotinfo.minorGridlayer = ensureSingle(plotgroup, 'g', 'minor-gridlayer');
+        plotinfo.gridlayer = ensureSingle(plotgroup, 'g', 'gridlayer');
+        plotinfo.zerolinelayer = ensureSingle(plotgroup, 'g', 'zerolinelayer');
+    } else {
+        var mainplotinfo = plotinfo.mainplotinfo;
+
+        // now make the components of overlaid subplots
+        // overlays don't have backgrounds, and append all
+        // their other components to the corresponding
+        // extra groups of their main plots.
+
+        plotinfo.minorGridlayer = mainplotinfo.minorGridlayer;
+        plotinfo.gridlayer = mainplotinfo.gridlayer;
+        plotinfo.zerolinelayer = mainplotinfo.zerolinelayer;
+    }
+
+    // common attributes for all subplots, overlays or not
+
+    if(!hasOnlyLargeSploms) {
+        ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.xaxis._id);
+        ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.yaxis._id);
+        plotinfo.minorGridlayer.selectAll('g')
+            .map(function(d) { return d[0]; })
+            .sort(axisIds.idSort);
+
+        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.xaxis._id);
+        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.yaxis._id);
+        plotinfo.gridlayer.selectAll('g')
+            .map(function(d) { return d[0]; })
+            .sort(axisIds.idSort);
+    }
+}
+
+function makeSubplotLayerAbove(gd, plotinfo) {
+    var plotgroup = plotinfo.plotgroup[1];
     var id = plotinfo.id;
     var xLayer = constants.layerValue2layerClass[plotinfo.xaxis.layer];
     var yLayer = constants.layerValue2layerClass[plotinfo.yaxis.layer];
@@ -487,18 +550,6 @@ function makeSubplotLayer(gd, plotinfo) {
             plotinfo.xaxislayer = ensureSingle(plotgroup, 'g', 'xaxislayer-above');
             plotinfo.yaxislayer = ensureSingle(plotgroup, 'g', 'yaxislayer-above');
         } else {
-            var backLayer = ensureSingle(plotgroup, 'g', 'layer-subplot');
-            plotinfo.shapelayer = ensureSingle(backLayer, 'g', 'shapelayer');
-            plotinfo.imagelayer = ensureSingle(backLayer, 'g', 'imagelayer');
-
-            plotinfo.minorGridlayer = ensureSingle(plotgroup, 'g', 'minor-gridlayer');
-            plotinfo.gridlayer = ensureSingle(plotgroup, 'g', 'gridlayer');
-            plotinfo.zerolinelayer = ensureSingle(plotgroup, 'g', 'zerolinelayer');
-
-            var betweenLayer = ensureSingle(plotgroup, 'g', 'layer-between');
-            plotinfo.shapelayerBetween = ensureSingle(betweenLayer, 'g', 'shapelayer');
-            plotinfo.imagelayerBetween = ensureSingle(betweenLayer, 'g', 'imagelayer');
-
             ensureSingle(plotgroup, 'path', 'xlines-below');
             ensureSingle(plotgroup, 'path', 'ylines-below');
             plotinfo.overlinesBelow = ensureSingle(plotgroup, 'g', 'overlines-below');
@@ -526,7 +577,7 @@ function makeSubplotLayer(gd, plotinfo) {
         }
     } else {
         var mainplotinfo = plotinfo.mainplotinfo;
-        var mainplotgroup = mainplotinfo.plotgroup;
+        var mainplotgroup = mainplotinfo.plotgroup[1];
         var xId = id + '-x';
         var yId = id + '-y';
 
@@ -535,10 +586,6 @@ function makeSubplotLayer(gd, plotinfo) {
         // their other components to the corresponding
         // extra groups of their main plots.
 
-        plotinfo.minorGridlayer = mainplotinfo.minorGridlayer;
-        plotinfo.gridlayer = mainplotinfo.gridlayer;
-        plotinfo.zerolinelayer = mainplotinfo.zerolinelayer;
-
         ensureSingle(mainplotinfo.overlinesBelow, 'path', xId);
         ensureSingle(mainplotinfo.overlinesBelow, 'path', yId);
         ensureSingle(mainplotinfo.overaxesBelow, 'g', xId);
@@ -560,20 +607,6 @@ function makeSubplotLayer(gd, plotinfo) {
 
     // common attributes for all subplots, overlays or not
 
-    if(!hasOnlyLargeSploms) {
-        ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.xaxis._id);
-        ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.yaxis._id);
-        plotinfo.minorGridlayer.selectAll('g')
-            .map(function(d) { return d[0]; })
-            .sort(axisIds.idSort);
-
-        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.xaxis._id);
-        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.yaxis._id);
-        plotinfo.gridlayer.selectAll('g')
-            .map(function(d) { return d[0]; })
-            .sort(axisIds.idSort);
-    }
-
     plotinfo.xlines
         .style('fill', 'none')
         .classed('crisp', true);

test/image/mocks/shapes_layer_below_traces.json → test/image/mocks/zz_shapes_layer_below_traces.json

@@ -40,6 +40,20 @@
   ],
   "layout": {
     "shapes": [
+      {
+        "layer": "between",
+        "name": "my zeroline",
+        "line": {
+          "color": "yellow",
+          "width": 3.0
+        },
+        "x0": 0,
+        "x1": 1,
+        "xref": "paper",
+        "y0": 0,
+        "y1": 0,
+        "yref": "y"
+      },
       {
         "name": "dashdot line",
         "fillcolor": "rgba(179,179,179,1)",
@@ -125,12 +139,15 @@
         "0",
         "215"
       ],
-      "type": "linear"
+      "type": "linear",
+      "zerolinewidth": 6,
+      "zerolinecolor": "rgba(128,128,128,05)"
     },
     "yaxis2": {
       "gridwidth": 2,
       "side": "right",
-      "overlaying": "y"
+      "overlaying": "y",
+      "zeroline": false
     }
 
   }

test/jasmine/tests/cartesian_test.js

@@ -436,7 +436,7 @@ describe('subplot creation / deletion:', function() {
 
     function checkBGLayers(behindCount, x2y2Count, subplots) {
         expect(gd.querySelectorAll('.bglayer rect.bg').length).toBe(behindCount);
-        expect(gd.querySelectorAll('.subplot.x2y2 rect.bg').length).toBe(x2y2Count);
+        expect(gd.querySelectorAll('.subplot.x2y2-below rect.bg').length).toBe(x2y2Count);
 
         // xy is the first subplot, so it never gets put in front of others
         expect(gd.querySelectorAll('.subplot.xy rect.bg').length).toBe(0);
@@ -445,7 +445,7 @@ describe('subplot creation / deletion:', function() {
         expect(gd.querySelectorAll('.subplot.xy3 rect.bg').length).toBe(0);
 
         // verify that these are *all* the subplots and backgrounds we have
-        expect(gd.querySelectorAll('.subplot').length).toBe(subplots.length);
+        expect(gd.querySelectorAll('.subplot').length).toBe(subplots.length * 2);
         subplots.forEach(function(subplot) {
             expect(gd.querySelectorAll('.subplot.' + subplot).length).toBe(1);
         });
@@ -791,14 +791,15 @@ describe('subplot creation / deletion:', function() {
     it('clear axis ticks, labels and title when relayout an axis to `*visible:false*', function(done) {
         function _assert(xaxis, yaxis) {
             var g = d3Select('.subplot.xy');
+            var gBelow = d3Select('.subplot.xy-below');
             var info = d3Select('.infolayer');
 
             expect(g.selectAll('.xtick').size()).toBe(xaxis[0], 'x tick cnt');
-            expect(g.selectAll('.gridlayer .xgrid').size()).toBe(xaxis[1], 'x gridline cnt');
+            expect(gBelow.selectAll('.gridlayer .xgrid').size()).toBe(xaxis[1], 'x gridline cnt');
             expect(info.selectAll('.g-xtitle').size()).toBe(xaxis[2], 'x title cnt');
 
             expect(g.selectAll('.ytick').size()).toBe(yaxis[0], 'y tick cnt');
-            expect(g.selectAll('.gridlayer .ygrid').size()).toBe(yaxis[1], 'y gridline cnt');
+            expect(gBelow.selectAll('.gridlayer .ygrid').size()).toBe(yaxis[1], 'y gridline cnt');
             expect(info.selectAll('.g-ytitle').size()).toBe(yaxis[2], 'y title cnt');
         }