From 54b46245a3116652f312ae3dbe85173f93397535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= <mdtusz@gmail.com>
Date: Mon, 2 May 2016 14:01:36 -0400
Subject: [PATCH] Shapes: nest shapelayers in .above and .below classed groups

---
 src/components/shapes/index.js    | 10 +++++-----
 src/plot_api/plot_api.js          | 12 ++++++++----
 test/jasmine/tests/shapes_test.js |  8 ++++----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/shapes/index.js b/src/components/shapes/index.js
index 79bb28fd0e5..a3eebd52ff9 100644
--- a/src/components/shapes/index.js
+++ b/src/components/shapes/index.js
@@ -125,17 +125,17 @@ shapes.add = function(gd) {
 // if opt is blank, val can be 'add' or a full options object to add a new
 //  annotation at that point in the array, or 'remove' to delete this one
 shapes.draw = function(gd, index, opt, value) {
-    if(!isNumeric(index) || index===-1) {
+    if(!isNumeric(index) || index === -1) {
         // no index provided - we're operating on ALL shapes
         if(!index && Array.isArray(value)) {
             replaceAllShapes(gd, value);
             return;
         }
-        else if(value==='remove') {
+        else if(value === 'remove') {
             deleteAllShapes(gd);
             return;
         }
-        else if(opt && value!=='add') {
+        else if(opt && value !== 'add') {
             updateAllShapes(gd, opt, value);
             return;
         }
@@ -147,11 +147,11 @@ shapes.draw = function(gd, index, opt, value) {
     }
 
     if(!opt && value) {
-        if(value==='remove') {
+        if(value === 'remove') {
             deleteShape(gd, index);
             return;
         }
-        else if(value==='add' || Lib.isPlainObject(value)) {
+        else if(value === 'add' || Lib.isPlainObject(value)) {
             insertShape(gd, index, value);
         }
     }
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 28ec6a81513..dc6940341e0 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -2642,8 +2642,10 @@ function makePlotFramework(gd) {
 
     // lower shape layer
     // (only for shapes to be drawn below the whole plot)
-    fullLayout._shapeLowerLayer = fullLayout._paper.append('g')
-        .classed('shapelayer shapelayer-below', true);
+    var layerBelow = fullLayout._paper.append('g')
+        .classed('layer-below', true);
+    fullLayout._shapeLowerLayer = layerBelow.append('g')
+        .classed('shapelayer', true);
 
     var subplots = Plotly.Axes.getSubplots(gd);
     if(subplots.join('') !== Object.keys(gd._fullLayout._plots || {}).join('')) {
@@ -2661,8 +2663,10 @@ function makePlotFramework(gd) {
 
     // upper shape layer
     // (only for shapes to be drawn above the whole plot, including subplots)
-    fullLayout._shapeUpperLayer = fullLayout._paper.append('g')
-        .classed('shapelayer shapelayer-above', true);
+    var layerAbove = fullLayout._paper.append('g')
+        .classed('layer-above', 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);
diff --git a/test/jasmine/tests/shapes_test.js b/test/jasmine/tests/shapes_test.js
index 8447c94e772..74993cf628f 100644
--- a/test/jasmine/tests/shapes_test.js
+++ b/test/jasmine/tests/shapes_test.js
@@ -50,11 +50,11 @@ describe('Test shapes:', function() {
     }
 
     function countShapeLowerLayerNodes() {
-        return d3.selectAll('.shapelayer-below').size();
+        return d3.selectAll('.layer-below > .shapelayer').size();
     }
 
     function countShapeUpperLayerNodes() {
-        return d3.selectAll('.shapelayer-above').size();
+        return d3.selectAll('.layer-above > .shapelayer').size();
     }
 
     function countShapeLayerNodesInSubplots() {
@@ -66,11 +66,11 @@ describe('Test shapes:', function() {
     }
 
     function countShapePathsInLowerLayer() {
-        return d3.selectAll('.shapelayer-below > path').size();
+        return d3.selectAll('.layer-below > .shapelayer > path').size();
     }
 
     function countShapePathsInUpperLayer() {
-        return d3.selectAll('.shapelayer-above > path').size();
+        return d3.selectAll('.layer-above > .shapelayer > path').size();
     }
 
     function countShapePathsInSubplots() {