Merge pull request #497 from plotly/restructure-shapelayers

Shapes: nest shapelayers in .above and .below classed groups

Author: mdtusz

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

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

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() {