Common interface to interpret and execute API methods

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();

src/components/sliders/attributes.js

@@ -68,7 +68,7 @@ module.exports = {
  active: {
  valType: 'number',
  role: 'info',
- min: -10,
+ min: 0,
  dflt: 0,
  description: [
  'Determines which button (by index starting from 0) is',

src/components/sliders/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -52,6 +51,9 @@ module.exports = function draw(gd) {
  sliderGroups.exit().each(function(sliderOpts) {
  d3.select(this).remove();
 
+ sliderOpts._commandObserver.remove();
+ delete sliderOpts._commandObserver;
+
  Plots.autoMargin(gd, constants.autoMarginIdRoot + sliderOpts._index);
  });
 
@@ -65,12 +67,20 @@ module.exports = function draw(gd) {
  // If it has fewer than two options, it's not really a slider:
  if(sliderOpts.steps.length < 2) return;
 
+ var gSlider = d3.select(this);
+
  computeLabelSteps(sliderOpts);
 
+ Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+ if(sliderOpts.active === data.index) return;
+ if(sliderOpts._dragging) return;
+
+ setActive(gd, gSlider, sliderOpts, data.index, false, true);
+ });
+
  drawSlider(gd, d3.select(this), sliderOpts);
 
  // makeInputProxy(gd, d3.select(this), sliderOpts);
-
  });
 };
 
@@ -227,7 +237,9 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
  // Position the rectangle:
  Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
- setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
+ sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+ sliderGroup.call(drawCurrentValue, sliderOpts);
+
 }
 
 function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
@@ -371,19 +383,9 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
  sliderGroup._nextMethod = {step: step, doCallback: doCallback, doTransition: doTransition};
  sliderGroup._nextMethodRaf = window.requestAnimationFrame(function() {
  var _step = sliderGroup._nextMethod.step;
- var args = _step.args;
  if(!_step.method) return;
 
- sliderOpts._invokingCommand = true;
- Plotly[_step.method](gd, args[0], args[1], args[2]).then(function() {
- sliderOpts._invokingCommand = false;
- }, function() {
- sliderOpts._invokingCommand = false;
-
- // This is not a disaster. Some methods like `animate` reject if interrupted
- // and *should* nicely log a warning.
- Lib.warn('Warning: Plotly.' + _step.method + ' was called and rejected.');
- });
+ Plots.executeAPICommand(gd, _step.method, _step.args);
 
  sliderGroup._nextMethod = null;
  sliderGroup._nextMethodRaf = null;
@@ -405,13 +407,15 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
+ sliderOpts._dragging = true;
 
  $gd.on('mousemove', function() {
  var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
  handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
  });
 
  $gd.on('mouseup', function() {
+ sliderOpts._dragging = false;
  grip.call(Color.fill, sliderOpts.bgcolor);
  $gd.on('mouseup', null);
  $gd.on('mousemove', null);
@@ -467,8 +471,12 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
  var x = normalizedValueToPosition(sliderOpts, position);
 
+ // If this is true, then *this component* is already invoking its own command
+ // and has triggered its own animation.
+ if(sliderOpts._invokingCommand) return;
+
  var el = grip;
- if(doTransition && sliderOpts.transition.duration > 0 && !sliderOpts._invokingCommand) {
+ if(doTransition && sliderOpts.transition.duration > 0) {
  el = el.transition()
  .duration(sliderOpts.transition.duration)
  .ease(sliderOpts.transition.easing);

src/components/updatemenus/draw.js

@@ -11,7 +11,6 @@
 
 var d3 = require('d3');
 
-var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Color = require('../color');
@@ -21,7 +20,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-
 module.exports = function draw(gd) {
  var fullLayout = gd._fullLayout,
  menuData = makeMenuData(fullLayout);
@@ -115,6 +113,11 @@ module.exports = function draw(gd) {
  headerGroups.each(function(menuOpts) {
  var gHeader = d3.select(this);
 
+ var _gButton = menuOpts.type === 'dropdown' ? gButton : null;
+ Plots.manageCommandObserver(gd, menuOpts, menuOpts.buttons, function(data) {
+ setActive(gd, menuOpts, menuOpts.buttons[data.index], gHeader, _gButton, data.index, true);
+ });
+
  if(menuOpts.type === 'dropdown') {
  drawHeader(gd, gHeader, gButton, menuOpts);
 
@@ -293,21 +296,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  .call(setItemPosition, menuOpts, posOpts);
 
  button.on('click', function() {
- // update 'active' attribute in menuOpts
- menuOpts._input.active = menuOpts.active = buttonIndex;
-
- // fold up buttons and redraw header
- gButton.attr(constants.menuIndexAttrName, '-1');
+ setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);
 
- if(menuOpts.type === 'dropdown') {
- drawHeader(gd, gHeader, gButton, menuOpts);
- }
-
- drawButtons(gd, gHeader, gButton, menuOpts);
-
- // call button method
- var args = buttonOpts.args;
- Plotly[buttonOpts.method](gd, args[0], args[1], args[2]);
+ Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
  });
 
  button.on('mouseover', function() {
@@ -326,6 +317,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
  Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
 }
 
+function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
+ // update 'active' attribute in menuOpts
+ menuOpts._input.active = menuOpts.active = buttonIndex;
+
+ if(menuOpts.type === 'dropdown') {
+ // fold up buttons and redraw header
+ gButton.attr(constants.menuIndexAttrName, '-1');
+
+ drawHeader(gd, gHeader, gButton, menuOpts);
+ }
+
+ if(!isSilentUpdate || menuOpts.type === 'buttons') {
+ drawButtons(gd, gHeader, gButton, menuOpts);
+ }
+}
+
 function drawItem(item, menuOpts, itemOpts) {
  item.call(drawItemRect, menuOpts)
  .call(drawItemText, menuOpts, itemOpts);

src/plot_api/plot_api.js

@@ -2302,14 +2302,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  var newFrame = trans._currentFrame = trans._frameQueue.shift();
 
  if(newFrame) {
- gd.emit('plotly_animatingframe', {
- name: newFrame.name,
- frame: newFrame.frame,
- animation: {
- frame: newFrame.frameOpts,
- transition: newFrame.transitionOpts,
- }
- });
+ gd._fullLayout._currentFrame = newFrame.name;
 
  trans._lastFrameAt = Date.now();
  trans._timeToNext = newFrame.frameOpts.duration;
@@ -2324,6 +2317,15 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
  newFrame.frameOpts,
  newFrame.transitionOpts
  );
+
+ gd.emit('plotly_animatingframe', {
+ name: newFrame.name,
+ frame: newFrame.frame,
+ animation: {
+ frame: newFrame.frameOpts,
+ transition: newFrame.transitionOpts,
+ }
+ });
  } else {
  // If there are no more frames, then stop the RAF loop:
  stopAnimationLoop();