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