Create release branch for 5.2.0

index.d.ts

@@ -1,2 +1,2 @@
-export * from './src/zrender';
-export * from './src/export';
+export * from './lib/zrender';
+export * from './lib/export';

index.js

@@ -5,4 +5,4 @@ import {registerPainter} from './lib/zrender';
 import CanvasPainter from './lib/canvas/Painter';
 import SVGPainter from './lib/svg/Painter';
 registerPainter('canvas', CanvasPainter);
-registerPainter('svg', SVGPainter);
+registerPainter('svg', SVGPainter);

package.json

@@ -26,7 +26,7 @@
   "module": "index.js",
   "main": "dist/zrender.js",
   "dependencies": {
-    "tslib": "2.0.3"
+    "tslib": "2.3.0"
   },
   "sideEffects": [
     "lib/canvas/canvas.js",
@@ -35,8 +35,8 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.7.2",
     "@types/jest": "^25.1.2",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
     "chalk": "^3.0.0",
     "commander": "2.11.0",
     "eslint": "6.3.0",
@@ -47,7 +47,7 @@
     "rollup-plugin-typescript2": "^0.25.3",
     "rollup-plugin-uglify": "^6.0.4",
     "ts-jest": "^25.2.0",
-    "typescript": "^4.1.2",
+    "typescript": "4.3.5",
     "uglify-js": "^3.10.0"
   }
 }

src/Element.ts

@@ -8,7 +8,7 @@ import {
 } from './core/types';
 import Path from './graphic/Path';
 import BoundingRect, { RectLike } from './core/BoundingRect';
-import Eventful, {EventQuery, EventCallback} from './core/Eventful';
+import Eventful from './core/Eventful';
 import ZRText, { DefaultTextStyle } from './graphic/Text';
 import { calculateTextPosition, TextPositionCalculationResult, parsePercent } from './contain/text';
 import {
@@ -28,7 +28,7 @@ import Point from './core/Point';
 import { LIGHT_LABEL_COLOR, DARK_LABEL_COLOR } from './config';
 import { parse, stringify } from './tool/color';
 import env from './core/env';
-import { REDARAW_BIT, STYLE_CHANGED_BIT } from './graphic/constants';
+import { REDARAW_BIT } from './graphic/constants';
 
 export interface ElementAnimateConfig {
     duration?: number
@@ -284,16 +284,22 @@ export type ElementCommonState = {
     hoverLayer?: boolean
 }
 
+export type ElementCalculateTextPosition = (
+    out: TextPositionCalculationResult,
+    style: ElementTextConfig,
+    rect: RectLike
+) => TextPositionCalculationResult;
+
 let tmpTextPosCalcRes = {} as TextPositionCalculationResult;
 let tmpBoundingRect = new BoundingRect(0, 0, 0, 0);
 
-interface Element<Props extends ElementProps = ElementProps> extends Transformable, Eventful, ElementEventHandlerProps {
-    // Provide more typed event callback params for mouse events.
-    on<Ctx>(event: ElementEventName, handler: ElementEventCallback<Ctx, this>, context?: Ctx): this
-    on<Ctx>(event: string, handler: EventCallback<Ctx, this>, context?: Ctx): this
-
-    on<Ctx>(event: ElementEventName, query: EventQuery, handler: ElementEventCallback<Ctx, this>, context?: Ctx): this
-    on<Ctx>(event: string, query: EventQuery, handler: EventCallback<Ctx, this>, context?: Ctx): this
+interface Element<Props extends ElementProps = ElementProps> extends Transformable,
+    Eventful<{
+        [key in ElementEventName]: (e: ElementEvent) => void | boolean
+    } & {
+        [key in string]: (...args: any) => void | boolean
+    }>,
+    ElementEventHandlerProps {
 }
 
 class Element<Props extends ElementProps = ElementProps> {
@@ -487,6 +493,7 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     update() {
         this.updateTransform();
+
         if (this.__dirty) {
             this.updateInnerText();
         }
@@ -501,35 +508,21 @@ class Element<Props extends ElementProps = ElementProps> {
             }
             const textConfig = this.textConfig;
             const isLocal = textConfig.local;
-            const attachedTransform = textEl.attachedTransform;
+            const innerTransformable = textEl.innerTransformable;
 
             let textAlign: TextAlign;
             let textVerticalAlign: TextVerticalAlign;
 
             let textStyleChanged = false;
 
-            // TODO Restore the element after textConfig changed.
-
-            // NOTE: Can't be used both as normal element and as textContent.
-            if (isLocal) {
-                // Apply host's transform.
-                // TODO parent is always be group for developers. But can be displayble inside.
-                attachedTransform.parent = this as unknown as Group;
-            }
-            else {
-                attachedTransform.parent = null;
-            }
+            // Apply host's transform.
+            innerTransformable.parent = isLocal ? this as unknown as Group : null;
 
             let innerOrigin = false;
 
             // Reset x/y/rotation
-            attachedTransform.x = textEl.x;
-            attachedTransform.y = textEl.y;
-            attachedTransform.originX = textEl.originX;
-            attachedTransform.originY = textEl.originY;
-            attachedTransform.rotation = textEl.rotation;
-            attachedTransform.scaleX = textEl.scaleX;
-            attachedTransform.scaleY = textEl.scaleY;
+            innerTransformable.copyTransform(textEl);
+
             // Force set attached text's position if `position` is in config.
             if (textConfig.position != null) {
                 let layoutRect = tmpBoundingRect;
@@ -552,8 +545,8 @@ class Element<Props extends ElementProps = ElementProps> {
 
                 // TODO Should modify back if textConfig.position is set to null again.
                 // Or textContent is detached.
-                attachedTransform.x = tmpTextPosCalcRes.x;
-                attachedTransform.y = tmpTextPosCalcRes.y;
+                innerTransformable.x = tmpTextPosCalcRes.x;
+                innerTransformable.y = tmpTextPosCalcRes.y;
 
                 // User specified align/verticalAlign has higher priority, which is
                 // useful in the case that attached text is rotated 90 degree.
@@ -574,26 +567,26 @@ class Element<Props extends ElementProps = ElementProps> {
                     }
 
                     innerOrigin = true;
-                    attachedTransform.originX = -attachedTransform.x + relOriginX + (isLocal ? 0 : layoutRect.x);
-                    attachedTransform.originY = -attachedTransform.y + relOriginY + (isLocal ? 0 : layoutRect.y);
+                    innerTransformable.originX = -innerTransformable.x + relOriginX + (isLocal ? 0 : layoutRect.x);
+                    innerTransformable.originY = -innerTransformable.y + relOriginY + (isLocal ? 0 : layoutRect.y);
                 }
             }
 
 
             if (textConfig.rotation != null) {
-                attachedTransform.rotation = textConfig.rotation;
+                innerTransformable.rotation = textConfig.rotation;
             }
 
             // TODO
             const textOffset = textConfig.offset;
             if (textOffset) {
-                attachedTransform.x += textOffset[0];
-                attachedTransform.y += textOffset[1];
+                innerTransformable.x += textOffset[0];
+                innerTransformable.y += textOffset[1];
 
                 // Not change the user set origin.
                 if (!innerOrigin) {
-                    attachedTransform.originX = -textOffset[0];
-                    attachedTransform.originY = -textOffset[1];
+                    innerTransformable.originX = -textOffset[0];
+                    innerTransformable.originY = -textOffset[1];
                 }
             }
 
@@ -1288,7 +1281,7 @@ class Element<Props extends ElementProps = ElementProps> {
             throw new Error('Text element has been added to zrender.');
         }
 
-        textEl.attachedTransform = new Transformable();
+        textEl.innerTransformable = new Transformable();
 
         this._attachComponent(textEl);
 
@@ -1323,7 +1316,7 @@ class Element<Props extends ElementProps = ElementProps> {
     removeTextContent() {
         const textEl = this._textContent;
         if (textEl) {
-            textEl.attachedTransform = null;
+            textEl.innerTransformable = null;
             this._detachComponent(textEl);
             this._textContent = null;
             this._innerTextDefaultStyle = null;
@@ -1402,6 +1395,10 @@ class Element<Props extends ElementProps = ElementProps> {
      * Not recursively because it will be invoked when element added to storage.
      */
     addSelfToZr(zr: ZRenderType) {
+        if (this.__zr === zr) {
+            return;
+        }
+
         this.__zr = zr;
         // 添加动画
         const animators = this.animators;
@@ -1427,6 +1424,10 @@ class Element<Props extends ElementProps = ElementProps> {
      * Not recursively because it will be invoked when element added to storage.
      */
     removeSelfFromZr(zr: ZRenderType) {
+        if (!this.__zr) {
+            return;
+        }
+
         this.__zr = null;
         // Remove animation
         const animators = this.animators;
@@ -1564,7 +1565,7 @@ class Element<Props extends ElementProps = ElementProps> {
 
     // Overload definitions
     animateFrom(
-        target: Props, cfg: Omit<ElementAnimateConfig, 'setToFinal'>, animationProps?: MapToType<Props, boolean>
+        target: Props, cfg: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>
     ) {
         animateTo(this, target, cfg, animationProps, true);
     }
@@ -1608,9 +1609,7 @@ class Element<Props extends ElementProps = ElementProps> {
      *             verticalAlign: string. optional. use style.textVerticalAlign by default.
      *         }
      */
-    calculateTextPosition: (
-        out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike
-    ) => TextPositionCalculationResult
+    calculateTextPosition: ElementCalculateTextPosition;
 
     protected static initDefaultProps = (function () {
         const elProto = Element.prototype;

src/Storage.ts

@@ -1,6 +1,6 @@
 import * as util from './core/util';
 import env from './core/env';
-import Group from './graphic/Group';
+import Group, { GroupLike } from './graphic/Group';
 import Element from './Element';
 
 // Use timsort because in most case elements are partially sorted
@@ -133,8 +133,8 @@ export default class Storage {
         }
 
         // ZRText and Group and combining morphing Path may use children
-        if ((el as Group).childrenRef) {
-            const children = (el as Group).childrenRef();
+        if ((el as GroupLike).childrenRef) {
+            const children = (el as GroupLike).childrenRef();
 
             for (let i = 0; i < children.length; i++) {
                 const child = children[i];

src/animation/Animator.ts

@@ -145,21 +145,6 @@ function is1DArraySame(arr0: NumberArray, arr1: NumberArray) {
     return true;
 }
 
-function is2DArraySame(arr0: NumberArray[], arr1: NumberArray[]) {
-    const len = arr0.length;
-    if (len !== arr1.length) {
-        return false;
-    }
-    const len2 = arr0[0].length;
-    for (let i = 0; i < len; i++) {
-        for (let j = 0; j < len2; j++) {
-            if (arr0[i][j] !== arr1[i][j]) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
 
 /**
  * Catmull Rom interpolate number
@@ -311,8 +296,10 @@ class Track {
     }
 
     needsAnimate() {
-        // return this.keyframes.length >= 2;
-        return !this._isAllValueEqual && this.keyframes.length >= 2 && this.interpolable;
+        return !this._isAllValueEqual
+             && this.keyframes.length >= 2
+             && this.interpolable
+             && this.maxTime > 0;
     }
 
     getAdditiveTrack() {
@@ -706,10 +693,10 @@ export default class Animator<T> {
 
     private _additiveAnimators: Animator<any>[]
 
-    private _doneList: DoneCallback[]
-    private _onframeList: OnframeCallback<T>[]
+    private _doneCbs: DoneCallback[]
+    private _onframeCbs: OnframeCallback<T>[]
 
-    private _abortedList: AbortCallback[]
+    private _abortedCbs: AbortCallback[]
 
     private _clip: Clip = null
 
@@ -811,7 +798,7 @@ export default class Animator<T> {
         // Clear clip
         this._clip = null;
 
-        const doneList = this._doneList;
+        const doneList = this._doneCbs;
         if (doneList) {
             const len = doneList.length;
             for (let i = 0; i < len; i++) {
@@ -823,7 +810,7 @@ export default class Animator<T> {
         this._setTracksFinished();
 
         const animation = this.animation;
-        const abortedList = this._abortedList;
+        const abortedList = this._abortedCbs;
 
         if (animation) {
             animation.removeClip(this._clip);
@@ -877,7 +864,7 @@ export default class Animator<T> {
         for (let i = 0; i < this._trackKeys.length; i++) {
             const propName = this._trackKeys[i];
             const track = this._tracks[propName];
-            const additiveTrack = this._getAdditiveTrack(propName)
+            const additiveTrack = this._getAdditiveTrack(propName);
             const kfs = track.keyframes;
             track.prepare(additiveTrack);
             if (track.needsAnimate()) {
@@ -920,7 +907,7 @@ export default class Animator<T> {
                         // Because target may be changed.
                         tracks[i].step(self._target, percent);
                     }
-                    const onframeList = self._onframeList;
+                    const onframeList = self._onframeCbs;
                     if (onframeList) {
                         for (let i = 0; i < onframeList.length; i++) {
                             onframeList[i](self._target, percent);
@@ -980,10 +967,10 @@ export default class Animator<T> {
      */
     during(cb: OnframeCallback<T>) {
         if (cb) {
-            if (!this._onframeList) {
-                this._onframeList = [];
+            if (!this._onframeCbs) {
+                this._onframeCbs = [];
             }
-            this._onframeList.push(cb);
+            this._onframeCbs.push(cb);
         }
         return this;
     }
@@ -993,20 +980,20 @@ export default class Animator<T> {
      */
     done(cb: DoneCallback) {
         if (cb) {
-            if (!this._doneList) {
-                this._doneList = [];
+            if (!this._doneCbs) {
+                this._doneCbs = [];
             }
-            this._doneList.push(cb);
+            this._doneCbs.push(cb);
         }
         return this;
     }
 
     aborted(cb: AbortCallback) {
         if (cb) {
-            if (!this._abortedList) {
-                this._abortedList = [];
+            if (!this._abortedCbs) {
+                this._abortedCbs = [];
             }
-            this._abortedList.push(cb);
+            this._abortedCbs.push(cb);
         }
         return this;
     }