From 355632d120034f3075459d1d654781898c672728 Mon Sep 17 00:00:00 2001 From: Hatim Date: Fri, 2 Oct 2020 10:01:31 +0300 Subject: [PATCH 1/4] [TooltipWithBounds] change logic to calculate position --- .../src/tooltips/TooltipWithBounds.tsx | 106 ++++++++++-------- 1 file changed, 58 insertions(+), 48 deletions(-) diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx index 0602b1df6..87346ccab 100644 --- a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx +++ b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx @@ -4,58 +4,68 @@ import { withBoundingRects, WithBoundingRectsProps } from '@visx/bounds'; import Tooltip, { TooltipProps, defaultStyles } from './Tooltip'; export type TooltipWithBoundsProps = { - offsetLeft?: number; - offsetTop?: number; + offsetLeft?: number; + offsetTop?: number; } & TooltipProps & - React.HTMLProps & - WithBoundingRectsProps; + React.HTMLProps & + WithBoundingRectsProps; function TooltipWithBounds({ - left: initialLeft = 0, - top: initialTop = 0, - offsetLeft = 10, - offsetTop = 10, - children, - rect: ownBounds, - parentRect: parentBounds, - getRects, - style = defaultStyles, - unstyled = false, - ...otherProps + left: initialLeft = 0, + top: initialTop = 0, + offsetLeft = 10, + offsetTop = 10, + children, + rect: ownBounds, + parentRect: parentBounds, + getRects, + style = defaultStyles, + unstyled = false, + ...otherProps }: TooltipWithBoundsProps) { - let left = initialLeft; - let top = initialTop; - - if (ownBounds && parentBounds) { - const placeTooltipLeft = - offsetLeft + ownBounds.right > parentBounds.right || - offsetLeft + ownBounds.right > window.innerWidth; - - const placeTooltipUp = - offsetTop + ownBounds.bottom > parentBounds.bottom || - offsetTop + ownBounds.bottom > window.innerHeight; - - left = placeTooltipLeft ? left - ownBounds.width - offsetLeft : left + offsetLeft; - top = placeTooltipUp ? top - ownBounds.height - offsetTop : top + offsetTop; - } - - left = Math.round(left); - top = Math.round(top); - - return ( - - {children} - - ); + let left = initialLeft; + let top = initialTop; + + if (ownBounds && parentBounds) { + if (left > parentBounds.width / 2) { + left = left - offsetLeft - ownBounds.width; + + if (left < 0) { + left = 0; + } + } else { + if (left + offsetLeft + ownBounds.width > parentBounds.width) { + left = parentBounds.width - ownBounds.width; + } + } + if (top > parentBounds.height / 2) { + top = top - offsetTop - ownBounds.height; + if (top < 0) { + top = 0; + } + } else { + if (top + offsetTop + ownBounds.height > parentBounds.height) { + top = parentBounds.height - ownBounds.height; + } + } + } + + left = Math.round(left); + top = Math.round(top); + + return ( + + {children} + + ); } export default withBoundingRects(TooltipWithBounds); From a7194097be1816522a0202e352267ddba3811b22 Mon Sep 17 00:00:00 2001 From: Hatim Date: Fri, 2 Oct 2020 10:10:37 +0300 Subject: [PATCH 2/4] format : TooltipWithBounds --- .../src/tooltips/TooltipWithBounds.tsx | 105 +++++++++--------- 1 file changed, 51 insertions(+), 54 deletions(-) diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx index 87346ccab..027173559 100644 --- a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx +++ b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx @@ -4,68 +4,65 @@ import { withBoundingRects, WithBoundingRectsProps } from '@visx/bounds'; import Tooltip, { TooltipProps, defaultStyles } from './Tooltip'; export type TooltipWithBoundsProps = { - offsetLeft?: number; - offsetTop?: number; + offsetLeft?: number; + offsetTop?: number; } & TooltipProps & - React.HTMLProps & - WithBoundingRectsProps; + React.HTMLProps & + WithBoundingRectsProps; function TooltipWithBounds({ - left: initialLeft = 0, - top: initialTop = 0, - offsetLeft = 10, - offsetTop = 10, - children, - rect: ownBounds, - parentRect: parentBounds, - getRects, - style = defaultStyles, - unstyled = false, - ...otherProps + left: initialLeft = 0, + top: initialTop = 0, + offsetLeft = 10, + offsetTop = 10, + children, + rect: ownBounds, + parentRect: parentBounds, + getRects, + style = defaultStyles, + unstyled = false, + ...otherProps }: TooltipWithBoundsProps) { - let left = initialLeft; - let top = initialTop; + let left = initialLeft; + let top = initialTop; - if (ownBounds && parentBounds) { - if (left > parentBounds.width / 2) { - left = left - offsetLeft - ownBounds.width; + if (ownBounds && parentBounds) { + if (left > parentBounds.width / 2) { + left = left - offsetLeft - ownBounds.width; - if (left < 0) { - left = 0; - } - } else { - if (left + offsetLeft + ownBounds.width > parentBounds.width) { - left = parentBounds.width - ownBounds.width; - } - } - if (top > parentBounds.height / 2) { - top = top - offsetTop - ownBounds.height; - if (top < 0) { - top = 0; - } - } else { - if (top + offsetTop + ownBounds.height > parentBounds.height) { - top = parentBounds.height - ownBounds.height; - } - } - } + if (left < 0) { + left = 0; + } + } else if (left + offsetLeft + ownBounds.width > parentBounds.width) { + left = parentBounds.width - ownBounds.width; + } + if (top > parentBounds.height / 2) { + top = top - offsetTop - ownBounds.height; + if (top < 0) { + top = 0; + } + } else if (top + offsetTop + ownBounds.height > parentBounds.height) { + top = parentBounds.height - ownBounds.height; + } + } - left = Math.round(left); - top = Math.round(top); + left = Math.round(left); + top = Math.round(top); - return ( - - {children} - - ); + return ( + + {children} + + ); } export default withBoundingRects(TooltipWithBounds); From 96b7c909debcc4170c69bb07e809899d46f8040a Mon Sep 17 00:00:00 2001 From: Hatim Date: Sun, 4 Oct 2020 14:04:33 +0300 Subject: [PATCH 3/4] [TooltipWithBounds] update: change boundary on width of parent; apply offset in all quadrants --- .../src/tooltips/TooltipWithBounds.tsx | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx index 027173559..1145e06ac 100644 --- a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx +++ b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx @@ -27,23 +27,12 @@ function TooltipWithBounds({ let top = initialTop; if (ownBounds && parentBounds) { - if (left > parentBounds.width / 2) { - left = left - offsetLeft - ownBounds.width; + const placeTooltipLeft = parentBounds.right - ownBounds.right < parentBounds.width * 0.01; - if (left < 0) { - left = 0; - } - } else if (left + offsetLeft + ownBounds.width > parentBounds.width) { - left = parentBounds.width - ownBounds.width; - } - if (top > parentBounds.height / 2) { - top = top - offsetTop - ownBounds.height; - if (top < 0) { - top = 0; - } - } else if (top + offsetTop + ownBounds.height > parentBounds.height) { - top = parentBounds.height - ownBounds.height; - } + const placeTooltipUp = parentBounds.bottom - ownBounds.bottom < parentBounds.height * 0.01; + + left = placeTooltipLeft ? left - ownBounds.width - offsetLeft : left + offsetLeft; + top = placeTooltipUp ? top - ownBounds.height - offsetTop : top + offsetTop; } left = Math.round(left); From 44e6b464b6c5ffba8b7b7223e71e270d546871c9 Mon Sep 17 00:00:00 2001 From: Hatim Date: Fri, 9 Oct 2020 15:16:29 +0300 Subject: [PATCH 4/4] fix: [tooltip] move to quadrant where least clipping happens --- .../src/tooltips/TooltipWithBounds.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx index 1145e06ac..90d2445a8 100644 --- a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx +++ b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx @@ -27,9 +27,29 @@ function TooltipWithBounds({ let top = initialTop; if (ownBounds && parentBounds) { - const placeTooltipLeft = parentBounds.right - ownBounds.right < parentBounds.width * 0.01; + let placeTooltipLeft = false; + let placeTooltipUp = false; - const placeTooltipUp = parentBounds.bottom - ownBounds.bottom < parentBounds.height * 0.01; + if (parentBounds.width) { + const rightPlacementClippedPx = left + offsetLeft + ownBounds.width - parentBounds.width; + const leftPlacementClippedPx = ownBounds.width - left - offsetLeft; + placeTooltipLeft = + rightPlacementClippedPx > 0 && rightPlacementClippedPx > leftPlacementClippedPx; + } else { + const rightPlacementClippedPx = left + offsetLeft + ownBounds.width - window.innerWidth; + const leftPlacementClippedPx = ownBounds.width - left - offsetLeft; + placeTooltipLeft = + rightPlacementClippedPx > 0 && rightPlacementClippedPx > leftPlacementClippedPx; + } + + if (parentBounds.height) { + const bottomPlacementClippedPx = top + offsetTop + ownBounds.height - parentBounds.height; + const topPlacementClippedPx = ownBounds.height - top - offsetTop; + placeTooltipUp = + bottomPlacementClippedPx > 0 && bottomPlacementClippedPx > topPlacementClippedPx; + } else { + placeTooltipUp = top + offsetTop + ownBounds.height > window.innerHeight; + } left = placeTooltipLeft ? left - ownBounds.width - offsetLeft : left + offsetLeft; top = placeTooltipUp ? top - ownBounds.height - offsetTop : top + offsetTop;