Skip to content

Add mouse event to plotly_click, plotly_hover and plotly_unhover #1505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 30, 2017
9 changes: 5 additions & 4 deletions test/jasmine/assets/click.js
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) {
mouseEvent('mousemove', x, y);
mouseEvent('mousedown', x, y);
mouseEvent('mouseup', x, y);
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);
};
12 changes: 12 additions & 0 deletions test/jasmine/assets/mouse_event.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@ module.exports = function(type, x, y, opts) {
if(opts && opts.buttons) {
fullOpts.buttons = opts.buttons;
}
if(opts && opts.altKey) {
fullOpts.altKey = opts.altKey;
}
if(opts && opts.ctrlKey) {
fullOpts.ctrlKey = opts.ctrlKey;
}
if(opts && opts.metaKey) {
fullOpts.metaKey = opts.metaKey;
}
if(opts && opts.shiftKey) {
fullOpts.shiftKey = opts.shiftKey;
}

var el = (opts && opts.element) || document.elementFromPoint(x, y),
ev;
Expand Down
127 changes: 114 additions & 13 deletions test/jasmine/tests/click_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -39,19 +63,6 @@ describe('Test click interactions:', function() {

afterEach(destroyGraphDiv);

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);
});
}

function doubleClick(x, y) {
return doubleClickRaw(x, y).then(function() {
return Plotly.Plots.previousPromises(gd);
Expand Down Expand Up @@ -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);
});
});
});

Expand Down Expand Up @@ -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]);
});
});

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);
});
});

Expand Down Expand Up @@ -817,6 +917,7 @@ describe('Test click interactions:', function() {
});
});


describe('dragbox', function() {

afterEach(destroyGraphDiv);
Expand Down
Loading