Merge pull request plotly#497 from plotly/restructure-shapelayers

mdtusz · mdtusz · commit d8e27dd33270 · 2016-05-02T14:22:14.000-04:00
Shapes: nest shapelayers in .above and .below classed groups
diff --git 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
@@ -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
@@ -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() {

Original file line number	Diff line number	Diff line change
`@@ -125,17 +125,17 @@ shapes.add = function(gd) {`
`125`	`125`	`// if opt is blank, val can be 'add' or a full options object to add a new`
`126`	`126`	`// annotation at that point in the array, or 'remove' to delete this one`
`127`	`127`	`shapes.draw = function(gd, index, opt, value) {`
`128`		`- if(!isNumeric(index) \|\| index===-1) {`
	`128`	`+ if(!isNumeric(index) \|\| index === -1) {`
`129`	`129`	`// no index provided - we're operating on ALL shapes`
`130`	`130`	`if(!index && Array.isArray(value)) {`
`131`	`131`	`replaceAllShapes(gd, value);`
`132`	`132`	`return;`
`133`	`133`	`}`
`134`		`- else if(value==='remove') {`
	`134`	`+ else if(value === 'remove') {`
`135`	`135`	`deleteAllShapes(gd);`
`136`	`136`	`return;`
`137`	`137`	`}`
`138`		`- else if(opt && value!=='add') {`
	`138`	`+ else if(opt && value !== 'add') {`
`139`	`139`	`updateAllShapes(gd, opt, value);`
`140`	`140`	`return;`
`141`	`141`	`}`
`@@ -147,11 +147,11 @@ shapes.draw = function(gd, index, opt, value) {`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`if(!opt && value) {`
`150`		`- if(value==='remove') {`
	`150`	`+ if(value === 'remove') {`
`151`	`151`	`deleteShape(gd, index);`
`152`	`152`	`return;`
`153`	`153`	`}`
`154`		`- else if(value==='add' \|\| Lib.isPlainObject(value)) {`
	`154`	`+ else if(value === 'add' \|\| Lib.isPlainObject(value)) {`
`155`	`155`	`insertShape(gd, index, value);`
`156`	`156`	`}`
`157`	`157`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,11 +50,11 @@ describe('Test shapes:', function() {`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`function countShapeLowerLayerNodes() {`
`53`		`- return d3.selectAll('.shapelayer-below').size();`
	`53`	`+ return d3.selectAll('.layer-below > .shapelayer').size();`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`function countShapeUpperLayerNodes() {`
`57`		`- return d3.selectAll('.shapelayer-above').size();`
	`57`	`+ return d3.selectAll('.layer-above > .shapelayer').size();`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`function countShapeLayerNodesInSubplots() {`
`@@ -66,11 +66,11 @@ describe('Test shapes:', function() {`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`function countShapePathsInLowerLayer() {`
`69`		`- return d3.selectAll('.shapelayer-below > path').size();`
	`69`	`+ return d3.selectAll('.layer-below > .shapelayer > path').size();`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`function countShapePathsInUpperLayer() {`
`73`		`- return d3.selectAll('.shapelayer-above > path').size();`
	`73`	`+ return d3.selectAll('.layer-above > .shapelayer > path').size();`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`function countShapePathsInSubplots() {`