Ensure shapes use the right clip-path

* Fixed bug that caused shapes drawn in a subplot to extend beyond the
  limits of the subplot.

* Fixed issues with code styling.

Author: n-riesco

src/components/shapes/index.js

@@ -215,7 +215,7 @@ function insertShape(gd, index, newShape) {
 }
 
 function updateShape(gd, index, opt, value) {
-    var i;
+    var i, n;
 
     // remove the existing shape if there is one
     getShapeLayer(gd, index)
@@ -298,25 +298,33 @@ function updateShape(gd, index, opt, value) {
             'fill-rule': 'evenodd',
             d: shapePath(gd, options)
         },
-        clipAxes = (options.xref + options.yref).replace(/paper/g, '');
+        clipAxes;
 
     var lineColor = options.line.width ? options.line.color : 'rgba(0,0,0,0)';
 
     if(options.layer !== 'below') {
+        clipAxes = (options.xref + options.yref).replace(/paper/g, '');
         drawShape(gd._fullLayout._shapeUpperLayer);
     }
     else if(options.xref === 'paper' && options.yref === 'paper') {
+        clipAxes = '';
         drawShape(gd._fullLayout._shapeLowerLayer);
-    } else {
-        forEachSubplot(gd, function(plotinfo) {
+    }
+    else {
+        var plots = gd._fullLayout._plots || {},
+            subplots = Object.keys(plots),
+            plotinfo;
+
+        for(i = 0, n = subplots.length; i < n; i++) {
+            plotinfo = plots[subplots[i]];
+            clipAxes = subplots[i];
+
             if(isShapeInSubplot(gd, options, plotinfo.id)) {
                 drawShape(plotinfo.shapelayer);
             }
-        });
+        }
     }
 
-    return;
-
     function drawShape(shapeLayer) {
         var path = shapeLayer.append('path')
             .attr(attrs)
@@ -354,15 +362,6 @@ function isShapeInSubplot(gd, shape, subplot) {
     return shape.layer === 'below' && (xa === shape.xref || ya === shape.yref);
 }
 
-function forEachSubplot(gd, fn) {
-    var plots = gd._fullLayout._plots || {},
-        subplots = Object.getOwnPropertyNames(plots);
-
-    for(var i = 0, n = subplots.length; i < n; i++) {
-        fn(plots[subplots[i]]);
-    }
-}
-
 function decodeDate(convertToPx) {
     return function(v) { return convertToPx(v.replace('_', ' ')); };
 }

test/jasmine/tests/shapes_test.js

@@ -62,7 +62,7 @@ describe('Test shapes:', function() {
     }
 
     function countSubplots(gd) {
-        return Object.getOwnPropertyNames(gd._fullLayout._plots || {}).length;
+        return Object.keys(gd._fullLayout._plots || {}).length;
     }
 
     function countShapePathsInLowerLayer() {
@@ -163,8 +163,7 @@ describe('Test shapes:', function() {
             var index = countShapes(gd);
             var shape = getRandomShape();
 
-            Plotly.relayout(gd, 'shapes[' + index + ']', shape).then(function()
-            {
+            Plotly.relayout(gd, 'shapes[' + index + ']', shape).then(function() {
                 expect(countShapePathsInUpperLayer()).toEqual(pathCount + 1);
                 expect(getLastShape(gd)).toEqual(shape);
                 expect(countShapes(gd)).toEqual(index + 1);
@@ -176,8 +175,7 @@ describe('Test shapes:', function() {
             var index = countShapes(gd);
             var shape = getRandomShape();
 
-            Plotly.relayout(gd, 'shapes[' + index + ']', shape).then(function()
-            {
+            Plotly.relayout(gd, 'shapes[' + index + ']', shape).then(function() {
                 expect(countShapePathsInUpperLayer()).toEqual(pathCount + 1);
                 expect(getLastShape(gd)).toEqual(shape);
                 expect(countShapes(gd)).toEqual(index + 1);