diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 19c428761fa..2fe124521e6 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -1277,7 +1277,14 @@ function hoverChanged(gd, evt, oldhoverdata) { } // remove hover effects on mouse out, and emit unhover event -function unhover(gd, evt) { +function unhover(gd, evt, subplot) { + if(subplot === 'pie') { + gd.emit('plotly_unhover', { + points: [evt] + }); + return; + } + var fullLayout = gd._fullLayout; if(!evt) evt = {}; if(evt.target && diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 7013cb29c5b..ed2934662c9 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -129,7 +129,8 @@ module.exports = function plot(gd, cdpie) { hasHoverData = true; } - function handleMouseOut() { + function handleMouseOut(evt) { + Fx.unhover(gd, evt, 'pie'); if(hasHoverData) { Fx.loneUnhover(fullLayout._hoverlayer.node()); hasHoverData = false; diff --git a/test/jasmine/tests/hover_pie_test.js b/test/jasmine/tests/hover_pie_test.js index c0c6baaa50b..7d96d12daf1 100644 --- a/test/jasmine/tests/hover_pie_test.js +++ b/test/jasmine/tests/hover_pie_test.js @@ -42,37 +42,71 @@ describe('pie hovering', function() { * cyFinal: 160 * }]; */ - var futureData; + var hoverData, + unhoverData; gd.on('plotly_hover', function(data) { - futureData = data; + hoverData = data; + }); + + gd.on('plotly_unhover', function(data) { + unhoverData = data; }); mouseEvent('mouseover', width / 2, height / 2); - expect(futureData.points.length).toEqual(1); - expect(Object.keys(futureData.points[0])).toEqual([ + mouseEvent('mouseout', width / 2, height / 2); + + expect(hoverData.points.length).toEqual(1); + expect(unhoverData.points.length).toEqual(1); + + var fields = [ 'v', 'label', 'color', 'i', 'hidden', 'text', 'px1', 'pxmid', 'midangle', 'px0', 'largeArc', 'cxFinal', 'cyFinal' - ]); - expect(futureData.points[0].i).toEqual(3); + ]; + + expect(Object.keys(hoverData.points[0])).toEqual(fields); + expect(hoverData.points[0].i).toEqual(3); + + expect(Object.keys(unhoverData.points[0])).toEqual(fields); + expect(unhoverData.points[0].i).toEqual(3); }); - it('should fire when moving from one slice to another', function(done) { + it('should fire hover event when moving from one slice to another', function(done) { var count = 0, - futureData = []; + hoverData = []; gd.on('plotly_hover', function(data) { count++; - futureData.push(data); + hoverData.push(data); + }); + + mouseEvent('mouseover', 180, 140); + setTimeout(function() { + mouseEvent('mouseover', 240, 200); + expect(count).toEqual(2); + expect(hoverData[0]).not.toEqual(hoverData[1]); + done(); + }, 100); + }); + + it('should fire unhover event when the mouse moves off the graph', function(done) { + var count = 0, + unhoverData = []; + + gd.on('plotly_unhover', function(data) { + count++; + unhoverData.push(data); }); mouseEvent('mouseover', 180, 140); + mouseEvent('mouseout', 180, 140); setTimeout(function() { mouseEvent('mouseover', 240, 200); + mouseEvent('mouseout', 240, 200); expect(count).toEqual(2); - expect(futureData[0]).not.toEqual(futureData[1]); + expect(unhoverData[0]).not.toEqual(unhoverData[1]); done(); }, 100); });