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/04/19 12:55:23 UTC
[echarts] 01/01: fix(tooltip): the position of tooltip may be not
incorrect if appendToBody, resolves #14710.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix-tooltip
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 68cf99b622a40d0e3d3872e6c67748dce5dea8cf
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Apr 19 20:52:42 2021 +0800
fix(tooltip): the position of tooltip may be not incorrect if appendToBody, resolves #14710.
---
src/component/tooltip/TooltipHTMLContent.ts | 33 +++++++------------
test/new-tooltip.html | 49 +++++++++++++++++++++++++++--
2 files changed, 58 insertions(+), 24 deletions(-)
diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 85f4d8b..ecd432f 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -107,29 +107,23 @@ function assembleTransition(duration: number, onlyFade?: boolean): string {
return CSS_TRANSITION_VENDOR + ':' + transitionText;
}
-function assembleTransform(el: HTMLElement, x: number, y: number, toString?: boolean) {
+function assembleTransform(x: number, y: number, toString?: boolean) {
// If using float on style, the final width of the dom might
// keep changing slightly while mouse move. So `toFixed(0)` them.
- let x0;
- let y0;
+ const x0 = x.toFixed(0) + 'px';
+ const y0 = y.toFixed(0) + 'px';
// not support transform, use `left` and `top` instead.
if (!env.transformSupported) {
- x0 = x.toFixed(0);
- y0 = y.toFixed(0);
return toString
- ? `top:${y0}px;left:${x0}px;`
- : [['top', `${y0}px`], ['left', `${x0}px`]];
+ ? `top:${y0};left:${x0};`
+ : [['top', y0], ['left', x0]];
}
// support transform
- // FIXME: the padding of parent element will affect the position of tooltip
- const stl = getComputedStyle(el.parentElement);
- x0 = (x - parseInt(stl.paddingLeft, 10)).toFixed(0);
- y0 = (y - parseInt(stl.paddingTop, 10)).toFixed(0);
const is3d = env.transform3dSupported;
- const translate = `translate${is3d ? '3d' : ''}(${x0}px,${y0}px${is3d ? ',0' : ''})`;
+ const translate = `translate${is3d ? '3d' : ''}(${x0},${y0}${is3d ? ',0' : ''})`;
return toString
- ? CSS_TRANSFORM_VENDOR + ':' + translate + ';'
- : [[TRANSFORM_VENDOR, translate]];
+ ? 'top:0;left:0;' + CSS_TRANSFORM_VENDOR + ':' + translate + ';'
+ : [['top', 0], ['left', 0], [TRANSFORM_VENDOR, translate]];
}
/**
@@ -281,7 +275,6 @@ class TooltipHTMLContent {
*/
private _longHideTimeout: number;
-
constructor(
container: HTMLElement,
api: ExtensionAPI,
@@ -304,8 +297,7 @@ class TooltipHTMLContent {
document.body.appendChild(el);
}
else {
- // PENDING
- container.prepend(el);
+ container.appendChild(el);
}
this._container = container;
@@ -388,7 +380,7 @@ class TooltipHTMLContent {
style.cssText = gCssText
+ assembleCssText(tooltipModel, !this._firstShow, this._longHide)
// initial transform
- + assembleTransform(el, styleCoord[0], styleCoord[1], true)
+ + assembleTransform(styleCoord[0], styleCoord[1], true)
+ `border-color:${convertToColorString(nearPointColor)};`
+ (tooltipModel.get('extraCssText') || '')
// If mouse occasionally move over the tooltip, a mouseout event will be
@@ -453,10 +445,7 @@ class TooltipHTMLContent {
if (styleCoord[0] != null && styleCoord[1] != null) {
const style = this.el.style;
- const transforms = assembleTransform(
- this.el,
- styleCoord[0], styleCoord[1]
- ) as string[][];
+ const transforms = assembleTransform(styleCoord[0], styleCoord[1]) as string[][];
each(transforms, (transform) => {
style[transform[0] as any] = transform[1];
});
diff --git a/test/new-tooltip.html b/test/new-tooltip.html
index ac130b5..eb4f35e 100644
--- a/test/new-tooltip.html
+++ b/test/new-tooltip.html
@@ -145,10 +145,13 @@ under the License.
<script>
var CURRENT_RENDER_MODE;
+ var appendToBody;
function initStateConsole() {
var TOOLTIP_RENDER_MODE_KEY = '__EC_TEST_TOOLTIP_RENDER_MODE__';
+ var TOOLTIP_APPEND_TO_BODY_KEY = '__EC_TEST_TOOLTIP_APPEND_TO_BODY__';
var RENDER_MODE_LIST = ['html', 'richText'];
+ appendToBody = window.localStorage.getItem(TOOLTIP_APPEND_TO_BODY_KEY) == 1;
CURRENT_RENDER_MODE = window.localStorage.getItem(TOOLTIP_RENDER_MODE_KEY);
if (!CURRENT_RENDER_MODE) {
CURRENT_RENDER_MODE = RENDER_MODE_LIST[0];
@@ -165,12 +168,21 @@ under the License.
'<label ' + checkedStyle + 'for="' + modeVal + '">' + modeVal + '</label>'
);
}
+ html.push('<label for="appendToBody"><input type="checkbox" id="appendToBody"'
+ + (appendToBody ? 'checked' : '') + '>appendToBody</label>');
containerDom.innerHTML = html.join('');
containerDom.onclick = function (e) {
var target = e.target;
if (target.tagName === 'INPUT') {
- var newRenderMode = target.value;
- window.localStorage.setItem(TOOLTIP_RENDER_MODE_KEY, newRenderMode);
+ const isCheckBox = target.type === 'checkbox';
+ window.localStorage.setItem(
+ isCheckBox
+ ? TOOLTIP_APPEND_TO_BODY_KEY
+ : TOOLTIP_RENDER_MODE_KEY,
+ isCheckBox
+ ? target.checked ? 1 : 0
+ : target.value
+ );
location.reload();
}
};
@@ -223,6 +235,7 @@ under the License.
option1 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'item',
position: 'bottom',
axisPointer: {
@@ -265,6 +278,7 @@ under the License.
option2 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
// attachToPoint: true
},
radar: {
@@ -323,6 +337,7 @@ under the License.
tooltip: {
renderMode: CURRENT_RENDER_MODE,
trigger: 'item',
+ appendToBody: appendToBody,
// formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [{
@@ -371,6 +386,7 @@ under the License.
option4 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
series: {
type: 'sankey',
@@ -420,6 +436,7 @@ under the License.
option5 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
@@ -508,6 +525,7 @@ under the License.
},
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis'
},
series: [{
@@ -560,6 +578,7 @@ under the License.
option7 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
series: [{
type: "tree",
@@ -1328,6 +1347,7 @@ under the License.
option8 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
animation: false
@@ -1879,6 +1899,7 @@ under the License.
option9 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -1920,6 +1941,7 @@ under the License.
option10 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
series: [{
type: 'treemap',
@@ -1952,6 +1974,7 @@ under the License.
option11 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
position: 'top'
},
dataset: {
@@ -1984,6 +2007,7 @@ under the License.
option12 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -2153,6 +2177,7 @@ under the License.
],
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
formatter: 'Group {a}: ({c})'
},
xAxis: [{
@@ -2236,6 +2261,7 @@ under the License.
tooltip: {
trigger: 'axis',
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
@@ -2260,6 +2286,7 @@ under the License.
option15 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
legend: {},
series: [{
@@ -2292,6 +2319,7 @@ under the License.
option16 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
xAxis: {
type: "category",
@@ -2457,6 +2485,7 @@ under the License.
option17 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
xAxis: {
type: "category",
@@ -2710,6 +2739,7 @@ under the License.
}],
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis'
},
xAxis: [{
@@ -2753,6 +2783,7 @@ under the License.
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross'
@@ -2849,6 +2880,7 @@ under the License.
option20 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
xAxis: {
data: dataAxis,
@@ -2941,6 +2973,7 @@ under the License.
legend: {},
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
dataset: {
source: [
@@ -3023,6 +3056,7 @@ under the License.
option22 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody
},
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
@@ -3091,6 +3125,7 @@ under the License.
option23 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -3140,6 +3175,7 @@ under the License.
option24 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -3189,6 +3225,7 @@ under the License.
option25 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -3242,6 +3279,7 @@ under the License.
option26 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -3297,6 +3335,7 @@ under the License.
option27 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
axisPointer: {
type: 'cross',
@@ -3357,6 +3396,7 @@ under the License.
option28 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
order: 'valueAsc',
// position: 'top',
},
@@ -3415,6 +3455,7 @@ under the License.
option29 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
position: 'top',
axisPointer: {
@@ -3466,6 +3507,7 @@ under the License.
option30 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
position: 'top',
axisPointer: {
@@ -3507,6 +3549,7 @@ under the License.
option31 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'axis',
position: 'top',
axisPointer: {
@@ -3566,6 +3609,7 @@ under the License.
option32 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'item',
borderColor: 'red',
},
@@ -3601,6 +3645,7 @@ under the License.
option33 = {
tooltip: {
renderMode: CURRENT_RENDER_MODE,
+ appendToBody: appendToBody,
trigger: 'item',
textStyle: {
color: 'red'
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org