Add visible attribute to layout container items.

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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

src/components/annotations/annotation_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleAnnotationDefaults(annIn, fullLayout) {
  return Lib.coerce(annIn, annOut, attributes, attr, dflt);
  }
 
+ var visible = coerce('visible');
+
+ if(!visible) return annOut;
+
  coerce('opacity');
  coerce('align');
  coerce('bgcolor');

src/components/annotations/attributes.js

@@ -17,6 +17,15 @@ var extendFlat = require('../../lib/extend').extendFlat;
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this annotation is visible.'
+ ].join(' ')
+ },
+
  text: {
  valType: 'string',
  role: 'info',

src/components/annotations/calc_autorange.js

@@ -17,7 +17,7 @@ var draw = require('./draw').draw;
 
 module.exports = function calcAutorange(gd) {
  var fullLayout = gd._fullLayout,
- annotationList = fullLayout.annotations;
+ annotationList = Lib.filterVisible(fullLayout.annotations);
 
  if(!annotationList.length || !gd._fullData.length) return;
 

src/components/annotations/draw.js

@@ -47,7 +47,9 @@ function draw(gd) {
  fullLayout._infolayer.selectAll('.annotation').remove();
 
  for(var i = 0; i < fullLayout.annotations.length; i++) {
- drawOne(gd, i);
+ if(fullLayout.annotations[i].visible) {
+ drawOne(gd, i);
+ }
  }
 
  return Plots.previousPromises(gd);
@@ -140,8 +142,6 @@ function drawOne(gd, index, opt, value) {
  // where we fail here when they add/remove annotations
  if(!optionsIn) return;
 
- var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
-
  // alter the input annotation as requested
  var optionsEdit = {};
  if(typeof opt === 'string' && opt) optionsEdit[opt] = value;
@@ -153,7 +153,11 @@ function drawOne(gd, index, opt, value) {
  Lib.nestedProperty(optionsIn, k).set(optionsEdit[k]);
  }
 
+ // return early in visible: false updates
+ if(optionsIn.visible === false) return;
+
  var gs = fullLayout._size;
+ var oldRef = {xref: optionsIn.xref, yref: optionsIn.yref};
 
  var axLetters = ['x', 'y'];
  for(i = 0; i < 2; i++) {

src/components/images/attributes.js

@@ -14,6 +14,15 @@ var cartesianConstants = require('../../plots/cartesian/constants');
 module.exports = {
  _isLinkedToArray: true,
 
+ visible: {
+ valType: 'boolean',
+ role: 'info',
+ dflt: true,
+ description: [
+ 'Determines whether or not this image is visible.'
+ ].join(' ')
+ },
+
  source: {
  valType: 'string',
  role: 'info',

src/components/images/defaults.js

@@ -12,36 +12,34 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 
+var name = 'images';
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
+ var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+ contOut = layoutOut[name] = [];
 
- if(!layoutIn.images || !Array.isArray(layoutIn.images)) return;
+ for(var i = 0; i < contIn.length; i++) {
+ var itemIn = contIn[i] || {},
+ itemOut = {};
 
+ imageDefaults(itemIn, itemOut, layoutOut);
 
- var containerIn = layoutIn.images,
- containerOut = layoutOut.images = [];
-
-
- for(var i = 0; i < containerIn.length; i++) {
- var image = containerIn[i];
-
- if(!image.source) continue;
-
- var defaulted = imageDefaults(containerIn[i] || {}, containerOut[i] || {}, layoutOut);
- containerOut.push(defaulted);
+ contOut.push(itemOut);
  }
 };
 
 
 function imageDefaults(imageIn, imageOut, fullLayout) {
 
- imageOut = imageOut || {};
-
  function coerce(attr, dflt) {
  return Lib.coerce(imageIn, imageOut, attributes, attr, dflt);
  }
 
- coerce('source');
+ var source = coerce('source');
+ var visible = coerce('visible', !!source);
+
+ if(!visible) return imageOut;
+
  coerce('layer');
  coerce('x');
  coerce('y');
@@ -52,12 +50,12 @@ function imageDefaults(imageIn, imageOut, fullLayout) {
  coerce('sizing');
  coerce('opacity');
 
- for(var i = 0; i < 2; i++) {
- var tdMock = { _fullLayout: fullLayout },
- axLetter = ['x', 'y'][i];
+ var gdMock = { _fullLayout: fullLayout },
+ axLetters = ['x', 'y'];
 
+ for(var i = 0; i < 2; i++) {
  // 'paper' is the fallback axref
- Axes.coerceRef(imageIn, imageOut, tdMock, axLetter, 'paper');
+ Axes.coerceRef(imageIn, imageOut, gdMock, axLetters[i], 'paper');
  }
 
  return imageOut;

src/components/images/draw.js

@@ -14,25 +14,23 @@ var Axes = require('../../plots/cartesian/axes');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 module.exports = function draw(gd) {
-
  var fullLayout = gd._fullLayout,
  imageDataAbove = [],
  imageDataSubplot = [],
  imageDataBelow = [];
 
- if(!fullLayout.images) return;
-
-
  // Sort into top, subplot, and bottom layers
  for(var i = 0; i < fullLayout.images.length; i++) {
  var img = fullLayout.images[i];
 
- if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
- imageDataSubplot.push(img);
- } else if(img.layer === 'above') {
- imageDataAbove.push(img);
- } else {
- imageDataBelow.push(img);
+ if(img.visible) {
+ if(img.layer === 'below' && img.xref !== 'paper' && img.yref !== 'paper') {
+ imageDataSubplot.push(img);
+ } else if(img.layer === 'above') {
+ imageDataAbove.push(img);
+ } else {
+ imageDataBelow.push(img);
+ }
  }
  }
 

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

src/lib/filter_visible.js

@@ -9,14 +9,21 @@
 
 'use strict';
 
-module.exports = function filterVisible(dataIn) {
- var dataOut = [];
+/** Filter out object items with visible !== true
+ * insider array container.
+ *
+ * @param {array of objects} container
+ * @return {array of objects} of length <= container
+ *
+ */
+module.exports = function filterVisible(container) {
+ var out = [];
 
- for(var i = 0; i < dataIn.length; i++) {
- var trace = dataIn[i];
+ for(var i = 0; i < container.length; i++) {
+ var item = container[i];
 
- if(trace.visible === true) dataOut.push(trace);
+ if(item.visible === true) out.push(item);
  }
 
- return dataOut;
+ return out;
 };

src/lib/index.js

@@ -76,6 +76,8 @@ lib.error = loggersModule.error;
 lib.notifier = require('./notifier');
 
 lib.filterUnique = require('./filter_unique');
+lib.filterVisible = require('./filter_visible');
+
 
 /**
  * swap x and y of the same attribute in container cont

src/plot_api/plot_api.js

@@ -1917,13 +1917,14 @@ function _relayout(gd, aobj) {
  objList = layout[objType] || [],
  obji = objList[objNum] || {};
 
- // new API, remove annotation / shape with `null`
- if(vi === null) aobj[ai] = 'remove';
-
  // if p.parts is just an annotation number, and val is either
  // 'add' or an entire annotation to add, the undo is 'remove'
  // if val is 'remove' then undo is the whole annotation object
  if(p.parts.length === 2) {
+
+ // new API, remove annotation / shape with `null`
+ if(vi === null) aobj[ai] = 'remove';
+
  if(aobj[ai] === 'add' || Lib.isPlainObject(aobj[ai])) {
  undoit[ai] = 'remove';
  }

src/plots/ternary/ternary.js

@@ -19,7 +19,6 @@ var Drawing = require('../../components/drawing');
 var setConvert = require('../cartesian/set_convert');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Axes = require('../cartesian/axes');
-var filterVisible = require('../../lib/filter_visible');
 var dragElement = require('../../components/dragelement');
 var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
@@ -94,7 +93,7 @@ proto.plot = function(ternaryData, fullLayout) {
  var moduleData = traceHash[moduleNames[i]];
  var _module = moduleData[0]._module;
 
- _module.plot(_this, filterVisible(moduleData), ternaryLayout);
+ _module.plot(_this, Lib.filterVisible(moduleData), ternaryLayout);
  }
 
  _this.traceHash = traceHash;

test/image/mocks/annotations.json

@@ -17,6 +17,7 @@
  {"text":"right bottom","showarrow":false,"xref":"paper","yref":"paper","xanchor":"right","yanchor":"bottom","x":0.5,"y":1},
  {"text":"move with page","xref":"paper","yref":"paper","x":0.75,"y":1},
  {"text":"opacity","opacity":0.5,"x":5,"y":5},
+ {"text":"not-visible", "visible": false},
  {"text":"left<br>justified","showarrow":false,"align":"left","x":1,"y":4},
  {"text":"center<br>justified","showarrow":false,"x":2,"y":4},
  {"text":"right<br>justified","showarrow":false,"align":"right","x":3,"y":4},

test/image/mocks/layout_image.json

@@ -51,6 +51,19 @@
  "opacity": 0.4,
  "layer": "below"
  },
+ {
+ "visible": false,
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
  {
  "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
  "xref": "x",

test/image/mocks/shapes_below_traces.json

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