You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/08/24 03:00:15 UTC
[echarts] 01/01: fix(tooltip): 1) tweak the calculation of tooltip
offset to make it look not so near to the target element. #14393 2) remove
unnecessary `getOuterSize` method beacuse `getSize` is now using
`offsetWidth/offsetHeight` that contains the `borderWidth`.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix/tooltip-offset
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 28f7c332e7bfc3034586d62880a050201a06b8da
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Aug 24 10:58:02 2021 +0800
fix(tooltip):
1) tweak the calculation of tooltip offset to make it look not so near to the target element. #14393
2) remove unnecessary `getOuterSize` method beacuse `getSize` is now using `offsetWidth/offsetHeight` that contains the `borderWidth`.
---
src/component/tooltip/TooltipHTMLContent.ts | 15 ---------------
src/component/tooltip/TooltipRichContent.ts | 8 --------
src/component/tooltip/TooltipView.ts | 16 ++++++++--------
3 files changed, 8 insertions(+), 31 deletions(-)
diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index d6e85c1..3e060cb 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -519,21 +519,6 @@ class TooltipHTMLContent {
this.el.parentNode.removeChild(this.el);
}
- getOuterSize() {
- let width = this.el.clientWidth;
- let height = this.el.clientHeight;
-
- // Consider browser compatibility.
- // IE8 does not support getComputedStyle.
- const stl = getComputedStyle(this.el);
- if (stl) {
- width += parseInt(stl.borderLeftWidth, 10) + parseInt(stl.borderRightWidth, 10);
- height += parseInt(stl.borderTopWidth, 10) + parseInt(stl.borderBottomWidth, 10);
- }
-
- return {width: width, height: height};
- }
-
}
export default TooltipHTMLContent;
diff --git a/src/component/tooltip/TooltipRichContent.ts b/src/component/tooltip/TooltipRichContent.ts
index 59cb944..57ed68e 100644
--- a/src/component/tooltip/TooltipRichContent.ts
+++ b/src/component/tooltip/TooltipRichContent.ts
@@ -205,14 +205,6 @@ class TooltipRichContent {
return this._show;
}
- getOuterSize() {
- const size = this.getSize();
- return {
- width: size[0],
- height: size[1]
- };
- }
-
dispose() {
this._zr.remove(this.el);
}
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index c2688f6..8589254 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -905,7 +905,7 @@ class TooltipView extends ComponentView {
// Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
else if (zrUtil.isString(positionExpr) && el) {
const pos = calcTooltipPosition(
- positionExpr, rect, contentSize, tooltipModel.get('borderWidth'),
+ positionExpr, rect, contentSize, tooltipModel.get('borderWidth')
);
x = pos[0];
y = pos[1];
@@ -1067,9 +1067,9 @@ function refixTooltipPosition(
viewWidth: number, viewHeight: number,
gapH: number, gapV: number
) {
- const size = content.getOuterSize();
- const width = size.width;
- const height = size.height;
+ const size = content.getSize();
+ const width = size[0];
+ const height = size[1];
if (gapH != null) {
// Add extra 2 pixels for this case:
@@ -1100,9 +1100,9 @@ function confineTooltipPosition(
viewWidth: number,
viewHeight: number
): [number, number] {
- const size = content.getOuterSize();
- const width = size.width;
- const height = size.height;
+ const size = content.getSize();
+ const width = size[0];
+ const height = size[1];
x = Math.min(x + width, viewWidth) - width;
y = Math.min(y + height, viewHeight) - height;
@@ -1120,7 +1120,7 @@ function calcTooltipPosition(
): [number, number] {
const domWidth = contentSize[0];
const domHeight = contentSize[1];
- const offset = Math.max(Math.ceil(Math.sqrt(2 * borderWidth * borderWidth)), 5);
+ const offset = Math.ceil(Math.SQRT2 * borderWidth) + 8;
let x = 0;
let y = 0;
const rectWidth = rect.width;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org