Skip to content

Fixed hover events in Shadow DOM #6021

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 2 commits into from
Nov 12, 2021
Merged

Fixed hover events in Shadow DOM #6021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d22b10
Fixed hover events in Shadow DOM
SabineWren Nov 11, 2021
8182d7a
Added draftlog for changelog
SabineWren Nov 11, 2021
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 draftlogs/6021_fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Fix hover events in Shadow DOM [[#6021](https://github.com/plotly/plotly.js/pull/6021)]
26 changes: 11 additions & 15 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,13 @@ var cartesianScatterPoints = {
// The actual rendering is done by private function _hover.
exports.hover = function hover(gd, evt, subplot, noHoverEvent) {
gd = Lib.getGraphDiv(gd);

// The 'target' property changes when bubbling out of Shadow DOM.
// Throttling can delay reading the target, so we save the current value.
var eventTarget = evt.target;
Lib.throttle(
gd._fullLayout._uid + constants.HOVERID,
constants.HOVERMINTIME,
function() { _hover(gd, evt, subplot, noHoverEvent); }
function() { _hover(gd, evt, subplot, noHoverEvent, eventTarget); }
);
};

Expand Down Expand Up @@ -247,7 +249,7 @@ exports.loneHover = function loneHover(hoverItems, opts) {
};

// The actual implementation is here:
function _hover(gd, evt, subplot, noHoverEvent) {
function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
if(!subplot) subplot = 'xy';

// if the user passed in an array of subplots,
Expand Down Expand Up @@ -366,7 +368,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
// [x|y]px: the pixels (from top left) of the mouse location
// on the currently selected plot area
// add pointerX|Y property for drawing the spikes in spikesnap 'cursor' situation
var hasUserCalledHover = !evt.target;
var hasUserCalledHover = !eventTarget;
var xpx, ypx;

if(hasUserCalledHover) {
Expand All @@ -383,13 +385,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
return;
}

// Discover event target, traversing open shadow roots.
var target = evt.composedPath && evt.composedPath()[0];
if(!target) {
// Fallback for browsers not supporting composedPath
target = evt.target;
}
var dbb = target.getBoundingClientRect();
var dbb = eventTarget.getBoundingClientRect();

xpx = evt.clientX - dbb.left;
ypx = evt.clientY - dbb.top;
Expand Down Expand Up @@ -837,15 +833,15 @@ function _hover(gd, evt, subplot, noHoverEvent) {
if(!helpers.isUnifiedHover(hovermode)) {
hoverAvoidOverlaps(hoverLabels, rotateLabels ? 'xa' : 'ya', fullLayout);
alignHoverText(hoverLabels, rotateLabels, fullLayout._invScaleX, fullLayout._invScaleY);
} // TODO: tagName hack is needed to appease geo.js's hack of using evt.target=true
} // TODO: tagName hack is needed to appease geo.js's hack of using eventTarget=true
// we should improve the "fx" API so other plots can use it without these hack.
if(evt.target && evt.target.tagName) {
if(eventTarget && eventTarget.tagName) {
var hasClickToShow = Registry.getComponentMethod('annotations', 'hasClickToShow')(gd, newhoverdata);
overrideCursor(d3.select(evt.target), hasClickToShow ? 'pointer' : '');
overrideCursor(d3.select(eventTarget), hasClickToShow ? 'pointer' : '');
}

// don't emit events if called manually
if(!evt.target || noHoverEvent || !hoverChanged(gd, evt, oldhoverdata)) return;
if(!eventTarget || noHoverEvent || !hoverChanged(gd, evt, oldhoverdata)) return;

if(oldhoverdata) {
gd.emit('plotly_unhover', {
Expand Down