From bc292f72251b50d1149a3fbba090021289fbdd48 Mon Sep 17 00:00:00 2001
From: liulinboyi <814921718@qq.com>
Date: Mon, 22 Jun 2020 20:39:11 +0800
Subject: [PATCH] fix: #12812

---
 src/component/tooltip/TooltipContent.js     |  20 +-
 src/component/tooltip/TooltipRichContent.js |  35 +-
 src/component/tooltip/TooltipView.js        |   2 +-
 test/tooltip-windowResize.html              | 383 ++++++++++++++++++++
 4 files changed, 433 insertions(+), 7 deletions(-)
 create mode 100644 test/tooltip-windowResize.html

diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js
index 6cdbc3f282b..f49c57af2cf 100644
--- a/src/component/tooltip/TooltipContent.js
+++ b/src/component/tooltip/TooltipContent.js
@@ -145,6 +145,8 @@ function makeStyleCoord(out, zr, appendToBody, zrX, zrY) {
             out[1] += viewportRootOffset.offsetTop;
         }
     }
+    out[2] = out[0] / zr.getWidth(); // The ratio of left to width
+    out[3] = out[1] / zr.getHeight(); // The ratio of top to height
 }
 
 /**
@@ -169,7 +171,7 @@ function TooltipContent(container, api, opt) {
     var zr = this._zr = api.getZr();
     var appendToBody = this._appendToBody = opt && opt.appendToBody;
 
-    this._styleCoord = [0, 0];
+    this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]
 
     makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);
 
@@ -240,7 +242,7 @@ TooltipContent.prototype = {
     /**
      * Update when tooltip is rendered
      */
-    update: function () {
+    update: function (tooltipModel) {
         // FIXME
         // Move this logic to ec main?
         var container = this._container;
@@ -250,11 +252,25 @@ TooltipContent.prototype = {
         if (domStyle.position !== 'absolute' && stl.position !== 'absolute') {
             domStyle.position = 'relative';
         }
+        var alwaysShowContent = tooltipModel.get('alwaysShowContent');
+        alwaysShowContent && this._moveTooltip();
         // Hide the tooltip
         // PENDING
         // this.hide();
     },
 
+    /**
+     * when alwaysShowContent is true change or rotation window size and restore will move tooltip
+     * @private
+     */
+    _moveTooltip: function () {
+        var ratioX = this._styleCoord[2]; // The ratio of left to width
+        var ratioY = this._styleCoord[3]; // The ratio of top to height
+        var realX = ratioX * this._zr.getWidth();
+        var realY = ratioY * this._zr.getHeight();
+        this.moveTo(realX, realY);
+    },
+
     show: function (tooltipModel) {
         clearTimeout(this._hideTimeout);
         var el = this.el;
diff --git a/src/component/tooltip/TooltipRichContent.js b/src/component/tooltip/TooltipRichContent.js
index 34c0f7516a6..c6f57160e45 100644
--- a/src/component/tooltip/TooltipRichContent.js
+++ b/src/component/tooltip/TooltipRichContent.js
@@ -21,13 +21,25 @@ import * as zrUtil from 'zrender/src/core/util';
 // import Group from 'zrender/src/container/Group';
 import Text from 'zrender/src/graphic/Text';
 
+
+function makeStyleCoord(out, zr, zrX, zrY) {
+    out[0] = zrX;
+    out[1] = zrY;
+    out[2] = out[0] / zr.getWidth(); // The ratio of left to width
+    out[3] = out[1] / zr.getHeight(); // The ratio of top to height
+}
+
 /**
  * @alias module:echarts/component/tooltip/TooltipRichContent
  * @constructor
  */
 function TooltipRichContent(api) {
 
-    this._zr = api.getZr();
+    var zr = this._zr = api.getZr();
+
+    this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]
+
+    makeStyleCoord(this._styleCoord, zr, api.getWidth() / 2, api.getHeight() / 2);
 
     this._show = false;
 
@@ -50,8 +62,21 @@ TooltipRichContent.prototype = {
     /**
      * Update when tooltip is rendered
      */
-    update: function () {
-        // noop
+    update: function (tooltipModel) {
+        var alwaysShowContent = tooltipModel.get('alwaysShowContent');
+        alwaysShowContent && this._moveTooltip();
+    },
+
+    /**
+     * when alwaysShowContent is true change or rotation window size and restore will move tooltip
+     * @private
+     */
+    _moveTooltip: function () {
+        var ratioX = this._styleCoord[2]; // The ratio of left to width
+        var ratioY = this._styleCoord[3]; // The ratio of top to height
+        var realX = ratioX * this._zr.getWidth();
+        var realY = ratioY * this._zr.getHeight();
+        this.moveTo(realX, realY);
     },
 
     show: function (tooltipModel) {
@@ -150,7 +175,9 @@ TooltipRichContent.prototype = {
 
     moveTo: function (x, y) {
         if (this.el) {
-            this.el.attr('position', [x, y]);
+            var styleCoord = this._styleCoord;
+            makeStyleCoord(styleCoord, this._zr, x, y);
+            this.el.attr('position', [styleCoord[0], styleCoord[1]]);
         }
     },
 
diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js
index a7c980f96f1..f8963a36021 100644
--- a/src/component/tooltip/TooltipView.js
+++ b/src/component/tooltip/TooltipView.js
@@ -109,7 +109,7 @@ export default echarts.extendComponentView({
         this._alwaysShowContent = tooltipModel.get('alwaysShowContent');
 
         var tooltipContent = this._tooltipContent;
-        tooltipContent.update();
+        tooltipContent.update(tooltipModel);
         tooltipContent.setEnterable(tooltipModel.get('enterable'));
 
         this._initGlobalListener();
diff --git a/test/tooltip-windowResize.html b/test/tooltip-windowResize.html
new file mode 100644
index 00000000000..6e45e55c6e7
--- /dev/null
+++ b/test/tooltip-windowResize.html
@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+   http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/esl.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <script src="tooltipTestHelper.js"></script>
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+        .test-title {
+            background: #fff;
+        }
+
+        .test-chart {
+            margin: 0 auto;
+        }
+
+    </style>
+
+
+    <div id="main0"></div>
+
+    <div id="main1"></div>
+
+
+    <script>
+        require([
+            'echarts'
+            // 'echarts/chart/bar',
+            // 'echarts/component/polar',
+            // 'zrender/vml/vml'
+        ], function (echarts) {
+            var base = +new Date(2016, 9, 3);
+            var oneDay = 24 * 3600 * 1000;
+            var valueBase = Math.random() * 300;
+            var valueBase2 = Math.random() * 50;
+            var data = [];
+            var data2 = [];
+
+            for (var i = 1; i < 10; i++) {
+                var now = new Date(base += oneDay);
+                var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+
+                valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
+                valueBase <= 0 && (valueBase = Math.random() * 300);
+                data.push([dayStr, valueBase]);
+
+                valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
+                valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
+                data2.push([dayStr, valueBase2]);
+            }
+            option = {
+                animation: false,
+                title: {
+                    left: 'center',
+                    text: '触屏 tooltip 和 dataZoom 示例',
+                    subtext: '"tootip" and "dataZoom" on mobile device',
+                },
+                legend: {
+                    top: 'bottom',
+                    data: ['意向']
+                },
+                tooltip: {
+                    alwaysShowContent: true,
+                    triggerOn: 'none',
+                    position: function (pt) {
+                        return [pt[0], 130];
+                    }
+                },
+                toolbox: {
+                    left: 'center',
+                    itemSize: 25,
+                    top: 55,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {}
+                    }
+                },
+                xAxis: {
+                    type: 'time',
+                    // boundaryGap: [0, 0],
+                    axisPointer: {
+                        value: '2016-10-7',
+                        snap: true,
+                        lineStyle: {
+                            color: '#004E52',
+                            opacity: 0.5,
+                            width: 2
+                        },
+                        label: {
+                            show: true,
+                            formatter: function (params) {
+                                return echarts.format.formatTime('yyyy-MM-dd', params.value);
+                            },
+                            backgroundColor: '#004E52'
+                        },
+                        handle: {
+                            show: true,
+                            color: '#004E52'
+                        }
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        inside: true
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        inside: true,
+                        formatter: '{value}\n'
+                    },
+                    z: 10
+                },
+                grid: {
+                    top: 110,
+                    left: 15,
+                    right: 15,
+                    height: 160
+                },
+                dataZoom: [{
+                    type: 'inside',
+                    throttle: 50
+                }],
+                series: [{
+                        name: '模拟数据',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'circle',
+                        symbolSize: 5,
+                        sampling: 'average',
+                        itemStyle: {
+                            color: '#8ec6ad'
+                        },
+                        stack: 'a',
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: '#8ec6ad'
+                            }, {
+                                offset: 1,
+                                color: '#ffe'
+                            }])
+                        },
+                        data: data
+                    },
+                    {
+                        name: '模拟数据',
+                        type: 'line',
+                        smooth: true,
+                        stack: 'a',
+                        symbol: 'circle',
+                        symbolSize: 5,
+                        sampling: 'average',
+                        itemStyle: {
+                            color: '#d68262'
+                        },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: '#d68262'
+                            }, {
+                                offset: 1,
+                                color: '#ffe'
+                            }])
+                        },
+                        data: data2
+                    }
+
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                option: option
+            });
+            chart.setOption(option, true);
+            window.onresize = function () {
+                chart.resize();
+            }
+        });
+
+    </script>
+
+    <script>
+        require([
+            'echarts'
+            // 'echarts/chart/bar',
+            // 'echarts/component/polar',
+            // 'zrender/vml/vml'
+        ], function (echarts) {
+            var base = +new Date(2016, 9, 3);
+            var oneDay = 24 * 3600 * 1000;
+            var valueBase = Math.random() * 300;
+            var valueBase2 = Math.random() * 50;
+            var data = [];
+            var data2 = [];
+
+            for (var i = 1; i < 10; i++) {
+                var now = new Date(base += oneDay);
+                var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+
+                valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
+                valueBase <= 0 && (valueBase = Math.random() * 300);
+                data.push([dayStr, valueBase]);
+
+                valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
+                valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
+                data2.push([dayStr, valueBase2]);
+            }
+            option = {
+                animation: false,
+                title: {
+                    left: 'center',
+                    text: '触屏 tooltip 和 dataZoom 示例',
+                    subtext: '"tootip" and "dataZoom" on mobile device',
+                },
+                legend: {
+                    top: 'bottom',
+                    data: ['意向']
+                },
+                tooltip: {
+                    alwaysShowContent: true,
+                    renderMode: 'richText',
+                    triggerOn: 'none',
+                    position: function (pt) {
+                        return [pt[0], 130];
+                    }
+                },
+                toolbox: {
+                    left: 'center',
+                    itemSize: 25,
+                    top: 55,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {}
+                    }
+                },
+                xAxis: {
+                    type: 'time',
+                    // boundaryGap: [0, 0],
+                    axisPointer: {
+                        value: '2016-10-7',
+                        snap: true,
+                        lineStyle: {
+                            color: '#004E52',
+                            opacity: 0.5,
+                            width: 2
+                        },
+                        label: {
+                            show: true,
+                            formatter: function (params) {
+                                return echarts.format.formatTime('yyyy-MM-dd', params.value);
+                            },
+                            backgroundColor: '#004E52'
+                        },
+                        handle: {
+                            show: true,
+                            color: '#004E52'
+                        }
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        inside: true
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        inside: true,
+                        formatter: '{value}\n'
+                    },
+                    z: 10
+                },
+                grid: {
+                    top: 110,
+                    left: 15,
+                    right: 15,
+                    height: 160
+                },
+                dataZoom: [{
+                    type: 'inside',
+                    throttle: 50
+                }],
+                series: [{
+                        name: '模拟数据',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'circle',
+                        symbolSize: 5,
+                        sampling: 'average',
+                        itemStyle: {
+                            color: '#8ec6ad'
+                        },
+                        stack: 'a',
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: '#8ec6ad'
+                            }, {
+                                offset: 1,
+                                color: '#ffe'
+                            }])
+                        },
+                        data: data
+                    },
+                    {
+                        name: '模拟数据',
+                        type: 'line',
+                        smooth: true,
+                        stack: 'a',
+                        symbol: 'circle',
+                        symbolSize: 5,
+                        sampling: 'average',
+                        itemStyle: {
+                            color: '#d68262'
+                        },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: '#d68262'
+                            }, {
+                                offset: 1,
+                                color: '#ffe'
+                            }])
+                        },
+                        data: data2
+                    }
+
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                option: option
+            });
+            chart.setOption(option, true);
+            window.onresize = function () {
+                chart.resize();
+            }
+        });
+
+    </script>
+</body>
+
+</html>