Merge pull request #14553 from apache/resize-animation

feat(animation): add animaiton configuration in resize

src/core/echarts.ts

@@ -88,7 +88,8 @@ import {
     DimensionLoose,
     ScaleDataValue,
     ZRElementEventName,
-    ECElementEvent
+    ECElementEvent,
+    AnimationOption
 } from '../util/types';
 import Displayable from 'zrender/src/graphic/Displayable';
 import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
@@ -210,7 +211,15 @@ export interface SetOptionTransitionOptItem {
     from?: SetOptionTransitionOptFinder;
     to: SetOptionTransitionOptFinder;
     dividingMethod: MorphDividingMethod;
-}
+};
+
+export interface ResizeOpts {
+    width?: number | 'auto', // Can be 'auto' (the same as null/undefined)
+    height?: number | 'auto', // Can be 'auto' (the same as null/undefined)
+    animation?: AnimationOption
+    silent?: boolean // by default false.
+};
+
 interface SetOptionTransitionOptFinder extends modelUtil.ModelFinderObject {
     dimension: DimensionLoose;
 }
@@ -1129,11 +1138,7 @@ class ECharts extends Eventful<ECEventDefinition> {
     /**
      * Resize the chart
      */
-    resize(opts?: {
-        width?: number | 'auto', // Can be 'auto' (the same as null/undefined)
-        height?: number | 'auto', // Can be 'auto' (the same as null/undefined)
-        silent?: boolean // by default false.
-    }): void {
+    resize(opts?: ResizeOpts): void {
         if (__DEV__) {
             assert(!this[IN_MAIN_PROCESS_KEY], '`resize` should not be called during main process.');
         }
@@ -1162,10 +1167,10 @@ class ECharts extends Eventful<ECEventDefinition> {
         optionChanged && prepare(this);
         updateMethods.update.call(this, {
             type: 'resize',
-            animation: {
+            animation: zrUtil.extend({
                 // Disable animation
                 duration: 0
-            }
+            }, opts && opts.animation)
         });
 
         this[IN_MAIN_PROCESS_KEY] = false;
@@ -1504,12 +1509,12 @@ class ECharts extends Eventful<ECEventDefinition> {
 
         updateMethods = {
 
-            prepareAndUpdate: function (this: ECharts, payload: Payload): void {
+            prepareAndUpdate(this: ECharts, payload: Payload): void {
                 prepare(this);
                 updateMethods.update.call(this, payload);
             },
 
-            update: function (this: ECharts, payload: Payload): void {
+            update(this: ECharts, payload: Payload): void {
                 // console.profile && console.profile('update');
 
                 const ecModel = this._model;
@@ -1581,7 +1586,7 @@ class ECharts extends Eventful<ECEventDefinition> {
                 // console.profile && console.profileEnd('update');
             },
 
-            updateTransform: function (this: ECharts, payload: Payload): void {
+            updateTransform(this: ECharts, payload: Payload): void {
                 const ecModel = this._model;
                 const api = this._api;
 
@@ -1638,7 +1643,7 @@ class ECharts extends Eventful<ECEventDefinition> {
                 performPostUpdateFuncs(ecModel, this._api);
             },
 
-            updateView: function (this: ECharts, payload: Payload): void {
+            updateView(this: ECharts, payload: Payload): void {
                 const ecModel = this._model;
 
                 // update before setOption
@@ -1660,7 +1665,7 @@ class ECharts extends Eventful<ECEventDefinition> {
                 performPostUpdateFuncs(ecModel, this._api);
             },
 
-            updateVisual: function (this: ECharts, payload: Payload): void {
+            updateVisual(this: ECharts, payload: Payload): void {
                 // updateMethods.update.call(this, payload);
 
                 const ecModel = this._model;
@@ -1701,7 +1706,7 @@ class ECharts extends Eventful<ECEventDefinition> {
                 performPostUpdateFuncs(ecModel, this._api);
             },
 
-            updateLayout: function (this: ECharts, payload: Payload): void {
+            updateLayout(this: ECharts, payload: Payload): void {
                 updateMethods.update.call(this, payload);
             }
         };

src/echarts.ts

@@ -38,4 +38,4 @@ export default {
         // @ts-ignore
         return init.apply(null, arguments);
     }
-}
\ No newline at end of file
+};
\ No newline at end of file

test/resize-animation.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">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            body {
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+        </style>
+        <div id="main0"></div>
+
+        <script>
+
+
+            require([
+                'echarts'
+                // 'echarts/chart/pie',
+                // 'echarts/component/title',
+                // 'echarts/component/legend',
+                // 'echarts/component/tooltip'
+            ], function (echarts) {
+
+                require([
+                    'echarts'
+                ], function (echarts) {
+                    const option = {
+                        tooltip : {
+                            trigger: 'item',
+                            formatter: "{a} <br/>{b} : {c} ({d}%)"
+                        },
+                        legend: {
+                            orient: 'vertical',
+                            left: 'left',
+                            data: ['直接访问','邮件营销','联盟广告','视频广告(value is null)','搜索引擎']
+                        },
+                        series : [
+                            {
+                                name: '访问来源',
+                                type: 'pie',
+                                radius : '55%',
+                                center: ['50%', '60%'],
+                                selectedMode: 'single',
+                                data:[
+                                    {value:335, name:'直接访问'},
+                                    {value:310, name:'邮件营销'},
+                                    {value:234, name:'联盟广告'},
+                                    {value:null, name:'视频广告(value is null)'},
+                                    {value:1548, name:'搜索引擎'}
+                                ]
+                            }
+                        ]
+                    };
+
+                    var myChart = testHelper.create(echarts, 'main0', {
+                        width: 600,
+                        height: 400,
+                        title: [
+                            'Resize animation should be configured properly'
+                        ],
+                        option: option,
+                        buttons: [{
+                            text: 'Resize without animation by default',
+                            onClick: () => {
+                                myChart.resize({
+                                    width: 400,
+                                    height: 266
+                                })
+                            }
+                        }, {
+                            text: 'Resize with animaiton',
+                            onClick: () => {
+                                myChart.resize({
+                                    width: 300,
+                                    height: 200,
+                                    animation: {
+                                        // Use a long duration so it can be recorded
+                                        duration: 2000,
+                                        easing: 'cubicInOut'
+                                    }
+                                })
+                            }
+                        }]
+                    });
+                });
+
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/runTest/actions/__meta__.json

@@ -131,6 +131,7 @@
   "radar2": 1,
   "radar3": 1,
   "radar4": 1,
+  "resize-animation": 1,
   "sankey-depth": 1,
   "sankey-jump": 1,
   "sankey-level": 1,

test/runTest/actions/resize-animation.json

+[{"name":"Action 1","ops":[{"type":"mousemove","time":294,"x":206,"y":78},{"type":"mousedown","time":382,"x":206,"y":78},{"type":"mouseup","time":481,"x":206,"y":78},{"time":482,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":910,"x":207,"y":78},{"type":"mousemove","time":1111,"x":248,"y":78},{"type":"mousedown","time":1201,"x":248,"y":78},{"type":"mouseup","time":1305,"x":248,"y":78},{"time":1306,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1320,"x":248,"y":78}],"scrollY":0,"scrollX":0,"timestamp":1617085338625}]
\ No newline at end of file