Merge pull request #7032 from plotly/zorder-overlays

Handle `zorder` between overlayed cartesian subplots

Author: archmoj

src/components/fx/hover.js

@@ -15,6 +15,7 @@ var Drawing = require('../drawing');
 var Color = require('../color');
 var dragElement = require('../dragelement');
 var Axes = require('../../plots/cartesian/axes');
+var zindexSeparator = require('../../plots/cartesian/constants').zindexSeparator;
 var Registry = require('../../registry');
 
 var helpers = require('./helpers');
@@ -261,6 +262,11 @@ exports.loneHover = function loneHover(hoverItems, opts) {
 function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
     if(!subplot) subplot = 'xy';
 
+    if(typeof subplot === 'string') {
+        // drop zindex from subplot id
+        subplot = subplot.split(zindexSeparator)[0];
+    }
+
     // if the user passed in an array of subplots,
     // use those instead of finding overlayed plots
     var subplots = Array.isArray(subplot) ? subplot : [subplot];

src/plot_api/subroutines.js

@@ -24,6 +24,8 @@ var SVG_TEXT_ANCHOR_START = 'start';
 var SVG_TEXT_ANCHOR_MIDDLE = 'middle';
 var SVG_TEXT_ANCHOR_END = 'end';
 
+var zindexSeparator = require('../plots/cartesian/constants').zindexSeparator;
+
 exports.layoutStyles = function(gd) {
     return Lib.syncOrAsync([Plots.doAutoMargin, lsInner], gd);
 };
@@ -135,7 +137,7 @@ function lsInner(gd) {
             var yDomain = plotinfo.yaxis.domain;
             var plotgroup = plotinfo.plotgroup;
 
-            if(overlappingDomain(xDomain, yDomain, lowerDomains)) {
+            if(overlappingDomain(xDomain, yDomain, lowerDomains) && subplot.indexOf(zindexSeparator) === -1) {
                 var pgNode = plotgroup.node();
                 var plotgroupBg = plotinfo.bg = Lib.ensureSingle(plotgroup, 'rect', 'bg');
                 pgNode.insertBefore(plotgroupBg.node(), pgNode.childNodes[0]);

src/plots/cartesian/constants.js

@@ -66,5 +66,7 @@ module.exports = {
     layerValue2layerClass: {
         'above traces': 'above',
         'below traces': 'below'
-    }
+    },
+
+    zindexSeparator: 'z', // used for zindex of cartesian subplots e.g. xy, xyz2, xyz3, etc.
 };