Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
6904fc6a
I
incubator-echarts
项目概览
x649585723
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
6904fc6a
编写于
2月 27, 2021
作者:
P
plainheart
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(tooltip): fix tooltip position issue when using transform.
上级
ae6b6359
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
32 addition
and
19 deletion
+32
-19
src/component/tooltip/TooltipHTMLContent.ts
src/component/tooltip/TooltipHTMLContent.ts
+24
-19
src/component/tooltip/helper.ts
src/component/tooltip/helper.ts
+8
-0
未找到文件。
src/component/tooltip/TooltipHTMLContent.ts
浏览文件 @
6904fc6a
...
@@ -31,7 +31,13 @@ import { ZRRawEvent } from 'zrender/src/core/types';
...
@@ -31,7 +31,13 @@ import { ZRRawEvent } from 'zrender/src/core/types';
import
{
ColorString
,
ZRColor
}
from
'
../../util/types
'
;
import
{
ColorString
,
ZRColor
}
from
'
../../util/types
'
;
import
CanvasPainter
from
'
zrender/src/canvas/Painter
'
;
import
CanvasPainter
from
'
zrender/src/canvas/Painter
'
;
import
SVGPainter
from
'
zrender/src/svg/Painter
'
;
import
SVGPainter
from
'
zrender/src/svg/Painter
'
;
import
{
shouldTooltipConfine
,
toCSSVendorPrefix
,
TRANSFORM_VENDOR
,
TRANSITION_VENDOR
}
from
'
./helper
'
;
import
{
shouldTooltipConfine
,
toCSSVendorPrefix
,
getComputedStyle
,
TRANSFORM_VENDOR
,
TRANSITION_VENDOR
}
from
'
./helper
'
;
import
{
getPaddingFromTooltipModel
}
from
'
./tooltipMarkup
'
;
import
{
getPaddingFromTooltipModel
}
from
'
./tooltipMarkup
'
;
/* global document, window */
/* global document, window */
...
@@ -101,22 +107,24 @@ function assembleTransition(duration: number, onlyFade?: boolean): string {
...
@@ -101,22 +107,24 @@ function assembleTransition(duration: number, onlyFade?: boolean): string {
return
CSS_TRANSITION_VENDOR
+
'
:
'
+
transitionText
;
return
CSS_TRANSITION_VENDOR
+
'
:
'
+
transitionText
;
}
}
function
assembleTransform
(
el
:
HTMLElement
,
x
:
number
,
y
:
number
,
zrHeight
:
number
,
toString
?:
boolean
)
{
function
assembleTransform
(
el
:
HTMLElement
,
x
:
number
,
y
:
number
,
toString
?:
boolean
)
{
// If using float on style, the final width of the dom might
// If using float on style, the final width of the dom might
// keep changing slightly while mouse move. So `toFixed(0)` them.
// keep changing slightly while mouse move. So `toFixed(0)` them.
const
x0
=
(
x
-
10
).
toFixed
(
0
)
;
let
x0
;
let
y0
;
let
y0
;
// not support transform, use `left` and `top` instead.
// not support transform, use `left` and `top` instead.
if
(
!
env
.
transformSupported
)
{
if
(
!
env
.
transformSupported
)
{
x0
=
x
.
toFixed
(
0
);
y0
=
y
.
toFixed
(
0
);
y0
=
y
.
toFixed
(
0
);
return
toString
return
toString
?
`top:
${
y0
}
px;left:
${
x0
}
px;`
?
`top:
${
y0
}
px;left:
${
x0
}
px;`
:
[[
'
top
'
,
`
${
y0
}
px`
],
[
'
left
'
,
`
${
x0
}
px`
]];
:
[[
'
top
'
,
`
${
y0
}
px`
],
[
'
left
'
,
`
${
x0
}
px`
]];
}
}
// support transform
// support transform
// PENDING: don't minus `zrHeight` and keep consistent with top?
// FIXME: the padding of parent element will affect the position of tooltip
// why there is a 10px gap?
const
stl
=
getComputedStyle
(
el
.
parentElement
);
y0
=
(
y
-
zrHeight
-
10
).
toFixed
(
0
);
x0
=
(
x
-
parseInt
(
stl
.
paddingLeft
,
10
)).
toFixed
(
0
);
y0
=
(
y
-
parseInt
(
stl
.
paddingTop
,
10
)).
toFixed
(
0
);
const
is3d
=
env
.
transform3dSupported
;
const
is3d
=
env
.
transform3dSupported
;
const
translate
=
`translate
${
is3d
?
'
3d
'
:
''
}
(
${
x0
}
px,
${
y0
}
px
${
is3d
?
'
,0
'
:
''
}
)`
;
const
translate
=
`translate
${
is3d
?
'
3d
'
:
''
}
(
${
x0
}
px,
${
y0
}
px
${
is3d
?
'
,0
'
:
''
}
)`
;
return
toString
return
toString
...
@@ -296,7 +304,8 @@ class TooltipHTMLContent {
...
@@ -296,7 +304,8 @@ class TooltipHTMLContent {
document
.
body
.
appendChild
(
el
);
document
.
body
.
appendChild
(
el
);
}
}
else
{
else
{
container
.
appendChild
(
el
);
// PENDING
container
.
prepend
(
el
);
}
}
this
.
_container
=
container
;
this
.
_container
=
container
;
...
@@ -348,10 +357,9 @@ class TooltipHTMLContent {
...
@@ -348,10 +357,9 @@ class TooltipHTMLContent {
// FIXME
// FIXME
// Move this logic to ec main?
// Move this logic to ec main?
const
container
=
this
.
_container
;
const
container
=
this
.
_container
;
const
stl
=
(
container
as
any
).
currentStyle
const
position
=
getComputedStyle
(
container
,
'
position
'
);
||
document
.
defaultView
.
getComputedStyle
(
container
);
const
domStyle
=
container
.
style
;
const
domStyle
=
container
.
style
;
if
(
domStyle
.
position
!==
'
absolute
'
&&
stl
.
position
!==
'
absolute
'
)
{
if
(
domStyle
.
position
!==
'
absolute
'
&&
position
!==
'
absolute
'
)
{
domStyle
.
position
=
'
relative
'
;
domStyle
.
position
=
'
relative
'
;
}
}
...
@@ -380,7 +388,7 @@ class TooltipHTMLContent {
...
@@ -380,7 +388,7 @@ class TooltipHTMLContent {
style
.
cssText
=
gCssText
style
.
cssText
=
gCssText
+
assembleCssText
(
tooltipModel
,
!
this
.
_firstShow
,
this
.
_longHide
)
+
assembleCssText
(
tooltipModel
,
!
this
.
_firstShow
,
this
.
_longHide
)
// initial transform
// initial transform
+
assembleTransform
(
el
,
styleCoord
[
0
],
styleCoord
[
1
],
t
his
.
_zr
.
getHeight
(),
t
rue
)
+
assembleTransform
(
el
,
styleCoord
[
0
],
styleCoord
[
1
],
true
)
+
`border-color:
${
convertToColorString
(
nearPointColor
)}
;`
+
`border-color:
${
convertToColorString
(
nearPointColor
)}
;`
+
(
tooltipModel
.
get
(
'
extraCssText
'
)
||
''
)
+
(
tooltipModel
.
get
(
'
extraCssText
'
)
||
''
)
// If mouse occasionally move over the tooltip, a mouseout event will be
// If mouse occasionally move over the tooltip, a mouseout event will be
...
@@ -447,8 +455,7 @@ class TooltipHTMLContent {
...
@@ -447,8 +455,7 @@ class TooltipHTMLContent {
const
style
=
this
.
el
.
style
;
const
style
=
this
.
el
.
style
;
const
transforms
=
assembleTransform
(
const
transforms
=
assembleTransform
(
this
.
el
,
this
.
el
,
styleCoord
[
0
],
styleCoord
[
1
],
styleCoord
[
0
],
styleCoord
[
1
]
this
.
_zr
.
getHeight
()
)
as
string
[][];
)
as
string
[][];
each
(
transforms
,
(
transform
)
=>
{
each
(
transforms
,
(
transform
)
=>
{
style
[
transform
[
0
]
as
any
]
=
transform
[
1
];
style
[
transform
[
0
]
as
any
]
=
transform
[
1
];
...
@@ -508,12 +515,10 @@ class TooltipHTMLContent {
...
@@ -508,12 +515,10 @@ class TooltipHTMLContent {
// Consider browser compatibility.
// Consider browser compatibility.
// IE8 does not support getComputedStyle.
// IE8 does not support getComputedStyle.
if
(
document
.
defaultView
&&
document
.
defaultView
.
getComputedStyle
)
{
const
stl
=
getComputedStyle
(
this
.
el
);
const
stl
=
document
.
defaultView
.
getComputedStyle
(
this
.
el
);
if
(
stl
)
{
if
(
stl
)
{
width
+=
parseInt
(
stl
.
borderLeftWidth
,
10
)
+
parseInt
(
stl
.
borderRightWidth
,
10
);
width
+=
parseInt
(
stl
.
borderLeftWidth
,
10
)
+
parseInt
(
stl
.
borderRightWidth
,
10
);
height
+=
parseInt
(
stl
.
borderTopWidth
,
10
)
+
parseInt
(
stl
.
borderBottomWidth
,
10
);
height
+=
parseInt
(
stl
.
borderTopWidth
,
10
)
+
parseInt
(
stl
.
borderBottomWidth
,
10
);
}
}
}
return
{
width
:
width
,
height
:
height
};
return
{
width
:
width
,
height
:
height
};
...
...
src/component/tooltip/helper.ts
浏览文件 @
6904fc6a
...
@@ -56,3 +56,11 @@ export function toCSSVendorPrefix(styleVendor: string, styleProp: string) {
...
@@ -56,3 +56,11 @@ export function toCSSVendorPrefix(styleVendor: string, styleProp: string) {
:
`-
${
styleVendor
.
slice
(
0
,
idx
)}
-
${
styleProp
}
`
;
:
`-
${
styleVendor
.
slice
(
0
,
idx
)}
-
${
styleProp
}
`
;
return
styleVendor
.
toLowerCase
();
return
styleVendor
.
toLowerCase
();
}
}
export
function
getComputedStyle
(
el
:
HTMLElement
,
style
?:
string
)
{
const
stl
=
(
el
as
any
).
currentStyle
||
(
document
.
defaultView
&&
document
.
defaultView
.
getComputedStyle
(
el
));
return
stl
?
style
?
stl
[
style
]
:
stl
:
null
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录