-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
fix ternary hover after zoom/pan events #688
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
Changes from all commits
3b1ee6b
ab3a9a2
cda7f6c
c45c074
a0a12d8
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 |
---|---|---|
|
@@ -17,12 +17,29 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) { | |
var scatterPointData = scatterHover(pointData, xval, yval, hovermode); | ||
if(!scatterPointData || scatterPointData[0].index === false) return; | ||
|
||
var newPointData = scatterPointData[0]; | ||
|
||
// if hovering on a fill, we don't show any point data so the label is | ||
// unchanged from what scatter gives us. | ||
if(scatterPointData[0].index === undefined) return scatterPointData; | ||
// unchanged from what scatter gives us - except that it needs to | ||
// be constrained to the trianglular plot area, not just the rectangular | ||
// area defined by the synthetic x and y axes | ||
// TODO: in some cases the vertical middle of the shape is not within | ||
// the triangular viewport at all, so the label can become disconnected | ||
// from the shape entirely. But calculating what portion of the shape | ||
// is actually visible, as constrained by the diagonal axis lines, is not | ||
// so easy and anyway we lost the information we would have needed to do | ||
// this inside scatterHover. | ||
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. 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. I'm ok with ignoring this. 👍 |
||
if(newPointData.index === undefined) { | ||
var yFracUp = 1 - (newPointData.y0 / pointData.ya._length), | ||
xLen = pointData.xa._length, | ||
xMin = xLen * yFracUp / 2, | ||
xMax = xLen - xMin; | ||
newPointData.x0 = Math.max(Math.min(newPointData.x0, xMax), xMin); | ||
newPointData.x1 = Math.max(Math.min(newPointData.x1, xMax), xMin); | ||
return scatterPointData; | ||
} | ||
|
||
var newPointData = scatterPointData[0], | ||
cdi = newPointData.cd[newPointData.index]; | ||
var cdi = newPointData.cd[newPointData.index]; | ||
|
||
newPointData.a = cdi.a; | ||
newPointData.b = cdi.b; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
var mouseEvent = require('./mouse_event'); | ||
|
||
module.exports = function click(x, y) { | ||
mouseEvent('mousemove', x, y); | ||
mouseEvent('mousedown', x, y); | ||
mouseEvent('mouseup', 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. @etpinard per my commit message... somehow eslint run through sublime cannot sort out the config files within the jasmine directory, even though as far as I can tell it's all correct. In any other directory things look fine. Have you seen this? If I change I suppose we could make that change and also explicitly set 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. Interesting. No, I've never seen that one before. 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. I was thinking it may be worth moving all our We could move Having
isn't great. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
var click = require('./click'); | ||
var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY; | ||
|
||
module.exports = function doubleClick(x, y) { | ||
return new Promise(function(resolve) { | ||
click(x, y); | ||
|
||
setTimeout(function() { | ||
click(x, y); | ||
setTimeout(function() { resolve(); }, DBLCLICKDELAY / 2); | ||
}, DBLCLICKDELAY / 2); | ||
}); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,12 @@ var mouseEvent = require('../assets/mouse_event'); | |
var getRectCenter = require('../assets/get_rect_center'); | ||
var customMatchers = require('../assets/custom_matchers'); | ||
|
||
// cartesian click events events use the hover data | ||
// from the mousemove events and then simulate | ||
// a click event on mouseup | ||
var click = require('../assets/click'); | ||
var doubleClick = require('../assets/double_click'); | ||
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. Fantastic. Thanks so much! |
||
|
||
|
||
describe('Test click interactions:', function() { | ||
var mock = require('@mocks/14.json'); | ||
|
@@ -31,26 +37,6 @@ describe('Test click interactions:', function() { | |
|
||
afterEach(destroyGraphDiv); | ||
|
||
// cartesian click events events use the hover data | ||
// from the mousemove events and then simulate | ||
// a click event on mouseup | ||
function click(x, y) { | ||
mouseEvent('mousemove', x, y); | ||
mouseEvent('mousedown', x, y); | ||
mouseEvent('mouseup', x, y); | ||
} | ||
|
||
function doubleClick(x, y) { | ||
return new Promise(function(resolve) { | ||
click(x, y); | ||
|
||
setTimeout(function() { | ||
click(x, y); | ||
setTimeout(function() { resolve(); }, DBLCLICKDELAY / 2); | ||
}, DBLCLICKDELAY / 2); | ||
}); | ||
} | ||
|
||
function drag(fromX, fromY, toX, toY, delay) { | ||
return new Promise(function(resolve) { | ||
mouseEvent('mousemove', fromX, fromY); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ var d3 = require('d3'); | |
|
||
var Plotly = require('@lib/index'); | ||
var Lib = require('@src/lib'); | ||
var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY; | ||
var doubleClick = require('../assets/double_click'); | ||
|
||
var createGraphDiv = require('../assets/create_graph_div'); | ||
var destroyGraphDiv = require('../assets/destroy_graph_div'); | ||
|
@@ -35,23 +35,6 @@ describe('select box and lasso', function() { | |
mouseEvent('mouseup', path[len - 1][0], path[len - 1][1]); | ||
} | ||
|
||
// cartesian click events events use the hover data | ||
// from the mousemove events and then simulate | ||
// a click event on mouseup | ||
function click(x, y) { | ||
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; | ||
|
||
|
@@ -104,7 +87,7 @@ describe('select box and lasso', function() { | |
|
||
drag([[x0, y0], [x1, y1]]); | ||
|
||
doubleClick(x2, y2, done); | ||
doubleClick(x2, y2).then(done); | ||
}); | ||
}); | ||
|
||
|
@@ -153,7 +136,7 @@ describe('select box and lasso', function() { | |
|
||
drag([[x0, y0], [x1, y1]]); | ||
|
||
doubleClick(x2, y2, done); | ||
doubleClick(x2, y2).then(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. much better. 🎉 |
||
}); | ||
}); | ||
|
||
|
@@ -225,7 +208,7 @@ describe('select box and lasso', function() { | |
y: [0.10209191961595454, 24.512223978291406] | ||
}, 'with the correct selected range'); | ||
|
||
doubleClick(250, 200, function() { | ||
doubleClick(250, 200).then(function() { | ||
expect(doubleClickData).toBe(null, 'with the correct deselect data'); | ||
done(); | ||
}); | ||
|
@@ -283,7 +266,7 @@ describe('select box and lasso', function() { | |
y: 2.75 | ||
}], 'with the correct selected points'); | ||
|
||
doubleClick(250, 200, function() { | ||
doubleClick(250, 200).then(function() { | ||
expect(doubleClickData).toBe(null, 'with the correct deselect data'); | ||
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.
So if you have, for example, a shape that goes way off the top of the plot, the label will still be centered on the visible portion rather than pinned to the top (and because of how this happens, the x position of the label could also have ended up screwy previously)
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. That sounds good.
Now that all the scatter ternary hover label testing infrastructure is in place, would you mind adding a test case for this?