Skip to content

Handle case of div with zero dimension when positioning unified hover box #5913

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 14 commits into from
Aug 31, 2021
Merged

Handle case of div with zero dimension when positioning unified hover box #5913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
df50898
handle case of zero outerHeight to bring back unified hover in docume…
archmoj Aug 30, 2021
11f159f
log for PR 5913
archmoj Aug 30, 2021
6f549d2
Revert "handle case of zero outerHeight to bring back unified hover i…
archmoj Aug 30, 2021
ed8430c
add fallback in the case of zero width or height
archmoj Aug 30, 2021
60fe0fe
Merge remote-tracking branch 'origin/master' into unified-hover-with-…
archmoj Aug 30, 2021
b53c387
use _paper instaed of _paperdiv - remove fallback
archmoj Aug 30, 2021
5f1e2fc
outerContainer is not used in createSpikelines - remove it
archmoj Aug 30, 2021
9ab9444
pass _paper.node() similar to other places
archmoj Aug 31, 2021
9425a24
do not d3.select _paper.node()
archmoj Aug 31, 2021
76ce3aa
simplify logic
archmoj Aug 31, 2021
a783989
additional fix to 9ab94442820c5974394e5ed647e6cccafdeae4b7
archmoj Aug 31, 2021
a7a472e
use opts.container instead of container3.node()
archmoj Aug 31, 2021
0ac2420
no need to declare extra variables
archmoj Aug 31, 2021
2c184fd
revise createHoverText calling arguments
archmoj Aug 31, 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
2 changes: 2 additions & 0 deletions draftlogs/5913_fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Handle the case of div with zero (width or) height when positioning unified hover box
(regression introduced in 2.3.0) [[#5913](https://github.com/plotly/plotly.js/pull/5913)]
33 changes: 15 additions & 18 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,18 +205,16 @@ exports.loneHover = function loneHover(hoverItems, opts) {
};
});

var container3 = d3.select(opts.container);
var outerContainer3 = opts.outerContainer ? d3.select(opts.outerContainer) : container3;
var rotateLabels = false;

var fullOpts = {
var hoverLabel = createHoverText(pointsData, {
gd: gd,
hovermode: 'closest',
rotateLabels: false,
rotateLabels: rotateLabels,
bgColor: opts.bgColor || Color.background,
container: container3,
outerContainer: outerContainer3
};

var hoverLabel = createHoverText(pointsData, fullOpts, gd);
container: d3.select(opts.container),
outerContainer: opts.outerContainer || opts.container
});

// Fix vertical overlap
var tooltipSpacing = 5;
Expand All @@ -243,7 +241,7 @@ exports.loneHover = function loneHover(hoverItems, opts) {

var scaleX = gd._fullLayout._invScaleX;
var scaleY = gd._fullLayout._invScaleY;
alignHoverText(hoverLabel, fullOpts.rotateLabels, scaleX, scaleY);
alignHoverText(hoverLabel, rotateLabels, scaleX, scaleY);

return multiHover ? hoverLabel : hoverLabel.node();
};
Expand Down Expand Up @@ -657,7 +655,6 @@ function _hover(gd, evt, subplot, noHoverEvent) {
var spikelineOpts = {
fullLayout: fullLayout,
container: fullLayout._hoverlayer,
outerContainer: fullLayout._paperdiv,
event: evt
};
var oldspikepoints = gd._spikepoints;
Expand Down Expand Up @@ -826,17 +823,16 @@ function _hover(gd, evt, subplot, noHoverEvent) {
fullLayout.paper_bgcolor
);

var labelOpts = {
var hoverLabels = createHoverText(hoverData, {
gd: gd,
hovermode: hovermode,
rotateLabels: rotateLabels,
bgColor: bgColor,
container: fullLayout._hoverlayer,
outerContainer: fullLayout._paperdiv,
outerContainer: fullLayout._paper.node(),
commonLabelOpts: fullLayout.hoverlabel,
hoverdistance: fullLayout.hoverdistance
};

var hoverLabels = createHoverText(hoverData, labelOpts, gd);
});

if(!helpers.isUnifiedHover(hovermode)) {
hoverAvoidOverlaps(hoverLabels, rotateLabels ? 'xa' : 'ya', fullLayout);
Expand Down Expand Up @@ -874,7 +870,8 @@ function hoverDataKey(d) {

var EXTRA_STRING_REGEX = /<extra>([\s\S]*)<\/extra>/;

function createHoverText(hoverData, opts, gd) {
function createHoverText(hoverData, opts) {
var gd = opts.gd;
var fullLayout = gd._fullLayout;
var hovermode = opts.hovermode;
var rotateLabels = opts.rotateLabels;
Expand All @@ -894,7 +891,7 @@ function createHoverText(hoverData, opts, gd) {
var ya = c0.ya;
var axLetter = hovermode.charAt(0);
var t0 = c0[axLetter + 'Label'];
var outerContainerBB = outerContainer.node().getBoundingClientRect();
var outerContainerBB = outerContainer.getBoundingClientRect();
var outerTop = outerContainerBB.top;
var outerWidth = outerContainerBB.width;
var outerHeight = outerContainerBB.height;
Expand Down