-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
Add doubleclick events #255
Changes from 7 commits
bd6995e
10cded2
8b6783f
e8ef663
d46ae26
02eca97
782f692
5b1e895
c41a756
9c19406
e7e0889
848f4a5
4c5103f
d517c4f
90edb18
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,183 @@ | ||
var Plotly = require('@lib/index'); | ||
var Lib = require('@src/lib'); | ||
var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY; | ||
|
||
var createGraphDiv = require('../assets/create_graph_div'); | ||
var destroyGraphDiv = require('../assets/destroy_graph_div'); | ||
var mouseEvent = require('../assets/mouse_event'); | ||
|
||
|
||
describe('select box and lasso', function() { | ||
var mock = require('@mocks/14.json'); | ||
|
||
afterEach(destroyGraphDiv); | ||
|
||
function drag(path) { | ||
var len = path.length; | ||
|
||
mouseEvent('mousemove', path[0][0], path[0][1]); | ||
mouseEvent('mousedown', path[0][0], path[0][1]); | ||
|
||
path.slice(1, len).forEach(function(pt) { | ||
mouseEvent('mousemove', pt[0], pt[1]); | ||
}); | ||
|
||
mouseEvent('mouseup', path[len - 1][0], path[len - 1][1]); | ||
} | ||
|
||
function click(x, y) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a reason for using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See #176 (comment) But yeah, I should mention why in the code too. |
||
mouseEvent('mousemove', x, y); | ||
mouseEvent('mousedown', x, y); | ||
mouseEvent('mouseup', x, y); | ||
} | ||
|
||
function doubleClick(x, y, cb) { | ||
click(x, y); | ||
setTimeout(function() { | ||
click(x, y); | ||
cb(); | ||
}, DBLCLICKDELAY / 2); | ||
} | ||
|
||
function assertRange(actual, expected) { | ||
var PRECISION = 4; | ||
|
||
expect(actual.x[0]).toBeCloseTo(expected.x[0], PRECISION); | ||
expect(actual.x[1]).toBeCloseTo(expected.x[1], PRECISION); | ||
expect(actual.y[0]).toBeCloseTo(expected.y[0], PRECISION); | ||
expect(actual.y[1]).toBeCloseTo(expected.y[1], PRECISION); | ||
} | ||
|
||
describe('select events', function() { | ||
var mockCopy = Lib.extendDeep({}, mock); | ||
mockCopy.layout.dragmode = 'select'; | ||
|
||
var gd; | ||
beforeEach(function(done) { | ||
gd = createGraphDiv(); | ||
|
||
Plotly.plot(gd, mockCopy.data, mockCopy.layout) | ||
.then(done); | ||
}); | ||
|
||
it('should trigger events', function(done) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe add some comments as to the specifics of the test. It's not immediately clear what's being tested. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. sure |
||
var selectingCnt = 0, | ||
selectingData; | ||
gd.on('plotly_selecting', function(data) { | ||
selectingCnt++; | ||
selectingData = data; | ||
}); | ||
|
||
var selectedCnt = 0, | ||
selectedData; | ||
gd.on('plotly_selected', function(data) { | ||
selectedCnt++; | ||
selectedData = data; | ||
}); | ||
|
||
var doubleClickData; | ||
gd.on('plotly_doubleclick', function(data) { | ||
doubleClickData = data; | ||
}); | ||
|
||
drag([[100, 200], [150, 200]]); | ||
|
||
expect(selectingCnt).toEqual(1); | ||
expect(selectingData.points).toEqual([{ | ||
curveNumber: 0, | ||
pointNumber: 0, | ||
x: 0.002, | ||
y: 16.25 | ||
}, { | ||
curveNumber: 0, | ||
pointNumber: 1, | ||
x: 0.004, | ||
y: 12.5 | ||
}]); | ||
assertRange(selectingData.range, { | ||
x: [0.0019667582669138295, 0.004546754982054625], | ||
y: [0.10209191961595454, 24.512223978291406] | ||
}); | ||
|
||
expect(selectedCnt).toEqual(1); | ||
expect(selectedData.points).toEqual([{ | ||
curveNumber: 0, | ||
pointNumber: 0, | ||
x: 0.002, | ||
y: 16.25 | ||
}, { | ||
curveNumber: 0, | ||
pointNumber: 1, | ||
x: 0.004, | ||
y: 12.5 | ||
}]); | ||
assertRange(selectedData.range, { | ||
x: [0.0019667582669138295, 0.004546754982054625], | ||
y: [0.10209191961595454, 24.512223978291406] | ||
}); | ||
|
||
doubleClick(250, 200, function() { | ||
expect(doubleClickData).toBe(null); | ||
done(); | ||
}); | ||
}); | ||
|
||
}); | ||
|
||
describe('lasso events', function() { | ||
var mockCopy = Lib.extendDeep({}, mock); | ||
mockCopy.layout.dragmode = 'lasso'; | ||
|
||
var gd; | ||
beforeEach(function(done) { | ||
gd = createGraphDiv(); | ||
|
||
Plotly.plot(gd, mockCopy.data, mockCopy.layout) | ||
.then(done); | ||
}); | ||
|
||
it('should trigger events', function(done) { | ||
var selectingCnt = 0, | ||
selectingData; | ||
gd.on('plotly_selecting', function(data) { | ||
selectingCnt++; | ||
selectingData = data; | ||
}); | ||
|
||
var selectedCnt = 0, | ||
selectedData; | ||
gd.on('plotly_selected', function(data) { | ||
selectedCnt++; | ||
selectedData = data; | ||
}); | ||
|
||
var doubleClickData; | ||
gd.on('plotly_doubleclick', function(data) { | ||
doubleClickData = data; | ||
}); | ||
|
||
drag([[331, 178], [333, 246], [350, 250], [343, 176]]); | ||
|
||
expect(selectingCnt).toEqual(3); | ||
expect(selectingData.points).toEqual([{ | ||
curveNumber: 0, | ||
pointNumber: 10, | ||
x: 0.099, | ||
y: 2.75 | ||
}]); | ||
|
||
expect(selectedCnt).toEqual(1); | ||
expect(selectedData.points).toEqual([{ | ||
curveNumber: 0, | ||
pointNumber: 10, | ||
x: 0.099, | ||
y: 2.75 | ||
}]); | ||
|
||
doubleClick(250, 200, function() { | ||
expect(doubleClickData).toBe(null); | ||
done(); | ||
}); | ||
}); | ||
}); | ||
}); |
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.
Can we avoid using
this
here?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.
Sure.
You're not a fan of the jasmine
this
?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.
Actually on second look, I'm ok with that. Didn't know that it was jasmine convention and that the
this
is cleared between specs.