zrender - npm Package Compare versions

Comparing version 5.1.1 to 5.2.0

build/progress.js

@@ -56,6 +56,11 @@ /*
         buildEnd() {
-            process.stdout.clearLine();
-            process.stdout.cursorTo(0);
+            if (process.stdout.isTTY) {
+                process.stdout.clearLine();
+                process.stdout.cursorTo(0);
+            }
+            else {
+                console.log('');
+            }
         }
     };
 };

index.d.ts

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

index.js

@@ -8,2 +8,2 @@ export * from './lib/zrender';
 registerPainter('canvas', CanvasPainter);
-registerPainter('svg', SVGPainter);
+registerPainter('svg', SVGPainter);

lib/animation/Animator.d.ts

@@ -66,5 +66,5 @@ import Clip from './Clip';
     private _additiveAnimators;
-    private _doneList;
-    private _onframeList;
-    private _abortedList;
+    private _doneCbs;
+    private _onframeCbs;
+    private _abortedCbs;
     private _clip;
@@ -71,0 +71,0 @@ constructor(target: T, loop: boolean, additiveTo?: Animator<any>[]);

lib/animation/Animator.js

@@ -96,17 +96,2 @@ import Clip from './Clip';
 }
-function is2DArraySame(arr0, arr1) {
-    var len = arr0.length;
-    if (len !== arr1.length) {
-        return false;
-    }
-    var len2 = arr0[0].length;
-    for (var i = 0; i < len; i++) {
-        for (var j = 0; j < len2; j++) {
-            if (arr0[i][j] !== arr1[i][j]) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
 function catmullRomInterpolate(p0, p1, p2, p3, t, t2, t3) {
@@ -183,3 +168,6 @@ var v0 = (p2 - p0) * 0.5;
     Track.prototype.needsAnimate = function () {
-        return !this._isAllValueEqual && this.keyframes.length >= 2 && this.interpolable;
+        return !this._isAllValueEqual
+            && this.keyframes.length >= 2
+            && this.interpolable
+            && this.maxTime > 0;
     };
@@ -290,4 +278,4 @@ Track.prototype.getAdditiveTrack = function () {
                     if (this.isValueColor) {
-                        kfs[i].additiveValue
-                            = add1DArray([], kfs[i].value, startValue, -1);
+                        kfs[i].additiveValue =
+                            add1DArray([], kfs[i].value, startValue, -1);
                     }
@@ -518,3 +506,3 @@ else {
         this._clip = null;
-        var doneList = this._doneList;
+        var doneList = this._doneCbs;
         if (doneList) {
@@ -530,3 +518,3 @@ var len = doneList.length;
         var animation = this.animation;
-        var abortedList = this._abortedList;
+        var abortedList = this._abortedCbs;
         if (animation) {
@@ -608,3 +596,3 @@ animation.removeClip(this._clip);
                     }
-                    var onframeList = self._onframeList;
+                    var onframeList = self._onframeCbs;
                     if (onframeList) {
@@ -649,6 +637,6 @@ for (var i = 0; i < onframeList.length; i++) {
         if (cb) {
-            if (!this._onframeList) {
-                this._onframeList = [];
+            if (!this._onframeCbs) {
+                this._onframeCbs = [];
             }
-            this._onframeList.push(cb);
+            this._onframeCbs.push(cb);
         }
@@ -659,6 +647,6 @@ return this;
         if (cb) {
-            if (!this._doneList) {
-                this._doneList = [];
+            if (!this._doneCbs) {
+                this._doneCbs = [];
             }
-            this._doneList.push(cb);
+            this._doneCbs.push(cb);
         }
@@ -669,6 +657,6 @@ return this;
         if (cb) {
-            if (!this._abortedList) {
-                this._abortedList = [];
+            if (!this._abortedCbs) {
+                this._abortedCbs = [];
             }
-            this._abortedList.push(cb);
+            this._abortedCbs.push(cb);
         }
@@ -675,0 +663,0 @@ return this;

lib/canvas/graphic.js

@@ -18,2 +18,5 @@ import { DEFAULT_COMMON_STYLE } from '../graphic/Displayable';
 }
+function isValidStrokeFillStyle(strokeOrFill) {
+    return typeof strokeOrFill === 'string' && strokeOrFill !== 'none';
+}
 function styleHasFill(style) {
@@ -336,3 +339,3 @@ var fill = style.fill;
         }
-        ctx.fillStyle = style.fill;
+        isValidStrokeFillStyle(style.fill) && (ctx.fillStyle = style.fill);
     }
@@ -344,3 +347,3 @@ if (forceSetAll || style.stroke !== prevStyle.stroke) {
         }
-        ctx.strokeStyle = style.stroke;
+        isValidStrokeFillStyle(style.stroke) && (ctx.strokeStyle = style.stroke);
     }
@@ -347,0 +350,0 @@ if (forceSetAll || style.opacity !== prevStyle.opacity) {

lib/core/Eventful.d.ts

@@ -1,7 +0,7 @@
-export declare type EventCallback<Ctx, Impl, EvtParam = unknown> = (this: CbThis<Ctx, Impl>, eventParam: EvtParam, ...args: unknown[]) => boolean | void;
+import { Dictionary, WithThisType } from './types';
+export declare type EventCallbackSingleParam<EvtParam = any> = EvtParam extends any ? (params: EvtParam) => boolean | void : never;
+export declare type EventCallback<EvtParams = any[]> = EvtParams extends any[] ? (...args: EvtParams) => boolean | void : never;
 export declare type EventQuery = string | Object;
 declare type CbThis<Ctx, Impl> = unknown extends Ctx ? Impl : Ctx;
-declare type DefaultEventDefinition = {
-    [eventName: string]: unknown;
-};
+declare type DefaultEventDefinition = Dictionary<EventCallback<any[]>>;
 export interface EventProcessor<EvtDef = DefaultEventDefinition> {
@@ -12,13 +12,13 @@ normalizeQuery?: (query: EventQuery) => EventQuery;
 }
-export default class Eventful<EvtDef = DefaultEventDefinition> {
+export default class Eventful<EvtDef extends DefaultEventDefinition = DefaultEventDefinition> {
     private _$handlers;
     protected _$eventProcessor: EventProcessor<EvtDef>;
     constructor(eventProcessors?: EventProcessor<EvtDef>);
-    on<Ctx, EvtNm extends keyof EvtDef>(event: EvtNm, handler: EventCallback<Ctx, this, EvtDef[EvtNm]>, context?: Ctx): this;
-    on<Ctx, EvtNm extends keyof EvtDef>(event: EvtNm, query: EventQuery, handler: EventCallback<Ctx, this, EvtDef[EvtNm]>, context?: Ctx): this;
+    on<Ctx, EvtNm extends keyof EvtDef>(event: EvtNm, handler: WithThisType<EvtDef[EvtNm], CbThis<Ctx, this>>, context?: Ctx): this;
+    on<Ctx, EvtNm extends keyof EvtDef>(event: EvtNm, query: EventQuery, handler: WithThisType<EvtDef[EvtNm], CbThis<Ctx, this>>, context?: Ctx): this;
     isSilent(eventName: keyof EvtDef): boolean;
     off(eventType?: keyof EvtDef, handler?: Function): this;
-    trigger(eventType: keyof EvtDef, eventParam?: EvtDef[keyof EvtDef], ...args: any[]): this;
-    triggerWithContext(type: keyof EvtDef): this;
+    trigger<EvtNm extends keyof EvtDef>(eventType: EvtNm, ...args: Parameters<EvtDef[EvtNm]>): this;
+    triggerWithContext(type: keyof EvtDef, ...args: any[]): this;
 }
 export {};

lib/core/Eventful.js

@@ -119,2 +119,6 @@ var Eventful = (function () {
     Eventful.prototype.triggerWithContext = function (type) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
         if (!this._$handlers) {
@@ -126,3 +130,2 @@ return this;
         if (_h) {
-            var args = arguments;
             var argLen = args.length;
@@ -129,0 +132,0 @@ var ctx = args[argLen - 1];

lib/core/matrix.d.ts

@@ -10,3 +10,3 @@ import { VectorArray } from './vector';
 export declare function scale(out: MatrixArray, a: MatrixArray, v: VectorArray): MatrixArray;
-export declare function invert(out: MatrixArray, a: MatrixArray): MatrixArray;
+export declare function invert(out: MatrixArray, a: MatrixArray): MatrixArray | null;
 export declare function clone(a: MatrixArray): MatrixArray;

lib/core/PathProxy.d.ts

@@ -72,2 +72,3 @@ import BoundingRect from './BoundingRect';
     rebuildPath(ctx: PathRebuilder, percent: number): void;
+    clone(): PathProxy;
     private static initDefaultProps;
@@ -74,0 +75,0 @@ }

lib/core/PathProxy.js

@@ -149,2 +149,3 @@ import * as vec2 from './vector';
     PathProxy.prototype.bezierCurveTo = function (x1, y1, x2, y2, x3, y3) {
+        this._drawPendingPt();
         this.addData(CMD.C, x1, y1, x2, y2, x3, y3);
@@ -160,2 +161,3 @@ if (this._ctx) {
     PathProxy.prototype.quadraticCurveTo = function (x1, y1, x2, y2) {
+        this._drawPendingPt();
         this.addData(CMD.Q, x1, y1, x2, y2);
@@ -171,2 +173,3 @@ if (this._ctx) {
     PathProxy.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        this._drawPendingPt();
         tmpAngles[0] = startAngle;
@@ -185,2 +188,3 @@ tmpAngles[1] = endAngle;
     PathProxy.prototype.arcTo = function (x1, y1, x2, y2, radius) {
+        this._drawPendingPt();
         if (this._ctx) {
@@ -192,2 +196,3 @@ this._ctx.arcTo(x1, y1, x2, y2, radius);
     PathProxy.prototype.rect = function (x, y, w, h) {
+        this._drawPendingPt();
         this._ctx && this._ctx.rect(x, y, w, h);
@@ -636,8 +641,8 @@ this.addData(CMD.R, x, y, w, h);
             }
+            if (cmd !== CMD.L && pendingPtDist > 0) {
+                ctx.lineTo(pendingPtX, pendingPtY);
+                pendingPtDist = 0;
+            }
             switch (cmd) {
                 case CMD.M:
-                    if (pendingPtDist > 0) {
-                        ctx.lineTo(pendingPtX, pendingPtY);
-                        pendingPtDist = 0;
-                    }
                     x0 = xi = d[i++];
@@ -731,4 +736,2 @@ y0 = yi = d[i++];
                     var r = (rx > ry) ? rx : ry;
-                    var scaleX = (rx > ry) ? 1 : rx / ry;
-                    var scaleY = (rx > ry) ? ry / rx : 1;
                     var isEllipse = mathAbs(rx - ry) > 1e-3;
@@ -793,6 +796,2 @@ var endAngle = startAngle + delta;
                 case CMD.Z:
-                    if (pendingPtDist > 0) {
-                        ctx.lineTo(pendingPtX, pendingPtY);
-                        pendingPtDist = 0;
-                    }
                     if (drawPart) {
@@ -813,2 +812,10 @@ var l = pathSegLen[segCount++];
     };
+    PathProxy.prototype.clone = function () {
+        var newProxy = new PathProxy();
+        var data = this.data;
+        newProxy.data = data.slice ? data.slice()
+            : Array.prototype.slice.call(data);
+        newProxy._len = this._len;
+        return newProxy;
+    };
     PathProxy.CMD = CMD;
@@ -815,0 +822,0 @@ PathProxy.initDefaultProps = (function () {

lib/core/Point.d.ts

@@ -1,2 +0,2 @@
-import { MatrixArray } from "./matrix";
+import { MatrixArray } from './matrix';
 export interface PointLike {
@@ -3,0 +3,0 @@ x: number;

lib/core/Transformable.d.ts

@@ -17,2 +17,3 @@ import * as matrix from './matrix';
     invTransform: matrix.MatrixArray;
+    getLocalTransform(m?: matrix.MatrixArray): matrix.MatrixArray;
     setPosition(arr: number[]): void;
@@ -25,3 +26,2 @@ setScale(arr: number[]): void;
     private _resolveGlobalScaleRatio;
-    getLocalTransform(m?: matrix.MatrixArray): matrix.MatrixArray;
     getComputedTransform(): matrix.MatrixArray;
@@ -34,5 +34,7 @@ setLocalTransform(m: vector.VectorArray): void;
     getLineScale(): number;
+    copyTransform(source: Transformable): void;
     static getLocalTransform(target: Transformable, m?: matrix.MatrixArray): matrix.MatrixArray;
     private static initDefaultProps;
 }
+export declare const TRANSFORMABLE_PROPS: readonly ["x", "y", "originX", "originY", "rotation", "scaleX", "scaleY", "skewX", "skewY"];
 export default Transformable;

lib/core/Transformable.js

@@ -15,2 +15,5 @@ import * as matrix from './matrix';
     }
+    Transformable.prototype.getLocalTransform = function (m) {
+        return Transformable.getLocalTransform(this, m);
+    };
     Transformable.prototype.setPosition = function (arr) {
@@ -40,7 +43,6 @@ this.x = arr[0];
     Transformable.prototype.updateTransform = function () {
-        var parent = this.parent;
-        var parentHasTransform = parent && parent.transform;
+        var parentTransform = this.parent && this.parent.transform;
         var needLocalTransform = this.needLocalTransform();
         var m = this.transform;
-        if (!(needLocalTransform || parentHasTransform)) {
+        if (!(needLocalTransform || parentTransform)) {
             m && mIdentity(m);
@@ -56,8 +58,8 @@ return;
         }
-        if (parentHasTransform) {
+        if (parentTransform) {
             if (needLocalTransform) {
-                matrix.mul(m, parent.transform, m);
+                matrix.mul(m, parentTransform, m);
             }
             else {
-                matrix.copy(m, parent.transform);
+                matrix.copy(m, parentTransform);
             }
@@ -84,5 +86,2 @@ }
     };
-    Transformable.prototype.getLocalTransform = function (m) {
-        return Transformable.getLocalTransform(this, m);
-    };
     Transformable.prototype.getComputedTransform = function () {
@@ -182,2 +181,9 @@ var transformNode = this;
     };
+    Transformable.prototype.copyTransform = function (source) {
+        var target = this;
+        for (var i = 0; i < TRANSFORMABLE_PROPS.length; i++) {
+            var propName = TRANSFORMABLE_PROPS[i];
+            target[propName] = source[propName];
+        }
+    };
     Transformable.getLocalTransform = function (target, m) {
@@ -226,2 +232,5 @@ m = m || [];
 ;
+export var TRANSFORMABLE_PROPS = [
+    'x', 'y', 'originX', 'originY', 'rotation', 'scaleX', 'scaleY', 'skewX', 'skewY'
+];
 export default Transformable;

lib/core/types.d.ts

@@ -36,3 +36,3 @@ export declare type Dictionary<T> = {
 };
-export declare type ElementEventName = 'click' | 'dblclick' | 'mousewheel' | 'mouseout' | 'mouseover' | 'mouseup' | 'mousedown' | 'mousemove' | 'contextmenu' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop';
+export declare type ElementEventName = 'click' | 'dblclick' | 'mousewheel' | 'mouseout' | 'mouseover' | 'mouseup' | 'mousedown' | 'mousemove' | 'contextmenu' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop' | 'globalout';
 export declare type ElementEventNameWithOn = 'onclick' | 'ondblclick' | 'onmousewheel' | 'onmouseout' | 'onmouseup' | 'onmousedown' | 'onmousemove' | 'oncontextmenu' | 'ondrag' | 'ondragstart' | 'ondragend' | 'ondragenter' | 'ondragleave' | 'ondragover' | 'ondrop';
@@ -51,2 +51,3 @@ export declare type RenderedEvent = {
 export declare type KeyOfDistributive<T> = T extends unknown ? keyof T : never;
+export declare type WithThisType<Func extends (...args: any) => any, This> = (this: This, ...args: Parameters<Func>) => ReturnType<Func>;
 export {};

lib/core/WeakMap.js

 var wmUniqueIndex = Math.round(Math.random() * 9);
+var supportDefineProperty = typeof Object.defineProperty === 'function';
 var WeakMap = (function () {
@@ -11,3 +12,3 @@ function WeakMap() {
         var target = this._guard(key);
-        if (typeof Object.defineProperty === 'function') {
+        if (supportDefineProperty) {
             Object.defineProperty(target, this._id, {
@@ -14,0 +15,0 @@ value: value,

lib/Element.d.ts

@@ -8,3 +8,3 @@ import Transformable from './core/Transformable';
 import BoundingRect, { RectLike } from './core/BoundingRect';
-import Eventful, { EventQuery, EventCallback } from './core/Eventful';
+import Eventful from './core/Eventful';
 import ZRText from './graphic/Text';
@@ -112,7 +112,8 @@ import { TextPositionCalculationResult } from './contain/text';
 };
-interface Element<Props extends ElementProps = ElementProps> extends Transformable, Eventful, ElementEventHandlerProps {
-    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;
+export declare type ElementCalculateTextPosition = (out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike) => TextPositionCalculationResult;
+interface Element<Props extends ElementProps = ElementProps> extends Transformable, Eventful<{
+    [key in ElementEventName]: (e: ElementEvent) => void | boolean;
+} & {
+    [key in string]: (...args: any) => void | boolean;
+}>, ElementEventHandlerProps {
 }
@@ -206,9 +207,9 @@ declare class Element<Props extends ElementProps = ElementProps> {
     animateTo(target: Props, cfg?: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>): void;
-    animateFrom(target: Props, cfg: Omit<ElementAnimateConfig, 'setToFinal'>, animationProps?: MapToType<Props, boolean>): void;
+    animateFrom(target: Props, cfg: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>): void;
     protected _transitionState(stateName: string, target: Props, cfg?: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>): void;
     getBoundingRect(): BoundingRect;
     getPaintRect(): BoundingRect;
-    calculateTextPosition: (out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike) => TextPositionCalculationResult;
+    calculateTextPosition: ElementCalculateTextPosition;
     protected static initDefaultProps: void;
 }
 export default Element;

lib/Element.js

@@ -70,20 +70,9 @@ import Transformable from './core/Transformable';
             var isLocal = textConfig.local;
-            var attachedTransform = textEl.attachedTransform;
+            var innerTransformable = textEl.innerTransformable;
             var textAlign = void 0;
             var textVerticalAlign = void 0;
             var textStyleChanged = false;
-            if (isLocal) {
-                attachedTransform.parent = this;
-            }
-            else {
-                attachedTransform.parent = null;
-            }
+            innerTransformable.parent = isLocal ? this : null;
             var innerOrigin = false;
-            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);
             if (textConfig.position != null) {
@@ -106,4 +95,4 @@ var layoutRect = tmpBoundingRect;
                 }
-                attachedTransform.x = tmpTextPosCalcRes.x;
-                attachedTransform.y = tmpTextPosCalcRes.y;
+                innerTransformable.x = tmpTextPosCalcRes.x;
+                innerTransformable.y = tmpTextPosCalcRes.y;
                 textAlign = tmpTextPosCalcRes.align;
@@ -124,16 +113,16 @@ textVerticalAlign = tmpTextPosCalcRes.verticalAlign;
                     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;
             }
             var textOffset = textConfig.offset;
             if (textOffset) {
-                attachedTransform.x += textOffset[0];
-                attachedTransform.y += textOffset[1];
+                innerTransformable.x += textOffset[0];
+                innerTransformable.y += textOffset[1];
                 if (!innerOrigin) {
-                    attachedTransform.originX = -textOffset[0];
-                    attachedTransform.originY = -textOffset[1];
+                    innerTransformable.originX = -textOffset[0];
+                    innerTransformable.originY = -textOffset[1];
                 }
@@ -585,3 +574,3 @@ }
         }
-        textEl.attachedTransform = new Transformable();
+        textEl.innerTransformable = new Transformable();
         this._attachComponent(textEl);
@@ -605,3 +594,3 @@ this._textContent = textEl;
         if (textEl) {
-            textEl.attachedTransform = null;
+            textEl.innerTransformable = null;
             this._detachComponent(textEl);
@@ -662,2 +651,5 @@ this._textContent = null;
     Element.prototype.addSelfToZr = function (zr) {
+        if (this.__zr === zr) {
+            return;
+        }
         this.__zr = zr;
@@ -681,2 +673,5 @@ var animators = this.animators;
     Element.prototype.removeSelfFromZr = function (zr) {
+        if (!this.__zr) {
+            return;
+        }
         this.__zr = null;
@@ -683,0 +678,0 @@ var animators = this.animators;

lib/export.d.ts

@@ -7,3 +7,3 @@ import * as zrUtil from './core/util';
 import { parseSVG } from './tool/parseSVG';
-import { morphPath } from './tool/morphPath';
+import * as morphPathTool from './tool/morphPath';
 export { default as Point, PointLike } from './core/Point';
@@ -44,4 +44,4 @@ export { default as Element, ElementAnimateConfig, ElementTextConfig, ElementTextGuideLineConfig, ElementEvent, ElementEventCallback, ElementProps } from './Element';
 export { zrUtil as util };
+export { morphPathTool as morph };
 export { parseSVG };
-export { morphPath };
 export { default as showDebugDirtyRect } from './debug/showDebugDirtyRect';

lib/export.js

@@ -7,3 +7,3 @@ import * as zrUtil from './core/util';
 import { parseSVG } from './tool/parseSVG';
-import { morphPath } from './tool/morphPath';
+import * as morphPathTool from './tool/morphPath';
 export { default as Point } from './core/Point';
@@ -44,4 +44,4 @@ export { default as Element } from './Element';
 export { zrUtil as util };
+export { morphPathTool as morph };
 export { parseSVG };
-export { morphPath };
 export { default as showDebugDirtyRect } from './debug/showDebugDirtyRect';

lib/graphic/Group.d.ts

@@ -17,2 +17,3 @@ import Element, { ElementProps } from '../Element';
     addBefore(child: Element, nextSibling: Element): this;
+    replace(oldChild: Element, newChild: Element): this;
     replaceAt(child: Element, index: number): this;
@@ -28,2 +29,5 @@ _doAdd(child: Element): void;
 }
+export interface GroupLike extends Element {
+    childrenRef(): Element[];
+}
 export default Group;

lib/graphic/Group.js

@@ -58,2 +58,9 @@ import { __extends } from "tslib";
     };
+    Group.prototype.replace = function (oldChild, newChild) {
+        var idx = zrUtil.indexOf(this._children, oldChild);
+        if (idx >= 0) {
+            this.replaceAt(newChild, idx);
+        }
+        return this;
+    };
     Group.prototype.replaceAt = function (child, index) {
@@ -60,0 +67,0 @@ var children = this._children;

lib/graphic/Path.d.ts

@@ -36,3 +36,3 @@ import Displayable, { DisplayableProps, CommonStyleProps, DisplayableStatePropNames } from './Displayable';
     __value?: (string | number)[] | (string | number);
-    buildPath?: (ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBundle?: boolean) => void;
+    buildPath?: (ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBatch?: boolean) => void;
 }
@@ -74,4 +74,5 @@ declare type PathKey = keyof PathProps;
     protected getInsideTextStroke(textFill?: string): string;
-    buildPath(ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBundle?: boolean): void;
+    buildPath(ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBatch?: boolean): void;
     pathUpdated(): void;
+    getUpdatedPathProxy(inBatch?: boolean): PathProxy;
     createPathProxy(): void;
@@ -104,3 +105,3 @@ hasStroke(): boolean;
         calculateTextPosition?: Element['calculateTextPosition'];
-        buildPath(this: Path, ctx: CanvasRenderingContext2D | PathProxy, shape: Shape, inBundle?: boolean): void;
+        buildPath(this: Path, ctx: CanvasRenderingContext2D | PathProxy, shape: Shape, inBatch?: boolean): void;
         init?(this: Path, opts: PathProps): void;
@@ -107,0 +108,0 @@ }): {

lib/graphic/Path.js

@@ -145,6 +145,12 @@ import { __extends } from "tslib";
     };
-    Path.prototype.buildPath = function (ctx, shapeCfg, inBundle) { };
+    Path.prototype.buildPath = function (ctx, shapeCfg, inBatch) { };
     Path.prototype.pathUpdated = function () {
         this.__dirty &= ~SHAPE_CHANGED_BIT;
     };
+    Path.prototype.getUpdatedPathProxy = function (inBatch) {
+        !this.path && this.createPathProxy();
+        this.path.beginPath();
+        this.buildPath(this.path, this.shape, inBatch);
+        return this.path;
+    };
     Path.prototype.createPathProxy = function () {
@@ -151,0 +157,0 @@ this.path = new PathProxy(false);

lib/graphic/Text.d.ts

@@ -12,2 +12,3 @@ import { TextAlign, TextVerticalAlign, ImageLike, Dictionary, MapToType } from '../core/types';
 import { ElementCommonState } from '../Element';
+import { GroupLike } from './Group';
 export interface TextStylePropsPart {
@@ -87,7 +88,7 @@ text?: string;
 }
-declare class ZRText extends Displayable<TextProps> {
+declare class ZRText extends Displayable<TextProps> implements GroupLike {
     type: string;
     style: TextStyleProps;
     overlap: 'hidden' | 'show' | 'blur';
-    attachedTransform: Transformable;
+    innerTransformable: Transformable;
     private _children;
@@ -97,4 +98,6 @@ private _childCursor;
     constructor(opts?: TextProps);
-    childrenRef(): (ZRImage | TSpan | Rect)[];
+    childrenRef(): (ZRImage | Rect | TSpan)[];
     update(): void;
+    updateTransform(): void;
+    getLocalTransform(m?: MatrixArray): MatrixArray;
     getComputedTransform(): MatrixArray;
@@ -101,0 +104,0 @@ private _updateSubTexts;

lib/graphic/Text.js

@@ -9,3 +9,2 @@ import { __extends } from "tslib";
 import BoundingRect from '../core/BoundingRect';
-import { copy } from '../core/matrix';
 import Displayable, { DEFAULT_COMMON_ANIMATION_PROPS } from './Displayable';
@@ -52,2 +51,3 @@ var DEFAULT_RICH_TEXT_COLOR = {
     ZRText.prototype.update = function () {
+        _super.prototype.update.call(this);
         if (this.styleChanged()) {
@@ -65,18 +65,21 @@ this._updateSubTexts();
         }
-        var attachedTransform = this.attachedTransform;
-        if (attachedTransform) {
-            attachedTransform.updateTransform();
-            var m = attachedTransform.transform;
-            if (m) {
-                this.transform = this.transform || [];
-                copy(this.transform, m);
+    };
+    ZRText.prototype.updateTransform = function () {
+        var innerTransformable = this.innerTransformable;
+        if (innerTransformable) {
+            innerTransformable.updateTransform();
+            if (innerTransformable.transform) {
+                this.transform = innerTransformable.transform;
             }
-            else {
-                this.transform = null;
-            }
         }
         else {
-            _super.prototype.update.call(this);
+            _super.prototype.updateTransform.call(this);
         }
     };
+    ZRText.prototype.getLocalTransform = function (m) {
+        var innerTransformable = this.innerTransformable;
+        return innerTransformable
+            ? innerTransformable.getLocalTransform(m)
+            : _super.prototype.getLocalTransform.call(this, m);
+    };
     ZRText.prototype.getComputedTransform = function () {
@@ -87,4 +90,3 @@ if (this.__hostTarget) {
         }
-        return this.attachedTransform ? this.attachedTransform.getComputedTransform()
-            : _super.prototype.getComputedTransform.call(this);
+        return _super.prototype.getComputedTransform.call(this);
     };
@@ -358,3 +360,3 @@ ZRText.prototype._updateSubTexts = function () {
         var defaultLineWidth = 0;
-        var textFill = getStroke('fill' in tokenStyle ? tokenStyle.fill
+        var textFill = getFill('fill' in tokenStyle ? tokenStyle.fill
             : 'fill' in style ? style.fill
@@ -406,3 +408,3 @@ : (useDefaultFill = true, defaultStyle.fill));
         var imgEl;
-        if (isPlainOrGradientBg || (textBorderWidth && textBorderColor)) {
+        if (isPlainOrGradientBg || style.lineHeight || (textBorderWidth && textBorderColor)) {
             rectEl = this._getOrCreateChild(Rect);
@@ -533,4 +535,5 @@ rectEl.useStyle(rectEl.createStyle());
     return !!(style.backgroundColor
+        || style.lineHeight
         || (style.borderWidth && style.borderColor));
 }
 export default ZRText;

lib/svg/core.d.ts

 export declare function createElement(name: string): SVGElement;
+export declare function normalizeColor(color: string): {
+    color: string;
+    opacity: number;
+};

lib/svg/core.js

@@ -0,3 +1,21 @@
+import { parse } from '../tool/color';
 export function createElement(name) {
     return document.createElementNS('http://www.w3.org/2000/svg', name);
 }
+export function normalizeColor(color) {
+    var opacity;
+    if (!color || color === 'transparent') {
+        color = 'none';
+    }
+    else if (typeof color === 'string' && color.indexOf('rgba') > -1) {
+        var arr = parse(color);
+        if (arr) {
+            color = 'rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ')';
+            opacity = arr[3];
+        }
+    }
+    return {
+        color: color,
+        opacity: opacity == null ? 1 : opacity
+    };
+}

lib/svg/graphic.js

@@ -1,2 +0,2 @@
-import { createElement } from './core';
+import { createElement, normalizeColor } from './core';
 import ZRImage from '../graphic/Image';
@@ -61,6 +61,7 @@ import { DEFAULT_FONT, getLineHeight } from '../contain/text';
     if (pathHasFill(style)) {
-        var fill = style.fill;
-        fill = fill === 'transparent' ? NONE : fill;
-        attr(svgEl, 'fill', fill);
-        attr(svgEl, 'fill-opacity', (style.fillOpacity != null ? style.fillOpacity * opacity : opacity) + '');
+        var fill = normalizeColor(style.fill);
+        attr(svgEl, 'fill', fill.color);
+        attr(svgEl, 'fill-opacity', (style.fillOpacity != null
+            ? style.fillOpacity * fill.opacity * opacity
+            : fill.opacity * opacity) + '');
     }
@@ -71,5 +72,4 @@ else {
     if (pathHasStroke(style)) {
-        var stroke = style.stroke;
-        stroke = stroke === 'transparent' ? NONE : stroke;
-        attr(svgEl, 'stroke', stroke);
+        var stroke = normalizeColor(style.stroke);
+        attr(svgEl, 'stroke', stroke.color);
         var strokeWidth = style.lineWidth;
@@ -81,3 +81,5 @@ var strokeScale_1 = style.strokeNoScale
         attr(svgEl, 'paint-order', style.strokeFirst ? 'stroke' : 'fill');
-        attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
+        attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null
+            ? style.strokeOpacity * stroke.opacity * opacity
+            : stroke.opacity * opacity) + '');
         var lineDash = style.lineDash && strokeWidth > 0 && normalizeLineDash(style.lineDash, strokeWidth);
@@ -176,2 +178,3 @@ if (lineDash) {
         this._add('L', x, y);
+        this._add('Z');
     };
@@ -178,0 +181,0 @@ SVGPathRebuilder.prototype.closePath = function () {

lib/svg/helper/ClippathManager.js

@@ -29,4 +29,7 @@ import { __extends } from "tslib";
         _super.prototype.markAllUnused.call(this);
-        for (var key in this._refGroups) {
-            this.markDomUnused(this._refGroups[key]);
+        var refGroups = this._refGroups;
+        for (var key in refGroups) {
+            if (refGroups.hasOwnProperty(key)) {
+                this.markDomUnused(refGroups[key]);
+            }
         }
@@ -111,10 +114,13 @@ this._keyDuplicateCount = {};
         var newRefGroupsMap = {};
-        for (var key in this._refGroups) {
-            var group = this._refGroups[key];
-            if (!this.isDomUnused(group)) {
-                newRefGroupsMap[key] = group;
+        var refGroups = this._refGroups;
+        for (var key in refGroups) {
+            if (refGroups.hasOwnProperty(key)) {
+                var group = refGroups[key];
+                if (!this.isDomUnused(group)) {
+                    newRefGroupsMap[key] = group;
+                }
+                else if (group.parentNode) {
+                    group.parentNode.removeChild(group);
+                }
             }
-            else if (group.parentNode) {
-                group.parentNode.removeChild(group);
-            }
         }
@@ -121,0 +127,0 @@ this._refGroups = newRefGroupsMap;

lib/svg/helper/ShadowManager.js

 import { __extends } from "tslib";
 import Definable from './Definable';
+import { normalizeColor } from '../core';
 var ShadowManager = (function (_super) {
@@ -55,6 +56,7 @@ __extends(ShadowManager, _super);
         var blur = style.shadowBlur;
-        var color = style.shadowColor;
+        var normalizedColor = normalizeColor(style.shadowColor);
         domChild.setAttribute('dx', offsetX / scaleX + '');
         domChild.setAttribute('dy', offsetY / scaleY + '');
-        domChild.setAttribute('flood-color', color);
+        domChild.setAttribute('flood-color', normalizedColor.color);
+        domChild.setAttribute('flood-opacity', normalizedColor.opacity + '');
         var stdDx = blur / 2 / scaleX;
@@ -78,5 +80,7 @@ var stdDy = blur / 2 / scaleY;
         var shadowDomsPool = this._shadowDomPool;
-        for (var key in this._shadowDomMap) {
-            var dom = this._shadowDomMap[key];
-            shadowDomsPool.push(dom);
+        var shadowDomMap = this._shadowDomMap;
+        for (var key in shadowDomMap) {
+            if (shadowDomMap.hasOwnProperty(key)) {
+                shadowDomsPool.push(shadowDomMap[key]);
+            }
         }
@@ -83,0 +87,0 @@ this._shadowDomMap = {};

lib/svg/Painter.js

@@ -1,2 +0,2 @@
-import { createElement } from './core';
+import { createElement, normalizeColor } from './core';
 import * as util from '../core/util';
@@ -128,3 +128,5 @@ import Path from '../graphic/Path';
         bgNode.setAttribute('id', 0);
-        bgNode.style.fill = backgroundColor;
+        var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
+        bgNode.setAttribute('fill', color);
+        bgNode.setAttribute('fill-opacity', opacity);
         this._backgroundRoot.appendChild(bgNode);
@@ -279,9 +281,7 @@ this._backgroundNode = bgNode;
         this.root.innerHTML = '';
-        this._svgRoot
-            = this._backgroundRoot
-                = this._svgDom
-                    = this._backgroundNode
-                        = this._viewport
-                            = this.storage
-                                = null;
+        this._svgRoot =
+            this._backgroundRoot =
+                this._svgDom =
+                    this._backgroundNode =
+                        this._viewport = this.storage = null;
     };
@@ -288,0 +288,0 @@ SVGPainter.prototype.clear = function () {

lib/tool/morphPath.d.ts

@@ -1,28 +0,41 @@
-import PathProxy from '../core/PathProxy';
 import Path from '../graphic/Path';
 import Element, { ElementAnimateConfig } from '../Element';
-interface CombiningPath extends Path {
-    __combiningSubList: Path[];
-    __oldAddSelfToZr: Element['addSelfToZr'];
-    __oldRemoveSelfFromZr: Element['removeSelfFromZr'];
-    __oldBuildPath: Path['buildPath'];
-    childrenRef(): Path[];
+import { split } from './dividePath';
+export declare function alignBezierCurves(array1: number[][], array2: number[][]): number[][][];
+export interface CombineMorphingPath extends Path {
+    childrenRef(): (CombineMorphingPath | Path)[];
+    __isCombineMorphing: boolean;
 }
-export declare type MorphDividingMethod = 'split' | 'duplicate';
-export interface CombineSeparateConfig extends ElementAnimateConfig {
-    dividingMethod?: MorphDividingMethod;
+export declare function centroid(array: number[]): number[];
+export declare function isCombineMorphing(path: Element): path is CombineMorphingPath;
+export declare function isMorphing(el: Element): boolean;
+export declare function morphPath(fromPath: Path, toPath: Path, animationOpts: ElementAnimateConfig): Path;
+export interface DividePathParams {
+    path: Path;
+    count: number;
 }
-export interface CombineSeparateResult {
-    fromIndividuals: Path[];
-    toIndividuals: Path[];
+export interface DividePath {
+    (params: DividePathParams): Path[];
+}
+export interface IndividualDelay {
+    (index: number, count: number, fromPath: Path, toPath: Path): number;
+}
+export interface CombineConfig extends ElementAnimateConfig {
+    dividePath?: DividePath;
+    individualDelay?: IndividualDelay;
+}
+export declare function combineMorph(fromList: (CombineMorphingPath | Path)[], toPath: Path, animationOpts: CombineConfig): {
+    fromIndividuals: Path<import("../graphic/Path").PathProps>[];
+    toIndividuals: Path<import("../graphic/Path").PathProps>[];
     count: number;
+};
+export interface SeparateConfig extends ElementAnimateConfig {
+    dividePath?: DividePath;
+    individualDelay?: IndividualDelay;
 }
-export declare function pathToBezierCurves(path: PathProxy): number[][];
-export declare function alignBezierCurves(array1: number[][], array2: number[][]): number[][][];
-export declare function centroid(array: number[]): number[];
-export declare function morphPath(fromPath: Path, toPath: Path, animationOpts: ElementAnimateConfig): Path;
-export declare function isCombiningPath(path: Path): path is CombiningPath;
-export declare function isInAnyMorphing(path: Path): boolean;
-export declare function combine(fromPathList: Path[], toPath: Path, animationOpts: CombineSeparateConfig, copyPropsIfDivided?: (srcPath: Path, tarPath: Path, needClone: boolean) => void): CombineSeparateResult;
-export declare function separate(fromPath: Path, toPathList: Path[], animationOpts: CombineSeparateConfig, copyPropsIfDivided?: (srcPath: Path, tarPath: Path, needClone: boolean) => void): CombineSeparateResult;
-export {};
+export declare function separateMorph(fromPath: Path, toPathList: Path[], animationOpts: SeparateConfig): {
+    fromIndividuals: Path<import("../graphic/Path").PathProps>[];
+    toIndividuals: Path<import("../graphic/Path").PathProps>[];
+    count: number;
+};
+export { split as defaultDividePath };

lib/tool/morphPath.js

@@ -1,143 +0,9 @@
-import PathProxy from '../core/PathProxy';
 import { cubicSubdivide } from '../core/curve';
-import { defaults, assert, noop, clone } from '../core/util';
+import Path from '../graphic/Path';
+import { defaults, map } from '../core/util';
 import { lerp } from '../core/vector';
-import Rect from '../graphic/shape/Rect';
-import Sector from '../graphic/shape/Sector';
-var CMD = PathProxy.CMD;
-var PI2 = Math.PI * 2;
-var PROP_XY = ['x', 'y'];
-var PROP_WH = ['width', 'height'];
-var tmpArr = [];
-function aroundEqual(a, b) {
-    return Math.abs(a - b) < 1e-5;
-}
-export function pathToBezierCurves(path) {
-    var data = path.data;
-    var len = path.len();
-    var bezierArray = [];
-    var currentSubpath;
-    var xi = 0;
-    var yi = 0;
-    var x0 = 0;
-    var y0 = 0;
-    function createNewSubpath(x, y) {
-        if (currentSubpath && currentSubpath.length > 2) {
-            bezierArray.push(currentSubpath);
-        }
-        currentSubpath = [x, y];
-    }
-    function addLine(x0, y0, x1, y1) {
-        if (!(aroundEqual(x0, x1) && aroundEqual(y0, y1))) {
-            currentSubpath.push(x0, y0, x1, y1, x1, y1);
-        }
-    }
-    function addArc(startAngle, endAngle, cx, cy, rx, ry) {
-        var delta = Math.abs(endAngle - startAngle);
-        var len = Math.tan(delta / 4) * 4 / 3;
-        var dir = endAngle < startAngle ? -1 : 1;
-        var c1 = Math.cos(startAngle);
-        var s1 = Math.sin(startAngle);
-        var c2 = Math.cos(endAngle);
-        var s2 = Math.sin(endAngle);
-        var x1 = c1 * rx + cx;
-        var y1 = s1 * ry + cy;
-        var x4 = c2 * rx + cx;
-        var y4 = s2 * ry + cy;
-        var hx = rx * len * dir;
-        var hy = ry * len * dir;
-        currentSubpath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
-    }
-    var x1;
-    var y1;
-    var x2;
-    var y2;
-    for (var i = 0; i < len;) {
-        var cmd = data[i++];
-        var isFirst = i === 1;
-        if (isFirst) {
-            xi = data[i];
-            yi = data[i + 1];
-            x0 = xi;
-            y0 = yi;
-            if (cmd === CMD.L || cmd === CMD.C || cmd === CMD.Q) {
-                currentSubpath = [x0, y0];
-            }
-        }
-        switch (cmd) {
-            case CMD.M:
-                xi = x0 = data[i++];
-                yi = y0 = data[i++];
-                createNewSubpath(x0, y0);
-                break;
-            case CMD.L:
-                x1 = data[i++];
-                y1 = data[i++];
-                addLine(xi, yi, x1, y1);
-                xi = x1;
-                yi = y1;
-                break;
-            case CMD.C:
-                currentSubpath.push(data[i++], data[i++], data[i++], data[i++], xi = data[i++], yi = data[i++]);
-                break;
-            case CMD.Q:
-                x1 = data[i++];
-                y1 = data[i++];
-                x2 = data[i++];
-                y2 = data[i++];
-                currentSubpath.push(xi + 2 / 3 * (x1 - xi), yi + 2 / 3 * (y1 - yi), x2 + 2 / 3 * (x1 - x2), y2 + 2 / 3 * (y1 - y2), x2, y2);
-                xi = x2;
-                yi = y2;
-                break;
-            case CMD.A:
-                var cx = data[i++];
-                var cy = data[i++];
-                var rx = data[i++];
-                var ry = data[i++];
-                var startAngle = data[i++];
-                var endAngle = data[i++] + startAngle;
-                i += 1;
-                var anticlockwise = !data[i++];
-                x1 = Math.cos(startAngle) * rx + cx;
-                y1 = Math.sin(startAngle) * ry + cy;
-                if (isFirst) {
-                    x0 = x1;
-                    y0 = y1;
-                    createNewSubpath(x0, y0);
-                }
-                else {
-                    addLine(xi, yi, x1, y1);
-                }
-                xi = Math.cos(endAngle) * rx + cx;
-                yi = Math.sin(endAngle) * ry + cy;
-                var step = (anticlockwise ? -1 : 1) * Math.PI / 2;
-                for (var angle = startAngle; anticlockwise ? angle > endAngle : angle < endAngle; angle += step) {
-                    var nextAngle = anticlockwise ? Math.max(angle + step, endAngle)
-                        : Math.min(angle + step, endAngle);
-                    addArc(angle, nextAngle, cx, cy, rx, ry);
-                }
-                break;
-            case CMD.R:
-                x0 = xi = data[i++];
-                y0 = yi = data[i++];
-                x1 = x0 + data[i++];
-                y1 = y0 + data[i++];
-                createNewSubpath(x1, y0);
-                addLine(x1, y0, x1, y1);
-                addLine(x1, y1, x0, y1);
-                addLine(x0, y1, x0, y0);
-                addLine(x0, y0, x1, y0);
-                break;
-            case CMD.Z:
-                currentSubpath && addLine(xi, yi, x0, y0);
-                xi = x0;
-                yi = y0;
-                break;
-        }
-    }
-    if (currentSubpath && currentSubpath.length > 2) {
-        bezierArray.push(currentSubpath);
-    }
-    return bezierArray;
-}
+import { clonePath } from './path';
+import Transformable from '../core/Transformable';
+import { split } from './dividePath';
+import { pathToBezierCurves } from './convertPath';
 function alignSubpath(subpath1, subpath2) {
@@ -149,2 +15,4 @@ var len1 = subpath1.length;
     }
+    var tmpSegX = [];
+    var tmpSegY = [];
     var shorterPath = len1 < len2 ? subpath1 : subpath2;
@@ -157,4 +25,2 @@ var shorterLen = Math.min(len1, len2);
     var remained = diff;
-    var tmpSegX = [];
-    var tmpSegY = [];
     for (var i = 2; i < shorterLen;) {
@@ -300,3 +166,3 @@ var x0 = shorterPath[i - 2];
         var bestScore = Infinity;
-        var tmpArr_1 = [];
+        var tmpArr = [];
         var len = fromSubpathBezier.length;
@@ -328,4 +194,4 @@ if (fromNeedsReverse) {
                     var newY1 = x1 * sa + y1 * ca;
-                    tmpArr_1[k] = newX1;
-                    tmpArr_1[k + 1] = newY1;
+                    tmpArr[k] = newX1;
+                    tmpArr[k + 1] = newY1;
                     var dx = newX1 - x0;
@@ -338,4 +204,4 @@ var dy = newY1 - y0;
                     bestAngle = angle;
-                    for (var m = 0; m < tmpArr_1.length; m++) {
-                        newToSubpathBezier[m] = tmpArr_1[m];
+                    for (var m = 0; m < tmpArr.length; m++) {
+                        newToSubpathBezier[m] = tmpArr[m];
                     }
@@ -361,28 +227,126 @@ }
 }
+export function isCombineMorphing(path) {
+    return path.__isCombineMorphing;
+}
+export function isMorphing(el) {
+    return el.__morphT >= 0;
+}
+var SAVED_METHOD_PREFIX = '__mOriginal_';
+function saveAndModifyMethod(obj, methodName, modifiers) {
+    var savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    var originalMethod = obj[savedMethodName] || obj[methodName];
+    if (!obj[savedMethodName]) {
+        obj[savedMethodName] = obj[methodName];
+    }
+    var replace = modifiers.replace;
+    var after = modifiers.after;
+    var before = modifiers.before;
+    obj[methodName] = function () {
+        var args = arguments;
+        var res;
+        before && before.apply(this, args);
+        if (replace) {
+            res = replace.apply(this, args);
+        }
+        else {
+            res = originalMethod.apply(this, args);
+        }
+        after && after.apply(this, args);
+        return res;
+    };
+}
+function restoreMethod(obj, methodName) {
+    var savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    if (obj[savedMethodName]) {
+        obj[methodName] = obj[savedMethodName];
+        obj[savedMethodName] = null;
+    }
+}
+function applyTransformOnBeziers(bezierCurves, mm) {
+    for (var i = 0; i < bezierCurves.length; i++) {
+        var subBeziers = bezierCurves[i];
+        for (var k = 0; k < subBeziers.length;) {
+            var x = subBeziers[k];
+            var y = subBeziers[k + 1];
+            subBeziers[k++] = mm[0] * x + mm[2] * y + mm[4];
+            subBeziers[k++] = mm[1] * x + mm[3] * y + mm[5];
+        }
+    }
+}
+function prepareMorphPath(fromPath, toPath) {
+    var fromPathProxy = fromPath.getUpdatedPathProxy();
+    var toPathProxy = toPath.getUpdatedPathProxy();
+    var _a = alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy)), fromBezierCurves = _a[0], toBezierCurves = _a[1];
+    var fromPathTransform = fromPath.getComputedTransform();
+    var toPathTransform = toPath.getComputedTransform();
+    function updateIdentityTransform() {
+        this.transform = null;
+    }
+    fromPathTransform && applyTransformOnBeziers(fromBezierCurves, fromPathTransform);
+    toPathTransform && applyTransformOnBeziers(toBezierCurves, toPathTransform);
+    saveAndModifyMethod(toPath, 'updateTransform', { replace: updateIdentityTransform });
+    toPath.transform = null;
+    var morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
+    var tmpArr = [];
+    saveAndModifyMethod(toPath, 'buildPath', { replace: function (path) {
+            var t = toPath.__morphT;
+            var onet = 1 - t;
+            var newCp = [];
+            for (var i = 0; i < morphingData.length; i++) {
+                var item = morphingData[i];
+                var from = item.from;
+                var to = item.to;
+                var angle = item.rotation * t;
+                var fromCp = item.fromCp;
+                var toCp = item.toCp;
+                var sa = Math.sin(angle);
+                var ca = Math.cos(angle);
+                lerp(newCp, fromCp, toCp, t);
+                for (var m = 0; m < from.length; m += 2) {
+                    var x0_1 = from[m];
+                    var y0_1 = from[m + 1];
+                    var x1 = to[m];
+                    var y1 = to[m + 1];
+                    var x = x0_1 * onet + x1 * t;
+                    var y = y0_1 * onet + y1 * t;
+                    tmpArr[m] = (x * ca - y * sa) + newCp[0];
+                    tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
+                }
+                var x0 = tmpArr[0];
+                var y0 = tmpArr[1];
+                path.moveTo(x0, y0);
+                for (var m = 2; m < from.length;) {
+                    var x1 = tmpArr[m++];
+                    var y1 = tmpArr[m++];
+                    var x2 = tmpArr[m++];
+                    var y2 = tmpArr[m++];
+                    var x3 = tmpArr[m++];
+                    var y3 = tmpArr[m++];
+                    if (x0 === x1 && y0 === y1 && x2 === x3 && y2 === y3) {
+                        path.lineTo(x3, y3);
+                    }
+                    else {
+                        path.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+                    }
+                    x0 = x3;
+                    y0 = y3;
+                }
+            }
+        } });
+}
 export function morphPath(fromPath, toPath, animationOpts) {
-    var fromPathProxy;
-    var toPathProxy;
     if (!fromPath || !toPath) {
         return toPath;
     }
-    !fromPath.path && fromPath.createPathProxy();
-    fromPathProxy = fromPath.path;
-    fromPathProxy.beginPath();
-    fromPath.buildPath(fromPathProxy, fromPath.shape);
-    !toPath.path && toPath.createPathProxy();
-    toPathProxy = toPath.path;
-    toPathProxy === fromPathProxy && (toPathProxy = new PathProxy(false));
-    toPathProxy.beginPath();
-    if (isIndividualMorphingPath(toPath)) {
-        toPath.__oldBuildPath(toPathProxy, toPath.shape);
+    var oldDone = animationOpts.done;
+    var oldDuring = animationOpts.during;
+    prepareMorphPath(fromPath, toPath);
+    toPath.__morphT = 0;
+    function restoreToPath() {
+        restoreMethod(toPath, 'buildPath');
+        restoreMethod(toPath, 'updateTransform');
+        toPath.__morphT = -1;
+        toPath.createPathProxy();
+        toPath.dirtyShape();
     }
-    else {
-        toPath.buildPath(toPathProxy, toPath.shape);
-    }
-    var _a = alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy)), fromBezierCurves = _a[0], toBezierCurves = _a[1];
-    var morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
-    becomeIndividualMorphingPath(toPath, morphingData, 0);
-    var oldDone = animationOpts && animationOpts.done;
-    var oldAborted = animationOpts && animationOpts.aborted;
-    var oldDuring = animationOpts && animationOpts.during;
     toPath.animateTo({
@@ -396,9 +360,4 @@ __morphT: 1
         done: function () {
-            restoreIndividualMorphingPath(toPath);
-            toPath.createPathProxy();
-            toPath.dirtyShape();
+            restoreToPath();
             oldDone && oldDone();
-        },
-        aborted: function () {
-            oldAborted && oldAborted();
         }
@@ -408,302 +367,236 @@ }, animationOpts));
 }
-function morphingPathBuildPath(path) {
-    var morphingData = this.__morphingData;
-    var t = this.__morphT;
-    var onet = 1 - t;
-    var newCp = [];
-    for (var i = 0; i < morphingData.length; i++) {
-        var item = morphingData[i];
-        var from = item.from;
-        var to = item.to;
-        var angle = item.rotation * t;
-        var fromCp = item.fromCp;
-        var toCp = item.toCp;
-        var sa = Math.sin(angle);
-        var ca = Math.cos(angle);
-        lerp(newCp, fromCp, toCp, t);
-        for (var m = 0; m < from.length; m += 2) {
-            var x0 = from[m];
-            var y0 = from[m + 1];
-            var x1 = to[m];
-            var y1 = to[m + 1];
-            var x = x0 * onet + x1 * t;
-            var y = y0 * onet + y1 * t;
-            tmpArr[m] = (x * ca - y * sa) + newCp[0];
-            tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
+function hilbert(x, y, minX, minY, maxX, maxY) {
+    var bits = 16;
+    x = (maxX === minX) ? 0 : Math.round(32767 * (x - minX) / (maxX - minX));
+    y = (maxY === minY) ? 0 : Math.round(32767 * (y - minY) / (maxY - minY));
+    var d = 0;
+    var tmp;
+    for (var s = (1 << bits) / 2; s > 0; s /= 2) {
+        var rx = 0;
+        var ry = 0;
+        if ((x & s) > 0) {
+            rx = 1;
         }
-        for (var m = 0; m < from.length;) {
-            if (m === 0) {
-                path.moveTo(tmpArr[m++], tmpArr[m++]);
+        if ((y & s) > 0) {
+            ry = 1;
+        }
+        d += s * s * ((3 * rx) ^ ry);
+        if (ry === 0) {
+            if (rx === 1) {
+                x = s - 1 - x;
+                y = s - 1 - y;
             }
-            path.bezierCurveTo(tmpArr[m++], tmpArr[m++], tmpArr[m++], tmpArr[m++], tmpArr[m++], tmpArr[m++]);
+            tmp = x;
+            x = y;
+            y = tmp;
         }
     }
+    return d;
 }
+function sortPaths(pathList) {
+    var xMin = Infinity;
+    var yMin = Infinity;
+    var xMax = -Infinity;
+    var yMax = -Infinity;
+    var cps = map(pathList, function (path) {
+        var rect = path.getBoundingRect();
+        var m = path.getComputedTransform();
+        var x = rect.x + rect.width / 2 + (m ? m[4] : 0);
+        var y = rect.y + rect.height / 2 + (m ? m[5] : 0);
+        xMin = Math.min(x, xMin);
+        yMin = Math.min(y, yMin);
+        xMax = Math.max(x, xMax);
+        yMax = Math.max(y, yMax);
+        return [x, y];
+    });
+    var items = map(cps, function (cp, idx) {
+        return {
+            cp: cp,
+            z: hilbert(cp[0], cp[1], xMin, yMin, xMax, yMax),
+            path: pathList[idx]
+        };
+    });
+    return items.sort(function (a, b) { return a.z - b.z; }).map(function (item) { return item.path; });
+}
 ;
-function becomeIndividualMorphingPath(path, morphingData, morphT) {
-    if (isIndividualMorphingPath(path)) {
-        updateIndividualMorphingPath(path, morphingData, morphT);
-        return;
-    }
-    var morphingPath = path;
-    morphingPath.__oldBuildPath = morphingPath.buildPath;
-    morphingPath.buildPath = morphingPathBuildPath;
-    updateIndividualMorphingPath(morphingPath, morphingData, morphT);
+function defaultDividePath(param) {
+    return split(param.path, param.count);
 }
-function updateIndividualMorphingPath(morphingPath, morphingData, morphT) {
-    morphingPath.__morphingData = morphingData;
-    morphingPath.__morphT = morphT;
+function createEmptyReturn() {
+    return {
+        fromIndividuals: [],
+        toIndividuals: [],
+        count: 0
+    };
 }
-function restoreIndividualMorphingPath(path) {
-    if (isIndividualMorphingPath(path)) {
-        path.buildPath = path.__oldBuildPath;
-        path.__oldBuildPath = path.__morphingData = null;
-    }
-}
-function isIndividualMorphingPath(path) {
-    return path.__oldBuildPath != null;
-}
-export function isCombiningPath(path) {
-    return !!path.__combiningSubList;
-}
-export function isInAnyMorphing(path) {
-    return isIndividualMorphingPath(path) || isCombiningPath(path);
-}
-export function combine(fromPathList, toPath, animationOpts, copyPropsIfDivided) {
-    var fromIndividuals = [];
-    var separateCount = 0;
-    for (var i = 0; i < fromPathList.length; i++) {
-        var fromPath = fromPathList[i];
-        if (isCombiningPath(fromPath)) {
-            var fromCombiningSubList = fromPath.__combiningSubList;
-            for (var j = 0; j < fromCombiningSubList.length; j++) {
-                fromIndividuals.push(fromCombiningSubList[j]);
+export function combineMorph(fromList, toPath, animationOpts) {
+    var fromPathList = [];
+    function addFromPath(fromList) {
+        for (var i = 0; i < fromList.length; i++) {
+            var from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath(from.childrenRef());
             }
-            separateCount += fromCombiningSubList.length;
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
         }
-        else {
-            fromIndividuals.push(fromPath);
-            separateCount++;
-        }
     }
+    addFromPath(fromList);
+    var separateCount = fromPathList.length;
     if (!separateCount) {
-        return;
+        return createEmptyReturn();
     }
-    var dividingMethod = animationOpts ? animationOpts.dividingMethod : null;
-    var toPathSplittedList = divideShape(toPath, separateCount, dividingMethod);
-    assert(toPathSplittedList.length === separateCount);
-    var oldDone = animationOpts && animationOpts.done;
-    var oldAborted = animationOpts && animationOpts.aborted;
-    var oldDuring = animationOpts && animationOpts.during;
-    var doneCount = 0;
-    var abortedCalled = false;
-    var morphAnimationOpts = defaults({
-        during: function (p) {
-            oldDuring && oldDuring(p);
-        },
-        done: function () {
-            doneCount++;
-            if (doneCount === toPathSplittedList.length) {
-                restoreCombiningPath(toPath);
-                oldDone && oldDone();
-            }
-        },
-        aborted: function () {
-            if (!abortedCalled) {
-                abortedCalled = true;
-                oldAborted && oldAborted();
-            }
+    var dividePath = animationOpts.dividePath || defaultDividePath;
+    var toSubPathList = dividePath({
+        path: toPath, count: separateCount
+    });
+    if (toSubPathList.length !== separateCount) {
+        console.error('Invalid morphing: unmatched splitted path');
+        return createEmptyReturn();
+    }
+    fromPathList = sortPaths(fromPathList);
+    toSubPathList = sortPaths(toSubPathList);
+    var oldDone = animationOpts.done;
+    var oldDuring = animationOpts.during;
+    var individualDelay = animationOpts.individualDelay;
+    var identityTransform = new Transformable();
+    for (var i = 0; i < separateCount; i++) {
+        var from = fromPathList[i];
+        var to = toSubPathList[i];
+        to.parent = toPath;
+        to.copyTransform(identityTransform);
+        if (!individualDelay) {
+            prepareMorphPath(from, to);
         }
-    }, animationOpts);
-    for (var i = 0; i < separateCount; i++) {
-        var from = fromIndividuals[i];
-        var to = toPathSplittedList[i];
-        copyPropsIfDivided && copyPropsIfDivided(toPath, to, true);
-        morphPath(from, to, morphAnimationOpts);
     }
-    becomeCombiningPath(toPath, toPathSplittedList);
-    return {
-        fromIndividuals: fromIndividuals,
-        toIndividuals: toPathSplittedList,
-        count: separateCount
+    toPath.__isCombineMorphing = true;
+    toPath.childrenRef = function () {
+        return toSubPathList;
     };
-}
-function becomeCombiningPath(path, combiningSubList) {
-    if (isCombiningPath(path)) {
-        updateCombiningPathSubList(path, combiningSubList);
-        return;
+    function addToSubPathListToZr(zr) {
+        for (var i = 0; i < toSubPathList.length; i++) {
+            toSubPathList[i].addSelfToZr(zr);
+        }
     }
-    var combiningPath = path;
-    updateCombiningPathSubList(combiningPath, combiningSubList);
-    combiningPath.__oldAddSelfToZr = path.addSelfToZr;
-    combiningPath.__oldRemoveSelfFromZr = path.removeSelfFromZr;
-    combiningPath.addSelfToZr = combiningAddSelfToZr;
-    combiningPath.removeSelfFromZr = combiningRemoveSelfFromZr;
-    combiningPath.__oldBuildPath = combiningPath.buildPath;
-    combiningPath.buildPath = noop;
-    combiningPath.childrenRef = combiningChildrenRef;
-}
-function restoreCombiningPath(path) {
-    if (!isCombiningPath(path)) {
-        return;
-    }
-    var combiningPath = path;
-    updateCombiningPathSubList(combiningPath, null);
-    combiningPath.addSelfToZr = combiningPath.__oldAddSelfToZr;
-    combiningPath.removeSelfFromZr = combiningPath.__oldRemoveSelfFromZr;
-    combiningPath.buildPath = combiningPath.__oldBuildPath;
-    combiningPath.childrenRef =
-        combiningPath.__combiningSubList =
-            combiningPath.__oldAddSelfToZr =
-                combiningPath.__oldRemoveSelfFromZr =
-                    combiningPath.__oldBuildPath = null;
-}
-function updateCombiningPathSubList(combiningPath, combiningSubList) {
-    if (combiningPath.__combiningSubList !== combiningSubList) {
-        combiningPathSubListAddRemoveWithZr(combiningPath, 'removeSelfFromZr');
-        combiningPath.__combiningSubList = combiningSubList;
-        if (combiningSubList) {
-            for (var i = 0; i < combiningSubList.length; i++) {
-                combiningSubList[i].parent = combiningPath;
+    saveAndModifyMethod(toPath, 'addSelfToZr', {
+        after: function (zr) {
+            addToSubPathListToZr(zr);
+        }
+    });
+    saveAndModifyMethod(toPath, 'removeSelfFromZr', {
+        after: function (zr) {
+            for (var i = 0; i < toSubPathList.length; i++) {
+                toSubPathList[i].removeSelfFromZr(zr);
             }
         }
-        combiningPathSubListAddRemoveWithZr(combiningPath, 'addSelfToZr');
+    });
+    function restoreToPath() {
+        toPath.__isCombineMorphing = false;
+        toPath.__morphT = -1;
+        toPath.childrenRef = null;
+        restoreMethod(toPath, 'addSelfToZr');
+        restoreMethod(toPath, 'removeSelfFromZr');
     }
-}
-function combiningAddSelfToZr(zr) {
-    this.__oldAddSelfToZr(zr);
-    combiningPathSubListAddRemoveWithZr(this, 'addSelfToZr');
-}
-function combiningPathSubListAddRemoveWithZr(path, method) {
-    var combiningSubList = path.__combiningSubList;
-    var zr = path.__zr;
-    if (combiningSubList && zr) {
-        for (var i = 0; i < combiningSubList.length; i++) {
-            var child = combiningSubList[i];
-            child[method](zr);
+    var toLen = toSubPathList.length;
+    if (individualDelay) {
+        var animating_1 = toLen;
+        var eachDone = function () {
+            animating_1--;
+            if (animating_1 === 0) {
+                restoreToPath();
+                oldDone && oldDone();
+            }
+        };
+        for (var i = 0; i < toLen; i++) {
+            var indivdualAnimationOpts = individualDelay ? defaults({
+                delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toSubPathList[i]),
+                done: eachDone
+            }, animationOpts) : animationOpts;
+            morphPath(fromPathList[i], toSubPathList[i], indivdualAnimationOpts);
         }
     }
-}
-function combiningRemoveSelfFromZr(zr) {
-    this.__oldRemoveSelfFromZr(zr);
-    var combiningSubList = this.__combiningSubList;
-    for (var i = 0; i < combiningSubList.length; i++) {
-        var child = combiningSubList[i];
-        child.removeSelfFromZr(zr);
-    }
-}
-function combiningChildrenRef() {
-    return this.__combiningSubList;
-}
-export function separate(fromPath, toPathList, animationOpts, copyPropsIfDivided) {
-    var toPathListLen = toPathList.length;
-    var fromPathList;
-    var dividingMethod = animationOpts ? animationOpts.dividingMethod : null;
-    var copyProps = false;
-    if (isCombiningPath(fromPath)) {
-        var fromCombiningSubList = fromPath.__combiningSubList;
-        if (fromCombiningSubList.length === toPathListLen) {
-            fromPathList = fromCombiningSubList;
-        }
-        else {
-            fromPathList = divideShape(fromPath, toPathListLen, dividingMethod);
-            copyProps = true;
-        }
-    }
     else {
-        fromPathList = divideShape(fromPath, toPathListLen, dividingMethod);
-        copyProps = true;
+        toPath.__morphT = 0;
+        toPath.animateTo({
+            __morphT: 1
+        }, defaults({
+            during: function (p) {
+                for (var i = 0; i < toLen; i++) {
+                    var child = toSubPathList[i];
+                    child.__morphT = toPath.__morphT;
+                    child.dirtyShape();
+                }
+                oldDuring && oldDuring(p);
+            },
+            done: function () {
+                restoreToPath();
+                for (var i = 0; i < fromList.length; i++) {
+                    restoreMethod(fromList[i], 'updateTransform');
+                }
+                oldDone && oldDone();
+            }
+        }, animationOpts));
     }
-    assert(fromPathList.length === toPathListLen);
-    for (var i = 0; i < toPathListLen; i++) {
-        if (copyProps && copyPropsIfDivided) {
-            copyPropsIfDivided(fromPath, fromPathList[i], false);
-        }
-        morphPath(fromPathList[i], toPathList[i], animationOpts);
+    if (toPath.__zr) {
+        addToSubPathListToZr(toPath.__zr);
     }
     return {
         fromIndividuals: fromPathList,
-        toIndividuals: toPathList,
-        count: toPathListLen
+        toIndividuals: toSubPathList,
+        count: toLen
     };
 }
-function divideShape(path, separateCount, dividingMethod) {
-    return dividingMethod === 'duplicate'
-        ? duplicateShape(path, separateCount)
-        : splitShape(path, separateCount);
-}
-function splitShape(path, separateCount) {
-    var resultPaths = [];
-    if (separateCount <= 0) {
-        return resultPaths;
-    }
-    if (separateCount === 1) {
-        return duplicateShape(path, separateCount);
-    }
-    if (path instanceof Rect) {
-        var toPathShape = path.shape;
-        var splitPropIdx = toPathShape.height > toPathShape.width ? 1 : 0;
-        var propWH = PROP_WH[splitPropIdx];
-        var propXY = PROP_XY[splitPropIdx];
-        var subWH = toPathShape[propWH] / separateCount;
-        var xyCurr = toPathShape[propXY];
-        for (var i = 0; i < separateCount; i++, xyCurr += subWH) {
-            var subShape = {
-                x: toPathShape.x,
-                y: toPathShape.y,
-                width: toPathShape.width,
-                height: toPathShape.height
-            };
-            subShape[propXY] = xyCurr;
-            subShape[propWH] = i < separateCount - 1
-                ? subWH
-                : toPathShape[propXY] + toPathShape[propWH] - xyCurr;
-            var splitted = new Rect({ shape: subShape });
-            resultPaths.push(splitted);
+export function separateMorph(fromPath, toPathList, animationOpts) {
+    var toLen = toPathList.length;
+    var fromPathList = [];
+    var dividePath = animationOpts.dividePath || defaultDividePath;
+    function addFromPath(fromList) {
+        for (var i = 0; i < fromList.length; i++) {
+            var from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath(from.childrenRef());
+            }
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
         }
     }
-    else if (path instanceof Sector) {
-        var toPathShape = path.shape;
-        var clockwise = toPathShape.clockwise;
-        var startAngle = toPathShape.startAngle;
-        var endAngle = toPathShape.endAngle;
-        var endAngleNormalized = normalizeRadian(startAngle, toPathShape.endAngle, clockwise);
-        var step = (endAngleNormalized - startAngle) / separateCount;
-        var angleCurr = startAngle;
-        for (var i = 0; i < separateCount; i++, angleCurr += step) {
-            var splitted = new Sector({
-                shape: {
-                    cx: toPathShape.cx,
-                    cy: toPathShape.cy,
-                    r: toPathShape.r,
-                    r0: toPathShape.r0,
-                    clockwise: clockwise,
-                    startAngle: angleCurr,
-                    endAngle: i === separateCount - 1 ? endAngle : angleCurr + step
-                }
-            });
-            resultPaths.push(splitted);
+    if (isCombineMorphing(fromPath)) {
+        addFromPath(fromPath.childrenRef());
+        var fromLen = fromPathList.length;
+        if (fromLen < toLen) {
+            var k = 0;
+            for (var i = fromLen; i < toLen; i++) {
+                fromPathList.push(clonePath(fromPathList[k++ % fromLen]));
+            }
         }
+        fromPathList.length = toLen;
     }
     else {
-        return duplicateShape(path, separateCount);
+        fromPathList = dividePath({ path: fromPath, count: toLen });
+        var fromPathTransform = fromPath.getComputedTransform();
+        for (var i = 0; i < fromPathList.length; i++) {
+            fromPathList[i].setLocalTransform(fromPathTransform);
+        }
+        if (fromPathList.length !== toLen) {
+            console.error('Invalid morphing: unmatched splitted path');
+            return createEmptyReturn();
+        }
     }
-    return resultPaths;
-}
-function duplicateShape(path, separateCount) {
-    var resultPaths = [];
-    if (separateCount <= 0) {
-        return resultPaths;
+    fromPathList = sortPaths(fromPathList);
+    toPathList = sortPaths(toPathList);
+    var individualDelay = animationOpts.individualDelay;
+    for (var i = 0; i < toLen; i++) {
+        var indivdualAnimationOpts = individualDelay ? defaults({
+            delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toPathList[i])
+        }, animationOpts) : animationOpts;
+        morphPath(fromPathList[i], toPathList[i], indivdualAnimationOpts);
     }
-    var ctor = path.constructor;
-    for (var i = 0; i < separateCount; i++) {
-        var sub = new ctor({
-            shape: clone(path.shape)
-        });
-        resultPaths.push(sub);
-    }
-    return resultPaths;
+    return {
+        fromIndividuals: fromPathList,
+        toIndividuals: toPathList,
+        count: toPathList.length
+    };
 }
-function normalizeRadian(start, end, clockwise) {
-    return end + PI2 * (Math[clockwise ? 'ceil' : 'floor']((start - end) / PI2));
-}
+export { split as defaultDividePath };

lib/tool/path.d.ts

@@ -10,2 +10,6 @@ import Path, { PathProps } from '../graphic/Path';
 export declare function mergePath(pathEls: Path[], opts: PathProps): Path<PathProps>;
+export declare function clonePath(sourcePath: Path, opts?: {
+    bakeTransform?: boolean;
+    toLocal?: boolean;
+}): Path<PathProps>;
 export {};

lib/tool/path.js

@@ -333,9 +333,3 @@ import { __extends } from "tslib";
         var pathEl = pathEls[i];
-        if (!pathEl.path) {
-            pathEl.createPathProxy();
-        }
-        if (pathEl.shapeChanged()) {
-            pathEl.buildPath(pathEl.path, pathEl.shape, true);
-        }
-        pathList.push(pathEl.path);
+        pathList.push(pathEl.getUpdatedPathProxy(true));
     }
@@ -355,1 +349,26 @@ var pathBundle = new Path(opts);
 }
+export function clonePath(sourcePath, opts) {
+    opts = opts || {};
+    var path = new Path();
+    if (sourcePath.shape) {
+        path.setShape(sourcePath.shape);
+    }
+    path.setStyle(sourcePath.style);
+    if (opts.bakeTransform) {
+        transformPath(path.path, sourcePath.getComputedTransform());
+    }
+    else {
+        if (opts.toLocal) {
+            path.setLocalTransform(sourcePath.getComputedTransform());
+        }
+        else {
+            path.copyTransform(sourcePath);
+        }
+    }
+    path.buildPath = sourcePath.buildPath;
+    path.applyTransform = path.applyTransform;
+    path.z = sourcePath.z;
+    path.z2 = sourcePath.z2;
+    path.zlevel = sourcePath.zlevel;
+    return path;
+}

lib/tool/transformPath.js

@@ -8,2 +8,5 @@ import PathProxy from '../core/PathProxy';
 export default function transformPath(path, m) {
+    if (!m) {
+        return;
+    }
     var data = path.data;
@@ -10,0 +13,0 @@ var len = path.len();

lib/vml/Painter.js

@@ -1,4 +0,3 @@
-import { logError } from '../core/util';
+import { logError, each } from '../core/util';
 import * as vmlCore from './core';
-import { each } from '../core/util';
 function parseInt10(val) {
@@ -5,0 +4,0 @@ return parseInt(val, 10);

lib/zrender.d.ts

@@ -14,4 +14,4 @@ /*!
 import Animation from './animation/Animation';
-import Element, { ElementEventCallback, ElementEvent } from './Element';
-import { ElementEventName } from './core/types';
+import Element, { ElementEventCallback } from './Element';
+import { ElementEventName, WithThisType } from './core/types';
 import { LayerConfig } from './canvas/Layer';
@@ -46,3 +46,3 @@ import { GradientObject } from './graphic/Gradient';
     setBackgroundColor(backgroundColor: string | GradientObject | PatternObject): void;
-    getBackgroundColor(): string | GradientObject | import("./graphic/Pattern").ImagePatternObject | import("./graphic/Pattern").SVGPatternObject;
+    getBackgroundColor(): string | GradientObject | PatternObject;
     setDarkMode(darkMode: boolean): void;
@@ -74,5 +74,5 @@ isDarkMode(): boolean;
     };
-    on<Ctx>(eventName: ElementEventName, eventHandler: ElementEventCallback<Ctx, unknown>, context?: Ctx): this;
-    on<Ctx>(eventName: string, eventHandler: EventCallback<Ctx, unknown>, context?: Ctx): this;
-    off(eventName?: string, eventHandler?: EventCallback<unknown, unknown> | EventCallback<unknown, unknown, ElementEvent>): void;
+    on<Ctx>(eventName: ElementEventName, eventHandler: ElementEventCallback<Ctx, ZRenderType>, context?: Ctx): this;
+    on<Ctx>(eventName: string, eventHandler: WithThisType<EventCallback<any[]>, unknown extends Ctx ? ZRenderType : Ctx>, context?: Ctx): this;
+    off(eventName?: string, eventHandler?: EventCallback): void;
     trigger(eventName: string, event?: unknown): void;
@@ -94,5 +94,5 @@ clear(): void;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.1.1";
+export declare const version = "5.2.0";
 export interface ZRenderType extends ZRender {
 }
 export {};

lib/zrender.js

@@ -265,3 +265,3 @@ /*!
 }
-export var version = '5.1.1';
+export var version = '5.2.0';
 ;

package.json

 {
   "name": "zrender",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "A lightweight canvas library.",
@@ -22,3 +22,4 @@ "keywords": [
     "watch:lib": "npx tsc -w -m ES2015 --outDir lib",
-    "test": "npx jest --config test/ut/jest.config.js"
+    "test": "npx jest --config test/ut/jest.config.js",
+    "lint": "npx eslint src/**/*.ts"
   },
@@ -30,3 +31,3 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "tslib": "2.0.3"
+    "tslib": "2.3.0"
   },
@@ -40,4 +41,4 @@ "sideEffects": [
     "@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",
@@ -53,5 +54,5 @@ "commander": "2.11.0",
     "ts-jest": "^25.2.0",
-    "typescript": "^4.1.2",
+    "typescript": "4.3.5",
     "uglify-js": "^3.10.0"
   }
 }

src/animation/Animator.ts

@@ -148,17 +148,2 @@ /**
 
-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;
-}
 
@@ -315,4 +300,6 @@ /**
     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;
     }
@@ -448,4 +435,4 @@
                     if (this.isValueColor) {
-                        kfs[i].additiveValue
-                            = add1DArray([], kfs[i].value as NumberArray, startValue as NumberArray, -1);
+                        kfs[i].additiveValue =
+                            add1DArray([], kfs[i].value as NumberArray, startValue as NumberArray, -1);
                     }
@@ -712,6 +699,6 @@ else {
 
-    private _doneList: DoneCallback[]
-    private _onframeList: OnframeCallback<T>[]
+    private _doneCbs: DoneCallback[]
+    private _onframeCbs: OnframeCallback<T>[]
 
-    private _abortedList: AbortCallback[]
+    private _abortedCbs: AbortCallback[]
 
@@ -818,3 +805,3 @@ private _clip: Clip = null
 
-        const doneList = this._doneList;
+        const doneList = this._doneCbs;
         if (doneList) {
@@ -831,3 +818,3 @@ const len = doneList.length;
         const animation = this.animation;
-        const abortedList = this._abortedList;
+        const abortedList = this._abortedCbs;
 
@@ -886,3 +873,3 @@ if (animation) {
             const track = this._tracks[propName];
-            const additiveTrack = this._getAdditiveTrack(propName)
+            const additiveTrack = this._getAdditiveTrack(propName);
             const kfs = track.keyframes;
@@ -930,3 +917,3 @@ track.prepare(additiveTrack);
                     }
-                    const onframeList = self._onframeList;
+                    const onframeList = self._onframeCbs;
                     if (onframeList) {
@@ -991,6 +978,6 @@ for (let i = 0; i < onframeList.length; i++) {
         if (cb) {
-            if (!this._onframeList) {
-                this._onframeList = [];
+            if (!this._onframeCbs) {
+                this._onframeCbs = [];
             }
-            this._onframeList.push(cb);
+            this._onframeCbs.push(cb);
         }
@@ -1005,6 +992,6 @@ return this;
         if (cb) {
-            if (!this._doneList) {
-                this._doneList = [];
+            if (!this._doneCbs) {
+                this._doneCbs = [];
             }
-            this._doneList.push(cb);
+            this._doneCbs.push(cb);
         }
@@ -1016,6 +1003,6 @@ return this;
         if (cb) {
-            if (!this._abortedList) {
-                this._abortedList = [];
+            if (!this._abortedCbs) {
+                this._abortedCbs = [];
             }
-            this._abortedList.push(cb);
+            this._abortedCbs.push(cb);
         }
@@ -1022,0 +1009,0 @@ return this;

src/animation/Clip.ts

@@ -24,3 +24,3 @@ /**
 export type DeferredEventTypes = 'destroy' | 'restart'
-type DeferredEventKeys = 'ondestroy' | 'onrestart'
+// type DeferredEventKeys = 'ondestroy' | 'onrestart'
 
@@ -27,0 +27,0 @@ export interface ClipProps {

src/canvas/graphic.ts

@@ -28,2 +28,10 @@ import Displayable, { DEFAULT_COMMON_STYLE } from '../graphic/Displayable';
 
+// ignore lineWidth and must be string
+// Expected color but found '[' when color is gradient
+function isValidStrokeFillStyle(
+    strokeOrFill: PathStyleProps['stroke'] | PathStyleProps['fill']
+): strokeOrFill is string {
+    return typeof strokeOrFill === 'string' && strokeOrFill !== 'none';
+}
+
 function styleHasFill(style: PathStyleProps) {
@@ -463,3 +471,3 @@ const fill = style.fill;
         }
-        ctx.fillStyle = style.fill as string;
+        isValidStrokeFillStyle(style.fill) && (ctx.fillStyle = style.fill);
     }
@@ -471,3 +479,3 @@ if (forceSetAll || style.stroke !== prevStyle.stroke) {
         }
-        ctx.strokeStyle = style.stroke as string;
+        isValidStrokeFillStyle(style.stroke) && (ctx.strokeStyle = style.stroke);
     }
@@ -474,0 +482,0 @@ if (forceSetAll || style.opacity !== prevStyle.opacity) {

src/config.ts

@@ -5,5 +5,7 @@ let dpr = 1;
 if (typeof window !== 'undefined') {
-    dpr = Math.max(window.devicePixelRatio 
-    	|| (window.screen && (window.screen as any).deviceXDPI / (window.screen as any).logicalXDPI) 
-    	|| 1, 1);
+    dpr = Math.max(
+        window.devicePixelRatio
+        || (window.screen && (window.screen as any).deviceXDPI / (window.screen as any).logicalXDPI)
+        || 1, 1
+    );
 }
@@ -10,0 +12,0 @@

src/contain/path.ts

@@ -14,4 +14,2 @@ import PathProxy from '../core/PathProxy';
 
-type PathData = Float32Array | number[];
-
 function isAroundEqual(a: number, b: number) {
@@ -18,0 +16,0 @@ return Math.abs(a - b) < EPSILON;

src/core/arrayDiff.ts

@@ -188,4 +188,4 @@ // Myers' Diff Algorithm
 
-export default function arrayDiff<T> (oldArr: T[], newArr: T[], equal?: EqualFunc<T>): DiffComponent[] {
+export default function arrayDiff<T>(oldArr: T[], newArr: T[], equal?: EqualFunc<T>): DiffComponent[] {
     return diff(oldArr, newArr, equal);
 }

src/core/curve.ts

@@ -483,3 +483,3 @@ /**
 
-    const step = 1  / iteration;
+    const step = 1 / iteration;
 
@@ -486,0 +486,0 @@ for (let i = 1; i <= iteration; i++) {

src/core/env.ts

@@ -77,3 +77,3 @@ declare const wx: {
         browser.version = edge[1];
-        browser.newEdge = +edge[1].split('.')[0] > 18; 
+        browser.newEdge = +edge[1].split('.')[0] > 18;
     }
@@ -112,3 +112,3 @@
     // other browsers all support `transform`
-    env.transformSupported = env.transform3dSupported 
+    env.transformSupported = env.transform3dSupported
         // transform 2D is supported in IE9
@@ -115,0 +115,0 @@ || (browser.ie && +browser.version >= 9);

src/core/Eventful.ts

@@ -0,5 +1,11 @@
+import { Dictionary, WithThisType } from './types';
+
 // Return true to cancel bubble
-export type EventCallback<Ctx, Impl, EvtParam = unknown> = (
-    this: CbThis<Ctx, Impl>, eventParam: EvtParam, ...args: unknown[]
-) => boolean | void
+export type EventCallbackSingleParam<EvtParam = any> = EvtParam extends any
+    ? (params: EvtParam) => boolean | void
+    : never
+
+export type EventCallback<EvtParams = any[]> = EvtParams extends any[]
+    ? (...args: EvtParams) => boolean | void
+    : never
 export type EventQuery = string | Object
@@ -9,4 +15,4 @@
 
-type EventHandler<Ctx, Impl, EvtParam> = {
-    h: EventCallback<Ctx, Impl, EvtParam>
+type EventHandler<Ctx, Impl, EvtParams> = {
+    h: EventCallback<EvtParams>
     ctx: CbThis<Ctx, Impl>
@@ -18,3 +24,3 @@ query: EventQuery
 
-type DefaultEventDefinition = {[eventName: string]: unknown};
+type DefaultEventDefinition = Dictionary<EventCallback<any[]>>;
 
@@ -63,5 +69,5 @@ export interface EventProcessor<EvtDef = DefaultEventDefinition> {
  */
-export default class Eventful<EvtDef = DefaultEventDefinition> {
+export default class Eventful<EvtDef extends DefaultEventDefinition = DefaultEventDefinition> {
 
-    private _$handlers: {[key: string]: EventHandler<any, any, EvtDef[keyof EvtDef]>[]}
+    private _$handlers: Dictionary<EventHandler<any, any, any[]>[]>
 
@@ -78,3 +84,3 @@ protected _$eventProcessor: EventProcessor<EvtDef>
         event: EvtNm,
-        handler: EventCallback<Ctx, this, EvtDef[EvtNm]>,
+        handler: WithThisType<EvtDef[EvtNm], CbThis<Ctx, this>>,
         context?: Ctx
@@ -85,3 +91,3 @@ ): this
         query: EventQuery,
-        handler: EventCallback<Ctx, this, EvtDef[EvtNm]>,
+        handler: WithThisType<EvtDef[EvtNm], CbThis<Ctx, this>>,
         context?: Ctx
@@ -99,4 +105,4 @@ ): this
         event: EvtNm,
-        query: EventQuery | EventCallback<Ctx, this, EvtDef[EvtNm]>,
-        handler?: EventCallback<Ctx, this, EvtDef[EvtNm]> | Ctx,
+        query: EventQuery | WithThisType<EventCallback<EvtDef[EvtNm]>, CbThis<Ctx, this>>,
+        handler?: WithThisType<EventCallback<EvtDef[EvtNm]>, CbThis<Ctx, this>> | Ctx,
         context?: Ctx
@@ -112,3 +118,3 @@ ): this {
             context = handler as Ctx;
-            handler = query as EventCallback<Ctx, this, EvtDef[keyof EvtDef]>;
+            handler = query as (...args: any) => any;
             query = null;
@@ -136,4 +142,4 @@ }
 
-        const wrap: EventHandler<Ctx, this, EvtDef[keyof EvtDef]> = {
-            h: handler as EventCallback<Ctx, this, EvtDef[keyof EvtDef]>,
+        const wrap: EventHandler<Ctx, this, unknown[]> = {
+            h: handler as EventCallback<unknown[]>,
             query: query,
@@ -210,4 +216,6 @@ ctx: (context || this) as CbThis<Ctx, this>,
      */
-    trigger(eventType: keyof EvtDef, eventParam?: EvtDef[keyof EvtDef], ...args: any[]): this;
-    trigger(eventType: keyof EvtDef, ...args: any[]): this {
+    trigger<EvtNm extends keyof EvtDef>(
+        eventType: EvtNm,
+        ...args: Parameters<EvtDef[EvtNm]>
+    ): this {
         if (!this._$handlers) {
@@ -237,3 +245,2 @@ return this;
                     case 0:
-                        // @ts-ignore
                         hItem.h.call(hItem.ctx);
@@ -266,3 +273,3 @@ break;
      */
-    triggerWithContext(type: keyof EvtDef) {
+    triggerWithContext(type: keyof EvtDef, ...args: any[]): this {
         if (!this._$handlers) {
@@ -276,3 +283,2 @@ return this;
         if (_h) {
-            const args: any = arguments;
             const argLen = args.length;
@@ -295,3 +301,2 @@ const ctx = args[argLen - 1];
                     case 0:
-                        // @ts-ignore
                         hItem.h.call(ctx);
@@ -298,0 +303,0 @@ break;

src/core/matrix.ts

@@ -119,3 +119,3 @@ /**
  */
-export function invert(out: MatrixArray, a: MatrixArray): MatrixArray {
+export function invert(out: MatrixArray, a: MatrixArray): MatrixArray | null {
 
@@ -151,2 +151,2 @@ const aa = a[0];
     return b;
-}
+}

src/core/PathProxy.ts

@@ -284,2 +284,4 @@ /**
     bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) {
+        this._drawPendingPt();
+
         this.addData(CMD.C, x1, y1, x2, y2, x3, y3);
@@ -296,2 +298,4 @@ if (this._ctx) {
     quadraticCurveTo(x1: number, y1: number, x2: number, y2: number) {
+        this._drawPendingPt();
+
         this.addData(CMD.Q, x1, y1, x2, y2);
@@ -308,2 +312,4 @@ if (this._ctx) {
     arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise?: boolean) {
+        this._drawPendingPt();
+
         tmpAngles[0] = startAngle;
@@ -318,6 +324,6 @@ tmpAngles[1] = endAngle;
 
-
         this.addData(
             CMD.A, cx, cy, r, r, startAngle, delta, 0, anticlockwise ? 0 : 1
         );
+
         this._ctx && this._ctx.arc(cx, cy, r, startAngle, endAngle, anticlockwise);
@@ -332,2 +338,4 @@
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) {
+        this._drawPendingPt();
+
         if (this._ctx) {
@@ -341,2 +349,4 @@ this._ctx.arcTo(x1, y1, x2, y2, radius);
     rect(x: number, y: number, w: number, h: number) {
+        this._drawPendingPt();
+
         this._ctx && this._ctx.rect(x, y, w, h);
@@ -956,8 +966,10 @@ this.addData(CMD.R, x, y, w, h);
             }
+            // Only lineTo support ignoring small segments.
+            // Otherwise if the pending point should always been flushed.
+            if (cmd !== CMD.L && pendingPtDist > 0) {
+                ctx.lineTo(pendingPtX, pendingPtY);
+                pendingPtDist = 0;
+            }
             switch (cmd) {
                 case CMD.M:
-                    if (pendingPtDist > 0) {
-                        ctx.lineTo(pendingPtX, pendingPtY);
-                        pendingPtDist = 0;
-                    }
                     x0 = xi = d[i++];
@@ -1057,4 +1069,4 @@ y0 = yi = d[i++];
                     const r = (rx > ry) ? rx : ry;
-                    const scaleX = (rx > ry) ? 1 : rx / ry;
-                    const scaleY = (rx > ry) ? ry / rx : 1;
+                    // const scaleX = (rx > ry) ? 1 : rx / ry;
+                    // const scaleY = (rx > ry) ? ry / rx : 1;
                     const isEllipse = mathAbs(rx - ry) > 1e-3;
@@ -1126,7 +1138,2 @@ let endAngle = startAngle + delta;
                 case CMD.Z:
-                    if (pendingPtDist > 0) {
-                        ctx.lineTo(pendingPtX, pendingPtY);
-                        pendingPtDist = 0;
-                    }
-
                     if (drawPart) {
@@ -1149,2 +1156,11 @@ const l = pathSegLen[segCount++];
 
+    clone() {
+        const newProxy = new PathProxy();
+        const data = this.data;
+        newProxy.data = data.slice ? data.slice()
+            : Array.prototype.slice.call(data);
+        newProxy._len = this._len;
+        return newProxy;
+    }
+
     private static initDefaultProps = (function () {
@@ -1171,2 +1187,3 @@ const proto = PathProxy.prototype;
     arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean): void
+    // eslint-disable-next-line max-len
     ellipse(cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean): void
@@ -1173,0 +1190,0 @@ rect(x: number, y: number, width: number, height: number): void

src/core/Point.ts

@@ -1,2 +0,2 @@
-import { MatrixArray } from "./matrix";
+import { MatrixArray } from './matrix';
 
@@ -3,0 +3,0 @@ export interface PointLike {

src/core/Transformable.ts

@@ -46,2 +46,9 @@ import * as matrix from './matrix';
     /**
+     * Get computed local transform
+     */
+    getLocalTransform(m?: matrix.MatrixArray) {
+        return Transformable.getLocalTransform(this, m);
+    }
+
+    /**
      * Set position from array
@@ -92,8 +99,7 @@ */
     updateTransform() {
-        const parent = this.parent;
-        const parentHasTransform = parent && parent.transform;
+        const parentTransform = this.parent && this.parent.transform;
         const needLocalTransform = this.needLocalTransform();
 
         let m = this.transform;
-        if (!(needLocalTransform || parentHasTransform)) {
+        if (!(needLocalTransform || parentTransform)) {
             m && mIdentity(m);
@@ -113,8 +119,8 @@ return;
         // 应用父节点变换
-        if (parentHasTransform) {
+        if (parentTransform) {
             if (needLocalTransform) {
-                matrix.mul(m, parent.transform, m);
+                matrix.mul(m, parentTransform, m);
             }
             else {
-                matrix.copy(m, parent.transform);
+                matrix.copy(m, parentTransform);
             }
@@ -146,8 +152,2 @@ }
     }
-    /**
-     * Get computed local transform
-     */
-    getLocalTransform(m?: matrix.MatrixArray) {
-        return Transformable.getLocalTransform(this, m);
-    }
 
@@ -185,4 +185,2 @@ /**
 
-
-
         const shearX = Math.PI / 2 + rotation - Math.atan2(m[3], m[2]);
@@ -289,3 +287,12 @@ sy = Math.sqrt(sy) * Math.cos(shearX);
 
+    copyTransform(source: Transformable) {
+        const target = this;
 
+        for (let i = 0; i < TRANSFORMABLE_PROPS.length; i++) {
+            const propName = TRANSFORMABLE_PROPS[i];
+            target[propName] = source[propName];
+        }
+    }
+
+
     static getLocalTransform(target: Transformable, m?: matrix.MatrixArray): matrix.MatrixArray {
@@ -347,2 +354,6 @@ m = m || [];
 
+export const TRANSFORMABLE_PROPS = [
+    'x', 'y', 'originX', 'originY', 'rotation', 'scaleX', 'scaleY', 'skewX', 'skewY'
+] as const;
+
 export default Transformable;

src/core/types.ts

@@ -67,3 +67,3 @@ export type Dictionary<T> = {
     'mouseover' | 'mouseup' | 'mousedown' | 'mousemove' | 'contextmenu' |
-    'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop';
+    'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop' | 'globalout';
 
@@ -94,1 +94,4 @@ export type ElementEventNameWithOn = 'onclick' | 'ondblclick' | 'onmousewheel' | 'onmouseout' |
 export type KeyOfDistributive<T> = T extends unknown ? keyof T : never;
+
+export type WithThisType<Func extends (...args: any) => any, This> =
+    (this: This, ...args: Parameters<Func>) => ReturnType<Func>;

src/core/util.ts

@@ -731,22 +731,2 @@ import { Dictionary, ArrayLike, KeyOfDistributive } from './types';
 
-/**
- * Change prototype of object.
- * It will replace the prototype if Object.setPrototypeOf is supported by browser.
- * Otherwise it will create a new object and return.
- */
-// export function changePrototype<T>(obj: T, proto: object): T {
-//     if (Object.setPrototypeOf) {
-//         Object.setPrototypeOf(obj, proto);
-//         return obj;
-//     }
-//     else {
-//         const StyleCtor = function () {};
-//         StyleCtor.prototype = proto;
-//         const newObj = new (StyleCtor as any)();
-//         extend(newObj, obj);
-//         return newObj;
-//     }
-// }
-
-
 export function createObject<T>(proto?: object, properties?: T): T {
@@ -753,0 +733,0 @@ // Performance of Object.create

src/core/WeakMap.ts

 let wmUniqueIndex = Math.round(Math.random() * 9);
 
+const supportDefineProperty = typeof Object.defineProperty === 'function';
+
 export default class WeakMap<K extends object, V> {
@@ -17,3 +19,3 @@
         const target = this._guard(key) as any;
-        if (typeof Object.defineProperty === 'function') {
+        if (supportDefineProperty) {
             Object.defineProperty(target, this._id, {
@@ -20,0 +22,0 @@ value: value,

src/debug/showDebugDirtyRect.ts

@@ -20,3 +20,3 @@ import type { ZRenderType } from '../zrender';
             border: '1px solid #00f'
-        })
+        });
         dom.style.cssText = `
@@ -23,0 +23,0 @@ position: absolute;

src/Element.ts

@@ -11,3 +11,3 @@ import Transformable from './core/Transformable';
 import BoundingRect, { RectLike } from './core/BoundingRect';
-import Eventful, {EventQuery, EventCallback} from './core/Eventful';
+import Eventful from './core/Eventful';
 import ZRText, { DefaultTextStyle } from './graphic/Text';
@@ -32,3 +32,3 @@ import { calculateTextPosition, TextPositionCalculationResult, parsePercent } from './contain/text';
 import env from './core/env';
-import { REDARAW_BIT, STYLE_CHANGED_BIT } from './graphic/constants';
+import { REDARAW_BIT } from './graphic/constants';
 
@@ -289,12 +289,19 @@ export interface ElementAnimateConfig {
 
+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
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface Element<Props extends ElementProps = ElementProps> extends Transformable,
+    Eventful<{
+        [key in ElementEventName]: (e: ElementEvent) => void | boolean
+    } & {
+        [key in string]: (...args: any) => void | boolean
+    }>,
+    ElementEventHandlerProps {
 }
@@ -493,2 +500,3 @@
         this.updateTransform();
+
         if (this.__dirty) {
@@ -508,3 +516,3 @@ this.updateInnerText();
             const isLocal = textConfig.local;
-            const attachedTransform = textEl.attachedTransform;
+            const innerTransformable = textEl.innerTransformable;
 
@@ -516,24 +524,10 @@ let textAlign: TextAlign;
 
-            // TODO Restore the element after textConfig changed.
+            // Apply host's transform.
+            innerTransformable.parent = isLocal ? this as unknown as Group : null;
 
-            // 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;
-            }
-
             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.
@@ -561,4 +555,4 @@ if (textConfig.position != null) {
                 // Or textContent is detached.
-                attachedTransform.x = tmpTextPosCalcRes.x;
-                attachedTransform.y = tmpTextPosCalcRes.y;
+                innerTransformable.x = tmpTextPosCalcRes.x;
+                innerTransformable.y = tmpTextPosCalcRes.y;
 
@@ -584,4 +578,4 @@ // User specified align/verticalAlign has higher priority, which is
                     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);
                 }
@@ -592,3 +586,3 @@ }
             if (textConfig.rotation != null) {
-                attachedTransform.rotation = textConfig.rotation;
+                innerTransformable.rotation = textConfig.rotation;
             }
@@ -599,9 +593,9 @@
             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];
                 }
@@ -1301,3 +1295,3 @@ }
 
-        textEl.attachedTransform = new Transformable();
+        textEl.innerTransformable = new Transformable();
 
@@ -1337,3 +1331,3 @@ this._attachComponent(textEl);
         if (textEl) {
-            textEl.attachedTransform = null;
+            textEl.innerTransformable = null;
             this._detachComponent(textEl);
@@ -1417,2 +1411,6 @@ this._textContent = null;
     addSelfToZr(zr: ZRenderType) {
+        if (this.__zr === zr) {
+            return;
+        }
+
         this.__zr = zr;
@@ -1443,2 +1441,6 @@ // 添加动画
     removeSelfFromZr(zr: ZRenderType) {
+        if (!this.__zr) {
+            return;
+        }
+
         this.__zr = null;
@@ -1581,3 +1583,3 @@ // Remove animation
     animateFrom(
-        target: Props, cfg: Omit<ElementAnimateConfig, 'setToFinal'>, animationProps?: MapToType<Props, boolean>
+        target: Props, cfg: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>
     ) {
@@ -1626,5 +1628,3 @@ animateTo(this, target, cfg, animationProps, true);
      */
-    calculateTextPosition: (
-        out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike
-    ) => TextPositionCalculationResult
+    calculateTextPosition: ElementCalculateTextPosition;
 
@@ -1631,0 +1631,0 @@ protected static initDefaultProps = (function () {

src/export.ts

@@ -11,4 +11,5 @@ /**
 import {parseSVG} from './tool/parseSVG';
-import {morphPath} from './tool/morphPath';
 
+import * as morphPathTool from './tool/morphPath';
+
 export {default as Point, PointLike} from './core/Point';
@@ -69,5 +70,6 @@
 
+export {morphPathTool as morph};
+
 export {parseSVG};
-export {morphPath};
 
 export {default as showDebugDirtyRect} from './debug/showDebugDirtyRect';

src/graphic/Displayable.ts

@@ -82,2 +82,3 @@ /**
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Displayable<Props extends DisplayableProps = DisplayableProps> {
@@ -84,0 +85,0 @@ animate(key?: '', loop?: boolean): Animator<this>

src/graphic/Group.ts

@@ -116,2 +116,10 @@ /**
 
+    replace(oldChild: Element, newChild: Element) {
+        const idx = zrUtil.indexOf(this._children, oldChild);
+        if (idx >= 0) {
+            this.replaceAt(newChild, idx);
+        }
+        return this;
+    }
+
     replaceAt(child: Element, index: number) {
@@ -216,2 +224,3 @@ const children = this._children;
      */
+    // TODO Group itself should also invoke the callback.
     traverse<T>(
@@ -286,3 +295,7 @@ cb: (this: T, el: Element) => boolean | void,
 Group.prototype.type = 'group';
+// Storage will use childrenRef to get children to render.
+export interface GroupLike extends Element {
+    childrenRef(): Element[]
+}
 
 export default Group;

src/graphic/helper/dashStyle.ts

@@ -8,5 +8,5 @@ import { isArray, isNumber } from '../../core/util';
     lineWidth = lineWidth || 1;
-    return lineType === 'dashed' 
+    return lineType === 'dashed'
         ? [4 * lineWidth, 2 * lineWidth]
-        : lineType === 'dotted' 
+        : lineType === 'dotted'
             ? [lineWidth]
@@ -13,0 +13,0 @@ : isNumber(lineType)

src/graphic/helper/roundSector.ts

@@ -25,5 +25,5 @@ import PathProxy, { normalizeArcAngles } from '../../core/PathProxy';
 function intersect(
-    x0: number, y0: number, 
-    x1: number, y1: number, 
-    x2: number, y2: number, 
+    x0: number, y0: number,
+    x1: number, y1: number,
+    x2: number, y2: number,
     x3: number, y3: number
@@ -45,5 +45,5 @@ ): [number, number] {
 function computeCornerTangents(
-    x0: number, y0: number, 
-    x1: number, y1: number, 
-    radius: number, cr: number, 
+    x0: number, y0: number,
+    x1: number, y1: number,
+    radius: number, cr: number,
     clockwise: boolean
@@ -155,3 +155,3 @@ ): CornerTangents {
         ctx.moveTo(
-            x + radius * mathCos(startAngle), 
+            x + radius * mathCos(startAngle),
             y + radius * mathSin(startAngle)
@@ -163,3 +163,3 @@ );
             ctx.moveTo(
-                x + innerRadius * mathCos(endAngle), 
+                x + innerRadius * mathCos(endAngle),
                 y + innerRadius * mathSin(endAngle)
@@ -226,11 +226,13 @@ );
             if (cr1 < cr) {
+                // eslint-disable-next-line max-len
                 ctx.arc(x + ct0.cx, y + ct0.cy, cr1, mathATan2(ct0.y01, ct0.x01), mathATan2(ct1.y01, ct1.x01), !clockwise);
             }
             else {
-              // draw the two corners and the ring
-              ctx.arc(x + ct0.cx, y + ct0.cy, cr1, mathATan2(ct0.y01, ct0.x01), mathATan2(ct0.y11, ct0.x11), !clockwise);
-
-              ctx.arc(x, y, radius, mathATan2(ct0.cy + ct0.y11, ct0.cx + ct0.x11), mathATan2(ct1.cy + ct1.y11, ct1.cx + ct1.x11), !clockwise);
-
-              ctx.arc(x + ct1.cx, y + ct1.cy, cr1, mathATan2(ct1.y11, ct1.x11), mathATan2(ct1.y01, ct1.x01), !clockwise);
+                // draw the two corners and the ring
+                // eslint-disable-next-line max-len
+                ctx.arc(x + ct0.cx, y + ct0.cy, cr1, mathATan2(ct0.y01, ct0.x01), mathATan2(ct0.y11, ct0.x11), !clockwise);
+                // eslint-disable-next-line max-len
+                ctx.arc(x, y, radius, mathATan2(ct0.cy + ct0.y11, ct0.cx + ct0.x11), mathATan2(ct1.cy + ct1.y11, ct1.cx + ct1.x11), !clockwise);
+                // eslint-disable-next-line max-len
+                ctx.arc(x + ct1.cx, y + ct1.cy, cr1, mathATan2(ct1.y11, ct1.x11), mathATan2(ct1.y01, ct1.x01), !clockwise);
             }
@@ -256,2 +258,3 @@ }
             if (cr0 < icr) {
+                // eslint-disable-next-line max-len
                 ctx.arc(x + ct0.cx, y + ct0.cy, cr0, mathATan2(ct0.y01, ct0.x01), mathATan2(ct1.y01, ct1.x01), !clockwise);
@@ -261,7 +264,8 @@ }
             else {
-              ctx.arc(x + ct0.cx, y + ct0.cy, cr0, mathATan2(ct0.y01, ct0.x01), mathATan2(ct0.y11, ct0.x11), !clockwise);
-
-              ctx.arc(x, y, innerRadius, mathATan2(ct0.cy + ct0.y11, ct0.cx + ct0.x11), mathATan2(ct1.cy + ct1.y11, ct1.cx + ct1.x11), clockwise);
-
-              ctx.arc(x + ct1.cx, y + ct1.cy, cr0, mathATan2(ct1.y11, ct1.x11), mathATan2(ct1.y01, ct1.x01), !clockwise);
+                // eslint-disable-next-line max-len
+                ctx.arc(x + ct0.cx, y + ct0.cy, cr0, mathATan2(ct0.y01, ct0.x01), mathATan2(ct0.y11, ct0.x11), !clockwise);
+                // eslint-disable-next-line max-len
+                ctx.arc(x, y, innerRadius, mathATan2(ct0.cy + ct0.y11, ct0.cx + ct0.x11), mathATan2(ct1.cy + ct1.y11, ct1.cx + ct1.x11), clockwise);
+                // eslint-disable-next-line max-len
+                ctx.arc(x + ct1.cx, y + ct1.cy, cr0, mathATan2(ct1.y11, ct1.x11), mathATan2(ct1.y01, ct1.x01), !clockwise);
             }
@@ -268,0 +272,0 @@ }

src/graphic/Path.ts

@@ -102,3 +102,3 @@ import Displayable, { DisplayableProps,
         shapeCfg: Dictionary<any>,
-        inBundle?: boolean
+        inBatch?: boolean
     ) => void
@@ -111,2 +111,3 @@ }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Path<Props extends PathProps = PathProps> {
@@ -307,3 +308,3 @@ animate(key?: '', loop?: boolean): Animator<this>
         shapeCfg: Dictionary<any>,
-        inBundle?: boolean
+        inBatch?: boolean
     ) {}
@@ -315,2 +316,10 @@
 
+    getUpdatedPathProxy(inBatch?: boolean) {
+        // Update path proxy data to latest.
+        !this.path && this.createPathProxy();
+        this.path.beginPath();
+        this.buildPath(this.path, this.shape, inBatch);
+        return this.path;
+    }
+
     createPathProxy() {
@@ -621,3 +630,3 @@ this.path = new PathProxy(false);
         calculateTextPosition?: Element['calculateTextPosition']
-        buildPath(this: Path, ctx: CanvasRenderingContext2D | PathProxy, shape: Shape, inBundle?: boolean): void
+        buildPath(this: Path, ctx: CanvasRenderingContext2D | PathProxy, shape: Shape, inBatch?: boolean): void
         init?(this: Path, opts: PathProps): void // TODO Should be SubPathOption
@@ -624,0 +633,0 @@ }): {

src/graphic/shape/Sector.ts

@@ -33,3 +33,3 @@ import Path, { PathProps } from '../Path';
     buildPath(ctx: CanvasRenderingContext2D, shape: SectorShape) {
-        roundSectorHelper.buildPath(ctx, shape)
+        roundSectorHelper.buildPath(ctx, shape);
     }
@@ -36,0 +36,0 @@

src/graphic/Text.ts

@@ -13,4 +13,8 @@ /**
 import BoundingRect from '../core/BoundingRect';
-import { MatrixArray, copy } from '../core/matrix';
-import Displayable, { DisplayableStatePropNames, DisplayableProps, DEFAULT_COMMON_ANIMATION_PROPS } from './Displayable';
+import { MatrixArray } from '../core/matrix';
+import Displayable, {
+    DisplayableStatePropNames,
+    DisplayableProps,
+    DEFAULT_COMMON_ANIMATION_PROPS
+} from './Displayable';
 import { ZRenderType } from '../zrender';
@@ -20,2 +24,3 @@ import Animator from '../animation/Animator';
 import { ElementCommonState } from '../Element';
+import { GroupLike } from './Group';
 
@@ -253,3 +258,3 @@ type TextContentBlock = ReturnType<typeof parseRichText>
 
-class ZRText extends Displayable<TextProps> {
+class ZRText extends Displayable<TextProps> implements GroupLike {
 
@@ -268,6 +273,7 @@ type = 'text'
     /**
-     * Calculated transform after the text is attached on some element.
-     * Will override the default transform.
+     * Will use this to calculate transform matrix
+     * instead of Element itseelf if it's give.
+     * Not exposed to developers
      */
-    attachedTransform: Transformable
+    innerTransformable: Transformable
 
@@ -290,2 +296,5 @@ private _children: (ZRImage | Rect | TSpan)[] = []
     update() {
+
+        super.update();
+
         // Update children
@@ -296,3 +305,2 @@ if (this.styleChanged()) {
 
-
         for (let i = 0; i < this._children.length; i++) {
@@ -308,21 +316,25 @@ const child = this._children[i];
         }
+    }
 
-        const attachedTransform = this.attachedTransform;
-        if (attachedTransform) {
-            attachedTransform.updateTransform();
-            const m = attachedTransform.transform;
-            if (m) {
-                this.transform = this.transform || [];
-                // Copy to the transform will be actually used.
-                copy(this.transform, m);
+     updateTransform() {
+        const innerTransformable = this.innerTransformable;
+        if (innerTransformable) {
+            innerTransformable.updateTransform();
+            if (innerTransformable.transform) {
+                this.transform = innerTransformable.transform;
             }
-            else {
-                this.transform = null;
-            }
         }
         else {
-            super.update();
+            super.updateTransform();
         }
     }
 
+    getLocalTransform(m?: MatrixArray): MatrixArray {
+        const innerTransformable = this.innerTransformable;
+        return innerTransformable
+            ? innerTransformable.getLocalTransform(m)
+            : super.getLocalTransform(m);
+    }
+
+    // TODO override setLocalTransform?
     getComputedTransform() {
@@ -336,4 +348,3 @@ if (this.__hostTarget) {
 
-        return this.attachedTransform ? this.attachedTransform.getComputedTransform()
-            : super.getComputedTransform();
+        return super.getComputedTransform();
     }
@@ -745,3 +756,3 @@
         let defaultLineWidth = 0;
-        const textFill = getStroke(
+        const textFill = getFill(
             'fill' in tokenStyle ? tokenStyle.fill
@@ -822,3 +833,3 @@ : 'fill' in style ? style.fill
         let imgEl: ZRImage;
-        if (isPlainOrGradientBg || (textBorderWidth && textBorderColor)) {
+        if (isPlainOrGradientBg || style.lineHeight || (textBorderWidth && textBorderColor)) {
             // Background is color
@@ -998,2 +1009,3 @@ rectEl = this._getOrCreateChild(Rect);
         style.backgroundColor
+        || style.lineHeight
         || (style.borderWidth && style.borderColor)
@@ -1000,0 +1012,0 @@ );

src/PainterBase.ts

@@ -7,6 +7,6 @@ import Path from './graphic/Path';
 
-interface PainterOption {
-    width?: number | string  // Can be 10 / 10px / auto
-    height?: number | string
-}
+// interface PainterOption {
+//     width?: number | string  // Can be 10 / 10px / auto
+//     height?: number | string
+// }
 
@@ -13,0 +13,0 @@ export interface PainterBase {

src/Storage.ts

 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';
@@ -136,4 +136,4 @@
         // 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();
 
@@ -140,0 +140,0 @@ for (let i = 0; i < children.length; i++) {

src/svg/core.ts

@@ -0,3 +1,23 @@
+import { parse } from '../tool/color';
+
 export function createElement(name: string) {
     return document.createElementNS('http://www.w3.org/2000/svg', name);
-}
+}
+
+export function normalizeColor(color: string): { color: string, opacity: number } {
+    let opacity;
+    if (!color || color === 'transparent') {
+        color = 'none';
+    }
+    else if (typeof color === 'string' && color.indexOf('rgba') > -1) {
+        const arr = parse(color);
+        if (arr) {
+            color = 'rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ')';
+            opacity = arr[3];
+        }
+    }
+    return {
+        color,
+        opacity: opacity == null ? 1 : opacity
+    };
+}

src/svg/graphic.ts

@@ -5,3 +5,3 @@ // TODO
 
-import {createElement} from './core';
+import {createElement, normalizeColor} from './core';
 import { PathRebuilder } from '../core/PathProxy';
@@ -96,8 +96,10 @@ import * as matrix from '../core/matrix';
     if (pathHasFill(style)) {
-        let fill = style.fill;
-        fill = fill === 'transparent' ? NONE : fill;
-        attr(svgEl, 'fill', fill as string);
+        const fill = normalizeColor(style.fill as string);
+        attr(svgEl, 'fill', fill.color);
         attr(svgEl,
             'fill-opacity',
-            (style.fillOpacity != null ? style.fillOpacity * opacity : opacity) + ''
+            (style.fillOpacity != null
+                ? style.fillOpacity * fill.opacity * opacity
+                : fill.opacity * opacity
+            ) + ''
         );
@@ -110,5 +112,4 @@ }
     if (pathHasStroke(style)) {
-        let stroke = style.stroke;
-        stroke = stroke === 'transparent' ? NONE : stroke;
-        attr(svgEl, 'stroke', stroke as string);
+        const stroke = normalizeColor(style.stroke as string);
+        attr(svgEl, 'stroke', stroke.color);
         const strokeWidth = style.lineWidth;
@@ -121,3 +122,7 @@ const strokeScale = style.strokeNoScale
         attr(svgEl, 'paint-order', style.strokeFirst ? 'stroke' : 'fill');
-        attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
+        attr(svgEl, 'stroke-opacity', (
+            style.strokeOpacity != null
+                ? style.strokeOpacity * stroke.opacity * opacity
+                : stroke.opacity * opacity
+        ) + '');
         let lineDash = style.lineDash && strokeWidth > 0 && normalizeLineDash(style.lineDash, strokeWidth);
@@ -176,3 +181,10 @@ if (lineDash) {
     }
-    ellipse(cx: number, cy: number, rx: number, ry: number, psi: number, startAngle: number, endAngle: number, anticlockwise: boolean) {
+    ellipse(
+        cx: number, cy: number,
+        rx: number, ry: number,
+        psi: number,
+        startAngle: number,
+        endAngle: number,
+        anticlockwise: boolean
+    ) {
 
@@ -245,2 +257,3 @@ const firstCmd = this._d.length === 0;
         this._add('L', x, y);
+        this._add('Z');
     }
@@ -247,0 +260,0 @@ closePath() {

src/svg/helper/ClippathManager.ts

@@ -47,4 +47,7 @@ /**
         super.markAllUnused();
-        for (let key in this._refGroups) {
-            this.markDomUnused(this._refGroups[key]);
+        const refGroups = this._refGroups;
+        for (let key in refGroups) {
+            if (refGroups.hasOwnProperty(key)) {
+                this.markDomUnused(refGroups[key]);
+            }
         }
@@ -167,10 +170,13 @@ this._keyDuplicateCount = {};
         const newRefGroupsMap: Dictionary<SVGElement> = {};
-        for (let key in this._refGroups) {
-            const group = this._refGroups[key];
-            if (!this.isDomUnused(group)) {
-                newRefGroupsMap[key] = group;
+        const refGroups = this._refGroups;
+        for (let key in refGroups) {
+            if (refGroups.hasOwnProperty(key)) {
+                const group = refGroups[key];
+                if (!this.isDomUnused(group)) {
+                    newRefGroupsMap[key] = group;
+                }
+                else if (group.parentNode) {
+                    group.parentNode.removeChild(group);
+                }
             }
-            else if (group.parentNode) {
-                group.parentNode.removeChild(group);
-            }
         }
@@ -177,0 +183,0 @@ this._refGroups = newRefGroupsMap;

src/svg/helper/ShadowManager.ts

@@ -10,2 +10,3 @@ /**
 import { Dictionary } from '../../core/types';
+import { normalizeColor } from '../core';
 
@@ -39,3 +40,3 @@ type DisplayableExtended = Displayable & {
             shadowDom.setAttribute('id', 'zr' + this._zrId + '-shadow-' + this.nextId++);
-            const domChild = this.createElement('feDropShadow')
+            const domChild = this.createElement('feDropShadow');
             shadowDom.appendChild(domChild);
@@ -103,7 +104,8 @@ this.addDom(shadowDom);
         let blur = style.shadowBlur;
-        let color = style.shadowColor;
+        const normalizedColor = normalizeColor(style.shadowColor);
 
         domChild.setAttribute('dx', offsetX / scaleX + '');
         domChild.setAttribute('dy', offsetY / scaleY + '');
-        domChild.setAttribute('flood-color', color);
+        domChild.setAttribute('flood-color', normalizedColor.color);
+        domChild.setAttribute('flood-opacity', normalizedColor.opacity + '');
 
@@ -140,5 +142,7 @@ // Divide by two here so that it looks the same as in canvas
         // let currentUsedShadow = 0;
-        for (let key in this._shadowDomMap) {
-            const dom = this._shadowDomMap[key];
-            shadowDomsPool.push(dom);
+        const shadowDomMap = this._shadowDomMap;
+        for (let key in shadowDomMap) {
+            if (shadowDomMap.hasOwnProperty(key)) {
+                shadowDomsPool.push(shadowDomMap[key]);
+            }
             // currentUsedShadow++;
@@ -145,0 +149,0 @@ }

src/svg/Painter.ts

@@ -6,3 +6,3 @@ /**
 
-import {createElement} from './core';
+import {createElement, normalizeColor} from './core';
 import * as util from '../core/util';
@@ -198,3 +198,6 @@ import Path from '../graphic/Path';
         bgNode.setAttribute('id', 0 as any);
-        bgNode.style.fill = backgroundColor;
+        const { color, opacity } = normalizeColor(backgroundColor);
+        bgNode.setAttribute('fill', color);
+        bgNode.setAttribute('fill-opacity', opacity as any);
+
         this._backgroundRoot.appendChild(bgNode);
@@ -446,9 +449,7 @@ this._backgroundNode = bgNode;
 
-        this._svgRoot
-            = this._backgroundRoot
-            = this._svgDom
-            = this._backgroundNode
-            = this._viewport
-            = this.storage
-            = null;
+        this._svgRoot =
+            this._backgroundRoot =
+            this._svgDom =
+            this._backgroundNode =
+            this._viewport = this.storage = null;
     }
@@ -455,0 +456,0 @@

src/tool/morphPath.ts

@@ -5,226 +5,12 @@ import PathProxy from '../core/PathProxy';
 import Element, { ElementAnimateConfig } from '../Element';
-import { defaults, assert, noop, clone } from '../core/util';
+import { defaults, map } from '../core/util';
 import { lerp } from '../core/vector';
-import Rect from '../graphic/shape/Rect';
-import Sector from '../graphic/shape/Sector';
+import Group, { GroupLike } from '../graphic/Group';
+import { clonePath } from './path';
+import { MatrixArray } from '../core/matrix';
+import Transformable from '../core/Transformable';
 import { ZRenderType } from '../zrender';
-import Group from '../graphic/Group';
+import { split } from './dividePath';
+import { pathToBezierCurves } from './convertPath';
 
-const CMD = PathProxy.CMD;
-const PI2 = Math.PI * 2;
-
-const PROP_XY = ['x', 'y'] as const;
-const PROP_WH = ['width', 'height'] as const;
-
-const tmpArr: number[] = [];
-
-
-interface CombiningPath extends Path {
-    __combiningSubList: Path[];
-    __oldAddSelfToZr: Element['addSelfToZr'];
-    __oldRemoveSelfFromZr: Element['removeSelfFromZr'];
-    __oldBuildPath: Path['buildPath'];
-    // See `Stroage['_updateAndAddDisplayable']`
-    childrenRef(): Path[];
-}
-
-export type MorphDividingMethod = 'split' | 'duplicate';
-
-export interface CombineSeparateConfig extends ElementAnimateConfig {
-    dividingMethod?: MorphDividingMethod;
-}
-
-export interface CombineSeparateResult {
-    // The length of `fromIndividuals`, `toIndividuals`
-    // are the same as `count`.
-    fromIndividuals: Path[];
-    toIndividuals: Path[];
-    count: number;
-}
-
-function aroundEqual(a: number, b: number) {
-    return Math.abs(a - b) < 1e-5;
-}
-
-export function pathToBezierCurves(path: PathProxy) {
-
-    const data = path.data;
-    const len = path.len();
-
-    const bezierArray: number[][] = [];
-    let currentSubpath: number[];
-
-    let xi = 0;
-    let yi = 0;
-    let x0 = 0;
-    let y0 = 0;
-
-    function createNewSubpath(x: number, y: number) {
-        // More than one M command
-        if (currentSubpath && currentSubpath.length > 2) {
-            bezierArray.push(currentSubpath);
-        }
-        currentSubpath = [x, y];
-    }
-
-    function addLine(x0: number, y0: number, x1: number, y1: number) {
-        if (!(aroundEqual(x0, x1) && aroundEqual(y0, y1))) {
-            currentSubpath.push(x0, y0, x1, y1, x1, y1);
-        }
-    }
-
-    function addArc(startAngle: number, endAngle: number, cx: number, cy: number, rx: number, ry: number) {
-        // https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves
-        const delta = Math.abs(endAngle - startAngle);
-        const len = Math.tan(delta / 4) * 4 / 3;
-        const dir = endAngle < startAngle ? -1 : 1;
-
-        const c1 = Math.cos(startAngle);
-        const s1 = Math.sin(startAngle);
-        const c2 = Math.cos(endAngle);
-        const s2 = Math.sin(endAngle);
-
-        const x1 = c1 * rx + cx;
-        const y1 = s1 * ry + cy;
-
-        const x4 = c2 * rx + cx;
-        const y4 = s2 * ry + cy;
-
-        const hx = rx * len * dir;
-        const hy = ry * len * dir;
-        currentSubpath.push(
-            // Move control points on tangent.
-            x1 - hx * s1, y1 + hy * c1,
-            x4 + hx * s2, y4 - hy * c2,
-            x4, y4
-        );
-    }
-
-    let x1;
-    let y1;
-    let x2;
-    let y2;
-
-    for (let i = 0; i < len;) {
-        const cmd = data[i++];
-        const isFirst = i === 1;
-
-        if (isFirst) {
-            // 如果第一个命令是 L, C, Q
-            // 则 previous point 同绘制命令的第一个 point
-            // 第一个命令为 Arc 的情况下会在后面特殊处理
-            xi = data[i];
-            yi = data[i + 1];
-
-            x0 = xi;
-            y0 = yi;
-
-            if (cmd === CMD.L || cmd === CMD.C || cmd === CMD.Q) {
-                // Start point
-                currentSubpath = [x0, y0];
-            }
-        }
-
-        switch (cmd) {
-            case CMD.M:
-                // moveTo 命令重新创建一个新的 subpath, 并且更新新的起点
-                // 在 closePath 的时候使用
-                xi = x0 = data[i++];
-                yi = y0 = data[i++];
-
-                createNewSubpath(x0, y0);
-                break;
-            case CMD.L:
-                x1 = data[i++];
-                y1 = data[i++];
-                addLine(xi, yi, x1, y1);
-                xi = x1;
-                yi = y1;
-                break;
-            case CMD.C:
-                currentSubpath.push(
-                    data[i++], data[i++], data[i++], data[i++],
-                    xi = data[i++], yi = data[i++]
-                );
-                break;
-            case CMD.Q:
-                x1 = data[i++];
-                y1 = data[i++];
-                x2 = data[i++];
-                y2 = data[i++];
-                currentSubpath.push(
-                    // Convert quadratic to cubic
-                    xi + 2 / 3 * (x1 - xi), yi + 2 / 3 * (y1 - yi),
-                    x2 + 2 / 3 * (x1 - x2), y2 + 2 / 3 * (y1 - y2),
-                    x2, y2
-                );
-                xi = x2;
-                yi = y2;
-                break;
-            case CMD.A:
-                const cx = data[i++];
-                const cy = data[i++];
-                const rx = data[i++];
-                const ry = data[i++];
-                const startAngle = data[i++];
-                const endAngle = data[i++] + startAngle;
-
-                // TODO Arc rotation
-                i += 1;
-                const anticlockwise = !data[i++];
-
-                x1 = Math.cos(startAngle) * rx + cx;
-                y1 = Math.sin(startAngle) * ry + cy;
-                if (isFirst) {
-                    // 直接使用 arc 命令
-                    // 第一个命令起点还未定义
-                    x0 = x1;
-                    y0 = y1;
-                    createNewSubpath(x0, y0);
-                }
-                else {
-                    // Connect a line between current point to arc start point.
-                    addLine(xi, yi, x1, y1);
-                }
-
-                xi = Math.cos(endAngle) * rx + cx;
-                yi = Math.sin(endAngle) * ry + cy;
-
-                const step = (anticlockwise ? -1 : 1) * Math.PI / 2;
-
-                for (let angle = startAngle; anticlockwise ? angle > endAngle : angle < endAngle; angle += step) {
-                    const nextAngle = anticlockwise ? Math.max(angle + step, endAngle)
-                        : Math.min(angle + step, endAngle);
-                    addArc(angle, nextAngle, cx, cy, rx, ry);
-                }
-
-                break;
-            case CMD.R:
-                x0 = xi = data[i++];
-                y0 = yi = data[i++];
-                x1 = x0 + data[i++];
-                y1 = y0 + data[i++];
-
-                // rect is an individual path.
-                createNewSubpath(x1, y0);
-                addLine(x1, y0, x1, y1);
-                addLine(x1, y1, x0, y1);
-                addLine(x0, y1, x0, y0);
-                addLine(x0, y0, x1, y0);
-                break;
-            case CMD.Z:
-                currentSubpath && addLine(xi, yi, x0, y0);
-                xi = x0;
-                yi = y0;
-                break;
-        }
-    }
-
-    if (currentSubpath && currentSubpath.length > 2) {
-        bezierArray.push(currentSubpath);
-    }
-
-    return bezierArray;
-}
-
 function alignSubpath(subpath1: number[], subpath2: number[]): [number[], number[]] {
@@ -236,2 +22,4 @@ const len1 = subpath1.length;
     }
+    const tmpSegX: number[] = [];
+    const tmpSegY: number[] = [];
 
@@ -249,5 +37,2 @@ const shorterPath = len1 < len2 ? subpath1 : subpath2;
 
-    const tmpSegX: number[] = [];
-    const tmpSegY: number[] = [];
-
     for (let i = 2; i < shorterLen;) {
@@ -352,6 +137,9 @@ let x0 = shorterPath[i - 2];
     __morphT: number;
-    __oldBuildPath: Path['buildPath'];
-    __morphingData: MorphingData;
 }
 
+export interface CombineMorphingPath extends Path {
+    childrenRef(): (CombineMorphingPath | Path)[]
+    __isCombineMorphing: boolean;
+}
+
 export function centroid(array: number[]) {
@@ -550,2 +338,147 @@ // https://en.wikipedia.org/wiki/Centroid#Of_a_polygon
 
+export function isCombineMorphing(path: Element): path is CombineMorphingPath {
+    return (path as CombineMorphingPath).__isCombineMorphing;
+}
+
+export function isMorphing(el: Element) {
+    return (el as MorphingPath).__morphT >= 0;
+}
+
+const SAVED_METHOD_PREFIX = '__mOriginal_';
+function saveAndModifyMethod<T extends object, M extends keyof T>(
+    obj: T,
+    methodName: M,
+    modifiers: { replace?: T[M], after?: T[M], before?: T[M] }
+) {
+    const savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    const originalMethod = (obj as any)[savedMethodName] || obj[methodName];
+    if (!(obj as any)[savedMethodName]) {
+        (obj as any)[savedMethodName] = obj[methodName];
+    }
+    const replace = modifiers.replace;
+    const after = modifiers.after;
+    const before = modifiers.before;
+
+    (obj as any)[methodName] = function () {
+        const args = arguments;
+        let res;
+        before && (before as unknown as Function).apply(this, args);
+        // Still call the original method if not replacement.
+        if (replace) {
+            res = (replace as unknown as Function).apply(this, args);
+        }
+        else {
+            res = originalMethod.apply(this, args);
+        }
+        after && (after as unknown as Function).apply(this, args);
+        return res;
+    };
+}
+function restoreMethod<T extends object>(
+    obj: T,
+    methodName: keyof T
+) {
+    const savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    if ((obj as any)[savedMethodName]) {
+        obj[methodName] = (obj as any)[savedMethodName];
+        (obj as any)[savedMethodName] = null;
+    }
+}
+
+function applyTransformOnBeziers(bezierCurves: number[][], mm: MatrixArray) {
+    for (let i = 0; i < bezierCurves.length; i++) {
+        const subBeziers = bezierCurves[i];
+        for (let k = 0; k < subBeziers.length;) {
+            const x = subBeziers[k];
+            const y = subBeziers[k + 1];
+
+            subBeziers[k++] = mm[0] * x + mm[2] * y + mm[4];
+            subBeziers[k++] = mm[1] * x + mm[3] * y + mm[5];
+        }
+    }
+}
+
+function prepareMorphPath(
+    fromPath: Path,
+    toPath: Path
+) {
+    const fromPathProxy = fromPath.getUpdatedPathProxy();
+    const toPathProxy = toPath.getUpdatedPathProxy();
+
+    const [fromBezierCurves, toBezierCurves] =
+        alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy));
+
+    const fromPathTransform = fromPath.getComputedTransform();
+    const toPathTransform = toPath.getComputedTransform();
+    function updateIdentityTransform(this: Transformable) {
+        this.transform = null;
+    }
+    fromPathTransform && applyTransformOnBeziers(fromBezierCurves, fromPathTransform);
+    toPathTransform && applyTransformOnBeziers(toBezierCurves, toPathTransform);
+    // Just ignore transform
+    saveAndModifyMethod(toPath, 'updateTransform', { replace: updateIdentityTransform });
+    toPath.transform = null;
+
+    const morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
+
+    const tmpArr: number[] = [];
+
+    saveAndModifyMethod(toPath, 'buildPath', { replace(path: PathProxy) {
+        const t = (toPath as MorphingPath).__morphT;
+        const onet = 1 - t;
+
+        const newCp: number[] = [];
+
+        for (let i = 0; i < morphingData.length; i++) {
+            const item = morphingData[i];
+            const from = item.from;
+            const to = item.to;
+            const angle = item.rotation * t;
+            const fromCp = item.fromCp;
+            const toCp = item.toCp;
+            const sa = Math.sin(angle);
+            const ca = Math.cos(angle);
+
+            lerp(newCp, fromCp, toCp, t);
+
+            for (let m = 0; m < from.length; m += 2) {
+                const x0 = from[m];
+                const y0 = from[m + 1];
+                const x1 = to[m];
+                const y1 = to[m + 1];
+
+                const x = x0 * onet + x1 * t;
+                const y = y0 * onet + y1 * t;
+
+                tmpArr[m] = (x * ca - y * sa) + newCp[0];
+                tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
+            }
+
+            let x0 = tmpArr[0];
+            let y0 = tmpArr[1];
+
+            path.moveTo(x0, y0);
+
+            for (let m = 2; m < from.length;) {
+                const x1 = tmpArr[m++];
+                const y1 = tmpArr[m++];
+                const x2 = tmpArr[m++];
+                const y2 = tmpArr[m++];
+                const x3 = tmpArr[m++];
+                const y3 = tmpArr[m++];
+
+                // Is a line.
+                if (x0 === x1 && y0 === y1 && x2 === x3 && y2 === y3) {
+                    path.lineTo(x3, y3);
+                }
+                else {
+                    path.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+                }
+                x0 = x3;
+                y0 = y3;
+            }
+        }
+    } });
+}
+
 /**
@@ -555,18 +488,6 @@ * Morphing from old path to new path.
 export function morphPath(
-    // `fromPath` only provides the current path state, which will
-    // not be rendered or kept.
-    // Note:
-    // should be able to handle `isIndividualMorphingPath(fromPath)` is `ture`.
     fromPath: Path,
-    // `toPath` is the target path that will be rendered and kept.
-    // Note:
-    // (1) `toPath` and `fromPath` might be the same.
-    // e.g., when triggering the same transition repeatly.
-    // (2) should be able to handle `isIndividualMorphingPath(toPath)` is `ture`.
     toPath: Path,
     animationOpts: ElementAnimateConfig
 ): Path {
-    let fromPathProxy: PathProxy;
-    let toPathProxy: PathProxy;
-
     if (!fromPath || !toPath) {
@@ -576,32 +497,20 @@ return toPath;
 
-    // Calculate the current path into `fromPathProxy` from `fromPathInput`.
-    !fromPath.path && fromPath.createPathProxy();
-    fromPathProxy = fromPath.path;
-    fromPathProxy.beginPath();
-    fromPath.buildPath(fromPathProxy, fromPath.shape);
+    const oldDone = animationOpts.done;
+    // const oldAborted = animationOpts.aborted;
+    const oldDuring = animationOpts.during;
 
-    // Calculate the target path into `toPathProxy` from `toPath`.
-    !toPath.path && toPath.createPathProxy();
-    toPathProxy = toPath.path;
-    // From and to might be the same path.
-    toPathProxy === fromPathProxy && (toPathProxy = new PathProxy(false));
-    toPathProxy.beginPath();
-    // toPath should always calculate the final state rather than morphing state.
-    if (isIndividualMorphingPath(toPath)) {
-        toPath.__oldBuildPath(toPathProxy, toPath.shape);
-    }
-    else {
-        toPath.buildPath(toPathProxy, toPath.shape);
-    }
+    prepareMorphPath(fromPath, toPath);
 
-    const [fromBezierCurves, toBezierCurves] =
-        alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy));
+    (toPath as MorphingPath).__morphT = 0;
 
-    const morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
-    becomeIndividualMorphingPath(toPath, morphingData, 0);
+    function restoreToPath() {
+        restoreMethod(toPath, 'buildPath');
+        restoreMethod(toPath, 'updateTransform');
+        // Mark as not in morphing
+        (toPath as MorphingPath).__morphT = -1;
+        // Cleanup.
+        toPath.createPathProxy();
+        toPath.dirtyShape();
+    }
 
-    const oldDone = animationOpts && animationOpts.done;
-    const oldAborted = animationOpts && animationOpts.aborted;
-    const oldDuring = animationOpts && animationOpts.during;
-
     toPath.animateTo({
@@ -615,11 +524,10 @@ __morphT: 1
         done() {
-            restoreIndividualMorphingPath(toPath);
-            // Cleanup.
-            toPath.createPathProxy();
-            toPath.dirtyShape();
+            restoreToPath();
             oldDone && oldDone();
-        },
-        aborted() {
-            oldAborted && oldAborted();
         }
+        // NOTE: Don't do restore if aborted.
+        // Because all status was just set when animation started.
+        // aborted() {
+        //     oldAborted && oldAborted();
+        // }
     } as ElementAnimateConfig, animationOpts));
@@ -630,273 +538,294 @@
 
-function morphingPathBuildPath(
-    this: Pick<MorphingPath, '__morphT' | '__morphingData'>,
-    path: PathProxy
-): void {
-    const morphingData = this.__morphingData;
-    const t = this.__morphT;
-    const onet = 1 - t;
+// https://github.com/mapbox/earcut/blob/master/src/earcut.js#L437
+// https://jsfiddle.net/pissang/2jk7x145/
+// function zOrder(x: number, y: number, minX: number, minY: number, maxX: number, maxY: number) {
+//     // Normalize coords to 0 - 1
+//     // The transformed into non-negative 15-bit integer range
+//     x = (maxX === minX) ? 0 : Math.round(32767 * (x - minX) / (maxX - minX));
+//     y = (maxY === minY) ? 0 : Math.round(32767 * (y - minY) / (maxY - minY));
 
-    const newCp: number[] = [];
-    for (let i = 0; i < morphingData.length; i++) {
-        const item = morphingData[i];
-        const from = item.from;
-        const to = item.to;
-        const angle = item.rotation * t;
-        const fromCp = item.fromCp;
-        const toCp = item.toCp;
-        const sa = Math.sin(angle);
-        const ca = Math.cos(angle);
+//     x = (x | (x << 8)) & 0x00FF00FF;
+//     x = (x | (x << 4)) & 0x0F0F0F0F;
+//     x = (x | (x << 2)) & 0x33333333;
+//     x = (x | (x << 1)) & 0x55555555;
 
-        lerp(newCp, fromCp, toCp, t);
+//     y = (y | (y << 8)) & 0x00FF00FF;
+//     y = (y | (y << 4)) & 0x0F0F0F0F;
+//     y = (y | (y << 2)) & 0x33333333;
+//     y = (y | (y << 1)) & 0x55555555;
 
-        for (let m = 0; m < from.length; m += 2) {
-            const x0 = from[m];
-            const y0 = from[m + 1];
-            const x1 = to[m];
-            const y1 = to[m + 1];
+//     return x | (y << 1);
+// }
 
-            const x = x0 * onet + x1 * t;
-            const y = y0 * onet + y1 * t;
+// https://github.com/w8r/hilbert/blob/master/hilbert.js#L30
+// https://jsfiddle.net/pissang/xdnbzg6v/
+function hilbert(x: number, y: number, minX: number, minY: number, maxX: number, maxY: number) {
+    const bits = 16;
+    x = (maxX === minX) ? 0 : Math.round(32767 * (x - minX) / (maxX - minX));
+    y = (maxY === minY) ? 0 : Math.round(32767 * (y - minY) / (maxY - minY));
 
-            tmpArr[m] = (x * ca - y * sa) + newCp[0];
-            tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
+    let d = 0;
+    let tmp: number;
+    for (let s = (1 << bits) / 2; s > 0; s /= 2) {
+        let rx = 0;
+        let ry = 0;
+
+        if ((x & s) > 0) {
+            rx = 1;
         }
+        if ((y & s) > 0) {
+            ry = 1;
+        }
 
-        for (let m = 0; m < from.length;) {
-            if (m === 0) {
-                path.moveTo(tmpArr[m++], tmpArr[m++]);
+        d += s * s * ((3 * rx) ^ ry);
+
+        if (ry === 0) {
+            if (rx === 1) {
+                x = s - 1 - x;
+                y = s - 1 - y;
             }
-            path.bezierCurveTo(
-                tmpArr[m++], tmpArr[m++],
-                tmpArr[m++], tmpArr[m++],
-                tmpArr[m++], tmpArr[m++]
-            );
+            tmp = x;
+            x = y;
+            y = tmp;
         }
     }
-};
+    return d;
+}
 
-function becomeIndividualMorphingPath(
-    path: Path,
-    morphingData: MorphingData,
-    morphT: number
-): void {
-    if (isIndividualMorphingPath(path)) {
-        updateIndividualMorphingPath(path, morphingData, morphT);
-        return;
-    }
+// Sort paths on hilbert. Not using z-order because it may still have large cross.
+// So the left most source can animate to the left most target, not right most target.
+// Hope in this way. We can make sure each element is animated to the proper target. Not the farthest.
+function sortPaths(pathList: Path[]): Path[] {
+    let xMin = Infinity;
+    let yMin = Infinity;
+    let xMax = -Infinity;
+    let yMax = -Infinity;
+    const cps = map(pathList, path => {
+        const rect = path.getBoundingRect();
+        const m = path.getComputedTransform();
+        const x = rect.x + rect.width / 2 + (m ? m[4] : 0);
+        const y = rect.y + rect.height / 2 + (m ? m[5] : 0);
+        xMin = Math.min(x, xMin);
+        yMin = Math.min(y, yMin);
+        xMax = Math.max(x, xMax);
+        yMax = Math.max(y, yMax);
+        return [x, y];
+    });
 
-    const morphingPath = path as MorphingPath;
-    morphingPath.__oldBuildPath = morphingPath.buildPath;
-    morphingPath.buildPath = morphingPathBuildPath;
-    updateIndividualMorphingPath(morphingPath, morphingData, morphT);
-}
+    const items = map(cps, (cp, idx) => {
+        return {
+            cp,
+            z: hilbert(cp[0], cp[1], xMin, yMin, xMax, yMax),
+            path: pathList[idx]
+        };
+    });
 
-function updateIndividualMorphingPath(
-    morphingPath: MorphingPath,
-    morphingData: MorphingData,
-    morphT: number
-): void {
-    morphingPath.__morphingData = morphingData;
-    morphingPath.__morphT = morphT;
+    return items.sort((a, b) => a.z - b.z).map(item => item.path);
 }
 
-function restoreIndividualMorphingPath(path: Path): void {
-    if (isIndividualMorphingPath(path)) {
-        path.buildPath = path.__oldBuildPath;
-        path.__oldBuildPath = path.__morphingData = null;
-    }
+export interface DividePathParams {
+    path: Path,
+    count: number
+};
+export interface DividePath {
+    (params: DividePathParams): Path[]
 }
 
-function isIndividualMorphingPath(path: Path): path is MorphingPath {
-    return (path as MorphingPath).__oldBuildPath != null;
+export interface IndividualDelay {
+    (index: number, count: number, fromPath: Path, toPath: Path): number
 }
 
-export function isCombiningPath(path: Path): path is CombiningPath {
-    return !!(path as CombiningPath).__combiningSubList;
+function defaultDividePath(param: DividePathParams) {
+    return split(param.path, param.count);
 }
+export interface CombineConfig extends ElementAnimateConfig {
+    /**
+     * Transform of returned will be ignored.
+     */
+    dividePath?: DividePath
+    /**
+     * delay of each individual.
+     * Because individual are sorted on z-order. The index is also sorted top-left / right-down.
+     */
+    individualDelay?: IndividualDelay
+    /**
+     * If sort splitted paths so the movement between them can be more natural
+     */
+    // sort?: boolean
+}
 
-export function isInAnyMorphing(path: Path): boolean {
-    return isIndividualMorphingPath(path) || isCombiningPath(path);
+function createEmptyReturn() {
+    return {
+        fromIndividuals: [] as Path[],
+        toIndividuals: [] as Path[],
+        count: 0
+    };
 }
-
-
 /**
- * Make combining morphing from many paths to one.
- * Make the MorphingKind of `toPath` become `'COMBINING'`.
+ * Make combine morphing from many paths to one.
+ * Will return a group to replace the original path.
  */
-export function combine(
-    fromPathList: Path[],
+export function combineMorph(
+    fromList: (CombineMorphingPath | Path)[],
     toPath: Path,
-    animationOpts: CombineSeparateConfig,
-    copyPropsIfDivided?: (srcPath: Path, tarPath: Path, needClone: boolean) => void
-): CombineSeparateResult {
+    animationOpts: CombineConfig
+) {
+    let fromPathList: Path[] = [];
 
-    const fromIndividuals: Path[] = [];
-    let separateCount = 0;
-    for (let i = 0; i < fromPathList.length; i++) {
-        const fromPath = fromPathList[i];
-        if (isCombiningPath(fromPath)) {
-            // If fromPath is combining, use the combineFromList as the from.
-            const fromCombiningSubList = fromPath.__combiningSubList;
-            for (let j = 0; j < fromCombiningSubList.length; j++) {
-                fromIndividuals.push(fromCombiningSubList[j]);
+    function addFromPath(fromList: Element[]) {
+        for (let i = 0; i < fromList.length; i++) {
+            const from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath((from as GroupLike).childrenRef());
             }
-            separateCount += fromCombiningSubList.length;
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
         }
-        else {
-            fromIndividuals.push(fromPath);
-            separateCount++;
-        }
     }
+    addFromPath(fromList);
 
+    const separateCount = fromPathList.length;
+
     // fromPathList.length is 0.
     if (!separateCount) {
-        return;
+        return createEmptyReturn();
     }
 
-    // PENDING: more separate strategies other than `divideShape`?
-    const dividingMethod = animationOpts ? animationOpts.dividingMethod : null;
-    const toPathSplittedList = divideShape(toPath, separateCount, dividingMethod);
-    assert(toPathSplittedList.length === separateCount);
+    const dividePath = animationOpts.dividePath || defaultDividePath;
 
-    const oldDone = animationOpts && animationOpts.done;
-    const oldAborted = animationOpts && animationOpts.aborted;
-    const oldDuring = animationOpts && animationOpts.during;
-
-    let doneCount = 0;
-    let abortedCalled = false;
-    const morphAnimationOpts = defaults({
-        during(p) {
-            oldDuring && oldDuring(p);
-        },
-        done() {
-            doneCount++;
-            if (doneCount === toPathSplittedList.length) {
-                restoreCombiningPath(toPath);
-                oldDone && oldDone();
-            }
-        },
-        aborted() {
-            // PENDING: is it logically correct?
-            if (!abortedCalled) {
-                abortedCalled = true;
-                oldAborted && oldAborted();
-            }
-        }
-    } as ElementAnimateConfig, animationOpts);
-
-    for (let i = 0; i < separateCount; i++) {
-        const from = fromIndividuals[i];
-        const to = toPathSplittedList[i];
-        copyPropsIfDivided && copyPropsIfDivided(toPath, to, true);
-        morphPath(from, to, morphAnimationOpts);
+    let toSubPathList = dividePath({
+        path: toPath, count: separateCount
+    });
+    if (toSubPathList.length !== separateCount) {
+        console.error('Invalid morphing: unmatched splitted path');
+        return createEmptyReturn();
     }
 
-    becomeCombiningPath(toPath, toPathSplittedList);
+    fromPathList = sortPaths(fromPathList);
+    toSubPathList = sortPaths(toSubPathList);
 
-    return {
-        fromIndividuals: fromIndividuals,
-        toIndividuals: toPathSplittedList,
-        count: separateCount
-    };
-}
+    const oldDone = animationOpts.done;
+    // const oldAborted = animationOpts.aborted;
+    const oldDuring = animationOpts.during;
+    const individualDelay = animationOpts.individualDelay;
 
+    const identityTransform = new Transformable();
 
-// PENDING: This is NOT a good implementation to decorate path methods.
-// Potential flaw: when get path by `group.childAt(i)`,
-// it might return the `combiningSubList` group, which is not expected.
-// Probably this feature should be implemented same as the way of rich text?
-function becomeCombiningPath(path: Path, combiningSubList: Path[]): void {
-    if (isCombiningPath(path)) {
-        updateCombiningPathSubList(path, combiningSubList);
-        return;
-    }
+    for (let i = 0; i < separateCount; i++) {
+        const from = fromPathList[i];
+        const to = toSubPathList[i];
 
-    const combiningPath = path as CombiningPath;
+        to.parent = toPath as unknown as Group;
 
-    updateCombiningPathSubList(combiningPath, combiningSubList);
+        // Ignore transform in each subpath.
+        to.copyTransform(identityTransform);
 
-    // PENDING: Too tricky. error-prone.
-    // Decorate methods. Do not do it repeatly.
-    combiningPath.__oldAddSelfToZr = path.addSelfToZr;
-    combiningPath.__oldRemoveSelfFromZr = path.removeSelfFromZr;
-    combiningPath.addSelfToZr = combiningAddSelfToZr;
-    combiningPath.removeSelfFromZr = combiningRemoveSelfFromZr;
-    combiningPath.__oldBuildPath = combiningPath.buildPath;
-    combiningPath.buildPath = noop;
-    combiningPath.childrenRef = combiningChildrenRef;
+        // Will do morphPath for each individual if individualDelay is set.
+        if (!individualDelay) {
+            prepareMorphPath(from, to);
+        }
+    }
 
-    // PENDING: bounding rect?
-}
+    (toPath as CombineMorphingPath).__isCombineMorphing = true;
+    (toPath as CombineMorphingPath).childrenRef = function () {
+        return toSubPathList;
+    };
 
-function restoreCombiningPath(path: Path): void {
-    if (!isCombiningPath(path)) {
-        return;
+    function addToSubPathListToZr(zr: ZRenderType) {
+        for (let i = 0; i < toSubPathList.length; i++) {
+            toSubPathList[i].addSelfToZr(zr);
+        }
     }
+    saveAndModifyMethod(toPath, 'addSelfToZr', {
+        after(zr) {
+            addToSubPathListToZr(zr);
+        }
+    });
+    saveAndModifyMethod(toPath, 'removeSelfFromZr', {
+        after(zr) {
+            for (let i = 0; i < toSubPathList.length; i++) {
+                toSubPathList[i].removeSelfFromZr(zr);
+            }
+        }
+    });
 
-    const combiningPath = path as CombiningPath;
+    function restoreToPath() {
+        (toPath as CombineMorphingPath).__isCombineMorphing = false;
+        // Mark as not in morphing
+        (toPath as MorphingPath).__morphT = -1;
+        (toPath as CombineMorphingPath).childrenRef = null;
 
-    updateCombiningPathSubList(combiningPath, null);
+        restoreMethod(toPath, 'addSelfToZr');
+        restoreMethod(toPath, 'removeSelfFromZr');
+    }
 
-    combiningPath.addSelfToZr = combiningPath.__oldAddSelfToZr;
-    combiningPath.removeSelfFromZr = combiningPath.__oldRemoveSelfFromZr;
-    combiningPath.buildPath = combiningPath.__oldBuildPath;
-    combiningPath.childrenRef =
-        combiningPath.__combiningSubList =
-        combiningPath.__oldAddSelfToZr =
-        combiningPath.__oldRemoveSelfFromZr =
-        combiningPath.__oldBuildPath = null;
-}
+    const toLen = toSubPathList.length;
 
-function updateCombiningPathSubList(
-    combiningPath: CombiningPath,
-    // Especially, `combiningSubList` is null/undefined means that remove sub list.
-    combiningSubList: Path[]
-): void {
-    if (combiningPath.__combiningSubList !== combiningSubList) {
-        combiningPathSubListAddRemoveWithZr(combiningPath, 'removeSelfFromZr');
-        combiningPath.__combiningSubList = combiningSubList;
-        if (combiningSubList) {
-            for (let i = 0; i < combiningSubList.length; i++) {
-                // Tricky: make `updateTransform` work in `Transformable`. The parent can only be Group.
-                combiningSubList[i].parent = combiningPath as unknown as Group;
+    if (individualDelay) {
+        let animating = toLen;
+        const eachDone = () => {
+            animating--;
+            if (animating === 0) {
+                restoreToPath();
+                oldDone && oldDone();
             }
+        };
+        // Animate each element individually.
+        for (let i = 0; i < toLen; i++) {
+            // TODO only call during once?
+            const indivdualAnimationOpts = individualDelay ? defaults({
+                delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toSubPathList[i]),
+                done: eachDone
+            } as ElementAnimateConfig, animationOpts) : animationOpts;
+            morphPath(fromPathList[i], toSubPathList[i], indivdualAnimationOpts);
         }
-        combiningPathSubListAddRemoveWithZr(combiningPath, 'addSelfToZr');
     }
-}
-
-function combiningAddSelfToZr(this: CombiningPath, zr: ZRenderType): void {
-    this.__oldAddSelfToZr(zr);
-    combiningPathSubListAddRemoveWithZr(this, 'addSelfToZr');
-}
-
-function combiningPathSubListAddRemoveWithZr(
-    path: CombiningPath,
-    method: 'addSelfToZr' | 'removeSelfFromZr'
-): void {
-    const combiningSubList = path.__combiningSubList;
-    const zr = path.__zr;
-    if (combiningSubList && zr) {
-        for (let i = 0; i < combiningSubList.length; i++) {
-            const child = combiningSubList[i];
-            child[method](zr);
-        }
+    else {
+        (toPath as MorphingPath).__morphT = 0;
+        toPath.animateTo({
+            __morphT: 1
+        } as any, defaults({
+            during(p) {
+                for (let i = 0; i < toLen; i++) {
+                    const child = toSubPathList[i] as MorphingPath;
+                    child.__morphT = (toPath as MorphingPath).__morphT;
+                    child.dirtyShape();
+                }
+                oldDuring && oldDuring(p);
+            },
+            done() {
+                restoreToPath();
+                for (let i = 0; i < fromList.length; i++) {
+                    restoreMethod(fromList[i], 'updateTransform');
+                }
+                oldDone && oldDone();
+            }
+        } as ElementAnimateConfig, animationOpts));
     }
-}
 
-function combiningRemoveSelfFromZr(this: CombiningPath, zr: ZRenderType): void {
-    this.__oldRemoveSelfFromZr(zr);
-    const combiningSubList = this.__combiningSubList;
-    for (let i = 0; i < combiningSubList.length; i++) {
-        const child = combiningSubList[i];
-        child.removeSelfFromZr(zr);
+    if (toPath.__zr) {
+        addToSubPathListToZr(toPath.__zr);
     }
-}
 
-function combiningChildrenRef(this: CombiningPath): Path[] {
-    return this.__combiningSubList;
+    return {
+        fromIndividuals: fromPathList,
+        toIndividuals: toSubPathList,
+        count: toLen
+    };
 }
+export interface SeparateConfig extends ElementAnimateConfig {
+    dividePath?: DividePath
+    individualDelay?: IndividualDelay
+    /**
+     * If sort splitted paths so the movement between them can be more natural
+     */
+    // sort?: boolean
+    // // If the from path of separate animation is doing combine animation.
+    // // And the paths number is not same with toPathList. We need to do enter/leave animation
+    // // on the missing/spare paths.
+    // enter?: (el: Path) => void
+    // leave?: (el: Path) => void
+}
 
-
 /**
@@ -906,42 +835,61 @@ * Make separate morphing from one path to many paths.
  */
-export function separate(
+export function separateMorph(
     fromPath: Path,
     toPathList: Path[],
-    animationOpts: CombineSeparateConfig,
-    copyPropsIfDivided?: (srcPath: Path, tarPath: Path, needClone: boolean) => void
-): CombineSeparateResult {
-    const toPathListLen = toPathList.length;
-    let fromPathList: Path[];
-    const dividingMethod = animationOpts ? animationOpts.dividingMethod : null;
-    let copyProps = false;
+    animationOpts: SeparateConfig
+) {
+    const toLen = toPathList.length;
+    let fromPathList: Path[] = [];
 
+    const dividePath = animationOpts.dividePath || defaultDividePath;
+
+    function addFromPath(fromList: Element[]) {
+        for (let i = 0; i < fromList.length; i++) {
+            const from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath((from as GroupLike).childrenRef());
+            }
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
+        }
+    }
     // This case most happen when a combining path is called to reverse the animation
     // to its original separated state.
-    if (isCombiningPath(fromPath)) {
-        // [CATEAT]:
-        // do not `restoreCombiningPath`, because it will cause the sub paths been removed
-        // from its host, so that the original "global transform" can not be gotten any more.
+    if (isCombineMorphing(fromPath)) {
+        addFromPath(fromPath.childrenRef());
 
-        const fromCombiningSubList = fromPath.__combiningSubList;
-        if (fromCombiningSubList.length === toPathListLen) {
-            fromPathList = fromCombiningSubList;
+        const fromLen = fromPathList.length;
+        if (fromLen < toLen) {
+            let k = 0;
+            for (let i = fromLen; i < toLen; i++) {
+                // Create a clone
+                fromPathList.push(clonePath(fromPathList[k++ % fromLen]));
+            }
         }
-        // The fromPath is a `CombiningPath` and its combiningSubCount is different from toPathList.length
-        // At present we do not make "continuous" animation for this case. It's might bring complicated logic.
-        else {
-            fromPathList = divideShape(fromPath, toPathListLen, dividingMethod);
-            copyProps = true;
-        }
+        // Else simply remove if fromLen > toLen
+        fromPathList.length = toLen;
     }
     else {
-        fromPathList = divideShape(fromPath, toPathListLen, dividingMethod);
-        copyProps = true;
+        fromPathList = dividePath({ path: fromPath, count: toLen });
+        const fromPathTransform = fromPath.getComputedTransform();
+        for (let i = 0; i < fromPathList.length; i++) {
+            // Force use transform of source path.
+            fromPathList[i].setLocalTransform(fromPathTransform);
+        }
+        if (fromPathList.length !== toLen) {
+            console.error('Invalid morphing: unmatched splitted path');
+            return createEmptyReturn();
+        }
     }
 
-    assert(fromPathList.length === toPathListLen);
-    for (let i = 0; i < toPathListLen; i++) {
-        if (copyProps && copyPropsIfDivided) {
-            copyPropsIfDivided(fromPath, fromPathList[i], false);
-        }
-        morphPath(fromPathList[i], toPathList[i], animationOpts);
+    fromPathList = sortPaths(fromPathList);
+    toPathList = sortPaths(toPathList);
+
+    const individualDelay = animationOpts.individualDelay;
+    for (let i = 0; i < toLen; i++) {
+        const indivdualAnimationOpts = individualDelay ? defaults({
+            delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toPathList[i])
+        } as ElementAnimateConfig, animationOpts) : animationOpts;
+        morphPath(fromPathList[i], toPathList[i], indivdualAnimationOpts);
     }
@@ -952,122 +900,6 @@
         toIndividuals: toPathList,
-        count: toPathListLen
+        count: toPathList.length
     };
 }
 
-
-/**
- * TODO: triangulate separate
- *
- * @return Never be null/undefined, may empty [].
- */
-function divideShape(
-    path: Path,
-    separateCount: number,
-    // By default 'split'.
-    dividingMethod?: MorphDividingMethod
-): Path[] {
-    return dividingMethod === 'duplicate'
-        ? duplicateShape(path, separateCount)
-        : splitShape(path, separateCount);
-}
-
-/**
- * @return Never be null/undefined, may empty [].
- */
-function splitShape(
-    path: Path,
-    separateCount: number
-): Path[] {
-    const resultPaths: Path[] = [];
-    if (separateCount <= 0) {
-        return resultPaths;
-    }
-    if (separateCount === 1) {
-        return duplicateShape(path, separateCount);
-    }
-
-    if (path instanceof Rect) {
-        const toPathShape = path.shape;
-        const splitPropIdx = toPathShape.height > toPathShape.width ? 1 : 0;
-        const propWH = PROP_WH[splitPropIdx];
-        const propXY = PROP_XY[splitPropIdx];
-        const subWH = toPathShape[propWH] / separateCount;
-        let xyCurr = toPathShape[propXY];
-
-        for (let i = 0; i < separateCount; i++, xyCurr += subWH) {
-            const subShape = {
-                x: toPathShape.x,
-                y: toPathShape.y,
-                width: toPathShape.width,
-                height: toPathShape.height
-            };
-            subShape[propXY] = xyCurr;
-            subShape[propWH] = i < separateCount - 1
-                ? subWH
-                : toPathShape[propXY] + toPathShape[propWH] - xyCurr;
-            const splitted = new Rect({ shape: subShape });
-            resultPaths.push(splitted);
-        }
-    }
-    else if (path instanceof Sector) {
-        const toPathShape = path.shape;
-        const clockwise = toPathShape.clockwise;
-        const startAngle = toPathShape.startAngle;
-        const endAngle = toPathShape.endAngle;
-        const endAngleNormalized = normalizeRadian(startAngle, toPathShape.endAngle, clockwise);
-        const step = (endAngleNormalized - startAngle) / separateCount;
-        let angleCurr = startAngle;
-        for (let i = 0; i < separateCount; i++, angleCurr += step) {
-            const splitted = new Sector({
-                shape: {
-                    cx: toPathShape.cx,
-                    cy: toPathShape.cy,
-                    r: toPathShape.r,
-                    r0: toPathShape.r0,
-                    clockwise: clockwise,
-                    startAngle: angleCurr,
-                    endAngle: i === separateCount - 1 ? endAngle : angleCurr + step
-                }
-            });
-            resultPaths.push(splitted);
-        }
-    }
-    // TODO: triangulate path and split.
-    // And should consider path is morphing.
-    else {
-        return duplicateShape(path, separateCount);
-    }
-
-    return resultPaths;
-}
-
-/**
- * @return Never be null/undefined, may empty [].
- */
-function duplicateShape(
-    path: Path,
-    separateCount: number
-): Path[] {
-    const resultPaths: Path[] = [];
-    if (separateCount <= 0) {
-        return resultPaths;
-    }
-    const ctor = path.constructor;
-    for (let i = 0; i < separateCount; i++) {
-        const sub = new (ctor as any)({
-            shape: clone(path.shape)
-        });
-        resultPaths.push(sub);
-    }
-    return resultPaths;
-}
-
-/**
- * If `clockwise`, normalize the `end` to the interval `[start, start + 2 * PI)` and return.
- * else, normalize the `end` to the interval `(start - 2 * PI, start]` and return.
- */
-function normalizeRadian(start: number, end: number, clockwise: boolean): number {
-    return end + PI2 * (
-        Math[clockwise ? 'ceil' : 'floor']((start - end) / PI2)
-    );
-}
+export { split as defaultDividePath };

src/tool/path.ts

@@ -451,9 +451,3 @@ import Path, { PathProps } from '../graphic/Path';
         const pathEl = pathEls[i];
-        if (!pathEl.path) {
-            pathEl.createPathProxy();
-        }
-        if (pathEl.shapeChanged()) {
-            pathEl.buildPath(pathEl.path, pathEl.shape, true);
-        }
-        pathList.push(pathEl.path);
+        pathList.push(pathEl.getUpdatedPathProxy(true));
     }
@@ -477,2 +471,46 @@
     return pathBundle;
-}
+}
+
+/**
+ * Clone a path.
+ */
+export function clonePath(sourcePath: Path, opts?: {
+    /**
+     * If bake global transform to path.
+     */
+    bakeTransform?: boolean
+    /**
+     * Convert global transform to local.
+     */
+    toLocal?: boolean
+}) {
+    opts = opts || {};
+    const path = new Path();
+    if (sourcePath.shape) {
+        path.setShape(sourcePath.shape);
+    }
+    path.setStyle(sourcePath.style);
+
+    if (opts.bakeTransform) {
+        transformPath(path.path, sourcePath.getComputedTransform());
+    }
+    else {
+        // TODO Copy getLocalTransform, updateTransform since they can be changed.
+        if (opts.toLocal) {
+            path.setLocalTransform(sourcePath.getComputedTransform());
+        }
+        else {
+            path.copyTransform(sourcePath);
+        }
+    }
+
+    // These methods may be overridden
+    path.buildPath = sourcePath.buildPath;
+    (path as SVGPath).applyTransform = (path as SVGPath).applyTransform;
+
+    path.z = sourcePath.z;
+    path.z2 = sourcePath.z2;
+    path.zlevel = sourcePath.zlevel;
+
+    return path;
+}

src/tool/transformPath.ts

@@ -12,2 +12,6 @@ import PathProxy from '../core/PathProxy';
 export default function transformPath(path: PathProxy, m: MatrixArray) {
+    if (!m) {
+        return;
+    }
+
     let data = path.data;
@@ -14,0 +18,0 @@ const len = path.len();

src/vml/Painter.ts

@@ -6,5 +6,4 @@ // @ts-nocheck
 
-import {logError} from '../core/util';
+import {logError, each} from '../core/util';
 import * as vmlCore from './core';
-import {each} from '../core/util';
 
@@ -11,0 +10,0 @@ function parseInt10(val) {

src/zrender.ts

@@ -18,4 +18,4 @@ /*!
 import HandlerProxy from './dom/HandlerProxy';
-import Element, {ElementEventCallback, ElementEvent} from './Element';
-import { Dictionary, ElementEventName, RenderedEvent } from './core/types';
+import Element, { ElementEventCallback } from './Element';
+import { Dictionary, ElementEventName, RenderedEvent, WithThisType } from './core/types';
 import { LayerConfig } from './canvas/Layer';
@@ -410,6 +410,7 @@ import { GradientObject } from './graphic/Gradient';
 
-    on<Ctx>(eventName: ElementEventName, eventHandler: ElementEventCallback<Ctx, unknown>, context?: Ctx): this
-    on<Ctx>(eventName: string, eventHandler: EventCallback<Ctx, unknown>, context?: Ctx): this
+    on<Ctx>(eventName: ElementEventName, eventHandler: ElementEventCallback<Ctx, ZRenderType>, context?: Ctx): this
     // eslint-disable-next-line max-len
-    on<Ctx>(eventName: string, eventHandler: EventCallback<Ctx, unknown> | EventCallback<Ctx, unknown, ElementEvent>, context?: Ctx): this {
+    on<Ctx>(eventName: string, eventHandler: WithThisType<EventCallback<any[]>, unknown extends Ctx ? ZRenderType : Ctx>, context?: Ctx): this
+    // eslint-disable-next-line max-len
+    on<Ctx>(eventName: string, eventHandler: (...args: any) => any, context?: Ctx): this {
         this.handler.on(eventName, eventHandler, context);
@@ -425,3 +426,3 @@ return this;
     // eslint-disable-next-line max-len
-    off(eventName?: string, eventHandler?: EventCallback<unknown, unknown> | EventCallback<unknown, unknown, ElementEvent>) {
+    off(eventName?: string, eventHandler?: EventCallback) {
         this.handler.off(eventName, eventHandler);
@@ -526,5 +527,5 @@ }
  */
-export const version = '5.1.1';
+export const version = '5.2.0';
 
 
 export interface ZRenderType extends ZRender {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4691056

increased by2.72%

Number of package files

477

increased by1.27%

Lines of code

66483

increased by2.88%

Dependency changes

• + Addedtslib@2.3.0(transitive)

• - Removedtslib@2.0.3(transitive)

• Updatedtslib@2.3.0