@visactor/vchart 2.0.1 → 2.0.3-alpha.0

package/build/index.js

@@ -14173,9 +14173,9 @@
       setWidthHeightWithoutTransform(aabbBounds) {
         this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
       }
-      setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
+      setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
         this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
-          (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
+          Object.keys(params).forEach(key => {
             animate.preventAttr(key);
           });
         });
@@ -14346,7 +14346,7 @@
           });
         } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
           type: AttributeUpdateType.STATE
-        }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
+        });
         this._emitCustomEvent("afterStateUpdate", {
           type: AttributeUpdateType.STATE
         });
@@ -14739,7 +14739,7 @@
       }
       removeChild(child) {
         const data = super.removeChild(child);
-        return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
+        return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
       }
       removeAllChild(deep = !1) {
         this.forEachChildren(child => {
@@ -17753,10 +17753,9 @@
         return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        let path = super.toCustomPath();
-        if (path) return path;
-        const points = this.attribute.points;
-        return path = new CustomPath2D(), points.forEach((point, index) => {
+        const points = this.attribute.points,
+          path = new CustomPath2D();
+        return points.forEach((point, index) => {
           0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
         }), path.closePath(), path;
       }
@@ -21021,7 +21020,6 @@
         drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
       }
       draw(renderService, drawContext) {
-        var _a;
         this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
         const {
           context: context,
@@ -21036,7 +21034,7 @@
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
@@ -21710,16 +21708,13 @@
           } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
-        }, this.afterClearScreen = drawParams => {
-          this._afterClearScreen && this._afterClearScreen(drawParams);
         }, this.afterRender = stage => {
           this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
           this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
-          afterRender: new SyncHook(["stage"]),
-          afterClearScreen: new SyncHook(["stage"])
+          afterRender: new SyncHook(["stage"])
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
@@ -21731,7 +21726,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -22126,7 +22121,7 @@
         return this._cursor;
       }
       eventPointTransform(e) {
-        const point = this.global.mapToCanvasPoint(e, this.window);
+        const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
         return this.stage.window.pointTransform(point.x, point.y);
       }
       pauseTriggerEvent() {
@@ -31739,7 +31734,7 @@
         return this._animateCount;
       }
       constructor() {
-        super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._animationEndFlag = !0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
+        super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
       }
       isRunning() {
         return !this.paused && this._animateCount > 0;
@@ -31768,11 +31763,10 @@
       }
       tick(delta) {
         if (this.paused) return;
-        this._animationEndFlag && (this._animationEndFlag = !1, this.emit("animationStart"));
         const scaledDelta = delta * this._playSpeed;
         this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
           animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
-        }), 0 === this._animateCount && (this._animationEndFlag = !0, this.emit("animationEnd"));
+        }), 0 === this._animateCount && this.emit("animationEnd");
       }
       clear() {
         this.forEachAccessAnimate(animate => {
@@ -31836,9 +31830,7 @@
         return this._timeline;
       }
       bind(target) {
-        return this.target = target, this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this), this.onRemove(() => {
-          this.stop(), this.target.animates.delete(this.id);
-        }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+        return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
       }
       to(props, duration = 300, easing = "linear") {
         const step = new Step(AnimateStepType.to, props, duration, easing);
@@ -32052,8 +32044,8 @@
       }
       init() {
         this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-          this.initHandler(!1);
-        }), application.global.env && this.initHandler(!1);
+          this.initHandler();
+        }), application.global.env && this.initHandler();
       }
       addTimeline(timeline) {
         this.timelines.push(timeline);
@@ -32064,11 +32056,10 @@
       getTimelines() {
         return this.timelines;
       }
-      initHandler(force = !1) {
-        this.setupTickHandler(force);
+      initHandler() {
+        this.setupTickHandler();
       }
-      setupTickHandler(force = !1) {
-        if (!force && this.tickerHandler) return !0;
+      setupTickHandler() {
         const handler = new RAFTickHandler();
         return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
       }
@@ -32119,7 +32110,7 @@
         return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
       }
       stop() {
-        this.status = STATUS$1.INITIAL, this.setupTickHandler(!0), this.lastFrameTime = -1;
+        this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
       }
       trySyncTickStatus() {
         this.status === STATUS$1.INITIAL && this.timelines.some(timeline => timeline.isRunning()) ? this.start() : this.status === STATUS$1.RUNNING && this.timelines.every(timeline => !timeline.isRunning()) && this.stop();
@@ -32129,8 +32120,7 @@
         this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
       }
       checkSkip(delta) {
-        var _a, _b, _c;
-        if ("performance" === (null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.params) || void 0 === _b ? void 0 : _b.optimize) || void 0 === _c ? void 0 : _c.tickRenderMode)) return !1;
+        if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
         return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
       }
     }
@@ -32428,11 +32418,10 @@
       _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
         var _a, _b, _c, _d;
         if (custom && customType) {
-          const customParams = Object.assign({
+          const customParams = this.resolveValue(customParameters, graphic, {
               width: graphic.stage.width,
-              height: graphic.stage.height,
-              group: this._target.parent
-            }, this.resolveValue(customParameters, graphic)),
+              height: graphic.stage.height
+            }),
             objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
           customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
         } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
@@ -32650,14 +32639,6 @@
           state.executor.stop();
         }), this.stateList = null;
       }
-      reApplyState(state) {
-        var _a;
-        const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-        if (stateInfo) {
-          const stateList = this.stateList.slice();
-          stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
-        }
-      }
     }
 
     class GraphicStateExtension {
@@ -32688,20 +32669,11 @@
       applyUnhighlightState(animationConfig, callback) {
         return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
       }
-      stopAnimationState(state, type, deep = !1) {
-        return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
-          child.stopAnimationState(state, type, deep);
-        }), this;
+      stopAnimationState(state, type) {
+        return this._getAnimationStateManager(this).stopState(state, type), this;
       }
       clearAnimationStates() {
-        const stateManager = this._animationStateManager;
-        return stateManager && stateManager.clearState(), this;
-      }
-      reApplyAnimationState(state, deep = !1) {
-        const stateManager = this._animationStateManager;
-        return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
-          child.reApplyAnimationState(state, deep);
-        }), this;
+        return this._getAnimationStateManager(this).clearState(), this;
       }
       static extend(graphic) {
         return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
@@ -32714,6 +32686,7 @@
       }
       animate(params) {
         var _a, _b, _c;
+        this.animates || (this.animates = new Map());
         const animate = new Animate(null == params ? void 0 : params.id, null !== (_b = null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline()) && void 0 !== _b ? _b : defaultTimeline, null == params ? void 0 : params.slience);
         if (animate.bind(this), params) {
           const {
@@ -32723,7 +32696,9 @@
           } = params;
           null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
         }
-        return null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
+        return this.animates.set(animate.id, animate), animate.onRemove(() => {
+          animate.stop(), this.animates.delete(animate.id);
+        }), null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
       }
       createTimeline() {
         return new DefaultTimeline();
@@ -32754,21 +32729,6 @@
       getGraphicAttribute(key, prev = !1) {
         return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
       }
-      pauseAnimation(deep = !1) {
-        this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
-          child.pauseAnimation(deep);
-        });
-      }
-      resumeAnimation(deep = !1) {
-        this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
-          child.resumeAnimation(deep);
-        });
-      }
-      stopAnimation(deep = !1) {
-        this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
-          child.stopAnimation(deep);
-        });
-      }
     }
 
     function registerAnimate$1() {
@@ -32777,7 +32737,7 @@
 
     class ACustomAnimate extends Step {
       constructor(customFrom, customTo, duration, easing, params) {
-        super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params, this.from = customFrom, this.to = customTo;
+        super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
       }
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
@@ -33849,7 +33809,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c;
+        var _a, _b;
         super.onBind();
         const {
             from: from,
@@ -33858,7 +33818,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -33956,7 +33916,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c;
+        var _a, _b;
         super.onBind();
         const {
             from: from,
@@ -33965,7 +33925,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -35816,15 +35776,16 @@
         changedY = 0;
       "negative" === orient && (changedX = null !== (_a = layoutRect.width) && void 0 !== _a ? _a : graphic.stage.viewWidth, changedY = null !== (_b = layoutRect.height) && void 0 !== _b ? _b : graphic.stage.viewHeight), changedX += offset, changedY += offset;
       const point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
-        finalAttrsX = graphic.getGraphicAttribute("x"),
-        finalAttrsY = graphic.getGraphicAttribute("y"),
-        fromX = excludeChannels.includes("x") ? finalAttrsX : point && isValidNumber$1(point.x) ? point.x : changedX,
-        fromY = excludeChannels.includes("y") ? finalAttrsY : point && isValidNumber$1(point.y) ? point.y : changedY;
+        fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
+        fromY = point && isValidNumber$1(point.y) ? point.y : changedY,
+        finalAttrs = graphic.getFinalAttribute(),
+        finalAttrsX = excludeChannels.includes("x") ? graphic.attribute.x : finalAttrs.x,
+        finalAttrsY = excludeChannels.includes("y") ? graphic.attribute.y : finalAttrs.y;
       switch (direction) {
         case "x":
           return {
             from: {
-              x: excludeChannels.includes("x") ? finalAttrsX : fromX
+              x: fromX
             },
             to: {
               x: finalAttrsX
@@ -35853,26 +35814,25 @@
       }
     };
     const moveOut = (graphic, options, animationParameters) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       const {
           offset = 0,
           orient: orient,
           direction: direction,
           point: pointOpt
         } = null != options ? options : {},
-        groupBounds = animationParameters.group ? animationParameters.group.AABBBounds : null,
-        groupWidth = null !== (_a = groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width,
-        groupHeight = null !== (_b = groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height,
+        groupWidth = null !== (_b = null === (_a = options.layoutRect) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : graphic.stage.viewWidth,
+        groupHeight = null !== (_d = null === (_c = options.layoutRect) || void 0 === _c ? void 0 : _c.height) && void 0 !== _d ? _d : graphic.stage.viewHeight,
         changedX = ("negative" === orient ? groupWidth : 0) + offset,
         changedY = ("negative" === orient ? groupHeight : 0) + offset,
-        point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
+        point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, animationParameters) : pointOpt,
         fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
         fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
       switch (direction) {
         case "x":
           return {
             from: {
-              x: graphic.getGraphicAttribute("x")
+              x: graphic.attribute.x
             },
             to: {
               x: fromX
@@ -35881,7 +35841,7 @@
         case "y":
           return {
             from: {
-              y: graphic.getGraphicAttribute("y")
+              y: graphic.attribute.y
             },
             to: {
               y: fromY
@@ -35890,8 +35850,8 @@
         default:
           return {
             from: {
-              x: graphic.getGraphicAttribute("x"),
-              y: graphic.getGraphicAttribute("y")
+              x: graphic.attribute.x,
+              y: graphic.attribute.y
             },
             to: {
               x: fromX,
@@ -36038,9 +35998,6 @@
           this.from[key] = null !== (_a = this.from[key]) && void 0 !== _a ? _a : startProps[key];
         }), this.target.setAttributes(this.from);
       }
-      deleteSelfAttr(key) {
-        super.deleteSelfAttr(key), delete this.from[key];
-      }
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
         const easedRatio = this.easing(ratio);
@@ -36109,8 +36066,9 @@
             w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
             width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
           this.rect.setAttributes({
-            x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
-            width: width
+            x: x,
+            width: width,
+            dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -36127,8 +36085,9 @@
           const h = Math.min(parentHeight - currentY, maxLength);
           let height;
           y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-            y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
-            height: height
+            y: y,
+            height: height,
+            dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -38820,8 +38779,7 @@
             prevText: prevText,
             curText: curText,
             prevLabelLine: prevLabelLine,
-            curLabelLine: curLabelLine,
-            increaseEffect = !0
+            curLabelLine: curLabelLine
           } = this.params,
           diff = {};
         for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
@@ -38831,7 +38789,7 @@
           to: rest,
           duration: duration,
           easing: easing
-        }), !1 !== increaseEffect && animator.animate(prevText, {
+        }), animator.animate(prevText, {
           type: "increaseCount",
           to: {
             text: curText.attribute.text
@@ -39525,15 +39483,16 @@
           } = currentLabel;
         prevText.applyAnimationState(["update"], [{
           name: "update",
-          animation: {
-            type: "labelUpdate",
-            customParameters: Object.assign(Object.assign({}, this._animationConfig.update), {
+          animation: Object.assign(Object.assign({
+            type: "labelUpdate"
+          }, this._animationConfig.update), {
+            customParameters: {
               prevText: prevText,
               curText: curText,
               prevLabelLine: prevLabelLine,
               curLabelLine: curLabelLine
-            })
-          }
+            }
+          })
         }]);
       }
       _syncStateWithRelatedGraphic(relatedGraphic) {
@@ -47332,6 +47291,7 @@
         SeriesTypeEnum["dot"] = "dot";
         SeriesTypeEnum["geo"] = "geo";
         SeriesTypeEnum["link"] = "link";
+        SeriesTypeEnum["curveLink"] = "curveLink";
         SeriesTypeEnum["map"] = "map";
         SeriesTypeEnum["pie"] = "pie";
         SeriesTypeEnum["radar"] = "radar";
@@ -47386,6 +47346,8 @@
         SeriesMarkNameEnum["cell"] = "cell";
         SeriesMarkNameEnum["cellBackground"] = "cellBackground";
         SeriesMarkNameEnum["link"] = "link";
+        SeriesMarkNameEnum["curveLink"] = "curveLink";
+        SeriesMarkNameEnum["imageLabel"] = "imageLabel";
         SeriesMarkNameEnum["arrow"] = "arrow";
         SeriesMarkNameEnum["pie"] = "pie";
         SeriesMarkNameEnum["labelLine"] = "labelLine";
@@ -49151,16 +49113,6 @@
         }
         return null;
     };
-    const getDiffAttributesOfGraphic = (g, newAttrs) => {
-        const prevAttrs = g.getAttributes(true);
-        const diffAttrs = {};
-        Object.keys(newAttrs).forEach(key => {
-            if (prevAttrs[key] !== newAttrs[key]) {
-                diffAttrs[key] = newAttrs[key];
-            }
-        });
-        return diffAttrs;
-    };
 
     let Event$1 = class Event {
         getComposedEventMap() {
@@ -50062,28 +50014,6 @@
         return attrs;
     };
 
-    function toRenderMode(mode) {
-        switch (mode) {
-            case exports.RenderModeEnum['desktop-browser']:
-            case exports.RenderModeEnum['mobile-browser']:
-                return 'browser';
-            case exports.RenderModeEnum.node:
-            case exports.RenderModeEnum.worker:
-                return 'node';
-            case exports.RenderModeEnum.miniApp:
-            case exports.RenderModeEnum['desktop-miniApp']:
-                return 'feishu';
-            case exports.RenderModeEnum.lynx:
-                return 'lynx';
-            case exports.RenderModeEnum.wx:
-                return 'wx';
-            case exports.RenderModeEnum.tt:
-                return 'tt';
-            case exports.RenderModeEnum.harmony:
-                return 'harmony';
-        }
-        return 'browser';
-    }
     function traverseGroupMark(group, apply, filter, leafFirst, stop) {
         const traverse = (mark) => {
             if (!leafFirst) {
@@ -50257,9 +50187,6 @@
             this._container = container;
             this._option = option;
         }
-        getChart() {
-            return this._compileChart;
-        }
         getCanvas() {
             var _a;
             return (_a = this._stage) === null || _a === void 0 ? void 0 : _a.window.getNativeHandler().nativeCanvas;
@@ -50276,8 +50203,7 @@
             if (this._stage) {
                 return;
             }
-            const { autoRefreshDpr, dpr, mode, modeParams, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
-            vglobal.setEnv(toRenderMode(mode), modeParams !== null && modeParams !== void 0 ? modeParams : {});
+            const { autoRefreshDpr, dpr, mode, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
             this._stage =
                 (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage({
                     background,
@@ -50288,13 +50214,8 @@
                     dpr,
                     viewBox: this._option.viewBox,
                     canvasControled: this._option.canvasControled,
-                    beforeRender: (stage) => {
-                        var _a, _b, _c;
-                        (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
-                        (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
-                    },
+                    beforeRender: this._option.beforeRender,
                     afterRender: this._option.afterRender,
-                    afterClearScreen: this._option.afterClearScreen,
                     disableDirtyBounds: true,
                     autoRender: true,
                     ticker: this._option.ticker,
@@ -51140,8 +51061,6 @@
         }
         onEvaluateEnd(ctx) {
         }
-        onBeforeRender() {
-        }
         onDataUpdate() {
         }
         beforeRelease() {
@@ -51269,12 +51188,6 @@
             }
             return index;
         }
-        updateAnimateStateCallback(callback) {
-            this._aniamtionStateCallback = callback;
-        }
-        getAnimationStateCallback() {
-            return this._aniamtionStateCallback;
-        }
     }
 
     class LayoutItem {
@@ -53298,39 +53211,26 @@
         }
         setAnimationConfig(config) {
             const defaultPrams = this.type === 'group' ? { selfOnly: true } : {};
-            const formatAnimationCfg = (cfg) => {
-                var _a;
-                const options = (_a = cfg.options) !== null && _a !== void 0 ? _a : {};
-                return Object.assign(Object.assign(Object.assign({}, defaultPrams), cfg), { options: (datum, graphic, customParams) => {
-                        var _a, _b;
-                        const _options = typeof options === 'function' ? options(datum, graphic, customParams) : options;
-                        if (graphic && graphic.context && graphic.context.compiler && isValid$1(graphic.context.modelId)) {
-                            const model = (_a = graphic.context.compiler.getChart()) === null || _a === void 0 ? void 0 : _a.getModelById(graphic.context.modelId);
-                            return Object.assign(Object.assign({}, _options), { layoutRect: (_b = model === null || model === void 0 ? void 0 : model.getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(model) });
-                        }
-                        return Object.assign({}, _options);
-                    } });
-            };
             const animationConfig = {};
             Object.keys(config).forEach(key => {
                 const value = config[key];
                 if (isArray$1(value)) {
-                    animationConfig[key] = value.map(formatAnimationCfg);
+                    animationConfig[key] = value.map(item => {
+                        var _a;
+                        const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
+                        return Object.assign(Object.assign(Object.assign({}, defaultPrams), item), { options: (...args) => {
+                                var _a, _b;
+                                const _options = typeof options === 'function' ? options(...args) : options;
+                                return Object.assign(Object.assign({}, _options), { layoutRect: (_b = (_a = this.model).getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(_a) });
+                            } });
+                    });
                 }
-                else if (isValid$1(value)) {
-                    animationConfig[key] = formatAnimationCfg(value);
+                else {
+                    animationConfig[key] = Object.assign(Object.assign({}, defaultPrams), config[key]);
                 }
             });
             this._animationConfig = animationConfig;
         }
-        disableAnimationByState(state) {
-            const states = array(state);
-            this._disabledAnimationStates = [...new Set([...this._disabledAnimationStates, ...states])];
-        }
-        enableAnimationByState(state) {
-            const states = array(state);
-            this._disabledAnimationStates = this._disabledAnimationStates.filter(s => !states.includes(s));
-        }
         setSkipBeforeLayouted(skip) {
             this._skipBeforeLayouted = skip;
         }
@@ -53465,7 +53365,6 @@
             this._visible = true;
             this.stateStyle = {};
             this._unCompileChannel = {};
-            this._disabledAnimationStates = [];
             this._skipBeforeLayouted = false;
             this._extensionChannel = {};
             this._computeExChannel = {};
@@ -53883,7 +53782,6 @@
         }
         _getCommonContext() {
             return {
-                compiler: this.getCompiler(),
                 markType: this.type,
                 markId: this.id,
                 modelId: this.model.id,
@@ -53957,19 +53855,17 @@
             this._dataByGroup = groupData(data, this._groupKeyGetter);
         }
         createAnimationStateList(type, animationConfig) {
-            var _a;
             let config = animationConfig[type];
             if (config && Array.isArray(config)) {
                 config = config.length === 1 ? config[0] : config;
             }
             if (Array.isArray(config)) {
-                return config.map((item, index) => {
+                config = config.map((item, index) => {
                     var _a;
                     return (Object.assign(Object.assign({}, item), { priority: (_a = item.priority) !== null && _a !== void 0 ? _a : Infinity }));
                 });
             }
-            return config
-                ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? (_a = config.priority) !== null && _a !== void 0 ? _a : Infinity : config.priority }) : config;
+            return config;
         }
         tryRunMorphing(graphics) {
             if (this._lastMark) {
@@ -54053,34 +53949,13 @@
                 this._product.applyAnimationState(['normal'], [normalConfig]);
             }
         }
-        _setAnimationState(g) {
-            var _a, _b, _c;
-            const callback = (this.type === "component"
-                ? this.model.getAnimationStateCallback()
-                : (_c = (_b = (_a = this.model).getRegion) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getAnimationStateCallback()) ||
-                ((g) => {
-                    var _a;
-                    const diffState = (_a = g.context) === null || _a === void 0 ? void 0 : _a.diffState;
-                    return diffState === AnimationStateEnum.exit
-                        ? AnimationStateEnum.exit
-                        : diffState === AnimationStateEnum.update
-                            ? AnimationStateEnum.update
-                            : AnimationStateEnum.appear;
-                });
-            const customizedState = callback(g);
-            g.context.animationState = customizedState !== null && customizedState !== void 0 ? customizedState : g.context.diffState;
-            if (g.context.animationState === DiffState.exit) {
-                g.context.reusing = true;
-                g.animates && g.animates.forEach((a) => a.stop());
-            }
-        }
         _runJoin(data) {
             const newGroupedData = this._getDataByKey(data);
             const prevGroupedData = this._prevDataByKey;
-            const allGraphics = [];
+            const newGraphics = [];
             const enterGraphics = new Set(this._graphics.filter(g => g.context.diffState === DiffState.enter));
             const callback = (key, newData, prevData) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 let g;
                 let diffState;
                 if (isNil$1(newData)) {
@@ -54098,20 +53973,23 @@
                     }
                     diffState = DiffState.enter;
                     g.isExiting = false;
+                    if (((_a = g.context) === null || _a === void 0 ? void 0 : _a.diffState) === DiffState.exit) {
+                        g.context.reusing = true;
+                        g.animates && g.animates.forEach((a) => a.stop());
+                    }
                     this._graphicMap.set(key, g);
-                    allGraphics.push(g);
+                    newGraphics.push(g);
                 }
                 else {
                     g = this._graphicMap.get(key);
                     if (g) {
                         diffState = DiffState.update;
-                        allGraphics.push(g);
+                        newGraphics.push(g);
                     }
                 }
                 if (g) {
+                    g.context = Object.assign(Object.assign({}, this._getCommonContext()), { diffState, reusing: (_b = g.context) === null || _b === void 0 ? void 0 : _b.reusing, originalFieldX: (_c = g.context) === null || _c === void 0 ? void 0 : _c.originalFieldX, originalFieldY: (_d = g.context) === null || _d === void 0 ? void 0 : _d.originalFieldY, fieldX: (_e = g.context) === null || _e === void 0 ? void 0 : _e.fieldX, fieldY: (_f = g.context) === null || _f === void 0 ? void 0 : _f.fieldY, animationState: diffState, data: newData !== null && newData !== void 0 ? newData : (_g = g.context) === null || _g === void 0 ? void 0 : _g.data, uniqueKey: key, key: newData ? this._keyGetter(newData[0]) : (_h = g.context) === null || _h === void 0 ? void 0 : _h.key, groupKey: newData ? this._groupKeyGetter(newData[0]) : (_j = g.context) === null || _j === void 0 ? void 0 : _j.groupKey, indexKey: '__VCHART_DEFAULT_DATA_INDEX', stateAnimateConfig: (_k = this.getAnimationConfig()) === null || _k === void 0 ? void 0 : _k.state });
                     enterGraphics.delete(g);
-                    g.context = Object.assign(Object.assign({}, this._getCommonContext()), { diffState, reusing: (_a = g.context) === null || _a === void 0 ? void 0 : _a.reusing, originalFieldX: (_b = g.context) === null || _b === void 0 ? void 0 : _b.originalFieldX, originalFieldY: (_c = g.context) === null || _c === void 0 ? void 0 : _c.originalFieldY, fieldX: (_d = g.context) === null || _d === void 0 ? void 0 : _d.fieldX, fieldY: (_e = g.context) === null || _e === void 0 ? void 0 : _e.fieldY, data: newData !== null && newData !== void 0 ? newData : (_f = g.context) === null || _f === void 0 ? void 0 : _f.data, uniqueKey: key, key: newData ? this._keyGetter(newData[0]) : (_g = g.context) === null || _g === void 0 ? void 0 : _g.key, groupKey: newData ? this._groupKeyGetter(newData[0]) : (_h = g.context) === null || _h === void 0 ? void 0 : _h.groupKey, indexKey: '__VCHART_DEFAULT_DATA_INDEX', stateAnimateConfig: (_j = this.getAnimationConfig()) === null || _j === void 0 ? void 0 : _j.state });
-                    this._setAnimationState(g);
                 }
                 return g;
             };
@@ -54149,13 +54027,13 @@
                 }
                 g.release();
             });
-            const graphicCount = allGraphics.length;
-            allGraphics.forEach((g, index) => {
+            const graphicCount = newGraphics.length;
+            newGraphics.forEach((g, index) => {
                 g.context.graphicCount = graphicCount;
                 g.context.graphicIndex = index;
             });
             this._dataByKey = newGroupedData;
-            this._graphics = allGraphics;
+            this._graphics = newGraphics;
             this.needClear = true;
         }
         _runEncoderOfGraphic(styles, g, attrs = {}) {
@@ -54238,7 +54116,13 @@
                     }
                 }
                 else {
-                    const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
+                    const prevAttrs = g.getAttributes(true);
+                    const diffAttrs = {};
+                    Object.keys(finalAttrs).forEach(key => {
+                        if (prevAttrs[key] !== finalAttrs[key]) {
+                            diffAttrs[key] = finalAttrs[key];
+                        }
+                    });
                     g.context.diffAttrs = diffAttrs;
                     if (g.context.reusing) {
                         g.context.lastAttrs = g.attribute;
@@ -54407,24 +54291,23 @@
                 }
             };
             this._graphicMap.forEach((g, key) => {
-                if (g.context.diffState !== DiffState.exit || g.isExiting) {
-                    return;
-                }
-                if (g.context.animationState === DiffState.exit && this.hasAnimationByState('exit')) {
-                    g.isExiting = true;
-                    const animationConfig = this.getAnimationConfig();
-                    if (animationConfig.exit && animationConfig.exit.length) {
-                        const exitConfigList = animationConfig.exit.map((item, index) => ({
-                            name: `exit_${index}`,
-                            animation: Object.assign(Object.assign({}, item), { customParameters: g.context })
-                        }));
-                        g.applyAnimationState(['exit'], [exitConfigList.length === 1 ? exitConfigList[0] : exitConfigList], () => {
-                            doRemove(g, key);
-                        });
+                if (g.context.diffState === DiffState.exit && !g.isExiting) {
+                    if (this.hasAnimationByState('exit')) {
+                        g.isExiting = true;
+                        const animationConfig = this.getAnimationConfig();
+                        if (animationConfig.exit && animationConfig.exit.length) {
+                            const exitConfigList = animationConfig.exit.map((item, index) => ({
+                                name: `exit_${index}`,
+                                animation: Object.assign(Object.assign({}, item), { customParameters: g.context })
+                            }));
+                            g.applyAnimationState(['exit'], [exitConfigList.length === 1 ? exitConfigList[0] : exitConfigList], () => {
+                                doRemove(g, key);
+                            });
+                        }
+                    }
+                    else {
+                        doRemove(g, key);
                     }
-                }
-                else {
-                    doRemove(g, key);
                 }
             });
         }
@@ -54570,11 +54453,15 @@
                 this._runProgressiveStep();
             }
         }
+        updateAnimationState(callback) {
+            if (this._graphics && this._graphics.length) {
+                this._graphics.forEach(g => {
+                    g.context.animationState = callback(g);
+                });
+            }
+        }
         hasAnimationByState(state) {
-            if (!state ||
-                !this._animationConfig ||
-                !this._animationConfig[state] ||
-                this._disabledAnimationStates.includes(state)) {
+            if (!state || !this._animationConfig || !this._animationConfig[state]) {
                 return false;
             }
             const stateAnimationConfig = this._animationConfig[state];
@@ -54591,36 +54478,11 @@
         }
     }
 
-    exports.MarkTypeEnum = void 0;
-    (function (MarkTypeEnum) {
-        MarkTypeEnum["group"] = "group";
-        MarkTypeEnum["symbol"] = "symbol";
-        MarkTypeEnum["rule"] = "rule";
-        MarkTypeEnum["line"] = "line";
-        MarkTypeEnum["text"] = "text";
-        MarkTypeEnum["rect"] = "rect";
-        MarkTypeEnum["image"] = "image";
-        MarkTypeEnum["path"] = "path";
-        MarkTypeEnum["area"] = "area";
-        MarkTypeEnum["arc"] = "arc";
-        MarkTypeEnum["polygon"] = "polygon";
-        MarkTypeEnum["boxPlot"] = "boxPlot";
-        MarkTypeEnum["linkPath"] = "linkPath";
-        MarkTypeEnum["cell"] = "cell";
-        MarkTypeEnum["ripple"] = "ripple";
-        MarkTypeEnum["liquid"] = "liquid";
-        MarkTypeEnum["component"] = "component";
-        MarkTypeEnum["dataLabel"] = "dataLabel";
-        MarkTypeEnum["label"] = "label";
-        MarkTypeEnum["pictogram"] = "pictogram";
-    })(exports.MarkTypeEnum || (exports.MarkTypeEnum = {}));
-
     class GroupMark extends BaseMark {
         constructor() {
             super(...arguments);
             this.type = GroupMark.type;
             this._marks = [];
-            this._diffState = DiffState.enter;
         }
         getMarks() {
             return this._marks;
@@ -54683,28 +54545,10 @@
                 return;
             }
             const style = (_a = this._simpleStyle) !== null && _a !== void 0 ? _a : this.getAttributesOfState({});
-            this._product.context = Object.assign(Object.assign(Object.assign({}, this._product.context), this._getCommonContext()), { diffState: this._diffState });
-            this._setAnimationState(this._product);
-            const newAttrs = this._getAttrsFromConfig(style);
-            if (this._product.context.diffState === DiffState.update) {
-                const hasAnimation = this.hasAnimation();
-                const diffAttrs = getDiffAttributesOfGraphic(this._product, newAttrs);
-                this._product.context.diffAttrs = diffAttrs;
-                if (!this.hasAnimationByState(this._product.context.animationState)) {
-                    hasAnimation ? this._product.setAttributesAndPreventAnimate(diffAttrs) : this._product.setAttributes(diffAttrs);
-                }
-                if (hasAnimation) {
-                    this._product.setFinalAttributes(newAttrs);
-                }
-            }
-            else {
-                this._product.setAttributes(newAttrs);
-            }
+            this._product.context = Object.assign(Object.assign({}, this._product.context), this._getCommonContext());
+            this._product.setAttributes(this._getAttrsFromConfig(style));
             this.needClear = true;
         }
-        clearExitGraphics() {
-            this._diffState = DiffState.update;
-        }
         render() {
             if (this._isCommited) {
                 log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -54715,6 +54559,16 @@
                 mark.render();
             });
         }
+        updateAnimationState(callback) {
+            this.getGraphics().forEach(g => {
+                if (g) {
+                    g.context = Object.assign(Object.assign({}, g.context), { animationState: callback(g) });
+                }
+            });
+            this.getMarks().forEach(mark => {
+                mark.updateAnimationState(callback);
+            });
+        }
         release() {
             super.release();
             this.removeProduct();
@@ -55612,6 +55466,7 @@
                 if (!this._beforeRender(option)) {
                     return self;
                 }
+                this._updateAnimateState(true);
                 (_a = this._compiler) === null || _a === void 0 ? void 0 : _a.render(option.morphConfig);
                 this._updateAnimateState(false);
                 this._afterRender();
@@ -55908,7 +55763,7 @@
             return this._beforeRender(option);
         }
         _reCompile(updateResult, morphConfig) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             if (updateResult.reMake) {
                 this._releaseData();
                 this._initDataSet();
@@ -55928,16 +55783,20 @@
             if (updateResult.reMake) {
                 (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.releaseGrammar();
                 this._userEvents.forEach(e => { var _a; return (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(e.eType, e.query, e.handler); });
+                if (updateResult.reSize) {
+                    this._doResize();
+                }
             }
-            else if (updateResult.reCompile) {
-                (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
-                (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
-            }
-            if (updateResult.reSize) {
-                const { width, height } = this.getCurrentSize();
-                this._currentSize = { width, height };
-                (_f = this._chart) === null || _f === void 0 ? void 0 : _f.onResize(width, height, false);
-                (_g = this._compiler) === null || _g === void 0 ? void 0 : _g.resize(width, height, false);
+            else {
+                if (updateResult.reCompile) {
+                    (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
+                    (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
+                }
+                if (updateResult.reSize) {
+                    const { width, height } = this.getCurrentSize();
+                    this._chart.onResize(width, height, false);
+                    this._compiler.resize(width, height, false);
+                }
             }
         }
         _beforeRender(option = {}) {
@@ -55996,21 +55855,17 @@
             });
         }
         _updateAnimateState(initial) {
-            var _a, _b;
             if (this._option.animation) {
                 const updateGraphicAnimationState = (graphic) => {
                     var _a;
                     const diffState = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.diffState;
                     if (initial) {
-                        return diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
+                        return diffState === 'exit' ? undefined : AnimationStateEnum.appear;
                     }
                     return diffState;
                 };
-                (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getAllRegions().forEach(region => {
-                    region.updateAnimateStateCallback(updateGraphicAnimationState);
-                });
-                (_b = this._chart) === null || _b === void 0 ? void 0 : _b.getAllComponents().forEach(component => {
-                    component.updateAnimateStateCallback(updateGraphicAnimationState);
+                this._compiler.getRootMarks().forEach(mark => {
+                    mark.updateAnimationState(updateGraphicAnimationState);
                 });
             }
         }
@@ -56094,11 +55949,11 @@
             }
             if (this._chart) {
                 this._chart.updateData(id, data, true, parserOptions);
+                this._compiler.render();
                 if (userUpdateOptions === null || userUpdateOptions === void 0 ? void 0 : userUpdateOptions.reAnimate) {
                     this.stopAnimation();
                     this._updateAnimateState(true);
                 }
-                this._compiler.render();
                 return this;
             }
             this._spec.data = array(this._spec.data);
@@ -56109,11 +55964,11 @@
             if (this._chart) {
                 this._chart.updateFullData(data);
                 if (reRender) {
+                    this._compiler.render();
                     if (userUpdateOptions === null || userUpdateOptions === void 0 ? void 0 : userUpdateOptions.reAnimate) {
                         this.stopAnimation();
                         this._updateAnimateState(true);
                     }
-                    this._compiler.render();
                 }
                 return this;
             }
@@ -56633,20 +56488,10 @@
             return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
         }
         stopAnimation() {
-            var _a;
-            (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.stopAnimation(true);
-        }
-        reRunNormalAnimation() {
-            var _a;
-            (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.reApplyAnimationState('normal', true);
         }
         pauseAnimation() {
-            var _a;
-            (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.pauseAnimation(true);
         }
         resumeAnimation() {
-            var _a;
-            (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.resumeAnimation(true);
         }
         convertDatumToPosition(datum, dataLinkInfo = {}, isRelativeToCanvas = false, checkInViewData) {
             var _a;
@@ -56930,7 +56775,7 @@
         });
     };
 
-    const version = "2.0.1";
+    const version = "2.0.3-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -58743,11 +58588,14 @@
                 }
                 if (isNil$1(dataView)) {
                     m.setData(this._data);
+                    m.setSkipBeforeLayouted(true);
                 }
                 else if (dataView !== false) {
                     m.setDataView(dataView);
                 }
-                m.setSkipBeforeLayouted(skipBeforeLayouted !== false);
+                if (isBoolean$1(skipBeforeLayouted)) {
+                    m.setSkipBeforeLayouted(skipBeforeLayouted);
+                }
                 if (!isNil$1(groupKey)) {
                     m.setGroupKey(groupKey);
                 }
@@ -59972,6 +59820,30 @@
 
     const lineSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), lineLikeSeriesMark);
 
+    exports.MarkTypeEnum = void 0;
+    (function (MarkTypeEnum) {
+        MarkTypeEnum["group"] = "group";
+        MarkTypeEnum["symbol"] = "symbol";
+        MarkTypeEnum["rule"] = "rule";
+        MarkTypeEnum["line"] = "line";
+        MarkTypeEnum["text"] = "text";
+        MarkTypeEnum["rect"] = "rect";
+        MarkTypeEnum["image"] = "image";
+        MarkTypeEnum["path"] = "path";
+        MarkTypeEnum["area"] = "area";
+        MarkTypeEnum["arc"] = "arc";
+        MarkTypeEnum["polygon"] = "polygon";
+        MarkTypeEnum["boxPlot"] = "boxPlot";
+        MarkTypeEnum["linkPath"] = "linkPath";
+        MarkTypeEnum["cell"] = "cell";
+        MarkTypeEnum["ripple"] = "ripple";
+        MarkTypeEnum["liquid"] = "liquid";
+        MarkTypeEnum["component"] = "component";
+        MarkTypeEnum["dataLabel"] = "dataLabel";
+        MarkTypeEnum["label"] = "label";
+        MarkTypeEnum["pictogram"] = "pictogram";
+    })(exports.MarkTypeEnum || (exports.MarkTypeEnum = {}));
+
     const isStopsEqual = (prev, next) => {
         var _a, _b;
         if (prev === next) {
@@ -63138,24 +63010,6 @@
                 };
             }
         }
-        _updateData() {
-            var _a, _b, _c;
-            const tickTransformType = this.registerTicksTransform();
-            if (this._spec.showAllGroupLayers && this._scales.length > 1) {
-                const layers = (_a = this._spec.layers) !== null && _a !== void 0 ? _a : [];
-                Object.keys(this._tickDataMap).forEach(layer => {
-                    const layerConfig = layers[this._scales.length - 1 - +layer] || {};
-                    const tickData = this._tickDataMap[layer];
-                    const tickTransform = tickData === null || tickData === void 0 ? void 0 : tickData.getDataView().transformsArr.find((t) => t.type === tickTransformType);
-                    tickTransform &&
-                        (tickTransform.options = Object.assign(Object.assign({}, this._tickTransformOption()), layerConfig));
-                });
-            }
-            else {
-                const tickTransform = (_c = (_b = this._tickData) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.getDataView().transformsArr.find(t => t.type === tickTransformType);
-                tickTransform && (tickTransform.options = this._tickTransformOption());
-            }
-        }
         dataToPosition(values, cfg = {}) {
             var _a, _b;
             if (values.length === 0 || this._scales.length === 0) {
@@ -63248,7 +63102,7 @@
         getLabelItems(length) {
             const labelItems = [];
             let preData = [];
-            (this._spec.showAllGroupLayers ? this._scales : [this._scales[0]]).forEach((scale, index) => {
+            this._scales.forEach((scale, index) => {
                 var _a;
                 const tickData = this._tickDataMap[index];
                 const isTickDataHaveData = (_a = tickData === null || tickData === void 0 ? void 0 : tickData.getLatestData()) === null || _a === void 0 ? void 0 : _a.length;
@@ -63430,20 +63284,6 @@
                 minBandSize
             };
         }
-        _compareSpec(spec, prevSpec) {
-            const result = super._compareSpec(spec, prevSpec);
-            if (result.reMake) {
-                return result;
-            }
-            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.showAllGroupLayers) !== (spec === null || spec === void 0 ? void 0 : spec.showAllGroupLayers) || !isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.layers, spec === null || spec === void 0 ? void 0 : spec.layers)) {
-                result.reMake = true;
-            }
-            return result;
-        }
-        reInit(spec) {
-            super.reInit();
-            this === null || this === void 0 ? void 0 : this._updateData();
-        }
     }
     CartesianBandAxis.type = ComponentTypeEnum.cartesianBandAxis;
     CartesianBandAxis.specKey = 'axes';
@@ -65086,10 +64926,6 @@
             const elements = [...this._components, ...this._regions, ...this._series];
             elements.forEach(element => element.onEvaluateEnd(option));
         }
-        onBeforeRender() {
-            const elements = [...this._components, ...this._regions, ...this._series];
-            elements.forEach(element => element.onBeforeRender());
-        }
         getLayoutElements() {
             return this.getAllModels()
                 .map(i => i.layout)
@@ -65555,11 +65391,17 @@
         }
         _enableMarkAnimation(states) {
             const marks = this.getAllMarks();
-            marks.forEach(mark => mark.enableAnimationByState(states));
+            marks.forEach(mark => {
+                const product = mark.getProduct();
+                if (product && product.animate) ;
+            });
         }
         _disableMarkAnimation(states) {
             const marks = this.getAllMarks();
-            marks.forEach(mark => mark.disableAnimationByState(states));
+            marks.forEach(mark => {
+                const product = mark.getProduct();
+                if (product && product.animate) ;
+            });
         }
         filterGraphicsByDatum(datum, opt = {}) {
             var _a;
@@ -66442,7 +66284,7 @@
             layoutStartPoint = { x: 0, y: 0 };
         }
         Object.keys(stateByField).forEach(field => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e;
             const { currentValue, cacheInfo, labelsComp, attributes, coordKey } = stateByField[field];
             let axis = null;
             let coord = 0;
@@ -66454,8 +66296,8 @@
                         item.axis.getLayoutStartPoint()[coordKey] -
                         layoutStartPoint[coordKey];
                 axis = item.axis;
-                axisLabel = (_f = (_e = (_d = (_c = (_b = (_a = axis
-                    .getVRenderComponents()[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.children[0]) === null || _d === void 0 ? void 0 : _d.getChildByName('axis-label-container')) === null || _e === void 0 ? void 0 : _e.getChildByName('axis-label-container-layer-0')) === null || _f === void 0 ? void 0 : _f.children[0];
+                axisLabel = (_e = (_d = (_c = (_b = (_a = axis
+                    .getVRenderComponents()[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.getChildByName('axis-label-container')) === null || _d === void 0 ? void 0 : _d.getChildByName('axis-label-container-layer-0')) === null || _e === void 0 ? void 0 : _e.children[0];
             }
             const isVisible = !!currentValue.size && Number.isFinite(coord) && !Number.isNaN(coord);
             const useCache = enableRemain && !isVisible && isValid$1(cacheInfo);
@@ -69833,7 +69675,8 @@
         initMark() {
             this._pathMark = this._createMark(MapSeries.mark.area, {
                 groupKey: this.getDimensionField()[0],
-                isSeriesMark: true
+                isSeriesMark: true,
+                skipBeforeLayouted: true
             }, {
                 morph: shouldMarkDoMorph(this._spec, MapSeries.mark.area.name),
                 morphElementKey: this.getDimensionField()[0]
@@ -73319,6 +73162,7 @@
             this._pieMark = this._createMark(Object.assign(Object.assign({}, BasePieSeries.mark.pie), { name: this._pieMarkName, type: this._pieMarkType }), {
                 key: DEFAULT_DATA_KEY,
                 groupKey: this._seriesField,
+                skipBeforeLayouted: true,
                 isSeriesMark: true
             }, {
                 morph: shouldMarkDoMorph(this._spec, this._pieMarkName),
@@ -74783,16 +74627,17 @@
             const userUpdateContent = (_c = (_b = (_a = this.spec) === null || _a === void 0 ? void 0 : _a[activeType]) === null || _b === void 0 ? void 0 : _b.updateContent) !== null && _c !== void 0 ? _c : (_d = chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType]) === null || _d === void 0 ? void 0 : _d.updateContent;
             if (res && !userUpdateContent) {
                 res.updateContent = (prev, datum, params) => {
+                    var _a, _b;
                     const childrenContent = [];
                     const childrenPrev = prev.filter((p) => p.key === 'children');
                     childrenPrev.length > 0 &&
-                        childrenPrev[0].value.forEach((element) => {
+                        ((_b = (_a = childrenPrev === null || childrenPrev === void 0 ? void 0 : childrenPrev[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
                             let flag = true;
                             for (const key in element) {
                                 childrenContent.push(Object.assign(Object.assign({}, childrenPrev[0]), { shapeType: 'circle', hasShape: flag, key: key, value: element[key] + '' }));
                                 flag = false;
                             }
-                        });
+                        }));
                     return prev.concat(childrenContent);
                 };
             }
@@ -74815,13 +74660,21 @@
                 }
             }
             const dataOp = datum[op];
-            dataOp === null || dataOp === void 0 ? void 0 : dataOp.forEach((d, i) => {
-                result.push(Object.assign({}, dataKeyObj, d, {
+            if (dataOp && dataOp.length > 0) {
+                dataOp === null || dataOp === void 0 ? void 0 : dataOp.forEach((d, i) => {
+                    result.push(Object.assign({}, dataKeyObj, d, {
+                        [DEFAULT_DATA_INDEX]: index,
+                        [DEFAULT_DATA_KEY]: `${dataKey}_${i}`
+                    }));
+                    index++;
+                });
+            }
+            else {
+                result.push(Object.assign({}, dataKeyObj, {
                     [DEFAULT_DATA_INDEX]: index,
-                    [DEFAULT_DATA_KEY]: `${dataKey}_${i}`
+                    [DEFAULT_DATA_KEY]: dataKey
                 }));
-                index++;
-            });
+            }
         });
         return result;
     };
@@ -74914,7 +74767,7 @@
             }
         }
         initData() {
-            var _a;
+            var _a, _b;
             super.initData();
             this._xDimensionStatisticsDomain = this.getRawData().latestData.map((d) => d[this._fieldY[0]]);
             registerDataSetInstanceTransform(this._option.dataSet, 'objFlat', objFlat);
@@ -74925,9 +74778,31 @@
                 options: 'dots',
                 level: exports.TransformLevel.dotObjFlat
             }, false);
+            (_b = this.getRawData()) === null || _b === void 0 ? void 0 : _b.transform({
+                type: 'objFlat',
+                options: 'dots',
+                level: exports.TransformLevel.dotObjFlat
+            }, false);
+        }
+        _statisticViewData() {
+            var _a;
+            super._statisticViewData();
+            (_a = this._viewDataStatistics) === null || _a === void 0 ? void 0 : _a.transform({
+                type: 'objFlat',
+                options: 'dots',
+                level: exports.TransformLevel.dotObjFlat
+            }, false);
         }
         getStatisticFields() {
-            return [{ key: this._fieldY[0], operations: ['values'], customize: this._xDimensionStatisticsDomain }];
+            const result = [{ key: this._fieldY[0], operations: ['values'], customize: this._xDimensionStatisticsDomain }];
+            const { linearMode = true } = this._spec;
+            if (linearMode) {
+                result.push({ key: this._fieldX[0], operations: ['min', 'max'] });
+            }
+            else {
+                result.push({ key: this._fieldX[0], operations: ['values'] });
+            }
+            return result;
         }
         setAttrFromSpec() {
             var _a;
@@ -74972,20 +74847,21 @@
             });
         }
         initMarkStyle() {
+            var _a, _b;
             const clipMark = this._clipMark;
             if (clipMark) {
                 this.setMarkStyle(clipMark, {
-                    x: -this._spec.leftAppendPadding,
+                    x: -((_a = this._spec.leftAppendPadding) !== null && _a !== void 0 ? _a : 0),
                     y: 0,
                     width: 10000,
-                    height: this._spec.clipHeight
+                    height: () => { var _a; return (_a = this._spec.clipHeight) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().height; }
                 }, 'normal', exports.AttributeLevel.Series);
                 clipMark.setMarkConfig({ interactive: false, clip: true });
             }
             const containerMark = this._containerMark;
             if (containerMark) {
                 this.setMarkStyle(containerMark, {
-                    x: this._spec.leftAppendPadding
+                    x: (_b = this._spec.leftAppendPadding) !== null && _b !== void 0 ? _b : 0
                 }, 'normal', exports.AttributeLevel.Series);
                 containerMark.setMarkConfig({ interactive: false });
             }
@@ -75210,7 +75086,13 @@
         }
     }
 
-    const linkSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["group"]: { name: "group", type: "group" }, ["link"]: { name: "link", type: "rule" }, ["arrow"]: { name: "arrow", type: "symbol" } });
+    var LinkType;
+    (function (LinkType) {
+        LinkType["line"] = "line";
+        LinkType["curve"] = "curve";
+    })(LinkType || (LinkType = {}));
+
+    const linkSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["group"]: { name: "group", type: "group" }, ["link"]: { name: "link", type: "rule" }, ["curveLink"]: { name: "curveLink", type: "path" }, ["arrow"]: { name: "arrow", type: "symbol" }, ["imageLabel"]: { name: "imageLabel", type: "image" } });
 
     const linkDotInfo = (data, op) => {
         const { infoKey, fields, linkData, dotData } = op;
@@ -75252,6 +75134,7 @@
         constructor() {
             super(...arguments);
             this.type = exports.SeriesTypeEnum.link;
+            this._curveLinkCountMap = {};
         }
         getFromField() {
             return this._fromField;
@@ -75322,11 +75205,12 @@
             this.setDotSeriesSpec(this._spec.dotSeriesSpec);
         }
         initMark() {
+            const { linkType = LinkType.line, imageLabelField } = this._spec;
             this._clipMark = this._createMark(LinkSeries.mark.group);
             this._containerMark = this._createMark(LinkSeries.mark.group, {
                 parent: this._clipMark
             });
-            this._linkMark = this._createMark(LinkSeries.mark.link, {
+            this._linkMark = this._createMark(linkType === LinkType.curve ? LinkSeries.mark.curveLink : LinkSeries.mark.link, {
                 skipBeforeLayouted: false,
                 parent: this._containerMark
             });
@@ -75335,16 +75219,23 @@
                 isSeriesMark: true,
                 parent: this._containerMark
             });
+            if (imageLabelField) {
+                this._imageLabelMark = this._createMark(LinkSeries.mark.imageLabel, {
+                    skipBeforeLayouted: false,
+                    isSeriesMark: true,
+                    parent: this._containerMark
+                });
+            }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             const clipMark = this._clipMark;
             if (clipMark) {
                 this.setMarkStyle(clipMark, {
-                    x: -this._spec.leftAppendPadding,
+                    x: -((_a = this._spec.leftAppendPadding) !== null && _a !== void 0 ? _a : 0),
                     y: 0,
                     width: 10000,
-                    height: this._spec.clipHeight
+                    height: () => { var _a; return (_a = this._spec.clipHeight) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().height; }
                 }, 'normal', exports.AttributeLevel.Series);
                 clipMark.setMarkConfig({ interactive: false, clip: true });
             }
@@ -75357,19 +75248,43 @@
                 containerMark.setMarkConfig({ interactive: false });
             }
             const linkMark = this._linkMark;
+            const { linkType = LinkType.line } = this._spec;
             if (linkMark) {
-                this.setMarkStyle(linkMark, {
-                    stroke: this.getColorAttribute(),
-                    strokeOpacity: this.dataToOpacity.bind(this),
-                    x: this.dataToPositionXFrom.bind(this),
-                    y: this.dataToPositionYFrom.bind(this),
-                    x1: this.dataToPositionXTo.bind(this),
-                    y1: this.dataToPositionYTo.bind(this)
-                }, 'normal', exports.AttributeLevel.Series);
+                if (linkType === LinkType.curve) {
+                    this.setMarkStyle(linkMark, {
+                        stroke: (_d = (_c = (_b = this._spec.link) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.stroke) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
+                        strokeOpacity: this.dataToOpacity.bind(this),
+                        path: (datum) => {
+                            const fromX = this.dataToPositionXFrom(datum);
+                            const fromY = this.dataToPositionYFrom(datum);
+                            const toX = this.dataToPositionXTo(datum);
+                            const toY = this.dataToPositionYTo(datum);
+                            const curveLinkCount = this._curveLinkCountMap[`${fromX}-${fromY}-${toX}-${toY}`] || 1;
+                            this._curveLinkCountMap[`${fromX}-${fromY}-${toX}-${toY}`] = curveLinkCount + 1;
+                            const curveRatio = 0.5 + curveLinkCount * 0.1;
+                            const controlX1 = fromX + (toX - fromX) * 0.7;
+                            const controlY1 = fromY;
+                            const controlX2 = toX - (toX - fromX) * curveRatio;
+                            const controlY2 = toY;
+                            return `M ${fromX} ${fromY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${toX} ${toY}`;
+                        },
+                        lineWidth: (_f = (_e = this._spec.link.style) === null || _e === void 0 ? void 0 : _e.lineWidth) !== null && _f !== void 0 ? _f : 1
+                    }, 'normal', exports.AttributeLevel.Series);
+                }
+                else {
+                    this.setMarkStyle(linkMark, {
+                        stroke: this.getColorAttribute(),
+                        strokeOpacity: this.dataToOpacity.bind(this),
+                        x: this.dataToPositionXFrom.bind(this),
+                        y: this.dataToPositionYFrom.bind(this),
+                        x1: this.dataToPositionXTo.bind(this),
+                        y1: this.dataToPositionYTo.bind(this)
+                    }, 'normal', exports.AttributeLevel.Series);
+                }
             }
             const arrowMark = this._arrowMark;
             if (arrowMark) {
-                const arrowSize = (_d = (_c = (_b = (_a = this._theme) === null || _a === void 0 ? void 0 : _a.arrow) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
+                const arrowSize = (_k = (_j = (_h = (_g = this._theme) === null || _g === void 0 ? void 0 : _g.arrow) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.size) !== null && _k !== void 0 ? _k : 10;
                 this.setMarkStyle(arrowMark, {
                     x: this.dataToPositionXTo.bind(this),
                     y: (datum) => this.dataToPositionArrowYTo(datum, arrowSize),
@@ -75381,18 +75296,44 @@
                     }
                 }, 'normal', exports.AttributeLevel.Series);
             }
+            const imageLabelMark = this._imageLabelMark;
+            if (imageLabelMark) {
+                const { style = {} } = this._spec.imageLabel;
+                const { width = 40, height = 40 } = style;
+                this.setMarkStyle(imageLabelMark, {
+                    x: datum => {
+                        return (this.dataToPositionXFrom(datum) + this.dataToPositionXTo(datum)) / 2 - width / 2;
+                    },
+                    y: datum => {
+                        return (this.dataToPositionYFrom(datum) + this.dataToPositionYTo(datum)) / 2 - height / 2;
+                    },
+                    width,
+                    height,
+                    image: datum => {
+                        return datum[this._spec.imageLabelField];
+                    }
+                }, 'normal', exports.AttributeLevel.Series);
+            }
         }
         afterInitMark() {
             super.afterInitMark();
         }
         dataToPositionXFrom(datum) {
+            var _a, _b, _c, _d;
             if (!this._xAxisHelper) {
                 return Number.NaN;
             }
             const { dataToPosition } = this._xAxisHelper;
-            return dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_xField'), {
+            const allowExtend = this._spec.allowExtend;
+            const bandSize = (_c = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) !== null && _c !== void 0 ? _c : 0;
+            const { style = {} } = (_d = this._dotSeriesSpec.symbol) !== null && _d !== void 0 ? _d : {};
+            const { size: dotSize = 10 } = style;
+            return (dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_xField'), {
                 bandPosition: this._bandPosition
-            });
+            }) +
+                (allowExtend && (!datum.isExtend || datum.isExtend === 'left')
+                    ? -(array(bandSize)[0] + dotSize) / 2
+                    : 0));
         }
         dataToPositionYFrom(datum) {
             if (!this._yAxisHelper) {
@@ -75402,13 +75343,21 @@
             return dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_yField'));
         }
         dataToPositionXTo(datum) {
+            var _a, _b, _c, _d;
             if (!this._xAxisHelper) {
                 return Number.NaN;
             }
             const { dataToPosition } = this._xAxisHelper;
-            return dataToPosition(this.getDatumPositionValues(datum, this._toField + '_xField'), {
+            const allowExtend = this._spec.allowExtend;
+            const bandSize = (_c = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) !== null && _c !== void 0 ? _c : 0;
+            const { style = {} } = (_d = this._dotSeriesSpec.symbol) !== null && _d !== void 0 ? _d : {};
+            const { size: dotSize = 10 } = style;
+            return (dataToPosition(this.getDatumPositionValues(datum, this._toField + '_xField'), {
                 bandPosition: this._bandPosition
-            });
+            }) +
+                (allowExtend && (!datum.isExtend || datum.isExtend === 'right')
+                    ? (array(bandSize)[0] + dotSize) / 2
+                    : 0));
         }
         dataToPositionYTo(datum) {
             if (!this._yAxisHelper) {
@@ -75430,9 +75379,10 @@
             }) + offset);
         }
         dataToOpacity(datum) {
-            if (this.isPositionXOuterRange(datum, this._fromField + '_xField') ||
-                this.isPositionXOuterRange(datum, this._toField + '_xField') ||
-                datum[this._fromField] === datum[this._toField]) {
+            if (!this._spec.allowExtend &&
+                (this.isPositionXOuterRange(datum, this._fromField + '_xField') ||
+                    this.isPositionXOuterRange(datum, this._toField + '_xField') ||
+                    datum[this._fromField] === datum[this._toField])) {
                 return 0;
             }
             return 1;
@@ -80977,6 +80927,7 @@
             if (this._spec.isTransform) {
                 this._funnelTransformMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.transform), { name: this._transformMarkName, type: this._transformMarkType }), {
                     themeSpec: (_b = this._theme) === null || _b === void 0 ? void 0 : _b.transform,
+                    skipBeforeLayouted: true,
                     noSeparateStyle: true
                 });
                 if (this._funnelTransformMark) {
@@ -80989,6 +80940,7 @@
                 this._funnelOuterLabelMark.label = this._createMark(FunnelSeries.mark.outerLabel, {
                     themeSpec: (_h = this._theme) === null || _h === void 0 ? void 0 : _h.outerLabel,
                     markSpec: this._spec.outerLabel,
+                    skipBeforeLayouted: true,
                     noSeparateStyle: true,
                     parent: false
                 });
@@ -89729,15 +89681,11 @@
                 });
             };
             this._handleClickToLock = (params) => {
-                var _a, _b;
                 if (this._clickLock) {
                     this._handleChartMouseOut(params);
                     this._clickLock = false;
                 }
                 else {
-                    if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
-                        return;
-                    }
                     this._clickLock = true;
                 }
             };
@@ -90036,9 +89984,6 @@
                         return;
                     }
                     this._isEnterTooltip = false;
-                    if (this._spec.triggerOff === 'none') {
-                        return;
-                    }
                     if (this._cacheEnterableRect) {
                         const newRect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                         if (newRect &&
@@ -90055,10 +90000,7 @@
             const activeType = this._spec.activeType;
             this.processor = {};
             activeType.forEach(type => {
-                const instance = Factory.createTooltipProcessor(type, this);
-                if (instance) {
-                    this.processor[type] = instance;
-                }
+                this.processor[type] = Factory.createTooltipProcessor(type, this);
             });
         }
         _initEvent() {
@@ -90486,7 +90428,7 @@
                 this.event.off(eventName, handler);
             }
         }
-        onBeforeRender() {
+        updateLayoutAttribute() {
             this._limitBounds = null;
             this._showDefaultCrosshair();
         }
@@ -91370,7 +91312,7 @@
         return data.filter(filter);
     };
     const dataFilterComputeDomain = (data, op) => {
-        const { stateFields, valueFields, dataCollection, isCategoryState } = op.input;
+        const { stateFields, valueFields, dataCollection, isCategoryState, seriesTypes } = op.input;
         const { stateField, valueField } = op.output;
         const resultObj = {};
         const resultData = [];
@@ -91391,7 +91333,8 @@
                     }
                 });
             }
-            dv.latestData.forEach((d) => {
+            const data = seriesTypes[i] === 'dot' ? objFlat(dv.latestData, 'dots') : dv.latestData;
+            data.forEach((d) => {
                 array(stateFields[i]).forEach(state => {
                     if (!isNil$1(d[state])) {
                         if (isNil$1(resultObj[d[state]])) {
@@ -91476,30 +91419,39 @@
             const axisScale = axis.getScale();
             const reverse = this._isReverse();
             const newRangeFactor = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end];
+            const linkedAxis = this._linkedAxisComponent;
             if (reverse) {
                 switch (tag) {
                     case 'startHandler':
                         axis.scaleRangeFactorEnd(newRangeFactor[1]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
                         break;
                     case 'endHandler':
                         axis.scaleRangeFactorStart(newRangeFactor[0]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
                         break;
                     default:
                         axis.scaleRangeFactorStart(newRangeFactor[0], true);
                         axis.scaleRangeFactorEnd(newRangeFactor[1]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0], true);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
                 }
             }
             else {
                 switch (tag) {
                     case 'startHandler':
                         axis.scaleRangeFactorStart(newRangeFactor[0]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
                         break;
                     case 'endHandler':
                         axis.scaleRangeFactorEnd(newRangeFactor[1]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
                         break;
                     default:
                         axis.scaleRangeFactorEnd(newRangeFactor[1], true);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1], true);
                         axis.scaleRangeFactorStart(newRangeFactor[0]);
+                        linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
                 }
             }
             const newFactor = axisScale.rangeFactor();
@@ -91681,6 +91633,12 @@
             else if (isValid$1(this._spec.axisIndex)) {
                 this._relatedAxisComponent = this._option.getComponentByIndex('axes', this._spec.axisIndex);
             }
+            if (isValid$1(this._spec.linkedAxisId)) {
+                this._linkedAxisComponent = this._option.getComponentByUserId(this._spec.linkedAxisId);
+            }
+            else if (isValid$1(this._spec.linkedAxisIndex)) {
+                this._linkedAxisComponent = this._option.getComponentByIndex('axes', this._spec.linkedAxisIndex);
+            }
             if (isNil$1(this._spec.field) && !this._relatedAxisComponent) {
                 const axes = this._option.getComponentsByKey('axes');
                 const sameOrientAxis = axes.find((cm) => cm._orient === this._orient);
@@ -91763,11 +91721,15 @@
             const dataCollection = [];
             const stateFields = [];
             const valueFields = [];
+            const seriesTypes = [];
             let isCategoryState;
             if (this._relatedAxisComponent) {
                 const originalStateFields = {};
                 eachSeries(this._regions, s => {
                     var _a, _b;
+                    if (s.type === 'link') {
+                        return;
+                    }
                     const xAxisHelper = s.coordinate === 'cartesian'
                         ? s.getXAxisHelper()
                         : s.coordinate === 'polar'
@@ -91790,6 +91752,7 @@
                                 : yAxisHelper;
                     const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
                     dataCollection.push(s.getRawData());
+                    seriesTypes.push(s.type);
                     const seriesSpec = s.getSpec();
                     const xField = s.coordinate === 'cartesian'
                         ? array(seriesSpec.xField)
@@ -91808,7 +91771,7 @@
                     }
                     if (this._valueField) {
                         const valueField = s.type === 'link' ? ['from_yField'] : valueAxisHelper === xAxisHelper ? xField : yField;
-                        if (isContinuous(valueAxisHelper.getScale(0).type)) {
+                        if (isContinuous(valueAxisHelper.getScale(0).type) || s.type === 'dot') {
                             valueFields.push(...valueField);
                         }
                     }
@@ -91841,7 +91804,8 @@
                         dataCollection: dataCollection,
                         stateFields,
                         valueFields,
-                        isCategoryState
+                        isCategoryState,
+                        seriesTypes
                     },
                     output: {
                         stateField: this._stateField,
@@ -91849,9 +91813,9 @@
                     }
                 }
             }, false);
-            this._data = new CompilableData(this._option, data);
             data.reRunAllTransform();
             dataSet.multipleDataViewAddListener(dataCollection, 'change', this._handleDataCollectionChange.bind(this));
+            this._data = new CompilableData(this._option, data);
         }
         setAttrFromSpec() {
             var _a;
@@ -92049,7 +92013,7 @@
         _initCommonEvent() {
             var _a, _b, _c, _d, _e, _f, _g;
             const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
-            const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30 : 0;
+            const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? ((_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30) : 0;
             const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
             const option = { delayType, delayTime, realTime, allowComponentZoom: true };
             if (this._zoomAttr.enable) {
@@ -95197,7 +95161,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._option.globalInstance.on(exports.ChartEvent.rendered, () => {
                     var _a;
                     if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
-                        this._playerComponent.pause();
                         this._playerComponent.play();
                     }
                 });
@@ -96589,7 +96552,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 var _a;
                 this._setRegionMarkPickable(region, true);
                 const { operateMask } = e.detail;
-                const { updateElementsState = true } = this._spec;
                 if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.onBrushEnd) {
                     if (this._spec.onBrushEnd(e) === true) {
                         this.clearGraphic();
@@ -96603,7 +96565,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else {
                     const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-                    if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) {
+                    if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
                         this._setAxisAndDataZoom(operateMask, region);
                     }
                     this._emitEvent(exports.ChartEvent.brushEnd, region);
@@ -96612,9 +96574,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             brush.addEventListener(IOperateType.moveEnd, (e) => {
                 this._setRegionMarkPickable(region, true);
                 const { operateMask } = e.detail;
-                const { updateElementsState = true } = this._spec;
                 const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-                if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) {
+                if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
                     this._setAxisAndDataZoom(operateMask, region);
                 }
                 this._emitEvent(exports.ChartEvent.brushEnd, region);
@@ -96656,11 +96617,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleBrushChange(region, e) {
             const { operateMask } = e.detail;
-            const { updateElementsState = true } = this._spec;
-            if (updateElementsState) {
-                this._reconfigItem(operateMask, region);
-                this._reconfigLinkedItem(operateMask, region);
-            }
+            this._reconfigItem(operateMask, region);
+            this._reconfigLinkedItem(operateMask, region);
         }
         _extendDataInBrush(elementsMap) {
             var _a, _b;
@@ -97911,15 +97869,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const marginKey = align === 'right' ? 'marginLeft' : 'marginRight';
         if (align === 'right') {
             panelStyle.direction = 'rtl';
+            titleStyle.textAlign = 'right';
+            keyStyle.textAlign = 'right';
+            valueStyle.textAlign = 'left';
         }
-        if (isNil$1(titleStyle.textAlign)) {
-            titleStyle.textAlign = align === 'right' ? 'right' : 'left';
-        }
-        if (isNil$1(keyStyle.textAlign)) {
-            keyStyle.textAlign = align === 'right' ? 'right' : 'left';
-        }
-        if (isNil$1(valueStyle.textAlign)) {
-            valueStyle.textAlign = align === 'right' ? 'left' : 'right';
+        else {
+            titleStyle.textAlign = 'left';
+            keyStyle.textAlign = 'left';
+            valueStyle.textAlign = 'right';
         }
         shapeStyle[marginKey] = getPixelPropertyStr((_b = shape.spacing) !== null && _b !== void 0 ? _b : DEFAULT_SHAPE_SPACING);
         keyStyle[marginKey] = getPixelPropertyStr((_c = keyLabel.spacing) !== null && _c !== void 0 ? _c : DEFAULT_KEY_SPACING);
@@ -100465,7 +100422,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.getCombinedSizeOfRegions = getCombinedSizeOfRegions;
     exports.getDataScheme = getDataScheme;
     exports.getDatumOfGraphic = getDatumOfGraphic;
-    exports.getDiffAttributesOfGraphic = getDiffAttributesOfGraphic;
     exports.getDimensionInfoByValue = getDimensionInfoByValue;
     exports.getFieldAlias = getFieldAlias;
     exports.getFunnelTheme = getFunnelTheme;