Pass MouseEvent to the user #9
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| var mouseEvent = require('./mouse_event'); | ||
|
|
||
| module.exports = function click(x, y, opts) { | ||
| mouseEvent('mousemove', x, y, opts); | ||
| mouseEvent('mousedown', x, y, opts); | ||
| mouseEvent('mouseup', x, y, opts); | ||
| mouseEvent('click', x, y, opts); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,6 +16,30 @@ var customMatchers = require('../assets/custom_matchers'); | |
| var click = require('../assets/click'); | ||
| var doubleClickRaw = require('../assets/double_click'); | ||
|
|
||
| function move(fromX, fromY, toX, toY, delay) { | ||
| return new Promise(function(resolve) { | ||
| mouseEvent('mousemove', fromX, fromY); | ||
|
|
||
| setTimeout(function() { | ||
| mouseEvent('mousemove', toX, toY); | ||
| resolve(); | ||
| }, delay || DBLCLICKDELAY / 4); | ||
| }); | ||
| } | ||
|
|
||
| function drag(fromX, fromY, toX, toY, delay) { | ||
| return new Promise(function(resolve) { | ||
| mouseEvent('mousemove', fromX, fromY); | ||
| mouseEvent('mousedown', fromX, fromY); | ||
| mouseEvent('mousemove', toX, toY); | ||
|
|
||
| setTimeout(function() { | ||
| mouseEvent('mouseup', toX, toY); | ||
| resolve(); | ||
| }, delay || DBLCLICKDELAY / 4); | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| describe('Test click interactions:', function() { | ||
| var mock = require('@mocks/14.json'); | ||
|
|
@@ -39,19 +63,6 @@ describe('Test click interactions:', function() { | |
|
|
||
| afterEach(destroyGraphDiv); | ||
|
|
||
| function doubleClick(x, y) { | ||
| return doubleClickRaw(x, y).then(function() { | ||
| return Plotly.Plots.previousPromises(gd); | ||
|
|
@@ -87,6 +98,55 @@ describe('Test click interactions:', function() { | |
| expect(pt.pointNumber).toEqual(11); | ||
| expect(pt.x).toEqual(0.125); | ||
| expect(pt.y).toEqual(2.125); | ||
|
|
||
| var evt = futureData.event; | ||
| expect(evt.clientX).toEqual(pointPos[0]); | ||
| expect(evt.clientY).toEqual(pointPos[1]); | ||
| }); | ||
| }); | ||
|
|
||
| describe('modified click events', function() { | ||
| var clickOpts = { | ||
| altKey: true, | ||
| ctrlKey: true, | ||
| metaKey: true, | ||
| shiftKey: true | ||
| }, | ||
| futureData; | ||
|
|
||
| beforeEach(function(done) { | ||
| Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); | ||
|
|
||
| gd.on('plotly_click', function(data) { | ||
| futureData = data; | ||
| }); | ||
| }); | ||
|
|
||
| it('should not be trigged when not on data points', function() { | ||
| click(blankPos[0], blankPos[1], clickOpts); | ||
| expect(futureData).toBe(undefined); | ||
| }); | ||
|
|
||
| it('should contain the correct fields', function() { | ||
| click(pointPos[0], pointPos[1], clickOpts); | ||
| expect(futureData.points.length).toEqual(1); | ||
|
|
||
| var pt = futureData.points[0]; | ||
| expect(Object.keys(pt)).toEqual([ | ||
| 'data', 'fullData', 'curveNumber', 'pointNumber', | ||
| 'x', 'y', 'xaxis', 'yaxis' | ||
| ]); | ||
| expect(pt.curveNumber).toEqual(0); | ||
| expect(pt.pointNumber).toEqual(11); | ||
| expect(pt.x).toEqual(0.125); | ||
| expect(pt.y).toEqual(2.125); | ||
|
|
||
| var evt = futureData.event; | ||
| expect(evt.clientX).toEqual(pointPos[0]); | ||
| expect(evt.clientY).toEqual(pointPos[1]); | ||
| Object.getOwnPropertyNames(clickOpts).forEach(function(opt) { | ||
| expect(evt[opt]).toEqual(clickOpts[opt], opt); | ||
|
|
||
| }); | ||
| }); | ||
| }); | ||
|
|
||
|
|
@@ -191,6 +251,46 @@ describe('Test click interactions:', function() { | |
| expect(pt.pointNumber).toEqual(11); | ||
| expect(pt.x).toEqual(0.125); | ||
| expect(pt.y).toEqual(2.125); | ||
|
|
||
| var evt = futureData.event; | ||
| expect(evt.clientX).toEqual(pointPos[0]); | ||
| expect(evt.clientY).toEqual(pointPos[1]); | ||
|
There was a problem hiding this comment. Maybe we could a test case that has a |
||
| }); | ||
| }); | ||
|
|
||
| describe('plotly_unhover event with hoverinfo set to none', function() { | ||
| var futureData; | ||
|
|
||
| beforeEach(function(done) { | ||
|
|
||
| var modifiedMockCopy = Lib.extendDeep({}, mockCopy); | ||
| modifiedMockCopy.data[0].hoverinfo = 'none'; | ||
| Plotly.plot(gd, modifiedMockCopy.data, modifiedMockCopy.layout) | ||
| .then(done); | ||
|
|
||
| gd.on('plotly_unhover', function(data) { | ||
| futureData = data; | ||
| }); | ||
| }); | ||
|
|
||
| it('should contain the correct fields despite hoverinfo: "none"', function(done) { | ||
| move(pointPos[0], pointPos[1], blankPos[0], blankPos[1]).then(function() { | ||
| expect(futureData.points.length).toEqual(1); | ||
|
|
||
| var pt = futureData.points[0]; | ||
| expect(Object.keys(pt)).toEqual([ | ||
| 'data', 'fullData', 'curveNumber', 'pointNumber', | ||
| 'x', 'y', 'xaxis', 'yaxis' | ||
| ]); | ||
| expect(pt.curveNumber).toEqual(0); | ||
| expect(pt.pointNumber).toEqual(11); | ||
| expect(pt.x).toEqual(0.125); | ||
| expect(pt.y).toEqual(2.125); | ||
|
|
||
| var evt = futureData.event; | ||
| expect(evt.clientX).toEqual(blankPos[0]); | ||
| expect(evt.clientY).toEqual(blankPos[1]); | ||
| }).then(done); | ||
| }); | ||
| }); | ||
|
|
||
|
|
@@ -817,6 +917,7 @@ describe('Test click interactions:', function() { | |
| }); | ||
| }); | ||
|
|
||
|
|
||
| describe('dragbox', function() { | ||
|
|
||
| afterEach(destroyGraphDiv); | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great. This will work for all subplots that call
Fx.hoverif I remember correctly that means: cartesian, ternary, geo and mapbox subplots. @n-riesco would you mind double checking?Now, at the very least, we should make sure
eventis passed in pie chart hover data. Pie hover is a little different but shouldn't make it too hard to implement.This leaves our gl2d, gl3d and
parcoords(and polar but who cares about polar?). I'll be ok leaving them out of the first iteration. We should instead spent some time down the road merging their hover logic withFx.hover.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@etpinard It doesn't work for pie, ternary, geo or mapbox, because when they call to
Fx.click(gd, evt)they make up anevt.I reckon that to make it work for all these types of subplots, first I need to locate where they call
Fx.click,Fx.hoverandFx.unhoverand then see if it's possible to send the original event.For example, here: why do we need to set the event to
{target: true}? Is is OK if we just doFx.click(gd, d3.event);There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That sounds ok to me, yes.