From 6c42b04d0add3ed760e063c85e3a57aa01b68ff5 Mon Sep 17 00:00:00 2001 From: Ben Cutrell Date: Fri, 8 Apr 2016 10:51:39 -0400 Subject: [PATCH 1/3] Adds unhover events to pie graphs with tests --- src/plots/cartesian/graph_interact.js | 9 +++- src/traces/pie/plot.js | 4 +- test/jasmine/tests/unhover_pie_test.js | 65 ++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 test/jasmine/tests/unhover_pie_test.js diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 19c428761fa..db54ad02f2c 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..80d9ba1d97b 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -14,6 +14,7 @@ var Fx = require('../../plots/cartesian/graph_interact'); var Color = require('../../components/color'); var Drawing = require('../../components/drawing'); var svgTextUtils = require('../../lib/svg_text_utils'); +var Plotly = require('../../plotly'); var helpers = require('./helpers'); @@ -129,7 +130,8 @@ module.exports = function plot(gd, cdpie) { hasHoverData = true; } - function handleMouseOut() { + function handleMouseOut(evt) { + Plotly.Fx.unhover(gd, evt, 'pie'); if(hasHoverData) { Fx.loneUnhover(fullLayout._hoverlayer.node()); hasHoverData = false; diff --git a/test/jasmine/tests/unhover_pie_test.js b/test/jasmine/tests/unhover_pie_test.js new file mode 100644 index 00000000000..bf81a4a4b53 --- /dev/null +++ b/test/jasmine/tests/unhover_pie_test.js @@ -0,0 +1,65 @@ +var Plotly = require('@lib/index'); +var Lib = require('@src/lib'); + +var createGraphDiv = require('../assets/create_graph_div'); +var destroyGraphDiv = require('../assets/destroy_graph_div'); +var mouseEvent = require('../assets/mouse_event'); + +describe('pie unhovering', function() { + var mock = require('@mocks/pie_simple.json'); + + describe('event data', function() { + var mockCopy = Lib.extendDeep({}, mock), + width = mockCopy.layout.width, + height = mockCopy.layout.height, + gd; + + beforeEach(function(done) { + gd = createGraphDiv(); + + Plotly.plot(gd, mockCopy.data, mockCopy.layout) + .then(done); + }); + + afterEach(destroyGraphDiv); + + it('should contain the correct fields', function() { + var futureData; + + gd.on('plotly_unhover', function(data) { + futureData = data; + }); + + var x = width / 2 + var y = height / 2 + mouseEvent('mouseover', x, y); + mouseEvent('mouseout', x, y); + + expect(futureData.points.length).toEqual(1); + expect(Object.keys(futureData.points[0])).toEqual([ + 'v', 'label', 'color', 'i', 'hidden', + 'text', 'px1', 'pxmid', 'midangle', + 'px0', 'largeArc', 'cxFinal', 'cyFinal' + ]); + expect(futureData.points[0].i).toEqual(3); + }); + + it('should fire when the mouse moves off the graph', function(done) { + var count = 0 + futureData = []; + + gd.on('plotly_unhover', function(data) { + count++; + }); + // // mouseEvent('mouseout', 180, 140); + // expect(count).toEqual(3); + + setTimeout(function() { + mouseEvent('mouseover', 180, 140); + mouseEvent('mouseout', 180, 140); + expect(count).toEqual(1); + done(); + }, 100); + }); + }); +}); From ddf6c8a5d2b7880245e4bc78966152eec8e0630d Mon Sep 17 00:00:00 2001 From: Ben Cutrell Date: Fri, 8 Apr 2016 10:52:16 -0400 Subject: [PATCH 2/3] Removes dead code --- test/jasmine/tests/unhover_pie_test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/jasmine/tests/unhover_pie_test.js b/test/jasmine/tests/unhover_pie_test.js index bf81a4a4b53..d3d7b383892 100644 --- a/test/jasmine/tests/unhover_pie_test.js +++ b/test/jasmine/tests/unhover_pie_test.js @@ -51,8 +51,6 @@ describe('pie unhovering', function() { gd.on('plotly_unhover', function(data) { count++; }); - // // mouseEvent('mouseout', 180, 140); - // expect(count).toEqual(3); setTimeout(function() { mouseEvent('mouseover', 180, 140); From b93fe9783de27df10e29610afdc630e3e8fb7e57 Mon Sep 17 00:00:00 2001 From: Ben Cutrell Date: Fri, 8 Apr 2016 12:12:59 -0400 Subject: [PATCH 3/3] Merges pie hover tests and fixes lint errors --- src/plots/cartesian/graph_interact.js | 2 +- src/traces/pie/plot.js | 3 +- test/jasmine/tests/hover_pie_test.js | 54 ++++++++++++++++++---- test/jasmine/tests/unhover_pie_test.js | 63 -------------------------- 4 files changed, 46 insertions(+), 76 deletions(-) delete mode 100644 test/jasmine/tests/unhover_pie_test.js diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index db54ad02f2c..2fe124521e6 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -1278,7 +1278,7 @@ function hoverChanged(gd, evt, oldhoverdata) { // remove hover effects on mouse out, and emit unhover event function unhover(gd, evt, subplot) { - if (subplot === 'pie') { + if(subplot === 'pie') { gd.emit('plotly_unhover', { points: [evt] }); diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 80d9ba1d97b..ed2934662c9 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -14,7 +14,6 @@ var Fx = require('../../plots/cartesian/graph_interact'); var Color = require('../../components/color'); var Drawing = require('../../components/drawing'); var svgTextUtils = require('../../lib/svg_text_utils'); -var Plotly = require('../../plotly'); var helpers = require('./helpers'); @@ -131,7 +130,7 @@ module.exports = function plot(gd, cdpie) { } function handleMouseOut(evt) { - Plotly.Fx.unhover(gd, evt, 'pie'); + 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); }); diff --git a/test/jasmine/tests/unhover_pie_test.js b/test/jasmine/tests/unhover_pie_test.js deleted file mode 100644 index d3d7b383892..00000000000 --- a/test/jasmine/tests/unhover_pie_test.js +++ /dev/null @@ -1,63 +0,0 @@ -var Plotly = require('@lib/index'); -var Lib = require('@src/lib'); - -var createGraphDiv = require('../assets/create_graph_div'); -var destroyGraphDiv = require('../assets/destroy_graph_div'); -var mouseEvent = require('../assets/mouse_event'); - -describe('pie unhovering', function() { - var mock = require('@mocks/pie_simple.json'); - - describe('event data', function() { - var mockCopy = Lib.extendDeep({}, mock), - width = mockCopy.layout.width, - height = mockCopy.layout.height, - gd; - - beforeEach(function(done) { - gd = createGraphDiv(); - - Plotly.plot(gd, mockCopy.data, mockCopy.layout) - .then(done); - }); - - afterEach(destroyGraphDiv); - - it('should contain the correct fields', function() { - var futureData; - - gd.on('plotly_unhover', function(data) { - futureData = data; - }); - - var x = width / 2 - var y = height / 2 - mouseEvent('mouseover', x, y); - mouseEvent('mouseout', x, y); - - expect(futureData.points.length).toEqual(1); - expect(Object.keys(futureData.points[0])).toEqual([ - 'v', 'label', 'color', 'i', 'hidden', - 'text', 'px1', 'pxmid', 'midangle', - 'px0', 'largeArc', 'cxFinal', 'cyFinal' - ]); - expect(futureData.points[0].i).toEqual(3); - }); - - it('should fire when the mouse moves off the graph', function(done) { - var count = 0 - futureData = []; - - gd.on('plotly_unhover', function(data) { - count++; - }); - - setTimeout(function() { - mouseEvent('mouseover', 180, 140); - mouseEvent('mouseout', 180, 140); - expect(count).toEqual(1); - done(); - }, 100); - }); - }); -});