Rewrite slider events

Author: rreusser

src/components/sliders/draw.js

@@ -361,11 +361,7 @@ function handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, doTransiti
     var quantizedPosition = Math.round(normalizedPosition * (sliderOpts.steps.length - 1));
 
     if(quantizedPosition !== sliderOpts.active) {
-        var ret = {previousActive: sliderOpts.active};
-
         setActive(gd, sliderGroup, sliderOpts, quantizedPosition, true, doTransition);
-
-        return ret;
     }
 }
 
@@ -380,6 +376,7 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
 
     gd.emit('plotly_sliderchange', {
         slider: sliderOpts,
+        interaction: doCallback,
         previousActive: previousActive
     });
 
@@ -409,28 +406,21 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
     var $gd = d3.select(gd);
 
     item.on('mousedown', function() {
+        gd.emit('plotly_sliderstart', {slider: sliderOpts});
+
         var grip = sliderGroup.select('.' + constants.gripRectClass);
 
         d3.event.stopPropagation();
         d3.event.preventDefault();
         grip.call(Color.fill, sliderOpts.activebgcolor);
 
-        gd.emit('plotly_sliderdragstart', {slider: 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]);
-            var changes = handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
-
-            if(changes) {
-                gd.emit('plotly_sliderdragmove', {
-                    slider: sliderOpts,
-                    previousActive: changes.previousActive
-                });
-            }
+            handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
         });
 
         $gd.on('mouseup', function() {
@@ -439,7 +429,10 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
             $gd.on('mouseup', null);
             $gd.on('mousemove', null);
 
-            gd.emit('plotly_sliderdragend', {slider: sliderOpts});
+            gd.emit('plotly_sliderend', {
+                slider: sliderOpts,
+                step: sliderOpts.steps[sliderOpts.active]
+            });
         });
     });
 }

test/jasmine/tests/sliders_test.js

@@ -321,20 +321,28 @@ describe('sliders interactions', function() {
 
     it('should issue events on interaction', function(done) {
         var cntStart = 0;
-        var cntMove = 0;
+        var cntInteraction = 0;
+        var cntNonInteraction = 0;
         var cntEnd = 0;
-        var cntChange = 0;
-
-        gd.on('plotly_sliderdragstart', function() { cntStart++; });
-        gd.on('plotly_sliderdragmove', function() { cntMove++; });
-        gd.on('plotly_sliderdragend', function() { cntEnd++; });
-        gd.on('plotly_sliderchange', function() { cntChange++; });
-
-        function assertEventCounts(starts, moves, ends, changes) {
-            expect(cntStart).toEqual(starts);
-            expect(cntMove).toEqual(moves);
-            expect(cntEnd).toEqual(ends);
-            expect(cntChange).toEqual(changes);
+
+        gd.on('plotly_sliderstart', function() {
+            cntStart++;
+        }).on('plotly_sliderchange', function(datum) {
+            if(datum.interaction) {
+                cntInteraction++;
+            } else {
+                cntNonInteraction++;
+            }
+        }).on('plotly_sliderend', function() {
+            cntEnd++;
+        });
+
+        function assertEventCounts(starts, interactions, noninteractions, ends) {
+            expect(
+                [cntStart, cntInteraction, cntNonInteraction, cntEnd]
+            ).toEqual(
+                [starts, interactions, noninteractions, ends]
+            );
         }
 
         assertEventCounts(0, 0, 0, 0);
@@ -350,29 +358,29 @@ describe('sliders interactions', function() {
         }));
 
         setTimeout(function() {
-            // One slider received a mousedown, two linked sliders have received a change:
-            assertEventCounts(1, 0, 0, 2);
+            // One slider received a mousedown, one received an interaction, and one received a change:
+            assertEventCounts(1, 1, 1, 0);
 
-            setTimeout(function() {
-                // Drag to the left side:
-                gd.dispatchEvent(new MouseEvent('mousemove', {
-                    clientY: touchRect.top + 5,
-                    clientX: touchRect.left + 5,
-                }));
+            // Drag to the left side:
+            gd.dispatchEvent(new MouseEvent('mousemove', {
+                clientY: touchRect.top + 5,
+                clientX: touchRect.left + 5,
+            }));
 
-                setTimeout(function() {
-                    // On move, now two linked sliders have received two changes each:
-                    assertEventCounts(1, 1, 0, 4);
+            setTimeout(function() {
+                // On move, now to changes for the each slider, and no ends:
+                assertEventCounts(1, 2, 2, 0);
 
-                    gd.dispatchEvent(new MouseEvent('mouseup'));
+                gd.dispatchEvent(new MouseEvent('mouseup'));
 
-                    // Now all have been receivd:
-                    assertEventCounts(1, 1, 1, 4);
+                setTimeout(function() {
+                    // Now an end:
+                    assertEventCounts(1, 2, 2, 1);
 
                     done();
-                }, 10);
-            }, 10);
-        }, 10);
+                }, 50);
+            }, 50);
+        }, 50);
     });
 
     function assertNodeCount(query, cnt) {