From 4824ada974e035f508fa3e7eb0c926dc2db7c7bf Mon Sep 17 00:00:00 2001
From: pissang <bm2736892@gmail.com>
Date: Wed, 15 Sep 2021 17:26:05 +0800
Subject: [PATCH] fix(line): fix animation is not stopped when direct update
 points.

---
 src/chart/line/LineView.ts                    |   5 +-
 src/i18n/langPT-br.ts                         |   3 +-
 ...aneous.html => line-animation-update.html} | 106 ++++++++++++++++++
 test/line-case.html                           |   3 -
 test/runTest/actions/__meta__.json            |   2 +-
 ...aneous.json => line-animation-update.json} |   2 +-
 6 files changed, 112 insertions(+), 9 deletions(-)
 rename test/{line-extraneous.html => line-animation-update.html} (97%)
 rename test/runTest/actions/{line-extraneous.json => line-animation-update.json} (57%)

diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index fa4b3a95a7..bb4dd76508 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -1290,17 +1290,18 @@ class LineView extends ChartView {
             next = turnPointsIntoStep(diff.next, coordSys, step);
             stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step);
         }
-
         // Don't apply animation if diff is large.
         // For better result and avoid memory explosion problems like
         // https://github.com/apache/incubator-echarts/issues/12229
         if (getBoundingDiff(current, next) > 3000
             || (polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3000)
         ) {
+            polyline.stopAnimation();
             polyline.setShape({
                 points: next
             });
             if (polygon) {
+                polygon.stopAnimation();
                 polygon.setShape({
                     points: next,
                     stackedOnPoints: stackedOnNext
@@ -1345,7 +1346,6 @@ class LineView extends ChartView {
             }
         }
 
-
         const updatedDataInfo: {
             el: SymbolExtended,
             ptIdx: number
@@ -1364,7 +1364,6 @@ class LineView extends ChartView {
                 }
             }
         }
-
         if (polyline.animators && polyline.animators.length) {
             polyline.animators[0].during(function () {
                 polygon && polygon.dirtyShape();
diff --git a/src/i18n/langPT-br.ts b/src/i18n/langPT-br.ts
index bd8c988a64..8d6eb014f7 100644
--- a/src/i18n/langPT-br.ts
+++ b/src/i18n/langPT-br.ts
@@ -24,7 +24,8 @@
 export default {
     time: {
         month: [
-            'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+            'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+            'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
         ],
         monthAbbr: [
             'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
diff --git a/test/line-extraneous.html b/test/line-animation-update.html
similarity index 97%
rename from test/line-extraneous.html
rename to test/line-animation-update.html
index e749696cfe..514559e836 100644
--- a/test/line-extraneous.html
+++ b/test/line-animation-update.html
@@ -42,6 +42,7 @@
 
     <div id="main0"></div>
     <div id="main1"></div>
+    <div id="main2"></div>
 
     <script>
 
@@ -58,6 +59,10 @@
             var chart;
             var myChart;
 
+            const obj = {};
+            const payload = JSON.parse('{"__proto__":{"polluted":"Polluted!"}}');
+
+
             const datasetSource1 = [['2019-04-14', 17], ['2019-04-16', 13], ['2019-04-17', 5]];
             const datasetSource2 = [['2019-04-13', 0], ['2019-04-18', 23]];
 
@@ -269,6 +274,107 @@
 
     </script>
 
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var chart;
+            var myChart;
+
+            const option1 = {
+                xAxis: {
+                    type: "time",
+                    axisLabel: {},
+                },
+                yAxis: {
+                    axisLabel: {},
+                },
+                dataset: [
+                    {
+                    dimensions: ["time", "mean_load15"],
+                    source: [
+                        ["2021-09-07T07:53:00Z", 0.215],
+                        ["2021-09-07T07:54:00Z", 0.2073684210526316],
+                        ["2021-09-07T07:55:00Z", 0.20450000000000004],
+                    ],
+                    },
+                ],
+                series: [
+                    {
+                        type: "line",
+                        name: "mean_load15",
+                        encode: {
+                            x: "time",
+                            y: "mean_load15",
+                        },
+                        datasetIndex: 0,
+                        smooth: true,
+                        lineStyle: {
+                            width: 1,
+                        },
+                        itemStyle: {},
+                        showSymbol: false,
+                    },
+                ],
+                };
+
+                const option2 = {
+                    xAxis: {
+                        type: "time",
+                        axisLabel: {},
+                    },
+                    yAxis: {
+                        axisLabel: {},
+                    },
+                    dataset: [
+                        {
+                        dimensions: ["time", "mean_load15"],
+                        source: [
+                            ["2021-09-02T09:52:00Z", 0.197453237410072],
+                            ["2021-09-02T11:33:00Z", 0.10109900990098977],
+                            ["2021-09-02T13:14:00Z", 0.13159405940594063],
+                            ["2021-09-02T14:55:00Z", 0.11086633663366334],
+                            ["2021-09-02T16:36:00Z", 0.1571930693069309],
+                            ["2021-09-02T18:17:00Z", 0.14914356435643553],
+                        ],
+                    },
+                ],
+                series: [
+                    {
+                        type: "line",
+                        name: "mean_load15",
+                        encode: {
+                            x: "time",
+                            y: "mean_load15",
+                        },
+                        datasetIndex: 0,
+                        smooth: true,
+                        itemStyle: {},
+                        showSymbol: false,
+                    },
+                ],
+            };
+
+            chart = myChart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Case from https://github.com/apache/echarts/issues/15685'
+                ],
+                option: option2,
+                button: {
+                    text: 'Update twice',
+                    onClick: () => {
+                        myChart.setOption(option1, true);
+
+                        setTimeout(() => {
+                            myChart.setOption(option2, true);
+                        }, 50)
+                    }
+                }
+            });
+        });
+
+    </script>
+
 </body>
 
 </html>
diff --git a/test/line-case.html b/test/line-case.html
index 066715e43e..4c2bbb873d 100644
--- a/test/line-case.html
+++ b/test/line-case.html
@@ -447,9 +447,6 @@
                     'Test case from https://github.com/apache/echarts/issues/15380'
                 ],
                 option: option
-                // height: 300,
-                // buttons: [{text: 'btn-txt', onclick: function () {}}],
-                // recordCanvas: true,
             });
         });
         </script>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 01f5097433..37aea6b857 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -111,10 +111,10 @@
   "legend-visualMapColor": 2,
   "line": 1,
   "line-animation": 1,
+  "line-animation-update": 3,
   "line-boldWhenHover": 1,
   "line-crash": 1,
   "line-endLabel": 1,
-  "line-extraneous": 2,
   "line-visual2": 1,
   "lines-bus": 1,
   "map": 3,
diff --git a/test/runTest/actions/line-extraneous.json b/test/runTest/actions/line-animation-update.json
similarity index 57%
rename from test/runTest/actions/line-extraneous.json
rename to test/runTest/actions/line-animation-update.json
index 455c58f692..79b547e948 100644
--- a/test/runTest/actions/line-extraneous.json
+++ b/test/runTest/actions/line-animation-update.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousedown","time":596,"x":28,"y":93},{"type":"mouseup","time":698,"x":28,"y":93},{"time":699,"delay":2000,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568042380534},{"name":"Action 2","ops":[{"type":"mousedown","time":736,"x":218,"y":184},{"type":"mouseup","time":827,"x":218,"y":184},{"time":828,"delay":400,"type":"screenshot-auto"}],"scrollY":416,"scrollX":0,"timestamp":1617082817083}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":596,"x":28,"y":93},{"type":"mouseup","time":698,"x":28,"y":93},{"time":699,"delay":2000,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568042380534},{"name":"Action 2","ops":[{"type":"mousedown","time":736,"x":218,"y":184},{"type":"mouseup","time":827,"x":218,"y":184},{"time":828,"delay":400,"type":"screenshot-auto"}],"scrollY":416,"scrollX":0,"timestamp":1617082817083},{"name":"Action 3","ops":[{"type":"mousedown","time":325,"x":110,"y":174},{"type":"mouseup","time":433,"x":110,"y":174},{"time":434,"delay":400,"type":"screenshot-auto"}],"scrollY":915,"scrollX":0,"timestamp":1631687531615}]
\ No newline at end of file