From df50898a9e9d30facf8f4494d208935d2ecd5aa0 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 14:21:54 -0400 Subject: [PATCH 01/13] handle case of zero outerHeight to bring back unified hover in documentaion website --- src/components/fx/hover.js | 52 ++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index eff1e1a2c4e..1df4e00c9ff 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1199,36 +1199,44 @@ function createHoverText(hoverData, opts, gd) { var lx, ly; // top and left positions of the hover box // horizontal alignment to end up on screen - if(lxRight + tWidth < outerWidth && lxRight >= 0) { - lx = lxRight; - } else if(lxLeft + tWidth < outerWidth && lxLeft >= 0) { - lx = lxLeft; - } else if(xOffset + tWidth < outerWidth) { - lx = xOffset; // subplot left corner - } else { - // closest left or right side of the paper - if(lxRight - avgX < avgX - lxLeft + tWidth) { - lx = outerWidth - tWidth; + if(outerWidth > 0) { + if(lxRight + tWidth < outerWidth && lxRight >= 0) { + lx = lxRight; + } else if(lxLeft + tWidth < outerWidth && lxLeft >= 0) { + lx = lxLeft; + } else if(outerWidth > 0 && xOffset + tWidth < outerWidth) { + lx = xOffset; // subplot left corner } else { - lx = 0; + // closest left or right side of the paper + if(lxRight - avgX < avgX - lxLeft + tWidth) { + lx = outerWidth - tWidth; + } else { + lx = 0; + } } + } else { + lx = lxLeft; } lx += HOVERTEXTPAD; // vertical alignement to end up on screen - if(lyBottom + tHeight < outerHeight && lyBottom >= 0) { - ly = lyBottom; - } else if(lyTop + tHeight < outerHeight && lyTop >= 0) { - ly = lyTop; - } else if(yOffset + tHeight < outerHeight) { - ly = yOffset; // subplot top corner - } else { - // closest top or bottom side of the paper - if(lyBottom - avgY < avgY - lyTop + tHeight) { - ly = outerHeight - tHeight; + if(outerHeight > 0) { + if(lyBottom + tHeight < outerHeight && lyBottom >= 0) { + ly = lyBottom; + } else if(lyTop + tHeight < outerHeight && lyTop >= 0) { + ly = lyTop; + } else if(yOffset + tHeight < outerHeight) { + ly = yOffset; // subplot top corner } else { - ly = 0; + // closest top or bottom side of the paper + if(lyBottom - avgY < avgY - lyTop + tHeight) { + ly = outerHeight - tHeight; + } else { + ly = 0; + } } + } else { // N.B. this case happens on documentation website (outerHeight: 0) + ly = lyTop; } ly += HOVERTEXTPAD; From 11f159f75443d3b83ecd63d6f71b230fb37e9057 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 14:39:41 -0400 Subject: [PATCH 02/13] log for PR 5913 --- draftlogs/5913_fix.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 draftlogs/5913_fix.md diff --git a/draftlogs/5913_fix.md b/draftlogs/5913_fix.md new file mode 100644 index 00000000000..6f07e5bdccf --- /dev/null +++ b/draftlogs/5913_fix.md @@ -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)] From 6f549d2fa3d2033ed6f4fc138b8e756c56a3e145 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 15:31:54 -0400 Subject: [PATCH 03/13] Revert "handle case of zero outerHeight to bring back unified hover in documentaion website" This reverts commit df50898a9e9d30facf8f4494d208935d2ecd5aa0. --- src/components/fx/hover.js | 52 ++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 1df4e00c9ff..eff1e1a2c4e 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1199,44 +1199,36 @@ function createHoverText(hoverData, opts, gd) { var lx, ly; // top and left positions of the hover box // horizontal alignment to end up on screen - if(outerWidth > 0) { - if(lxRight + tWidth < outerWidth && lxRight >= 0) { - lx = lxRight; - } else if(lxLeft + tWidth < outerWidth && lxLeft >= 0) { - lx = lxLeft; - } else if(outerWidth > 0 && xOffset + tWidth < outerWidth) { - lx = xOffset; // subplot left corner + if(lxRight + tWidth < outerWidth && lxRight >= 0) { + lx = lxRight; + } else if(lxLeft + tWidth < outerWidth && lxLeft >= 0) { + lx = lxLeft; + } else if(xOffset + tWidth < outerWidth) { + lx = xOffset; // subplot left corner + } else { + // closest left or right side of the paper + if(lxRight - avgX < avgX - lxLeft + tWidth) { + lx = outerWidth - tWidth; } else { - // closest left or right side of the paper - if(lxRight - avgX < avgX - lxLeft + tWidth) { - lx = outerWidth - tWidth; - } else { - lx = 0; - } + lx = 0; } - } else { - lx = lxLeft; } lx += HOVERTEXTPAD; // vertical alignement to end up on screen - if(outerHeight > 0) { - if(lyBottom + tHeight < outerHeight && lyBottom >= 0) { - ly = lyBottom; - } else if(lyTop + tHeight < outerHeight && lyTop >= 0) { - ly = lyTop; - } else if(yOffset + tHeight < outerHeight) { - ly = yOffset; // subplot top corner + if(lyBottom + tHeight < outerHeight && lyBottom >= 0) { + ly = lyBottom; + } else if(lyTop + tHeight < outerHeight && lyTop >= 0) { + ly = lyTop; + } else if(yOffset + tHeight < outerHeight) { + ly = yOffset; // subplot top corner + } else { + // closest top or bottom side of the paper + if(lyBottom - avgY < avgY - lyTop + tHeight) { + ly = outerHeight - tHeight; } else { - // closest top or bottom side of the paper - if(lyBottom - avgY < avgY - lyTop + tHeight) { - ly = outerHeight - tHeight; - } else { - ly = 0; - } + ly = 0; } - } else { // N.B. this case happens on documentation website (outerHeight: 0) - ly = lyTop; } ly += HOVERTEXTPAD; From ed8430c5da8a1285e66bfce94884e8bca42c9fc8 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 15:38:13 -0400 Subject: [PATCH 04/13] add fallback in the case of zero width or height --- src/components/fx/hover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index eff1e1a2c4e..2630b612a1a 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -896,8 +896,8 @@ function createHoverText(hoverData, opts, gd) { var t0 = c0[axLetter + 'Label']; var outerContainerBB = outerContainer.node().getBoundingClientRect(); var outerTop = outerContainerBB.top; - var outerWidth = outerContainerBB.width; - var outerHeight = outerContainerBB.height; + var outerWidth = outerContainerBB.width || fullLayout.width; + var outerHeight = outerContainerBB.height || fullLayout.height; // show the common label, if any, on the axis // never show a common label in array mode, From b53c3879b4bca72aa9779431c669e4c98eee6ec0 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 18:15:47 -0400 Subject: [PATCH 05/13] use _paper instaed of _paperdiv - remove fallback --- src/components/fx/hover.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 2630b612a1a..3373b786dd6 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -831,7 +831,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { rotateLabels: rotateLabels, bgColor: bgColor, container: fullLayout._hoverlayer, - outerContainer: fullLayout._paperdiv, + outerContainer: fullLayout._paper, commonLabelOpts: fullLayout.hoverlabel, hoverdistance: fullLayout.hoverdistance }; @@ -896,8 +896,8 @@ function createHoverText(hoverData, opts, gd) { var t0 = c0[axLetter + 'Label']; var outerContainerBB = outerContainer.node().getBoundingClientRect(); var outerTop = outerContainerBB.top; - var outerWidth = outerContainerBB.width || fullLayout.width; - var outerHeight = outerContainerBB.height || fullLayout.height; + var outerWidth = outerContainerBB.width; + var outerHeight = outerContainerBB.height; // show the common label, if any, on the axis // never show a common label in array mode, From 5f1e2fcb3beff38781ee974e52bc07620048df35 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 30 Aug 2021 18:17:20 -0400 Subject: [PATCH 06/13] outerContainer is not used in createSpikelines - remove it --- src/components/fx/hover.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 3373b786dd6..6d7ddd609bc 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -657,7 +657,6 @@ function _hover(gd, evt, subplot, noHoverEvent) { var spikelineOpts = { fullLayout: fullLayout, container: fullLayout._hoverlayer, - outerContainer: fullLayout._paperdiv, event: evt }; var oldspikepoints = gd._spikepoints; From 9ab94442820c5974394e5ed647e6cccafdeae4b7 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 11:42:30 -0400 Subject: [PATCH 07/13] pass _paper.node() similar to other places --- src/components/fx/hover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 6d7ddd609bc..1ac4cf3bc73 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -830,7 +830,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { rotateLabels: rotateLabels, bgColor: bgColor, container: fullLayout._hoverlayer, - outerContainer: fullLayout._paper, + outerContainer: fullLayout._paper.node(), commonLabelOpts: fullLayout.hoverlabel, hoverdistance: fullLayout.hoverdistance }; @@ -893,7 +893,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; From 9425a2489331c771d473fe300a349ccdeb79737b Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 11:44:35 -0400 Subject: [PATCH 08/13] do not d3.select _paper.node() --- src/components/fx/hover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 1ac4cf3bc73..4acbc2a0603 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -206,7 +206,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { }); var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer ? d3.select(opts.outerContainer) : container3; + var outerContainer3 = opts.outerContainer ? opts.outerContainer : container3; var fullOpts = { hovermode: 'closest', From 76ce3aacced4ed0f41ce26e9bbef427777cce5db Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 11:45:14 -0400 Subject: [PATCH 09/13] simplify logic --- src/components/fx/hover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 4acbc2a0603..1a5cc2c7104 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -206,7 +206,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { }); var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer ? opts.outerContainer : container3; + var outerContainer3 = opts.outerContainer || container3; var fullOpts = { hovermode: 'closest', From a7839894fa6ea97657db16b2a565bd4188d14b38 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 12:28:04 -0400 Subject: [PATCH 10/13] additional fix to 9ab94442820c5974394e5ed647e6cccafdeae4b7 --- src/components/fx/hover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 1a5cc2c7104..4cb06a66f56 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -206,7 +206,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { }); var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer || container3; + var outerContainer3 = opts.outerContainer || container3.node(); var fullOpts = { hovermode: 'closest', From a7a472e07e56e4003bc9882a378119b0bc05c1f4 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 12:32:29 -0400 Subject: [PATCH 11/13] use opts.container instead of container3.node() --- src/components/fx/hover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 4cb06a66f56..5b4557de936 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -206,7 +206,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { }); var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer || container3.node(); + var outerContainer3 = opts.outerContainer || opts.container; var fullOpts = { hovermode: 'closest', From 0ac2420973154846faaf95cdcb4dc4de7094aea4 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 12:36:30 -0400 Subject: [PATCH 12/13] no need to declare extra variables --- src/components/fx/hover.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 5b4557de936..30fdab64c7c 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -205,15 +205,12 @@ exports.loneHover = function loneHover(hoverItems, opts) { }; }); - var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer || opts.container; - var fullOpts = { hovermode: 'closest', rotateLabels: false, bgColor: opts.bgColor || Color.background, - container: container3, - outerContainer: outerContainer3 + container: d3.select(opts.container), + outerContainer: opts.outerContainer || opts.container }; var hoverLabel = createHoverText(pointsData, fullOpts, gd); From 2c184fda4a8bfa0a39221bad60e520c242530563 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 31 Aug 2021 12:42:57 -0400 Subject: [PATCH 13/13] revise createHoverText calling arguments --- src/components/fx/hover.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 30fdab64c7c..6b54858ddc5 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -205,15 +205,16 @@ exports.loneHover = function loneHover(hoverItems, opts) { }; }); - var fullOpts = { + var rotateLabels = false; + + var hoverLabel = createHoverText(pointsData, { + gd: gd, hovermode: 'closest', - rotateLabels: false, + rotateLabels: rotateLabels, bgColor: opts.bgColor || Color.background, container: d3.select(opts.container), outerContainer: opts.outerContainer || opts.container - }; - - var hoverLabel = createHoverText(pointsData, fullOpts, gd); + }); // Fix vertical overlap var tooltipSpacing = 5; @@ -240,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(); }; @@ -822,7 +823,8 @@ function _hover(gd, evt, subplot, noHoverEvent) { fullLayout.paper_bgcolor ); - var labelOpts = { + var hoverLabels = createHoverText(hoverData, { + gd: gd, hovermode: hovermode, rotateLabels: rotateLabels, bgColor: bgColor, @@ -830,9 +832,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { 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); @@ -870,7 +870,8 @@ function hoverDataKey(d) { var EXTRA_STRING_REGEX = /([\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;