Skip to content

annotation hover text #1573

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.

Sign up for GitHub

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 5 commits into from
Apr 11, 2017
Merged

annotation hover text #1573

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
58966ed
annotation hover text
alexcjohnson Apr 7, 2017
384353a
lint annotations_test
alexcjohnson Apr 10, 2017
4ab7986
fix loneHover comment
alexcjohnson Apr 10, 2017
919580e
hover box default dark line -> #444 not black.
alexcjohnson Apr 10, 2017
da1e9d7
annotations[i].captureevents
alexcjohnson Apr 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/annotations/annotation_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ module.exports = function handleAnnotationDefaults(annIn, annOut, fullLayout, op
color: hoverBorder
});
}
coerce('captureevents', !!hoverText);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe hoverText.length > 0, as !![] \\ => true?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For annotations, hovertext is a string, I think this is OK. But you're absolutely right when this moves into traces and can be an array.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right. My bad.


return annOut;
};
12 changes: 12 additions & 0 deletions src/components/annotations/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,18 @@ module.exports = {
].join(' ')
})
},
captureevents: {
valType: 'boolean',
role: 'info',
description: [
'Determines whether the annotation text box captures mouse move',
'and click events, or allows those events to pass through to data',
'points in the plot that may be behind the annotation. By default',
'`captureevents` is *false* unless `hovertext` is provided.',
'If you use the event `plotly_clickannotation` without `hovertext`',
'you must explicitly enable `captureevents`.'
].join(' ')
},

_deprecated: {
ref: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/annotations/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function drawOne(gd, index) {
.attr('data-index', String(index));

var annTextGroupInner = annTextGroup.append('g')
.style('pointer-events', 'all')
.style('pointer-events', options.captureevents ? 'all' : null)
.call(setCursor, 'default')
.on('click', function() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

plotly_clickannotation was present, but didn't actually work before this, as far as I can tell, because it didn't have pointer-events turned back on. Anyway I had to do this to make hover work. A potential downside to this is that annotations grab mouse interactions even if you don't use them, so if you have a data point that's entirely under an annotation you won't see it in hover. You could imagine only grabbing mouse events if you are using them for hover, but then you won't get click events, and at draw time it's generally not known yet whether click events are going to be captured... so I don't see any way around this.

Anyway, I only attached click and hover to the text box, not to the arrows, and both are included in the new test.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only attached click and hover to the text box, not to the arrows

That's sounds like the desired behavior to me.

gd._dragging = false;
Expand Down
22 changes: 18 additions & 4 deletions test/jasmine/tests/annotations_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1127,23 +1127,36 @@ describe('annotation effects', function() {
}

makePlot([
{x: 50, y: 50, text: 'hi', width: 50, ax: 0, ay: -20},
{x: 50, y: 50, text: 'hi', width: 50, ax: 0, ay: -40},
{x: 20, y: 20, text: 'bye', height: 40, showarrow: false},
{x: 80, y: 80, text: 'why?', ax: 0, ay: -20}
{x: 80, y: 80, text: 'why?', ax: 0, ay: -40}
], {}) // turn off the default editable: true
.then(function() {
clickData = [];
gd.on('plotly_clickannotation', function(evt) { clickData.push(evt); });

gdBB = gd.getBoundingClientRect();
pos0Head = [gdBB.left + 250, gdBB.top + 250];
pos0 = [pos0Head[0], pos0Head[1] - 20];
pos0 = [pos0Head[0], pos0Head[1] - 40];
pos1 = [gdBB.left + 160, gdBB.top + 340];
pos2Head = [gdBB.left + 340, gdBB.top + 160];
pos2 = [pos2Head[0], pos2Head[1] - 20];
pos2 = [pos2Head[0], pos2Head[1] - 40];

return assertHoverLabels([[pos0, ''], [pos1, ''], [pos2, '']]);
})
// not going to register either of these because captureevents is off
.then(function() { return _click(pos1); })
.then(function() { return _click(pos2Head); })
.then(function() {
assertClickData([]);

return Plotly.relayout(gd, {
'annotations[1].captureevents': true,
'annotations[2].captureevents': true
});
})
// now we'll register the click on #1, but still not on #2
// because we're clicking the head, not the text box
.then(function() { return _click(pos1); })
.then(function() { return _click(pos2Head); })
.then(function() {
Expand All @@ -1168,6 +1181,7 @@ describe('annotation effects', function() {
'0 only');
})
// click and hover work together?
// this also tests that hover turns on annotation.captureevents
.then(function() { return _click(pos0); })
.then(function() {
assertClickData([{
Expand Down