From 97b1473315f6f4dacc5b14fafce4b0a00f064722 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 21 Aug 2020 14:50:03 +0800
Subject: [PATCH 1/3] test(dirty-rect): support dirty rect in test

ZRender supporting dirty rect can be found at ecomfe/zrender#570
---
 src/echarts.ts         | 15 ++++++++++++++-
 test/lib/caseFrame.css |  7 ++-----
 test/lib/caseFrame.js  | 32 ++++++++++++++++++++++++++++----
 test/lib/config.js     |  3 +++
 4 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/echarts.ts b/src/echarts.ts
index dbe437854e..7eb2d37231 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -322,6 +322,7 @@ class ECharts extends Eventful {
             locale?: string | LocaleOption,
             renderer?: RendererType,
             devicePixelRatio?: number,
+            useDirtyRect?: boolean,
             width?: number,
             height?: number
         }
@@ -344,11 +345,23 @@ class ECharts extends Eventful {
             ) as any).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
         }
 
+        let defaultUseDirtyRect = false;
+        if (__DEV__) {
+            const devUseDirtyRect = ((
+                typeof window === 'undefined' ? global : window
+            ) as any).__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
+
+            defaultUseDirtyRect = devUseDirtyRect == null
+                ? defaultUseDirtyRect
+                : devUseDirtyRect;
+        }
+
         const zr = this._zr = zrender.init(dom, {
             renderer: opts.renderer || defaultRenderer,
             devicePixelRatio: opts.devicePixelRatio,
             width: opts.width,
-            height: opts.height
+            height: opts.height,
+            useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect
         });
 
         // Expect 60 fps.
diff --git a/test/lib/caseFrame.css b/test/lib/caseFrame.css
index 11816b545a..33442f9f29 100644
--- a/test/lib/caseFrame.css
+++ b/test/lib/caseFrame.css
@@ -35,7 +35,7 @@
 }
 .case-frame .cases-list ul {
     padding-left: 32px;
-    margin-top: 130px;
+    margin-top: 170px;
     list-style-type: decimal;
 }
 .case-frame .info-panel {
@@ -54,10 +54,7 @@
     text-decoration: underline;
 }
 .case-frame .info-panel .renderer-selector {
-    height: 40px;
-    line-height: 40px;
-}
-.case-frame .info-panel .dist-selector {
+    margin: 10px;
 }
 .case-frame .info-panel .list-filter {
     margin: 10px 0;
diff --git a/test/lib/caseFrame.js b/test/lib/caseFrame.js
index 10b2b1094d..febc9d556e 100644
--- a/test/lib/caseFrame.js
+++ b/test/lib/caseFrame.js
@@ -40,8 +40,15 @@
         '    <div class="info-panel">',
         '        <input class="current" />',
         '        <div class="renderer-selector">',
-        '            <input type="radio" value="canvas" name="renderer" /> CANVAS ',
-        '            <input type="radio" value="svg" name="renderer" /> SVG ',
+        '            <div class="render-selector-item">',
+        '               <input type="radio" value="canvas" name="renderer" /> CANVAS ',
+        '            </div>',
+        '           <div class="render-selector-item">',
+        '               <input type="radio" value="dirty-rect" name="renderer" /> CANVAS (dirty rect) ',
+        '            </div>',
+    '                <div class="render-selector-item">',
+        '               <input type="radio" value="svg" name="renderer" /> SVG ',
+        '            </div>',
         '        </div>',
         '        <div class="list-filter"></div>',
         '        <select class="dist-selector">',
@@ -107,13 +114,23 @@
         });
 
         rendererSelector.off('click').on('click', function (e) {
-            setState('renderer', e.target.value);
+            if (e.target.value === 'dirty-rect') {
+                setState('renderer', 'canvas');
+                setState('useDirtyRect', true);
+            }
+            else {
+                setState('renderer', e.target.value);
+                setState('useDirtyRect', false);
+            }
         });
 
         var renderer = getState('renderer');
+        var useDirtyRect = getState('useDirtyRect');
 
         rendererSelector.each(function (index, el) {
-            el.checked = el.value === renderer;
+            el.checked = el.value === 'dirty-rect'
+                ? useDirtyRect
+                : el.value === renderer;
         });
     }
 
@@ -190,6 +207,11 @@
             var matchResult = (pageURL || '').match(/[?&]__RENDERER__=(canvas|svg)(&|$)/);
             return matchResult && matchResult[1] || 'canvas';
         },
+        // true, false
+        useDirtyRect: function (pageURL) {
+            var matchResult = (pageURL || '').match(/[?&]__USE_DIRTY_RECT__=(true|false)(&|$)/);
+            return matchResult && matchResult[1] === 'true';
+        },
         // 'dist', 'webpack', 'webpackold'
         dist: function (pageURL) {
             var matchResult = (pageURL || '').match(/[?&]__ECDIST__=(webpack-req-ec|webpack-req-eclibec|webpackold-req-ec|webpackold-req-eclibec)(&|$)/);
@@ -223,6 +245,7 @@
     function setState(prop, value) {
         var curr = {
             renderer: getState('renderer'),
+            useDirtyRect: getState('useDirtyRect'),
             dist: getState('dist'),
             pagePath: getState('pagePath'),
             listFilterName: getState('listFilterName')
@@ -237,6 +260,7 @@
     function makePageURL(curr) {
         return curr.pagePath + '?' + [
             '__RENDERER__=' + curr.renderer,
+            '__USE_DIRTY_RECT__=' + curr.useDirtyRect,
             '__ECDIST__=' + curr.dist,
             '__FILTER__=' + curr.listFilterName
         ].join('&');
diff --git a/test/lib/config.js b/test/lib/config.js
index c980f4ef33..53ac199080 100644
--- a/test/lib/config.js
+++ b/test/lib/config.js
@@ -35,6 +35,9 @@
     if (params.__RENDERER__) {
         window.__ECHARTS__DEFAULT__RENDERER__ = params.__RENDERER__;
     }
+    if (params.__USE_DIRTY_RECT__) {
+        window.__ECHARTS__DEFAULT__USE_DIRTY_RECT__ = params.__USE_DIRTY_RECT__ === 'true';
+    }
 
     // Set echarts source code.
     var ecDistPath;

From b0d945690810e2ec4b9e283cd20264b1ded2ed5b Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 27 Aug 2020 14:49:15 +0800
Subject: [PATCH 2/3] refactor(dirty-rect): reuse window logic

---
 src/echarts.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/echarts.ts b/src/echarts.ts
index 7eb2d37231..d64e0a8889 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -338,19 +338,18 @@ class ECharts extends Eventful {
 
         this._dom = dom;
 
+        const root = (
+            typeof window === 'undefined' ? global : window
+        ) as any;
+
         let defaultRenderer = 'canvas';
         if (__DEV__) {
-            defaultRenderer = ((
-                typeof window === 'undefined' ? global : window
-            ) as any).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+            defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
         }
 
         let defaultUseDirtyRect = false;
         if (__DEV__) {
-            const devUseDirtyRect = ((
-                typeof window === 'undefined' ? global : window
-            ) as any).__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
-
+            const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
             defaultUseDirtyRect = devUseDirtyRect == null
                 ? defaultUseDirtyRect
                 : devUseDirtyRect;

From c03bbbb5b4cc4e03314ded9a65263de6c34d7c12 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 27 Aug 2020 16:54:18 +0800
Subject: [PATCH 3/3] refactor(dirty-rect): merge conditions

---
 src/echarts.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/echarts.ts b/src/echarts.ts
index d64e0a8889..c27603a578 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -343,12 +343,10 @@ class ECharts extends Eventful {
         ) as any;
 
         let defaultRenderer = 'canvas';
+        let defaultUseDirtyRect = false;
         if (__DEV__) {
             defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
-        }
 
-        let defaultUseDirtyRect = false;
-        if (__DEV__) {
             const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
             defaultUseDirtyRect = devUseDirtyRect == null
                 ? defaultUseDirtyRect