zrender - npm Package Compare versions

Comparing version 5.0.0-alpha.2 to 5.0.0-alpha.3

esm/animation/Animation.d.ts

@@ -22,3 +22,3 @@ import Eventful from '../core/Eventful';
     private _paused;
-    constructor(opts: AnimationOption);
+    constructor(opts?: AnimationOption);
     addClip(clip: Clip): void;
@@ -28,3 +28,3 @@ addAnimator(animator: Animator<any>): void;
     removeAnimator(animator: Animator<any>): void;
-    update(): void;
+    update(notTriggerStageUpdate?: boolean): void;
     _startLoop(): void;
@@ -31,0 +31,0 @@ start(): void;

esm/animation/Animation.js

@@ -68,3 +68,3 @@ import { __extends } from "tslib";
     };
-    Animation.prototype.update = function () {
+    Animation.prototype.update = function (notTriggerStageUpdate) {
         var time = new Date().getTime() - this._pausedTime;
@@ -88,3 +88,3 @@ var delta = time - this._time;
         this.trigger('frame', delta);
-        if (this.stage.update) {
+        if (this.stage.update && !notTriggerStageUpdate) {
             this.stage.update();
@@ -91,0 +91,0 @@ }

esm/animation/Animator.d.ts

@@ -48,2 +48,3 @@ import Clip from './Clip';
 declare type DoneCallback = () => void;
+declare type AbortCallback = () => void;
 export declare type OnframeCallback<T> = (target: T, percent: number) => void;
@@ -68,2 +69,3 @@ export declare type AnimationPropGetter<T> = (target: T, key: string) => InterpolatableType;
     private _onframeList;
+    private _abortedList;
     private _clip;
@@ -75,3 +77,2 @@ constructor(target: T, loop: boolean, additiveTo?: Animator<any>[]);
     whenWithKeys(time: number, props: Dictionary<any>, propNames: string[]): this;
-    during(callback: OnframeCallback<T>): this;
     pause(): void;
@@ -81,2 +82,4 @@ resume(): void;
     private _doneCallback;
+    private _abortedCallback;
+    private _setTracksFinished;
     private _getAdditiveTrack;
@@ -86,3 +89,5 @@ start(easing?: AnimationEasing, forceAnimate?: boolean): this;
     delay(time: number): this;
+    during(cb: OnframeCallback<T>): this;
     done(cb: DoneCallback): this;
+    aborted(cb: AbortCallback): this;
     getClip(): Clip;
@@ -89,0 +94,0 @@ getTrack(propName: string): Track;

esm/animation/Animator.js

@@ -177,2 +177,5 @@ import Clip from './Clip';
         this._finished = true;
+        if (this._additiveTrack) {
+            this._additiveTrack.setFinished();
+        }
     };
@@ -276,3 +279,4 @@ Track.prototype.needsAnimate = function () {
         if (additiveTrack
-            && this.interpolable
+            && this.needsAnimate()
+            && additiveTrack.needsAnimate()
             && arrDim === additiveTrack.arrDim
@@ -421,17 +425,18 @@ && this.isValueColor === additiveTrack.isValueColor
         var propName = this.propName;
+        var additiveValue = this._additiveValue;
         if (arrDim === 0) {
             if (this.isValueColor) {
                 color.parse(target[propName], tmpRgba);
-                add1DArray(tmpRgba, tmpRgba, this._additiveValue, 1);
+                add1DArray(tmpRgba, tmpRgba, additiveValue, 1);
                 target[propName] = rgba2String(tmpRgba);
             }
             else {
-                target[propName] = target[propName] + this._additiveValue;
+                target[propName] = target[propName] + additiveValue;
             }
         }
         else if (arrDim === 1) {
-            add1DArray(target[propName], target[propName], this._additiveValue, 1);
+            add1DArray(target[propName], target[propName], additiveValue, 1);
         }
         else if (arrDim === 2) {
-            add2DArray(target[propName], target[propName], this._additiveValue, 1);
+            add2DArray(target[propName], target[propName], additiveValue, 1);
         }
@@ -449,4 +454,2 @@ };
         this._started = 0;
-        this._doneList = [];
-        this._onframeList = [];
         this._clip = null;
@@ -502,6 +505,2 @@ this._target = target;
     };
-    Animator.prototype.during = function (callback) {
-        this._onframeList.push(callback);
-        return this;
-    };
     Animator.prototype.pause = function () {
@@ -519,10 +518,33 @@ this._clip.pause();
     Animator.prototype._doneCallback = function () {
-        this._tracks = null;
+        this._setTracksFinished();
         this._clip = null;
         var doneList = this._doneList;
-        var len = doneList.length;
-        for (var i = 0; i < len; i++) {
-            doneList[i].call(this);
+        if (doneList) {
+            var len = doneList.length;
+            for (var i = 0; i < len; i++) {
+                doneList[i].call(this);
+            }
         }
     };
+    Animator.prototype._abortedCallback = function () {
+        this._setTracksFinished();
+        var animation = this.animation;
+        var abortedList = this._abortedList;
+        if (animation) {
+            animation.removeClip(this._clip);
+        }
+        this._clip = null;
+        if (abortedList) {
+            for (var i = 0; i < abortedList.length; i++) {
+                abortedList[i].call(this);
+            }
+        }
+    };
+    Animator.prototype._setTracksFinished = function () {
+        var tracks = this._tracks;
+        var tracksKeys = this._trackKeys;
+        for (var i = 0; i < tracksKeys.length; i++) {
+            tracks[tracksKeys[i]].setFinished();
+        }
+    };
     Animator.prototype._getAdditiveTrack = function (trackName) {
@@ -587,10 +609,10 @@ var additiveTrack;
                     }
-                    for (var i = 0; i < self._onframeList.length; i++) {
-                        self._onframeList[i](self._target, percent);
+                    var onframeList = self._onframeList;
+                    if (onframeList) {
+                        for (var i = 0; i < onframeList.length; i++) {
+                            onframeList[i](self._target, percent);
+                        }
                     }
                 },
                 ondestroy: function () {
-                    for (var i = 0; i < tracks.length; i++) {
-                        tracks[i].setFinished();
-                    }
                     self._doneCallback();
@@ -617,10 +639,6 @@ }
         var clip = this._clip;
-        var animation = this.animation;
         if (forwardToLast) {
             clip.onframe(1);
         }
-        if (animation) {
-            animation.removeClip(clip);
-        }
-        this._clip = null;
+        this._abortedCallback();
     };
@@ -631,4 +649,16 @@ Animator.prototype.delay = function (time) {
     };
+    Animator.prototype.during = function (cb) {
+        if (cb) {
+            if (!this._onframeList) {
+                this._onframeList = [];
+            }
+            this._onframeList.push(cb);
+        }
+        return this;
+    };
     Animator.prototype.done = function (cb) {
         if (cb) {
+            if (!this._doneList) {
+                this._doneList = [];
+            }
             this._doneList.push(cb);
@@ -638,2 +668,11 @@ }
     };
+    Animator.prototype.aborted = function (cb) {
+        if (cb) {
+            if (!this._abortedList) {
+                this._abortedList = [];
+            }
+            this._abortedList.push(cb);
+        }
+        return this;
+    };
     Animator.prototype.getClip = function () {
@@ -670,5 +709,4 @@ return this._clip;
         }
-        if (allAborted && this.animation) {
-            this.animation.removeClip(this._clip);
-            this._clip = null;
+        if (allAborted) {
+            this._abortedCallback();
         }
@@ -675,0 +713,0 @@ return allAborted;

esm/animation/requestAnimationFrame.js

 var requestAnimationFrame;
 requestAnimationFrame = (typeof window !== 'undefined'
-    && (window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
-    || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
-    || window.mozRequestAnimationFrame
-    || window.webkitRequestAnimationFrame) || function (func) {
+    && ((window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
+        || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
+        || window.mozRequestAnimationFrame
+        || window.webkitRequestAnimationFrame)) || function (func) {
     return setTimeout(func, 16);
 };
 export default requestAnimationFrame;

esm/canvas/graphic.d.ts

@@ -18,2 +18,3 @@ import Displayable from '../graphic/Displayable';
 };
+export declare function brushSingle(ctx: CanvasRenderingContext2D, el: Displayable): void;
 export declare function brush(ctx: CanvasRenderingContext2D, el: Displayable, scope: BrushScope, isLast: boolean): void;

esm/canvas/graphic.js

@@ -12,2 +12,4 @@ import { DEFAULT_COMMON_STYLE } from '../graphic/Displayable';
 import { map } from '../core/util';
+import { normalizeLineDash } from '../graphic/helper/dashStyle';
+import Element from '../Element';
 var pathProxyForDraw = new PathProxy(true);
@@ -122,3 +124,3 @@ function styleHasStroke(style) {
     }
-    var lineDash = style.lineDash;
+    var lineDash = style.lineDash && style.lineWidth > 0 && normalizeLineDash(style.lineDash, style.lineWidth);
     var lineDashOffset = style.lineDashOffset;
@@ -229,4 +231,5 @@ var ctxLineDash = !!ctx.setLineDash;
         ctx.textBaseline = style.textBaseline;
+        var hasLineDash = void 0;
         if (ctx.setLineDash) {
-            var lineDash = style.lineDash;
+            var lineDash = style.lineDash && style.lineWidth > 0 && normalizeLineDash(style.lineDash, style.lineWidth);
             var lineDashOffset = style.lineDashOffset;
@@ -241,5 +244,6 @@ if (lineDash) {
                 }
+                ctx.setLineDash(lineDash);
+                ctx.lineDashOffset = lineDashOffset;
+                hasLineDash = true;
             }
-            ctx.setLineDash(lineDash || []);
-            ctx.lineDashOffset = lineDashOffset;
         }
@@ -262,2 +266,5 @@ if (style.strokeFirst) {
         }
+        if (hasLineDash) {
+            ctx.setLineDash([]);
+        }
     }
@@ -380,2 +387,5 @@ }
 function isDisplayableCulled(el, width, height) {
+    if (!width || !height) {
+        return false;
+    }
     tmpRect.copy(el.getBoundingRect());
@@ -453,2 +463,5 @@ if (el.transform) {
 }
+export function brushSingle(ctx, el) {
+    brush(ctx, el, { inHover: false, viewWidth: 0, viewHeight: 0 }, true);
+}
 export function brush(ctx, el, scope, isLast) {
@@ -460,3 +473,3 @@ var m = el.transform;
         || (m && !m[0] && !m[3])) {
-        el.__dirty = 0;
+        el.__dirty &= ~Element.REDARAW_BIT;
         return;
@@ -463,0 +476,0 @@ }

esm/contain/path.js

@@ -6,3 +6,2 @@ import PathProxy from '../core/PathProxy';
 import * as arc from './arc';
-import { normalizeRadian } from './util';
 import * as curve from '../core/curve';
@@ -128,3 +127,3 @@ import windingLine from './windingLine';
     }
-    if (dTheta % PI2 < 1e-4) {
+    if (dTheta >= PI2 - 1e-4) {
         startAngle = 0;
@@ -140,12 +139,9 @@ endAngle = PI2;
     }
-    if (anticlockwise) {
+    if (startAngle > endAngle) {
         var tmp_1 = startAngle;
-        startAngle = normalizeRadian(endAngle);
-        endAngle = normalizeRadian(tmp_1);
+        startAngle = endAngle;
+        endAngle = tmp_1;
     }
-    else {
-        startAngle = normalizeRadian(startAngle);
-        endAngle = normalizeRadian(endAngle);
-    }
-    if (startAngle > endAngle) {
+    if (startAngle < 0) {
+        startAngle += PI2;
         endAngle += PI2;
@@ -183,2 +179,3 @@ }
         var cmd = data[i++];
+        var isFirst = i === 1;
         if (cmd === CMD.M && i > 1) {
@@ -189,3 +186,3 @@ if (!isStroke) {
         }
-        if (i === 1) {
+        if (isFirst) {
             xi = data[i];
@@ -250,3 +247,3 @@ yi = data[i + 1];
                 y1 = Math.sin(theta) * ry + cy;
-                if (i > 1) {
+                if (!isFirst) {
                     w += windingLine(xi, yi, x1, y1, x, y);
@@ -253,0 +250,0 @@ }

esm/core/Eventful.js

@@ -96,3 +96,2 @@ var Eventful = (function () {
                     && !eventProcessor.filter(eventType, hItem.query)) {
-                    i++;
                     continue;
@@ -131,3 +130,3 @@ }
             var len = _h.length;
-            for (var i = 0; i < len;) {
+            for (var i = 0; i < len; i++) {
                 var hItem = _h[i];
@@ -138,3 +137,2 @@ if (eventProcessor
                     && !eventProcessor.filter(type, hItem.query)) {
-                    i++;
                     continue;
@@ -141,0 +139,0 @@ }

esm/core/PathProxy.d.ts

@@ -5,5 +5,7 @@ import BoundingRect from './BoundingRect';
 }
+export declare function normalizeArcAngles(angles: number[], anticlockwise: boolean): void;
 export default class PathProxy {
     dpr: number;
     data: number[] | Float32Array;
+    private _version;
     private _saveData;
@@ -35,2 +37,4 @@ private _ctx;
     constructor(notSaveData?: boolean);
+    increaseVersion(): void;
+    getVersion(): number;
     setScale(sx: number, sy: number, segmentIgnoreThreshold?: number): void;
@@ -65,5 +69,15 @@ setDPR(dpr: number): void;
     private _calculateLength;
-    rebuildPath(ctx: CanvasRenderingContext2D, percent: number): void;
+    rebuildPath(ctx: PathRebuilder, percent: number): void;
     private static initDefaultProps;
 }
+export interface PathRebuilder {
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number): void;
+    quadraticCurveTo(x: number, y: number, x2: number, y2: number): void;
+    arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
+    ellipse(cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    closePath(): void;
+}
 export {};

esm/core/PathProxy.js

@@ -30,5 +30,36 @@ import * as vec2 from './vector';
 var hasTypedArray = typeof Float32Array !== 'undefined';
+var tmpAngles = [];
+function modPI2(radian) {
+    var n = Math.round(radian / PI * 1e8) / 1e8;
+    return (n % 2) * PI;
+}
+export function normalizeArcAngles(angles, anticlockwise) {
+    var newStartAngle = modPI2(angles[0]);
+    if (newStartAngle < 0) {
+        newStartAngle += PI2;
+    }
+    var delta = newStartAngle - angles[0];
+    var newEndAngle = angles[1];
+    newEndAngle += delta;
+    if (!anticlockwise && newEndAngle - newStartAngle >= PI2) {
+        newEndAngle = newStartAngle + PI2;
+    }
+    else if (anticlockwise && newStartAngle - newEndAngle >= PI2) {
+        newEndAngle = newStartAngle - PI2;
+    }
+    else if (!anticlockwise && newStartAngle > newEndAngle) {
+        newEndAngle = newStartAngle +
+            (PI2 - modPI2(newStartAngle - newEndAngle));
+    }
+    else if (anticlockwise && newStartAngle < newEndAngle) {
+        newEndAngle = newStartAngle -
+            (PI2 - modPI2(newEndAngle - newStartAngle));
+    }
+    angles[0] = newStartAngle;
+    angles[1] = newEndAngle;
+}
 var PathProxy = (function () {
     function PathProxy(notSaveData) {
         this.dpr = 1;
+        this._version = 0;
         this._xi = 0;
@@ -46,2 +77,8 @@ this._yi = 0;
     }
+    PathProxy.prototype.increaseVersion = function () {
+        this._version++;
+    };
+    PathProxy.prototype.getVersion = function () {
+        return this._version;
+    };
     PathProxy.prototype.setScale = function (sx, sy, segmentIgnoreThreshold) {
@@ -80,2 +117,3 @@ segmentIgnoreThreshold = segmentIgnoreThreshold || 0;
         }
+        this._version++;
     };
@@ -127,4 +165,8 @@ PathProxy.prototype.moveTo = function (x, y) {
     PathProxy.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        tmpAngles[0] = startAngle;
+        tmpAngles[1] = endAngle;
+        normalizeArcAngles(tmpAngles, anticlockwise);
+        startAngle = tmpAngles[0];
+        endAngle = tmpAngles[1];
         var delta = endAngle - startAngle;
-        endAngle = startAngle + delta;
         this.addData(CMD.A, cx, cy, r, r, startAngle, delta, 0, anticlockwise ? 0 : 1);
@@ -363,3 +405,4 @@ this._ctx && this._ctx.arc(cx, cy, r, startAngle, endAngle, anticlockwise);
             var cmd = data[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = data[i];
@@ -402,8 +445,8 @@ yi = data[i + 1];
                     i += 1;
-                    var anticlockwise = 1 - data[i++];
-                    if (i === 1) {
+                    var anticlockwise = !data[i++];
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
                         y0 = mathSin(startAngle) * ry + cy;
                     }
-                    fromArc(cx, cy, rx, ry, startAngle, endAngle, !!anticlockwise, min2, max2);
+                    fromArc(cx, cy, rx, ry, startAngle, endAngle, anticlockwise, min2, max2);
                     xi = mathCos(endAngle) * rx + cx;
@@ -449,3 +492,4 @@ yi = mathSin(endAngle) * ry + cy;
             var cmd = data[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = data[i];
@@ -506,3 +550,3 @@ yi = data[i + 1];
                     var anticlockwise = !data[i++];
-                    if (i === 1) {
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
@@ -570,3 +614,4 @@ y0 = mathSin(startAngle) * ry + cy;
             var cmd = d[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = d[i];
@@ -669,10 +714,4 @@ yi = d[i + 1];
                     }
-                    if (isEllipse) {
-                        ctx.translate(cx, cy);
-                        ctx.rotate(psi);
-                        ctx.scale(scaleX, scaleY);
-                        ctx.arc(0, 0, r, startAngle, endAngle, anticlockwise);
-                        ctx.scale(1 / scaleX, 1 / scaleY);
-                        ctx.rotate(-psi);
-                        ctx.translate(-cx, -cy);
+                    if (isEllipse && ctx.ellipse) {
+                        ctx.ellipse(cx, cy, rx, ry, psi, startAngle, endAngle, anticlockwise);
                     }
@@ -685,3 +724,3 @@ else {
                     }
-                    if (i === 1) {
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
@@ -688,0 +727,0 @@ y0 = mathSin(startAngle) * ry + cy;

esm/Element.d.ts

@@ -20,2 +20,3 @@ import Transformable from './core/Transformable';
     during?: (percent: number) => void;
+    aborted?: Function;
     scope?: string;
@@ -42,2 +43,3 @@ force?: boolean;
     anchor?: Point;
+    showAbove?: boolean;
     candidates?: ('left' | 'top' | 'right' | 'bottom')[];
@@ -88,2 +90,3 @@ }
     silent?: boolean;
+    ignoreClip?: boolean;
     x?: number;
@@ -128,2 +131,3 @@ y?: number;
     animators: Animator<any>[];
+    ignoreClip: boolean;
     __hostTarget: Element;
@@ -171,5 +175,5 @@ __zr: ZRenderType;
     ensureState(name: string): ElementState;
-    clearStates(): void;
-    useState(stateName: string, keepCurrentStates?: boolean): ElementState;
-    useStates(states: string[]): void;
+    clearStates(noAnimation?: boolean): void;
+    useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean): ElementState;
+    useStates(states: string[], noAnimation?: boolean): void;
     private _updateAnimationTargets;
@@ -176,0 +180,0 @@ removeState(state: string): void;

esm/Element.js

@@ -6,3 +6,3 @@ import Transformable from './core/Transformable';
 import { calculateTextPosition, parsePercent } from './contain/text';
-import { guid, isObject, keys, extend, indexOf, logError, mixin, isArrayLike } from './core/util';
+import { guid, isObject, keys, extend, indexOf, logError, mixin, isArrayLike, isTypedArray } from './core/util';
 import { LIGHT_LABEL_COLOR, DARK_LABEL_COLOR } from './config';
@@ -298,6 +298,6 @@ import { parse, stringify } from './tool/color';
     };
-    Element.prototype.clearStates = function () {
-        this.useState(PRESERVED_NORMAL_STATE, false);
+    Element.prototype.clearStates = function (noAnimation) {
+        this.useState(PRESERVED_NORMAL_STATE, false, noAnimation);
     };
-    Element.prototype.useState = function (stateName, keepCurrentStates) {
+    Element.prototype.useState = function (stateName, keepCurrentStates, noAnimation) {
         var toNormalState = stateName === PRESERVED_NORMAL_STATE;
@@ -331,3 +331,3 @@ var hasStates = this.hasState();
         }
-        this._applyStateObj(stateName, state, this._normalState, keepCurrentStates, !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
+        this._applyStateObj(stateName, state, this._normalState, keepCurrentStates, !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
         if (this._textContent) {
@@ -359,3 +359,3 @@ this._textContent.useState(stateName, keepCurrentStates);
     };
-    Element.prototype.useStates = function (states) {
+    Element.prototype.useStates = function (states, noAnimation) {
         if (!states.length) {
@@ -400,3 +400,3 @@ this.clearStates();
             this.saveCurrentToNormalState(mergedState);
-            this._applyStateObj(states.join(','), mergedState, this._normalState, false, !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
+            this._applyStateObj(states.join(','), mergedState, this._normalState, false, !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
             if (this._textContent) {
@@ -411,3 +411,3 @@ this._textContent.useStates(states);
             this.markRedraw();
-            if (!useHoverLayer) {
+            if (!useHoverLayer && this.__inHover) {
                 this._toggleHoverLayerFlag(false);
@@ -760,2 +760,3 @@ this.__dirty &= ~Element.REDARAW_BIT;
         elProto.dragging = false;
+        elProto.ignoreClip = false;
         elProto.__inHover = false;
@@ -821,13 +822,22 @@ elProto.__dirty = Element.REDARAW_BIT;
     animateToShallow(animatable, '', animatable, target, cfg, animationProps, animators, reverse);
-    var count = animators.length;
-    function done() {
-        count--;
-        if (!count) {
-            cfg.done && cfg.done();
+    var doneCount = animators.length;
+    var abortedCount = doneCount;
+    var cfgDone = cfg.done;
+    var cfgAborted = cfg.aborted;
+    var doneCb = cfgDone ? function () {
+        doneCount--;
+        if (!doneCount) {
+            cfgDone();
         }
+    } : null;
+    var abortedCb = cfgAborted ? function () {
+        abortedCount--;
+        if (!abortedCount) {
+            cfgAborted();
+        }
+    } : null;
+    if (!doneCount) {
+        cfgDone && cfgDone();
     }
-    if (!count) {
-        cfg.done && cfg.done();
-    }
-    if (animators.length > 0 && typeof cfg.during === 'function') {
+    if (animators.length > 0 && cfg.during) {
         animators[0].during(function (target, percent) {
@@ -838,5 +848,10 @@ cfg.during(percent);
     for (var i = 0; i < animators.length; i++) {
-        animators[i]
-            .done(done)
-            .start(cfg.easing, cfg.force);
+        var animator = animators[i];
+        if (doneCb) {
+            animator.done(doneCb);
+        }
+        if (abortedCb) {
+            animator.aborted(abortedCb);
+        }
+        animator.start(cfg.easing, cfg.force);
     }
@@ -858,2 +873,9 @@ return animators;
         }
+        if (isTypedArray(source[key])) {
+            var len = source[key].length;
+            if (target[key].length !== len) {
+                target[key] = new (source[key].constructor)(len);
+                copyArrShallow(target[key], source[key], len);
+            }
+        }
         var sourceArr = source[key];
@@ -860,0 +882,0 @@ var targetArr = target[key];

esm/export.d.ts

@@ -7,2 +7,3 @@ import * as zrUtil from './core/util';
 import { parseSVG } from './tool/parseSVG';
+import { morphPath } from './tool/morphPath';
 export { default as Point } from './core/Point';
@@ -44,1 +45,2 @@ export { default as Element } from './Element';
 export { parseSVG };
+export { morphPath };

esm/export.js

@@ -7,2 +7,3 @@ import * as zrUtil from './core/util';
 import { parseSVG } from './tool/parseSVG';
+import { morphPath } from './tool/morphPath';
 export { default as Point } from './core/Point';
@@ -44,1 +45,2 @@ export { default as Element } from './Element';
 export { parseSVG };
+export { morphPath };

esm/graphic/helper/parseText.d.ts

@@ -25,2 +25,3 @@ import { TextAlign, TextVerticalAlign } from '../../core/types';
     height: number;
+    innerHeight: number;
     contentHeight: number;
@@ -27,0 +28,0 @@ contentWidth: number;

esm/graphic/helper/parseText.js

@@ -208,5 +208,6 @@ import * as imageHelper from '../helper/image';
             var tokenHeight = retrieve2(tokenStyle.height, token.contentHeight);
-            token.lineHeight = retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
+            token.innerHeight = tokenHeight;
             textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
             token.height = tokenHeight;
+            token.lineHeight = retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
             token.align = tokenStyle && tokenStyle.align || style.align;
@@ -213,0 +214,0 @@ token.verticalAlign = tokenStyle && tokenStyle.verticalAlign || 'middle';

esm/graphic/Path.js

@@ -82,3 +82,3 @@ import { __extends } from "tslib";
                 var fillLum = lum(pathFill, 0);
-                if (fillLum > 0.6) {
+                if (fillLum > 0.5) {
                     return DARK_LABEL_COLOR;
@@ -151,3 +151,4 @@ }
                 if (!this.hasFill()) {
-                    w = Math.max(w, this.strokeContainThreshold || 4);
+                    var strokeContainThreshold = this.strokeContainThreshold;
+                    w = Math.max(w, strokeContainThreshold == null ? 4 : strokeContainThreshold);
                 }
@@ -154,0 +155,0 @@ if (lineScale > 1e-10) {

esm/graphic/shape/Sector.d.ts

@@ -10,2 +10,4 @@ import Path, { PathProps } from '../Path';
     clockwise: boolean;
+    cornerRadius: number;
+    innerCornerRadius: number;
 }
@@ -12,0 +14,0 @@ interface SectorProps extends PathProps {

esm/graphic/shape/Sector.js

 import { __extends } from "tslib";
 import Path from '../Path';
+import * as roundSectorHelper from '../helper/roundSector';
 var SectorShape = (function () {
@@ -12,2 +13,4 @@ function SectorShape() {
         this.clockwise = true;
+        this.cornerRadius = 0;
+        this.innerCornerRadius = 0;
     }
@@ -25,19 +28,3 @@ return SectorShape;
     Sector.prototype.buildPath = function (ctx, shape) {
-        var x = shape.cx;
-        var y = shape.cy;
-        var r0 = Math.max(shape.r0 || 0, 0);
-        var r = Math.max(shape.r, 0);
-        var startAngle = shape.startAngle;
-        var endAngle = shape.endAngle;
-        var clockwise = shape.clockwise;
-        var unitX = Math.cos(startAngle);
-        var unitY = Math.sin(startAngle);
-        ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
-        ctx.lineTo(unitX * r + x, unitY * r + y);
-        ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
-        ctx.lineTo(Math.cos(endAngle) * r0 + x, Math.sin(endAngle) * r0 + y);
-        if (r0 !== 0) {
-            ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
-        }
-        ctx.closePath();
+        roundSectorHelper.buildPath(ctx, shape);
     };
@@ -44,0 +31,0 @@ Sector.prototype.isZeroArea = function () {

esm/graphic/Text.js

@@ -202,3 +202,3 @@ import { __extends } from "tslib";
             var boxY = adjustTextY(baseY, outerHeight, verticalAlign);
-            needDrawBg && this._renderBackground(style, boxX, boxY, outerWidth_1, outerHeight);
+            needDrawBg && this._renderBackground(style, style, boxX, boxY, outerWidth_1, outerHeight);
         }
@@ -288,3 +288,3 @@ textY += lineHeight / 2;
         if (needDrawBackground(style)) {
-            this._renderBackground(style, boxX, boxY, outerWidth, outerHeight);
+            this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
         }
@@ -339,3 +339,3 @@ var bgColorDrawn = !!(style.backgroundColor);
         var needDrawBg = !token.isLineHolder && needDrawBackground(tokenStyle);
-        needDrawBg && this._renderBackground(tokenStyle, textAlign === 'right'
+        needDrawBg && this._renderBackground(tokenStyle, style, textAlign === 'right'
             ? x - token.width
@@ -349,2 +349,3 @@ : textAlign === 'center'
             x = getTextXForPadding(x, textAlign, textPadding);
+            y -= token.height / 2 - textPadding[0] - token.innerHeight / 2;
         }
@@ -380,2 +381,3 @@ var el = this._getOrCreateChild(TSpan);
         subElStyle.font = token.font || DEFAULT_FONT;
+        subElStyle.opacity = retrieve3(tokenStyle.opacity, style.opacity, 1);
         if (textStroke) {
@@ -394,3 +396,3 @@ subElStyle.lineWidth = retrieve3(tokenStyle.lineWidth, style.lineWidth, defaultLineWidth);
     };
-    ZRText.prototype._renderBackground = function (style, x, y, width, height) {
+    ZRText.prototype._renderBackground = function (style, topStyle, x, y, width, height) {
         var textBackgroundColor = style.backgroundColor;
@@ -419,3 +421,2 @@ var textBorderWidth = style.borderWidth;
             rectStyle.fill = textBackgroundColor || null;
-            rectStyle.opacity = retrieve2(style.opacity, 1);
             rectStyle.fillOpacity = retrieve2(style.fillOpacity, 1);
@@ -442,2 +443,3 @@ }
             rectStyle.lineDashOffset = style.borderDashOffset || 0;
+            rectEl.strokeContainThreshold = 0;
             if (rectEl.hasFill() && rectEl.hasStroke()) {
@@ -448,7 +450,8 @@ rectStyle.strokeFirst = true;
         }
-        var shadowStyle = (rectEl || imgEl).style;
-        shadowStyle.shadowBlur = style.shadowBlur || 0;
-        shadowStyle.shadowColor = style.shadowColor || 'transparent';
-        shadowStyle.shadowOffsetX = style.shadowOffsetX || 0;
-        shadowStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        var commonStyle = (rectEl || imgEl).style;
+        commonStyle.shadowBlur = style.shadowBlur || 0;
+        commonStyle.shadowColor = style.shadowColor || 'transparent';
+        commonStyle.shadowOffsetX = style.shadowOffsetX || 0;
+        commonStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        commonStyle.opacity = retrieve3(style.opacity, topStyle.opacity, 1);
     };
@@ -455,0 +458,0 @@ ZRText.makeFont = function (style) {

esm/Handler.js

@@ -228,9 +228,15 @@ import { __extends } from "tslib";
         var isSilent = void 0;
+        var ignoreClip = false;
         while (el) {
-            var clipPath = el.getClipPath();
-            if (clipPath && !clipPath.contain(x, y)) {
-                return false;
+            if (el.ignoreClip) {
+                ignoreClip = true;
             }
-            if (el.silent) {
-                isSilent = true;
+            if (!ignoreClip) {
+                var clipPath = el.getClipPath();
+                if (clipPath && !clipPath.contain(x, y)) {
+                    return false;
+                }
+                if (el.silent) {
+                    isSilent = true;
+                }
             }
@@ -237,0 +243,0 @@ var hostEl = el.__hostTarget;

esm/Storage.js

@@ -56,8 +56,9 @@ import * as util from './core/util';
         el.beforeUpdate();
-        if (el.__dirty) {
-            el.update();
-        }
+        el.update();
         el.afterUpdate();
         var userSetClipPath = el.getClipPath();
-        if (userSetClipPath) {
+        if (el.ignoreClip) {
+            clipPaths = null;
+        }
+        else if (userSetClipPath) {
             if (clipPaths) {
@@ -64,0 +65,0 @@ clipPaths = clipPaths.slice();

esm/svg/graphic.js

@@ -5,2 +5,3 @@ import { createElement } from './core';
 import { map } from '../core/util';
+import { normalizeLineDash } from '../graphic/helper/dashStyle';
 var CMD = PathProxy.CMD;
@@ -74,3 +75,3 @@ var NONE = 'none';
         attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
-        var lineDash = style.lineDash;
+        var lineDash = style.lineDash && strokeWidth > 0 && normalizeLineDash(style.lineDash, strokeWidth);
         if (lineDash) {
@@ -101,113 +102,93 @@ var lineDashOffset = style.lineDashOffset;
 }
-function pathDataToString(path) {
-    if (!path) {
-        return '';
+var SVGPathRebuilder = (function () {
+    function SVGPathRebuilder() {
     }
-    var str = [];
-    var data = path.data;
-    var dataLength = path.len();
-    var x;
-    var y;
-    for (var i = 0; i < dataLength;) {
-        var cmd = data[i++];
-        var cmdStr = '';
-        var nData = 0;
-        switch (cmd) {
-            case CMD.M:
-                cmdStr = 'M';
-                nData = 2;
-                break;
-            case CMD.L:
-                cmdStr = 'L';
-                nData = 2;
-                break;
-            case CMD.Q:
-                cmdStr = 'Q';
-                nData = 4;
-                break;
-            case CMD.C:
-                cmdStr = 'C';
-                nData = 6;
-                break;
-            case CMD.A:
-                var cx = data[i++];
-                var cy = data[i++];
-                var rx = data[i++];
-                var ry = data[i++];
-                var theta = data[i++];
-                var dTheta = data[i++];
-                var psi = data[i++];
-                var clockwise = data[i++];
-                var dThetaPositive = Math.abs(dTheta);
-                var isCircle = isAroundZero(dThetaPositive - PI2)
-                    || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
-                var unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
-                var large = false;
-                if (isCircle) {
-                    large = true;
-                }
-                else if (isAroundZero(dThetaPositive)) {
-                    large = false;
-                }
-                else {
-                    large = (unifiedTheta >= PI) === !!clockwise;
-                }
-                var x0 = round4(cx + rx * mathCos(theta));
-                var y0 = round4(cy + ry * mathSin(theta));
-                if (isCircle) {
-                    if (clockwise) {
-                        dTheta = PI2 - 1e-4;
-                    }
-                    else {
-                        dTheta = -PI2 + 1e-4;
-                    }
-                    large = true;
-                    if (i === 9) {
-                        str.push('M', x0, y0);
-                    }
-                }
-                x = round4(cx + rx * mathCos(theta + dTheta));
-                y = round4(cy + ry * mathSin(theta + dTheta));
-                if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x) || isNaN(y)) {
-                    return '';
-                }
-                str.push('A', round4(rx), round4(ry), mathRound(psi * degree), +large, +clockwise, x, y);
-                break;
-            case CMD.Z:
-                cmdStr = 'Z';
-                break;
-            case CMD.R:
-                x = round4(data[i++]);
-                y = round4(data[i++]);
-                var w = round4(data[i++]);
-                var h = round4(data[i++]);
-                if (isNaN(x) || isNaN(y) || isNaN(w) || isNaN(h)) {
-                    return '';
-                }
-                str.push('M', x, y, 'L', x + w, y, 'L', x + w, y + h, 'L', x, y + h, 'L', x, y);
-                break;
+    SVGPathRebuilder.prototype.reset = function () {
+        this._d = [];
+        this._str = '';
+    };
+    SVGPathRebuilder.prototype.moveTo = function (x, y) {
+        this._add('M', x, y);
+    };
+    SVGPathRebuilder.prototype.lineTo = function (x, y) {
+        this._add('L', x, y);
+    };
+    SVGPathRebuilder.prototype.bezierCurveTo = function (x, y, x2, y2, x3, y3) {
+        this._add('C', x, y, x2, y2, x3, y3);
+    };
+    SVGPathRebuilder.prototype.quadraticCurveTo = function (x, y, x2, y2) {
+        this._add('Q', x, y, x2, y2);
+    };
+    SVGPathRebuilder.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        this.ellipse(cx, cy, r, r, 0, startAngle, endAngle, anticlockwise);
+    };
+    SVGPathRebuilder.prototype.ellipse = function (cx, cy, rx, ry, psi, startAngle, endAngle, anticlockwise) {
+        var firstCmd = this._d.length === 0;
+        var dTheta = endAngle - startAngle;
+        var clockwise = !anticlockwise;
+        var dThetaPositive = Math.abs(dTheta);
+        var isCircle = isAroundZero(dThetaPositive - PI2)
+            || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
+        var unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
+        var large = false;
+        if (isCircle) {
+            large = true;
         }
-        cmdStr && str.push(cmdStr);
-        for (var j = 0; j < nData; j++) {
-            var val = round4(data[i++]);
+        else if (isAroundZero(dThetaPositive)) {
+            large = false;
+        }
+        else {
+            large = (unifiedTheta >= PI) === !!clockwise;
+        }
+        var x0 = round4(cx + rx * mathCos(startAngle));
+        var y0 = round4(cy + ry * mathSin(startAngle));
+        if (isCircle) {
+            if (clockwise) {
+                dTheta = PI2 - 1e-4;
+            }
+            else {
+                dTheta = -PI2 + 1e-4;
+            }
+            large = true;
+            if (firstCmd) {
+                this._d.push('M', x0, y0);
+            }
+        }
+        var x = round4(cx + rx * mathCos(startAngle + dTheta));
+        var y = round4(cy + ry * mathSin(startAngle + dTheta));
+        if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x) || isNaN(y)) {
+            return '';
+        }
+        this._d.push('A', round4(rx), round4(ry), mathRound(psi * degree), +large, +clockwise, x, y);
+    };
+    SVGPathRebuilder.prototype.rect = function (x, y, w, h) {
+        this._add('M', x, y);
+        this._add('L', x + w, y);
+        this._add('L', x + w, y + h);
+        this._add('L', x, y + h);
+        this._add('L', x, y);
+    };
+    SVGPathRebuilder.prototype.closePath = function () {
+        this._add('Z');
+    };
+    SVGPathRebuilder.prototype._add = function (cmd, a, b, c, d, e, f, g, h) {
+        this._d.push(cmd);
+        for (var i = 1; i < arguments.length; i++) {
+            var val = arguments[i];
             if (isNaN(val)) {
-                return '';
+                this._invalid = true;
+                return;
             }
-            str.push(val);
+            this._d.push(round4(val));
         }
-    }
-    return str.join(' ');
-}
-function wrapSVGBuildPath(el) {
-    if (!el.__svgBuildPath) {
-        var oldBuildPath_1 = el.buildPath;
-        el.__svgBuildPath = el.buildPath = function (path, shape, inBundle) {
-            oldBuildPath_1.call(this, el.path, shape, inBundle);
-            el.__svgPathStr = pathDataToString(el.path);
-        };
-        if (!el.shapeChanged()) {
-            el.__svgPathStr = pathDataToString(el.path);
-        }
-    }
-}
+    };
+    SVGPathRebuilder.prototype.generateStr = function () {
+        this._str = this._invalid ? '' : this._d.join(' ');
+        this._d = [];
+    };
+    SVGPathRebuilder.prototype.getStr = function () {
+        return this._str;
+    };
+    return SVGPathRebuilder;
+}());
 var svgPath = {
@@ -225,3 +206,2 @@ brush: function (el) {
         var path = el.path;
-        wrapSVGBuildPath(el);
         if (el.shapeChanged()) {
@@ -232,3 +212,15 @@ path.beginPath();
         }
-        attr(svgEl, 'd', el.__svgPathStr);
+        var pathVersion = path.getVersion();
+        var elExt = el;
+        var svgPathBuilder = elExt.__svgPathBuilder;
+        if (elExt.__svgPathVersion !== pathVersion || !svgPathBuilder || el.style.strokePercent < 1) {
+            if (!svgPathBuilder) {
+                svgPathBuilder = elExt.__svgPathBuilder = new SVGPathRebuilder();
+            }
+            svgPathBuilder.reset();
+            path.rebuildPath(svgPathBuilder, el.style.strokePercent);
+            svgPathBuilder.generateStr();
+            elExt.__svgPathVersion = pathVersion;
+        }
+        attr(svgEl, 'd', svgPathBuilder.getStr());
         bindStyle(svgEl, style, el);
@@ -235,0 +227,0 @@ setTransform(svgEl, el.transform);

esm/tool/transformPath.js

@@ -76,2 +76,3 @@ import PathProxy from '../core/PathProxy';
     }
+    path.increaseVersion();
 }

esm/zrender.d.ts

@@ -34,2 +34,3 @@ /*!
     animation: Animation;
+    private _sleepAfterStill;
     private _stillFrameAccum;
@@ -52,2 +53,3 @@ private _needsRefresh;
     private _flush;
+    setSleepAfterStill(stillFramesCount: number): void;
     wakeUp(): void;
@@ -90,5 +92,5 @@ addHover(el: Displayable): void;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.0.0-alpha.2";
+export declare const version = "5.0.0-alpha.3";
 export interface ZRenderType extends ZRender {
 }
 export {};

esm/zrender.js

@@ -47,2 +47,3 @@ /*!
         var _this = this;
+        this._sleepAfterStill = 10;
         this._stillFrameAccum = 0;
@@ -85,2 +86,5 @@ this._needsRefresh = true;
     ZRender.prototype.add = function (el) {
+        if (!el) {
+            return;
+        }
         this.storage.addRoot(el);
@@ -91,2 +95,5 @@ el.addSelfToZr(this);
     ZRender.prototype.remove = function (el) {
+        if (!el) {
+            return;
+        }
         this.storage.delRoot(el);
@@ -121,3 +128,3 @@ el.removeSelfFromZr(this);
         if (!fromInside) {
-            this.animation.update();
+            this.animation.update(true);
         }
@@ -139,3 +146,3 @@ this._needsRefresh = false;
             triggerRendered = true;
-            this.refreshImmediately(fromInside);
+            this.refreshImmediately(true);
         }
@@ -150,5 +157,5 @@ if (this._needsRefreshHover) {
         }
-        else {
+        else if (this._sleepAfterStill > 0) {
             this._stillFrameAccum++;
-            if (this._stillFrameAccum > 10) {
+            if (this._stillFrameAccum > this._sleepAfterStill) {
                 this.animation.stop();
@@ -158,2 +165,5 @@ }
     };
+    ZRender.prototype.setSleepAfterStill = function (stillFramesCount) {
+        this._sleepAfterStill = stillFramesCount;
+    };
     ZRender.prototype.wakeUp = function () {
@@ -259,3 +269,3 @@ this.animation.start();
 }
-export var version = '5.0.0-alpha.2';
+export var version = '5.0.0-alpha.3';
 ;

lib/animation/Animation.d.ts

@@ -22,3 +22,3 @@ import Eventful from '../core/Eventful';
     private _paused;
-    constructor(opts: AnimationOption);
+    constructor(opts?: AnimationOption);
     addClip(clip: Clip): void;
@@ -28,3 +28,3 @@ addAnimator(animator: Animator<any>): void;
     removeAnimator(animator: Animator<any>): void;
-    update(): void;
+    update(notTriggerStageUpdate?: boolean): void;
     _startLoop(): void;
@@ -31,0 +31,0 @@ start(): void;

lib/animation/Animation.js

@@ -70,3 +70,3 @@ "use strict";
     };
-    Animation.prototype.update = function () {
+    Animation.prototype.update = function (notTriggerStageUpdate) {
         var time = new Date().getTime() - this._pausedTime;
@@ -90,3 +90,3 @@ var delta = time - this._time;
         this.trigger('frame', delta);
-        if (this.stage.update) {
+        if (this.stage.update && !notTriggerStageUpdate) {
             this.stage.update();
@@ -93,0 +93,0 @@ }

lib/animation/Animator.d.ts

@@ -48,2 +48,3 @@ import Clip from './Clip';
 declare type DoneCallback = () => void;
+declare type AbortCallback = () => void;
 export declare type OnframeCallback<T> = (target: T, percent: number) => void;
@@ -68,2 +69,3 @@ export declare type AnimationPropGetter<T> = (target: T, key: string) => InterpolatableType;
     private _onframeList;
+    private _abortedList;
     private _clip;
@@ -75,3 +77,2 @@ constructor(target: T, loop: boolean, additiveTo?: Animator<any>[]);
     whenWithKeys(time: number, props: Dictionary<any>, propNames: string[]): this;
-    during(callback: OnframeCallback<T>): this;
     pause(): void;
@@ -81,2 +82,4 @@ resume(): void;
     private _doneCallback;
+    private _abortedCallback;
+    private _setTracksFinished;
     private _getAdditiveTrack;
@@ -86,3 +89,5 @@ start(easing?: AnimationEasing, forceAnimate?: boolean): this;
     delay(time: number): this;
+    during(cb: OnframeCallback<T>): this;
     done(cb: DoneCallback): this;
+    aborted(cb: AbortCallback): this;
     getClip(): Clip;
@@ -89,0 +94,0 @@ getTrack(propName: string): Track;

lib/animation/Animator.js

@@ -184,2 +184,5 @@ "use strict";
         this._finished = true;
+        if (this._additiveTrack) {
+            this._additiveTrack.setFinished();
+        }
     };
@@ -283,3 +286,4 @@ Track.prototype.needsAnimate = function () {
         if (additiveTrack
-            && this.interpolable
+            && this.needsAnimate()
+            && additiveTrack.needsAnimate()
             && arrDim === additiveTrack.arrDim
@@ -428,17 +432,18 @@ && this.isValueColor === additiveTrack.isValueColor
         var propName = this.propName;
+        var additiveValue = this._additiveValue;
         if (arrDim === 0) {
             if (this.isValueColor) {
                 color.parse(target[propName], tmpRgba);
-                add1DArray(tmpRgba, tmpRgba, this._additiveValue, 1);
+                add1DArray(tmpRgba, tmpRgba, additiveValue, 1);
                 target[propName] = rgba2String(tmpRgba);
             }
             else {
-                target[propName] = target[propName] + this._additiveValue;
+                target[propName] = target[propName] + additiveValue;
             }
         }
         else if (arrDim === 1) {
-            add1DArray(target[propName], target[propName], this._additiveValue, 1);
+            add1DArray(target[propName], target[propName], additiveValue, 1);
         }
         else if (arrDim === 2) {
-            add2DArray(target[propName], target[propName], this._additiveValue, 1);
+            add2DArray(target[propName], target[propName], additiveValue, 1);
         }
@@ -456,4 +461,2 @@ };
         this._started = 0;
-        this._doneList = [];
-        this._onframeList = [];
         this._clip = null;
@@ -509,6 +512,2 @@ this._target = target;
     };
-    Animator.prototype.during = function (callback) {
-        this._onframeList.push(callback);
-        return this;
-    };
     Animator.prototype.pause = function () {
@@ -526,10 +525,33 @@ this._clip.pause();
     Animator.prototype._doneCallback = function () {
-        this._tracks = null;
+        this._setTracksFinished();
         this._clip = null;
         var doneList = this._doneList;
-        var len = doneList.length;
-        for (var i = 0; i < len; i++) {
-            doneList[i].call(this);
+        if (doneList) {
+            var len = doneList.length;
+            for (var i = 0; i < len; i++) {
+                doneList[i].call(this);
+            }
         }
     };
+    Animator.prototype._abortedCallback = function () {
+        this._setTracksFinished();
+        var animation = this.animation;
+        var abortedList = this._abortedList;
+        if (animation) {
+            animation.removeClip(this._clip);
+        }
+        this._clip = null;
+        if (abortedList) {
+            for (var i = 0; i < abortedList.length; i++) {
+                abortedList[i].call(this);
+            }
+        }
+    };
+    Animator.prototype._setTracksFinished = function () {
+        var tracks = this._tracks;
+        var tracksKeys = this._trackKeys;
+        for (var i = 0; i < tracksKeys.length; i++) {
+            tracks[tracksKeys[i]].setFinished();
+        }
+    };
     Animator.prototype._getAdditiveTrack = function (trackName) {
@@ -594,10 +616,10 @@ var additiveTrack;
                     }
-                    for (var i = 0; i < self._onframeList.length; i++) {
-                        self._onframeList[i](self._target, percent);
+                    var onframeList = self._onframeList;
+                    if (onframeList) {
+                        for (var i = 0; i < onframeList.length; i++) {
+                            onframeList[i](self._target, percent);
+                        }
                     }
                 },
                 ondestroy: function () {
-                    for (var i = 0; i < tracks.length; i++) {
-                        tracks[i].setFinished();
-                    }
                     self._doneCallback();
@@ -624,10 +646,6 @@ }
         var clip = this._clip;
-        var animation = this.animation;
         if (forwardToLast) {
             clip.onframe(1);
         }
-        if (animation) {
-            animation.removeClip(clip);
-        }
-        this._clip = null;
+        this._abortedCallback();
     };
@@ -638,4 +656,16 @@ Animator.prototype.delay = function (time) {
     };
+    Animator.prototype.during = function (cb) {
+        if (cb) {
+            if (!this._onframeList) {
+                this._onframeList = [];
+            }
+            this._onframeList.push(cb);
+        }
+        return this;
+    };
     Animator.prototype.done = function (cb) {
         if (cb) {
+            if (!this._doneList) {
+                this._doneList = [];
+            }
             this._doneList.push(cb);
@@ -645,2 +675,11 @@ }
     };
+    Animator.prototype.aborted = function (cb) {
+        if (cb) {
+            if (!this._abortedList) {
+                this._abortedList = [];
+            }
+            this._abortedList.push(cb);
+        }
+        return this;
+    };
     Animator.prototype.getClip = function () {
@@ -677,5 +716,4 @@ return this._clip;
         }
-        if (allAborted && this.animation) {
-            this.animation.removeClip(this._clip);
-            this._clip = null;
+        if (allAborted) {
+            this._abortedCallback();
         }
@@ -682,0 +720,0 @@ return allAborted;

lib/animation/requestAnimationFrame.js

@@ -5,8 +5,8 @@ "use strict";
 requestAnimationFrame = (typeof window !== 'undefined'
-    && (window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
-    || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
-    || window.mozRequestAnimationFrame
-    || window.webkitRequestAnimationFrame) || function (func) {
+    && ((window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
+        || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
+        || window.mozRequestAnimationFrame
+        || window.webkitRequestAnimationFrame)) || function (func) {
     return setTimeout(func, 16);
 };
 exports["default"] = requestAnimationFrame;

lib/canvas/graphic.d.ts

@@ -18,2 +18,3 @@ import Displayable from '../graphic/Displayable';
 };
+export declare function brushSingle(ctx: CanvasRenderingContext2D, el: Displayable): void;
 export declare function brush(ctx: CanvasRenderingContext2D, el: Displayable, scope: BrushScope, isLast: boolean): void;

lib/canvas/graphic.js

@@ -14,2 +14,4 @@ "use strict";
 var util_1 = require("../core/util");
+var dashStyle_1 = require("../graphic/helper/dashStyle");
+var Element_1 = require("../Element");
 var pathProxyForDraw = new PathProxy_1["default"](true);
@@ -125,3 +127,3 @@ function styleHasStroke(style) {
     }
-    var lineDash = style.lineDash;
+    var lineDash = style.lineDash && style.lineWidth > 0 && dashStyle_1.normalizeLineDash(style.lineDash, style.lineWidth);
     var lineDashOffset = style.lineDashOffset;
@@ -232,4 +234,5 @@ var ctxLineDash = !!ctx.setLineDash;
         ctx.textBaseline = style.textBaseline;
+        var hasLineDash = void 0;
         if (ctx.setLineDash) {
-            var lineDash = style.lineDash;
+            var lineDash = style.lineDash && style.lineWidth > 0 && dashStyle_1.normalizeLineDash(style.lineDash, style.lineWidth);
             var lineDashOffset = style.lineDashOffset;
@@ -244,5 +247,6 @@ if (lineDash) {
                 }
+                ctx.setLineDash(lineDash);
+                ctx.lineDashOffset = lineDashOffset;
+                hasLineDash = true;
             }
-            ctx.setLineDash(lineDash || []);
-            ctx.lineDashOffset = lineDashOffset;
         }
@@ -265,2 +269,5 @@ if (style.strokeFirst) {
         }
+        if (hasLineDash) {
+            ctx.setLineDash([]);
+        }
     }
@@ -383,2 +390,5 @@ }
 function isDisplayableCulled(el, width, height) {
+    if (!width || !height) {
+        return false;
+    }
     tmpRect.copy(el.getBoundingRect());
@@ -456,2 +466,6 @@ if (el.transform) {
 }
+function brushSingle(ctx, el) {
+    brush(ctx, el, { inHover: false, viewWidth: 0, viewHeight: 0 }, true);
+}
+exports.brushSingle = brushSingle;
 function brush(ctx, el, scope, isLast) {
@@ -463,3 +477,3 @@ var m = el.transform;
         || (m && !m[0] && !m[3])) {
-        el.__dirty = 0;
+        el.__dirty &= ~Element_1["default"].REDARAW_BIT;
         return;
@@ -466,0 +480,0 @@ }

lib/contain/path.js

@@ -8,3 +8,2 @@ "use strict";
 var arc = require("./arc");
-var util_1 = require("./util");
 var curve = require("../core/curve");
@@ -130,3 +129,3 @@ var windingLine_1 = require("./windingLine");
     }
-    if (dTheta % PI2 < 1e-4) {
+    if (dTheta >= PI2 - 1e-4) {
         startAngle = 0;
@@ -142,12 +141,9 @@ endAngle = PI2;
     }
-    if (anticlockwise) {
+    if (startAngle > endAngle) {
         var tmp_1 = startAngle;
-        startAngle = util_1.normalizeRadian(endAngle);
-        endAngle = util_1.normalizeRadian(tmp_1);
+        startAngle = endAngle;
+        endAngle = tmp_1;
     }
-    else {
-        startAngle = util_1.normalizeRadian(startAngle);
-        endAngle = util_1.normalizeRadian(endAngle);
-    }
-    if (startAngle > endAngle) {
+    if (startAngle < 0) {
+        startAngle += PI2;
         endAngle += PI2;
@@ -185,2 +181,3 @@ }
         var cmd = data[i++];
+        var isFirst = i === 1;
         if (cmd === CMD.M && i > 1) {
@@ -191,3 +188,3 @@ if (!isStroke) {
         }
-        if (i === 1) {
+        if (isFirst) {
             xi = data[i];
@@ -252,3 +249,3 @@ yi = data[i + 1];
                 y1 = Math.sin(theta) * ry + cy;
-                if (i > 1) {
+                if (!isFirst) {
                     w += windingLine_1["default"](xi, yi, x1, y1, x, y);
@@ -255,0 +252,0 @@ }

lib/core/Eventful.js

@@ -98,3 +98,2 @@ "use strict";
                     && !eventProcessor.filter(eventType, hItem.query)) {
-                    i++;
                     continue;
@@ -133,3 +132,3 @@ }
             var len = _h.length;
-            for (var i = 0; i < len;) {
+            for (var i = 0; i < len; i++) {
                 var hItem = _h[i];
@@ -140,3 +139,2 @@ if (eventProcessor
                     && !eventProcessor.filter(type, hItem.query)) {
-                    i++;
                     continue;
@@ -143,0 +141,0 @@ }

lib/core/PathProxy.d.ts

@@ -5,5 +5,7 @@ import BoundingRect from './BoundingRect';
 }
+export declare function normalizeArcAngles(angles: number[], anticlockwise: boolean): void;
 export default class PathProxy {
     dpr: number;
     data: number[] | Float32Array;
+    private _version;
     private _saveData;
@@ -35,2 +37,4 @@ private _ctx;
     constructor(notSaveData?: boolean);
+    increaseVersion(): void;
+    getVersion(): number;
     setScale(sx: number, sy: number, segmentIgnoreThreshold?: number): void;
@@ -65,5 +69,15 @@ setDPR(dpr: number): void;
     private _calculateLength;
-    rebuildPath(ctx: CanvasRenderingContext2D, percent: number): void;
+    rebuildPath(ctx: PathRebuilder, percent: number): void;
     private static initDefaultProps;
 }
+export interface PathRebuilder {
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number): void;
+    quadraticCurveTo(x: number, y: number, x2: number, y2: number): void;
+    arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
+    ellipse(cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    closePath(): void;
+}
 export {};

lib/core/PathProxy.js

@@ -32,5 +32,37 @@ "use strict";
 var hasTypedArray = typeof Float32Array !== 'undefined';
+var tmpAngles = [];
+function modPI2(radian) {
+    var n = Math.round(radian / PI * 1e8) / 1e8;
+    return (n % 2) * PI;
+}
+function normalizeArcAngles(angles, anticlockwise) {
+    var newStartAngle = modPI2(angles[0]);
+    if (newStartAngle < 0) {
+        newStartAngle += PI2;
+    }
+    var delta = newStartAngle - angles[0];
+    var newEndAngle = angles[1];
+    newEndAngle += delta;
+    if (!anticlockwise && newEndAngle - newStartAngle >= PI2) {
+        newEndAngle = newStartAngle + PI2;
+    }
+    else if (anticlockwise && newStartAngle - newEndAngle >= PI2) {
+        newEndAngle = newStartAngle - PI2;
+    }
+    else if (!anticlockwise && newStartAngle > newEndAngle) {
+        newEndAngle = newStartAngle +
+            (PI2 - modPI2(newStartAngle - newEndAngle));
+    }
+    else if (anticlockwise && newStartAngle < newEndAngle) {
+        newEndAngle = newStartAngle -
+            (PI2 - modPI2(newEndAngle - newStartAngle));
+    }
+    angles[0] = newStartAngle;
+    angles[1] = newEndAngle;
+}
+exports.normalizeArcAngles = normalizeArcAngles;
 var PathProxy = (function () {
     function PathProxy(notSaveData) {
         this.dpr = 1;
+        this._version = 0;
         this._xi = 0;
@@ -48,2 +80,8 @@ this._yi = 0;
     }
+    PathProxy.prototype.increaseVersion = function () {
+        this._version++;
+    };
+    PathProxy.prototype.getVersion = function () {
+        return this._version;
+    };
     PathProxy.prototype.setScale = function (sx, sy, segmentIgnoreThreshold) {
@@ -82,2 +120,3 @@ segmentIgnoreThreshold = segmentIgnoreThreshold || 0;
         }
+        this._version++;
     };
@@ -129,4 +168,8 @@ PathProxy.prototype.moveTo = function (x, y) {
     PathProxy.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        tmpAngles[0] = startAngle;
+        tmpAngles[1] = endAngle;
+        normalizeArcAngles(tmpAngles, anticlockwise);
+        startAngle = tmpAngles[0];
+        endAngle = tmpAngles[1];
         var delta = endAngle - startAngle;
-        endAngle = startAngle + delta;
         this.addData(CMD.A, cx, cy, r, r, startAngle, delta, 0, anticlockwise ? 0 : 1);
@@ -365,3 +408,4 @@ this._ctx && this._ctx.arc(cx, cy, r, startAngle, endAngle, anticlockwise);
             var cmd = data[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = data[i];
@@ -404,8 +448,8 @@ yi = data[i + 1];
                     i += 1;
-                    var anticlockwise = 1 - data[i++];
-                    if (i === 1) {
+                    var anticlockwise = !data[i++];
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
                         y0 = mathSin(startAngle) * ry + cy;
                     }
-                    bbox_1.fromArc(cx, cy, rx, ry, startAngle, endAngle, !!anticlockwise, min2, max2);
+                    bbox_1.fromArc(cx, cy, rx, ry, startAngle, endAngle, anticlockwise, min2, max2);
                     xi = mathCos(endAngle) * rx + cx;
@@ -451,3 +495,4 @@ yi = mathSin(endAngle) * ry + cy;
             var cmd = data[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = data[i];
@@ -508,3 +553,3 @@ yi = data[i + 1];
                     var anticlockwise = !data[i++];
-                    if (i === 1) {
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
@@ -572,3 +617,4 @@ y0 = mathSin(startAngle) * ry + cy;
             var cmd = d[i++];
-            if (i === 1) {
+            var isFirst = i === 1;
+            if (isFirst) {
                 xi = d[i];
@@ -671,10 +717,4 @@ yi = d[i + 1];
                     }
-                    if (isEllipse) {
-                        ctx.translate(cx, cy);
-                        ctx.rotate(psi);
-                        ctx.scale(scaleX, scaleY);
-                        ctx.arc(0, 0, r, startAngle, endAngle, anticlockwise);
-                        ctx.scale(1 / scaleX, 1 / scaleY);
-                        ctx.rotate(-psi);
-                        ctx.translate(-cx, -cy);
+                    if (isEllipse && ctx.ellipse) {
+                        ctx.ellipse(cx, cy, rx, ry, psi, startAngle, endAngle, anticlockwise);
                     }
@@ -687,3 +727,3 @@ else {
                     }
-                    if (i === 1) {
+                    if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
@@ -690,0 +730,0 @@ y0 = mathSin(startAngle) * ry + cy;

lib/Element.d.ts

@@ -20,2 +20,3 @@ import Transformable from './core/Transformable';
     during?: (percent: number) => void;
+    aborted?: Function;
     scope?: string;
@@ -42,2 +43,3 @@ force?: boolean;
     anchor?: Point;
+    showAbove?: boolean;
     candidates?: ('left' | 'top' | 'right' | 'bottom')[];
@@ -88,2 +90,3 @@ }
     silent?: boolean;
+    ignoreClip?: boolean;
     x?: number;
@@ -128,2 +131,3 @@ y?: number;
     animators: Animator<any>[];
+    ignoreClip: boolean;
     __hostTarget: Element;
@@ -171,5 +175,5 @@ __zr: ZRenderType;
     ensureState(name: string): ElementState;
-    clearStates(): void;
-    useState(stateName: string, keepCurrentStates?: boolean): ElementState;
-    useStates(states: string[]): void;
+    clearStates(noAnimation?: boolean): void;
+    useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean): ElementState;
+    useStates(states: string[], noAnimation?: boolean): void;
     private _updateAnimationTargets;
@@ -176,0 +180,0 @@ removeState(state: string): void;

lib/Element.js

@@ -299,6 +299,6 @@ "use strict";
     };
-    Element.prototype.clearStates = function () {
-        this.useState(exports.PRESERVED_NORMAL_STATE, false);
+    Element.prototype.clearStates = function (noAnimation) {
+        this.useState(exports.PRESERVED_NORMAL_STATE, false, noAnimation);
     };
-    Element.prototype.useState = function (stateName, keepCurrentStates) {
+    Element.prototype.useState = function (stateName, keepCurrentStates, noAnimation) {
         var toNormalState = stateName === exports.PRESERVED_NORMAL_STATE;
@@ -332,3 +332,3 @@ var hasStates = this.hasState();
         }
-        this._applyStateObj(stateName, state, this._normalState, keepCurrentStates, !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
+        this._applyStateObj(stateName, state, this._normalState, keepCurrentStates, !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
         if (this._textContent) {
@@ -360,3 +360,3 @@ this._textContent.useState(stateName, keepCurrentStates);
     };
-    Element.prototype.useStates = function (states) {
+    Element.prototype.useStates = function (states, noAnimation) {
         if (!states.length) {
@@ -401,3 +401,3 @@ this.clearStates();
             this.saveCurrentToNormalState(mergedState);
-            this._applyStateObj(states.join(','), mergedState, this._normalState, false, !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
+            this._applyStateObj(states.join(','), mergedState, this._normalState, false, !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0, animationCfg);
             if (this._textContent) {
@@ -412,3 +412,3 @@ this._textContent.useStates(states);
             this.markRedraw();
-            if (!useHoverLayer) {
+            if (!useHoverLayer && this.__inHover) {
                 this._toggleHoverLayerFlag(false);
@@ -761,2 +761,3 @@ this.__dirty &= ~Element.REDARAW_BIT;
         elProto.dragging = false;
+        elProto.ignoreClip = false;
         elProto.__inHover = false;
@@ -822,13 +823,22 @@ elProto.__dirty = Element.REDARAW_BIT;
     animateToShallow(animatable, '', animatable, target, cfg, animationProps, animators, reverse);
-    var count = animators.length;
-    function done() {
-        count--;
-        if (!count) {
-            cfg.done && cfg.done();
+    var doneCount = animators.length;
+    var abortedCount = doneCount;
+    var cfgDone = cfg.done;
+    var cfgAborted = cfg.aborted;
+    var doneCb = cfgDone ? function () {
+        doneCount--;
+        if (!doneCount) {
+            cfgDone();
         }
+    } : null;
+    var abortedCb = cfgAborted ? function () {
+        abortedCount--;
+        if (!abortedCount) {
+            cfgAborted();
+        }
+    } : null;
+    if (!doneCount) {
+        cfgDone && cfgDone();
     }
-    if (!count) {
-        cfg.done && cfg.done();
-    }
-    if (animators.length > 0 && typeof cfg.during === 'function') {
+    if (animators.length > 0 && cfg.during) {
         animators[0].during(function (target, percent) {
@@ -839,5 +849,10 @@ cfg.during(percent);
     for (var i = 0; i < animators.length; i++) {
-        animators[i]
-            .done(done)
-            .start(cfg.easing, cfg.force);
+        var animator = animators[i];
+        if (doneCb) {
+            animator.done(doneCb);
+        }
+        if (abortedCb) {
+            animator.aborted(abortedCb);
+        }
+        animator.start(cfg.easing, cfg.force);
     }
@@ -859,2 +874,9 @@ return animators;
         }
+        if (util_1.isTypedArray(source[key])) {
+            var len = source[key].length;
+            if (target[key].length !== len) {
+                target[key] = new (source[key].constructor)(len);
+                copyArrShallow(target[key], source[key], len);
+            }
+        }
         var sourceArr = source[key];
@@ -861,0 +883,0 @@ var targetArr = target[key];

lib/export.d.ts

@@ -7,2 +7,3 @@ import * as zrUtil from './core/util';
 import { parseSVG } from './tool/parseSVG';
+import { morphPath } from './tool/morphPath';
 export { default as Point } from './core/Point';
@@ -44,1 +45,2 @@ export { default as Element } from './Element';
 export { parseSVG };
+export { morphPath };

lib/export.js

@@ -15,2 +15,4 @@ "use strict";
 exports.parseSVG = parseSVG_1.parseSVG;
+var morphPath_1 = require("./tool/morphPath");
+exports.morphPath = morphPath_1.morphPath;
 var Point_1 = require("./core/Point");
@@ -17,0 +19,0 @@ exports.Point = Point_1["default"];

lib/graphic/helper/parseText.d.ts

@@ -25,2 +25,3 @@ import { TextAlign, TextVerticalAlign } from '../../core/types';
     height: number;
+    innerHeight: number;
     contentHeight: number;
@@ -27,0 +28,0 @@ contentWidth: number;

lib/graphic/helper/parseText.js

@@ -212,5 +212,6 @@ "use strict";
             var tokenHeight = util_1.retrieve2(tokenStyle.height, token.contentHeight);
-            token.lineHeight = util_1.retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
+            token.innerHeight = tokenHeight;
             textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
             token.height = tokenHeight;
+            token.lineHeight = util_1.retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
             token.align = tokenStyle && tokenStyle.align || style.align;
@@ -217,0 +218,0 @@ token.verticalAlign = tokenStyle && tokenStyle.verticalAlign || 'middle';

lib/graphic/Path.js

@@ -84,3 +84,3 @@ "use strict";
                 var fillLum = color_1.lum(pathFill, 0);
-                if (fillLum > 0.6) {
+                if (fillLum > 0.5) {
                     return config_1.DARK_LABEL_COLOR;
@@ -153,3 +153,4 @@ }
                 if (!this.hasFill()) {
-                    w = Math.max(w, this.strokeContainThreshold || 4);
+                    var strokeContainThreshold = this.strokeContainThreshold;
+                    w = Math.max(w, strokeContainThreshold == null ? 4 : strokeContainThreshold);
                 }
@@ -156,0 +157,0 @@ if (lineScale > 1e-10) {

lib/graphic/shape/Sector.d.ts

@@ -10,2 +10,4 @@ import Path, { PathProps } from '../Path';
     clockwise: boolean;
+    cornerRadius: number;
+    innerCornerRadius: number;
 }
@@ -12,0 +14,0 @@ interface SectorProps extends PathProps {

lib/graphic/shape/Sector.js

@@ -5,2 +5,3 @@ "use strict";
 var Path_1 = require("../Path");
+var roundSectorHelper = require("../helper/roundSector");
 var SectorShape = (function () {
@@ -15,2 +16,4 @@ function SectorShape() {
         this.clockwise = true;
+        this.cornerRadius = 0;
+        this.innerCornerRadius = 0;
     }
@@ -28,19 +31,3 @@ return SectorShape;
     Sector.prototype.buildPath = function (ctx, shape) {
-        var x = shape.cx;
-        var y = shape.cy;
-        var r0 = Math.max(shape.r0 || 0, 0);
-        var r = Math.max(shape.r, 0);
-        var startAngle = shape.startAngle;
-        var endAngle = shape.endAngle;
-        var clockwise = shape.clockwise;
-        var unitX = Math.cos(startAngle);
-        var unitY = Math.sin(startAngle);
-        ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
-        ctx.lineTo(unitX * r + x, unitY * r + y);
-        ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
-        ctx.lineTo(Math.cos(endAngle) * r0 + x, Math.sin(endAngle) * r0 + y);
-        if (r0 !== 0) {
-            ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
-        }
-        ctx.closePath();
+        roundSectorHelper.buildPath(ctx, shape);
     };
@@ -47,0 +34,0 @@ Sector.prototype.isZeroArea = function () {

lib/graphic/Text.js

@@ -204,3 +204,3 @@ "use strict";
             var boxY = text_1.adjustTextY(baseY, outerHeight, verticalAlign);
-            needDrawBg && this._renderBackground(style, boxX, boxY, outerWidth_1, outerHeight);
+            needDrawBg && this._renderBackground(style, style, boxX, boxY, outerWidth_1, outerHeight);
         }
@@ -290,3 +290,3 @@ textY += lineHeight / 2;
         if (needDrawBackground(style)) {
-            this._renderBackground(style, boxX, boxY, outerWidth, outerHeight);
+            this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
         }
@@ -341,3 +341,3 @@ var bgColorDrawn = !!(style.backgroundColor);
         var needDrawBg = !token.isLineHolder && needDrawBackground(tokenStyle);
-        needDrawBg && this._renderBackground(tokenStyle, textAlign === 'right'
+        needDrawBg && this._renderBackground(tokenStyle, style, textAlign === 'right'
             ? x - token.width
@@ -351,2 +351,3 @@ : textAlign === 'center'
             x = getTextXForPadding(x, textAlign, textPadding);
+            y -= token.height / 2 - textPadding[0] - token.innerHeight / 2;
         }
@@ -382,2 +383,3 @@ var el = this._getOrCreateChild(TSpan_1["default"]);
         subElStyle.font = token.font || text_1.DEFAULT_FONT;
+        subElStyle.opacity = util_1.retrieve3(tokenStyle.opacity, style.opacity, 1);
         if (textStroke) {
@@ -396,3 +398,3 @@ subElStyle.lineWidth = util_1.retrieve3(tokenStyle.lineWidth, style.lineWidth, defaultLineWidth);
     };
-    ZRText.prototype._renderBackground = function (style, x, y, width, height) {
+    ZRText.prototype._renderBackground = function (style, topStyle, x, y, width, height) {
         var textBackgroundColor = style.backgroundColor;
@@ -421,3 +423,2 @@ var textBorderWidth = style.borderWidth;
             rectStyle.fill = textBackgroundColor || null;
-            rectStyle.opacity = util_1.retrieve2(style.opacity, 1);
             rectStyle.fillOpacity = util_1.retrieve2(style.fillOpacity, 1);
@@ -444,2 +445,3 @@ }
             rectStyle.lineDashOffset = style.borderDashOffset || 0;
+            rectEl.strokeContainThreshold = 0;
             if (rectEl.hasFill() && rectEl.hasStroke()) {
@@ -450,7 +452,8 @@ rectStyle.strokeFirst = true;
         }
-        var shadowStyle = (rectEl || imgEl).style;
-        shadowStyle.shadowBlur = style.shadowBlur || 0;
-        shadowStyle.shadowColor = style.shadowColor || 'transparent';
-        shadowStyle.shadowOffsetX = style.shadowOffsetX || 0;
-        shadowStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        var commonStyle = (rectEl || imgEl).style;
+        commonStyle.shadowBlur = style.shadowBlur || 0;
+        commonStyle.shadowColor = style.shadowColor || 'transparent';
+        commonStyle.shadowOffsetX = style.shadowOffsetX || 0;
+        commonStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        commonStyle.opacity = util_1.retrieve3(style.opacity, topStyle.opacity, 1);
     };
@@ -457,0 +460,0 @@ ZRText.makeFont = function (style) {

lib/Handler.js

@@ -230,9 +230,15 @@ "use strict";
         var isSilent = void 0;
+        var ignoreClip = false;
         while (el) {
-            var clipPath = el.getClipPath();
-            if (clipPath && !clipPath.contain(x, y)) {
-                return false;
+            if (el.ignoreClip) {
+                ignoreClip = true;
             }
-            if (el.silent) {
-                isSilent = true;
+            if (!ignoreClip) {
+                var clipPath = el.getClipPath();
+                if (clipPath && !clipPath.contain(x, y)) {
+                    return false;
+                }
+                if (el.silent) {
+                    isSilent = true;
+                }
             }
@@ -239,0 +245,0 @@ var hostEl = el.__hostTarget;

lib/Storage.js

@@ -58,8 +58,9 @@ "use strict";
         el.beforeUpdate();
-        if (el.__dirty) {
-            el.update();
-        }
+        el.update();
         el.afterUpdate();
         var userSetClipPath = el.getClipPath();
-        if (userSetClipPath) {
+        if (el.ignoreClip) {
+            clipPaths = null;
+        }
+        else if (userSetClipPath) {
             if (clipPaths) {
@@ -66,0 +67,0 @@ clipPaths = clipPaths.slice();

lib/svg/graphic.js

@@ -7,2 +7,3 @@ "use strict";
 var util_1 = require("../core/util");
+var dashStyle_1 = require("../graphic/helper/dashStyle");
 var CMD = PathProxy_1["default"].CMD;
@@ -76,3 +77,3 @@ var NONE = 'none';
         attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
-        var lineDash = style.lineDash;
+        var lineDash = style.lineDash && strokeWidth > 0 && dashStyle_1.normalizeLineDash(style.lineDash, strokeWidth);
         if (lineDash) {
@@ -103,113 +104,93 @@ var lineDashOffset = style.lineDashOffset;
 }
-function pathDataToString(path) {
-    if (!path) {
-        return '';
+var SVGPathRebuilder = (function () {
+    function SVGPathRebuilder() {
     }
-    var str = [];
-    var data = path.data;
-    var dataLength = path.len();
-    var x;
-    var y;
-    for (var i = 0; i < dataLength;) {
-        var cmd = data[i++];
-        var cmdStr = '';
-        var nData = 0;
-        switch (cmd) {
-            case CMD.M:
-                cmdStr = 'M';
-                nData = 2;
-                break;
-            case CMD.L:
-                cmdStr = 'L';
-                nData = 2;
-                break;
-            case CMD.Q:
-                cmdStr = 'Q';
-                nData = 4;
-                break;
-            case CMD.C:
-                cmdStr = 'C';
-                nData = 6;
-                break;
-            case CMD.A:
-                var cx = data[i++];
-                var cy = data[i++];
-                var rx = data[i++];
-                var ry = data[i++];
-                var theta = data[i++];
-                var dTheta = data[i++];
-                var psi = data[i++];
-                var clockwise = data[i++];
-                var dThetaPositive = Math.abs(dTheta);
-                var isCircle = isAroundZero(dThetaPositive - PI2)
-                    || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
-                var unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
-                var large = false;
-                if (isCircle) {
-                    large = true;
-                }
-                else if (isAroundZero(dThetaPositive)) {
-                    large = false;
-                }
-                else {
-                    large = (unifiedTheta >= PI) === !!clockwise;
-                }
-                var x0 = round4(cx + rx * mathCos(theta));
-                var y0 = round4(cy + ry * mathSin(theta));
-                if (isCircle) {
-                    if (clockwise) {
-                        dTheta = PI2 - 1e-4;
-                    }
-                    else {
-                        dTheta = -PI2 + 1e-4;
-                    }
-                    large = true;
-                    if (i === 9) {
-                        str.push('M', x0, y0);
-                    }
-                }
-                x = round4(cx + rx * mathCos(theta + dTheta));
-                y = round4(cy + ry * mathSin(theta + dTheta));
-                if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x) || isNaN(y)) {
-                    return '';
-                }
-                str.push('A', round4(rx), round4(ry), mathRound(psi * degree), +large, +clockwise, x, y);
-                break;
-            case CMD.Z:
-                cmdStr = 'Z';
-                break;
-            case CMD.R:
-                x = round4(data[i++]);
-                y = round4(data[i++]);
-                var w = round4(data[i++]);
-                var h = round4(data[i++]);
-                if (isNaN(x) || isNaN(y) || isNaN(w) || isNaN(h)) {
-                    return '';
-                }
-                str.push('M', x, y, 'L', x + w, y, 'L', x + w, y + h, 'L', x, y + h, 'L', x, y);
-                break;
+    SVGPathRebuilder.prototype.reset = function () {
+        this._d = [];
+        this._str = '';
+    };
+    SVGPathRebuilder.prototype.moveTo = function (x, y) {
+        this._add('M', x, y);
+    };
+    SVGPathRebuilder.prototype.lineTo = function (x, y) {
+        this._add('L', x, y);
+    };
+    SVGPathRebuilder.prototype.bezierCurveTo = function (x, y, x2, y2, x3, y3) {
+        this._add('C', x, y, x2, y2, x3, y3);
+    };
+    SVGPathRebuilder.prototype.quadraticCurveTo = function (x, y, x2, y2) {
+        this._add('Q', x, y, x2, y2);
+    };
+    SVGPathRebuilder.prototype.arc = function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        this.ellipse(cx, cy, r, r, 0, startAngle, endAngle, anticlockwise);
+    };
+    SVGPathRebuilder.prototype.ellipse = function (cx, cy, rx, ry, psi, startAngle, endAngle, anticlockwise) {
+        var firstCmd = this._d.length === 0;
+        var dTheta = endAngle - startAngle;
+        var clockwise = !anticlockwise;
+        var dThetaPositive = Math.abs(dTheta);
+        var isCircle = isAroundZero(dThetaPositive - PI2)
+            || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
+        var unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
+        var large = false;
+        if (isCircle) {
+            large = true;
         }
-        cmdStr && str.push(cmdStr);
-        for (var j = 0; j < nData; j++) {
-            var val = round4(data[i++]);
+        else if (isAroundZero(dThetaPositive)) {
+            large = false;
+        }
+        else {
+            large = (unifiedTheta >= PI) === !!clockwise;
+        }
+        var x0 = round4(cx + rx * mathCos(startAngle));
+        var y0 = round4(cy + ry * mathSin(startAngle));
+        if (isCircle) {
+            if (clockwise) {
+                dTheta = PI2 - 1e-4;
+            }
+            else {
+                dTheta = -PI2 + 1e-4;
+            }
+            large = true;
+            if (firstCmd) {
+                this._d.push('M', x0, y0);
+            }
+        }
+        var x = round4(cx + rx * mathCos(startAngle + dTheta));
+        var y = round4(cy + ry * mathSin(startAngle + dTheta));
+        if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x) || isNaN(y)) {
+            return '';
+        }
+        this._d.push('A', round4(rx), round4(ry), mathRound(psi * degree), +large, +clockwise, x, y);
+    };
+    SVGPathRebuilder.prototype.rect = function (x, y, w, h) {
+        this._add('M', x, y);
+        this._add('L', x + w, y);
+        this._add('L', x + w, y + h);
+        this._add('L', x, y + h);
+        this._add('L', x, y);
+    };
+    SVGPathRebuilder.prototype.closePath = function () {
+        this._add('Z');
+    };
+    SVGPathRebuilder.prototype._add = function (cmd, a, b, c, d, e, f, g, h) {
+        this._d.push(cmd);
+        for (var i = 1; i < arguments.length; i++) {
+            var val = arguments[i];
             if (isNaN(val)) {
-                return '';
+                this._invalid = true;
+                return;
             }
-            str.push(val);
+            this._d.push(round4(val));
         }
-    }
-    return str.join(' ');
-}
-function wrapSVGBuildPath(el) {
-    if (!el.__svgBuildPath) {
-        var oldBuildPath_1 = el.buildPath;
-        el.__svgBuildPath = el.buildPath = function (path, shape, inBundle) {
-            oldBuildPath_1.call(this, el.path, shape, inBundle);
-            el.__svgPathStr = pathDataToString(el.path);
-        };
-        if (!el.shapeChanged()) {
-            el.__svgPathStr = pathDataToString(el.path);
-        }
-    }
-}
+    };
+    SVGPathRebuilder.prototype.generateStr = function () {
+        this._str = this._invalid ? '' : this._d.join(' ');
+        this._d = [];
+    };
+    SVGPathRebuilder.prototype.getStr = function () {
+        return this._str;
+    };
+    return SVGPathRebuilder;
+}());
 var svgPath = {
@@ -227,3 +208,2 @@ brush: function (el) {
         var path = el.path;
-        wrapSVGBuildPath(el);
         if (el.shapeChanged()) {
@@ -234,3 +214,15 @@ path.beginPath();
         }
-        attr(svgEl, 'd', el.__svgPathStr);
+        var pathVersion = path.getVersion();
+        var elExt = el;
+        var svgPathBuilder = elExt.__svgPathBuilder;
+        if (elExt.__svgPathVersion !== pathVersion || !svgPathBuilder || el.style.strokePercent < 1) {
+            if (!svgPathBuilder) {
+                svgPathBuilder = elExt.__svgPathBuilder = new SVGPathRebuilder();
+            }
+            svgPathBuilder.reset();
+            path.rebuildPath(svgPathBuilder, el.style.strokePercent);
+            svgPathBuilder.generateStr();
+            elExt.__svgPathVersion = pathVersion;
+        }
+        attr(svgEl, 'd', svgPathBuilder.getStr());
         bindStyle(svgEl, style, el);
@@ -237,0 +229,0 @@ setTransform(svgEl, el.transform);

lib/tool/transformPath.js

@@ -78,3 +78,4 @@ "use strict";
     }
+    path.increaseVersion();
 }
 exports["default"] = default_1;

lib/zrender.d.ts

@@ -34,2 +34,3 @@ /*!
     animation: Animation;
+    private _sleepAfterStill;
     private _stillFrameAccum;
@@ -52,2 +53,3 @@ private _needsRefresh;
     private _flush;
+    setSleepAfterStill(stillFramesCount: number): void;
     wakeUp(): void;
@@ -90,5 +92,5 @@ addHover(el: Displayable): void;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.0.0-alpha.2";
+export declare const version = "5.0.0-alpha.3";
 export interface ZRenderType extends ZRender {
 }
 export {};

lib/zrender.js

@@ -49,2 +49,3 @@ "use strict";
         var _this = this;
+        this._sleepAfterStill = 10;
         this._stillFrameAccum = 0;
@@ -87,2 +88,5 @@ this._needsRefresh = true;
     ZRender.prototype.add = function (el) {
+        if (!el) {
+            return;
+        }
         this.storage.addRoot(el);
@@ -93,2 +97,5 @@ el.addSelfToZr(this);
     ZRender.prototype.remove = function (el) {
+        if (!el) {
+            return;
+        }
         this.storage.delRoot(el);
@@ -123,3 +130,3 @@ el.removeSelfFromZr(this);
         if (!fromInside) {
-            this.animation.update();
+            this.animation.update(true);
         }
@@ -141,3 +148,3 @@ this._needsRefresh = false;
             triggerRendered = true;
-            this.refreshImmediately(fromInside);
+            this.refreshImmediately(true);
         }
@@ -152,5 +159,5 @@ if (this._needsRefreshHover) {
         }
-        else {
+        else if (this._sleepAfterStill > 0) {
             this._stillFrameAccum++;
-            if (this._stillFrameAccum > 10) {
+            if (this._stillFrameAccum > this._sleepAfterStill) {
                 this.animation.stop();
@@ -160,2 +167,5 @@ }
     };
+    ZRender.prototype.setSleepAfterStill = function (stillFramesCount) {
+        this._sleepAfterStill = stillFramesCount;
+    };
     ZRender.prototype.wakeUp = function () {
@@ -266,3 +276,3 @@ this.animation.start();
 exports.registerPainter = registerPainter;
-exports.version = '5.0.0-alpha.2';
+exports.version = '5.0.0-alpha.3';
 ;

package.json

 {
   "name": "zrender",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.3",
   "description": "A lightweight canvas library.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 ZRender
 =======
 
-A lightweight canvas library which providing 2d draw for [ECharts](https://github.com/ecomfe/echarts).
+A lightweight canvas library which providing 2d draw for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts).
 
@@ -64,3 +64,1 @@ [![Build Status](https://travis-ci.com/ecomfe/zrender.svg?branch=master)](https://travis-ci.com/ecomfe/zrender) [![](https://img.shields.io/npm/dw/zrender.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/zrender) ![Commits Since 4.0.0](https://img.shields.io/github/commits-since/ecomfe/zrender/4.0.0.svg?colorB=%234c1&style=flat)
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-

src/animation/Animation.ts

@@ -62,3 +62,3 @@ /**
 
-    constructor(opts: AnimationOption) {
+    constructor(opts?: AnimationOption) {
         super();
@@ -140,3 +140,3 @@
 
-    update() {
+    update(notTriggerStageUpdate?: boolean) {
         const time = new Date().getTime() - this._pausedTime;
@@ -170,3 +170,3 @@ const delta = time - this._time;
 
-        if (this.stage.update) {
+        if (this.stage.update && !notTriggerStageUpdate) {
             this.stage.update();
@@ -173,0 +173,0 @@ }

src/animation/Animator.ts

@@ -284,3 +284,2 @@ /**
 
-
     private _needsSort: boolean = false
@@ -308,2 +307,7 @@
         this._finished = true;
+        // Also set additive track to finished.
+        // Make sure the final value stopped on the latest track
+        if (this._additiveTrack) {
+            this._additiveTrack.setFinished();
+        }
     }
@@ -430,3 +434,5 @@
         if (additiveTrack
-            && this.interpolable
+            // If two track both will be animated and have same value format.
+            && this.needsAnimate()
+            && additiveTrack.needsAnimate()
             && arrDim === additiveTrack.arrDim
@@ -647,2 +653,3 @@ && this.isValueColor === additiveTrack.isValueColor
         const propName = this.propName;
+        const additiveValue = this._additiveValue;
 
@@ -653,3 +660,3 @@ if (arrDim === 0) {
                 color.parse(target[propName], tmpRgba);
-                add1DArray(tmpRgba, tmpRgba, this._additiveValue as NumberArray, 1);
+                add1DArray(tmpRgba, tmpRgba, additiveValue as NumberArray, 1);
                 target[propName] = rgba2String(tmpRgba);
@@ -659,10 +666,10 @@ }
                 // Add a difference value based on the change of previous frame.
-                target[propName] = target[propName] + this._additiveValue;
+                target[propName] = target[propName] + additiveValue;
             }
         }
         else if (arrDim === 1) {
-            add1DArray(target[propName], target[propName], this._additiveValue as NumberArray, 1);
+            add1DArray(target[propName], target[propName], additiveValue as NumberArray, 1);
         }
         else if (arrDim === 2) {
-            add2DArray(target[propName], target[propName], this._additiveValue as NumberArray[], 1);
+            add2DArray(target[propName], target[propName], additiveValue as NumberArray[], 1);
         }
@@ -674,2 +681,3 @@ }
 type DoneCallback = () => void;
+type AbortCallback = () => void;
 export type OnframeCallback<T> = (target: T, percent: number) => void;
@@ -708,5 +716,7 @@
 
-    private _doneList: DoneCallback[] = []
-    private _onframeList: OnframeCallback<T>[] = []
+    private _doneList: DoneCallback[]
+    private _onframeList: OnframeCallback<T>[]
 
+    private _abortedList: AbortCallback[]
+
     private _clip: Clip = null
@@ -793,11 +803,2 @@
 
-    /**
-     * 添加动画每一帧的回调函数
-     * @param callback
-     */
-    during(callback: OnframeCallback<T>) {
-        this._onframeList.push(callback);
-        return this;
-    }
-
     pause() {
@@ -818,4 +819,3 @@ this._clip.pause();
     private _doneCallback() {
-        // Clear all tracks
-        this._tracks = null;
+        this._setTracksFinished();
         // Clear clip
@@ -825,8 +825,34 @@ this._clip = null;
         const doneList = this._doneList;
-        const len = doneList.length;
-        for (let i = 0; i < len; i++) {
-            doneList[i].call(this);
+        if (doneList) {
+            const len = doneList.length;
+            for (let i = 0; i < len; i++) {
+                doneList[i].call(this);
+            }
         }
     }
+    private _abortedCallback() {
+        this._setTracksFinished();
 
+        const animation = this.animation;
+        const abortedList = this._abortedList;
+
+        if (animation) {
+            animation.removeClip(this._clip);
+        }
+        this._clip = null;
+
+        if (abortedList) {
+            for (let i = 0; i < abortedList.length; i++) {
+                abortedList[i].call(this);
+            }
+        }
+    }
+    private _setTracksFinished() {
+        const tracks = this._tracks;
+        const tracksKeys = this._trackKeys;
+        for (let i = 0; i < tracksKeys.length; i++) {
+            tracks[tracksKeys[i]].setFinished();
+        }
+    }
+
     private _getAdditiveTrack(trackName: string): Track {
@@ -846,2 +872,3 @@ let additiveTrack;
     }
+
     /**
@@ -908,10 +935,10 @@ * Start the animation
                     }
-                    for (let i = 0; i < self._onframeList.length; i++) {
-                        self._onframeList[i](self._target, percent);
+                    const onframeList = self._onframeList;
+                    if (onframeList) {
+                        for (let i = 0; i < onframeList.length; i++) {
+                            onframeList[i](self._target, percent);
+                        }
                     }
                 },
                 ondestroy() {
-                    for (let i = 0; i < tracks.length; i++) {
-                        tracks[i].setFinished();
-                    }
                     self._doneCallback();
@@ -948,3 +975,2 @@ }
         const clip = this._clip;
-        const animation = this.animation;
         if (forwardToLast) {
@@ -954,6 +980,4 @@ // Move to last frame before stop
         }
-        if (animation) {
-            animation.removeClip(clip);
-        }
-        this._clip = null;
+
+        this._abortedCallback();
     }
@@ -969,2 +993,15 @@ /**
     /**
+     * 添加动画每一帧的回调函数
+     * @param callback
+     */
+    during(cb: OnframeCallback<T>) {
+        if (cb) {
+            if (!this._onframeList) {
+                this._onframeList = [];
+            }
+            this._onframeList.push(cb);
+        }
+        return this;
+    }
+    /**
      * Add callback for animation end
@@ -975,2 +1012,5 @@ * @param cb
         if (cb) {
+            if (!this._doneList) {
+                this._doneList = [];
+            }
             this._doneList.push(cb);
@@ -981,2 +1021,12 @@ }
 
+    aborted(cb: AbortCallback) {
+        if (cb) {
+            if (!this._abortedList) {
+                this._abortedList = [];
+            }
+            this._abortedList.push(cb);
+        }
+        return this;
+    }
+
     getClip() {
@@ -1026,5 +1076,4 @@ return this._clip;
         // Remove clip if all tracks has been aborted.
-        if (allAborted && this.animation) {
-            this.animation.removeClip(this._clip);
-            this._clip = null;
+        if (allAborted) {
+            this._abortedCallback();
         }
@@ -1091,2 +1140,3 @@
     }
+
 }

src/animation/requestAnimationFrame.ts

@@ -7,11 +7,13 @@ type RequestAnimationFrameType = typeof window.requestAnimationFrame
 	typeof window !== 'undefined'
-		&& (window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
-		// https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
-		|| ((window as any).msRequestAnimationFrame && (window as any).msRequestAnimationFrame.bind(window))
-		|| (window as any).mozRequestAnimationFrame
-		|| window.webkitRequestAnimationFrame
-	) || function (func: Parameters<RequestAnimationFrameType>[0]): number {
-	    return setTimeout(func, 16) as any;
-	};
+		&& (
+			(window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
+			// https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
+			|| ((window as any).msRequestAnimationFrame && (window as any).msRequestAnimationFrame.bind(window))
+			|| (window as any).mozRequestAnimationFrame
+			|| window.webkitRequestAnimationFrame
+		)
+) || function (func: Parameters<RequestAnimationFrameType>[0]): number {
+	return setTimeout(func, 16) as any;
+};
 
-export default requestAnimationFrame;
+export default requestAnimationFrame;

src/canvas/graphic.ts

@@ -18,3 +18,6 @@ import Displayable, { DEFAULT_COMMON_STYLE } from '../graphic/Displayable';
 import { map } from '../core/util';
+import { normalizeLineDash } from '../graphic/helper/dashStyle';
+import Element from '../Element';
 
+
 const pathProxyForDraw = new PathProxy(true);
@@ -163,3 +166,3 @@
 
-    let lineDash = style.lineDash;
+    let lineDash = style.lineDash && style.lineWidth > 0 && normalizeLineDash(style.lineDash, style.lineWidth);
     let lineDashOffset = style.lineDashOffset;
@@ -318,4 +321,6 @@
         ctx.textBaseline = style.textBaseline;
+
+        let hasLineDash;
         if (ctx.setLineDash) {
-            let lineDash = style.lineDash;
+            let lineDash = style.lineDash && style.lineWidth > 0 && normalizeLineDash(style.lineDash, style.lineWidth);
             let lineDashOffset = style.lineDashOffset;
@@ -330,5 +335,7 @@ if (lineDash) {
                 }
+                ctx.setLineDash(lineDash);
+                ctx.lineDashOffset = lineDashOffset;
+
+                hasLineDash = true;
             }
-            ctx.setLineDash(lineDash || []);
-            ctx.lineDashOffset = lineDashOffset;
         }
@@ -352,3 +359,9 @@
         }
+
+        if (hasLineDash) {
+            // Remove lineDash
+            ctx.setLineDash([]);
+        }
     }
+
 }
@@ -521,2 +534,6 @@
 function isDisplayableCulled(el: Displayable, width: number, height: number) {
+    // Disable culling when width or height is 0
+    if (!width || !height) {
+        return false;
+    }
     tmpRect.copy(el.getBoundingRect());
@@ -636,2 +653,6 @@ if (el.transform) {
 
+export function brushSingle(ctx: CanvasRenderingContext2D, el: Displayable) {
+    brush(ctx, el, { inHover: false, viewWidth: 0, viewHeight: 0 }, true);
+}
+
 // Brush different type of elements.
@@ -660,3 +681,5 @@ export function brush(
         // Or this element will always been rendered in progressive rendering.
-        el.__dirty = 0;
+        // But other dirty bit should not be cleared, otherwise it cause the shape
+        // can not be updated in this case.
+        el.__dirty &= ~Element.REDARAW_BIT;
         return;
@@ -850,2 +873,2 @@ }
     ctx.restore();
-}
+}

src/canvas/Painter.ts

 import {devicePixelRatio} from '../config';
 import * as util from '../core/util';
-import timsort from '../core/timsort';
 import Layer, { LayerConfig } from './Layer';
@@ -5,0 +4,0 @@ import requestAnimationFrame from '../animation/requestAnimationFrame';

src/contain/path.ts

@@ -6,3 +6,2 @@ import PathProxy from '../core/PathProxy';
 import * as arc from './arc';
-import {normalizeRadian} from './util';
 import * as curve from '../core/curve';
@@ -147,5 +146,5 @@ import windingLine from './windingLine';
 }
-
 // TODO
 // Arc 旋转
+// startAngle, endAngle has been normalized by normalizeArcAngles
 function windingArc(
@@ -167,3 +166,3 @@ cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean,
     }
-    if (dTheta % PI2 < 1e-4) {
+    if (dTheta >= PI2 - 1e-4) {
         // Is a circle
@@ -181,12 +180,12 @@ startAngle = 0;
 
-    if (anticlockwise) {
+    if (startAngle > endAngle) {
+        // Swap, make sure startAngle is smaller than endAngle.
         const tmp = startAngle;
-        startAngle = normalizeRadian(endAngle);
-        endAngle = normalizeRadian(tmp);
+        startAngle = endAngle;
+        endAngle = tmp;
     }
-    else {
-        startAngle = normalizeRadian(startAngle);
-        endAngle = normalizeRadian(endAngle);
-    }
-    if (startAngle > endAngle) {
+    // endAngle - startAngle is normalized to 0 - 2*PI.
+    // So following will normalize them to 0 - 4*PI
+    if (startAngle < 0) {
+        startAngle += PI2;
         endAngle += PI2;
@@ -218,2 +217,3 @@ }
 
+
 function containPath(
@@ -232,2 +232,3 @@ data: PathData, lineWidth: number, isStroke: boolean, x: number, y: number
         const cmd = data[i++];
+        const isFirst = i === 1;
         // Begin a new subpath
@@ -245,3 +246,3 @@ if (cmd === CMD.M && i > 1) {
 
-        if (i === 1) {
+        if (isFirst) {
             // 如果第一个命令是 L, C, Q
@@ -332,3 +333,3 @@ // 则 previous point 同绘制命令的第一个 point
                 // 不是直接使用 arc 命令
-                if (i > 1) {
+                if (!isFirst) {
                     w += windingLine(xi, yi, x1, y1, x, y);
@@ -335,0 +336,0 @@ }

src/core/Eventful.ts

@@ -222,3 +222,2 @@ // Return true to cancel bubble
                 ) {
-                    i++;
                     continue;
@@ -271,3 +270,3 @@ }
             const len = _h.length;
-            for (let i = 0; i < len;) {
+            for (let i = 0; i < len; i++) {
                 const hItem = _h[i];
@@ -279,3 +278,2 @@ if (eventProcessor
                 ) {
-                    i++;
                     continue;
@@ -282,0 +280,0 @@ }

src/core/PathProxy.ts

@@ -60,2 +60,50 @@ /**
 
+const tmpAngles: number[] = [];
+
+function modPI2(radian: number) {
+    // It's much more stable to mod N instedof PI
+    const n = Math.round(radian / PI * 1e8) / 1e8;
+    return (n % 2) * PI;
+}
+/**
+ * Normalize start and end angles.
+ * startAngle will be normalized to 0 ~ PI*2
+ * sweepAngle(endAngle - startAngle) will be normalized to 0 ~ PI*2 if clockwise.
+ * -PI*2 ~ 0 if anticlockwise.
+ */
+export function normalizeArcAngles(angles: number[], anticlockwise: boolean): void {
+    let newStartAngle = modPI2(angles[0]);
+    if (newStartAngle < 0) {
+        // Normlize to 0 - PI2
+        newStartAngle += PI2;
+    }
+
+    let delta = newStartAngle - angles[0];
+    let newEndAngle = angles[1];
+    newEndAngle += delta;
+
+    // https://github.com/chromium/chromium/blob/c20d681c9c067c4e15bb1408f17114b9e8cba294/third_party/blink/renderer/modules/canvas/canvas2d/canvas_path.cc#L184
+    // Is circle
+    if (!anticlockwise && newEndAngle - newStartAngle >= PI2) {
+        newEndAngle = newStartAngle + PI2;
+    }
+    else if (anticlockwise && newStartAngle - newEndAngle >= PI2) {
+        newEndAngle = newStartAngle - PI2;
+    }
+    // Make startAngle < endAngle when clockwise, otherwise endAngle < startAngle.
+    // The sweep angle can never been larger than P2.
+    else if (!anticlockwise && newStartAngle > newEndAngle) {
+        newEndAngle = newStartAngle +
+            (PI2 - modPI2(newStartAngle - newEndAngle));
+    }
+    else if (anticlockwise && newStartAngle < newEndAngle) {
+        newEndAngle = newStartAngle -
+            (PI2 - modPI2(newEndAngle - newStartAngle));
+    }
+
+    angles[0] = newStartAngle;
+    angles[1] = newEndAngle;
+}
+
+
 export default class PathProxy {
@@ -67,2 +115,7 @@
 
+    /**
+     * Version is for detecing if the path has been changed.
+     */
+    private _version = 0
+
     private _saveData: boolean
@@ -88,9 +141,5 @@
     private _lineDash: number[]
-
     private _needsDash: boolean
-
     private _dashOffset: number
-
     private _dashIdx: number
-
     private _dashSum: number
@@ -110,3 +159,15 @@
 
+    increaseVersion() {
+        this._version++;
+    }
+
     /**
+     * Version can be used outside for compare if the path is changed.
+     * For example to determine if need to update svg d str in svg renderer.
+     */
+    getVersion() {
+        return this._version;
+    }
+
+    /**
      * @readOnly
@@ -159,2 +220,5 @@ */
         }
+
+        // Update version
+        this._version++;
     }
@@ -222,26 +286,11 @@
     arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise?: boolean) {
-        // Normalize delta to 0 - PI2
-        let delta = endAngle - startAngle;
+        tmpAngles[0] = startAngle;
+        tmpAngles[1] = endAngle;
+        normalizeArcAngles(tmpAngles, anticlockwise);
 
-        /// TODO
-        // if (delta < 0) {
-        //     const n = Math.round(delta / PI * 1e6) / 1e6;
-        //     // Convert to positive
-        //     // It's much more stable to mod N.
-        //     delta = PI2 + (n % 2) * PI;
-        // }
-        // else {
-        //     delta = mathMin(delta, PI2);
-        // }
+        startAngle = tmpAngles[0];
+        endAngle = tmpAngles[1];
 
-        // // Convert to -PI2 ~ PI2, -PI2 is anticlockwise
-        // if (anticlockwise && delta > 0) {
-        //     // Convert delta to negative
-        //     delta = delta - PI2;
-        //     if (Math.abs(delta) < 1e-6) {   // is circle.
-        //         delta = delta - PI2;
-        //     }
-        // }
+        let delta = endAngle - startAngle;
 
-        endAngle = startAngle + delta;
 
@@ -585,3 +634,4 @@ this.addData(
 
-            if (i === 1) {
+            const isFirst = i === 1;
+            if (isFirst) {
                 // 如果第一个命令是 L, C, Q
@@ -630,3 +680,2 @@ // 则 previous point 同绘制命令的第一个 point
                 case CMD.A:
-                    // TODO Arc 判断的开销比较大
                     const cx = data[i++];
@@ -640,5 +689,5 @@ const cy = data[i++];
                     i += 1;
-                    const anticlockwise = 1 - data[i++];
+                    const anticlockwise = !data[i++];
 
-                    if (i === 1) {
+                    if (isFirst) {
                         // 直接使用 arc 命令
@@ -652,3 +701,3 @@ // 第一个命令起点还未定义
                         cx, cy, rx, ry, startAngle, endAngle,
-                        !!anticlockwise, min2, max2
+                        anticlockwise, min2, max2
                     );
@@ -707,4 +756,5 @@
             const cmd = data[i++] as number;
+            const isFirst = i === 1;
 
-            if (i === 1) {
+            if (isFirst) {
                 // 如果第一个命令是 L, C, Q
@@ -777,3 +827,3 @@ // 则 previous point 同绘制命令的第一个 point
 
-                    if (i === 1) {
+                    if (isFirst) {
                         // 直接使用 arc 命令
@@ -826,3 +876,3 @@ // 第一个命令起点还未定义
      */
-    rebuildPath(ctx: CanvasRenderingContext2D, percent: number) {
+    rebuildPath(ctx: PathRebuilder, percent: number) {
         const d = this.data;
@@ -860,4 +910,5 @@ const ux = this._ux;
             const cmd = d[i++];
+            const isFirst = i === 1;
 
-            if (i === 1) {
+            if (isFirst) {
                 // 如果第一个命令是 L, C, Q
@@ -970,10 +1021,4 @@ // 则 previous point 同绘制命令的第一个 point
                     }
-                    if (isEllipse) {
-                        ctx.translate(cx, cy);
-                        ctx.rotate(psi);
-                        ctx.scale(scaleX, scaleY);
-                        ctx.arc(0, 0, r, startAngle, endAngle, anticlockwise);
-                        ctx.scale(1 / scaleX, 1 / scaleY);
-                        ctx.rotate(-psi);
-                        ctx.translate(-cx, -cy);
+                    if (isEllipse && ctx.ellipse) {
+                        ctx.ellipse(cx, cy, rx, ry, psi, startAngle, endAngle, anticlockwise);
                     }
@@ -988,3 +1033,3 @@ else {
 
-                    if (i === 1) {
+                    if (isFirst) {
                         // 直接使用 arc 命令
@@ -1059,2 +1104,14 @@ // 第一个命令起点还未定义
     })()
+}
+
+
+export interface PathRebuilder {
+    moveTo(x: number, y: number): void
+    lineTo(x: number, y: number): void
+    bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number): void
+    quadraticCurveTo(x: number, y: number, x2: number, y2: number): void
+    arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean): void
+    ellipse(cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean): void
+    rect(x: number, y: number, width: number, height: number): void
+    closePath(): void
 }

src/Element.ts

 import Transformable from './core/Transformable';
 import { AnimationEasing } from './animation/easing';
-import Animator, {cloneValue, OnframeCallback} from './animation/Animator';
+import Animator, {cloneValue} from './animation/Animator';
 import { ZRenderType } from './zrender';
-import { Dictionary, ElementEventName, ZRRawEvent, BuiltinTextPosition, AllPropTypes, TextVerticalAlign, TextAlign, MapToType } from './core/types';
+import {
+    Dictionary, ElementEventName, ZRRawEvent, BuiltinTextPosition, AllPropTypes,
+    TextVerticalAlign, TextAlign, MapToType
+} from './core/types';
 import Path from './graphic/Path';
@@ -19,3 +22,4 @@ import BoundingRect, { RectLike } from './core/BoundingRect';
     mixin,
-    isArrayLike
+    isArrayLike,
+    isTypedArray
 } from './core/util';
@@ -35,2 +39,3 @@ import Polyline from './graphic/shape/Polyline';
     during?: (percent: number) => void
+    aborted?: Function
 
@@ -157,5 +162,2 @@ scope?: string
     inside?: boolean
-
-    // TODO applyClip
-    // TODO align, verticalAlign??
 }
@@ -170,2 +172,7 @@ export interface ElementTextGuideLineConfig {
     /**
+     * If above the target element.
+     */
+    showAbove?: boolean
+
+    /**
      * Candidates of connectors. Used when autoCalculate is true and anchor is not specified.
@@ -229,2 +236,4 @@ */
     silent?: boolean
+
+    ignoreClip?: boolean
     // From transform
@@ -267,3 +276,3 @@ x?: number
     ignore: false
-}
+};
 
@@ -332,2 +341,10 @@ export type ElementStatePropNames = (typeof PRIMARY_STATES_KEYS)[number] | 'textConfig';
     /**
+     * If ignore clip from it's parent or hosts.
+     * Applied on itself and all it's children.
+     *
+     * NOTE: It won't affect the clipPath set on the children.
+     */
+    ignoreClip: boolean
+
+    /**
      * If element is used as a component of other element.
@@ -579,3 +596,3 @@ */
                 ? (typeof textConfig.position === 'string' && textConfig.position.indexOf('inside') >= 0)
-                : textConfig.inside
+                : textConfig.inside;
             const innerTextDefaultStyle = this._innerTextDefaultStyle || (this._innerTextDefaultStyle = {});
@@ -742,3 +759,3 @@
 
-        // If we are swtiching from normal to other state during animation.
+        // If we are switching from normal to other state during animation.
         // We need to save final value of animation to the normal state. Not interpolated value.
@@ -777,3 +794,5 @@ const normalState = this._normalState;
 
-    protected _savePrimaryToNormal(toState: Dictionary<any>, normalState: Dictionary<any>, primaryKeys: readonly string[]) {
+    protected _savePrimaryToNormal(
+        toState: Dictionary<any>, normalState: Dictionary<any>, primaryKeys: readonly string[]
+    ) {
         for (let i = 0; i < primaryKeys.length; i++) {
@@ -818,4 +837,4 @@ let key = primaryKeys[i];
      */
-    clearStates() {
-        this.useState(PRESERVED_NORMAL_STATE, false);
+    clearStates(noAnimation?: boolean) {
+        this.useState(PRESERVED_NORMAL_STATE, false, noAnimation);
         // TODO set _normalState to null?
@@ -831,3 +850,3 @@ }
      */
-    useState(stateName: string, keepCurrentStates?: boolean) {
+    useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean) {
         // Use preserved word __normal__
@@ -883,3 +902,3 @@ // TODO: Only restore changed properties when restore to normal???
             keepCurrentStates,
-            !this.__inHover && animationCfg && animationCfg.duration > 0,
+            !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0,
             animationCfg
@@ -932,3 +951,3 @@ );
      */
-    useStates(states: string[]) {
+    useStates(states: string[], noAnimation?: boolean) {
         if (!states.length) {
@@ -984,3 +1003,3 @@ this.clearStates();
                 false,
-                !this.__inHover && animationCfg && animationCfg.duration > 0,
+                !noAnimation && !this.__inHover && animationCfg && animationCfg.duration > 0,
                 animationCfg
@@ -1002,4 +1021,3 @@ );
 
-
-            if (!useHoverLayer) {
+            if (!useHoverLayer && this.__inHover) {
                 // Leave hover layer after states update and markRedraw.
@@ -1158,3 +1176,3 @@ this._toggleHoverLayerFlag(false);
                 const animator = this.animators[i];
-                const targetName = animator.targetName
+                const targetName = animator.targetName;
                 animator.__changeFinalValue(targetName
@@ -1533,7 +1551,11 @@ ? ((state || normalState) as any)[targetName]
     // Overload definitions
-    animateFrom(target: Props, cfg: Omit<ElementAnimateConfig, 'setToFinal'>, animationProps?: MapToType<Props, boolean>) {
+    animateFrom(
+        target: Props, cfg: Omit<ElementAnimateConfig, 'setToFinal'>, animationProps?: MapToType<Props, boolean>
+    ) {
         animateTo(this, target, cfg, animationProps, true);
     }
 
-    protected _transitionState(stateName: string, target: Props, cfg?: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>) {
+    protected _transitionState(
+        stateName: string, target: Props, cfg?: ElementAnimateConfig, animationProps?: MapToType<Props, boolean>
+    ) {
         const animators = animateTo(this, target, cfg, animationProps);
@@ -1572,3 +1594,5 @@ for (let i = 0; i < animators.length; i++) {
      */
-    calculateTextPosition: (out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike) => TextPositionCalculationResult
+    calculateTextPosition: (
+        out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike
+    ) => TextPositionCalculationResult
 
@@ -1587,2 +1611,3 @@
         elProto.dragging = false;
+        elProto.ignoreClip = false;
         elProto.__inHover = false;
@@ -1673,18 +1698,29 @@ elProto.__dirty = Element.REDARAW_BIT;
 
-    let count = animators.length;
-    function done() {
-        count--;
-        if (!count) {
-            cfg.done && cfg.done();
+    let doneCount = animators.length;
+    let abortedCount = doneCount;
+    const cfgDone = cfg.done;
+    const cfgAborted = cfg.aborted;
+
+    const doneCb = cfgDone ? () => {
+        doneCount--;
+        if (!doneCount) {
+            cfgDone();
         }
-    }
+    } : null;
 
+    const abortedCb = cfgAborted ? () => {
+        abortedCount--;
+        if (!abortedCount) {
+            cfgAborted();
+        }
+    } : null;
+
     // No animators. This should be checked before animators[i].start(),
     // because 'done' may be executed immediately if no need to animate.
-    if (!count) {
-        cfg.done && cfg.done();
+    if (!doneCount) {
+        cfgDone && cfgDone();
     }
 
     // Adding during callback to the first animator
-    if (animators.length > 0 && typeof cfg.during === 'function') {
+    if (animators.length > 0 && cfg.during) {
         // TODO If there are two animators in animateTo, and the first one is stopped by other animator.
@@ -1699,5 +1735,10 @@ animators[0].during((target, percent) => {
     for (let i = 0; i < animators.length; i++) {
-        animators[i]
-            .done(done)
-            .start(cfg.easing, cfg.force);
+        const animator = animators[i];
+        if (doneCb) {
+            animator.done(doneCb);
+        }
+        if (abortedCb) {
+            animator.aborted(abortedCb);
+        }
+        animator.start(cfg.easing, cfg.force);
     }
@@ -1715,3 +1756,3 @@
 function is2DArray(value: any[]): value is number[][] {
-    return isArrayLike(value[0])
+    return isArrayLike(value[0]);
 }
@@ -1725,2 +1766,10 @@
 
+        if (isTypedArray(source[key])) {
+            const len = source[key].length;
+            if (target[key].length !== len) {
+                target[key] = new (source[key].constructor)(len);
+                copyArrShallow(target[key], source[key], len);
+            }
+        }
+
         const sourceArr = source[key] as any[];
@@ -1727,0 +1776,0 @@ const targetArr = target[key] as any[];

src/export.ts

@@ -11,2 +11,3 @@ /**
 import {parseSVG} from './tool/parseSVG';
+import {morphPath} from './tool/morphPath';
 
@@ -55,1 +56,2 @@ export {default as Point} from './core/Point';
 export {parseSVG};
+export {morphPath};

src/graphic/Displayable.ts

@@ -6,3 +6,3 @@ /**
 
-import Element, {ElementProps, ElementStatePropNames, PRESERVED_NORMAL_STATE, ElementAnimateConfig, ElementCommonState} from '../Element';
+import Element, {ElementProps, ElementStatePropNames, ElementAnimateConfig, ElementCommonState} from '../Element';
 import BoundingRect from '../core/BoundingRect';
@@ -9,0 +9,0 @@ import { PropType, Dictionary, MapToType } from '../core/types';

src/graphic/helper/parseText.ts

@@ -263,2 +263,5 @@ import * as imageHelper from '../helper/image';
 
+    // Inner height exclude padding
+    innerHeight: number
+
     // Width and height of actual text content.
@@ -376,2 +379,7 @@ contentHeight: number
             );
+            token.innerHeight = tokenHeight;
+
+            textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
+            token.height = tokenHeight;
+            // Inlcude padding in lineHeight.
             token.lineHeight = retrieve3(
@@ -381,5 +389,2 @@ tokenStyle.lineHeight, style.lineHeight, tokenHeight
 
-            textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
-            token.height = tokenHeight;
-
             token.align = tokenStyle && tokenStyle.align || style.align;
@@ -386,0 +391,0 @@ token.verticalAlign = tokenStyle && tokenStyle.verticalAlign || 'middle';

src/graphic/Path.ts

@@ -218,3 +218,3 @@ import Displayable, { DisplayableProps,
                 // TODO use (1 - DARK_MODE_THRESHOLD)?
-                if (fillLum > 0.6) {   // TODO Consider background lum?
+                if (fillLum > 0.5) {   // TODO Consider background lum?
                     return DARK_LABEL_COLOR;
@@ -312,3 +312,4 @@ }
                 if (!this.hasFill()) {
-                    w = Math.max(w, this.strokeContainThreshold || 4);
+                    const strokeContainThreshold = this.strokeContainThreshold;
+                    w = Math.max(w, strokeContainThreshold == null ? 4 : strokeContainThreshold);
                 }
@@ -315,0 +316,0 @@ // Consider line width

src/graphic/shape/Sector.ts

 import Path, { PathProps } from '../Path';
+import * as roundSectorHelper from '../helper/roundSector';
 
@@ -10,3 +11,5 @@ class SectorShape {
     endAngle = Math.PI * 2
-    clockwise: boolean = true
+    clockwise = true
+    cornerRadius = 0
+    innerCornerRadius = 0
 }
@@ -17,2 +20,3 @@
 }
+
 class Sector extends Path<SectorProps> {
@@ -30,32 +34,4 @@
 
-
     buildPath(ctx: CanvasRenderingContext2D, shape: SectorShape) {
-
-        const x = shape.cx;
-        const y = shape.cy;
-        const r0 = Math.max(shape.r0 || 0, 0);
-        const r = Math.max(shape.r, 0);
-        const startAngle = shape.startAngle;
-        const endAngle = shape.endAngle;
-        const clockwise = shape.clockwise;
-
-        const unitX = Math.cos(startAngle);
-        const unitY = Math.sin(startAngle);
-
-        ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
-
-        ctx.lineTo(unitX * r + x, unitY * r + y);
-
-        ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
-
-        ctx.lineTo(
-            Math.cos(endAngle) * r0 + x,
-            Math.sin(endAngle) * r0 + y
-        );
-
-        if (r0 !== 0) {
-            ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
-        }
-
-        ctx.closePath();
+        roundSectorHelper.buildPath(ctx, shape)
     }
@@ -62,0 +38,0 @@

src/graphic/Text.ts

@@ -499,3 +499,3 @@ /**
 
-            needDrawBg && this._renderBackground(style, boxX, boxY, outerWidth, outerHeight);
+            needDrawBg && this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
         }
@@ -624,3 +624,3 @@
         if (needDrawBackground(style)) {
-            this._renderBackground(style, boxX, boxY, outerWidth, outerHeight);
+            this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
         }
@@ -705,2 +705,3 @@ const bgColorDrawn = !!(style.backgroundColor);
             tokenStyle,
+            style,
             textAlign === 'right'
@@ -720,2 +721,3 @@ ? x - token.width
             x = getTextXForPadding(x, textAlign, textPadding);
+            y -= token.height / 2 - textPadding[0] - token.innerHeight / 2;
         }
@@ -765,2 +767,3 @@
         subElStyle.font = token.font || DEFAULT_FONT;
+        subElStyle.opacity = retrieve3(tokenStyle.opacity, style.opacity, 1);
 
@@ -790,2 +793,3 @@ if (textStroke) {
         style: TextStylePropsPart,
+        topStyle: TextStylePropsPart,
         x: number,
@@ -822,3 +826,2 @@ y: number,
             rectStyle.fill = textBackgroundColor as string || null;
-            rectStyle.opacity = retrieve2(style.opacity, 1);
             rectStyle.fillOpacity = retrieve2(style.fillOpacity, 1);
@@ -847,2 +850,3 @@ }
             rectStyle.lineDashOffset = style.borderDashOffset || 0;
+            rectEl.strokeContainThreshold = 0;
 
@@ -856,7 +860,8 @@ // Making shadow looks better.
 
-        const shadowStyle = (rectEl || imgEl).style;
-        shadowStyle.shadowBlur = style.shadowBlur || 0;
-        shadowStyle.shadowColor = style.shadowColor || 'transparent';
-        shadowStyle.shadowOffsetX = style.shadowOffsetX || 0;
-        shadowStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        const commonStyle = (rectEl || imgEl).style;
+        commonStyle.shadowBlur = style.shadowBlur || 0;
+        commonStyle.shadowColor = style.shadowColor || 'transparent';
+        commonStyle.shadowOffsetX = style.shadowOffsetX || 0;
+        commonStyle.shadowOffsetY = style.shadowOffsetY || 0;
+        commonStyle.opacity = retrieve3(style.opacity, topStyle.opacity, 1);
     }
@@ -863,0 +868,0 @@

src/Handler.ts

@@ -440,12 +440,19 @@ import * as util from './core/util';
         let isSilent;
+        let ignoreClip = false;
         while (el) {
-            let clipPath = el.getClipPath();
-            // If clipped by ancestor.
-            // FIXME: If clipPath has neither stroke nor fill,
-            // el.clipPath.contain(x, y) will always return false.
-            if (clipPath && !clipPath.contain(x, y)) {
-                return false;
+            // Ignore clip on any ancestors.
+            if (el.ignoreClip) {
+                ignoreClip = true;
             }
-            if (el.silent) {
-                isSilent = true;
+            if (!ignoreClip) {
+                let clipPath = el.getClipPath();
+                // If clipped by ancestor.
+                // FIXME: If clipPath has neither stroke nor fill,
+                // el.clipPath.contain(x, y) will always return false.
+                if (clipPath && !clipPath.contain(x, y)) {
+                    return false;
+                }
+                if (el.silent) {
+                    isSilent = true;
+                }
             }
@@ -452,0 +459,0 @@ // Consider when el is textContent, also need to be silent

src/Storage.ts

@@ -99,10 +99,12 @@ import * as util from './core/util';
         el.beforeUpdate();
-        if (el.__dirty) {
-            el.update();
-        }
+        el.update();
         el.afterUpdate();
 
         const userSetClipPath = el.getClipPath();
-        if (userSetClipPath) {
 
+        if (el.ignoreClip) {
+            clipPaths = null;
+        }
+        else if (userSetClipPath) {
+
             // FIXME 效率影响
@@ -109,0 +111,0 @@ if (clipPaths) {

src/svg/graphic.ts

@@ -6,3 +6,3 @@ // TODO
 import {createElement} from './core';
-import PathProxy from '../core/PathProxy';
+import PathProxy, { PathRebuilder } from '../core/PathProxy';
 import * as matrix from '../core/matrix';
@@ -15,2 +15,3 @@ import { Path } from '../export';
 import { map } from '../core/util';
+import { normalizeLineDash } from '../graphic/helper/dashStyle';
 
@@ -112,3 +113,3 @@ export interface SVGProxy<T> {
         attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
-        let lineDash = style.lineDash;
+        let lineDash = style.lineDash && strokeWidth > 0 && normalizeLineDash(style.lineDash, strokeWidth);
         if (lineDash) {
@@ -142,154 +143,125 @@ let lineDashOffset = style.lineDashOffset;
 
-/***************************************************
- * PATH
- **************************************************/
-function pathDataToString(path: PathProxy) {
-    if (!path) {
-        return '';
+class SVGPathRebuilder implements PathRebuilder {
+    _d: (string | number)[]
+    _str: string
+    _invalid: boolean
+
+    reset() {
+        this._d = [];
+        this._str = '';
     }
+    moveTo(x: number, y: number) {
+        this._add('M', x, y);
+    }
+    lineTo(x: number, y: number) {
+        this._add('L', x, y);
+    }
+    bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number) {
+        this._add('C', x, y, x2, y2, x3, y3);
+    }
+    quadraticCurveTo(x: number, y: number, x2: number, y2: number) {
+        this._add('Q', x, y, x2, y2);
+    }
+    arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean) {
+        this.ellipse(cx, cy, r, r, 0, startAngle, endAngle, anticlockwise);
+    }
+    ellipse(cx: number, cy: number, rx: number, ry: number, psi: number, startAngle: number, endAngle: number, anticlockwise: boolean) {
 
-    const str = [];
-    const data = path.data;
-    const dataLength = path.len();
-    let x;
-    let y;
-    for (let i = 0; i < dataLength;) {
-        let cmd = data[i++];
-        let cmdStr = '';
-        let nData = 0;
-        switch (cmd) {
-            case CMD.M:
-                cmdStr = 'M';
-                nData = 2;
-                break;
-            case CMD.L:
-                cmdStr = 'L';
-                nData = 2;
-                break;
-            case CMD.Q:
-                cmdStr = 'Q';
-                nData = 4;
-                break;
-            case CMD.C:
-                cmdStr = 'C';
-                nData = 6;
-                break;
-            case CMD.A:
-                const cx = data[i++];
-                const cy = data[i++];
-                const rx = data[i++];
-                const ry = data[i++];
-                const theta = data[i++];
-                let dTheta = data[i++];
-                const psi = data[i++];
-                const clockwise = data[i++];
+        const firstCmd = this._d.length === 0;
 
-                const dThetaPositive = Math.abs(dTheta);
-                const isCircle = isAroundZero(dThetaPositive - PI2)
-                    || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
+        let dTheta = endAngle - startAngle;
+        const clockwise = !anticlockwise;
 
-                // Mapping to 0~2PI
-                const unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
+        const dThetaPositive = Math.abs(dTheta);
+        const isCircle = isAroundZero(dThetaPositive - PI2)
+            || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
 
-                let large = false;
-                if (isCircle) {
-                    large = true;
-                }
-                else if (isAroundZero(dThetaPositive)) {
-                    large = false;
-                }
-                else {
-                    large = (unifiedTheta >= PI) === !!clockwise;
-                }
+        // Mapping to 0~2PI
+        const unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
 
-                const x0 = round4(cx + rx * mathCos(theta));
-                const y0 = round4(cy + ry * mathSin(theta));
+        let large = false;
+        if (isCircle) {
+            large = true;
+        }
+        else if (isAroundZero(dThetaPositive)) {
+            large = false;
+        }
+        else {
+            large = (unifiedTheta >= PI) === !!clockwise;
+        }
 
-                // It will not draw if start point and end point are exactly the same
-                // We need to shift the end point with a small value
-                // FIXME A better way to draw circle ?
-                if (isCircle) {
-                    if (clockwise) {
-                        dTheta = PI2 - 1e-4;
-                    }
-                    else {
-                        dTheta = -PI2 + 1e-4;
-                    }
+        const x0 = round4(cx + rx * mathCos(startAngle));
+        const y0 = round4(cy + ry * mathSin(startAngle));
 
-                    large = true;
+        // It will not draw if start point and end point are exactly the same
+        // We need to shift the end point with a small value
+        // FIXME A better way to draw circle ?
+        if (isCircle) {
+            if (clockwise) {
+                dTheta = PI2 - 1e-4;
+            }
+            else {
+                dTheta = -PI2 + 1e-4;
+            }
 
-                    if (i === 9) {
-                        // Move to (x0, y0) only when CMD.A comes at the
-                        // first position of a shape.
-                        // For instance, when drawing a ring, CMD.A comes
-                        // after CMD.M, so it's unnecessary to move to
-                        // (x0, y0).
-                        str.push('M', x0, y0);
-                    }
-                }
+            large = true;
 
-                x = round4(cx + rx * mathCos(theta + dTheta));
-                y = round4(cy + ry * mathSin(theta + dTheta));
+            if (firstCmd) {
+                // Move to (x0, y0) only when CMD.A comes at the
+                // first position of a shape.
+                // For instance, when drawing a ring, CMD.A comes
+                // after CMD.M, so it's unnecessary to move to
+                // (x0, y0).
+                this._d.push('M', x0, y0);
+            }
+        }
 
-                if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x)  || isNaN(y)) {
-                    return '';
-                }
+        const x = round4(cx + rx * mathCos(startAngle + dTheta));
+        const y = round4(cy + ry * mathSin(startAngle + dTheta));
 
-                // FIXME Ellipse
-                str.push('A', round4(rx), round4(ry),
-                    mathRound(psi * degree), +large, +clockwise, x, y);
-                break;
-            case CMD.Z:
-                cmdStr = 'Z';
-                break;
-            case CMD.R:
-                x = round4(data[i++]);
-                y = round4(data[i++]);
-                const w = round4(data[i++]);
-                const h = round4(data[i++]);
+        if (isNaN(x0) || isNaN(y0) || isNaN(rx) || isNaN(ry) || isNaN(psi) || isNaN(degree) || isNaN(x)  || isNaN(y)) {
+            return '';
+        }
 
-                if (isNaN(x) || isNaN(y) || isNaN(w) || isNaN(h)) {
-                    return '';
-                }
+        // FIXME Ellipse
+        this._d.push('A', round4(rx), round4(ry),
+            mathRound(psi * degree), +large, +clockwise, x, y);
+    }
+    rect(x: number, y: number, w: number, h: number) {
+        this._add('M', x, y);
+        this._add('L', x + w, y);
+        this._add('L', x + w, y + h);
+        this._add('L', x, y + h);
+        this._add('L', x, y);
+    }
+    closePath() {
+        this._add('Z');
+    }
 
-                str.push(
-                    'M', x, y,
-                    'L', x + w, y,
-                    'L', x + w, y + h,
-                    'L', x, y + h,
-                    'L', x, y
-                );
-                break;
-        }
-        cmdStr && str.push(cmdStr);
-        for (let j = 0; j < nData; j++) {
-            const val = round4(data[i++]);
+    _add(cmd: string, a?: number, b?: number, c?: number, d?: number, e?: number, f?: number, g?: number, h?: number) {
+        this._d.push(cmd);
+        for (let i = 1; i < arguments.length; i++) {
+            const val = arguments[i];
             if (isNaN(val)) {
-                return '';
+                this._invalid = true;
+                return;
             }
-            // PENDING With scale
-            str.push(val);
+            this._d.push(round4(val));
         }
     }
-    return str.join(' ');
+
+    generateStr() {
+        this._str = this._invalid ? '' : this._d.join(' ');
+        this._d = [];
+    }
+    getStr() {
+        return this._str;
+    }
 }
 
 interface PathWithSVGBuildPath extends Path {
-    __svgBuildPath: Path['buildPath']
-    __svgPathStr: string
+    __svgPathVersion: number
+    __svgPathBuilder: SVGPathRebuilder
 }
 
-function wrapSVGBuildPath(el: PathWithSVGBuildPath) {
-    if (!el.__svgBuildPath) {
-        const oldBuildPath = el.buildPath;
-        el.__svgBuildPath = el.buildPath = function (path, shape, inBundle) {
-            oldBuildPath.call(this, el.path, shape, inBundle);
-            el.__svgPathStr = pathDataToString(el.path);
-        }
-        if (!el.shapeChanged()) {   // If path is updated. Get string manually.
-            el.__svgPathStr = pathDataToString(el.path);
-        }
-    }
-}
-
 const svgPath: SVGProxy<Path> = {
@@ -310,3 +282,3 @@ brush(el: Path) {
 
-        wrapSVGBuildPath(el as PathWithSVGBuildPath);
+        // wrapSVGBuildPath(el as PathWithSVGBuildPath);
 
@@ -319,5 +291,17 @@ if (el.shapeChanged()) {
 
-        // TODO Optimize
-        attr(svgEl, 'd', (el as PathWithSVGBuildPath).__svgPathStr);
+        const pathVersion = path.getVersion();
+        const elExt = el as PathWithSVGBuildPath;
+        let svgPathBuilder = elExt.__svgPathBuilder;
+        if (elExt.__svgPathVersion !== pathVersion || !svgPathBuilder || el.style.strokePercent < 1) {
+            if (!svgPathBuilder) {
+                svgPathBuilder = elExt.__svgPathBuilder = new SVGPathRebuilder();
+            }
+            svgPathBuilder.reset();
+            path.rebuildPath(svgPathBuilder, el.style.strokePercent);
+            svgPathBuilder.generateStr();
+            elExt.__svgPathVersion = pathVersion;
+        }
 
+        attr(svgEl, 'd', svgPathBuilder.getStr());
+
         bindStyle(svgEl, style, el);
@@ -324,0 +308,0 @@ setTransform(svgEl, el.transform);

src/tool/path.ts

@@ -34,2 +34,3 @@ import Path, { PathProps } from '../graphic/Path';
 ) {
+    // https://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
     const psi = psiDeg * (PI / 180.0);
@@ -36,0 +37,0 @@ const xp = mathCos(psi) * (x1 - x2) / 2.0

src/tool/transformPath.ts

@@ -96,2 +96,4 @@ import PathProxy from '../core/PathProxy';
     }
+
+    path.increaseVersion();
 }

src/zrender.ts

@@ -80,2 +80,4 @@ /*!
 
+    private _sleepAfterStill = 10;
+
     private _stillFrameAccum = 0;
@@ -130,5 +132,2 @@
 
-        /**
-         * @type {module:zrender/animation/Animation}
-         */
         this.animation = new Animation({
@@ -146,2 +145,5 @@ stage: {
     add(el: Element) {
+        if (!el) {
+            return
+        }
         this.storage.addRoot(el);
@@ -156,2 +158,5 @@ el.addSelfToZr(this);
     remove(el: Element) {
+        if (!el) {
+            return
+        }
         this.storage.delRoot(el);
@@ -207,3 +212,4 @@ el.removeSelfFromZr(this);
             // Update animation if refreshImmediately is invoked from outside.
-            this.animation.update();
+            // Not trigger stage update to call flush again. Which may refresh twice
+            this.animation.update(true);
         }
@@ -246,3 +252,3 @@
             triggerRendered = true;
-            this.refreshImmediately(fromInside);
+            this.refreshImmediately(true);
         }
@@ -259,7 +265,6 @@
         }
-        else {
+        else if (this._sleepAfterStill > 0) {
             this._stillFrameAccum++;
-
             // Stop the animiation after still for 10 frames.
-            if (this._stillFrameAccum > 10) {
+            if (this._stillFrameAccum > this._sleepAfterStill) {
                 this.animation.stop();
@@ -271,2 +276,10 @@ }
     /**
+     * Set sleep after still for frames.
+     * Disable auto sleep when it's 0.
+     */
+    setSleepAfterStill(stillFramesCount: number) {
+        this._sleepAfterStill = stillFramesCount;
+    }
+
+    /**
      * Wake up animation loop. But not render.
@@ -508,5 +521,5 @@ */
  */
-export const version = '5.0.0-alpha.2';
+export const version = '5.0.0-alpha.3';
 
 
 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

5604823

increased by3.65%

Number of package files

777

increased by1.97%

Lines of code

80885

increased by4.08%

Worsened metrics

Number of lines in readme file

64

decreased by-3.03%

No dependency changes