emove custom plotmodified event

Author: rreusser

src/plot_api/plot_api.js

@@ -1204,7 +1204,6 @@ Plotly.restyle = function restyle(gd, astr, val, traces) {
 
     return plotDone.then(function() {
         gd.emit('plotly_restyle', specs.eventData);
-        gd.emit('plotly_plotmodified');
         return gd;
     });
 };
@@ -1711,7 +1710,6 @@ Plotly.relayout = function relayout(gd, astr, val) {
 
     return plotDone.then(function() {
         gd.emit('plotly_relayout', specs.eventData);
-        gd.emit('plotly_plotmodified');
         return gd;
     });
 };
@@ -2126,7 +2124,6 @@ Plotly.update = function update(gd, traceUpdate, layoutUpdate, traces) {
             data: restyleSpecs.eventData,
             layout: relayoutSpecs.eventData
         });
-        gd.emit('plotly_plotmodified');
 
         return gd;
     });
@@ -2307,15 +2304,6 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
             if(newFrame) {
                 gd._fullLayout._currentFrame = newFrame.name;
 
-                gd.emit('plotly_animatingframe', {
-                    name: newFrame.name,
-                    frame: newFrame.frame,
-                    animation: {
-                        frame: newFrame.frameOpts,
-                        transition: newFrame.transitionOpts,
-                    }
-                });
-
                 trans._lastFrameAt = Date.now();
                 trans._timeToNext = newFrame.frameOpts.duration;
 
@@ -2330,7 +2318,14 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
                     newFrame.transitionOpts
                 );
 
-                gd.emit('plotly_plotmodified');
+                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/plots/command.js

@@ -145,10 +145,23 @@ exports.createCommandObserver = function(gd, commandList, onchange) {
             return changed;
         };
 
-        gd._internalOn('plotly_plotmodified', check);
+        var checkEvents = [
+            'plotly_relayout',
+            'plotly_redraw',
+            'plotly_restyle',
+            'plotly_update',
+            'plotly_animatingframe',
+            'plotly_afterplot'
+        ];
+
+        for(var i = 0; i < checkEvents.length; i++) {
+            gd._internalOn(checkEvents[i], check);
+        }
 
         remove = function() {
-            gd._removeInternalListener('plotly_plotmodified', check);
+            for(var i = 0; i < checkEvents.length; i++) {
+                gd._removeInternalListener(checkEvents[i], check);
+            }
         };
     } else {
         lookupTable = {};

test/jasmine/tests/command_test.js

@@ -4,6 +4,7 @@ var Plots = Plotly.Plots;
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
+var Lib = require('@src/lib');
 
 describe('Plots.executeAPICommand', function() {
     'use strict';
@@ -437,3 +438,40 @@ describe('Plots.computeAPICommandBindings', function() {
         });
     });
 });
+
+describe('component bindings', function() {
+    'use strict';
+
+    var gd;
+    var mock = require('@mocks/binding.json');
+
+    beforeEach(function(done) {
+        var mockCopy = Lib.extendDeep({}, mock);
+        gd = createGraphDiv();
+
+        Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
+    });
+
+    afterEach(function() {
+        destroyGraphDiv(gd);
+    });
+
+    it('udpates bound components when the value changes', function(done) {
+        expect(gd.layout.sliders[0].active).toBe(0);
+
+        Plotly.restyle(gd, 'marker.color', 'blue').then(function() {
+            expect(gd.layout.sliders[0].active).toBe(4);
+        }).catch(fail).then(done);
+    });
+
+    it('udpates bound components when the computed changes', function(done) {
+        expect(gd.layout.sliders[0].active).toBe(0);
+
+        // The default line color comes from the marker color, if specified.
+        // That is, the fact that the marker color changes is just incidental, but
+        // nonetheless is bound by value to the component.
+        Plotly.restyle(gd, 'line.color', 'blue').then(function() {
+            expect(gd.layout.sliders[0].active).toBe(4);
+        }).catch(fail).then(done);
+    });
+});