Fix/dirty rect

package.json

@@ -47,9 +47,10 @@
     "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
+    "@echarts-x/eslint-plugin-ec": "^1.0.0",
     "chalk": "^3.0.0",
     "commander": "2.11.0",
-    "eslint": "6.3.0",
+    "eslint": "^7.15.0",
     "fs-extra": "4.0.2",
     "globby": "^11.0.4",
     "jest": "^27.2.5",

src/.eslintrc.yaml

@@ -1,25 +1,45 @@
+# Note:
+# If eslint does not work in VSCode, please check:
+# (1) Whether "@typescript-eslint/eslint-plugin" and "@typescript-eslint/parser"
+# are npm installed locally. Should better in the same version.
+# (2) Whether "VSCode ESlint extension" is installed.
+# (3) If the project folder is not the root folder of your working space, please
+# config the "VSCode ESlint extension" in "settings":
+# ```json
+# "eslint.workingDirectories": [{"mode": "auto"}]
+# ```
+# Note that it should be "workingDirectories" rather than "WorkingDirectories".
+
 parser: "@typescript-eslint/parser"
 parserOptions:
     ecmaVersion: 6
     sourceType: module
     ecmaFeatures:
         modules: true
     project: "tsconfig.json"
-plugins: ["@typescript-eslint"]
+plugins:
+    - "@typescript-eslint"
+    - '@echarts-x/ec'
 env:
-    browser: true
-    node: true
+    # Do not set `browser: true, node: true`, which introduces some global variables
+    # (e.g., "require", "global"), which bypasses checks and may lead to errors.
     es6: false
 globals:
-    jQuery: true
-    Promise: true
+    console: false
+    setTimeout: true
+    clearTimeout: true
+    navigator: false
+    process: true # Only for process.env.NODE_ENV
+root: true
 rules:
+    # Check the rules in: node_modules/@typescript-eslint/eslint-plugin/README.md
     no-console:
         - 2
         -
             allow:
                 - "warn"
                 - "error"
+    prefer-const: 0 # Allowed temporarily.
     no-constant-condition: 0
     comma-dangle: 0
     no-debugger: 2
@@ -36,7 +56,7 @@ rules:
     no-unreachable: 2
     use-isnan: 2
     valid-typeof: 2
-    block-scoped-var: 0
+    block-scoped-var: 2
     curly:
         - 2
         - "all"
@@ -63,7 +83,6 @@ rules:
     no-octal: 2
     no-octal-escape: 2
     no-proto: 2
-    no-redeclare: 0
     no-self-compare: 2
     no-unneeded-ternary: 2
     no-with: 2
@@ -78,7 +97,8 @@ rules:
     no-shadow-restricted-names: 2
     no-undef: 2
     no-undef-init: 2
-    no-use-before-define: 0
+    "no-use-before-define": "off"
+    "@typescript-eslint/no-use-before-define": 0
     brace-style:
         - 2
         - "stroustrup"
@@ -115,11 +135,13 @@ rules:
         -
             overrides:
                 "=": "after"
-    quotes:
+    "quotes": "off"
+    "@typescript-eslint/quotes":
         - 2
         - "single"
-    semi:
-        - 2
+    "semi": "off"
+    "@typescript-eslint/semi":
+        - 0  # Temporarily allow.
         - "always"
     semi-spacing: 2
     keyword-spacing: 2
@@ -128,7 +150,8 @@ rules:
         -
             beforeColon: false
             afterColon: true
-    space-before-function-paren:
+    "space-before-function-paren": "off"
+    "@typescript-eslint/space-before-function-paren":
         - 2
         -
             anonymous: "always"
@@ -143,7 +166,7 @@ rules:
         - 2
         - "never"
     space-unary-ops: 2
-    spaced-comment: 0
+    spaced-comment: 0 # Allowed temporarily.
 
     max-nested-callbacks:
         - 1
@@ -179,17 +202,120 @@ rules:
     no-const-assign: 2
     # no-dupe-class-members: 2
     no-this-before-super: 0
-    no-var: 0
+    no-var: 2
     no-duplicate-imports: 2
     prefer-rest-params: 0
     unicode-bom: 2
     max-statements-per-line: 2
 
     no-useless-constructor: 0
 
+    "func-call-spacing": "off"
+    "@typescript-eslint/func-call-spacing": "error"
 
+    "no-unused-vars": "off"
     "@typescript-eslint/no-unused-vars":
         - 1
         -
             vars: "local"
-            args: "none"
+            args: "none"
+
+
+    "no-restricted-syntax":
+        - 2
+        -
+            "selector": "SpreadElement"
+            "message": "Spread syntax is unnecessary; it introduces verbose code after compilation."
+        -
+            "selector": "AssignmentPattern"
+            "message": "Default parameters only apply to undefined, but zrender treats undefined and null the same."
+        -
+            "selector": "FunctionDeclaration[async=true]"
+            "message": "No need to use async/await yet; it introduces verbose code after compilation."
+        -
+            "selector": "ArrowFunctionExpression[async=true]"
+            "message": "No need to use async/await yet; it introduces verbose code after compilation."
+        -
+            "selector": "AwaitExpression"
+            "message": "No need to use async/await yet; it introduces verbose code after compilation."
+    "@echarts-x/ec/no-props-polyfill-uncertain":
+        # Currently, zrender does not officially discard legacy platforms. The following methods are
+        # not polyfilled, and alternatives are widely used in this codebase by convention, which also
+        # benefits compression.
+        - 2
+        - {"receiver": "Array.prototype", "method": "map", "message": "Use `map` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "forEach", "message": "Use `each` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "reduce", "message": "Use `reduce` or `each` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "reduceRight", "message": "Use `reduce` or `each` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "filter", "message": "Use `filter` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "indexOf", "message": "Use `indexOf` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "find", "message": "Use `find` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "findIndex", "message": "Use `find` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "findLast", "message": "Use `find` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "findLastIndex", "message": "Use `find` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "includes", "message": "Use `indexOf` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "some", "message": "Use `find` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Array.prototype", "method": "flat"}
+        - {"receiver": "Array.prototype", "method": "flatMap"}
+        - {"receiver": "Array.prototype", "method": "at"}
+        - {"receiver": "Array.prototype", "method": "every"}
+        - {"receiver": "Array.prototype", "method": "fill"}
+        - {"receiver": "String.prototype", "method": "startsWith", "message": "Use `String.prototype.indexOf` instead."}
+        - {"receiver": "String.prototype", "method": "endsWith", "message": "Use `String.prototype.indexOf` instead."}
+        - {"receiver": "String.prototype", "method": "includes", "message": "Use `String.prototype.indexOf` instead."}
+        - {"receiver": "String.prototype", "method": "repeat"}
+        - {"receiver": "String.prototype", "method": "padStart"}
+        - {"receiver": "String.prototype", "method": "padEnd"}
+        - {"receiver": "String.prototype", "method": "matchAll"}
+        - {"receiver": "String.prototype", "method": "replaceAll"}
+        - {"receiver": "Array", "method": "isArray", "message": "Use `isArray` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Function", "method": "bind", "message": "Use `bind` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Function.prototype", "method": "bind", "message": "Use `bind` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Date", "method": "now", "message": "Use `+(new Date())` instead."}
+        - {"receiver": "Date.prototype", "method": "toJSON"}
+        - {"receiver": "Object", "method": "assign", "message": "Use `extend` or `defaults` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Object", "method": "keys", "message": "Use `keys` in `zrender/src/core/util.ts` instead."}
+        - {"receiver": "Object", "method": "seal", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "isSealed", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "freeze", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "isFrozen", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "isExtensible", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "preventExtensions", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "create", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "defineProperty", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "defineProperties", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "getOwnPropertyDescriptor", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "getOwnPropertyNames", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "is", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "entries", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "values", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "fromEntries", "message": "Typically not necessary in production code."}
+        - {"receiver": "Object", "method": "hasOwn", "message": "Typically not necessary in production code."}
+
+    # Avoid dangerous usage of globals.
+    "no-restricted-globals":
+        - 2
+        - "event"
+        - "name"
+        - "length"
+        - "orientation"
+        - "top"
+        - "parent"
+        - "location"
+        - "closed"
+        - "jQuery"
+        - "$"
+        # No need to use them yet.
+        - "Promise"
+        # Currently, zrender does not officially discard legacy platforms. The following methods are
+        # not polyfilled, and alternatives are widely used in this codebase by convention, which also
+        # benefits compression.
+        - {name: "Map", message: "Use `HashMap` in `zrender/src/core/util.ts` instead."}
+        - {name: "Set", message: "Use `HashMap` in `zrender/src/core/util.ts` instead."}
+        - {name: "WeakMap", message: "No polyfill for it. Typically it is not necessary. Use `zrender/src/core/WeakMap` instead."}
+        - {name: "WeakSet", message: "No polyfill for it. Typically it is not necessary. Use `zrender/src/core/WeakMap` instead."}
+        - {name: "Symbol", message: "No polyfill for it. Typically it is not necessary."}
+        - {name: "Proxy", message: "No polyfill for it. Typically it is not necessary."}
+        - {name: "Reflect", message: "No polyfill for it. Typically it is not necessary."}
+        - {name: "Intl", message: "No polyfill for it. Typically it is not necessary."}
+        - {name: "Atomics", message: "No polyfill for it. Typically it is not necessary."}

src/Element.ts

@@ -414,10 +414,9 @@
     __isRendered: boolean;
 
     /**
-     * Whether this element has been moved to the hover layer.
-     * If so, dirty will only trigger the zrender refresh hover layer.
+     * This flag indicates whether this element requests rendering on a hover layer.
      *
-     * Hover layer is typically useful for progressive rendering case,
+     * Hover layer is typically useful for large data case (including progressive rendering case),
      * where the underlying layers can remain not dirty for most hovering
      * interactions.
      *
@@ -1767,7 +1766,7 @@
             xKey: string,
             yKey: string
         ) {
             Object.defineProperty(elProto, key, {
                 get() {
                     if (process.env.NODE_ENV !== 'production') {
                         logDeprecatedError(key, xKey, yKey);
@@ -1789,7 +1788,7 @@
                 }
             });
             function enhanceArray(self: any, pos: number[]) {
                 Object.defineProperty(pos, 0, {
                     get() {
                         return self[xKey];
                     },
@@ -1797,7 +1796,7 @@
                         self[xKey] = val;
                     }
                 });
                 Object.defineProperty(pos, 1, {
                     get() {
                         return self[yKey];
                     },

src/animation/requestAnimationFrame.ts

@@ -1,21 +1,25 @@
 import env from '../core/env';
 
+/* global window */
+
 type RequestAnimationFrameType = typeof window.requestAnimationFrame
 
 let requestAnimationFrame: RequestAnimationFrameType;
 
 requestAnimationFrame = (
-	env.hasGlobalWindow
-		&& (
-			(window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
-			// https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
-			|| ((window as any).msRequestAnimationFrame && (window as any).msRequestAnimationFrame.bind(window))
-			|| (window as any).mozRequestAnimationFrame
-			// @ts-ignore
-			|| window.webkitRequestAnimationFrame
-		)
+    env.hasGlobalWindow
+        && (
+            // eslint-disable-next-line @echarts-x/ec/no-props-polyfill-uncertain
+            (window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
+            // https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
+            // eslint-disable-next-line @echarts-x/ec/no-props-polyfill-uncertain
+            || ((window as any).msRequestAnimationFrame && (window as any).msRequestAnimationFrame.bind(window))
+            || (window as any).mozRequestAnimationFrame
+            // @ts-ignore
+            || window.webkitRequestAnimationFrame
+        )
 ) || function (func: Parameters<RequestAnimationFrameType>[0]): number {
-	return setTimeout(func, 16) as any;
+    return setTimeout(func, 16) as any;
 };
 
 export default requestAnimationFrame;