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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
