Trigger hover and click events on gl3d graphs #240
Conversation
- makes use of (new) selection.buttons to determine if event is hover or click.
| bubbles: true, | ||
| clientX: x, | ||
| clientY: y | ||
| }; | ||
|
|
||
| // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent | ||
| if(opts) { | ||
| if(opts.buttons) fullOpts.buttons = opts.buttons; |
There was a problem hiding this comment.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
This is what the gl-vis relies on to determine which mouse over is considered a click event.
|
So looks like CircleCI + headless Chrome and headless Firefox + WebGL don't get along: Putting a Maybe we should make the |
- add instructions on how to manually test gl interaction specs
| var eventType = (selection.buttons) ? 'plotly_click' : 'plotly_hover', | ||
| eventData = makeEventData(xVal, yVal, zVal, trace, selection); | ||
|
|
||
| scene.graphDiv.emit(eventType, eventData); |
There was a problem hiding this comment.
To note, click events are fired within the same distance as hover events. Specifically, click events can be fired in situations where the cursor isn't exactly on top of a given data point.
This behaviour is debatable. We might want to restrict click events to some selection.distance.
- add timeout before each test in Plotly.plot promise - centralized timeout values - refer to one gd for all tests in suite
|
|
||
| sceneIds = Plots.getSubplotIds(fullLayout, 'gl3d'); | ||
| sceneIds.forEach(function(id) { | ||
| fullLayout[id]._scene.destroy(); |
There was a problem hiding this comment.
@mdtusz I think I found why running the gl interactions tests was so shaky and machine-dependent:
- destroying the graph div does not clear the gl context associated with it, meaning that many contexts were piling up on the test page making each tests slowing to run as time progressed.
There was a problem hiding this comment.
Now, each gl context is destroyed after each gl test run, making for more consistent test runs.
| @@ -93,8 +111,22 @@ function render(scene) { | |||
| container: svgContainer | |||
| }); | |||
| } | |||
|
|
|||
| var eventData = makeEventData(xVal, yVal, zVal, trace, selection); | |||
There was a problem hiding this comment.
Can we just inline this? It doesn't seem to get used anywhere else (as far as I see so far) and if it does, we can make it a function later.
There was a problem hiding this comment.
good call. Thanks!
|
Are we going to wait for the gl-plot3d dependency update first? If not, 💃! |
| scene.graphDiv.emit('plotly_click', eventData); | ||
| } | ||
| else { | ||
| scene.graphDiv.emit('plotly_hover', eventData); |
There was a problem hiding this comment.
Trigger hover and click events on gl3d graphs
@mdtusz
I didn't add anything to the library all week, so I found this to do as a day project.
Triggering hover events was easy. Click events needed a patch to
gl-plot3d. But by far the hardest part was adding tests for this thing.TODO:
see if I can get thesee Make WebGL jasmine tests run consistently across machines #241gl_plot_interactionstests to work on CircleCI