shapes: add 'visible' attribute

Author: etpinard

src/components/shapes/attributes.js

@@ -17,6 +17,15 @@ var scatterLineAttrs = scatterAttrs.line;
 module.exports = {
     _isLinkedToArray: true,
 
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        dflt: true,
+        description: [
+            'Determines whether or not this shape is visible.'
+        ].join(' ')
+    },
+
     type: {
         valType: 'enumerated',
         values: ['circle', 'rect', 'path', 'line'],

src/components/shapes/calc_autorange.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+var Lib = require('../../lib');
 var Axes = require('../../plots/cartesian/axes');
 
 var constants = require('./constants');
@@ -17,7 +18,7 @@ var helpers = require('./helpers');
 
 module.exports = function calcAutorange(gd) {
     var fullLayout = gd._fullLayout,
-        shapeList = fullLayout.shapes;
+        shapeList = Lib.filterVisible(fullLayout.shapes);
 
     if(!shapeList.length || !gd._fullData.length) return;
 

src/components/shapes/draw.js

@@ -49,7 +49,9 @@ function draw(gd) {
     fullLayout._shapeSubplotLayer.selectAll('path').remove();
 
     for(var i = 0; i < fullLayout.shapes.length; i++) {
-        drawOne(gd, i);
+        if(fullLayout.shapes[i].visible) {
+            drawOne(gd, i);
+        }
     }
 
     // may need to resurrect this if we put text (LaTeX) in shapes
@@ -169,8 +171,6 @@ function updateShape(gd, index, opt, value) {
     // TODO: clean this up and remove it.
     if(!optionsIn) return;
 
-    var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
     // alter the input shape as requested
     var optionsEdit = {};
     if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -182,7 +182,12 @@ function updateShape(gd, index, opt, value) {
         Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
     }
 
-    var posAttrs = ['x0', 'x1', 'y0', 'y1'];
+    // return early in visible: false updates
+    if(optionsIn.visible === false) return;
+
+    var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref},
+        posAttrs = ['x0', 'x1', 'y0', 'y1'];
+
     for(i = 0; i < 4; i++) {
         var posAttr = posAttrs[i];
         // if we don't have an explicit position already,

src/components/shapes/shape_defaults.js

@@ -22,6 +22,10 @@ module.exports = function handleShapeDefaults(shapeIn, fullLayout) {
         return Lib.coerce(shapeIn, shapeOut, attributes, attr, dflt);
     }
 
+    var visible = coerce('visible');
+
+    if(!visible) return shapeOut;
+
     coerce('layer');
     coerce('opacity');
     coerce('fillcolor');

test/image/mocks/shapes_below_traces.json

@@ -91,6 +91,7 @@
                 "y1": 1,
                 "yref": "paper"
             },
+            { "visible": false },
             {
                 "fillcolor": "#f6e8c3",
                 "layer": "below",

test/jasmine/tests/shapes_test.js

@@ -183,18 +183,23 @@ describe('Test shapes:', function() {
                 expect(countShapePathsInUpperLayer()).toEqual(pathCount + 1);
                 expect(getLastShape(gd)).toEqual(shape);
                 expect(countShapes(gd)).toEqual(index + 1);
-            })
-            .then(function() {
+
                 return Plotly.relayout(gd, 'shapes[' + index + ']', 'remove');
             })
             .then(function() {
                 expect(countShapePathsInUpperLayer()).toEqual(pathCount);
                 expect(countShapes(gd)).toEqual(index);
 
-                return Plotly.relayout(gd, 'shapes[' + 1 + ']', null);
+                return Plotly.relayout(gd, 'shapes[' + 2 + '].visible', false);
             })
             .then(function() {
                 expect(countShapePathsInUpperLayer()).toEqual(pathCount - 1);
+                expect(countShapes(gd)).toEqual(index);
+
+                return Plotly.relayout(gd, 'shapes[' + 1 + ']', null);
+            })
+            .then(function() {
+                expect(countShapePathsInUpperLayer()).toEqual(pathCount - 2);
                 expect(countShapes(gd)).toEqual(index - 1);
             })
             .then(done);