@visactor/vchart 2.0.0-alpha.4 → 2.0.1-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) {
+      setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
         this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
-          Object.keys(params).forEach(key => {
+          (animate.priority !== 1 / 0 || ignorePriority) && 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
         });
@@ -23552,6 +23552,18 @@
         const changeEvent = new CustomEvent(eventName, details);
         changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
       }
+      eventPosToStagePos(e) {
+        var _a, _b;
+        const result = {
+            x: 0,
+            y: 0
+          },
+          stagePoints = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
+            x: 0,
+            y: 0
+          };
+        return this.globalTransMatrix.transformPoint(stagePoints, result), result;
+      }
     }
 
     const MathPickerContribution = Symbol.for("MathPickerContribution");
@@ -31542,6 +31554,10 @@
           target.attribute.x = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.y = (key, from, to, ratio, step, target) => {
           target.attribute.y = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+        }, this.dx = (key, from, to, ratio, step, target) => {
+          target.attribute.dx = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+        }, this.dy = (key, from, to, ratio, step, target) => {
+          target.attribute.dy = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.angle = (key, from, to, ratio, step, target) => {
           target.attribute.angle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.scaleX = (key, from, to, ratio, step, target) => {
@@ -31718,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.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._animationEndFlag = !0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
       }
       isRunning() {
         return !this.paused && this._animateCount > 0;
@@ -31747,10 +31763,11 @@
       }
       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.emit("animationEnd");
+        }), 0 === this._animateCount && (this._animationEndFlag = !0, this.emit("animationEnd"));
       }
       clear() {
         this.forEachAccessAnimate(animate => {
@@ -31814,7 +31831,9 @@
         return this._timeline;
       }
       bind(target) {
-        return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+        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;
       }
       to(props, duration = 300, easing = "linear") {
         const step = new Step(AnimateStepType.to, props, duration, easing);
@@ -32028,8 +32047,8 @@
       }
       init() {
         this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-          this.initHandler();
-        }), application.global.env && this.initHandler();
+          this.initHandler(!1);
+        }), application.global.env && this.initHandler(!1);
       }
       addTimeline(timeline) {
         this.timelines.push(timeline);
@@ -32040,10 +32059,11 @@
       getTimelines() {
         return this.timelines;
       }
-      initHandler() {
-        this.setupTickHandler();
+      initHandler(force = !1) {
+        this.setupTickHandler(force);
       }
-      setupTickHandler() {
+      setupTickHandler(force = !1) {
+        if (!force && this.tickerHandler) return !0;
         const handler = new RAFTickHandler();
         return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
       }
@@ -32094,7 +32114,7 @@
         return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
       }
       stop() {
-        this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
+        this.status = STATUS$1.INITIAL, this.setupTickHandler(!0), 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();
@@ -32402,7 +32422,11 @@
       _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
         var _a, _b, _c, _d;
         if (custom && customType) {
-          const customParams = this.resolveValue(customParameters, graphic, {}),
+          const customParams = Object.assign({
+              width: graphic.stage.width,
+              height: graphic.stage.height,
+              group: this._target.parent
+            }, this.resolveValue(customParameters, graphic)),
             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);
@@ -32667,7 +32691,6 @@
       }
       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 {
@@ -32677,9 +32700,7 @@
           } = params;
           null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
         }
-        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;
+        return null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
       }
       createTimeline() {
         return new DefaultTimeline();
@@ -32718,7 +32739,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;
+        super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params, this.from = customFrom, this.to = customTo;
       }
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
@@ -35795,18 +35816,19 @@
       }
     };
     const moveOut = (graphic, options, animationParameters) => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d;
       const {
           offset = 0,
           orient: orient,
           direction: direction,
           point: pointOpt
         } = null != options ? options : {},
-        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,
+        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,
         changedX = ("negative" === orient ? groupWidth : 0) + offset,
         changedY = ("negative" === orient ? groupHeight : 0) + offset,
-        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,
+        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,
         fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
         fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
       switch (direction) {
@@ -35965,11 +35987,11 @@
       }
       onBind() {
         var _a, _b;
-        super.onBind();
+        super.onBind(), Object.keys(this.from).forEach(key => {
+          null == this.props[key] && (this.props[key] = this.target.getGraphicAttribute(key));
+        });
         const finalAttribute = this.target.getFinalAttribute();
-        Object.keys(this.from).forEach(key => {
-          null == this.props[key] && (this.props[key] = finalAttribute[key]);
-        }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_b = this.params.controlOptions) || void 0 === _b ? void 0 : _b.immediatelyApply) && this.target.setAttributes(this.from);
+        "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_b = this.params.controlOptions) || void 0 === _b ? void 0 : _b.immediatelyApply) && this.target.setAttributes(this.from);
       }
       onFirstRun() {
         this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
@@ -35979,6 +36001,9 @@
           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);
@@ -36975,7 +37000,7 @@
     const MIN_TICK_GAP = 12;
     const calculateFlushPos = (basePosition, size, rangePosition, otherEnd) => rangePosition < basePosition ? Math.max(basePosition - size / 2, rangePosition) : rangePosition > basePosition ? Math.min(basePosition - size / 2, rangePosition - size) : rangePosition < otherEnd ? rangePosition : rangePosition - size;
     const getCartesianLabelBounds = (scale, domain, op) => {
-      var _a;
+      var _a, _b, _c;
       const {
         labelStyle: labelStyle,
         axisOrientType: axisOrientType,
@@ -36991,27 +37016,32 @@
         scaleY = 0;
       isHorizontal || (isVertical ? (scaleX = 0, scaleY = 1) : startAngle && (scaleX = Math.cos(startAngle), scaleY = -Math.sin(startAngle)));
       const textMeasure = initTextMeasure$1(labelStyle),
-        range = scale.range(),
-        labelBoundsList = domain.map((v, i) => {
-          var _a, _b;
-          const str = labelFormatter ? labelFormatter(v) : `${v}`,
-            {
-              width: width,
-              height: height
-            } = textMeasure.quickMeasure(str),
-            textWidth = Math.max(width, 12),
-            textHeight = Math.max(height, 12),
-            pos = scale.scale(v),
-            baseTextX = scaleX * pos,
-            baseTextY = scaleY * pos;
-          let align,
-            baseline,
-            textX = baseTextX,
-            textY = baseTextY;
-          labelFlush && isHorizontal && 0 === i ? textX = calculateFlushPos(baseTextX, textWidth, range[0], range[range.length - 1]) : labelFlush && isHorizontal && i === domain.length - 1 ? textX = calculateFlushPos(baseTextX, textWidth, range[range.length - 1], range[0]) : align = null !== (_a = labelStyle.textAlign) && void 0 !== _a ? _a : "center", "right" === align ? textX -= textWidth : "center" === align && (textX -= textWidth / 2), labelFlush && isVertical && 0 === i ? textY = calculateFlushPos(baseTextY, textHeight, range[0], range[range.length - 1]) : labelFlush && isVertical && i === domain.length - 1 ? textY = calculateFlushPos(baseTextY, textHeight, range[range.length - 1], range[0]) : baseline = null !== (_b = labelStyle.textBaseline) && void 0 !== _b ? _b : "middle", "bottom" === baseline ? textY -= textHeight : "middle" === baseline && (textY -= textHeight / 2);
-          const bounds = new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight);
-          return labelAngle && bounds.rotate(labelAngle, baseTextX, baseTextY), bounds;
-        });
+        range = scale.range();
+      let labelBoundsList = [];
+      for (let i = 0; i < domain.length; i++) {
+        const v = domain[i],
+          str = labelFormatter ? labelFormatter(v) : `${v}`;
+        if (isPlainObject$1(str)) {
+          labelBoundsList = void 0;
+          break;
+        }
+        const {
+            width: width,
+            height: height
+          } = textMeasure.quickMeasure(str),
+          textWidth = Math.max(width, 12),
+          textHeight = Math.max(height, 12),
+          pos = scale.scale(v),
+          baseTextX = scaleX * pos,
+          baseTextY = scaleY * pos;
+        let align,
+          baseline,
+          textX = baseTextX,
+          textY = baseTextY;
+        labelFlush && isHorizontal && 0 === i ? textX = calculateFlushPos(baseTextX, textWidth, range[0], range[range.length - 1]) : labelFlush && isHorizontal && i === domain.length - 1 ? textX = calculateFlushPos(baseTextX, textWidth, range[range.length - 1], range[0]) : align = null !== (_b = labelStyle.textAlign) && void 0 !== _b ? _b : "center", "right" === align ? textX -= textWidth : "center" === align && (textX -= textWidth / 2), labelFlush && isVertical && 0 === i ? textY = calculateFlushPos(baseTextY, textHeight, range[0], range[range.length - 1]) : labelFlush && isVertical && i === domain.length - 1 ? textY = calculateFlushPos(baseTextY, textHeight, range[range.length - 1], range[0]) : baseline = null !== (_c = labelStyle.textBaseline) && void 0 !== _c ? _c : "middle", "bottom" === baseline ? textY -= textHeight : "middle" === baseline && (textY -= textHeight / 2);
+        const bounds = new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight);
+        labelAngle && bounds.rotate(labelAngle, baseTextX, baseTextY), labelBoundsList.push(bounds);
+      }
       return labelBoundsList;
     };
     const isAxisHorizontal = axisOrientType => ["bottom", "top", "z"].includes(axisOrientType);
@@ -38031,7 +38061,7 @@
       }
     }
     const continuousTicks = (scale, op) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (!isContinuous(scale.type)) return convertDomainToTickData(scale.domain());
       const range = scale.range(),
         rangeSize = Math.abs(range[range.length - 1] - range[0]);
@@ -38083,23 +38113,25 @@
             step = Math.floor(scaleTicks.length * MIN_FONT_SIZE / rangeSize);
           scaleTicks.forEach((tick, index) => {
             index % step != 0 && index !== scaleTicks.length - 1 || samplingScaleTicks.push(tick);
-          }), items = getCartesianLabelBounds(scale, samplingScaleTicks, op).map((bounds, i) => ({
+          }), items = null === (_c = getCartesianLabelBounds(scale, samplingScaleTicks, op)) || void 0 === _c ? void 0 : _c.map((bounds, i) => ({
             AABBBounds: bounds,
             value: samplingScaleTicks[i]
           }));
-        } else items = getCartesianLabelBounds(scale, scaleTicks, op).map((bounds, i) => ({
+        } else items = null === (_d = getCartesianLabelBounds(scale, scaleTicks, op)) || void 0 === _d ? void 0 : _d.map((bounds, i) => ({
           AABBBounds: bounds,
           value: scaleTicks[i]
         }));
-        const firstSourceItem = items[0],
-          lastSourceItem = last(items),
-          samplingMethod = breakData && breakData() ? methods$1.greedy : methods$1.parity;
-        for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = samplingMethod(items, labelGap);
-        const checkFirst = op.labelFirstVisible;
-        let checkLast = op.labelLastVisible;
-        textIntersect(firstSourceItem, lastSourceItem, labelGap) && items.includes(lastSourceItem) && items.length > 1 && checkFirst && checkLast && (items.splice(items.indexOf(lastSourceItem), 1), checkLast = !1), forceItemVisible(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, labelGap)), forceItemVisible(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, labelGap) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, labelGap), !0);
-        const ticks = items.map(item => item.value);
-        ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last(ticks) !== last(scaleTicks) && ticks.push(last(scaleTicks))), scaleTicks = ticks;
+        if (items) {
+          const firstSourceItem = items[0],
+            lastSourceItem = last(items),
+            samplingMethod = breakData && breakData() ? methods$1.greedy : methods$1.parity;
+          for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = samplingMethod(items, labelGap);
+          const checkFirst = op.labelFirstVisible;
+          let checkLast = op.labelLastVisible;
+          textIntersect(firstSourceItem, lastSourceItem, labelGap) && items.includes(lastSourceItem) && items.length > 1 && checkFirst && checkLast && (items.splice(items.indexOf(lastSourceItem), 1), checkLast = !1), forceItemVisible(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, labelGap)), forceItemVisible(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, labelGap) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, labelGap), !0);
+          const ticks = items.map(item => item.value);
+          ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last(ticks) !== last(scaleTicks) && ticks.push(last(scaleTicks))), scaleTicks = ticks;
+        }
       }
       return convertDomainToTickData(scaleTicks);
     };
@@ -38113,7 +38145,10 @@
       }
     };
 
-    const getOneDimensionalLabelBounds = (scale, domain, op, isHorizontal) => getCartesianLabelBounds(scale, domain, op).map(bounds => isHorizontal ? [bounds.x1, bounds.x2, bounds.width()] : [bounds.y1, bounds.y2, bounds.height()]),
+    const getOneDimensionalLabelBounds = (scale, domain, op, isHorizontal) => {
+        const labelBoundsList = getCartesianLabelBounds(scale, domain, op);
+        return labelBoundsList && labelBoundsList.map(bounds => isHorizontal ? [bounds.x1, bounds.x2, bounds.width()] : [bounds.y1, bounds.y2, bounds.height()]);
+      },
       boundsOverlap = (prevBounds, nextBounds, gap = 0) => Math.max(prevBounds[0], nextBounds[0]) - gap / 2 <= Math.min(prevBounds[1], nextBounds[1]) + gap / 2;
     const boundsDistance = (prevBounds, nextBounds) => prevBounds[1] < nextBounds[0] ? nextBounds[0] - prevBounds[1] : nextBounds[1] < prevBounds[0] ? prevBounds[0] - nextBounds[1] : 0;
     const linearDiscreteTicks = (scale, op) => {
@@ -38144,23 +38179,27 @@
           rangeStart = minInArray(range),
           rangeEnd = maxInArray(range);
         if (domain.length <= rangeSize / fontSize) {
-          const incrementUnit = (rangeEnd - rangeStart) / domain.length,
-            labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal),
-            minBoundsLength = Math.min(...labelBoundsList.map(bounds => bounds[2])),
-            stepResult = getStep$1(domain, labelBoundsList, labelGap, op.labelLastVisible, Math.floor(minBoundsLength / incrementUnit), !1);
-          scaleTicks = scale.stepTicks(stepResult.step), op.labelLastVisible && (stepResult.delCount && (scaleTicks = scaleTicks.slice(0, scaleTicks.length - stepResult.delCount)), scaleTicks.push(domain[domain.length - 1]));
+          const labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal);
+          if (labelBoundsList) {
+            const minBoundsLength = Math.min(...labelBoundsList.map(bounds => bounds[2])),
+              incrementUnit = (rangeEnd - rangeStart) / domain.length,
+              stepResult = getStep$1(domain, labelBoundsList, labelGap, op.labelLastVisible, Math.floor(minBoundsLength / incrementUnit), !1);
+            scaleTicks = scale.stepTicks(stepResult.step), op.labelLastVisible && (stepResult.delCount && (scaleTicks = scaleTicks.slice(0, scaleTicks.length - stepResult.delCount)), scaleTicks.push(domain[domain.length - 1]));
+          }
         } else {
           const tempDomain = [domain[0], domain[Math.floor(domain.length / 2)], domain[domain.length - 1]],
             tempList = getOneDimensionalLabelBounds(scale, tempDomain, op, isHorizontal);
-          let maxBounds = null;
-          tempList.forEach(current => {
-            maxBounds ? maxBounds[2] < current[2] && (maxBounds = current) : maxBounds = current;
-          });
-          const step = rangeEnd - rangeStart - labelGap > 0 ? Math.ceil(domain.length * (labelGap + maxBounds[2]) / (rangeEnd - rangeStart - labelGap)) : domain.length - 1;
-          scaleTicks = scale.stepTicks(step), !op.labelLastVisible || scaleTicks.length && scaleTicks[scaleTicks.length - 1] === domain[domain.length - 1] || (scaleTicks.length && Math.abs(scale.scale(scaleTicks[scaleTicks.length - 1]) - scale.scale(domain[domain.length - 1])) < maxBounds[2] && (scaleTicks = scaleTicks.slice(0, -1)), scaleTicks.push(domain[domain.length - 1]));
+          if (tempList) {
+            let maxBounds = null;
+            tempList.forEach(current => {
+              maxBounds ? maxBounds[2] < current[2] && (maxBounds = current) : maxBounds = current;
+            });
+            const step = rangeEnd - rangeStart - labelGap > 0 ? Math.ceil(domain.length * (labelGap + maxBounds[2]) / (rangeEnd - rangeStart - labelGap)) : domain.length - 1;
+            scaleTicks = scale.stepTicks(step), !op.labelLastVisible || scaleTicks.length && scaleTicks[scaleTicks.length - 1] === domain[domain.length - 1] || (scaleTicks.length && Math.abs(scale.scale(scaleTicks[scaleTicks.length - 1]) - scale.scale(domain[domain.length - 1])) < maxBounds[2] && (scaleTicks = scaleTicks.slice(0, -1)), scaleTicks.push(domain[domain.length - 1]));
+          }
         }
-      } else scaleTicks = scale.domain();
-      return convertDomainToTickData(scaleTicks);
+      }
+      return isNil$1(scaleTicks) && (scaleTicks = scale.domain()), convertDomainToTickData(scaleTicks);
     };
     const getStep$1 = (domain, labelBoundsList, labelGap, labelLastVisible, defaultStep, areAllBoundsSame) => {
       let resultDelCount = 0,
@@ -41056,13 +41095,6 @@
           end: end
         }));
       }
-      eventPosToStagePos(e) {
-        var _a, _b;
-        return null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
-          x: 0,
-          y: 0
-        };
-      }
       _clearDragEvents() {
         const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
           triggers = getEndTriggersOfDrag();
@@ -41221,7 +41253,13 @@
           } = this.attribute.startTextStyle;
         if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
           const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
-          this._isHorizontal ? this._startText.setAttribute("dy", startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2)) : this._startText.setAttribute("dx", startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+          if (this._isHorizontal) {
+            const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
+            this._startText.setAttribute("dy", startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
+          } else {
+            const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
+            this._startText.setAttribute("dx", startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
+          }
         } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
       }
       getLayoutAttrFromConfig() {
@@ -46371,8 +46409,7 @@
     loadBrushComponent();
     let Brush$1 = class Brush extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
-          if (this._outOfInteractiveRange(e)) return void (this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeBrushState = !1, this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
           const {
             updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
             endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
@@ -46400,7 +46437,7 @@
             brushMode: brushMode
           } = this.attribute,
           pos = this.eventPosToStagePos(e);
-        this._cacheDrawPoints.push(pos), "single" === brushMode && this._clearMask(), this._addBrushMask(), this._dispatchBrushEvent(IOperateType.drawStart, e), 1 === Object.keys(this._brushMaskAABBBoundsDict).length && this._dispatchBrushEvent(IOperateType.brushActive, e);
+        this._cacheDrawPoints.push(pos), "single" === brushMode && this._clearMask(), this._addBrushMask(), this._dispatchBrushEvent(IOperateType.drawStart, e), this._activeBrushState = !1;
       }
       _initMove(e) {
         var _a, _b;
@@ -46430,7 +46467,8 @@
         var _a;
         const pos = this.eventPosToStagePos(e),
           {
-            brushType: brushType
+            brushType: brushType,
+            sizeThreshold = DEFAULT_SIZE_THRESHOLD
           } = this.attribute,
           cacheLength = this._cacheDrawPoints.length;
         if (cacheLength > 0) {
@@ -46439,7 +46477,16 @@
         }
         "polygon" === brushType || cacheLength <= 1 ? this._cacheDrawPoints.push(pos) : this._cacheDrawPoints[cacheLength - 1] = pos;
         const maskPoints = this._computeMaskPoints();
-        this._operatingMask.setAttribute("points", maskPoints), this._dispatchBrushEvent(IOperateType.drawing, e);
+        this._operatingMask.setAttribute("points", maskPoints);
+        const {
+            x: x1,
+            y: y1
+          } = this._startPos,
+          {
+            x: x2,
+            y: y2
+          } = this.eventPosToStagePos(e);
+        (Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold) && (1 !== Object.keys(this._brushMaskAABBBoundsDict).length || this._activeBrushState ? this._dispatchBrushEvent(IOperateType.drawing, e) : (this._activeBrushState = !0, this._dispatchBrushEvent(IOperateType.brushActive, e)));
       }
       _moving(e) {
         const startPos = this._cacheMovePoint,
@@ -46579,9 +46626,6 @@
           pos = this.eventPosToStagePos(e);
         return pos.x > maxX || pos.x < minX || pos.y > maxY || pos.y < minY;
       }
-      eventPosToStagePos(e) {
-        return this.stage.eventPointTransform(e);
-      }
       _dispatchBrushEvent(operateType, e) {
         this._dispatchEvent(operateType, {
           operateMask: this._operatingMask,
@@ -46590,7 +46634,7 @@
         });
       }
       _clearMask() {
-        this._brushMaskAABBBoundsDict = {}, this._container.incrementalClearChild(), this._operatingMask = null;
+        this._brushMaskAABBBoundsDict = {}, this._container.removeAllChild(), this._operatingMask = null;
       }
       _isEmptyMask() {
         return isEmpty(this._brushMaskAABBBoundsDict) || Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty());
@@ -49072,6 +49116,16 @@
         }
         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() {
@@ -49973,6 +50027,28 @@
         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) {
@@ -50162,7 +50238,8 @@
             if (this._stage) {
                 return;
             }
-            const { autoRefreshDpr, dpr, mode, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
+            const { autoRefreshDpr, dpr, mode, modeParams, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
+            vglobal.setEnv(toRenderMode(mode), modeParams !== null && modeParams !== void 0 ? modeParams : {});
             this._stage =
                 (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage({
                     background,
@@ -50173,7 +50250,11 @@
                     dpr,
                     viewBox: this._option.viewBox,
                     canvasControled: this._option.canvasControled,
-                    beforeRender: this._option.beforeRender,
+                    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);
+                    },
                     afterRender: this._option.afterRender,
                     disableDirtyBounds: true,
                     autoRender: true,
@@ -51020,6 +51101,8 @@
         }
         onEvaluateEnd(ctx) {
         }
+        onBeforeRender() {
+        }
         onDataUpdate() {
         }
         beforeRelease() {
@@ -53169,20 +53252,24 @@
             return this._animationConfig;
         }
         setAnimationConfig(config) {
-            const animationConfig = Object.assign({}, config);
-            Object.keys(animationConfig).forEach(key => {
-                const value = animationConfig[key];
+            const defaultPrams = this.type === 'group' ? { selfOnly: true } : {};
+            const animationConfig = {};
+            Object.keys(config).forEach(key => {
+                const value = config[key];
                 if (isArray$1(value)) {
-                    value.forEach(item => {
+                    animationConfig[key] = value.map(item => {
                         var _a;
                         const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
-                        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) });
-                        };
+                        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 {
+                    animationConfig[key] = Object.assign(Object.assign({}, defaultPrams), config[key]);
+                }
             });
             this._animationConfig = animationConfig;
         }
@@ -53810,6 +53897,7 @@
             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;
@@ -53820,7 +53908,8 @@
                     return (Object.assign(Object.assign({}, item), { priority: (_a = item.priority) !== null && _a !== void 0 ? _a : Infinity }));
                 });
             }
-            return config;
+            return config
+                ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? (_a = config.priority) !== null && _a !== void 0 ? _a : Infinity : config.priority }) : config;
         }
         tryRunMorphing(graphics) {
             if (this._lastMark) {
@@ -53904,13 +53993,21 @@
                 this._product.applyAnimationState(['normal'], [normalConfig]);
             }
         }
+        _setAnimationState(g) {
+            const customizedState = this._aniamtionStateCallback ? this._aniamtionStateCallback(g) : undefined;
+            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 newGraphics = [];
+            const allGraphics = [];
             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, _k;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 let g;
                 let diffState;
                 if (isNil$1(newData)) {
@@ -53928,23 +54025,20 @@
                     }
                     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);
-                    newGraphics.push(g);
+                    allGraphics.push(g);
                 }
                 else {
                     g = this._graphicMap.get(key);
                     if (g) {
                         diffState = DiffState.update;
-                        newGraphics.push(g);
+                        allGraphics.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;
             };
@@ -53982,13 +54076,13 @@
                 }
                 g.release();
             });
-            const graphicCount = newGraphics.length;
-            newGraphics.forEach((g, index) => {
+            const graphicCount = allGraphics.length;
+            allGraphics.forEach((g, index) => {
                 g.context.graphicCount = graphicCount;
                 g.context.graphicIndex = index;
             });
             this._dataByKey = newGroupedData;
-            this._graphics = newGraphics;
+            this._graphics = allGraphics;
             this.needClear = true;
         }
         _runEncoderOfGraphic(styles, g, attrs = {}) {
@@ -54071,13 +54165,7 @@
                     }
                 }
                 else {
-                    const prevAttrs = g.getAttributes(true);
-                    const diffAttrs = {};
-                    Object.keys(finalAttrs).forEach(key => {
-                        if (prevAttrs[key] !== finalAttrs[key]) {
-                            diffAttrs[key] = finalAttrs[key];
-                        }
-                    });
+                    const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
                     g.context.diffAttrs = diffAttrs;
                     if (g.context.reusing) {
                         g.context.lastAttrs = g.attribute;
@@ -54246,24 +54334,25 @@
                 }
             };
             this._graphicMap.forEach((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);
+                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);
+                        });
                     }
                 }
+                else {
+                    doRemove(g, key);
+                }
             });
         }
         isProgressive() {
@@ -54409,11 +54498,7 @@
             }
         }
         updateAnimationState(callback) {
-            if (this._graphics && this._graphics.length) {
-                this._graphics.forEach(g => {
-                    g.context.animationState = callback(g);
-                });
-            }
+            this._aniamtionStateCallback = callback;
         }
         hasAnimationByState(state) {
             if (!state || !this._animationConfig || !this._animationConfig[state]) {
@@ -54433,6 +54518,30 @@
         }
     }
 
+    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);
@@ -54495,13 +54604,29 @@
             return [this._product];
         }
         renderInner() {
-            var _a;
+            var _a, _b;
             if (!this._product) {
                 return;
             }
             const style = (_a = this._simpleStyle) !== null && _a !== void 0 ? _a : this.getAttributesOfState({});
-            this._product.context = Object.assign(Object.assign({}, this._product.context), this._getCommonContext());
-            this._product.setAttributes(this._getAttrsFromConfig(style));
+            const prevState = (_b = this._product.context) === null || _b === void 0 ? void 0 : _b.diffState;
+            this._product.context = Object.assign(Object.assign(Object.assign({}, this._product.context), this._getCommonContext()), { diffState: prevState ? DiffState.update : DiffState.enter });
+            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.needClear = true;
         }
         render() {
@@ -54515,11 +54640,7 @@
             });
         }
         updateAnimationState(callback) {
-            this.getGraphics().forEach(g => {
-                if (g) {
-                    g.context = Object.assign(Object.assign({}, g.context), { animationState: callback(g) });
-                }
-            });
+            super.updateAnimationState(callback);
             this.getMarks().forEach(mark => {
                 mark.updateAnimationState(callback);
             });
@@ -55815,7 +55936,7 @@
                     var _a;
                     const diffState = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.diffState;
                     if (initial) {
-                        return diffState === 'exit' ? undefined : AnimationStateEnum.appear;
+                        return diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
                     }
                     return diffState;
                 };
@@ -55904,11 +56025,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);
@@ -55919,11 +56040,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;
             }
@@ -56730,7 +56851,7 @@
         });
     };
 
-    const version = "2.0.0-alpha.4";
+    const version = "2.0.1-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -58543,14 +58664,11 @@
                 }
                 if (isNil$1(dataView)) {
                     m.setData(this._data);
-                    m.setSkipBeforeLayouted(true);
                 }
                 else if (dataView !== false) {
                     m.setDataView(dataView);
                 }
-                if (isBoolean$1(skipBeforeLayouted)) {
-                    m.setSkipBeforeLayouted(skipBeforeLayouted);
-                }
+                m.setSkipBeforeLayouted(skipBeforeLayouted !== false);
                 if (!isNil$1(groupKey)) {
                     m.setGroupKey(groupKey);
                 }
@@ -59775,30 +59893,6 @@
 
     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) {
@@ -60675,7 +60769,7 @@
     const getCartesianCrosshairTheme = (getTheme, chartSpec) => {
         var _a, _b;
         const axes = array((_a = chartSpec.axes) !== null && _a !== void 0 ? _a : []);
-        const { bandField, linearField, xField, yField } = (_b = getComponentThemeFromOption(ComponentTypeEnum.crosshair, getTheme)) !== null && _b !== void 0 ? _b : {};
+        const { bandField, linearField, xField, yField, trigger, triggerOff } = (_b = getComponentThemeFromOption(ComponentTypeEnum.crosshair, getTheme)) !== null && _b !== void 0 ? _b : {};
         const xAxis = axes.find(axis => isXAxis(axis.orient));
         let newXField;
         if (isValid$1(xAxis)) {
@@ -60694,13 +60788,15 @@
         }
         return {
             xField: newXField,
-            yField: newYField
+            yField: newYField,
+            trigger,
+            triggerOff
         };
     };
     const getPolarCrosshairTheme = (getTheme, chartSpec) => {
         var _a, _b;
         const axes = array((_a = chartSpec.axes) !== null && _a !== void 0 ? _a : []);
-        const { bandField, linearField, categoryField, valueField } = (_b = getComponentThemeFromOption(ComponentTypeEnum.crosshair, getTheme)) !== null && _b !== void 0 ? _b : {};
+        const { bandField, linearField, categoryField, valueField, trigger, triggerOff } = (_b = getComponentThemeFromOption(ComponentTypeEnum.crosshair, getTheme)) !== null && _b !== void 0 ? _b : {};
         const angleAxis = axes.find(axis => axis.orient === 'angle');
         let newAngleField;
         if (isValid$1(angleAxis)) {
@@ -60719,7 +60815,9 @@
         }
         return {
             categoryField: newAngleField,
-            valueField: newRadiusField
+            valueField: newRadiusField,
+            trigger,
+            triggerOff
         };
     };
 
@@ -64877,6 +64975,10 @@
             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)
@@ -66235,9 +66337,11 @@
             layoutStartPoint = { x: 0, y: 0 };
         }
         Object.keys(stateByField).forEach(field => {
+            var _a, _b, _c, _d, _e, _f;
             const { currentValue, cacheInfo, labelsComp, attributes, coordKey } = stateByField[field];
             let axis = null;
             let coord = 0;
+            let axisLabel = null;
             if (currentValue.size) {
                 const item = Array.from(currentValue.values())[0];
                 coord =
@@ -66245,6 +66349,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];
             }
             const isVisible = !!currentValue.size && Number.isFinite(coord) && !Number.isNaN(coord);
             const useCache = enableRemain && !isVisible && isValid$1(cacheInfo);
@@ -66262,7 +66368,8 @@
                         }, {})
                         : null,
                     visible: isVisible,
-                    axis
+                    axis,
+                    axisLabel: axisLabel
                 };
             if (newCacheInfo) {
                 newCacheInfo._isCache = useCache;
@@ -66271,7 +66378,7 @@
             let offsetSize = 0;
             if (attributes) {
                 currentValue.forEach(({ axis, datum: value = '' }) => {
-                    var _a;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                     let niceLabelFormatter = null;
                     const scale = axis.getScale();
                     if (isDiscrete(scale.type)) {
@@ -66300,36 +66407,37 @@
                     if (newCacheInfo && ((_a = attributes.label) === null || _a === void 0 ? void 0 : _a.visible) && !useCache) {
                         const labelOffset = getAxisLabelOffset(axis.getSpec());
                         const axisOrient = axis.getOrient();
+                        const syncAxisLabelAngle = (_b = attributes.label) === null || _b === void 0 ? void 0 : _b.syncAxisLabelAngle;
                         if (newCacheInfo.labels[axisOrient]) {
                             newCacheInfo.labels[axisOrient].visible = true;
                             newCacheInfo.labels[axisOrient].text = value;
                             if (axisOrient === 'left') {
                                 newCacheInfo.labels[axisOrient].dx = -labelOffset;
                                 newCacheInfo.labelsTextStyle[axisOrient] = {
-                                    textAlign: 'right',
-                                    textBaseline: 'middle'
+                                    textAlign: syncAxisLabelAngle && axisLabel ? (_c = axisLabel.attribute.textAlign) !== null && _c !== void 0 ? _c : 'right' : 'right',
+                                    textBaseline: syncAxisLabelAngle && axisLabel ? (_d = axisLabel.attribute.textBaseline) !== null && _d !== void 0 ? _d : 'middle' : 'middle'
                                 };
                             }
                             else if (axisOrient === 'right') {
                                 newCacheInfo.labels[axisOrient].dx = labelOffset;
                                 newCacheInfo.labelsTextStyle[axisOrient] = {
-                                    textAlign: 'left',
-                                    textBaseline: 'middle'
+                                    textAlign: syncAxisLabelAngle && axisLabel ? (_e = axisLabel.attribute.textAlign) !== null && _e !== void 0 ? _e : 'left' : 'left',
+                                    textBaseline: syncAxisLabelAngle && axisLabel ? (_f = axisLabel.attribute.textBaseline) !== null && _f !== void 0 ? _f : 'middle' : 'middle'
                                 };
                             }
                             else if (axisOrient === 'top') {
                                 newCacheInfo.labels[axisOrient].y = 0;
                                 newCacheInfo.labels[axisOrient].dy = -labelOffset;
                                 newCacheInfo.labelsTextStyle[axisOrient] = {
-                                    textAlign: 'center',
-                                    textBaseline: 'bottom'
+                                    textAlign: syncAxisLabelAngle && axisLabel ? (_g = axisLabel.attribute.textAlign) !== null && _g !== void 0 ? _g : 'center' : 'center',
+                                    textBaseline: syncAxisLabelAngle && axisLabel ? (_h = axisLabel.attribute.textBaseline) !== null && _h !== void 0 ? _h : 'bottom' : 'bottom'
                                 };
                             }
                             else if (axisOrient === 'bottom') {
                                 newCacheInfo.labels[axisOrient].dy = labelOffset;
                                 newCacheInfo.labelsTextStyle[axisOrient] = {
-                                    textAlign: 'center',
-                                    textBaseline: 'top'
+                                    textAlign: syncAxisLabelAngle && axisLabel ? (_j = axisLabel.attribute.textAlign) !== null && _j !== void 0 ? _j : 'center' : 'center',
+                                    textBaseline: syncAxisLabelAngle && axisLabel ? (_k = axisLabel.attribute.textBaseline) !== null && _k !== void 0 ? _k : 'top' : 'top'
                                 };
                             }
                             newCacheInfo.labels[axisOrient].defaultFormatter = niceLabelFormatter;
@@ -67479,6 +67587,26 @@
             this._barMarkType = "rect";
             this.transformerConstructor = BarSeriesSpecTransformer;
             this._bandPosition = 0;
+            this._getLinearBarRange = (start, end) => {
+                let [x, x1] = [start, end].sort((a, b) => a - b);
+                const realBarWidth = x1 - x;
+                if (this._spec.barGap) {
+                    const halfBarGap = this._spec.barGap * 0.5;
+                    const tempX = x + halfBarGap;
+                    const tempX1 = x1 - halfBarGap;
+                    x = tempX;
+                    x1 = tempX1;
+                }
+                const curBarWidth = x1 - x;
+                const barMinWidth = getActualNumValue(this._spec.barMinWidth || 2, realBarWidth);
+                if (curBarWidth < barMinWidth) {
+                    const widthDiff = barMinWidth - curBarWidth;
+                    const halfWidthDiff = widthDiff / 2;
+                    x -= halfWidthDiff;
+                    x1 += halfWidthDiff;
+                }
+                return [x, x1];
+            };
             this._getBarXStart = (datum, scale, useWholeRange) => {
                 if (this._shouldDoPreCalculate()) {
                     this._calculateStackRectPosition(false);
@@ -67496,6 +67624,11 @@
                 }
                 return valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange);
             };
+            this._getLinearBarXRange = (datum, scale, useWholeRange) => {
+                const x = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange);
+                const x1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange);
+                return this._getLinearBarRange(x, x1);
+            };
             this._getBarYStart = (datum, scale) => {
                 if (this._shouldDoPreCalculate()) {
                     this._calculateStackRectPosition(true);
@@ -67513,6 +67646,11 @@
                 }
                 return valueInScaleRange(this._dataToPosY1(datum), scale);
             };
+            this._getLinearBarYRange = (datum, scale, useWholeRange) => {
+                const y = valueInScaleRange(this._dataToPosY(datum), scale, useWholeRange);
+                const y1 = valueInScaleRange(this._dataToPosY1(datum), scale, useWholeRange);
+                return this._getLinearBarRange(y, y1);
+            };
             this._getBarBackgroundXStart = (scale) => {
                 const range = scale.range();
                 const min = Math.min(range[0], range[range.length - 1]);
@@ -67866,8 +68004,8 @@
             if (this.direction === "horizontal") {
                 const yChannels = isValid$1(this._fieldY2)
                     ? {
-                        y: (datum) => valueInScaleRange(this._dataToPosY(datum), yScale, true),
-                        y1: (datum) => valueInScaleRange(this._dataToPosY1(datum), yScale, true)
+                        y: (datum) => this._getLinearBarYRange(datum, yScale, true)[0],
+                        y1: (datum) => this._getLinearBarYRange(datum, yScale, true)[1]
                     }
                     : {
                         y: (datum) => valueInScaleRange(this._dataToPosY(datum) - this._getBarWidth(this._yAxisHelper) / 2, yScale, true),
@@ -67879,8 +68017,8 @@
             else {
                 const xChannels = isValid$1(this._fieldX2)
                     ? {
-                        x: (datum) => valueInScaleRange(this._dataToPosX(datum), xScale, true),
-                        x1: (datum) => valueInScaleRange(this._dataToPosX1(datum), xScale, true)
+                        x: (datum) => this._getLinearBarXRange(datum, xScale, true)[0],
+                        x1: (datum) => this._getLinearBarXRange(datum, xScale, true)[1]
                     }
                     : {
                         x: (datum) => valueInScaleRange(this._dataToPosX(datum) - this._getBarWidth(this._xAxisHelper) / 2, xScale, true),
@@ -69590,8 +69728,7 @@
         initMark() {
             this._pathMark = this._createMark(MapSeries.mark.area, {
                 groupKey: this.getDimensionField()[0],
-                isSeriesMark: true,
-                skipBeforeLayouted: true
+                isSeriesMark: true
             }, {
                 morph: shouldMarkDoMorph(this._spec, MapSeries.mark.area.name),
                 morphElementKey: this.getDimensionField()[0]
@@ -73077,7 +73214,6 @@
             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),
@@ -80736,7 +80872,6 @@
             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) {
@@ -80749,7 +80884,6 @@
                 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
                 });
@@ -87092,7 +87226,7 @@
             spec.axes.forEach((axis) => (axis.type = 'linear'));
         }
         _getDefaultSeriesSpec(spec) {
-            return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground']);
+            return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground', 'barGap']);
         }
     }
 
@@ -89384,11 +89518,13 @@
             return false;
         }
         _initTheme(spec, chartSpec) {
-            var _a;
+            var _a, _b, _c;
             const { spec: newSpec, theme } = super._initTheme(spec, chartSpec);
             newSpec.style = mergeSpec({}, this._theme, newSpec.style);
             newSpec.offset = mergeSpec({}, theme.offset, spec.offset);
             newSpec.transitionDuration = (_a = spec.transitionDuration) !== null && _a !== void 0 ? _a : theme.transitionDuration;
+            newSpec.trigger = (_b = spec.trigger) !== null && _b !== void 0 ? _b : theme.trigger;
+            newSpec.triggerOff = (_c = spec.triggerOff) !== null && _c !== void 0 ? _c : theme.triggerOff;
             return { spec: newSpec, theme };
         }
         _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
@@ -90235,7 +90371,7 @@
                 this.event.off(eventName, handler);
             }
         }
-        updateLayoutAttribute() {
+        onBeforeRender() {
             this._limitBounds = null;
             this._showDefaultCrosshair();
         }
@@ -90378,7 +90514,7 @@
             }
         }
         _parseField(field, fieldName) {
-            var _a, _b;
+            var _a, _b, _c;
             const hair = {};
             const { line = {}, label = {}, visible } = field;
             hair.visible = visible;
@@ -90389,7 +90525,7 @@
             else {
                 const style = line.style || {};
                 const { stroke, fill, lineWidth } = style;
-                const _c = style, { strokeOpacity, fillOpacity, opacity } = _c, restStyle = __rest$e(_c, ["strokeOpacity", "fillOpacity", "opacity"]);
+                const _d = style, { strokeOpacity, fillOpacity, opacity } = _d, restStyle = __rest$e(_d, ["strokeOpacity", "fillOpacity", "opacity"]);
                 const isLineType = hair.type === 'line';
                 let finalOpacity = isLineType ? strokeOpacity : fillOpacity;
                 if (isNumber$1(opacity)) {
@@ -90417,8 +90553,9 @@
             }
             if (!!label.visible) {
                 const labelBackground = label.labelBackground || {};
+                const syncAxisLabelAngle = (_c = label.syncAxisLabelAngle) !== null && _c !== void 0 ? _c : false;
                 const labelStyle = label.style || {};
-                const _d = labelBackground.style || {}, { fill: rectFill = 'rgba(47, 59, 82, 0.9)', stroke: rectStroke, outerBorder } = _d, rectStyle = __rest$e(_d, ["fill", "stroke", "outerBorder"]);
+                const _e = labelBackground.style || {}, { fill: rectFill = 'rgba(47, 59, 82, 0.9)', stroke: rectStroke, outerBorder } = _e, rectStyle = __rest$e(_e, ["fill", "stroke", "outerBorder"]);
                 hair.label = {
                     visible: true,
                     formatMethod: label.formatMethod,
@@ -90426,6 +90563,7 @@
                     minWidth: labelBackground.minWidth,
                     maxWidth: labelBackground.maxWidth,
                     padding: labelBackground.padding,
+                    syncAxisLabelAngle,
                     textStyle: Object.assign(Object.assign({ fontSize: 14, pickable: false }, labelStyle), { fill: labelStyle.fill || '#fff', stroke: get$1(labelStyle, 'stroke') }),
                     panel: (isBoolean$1(labelBackground.visible) ? labelBackground.visible : !!labelBackground)
                         ? Object.assign({ visible: true, pickable: false, fill: rectFill, stroke: rectStroke, outerBorder: Object.assign({ stroke: rectFill, distance: 0, lineWidth: 3 }, outerBorder) }, rectStyle) : { visible: false },
@@ -90693,9 +90831,9 @@
                 const positionAttribute = layoutCrosshair$1(this._stateByField[field]);
                 this._updateCrosshairByField(field, positionAttribute);
                 Object.keys(labels).forEach(labelKey => {
-                    var _a;
+                    var _a, _b, _c;
                     if (labels[labelKey].visible) {
-                        const updateAttrs = Object.assign(Object.assign(Object.assign({ [coordKey]: coord + bandSize / 2 }, labels[labelKey]), attributes.label), { textStyle: Object.assign(Object.assign({}, (_a = attributes.label) === null || _a === void 0 ? void 0 : _a.textStyle), labelsTextStyle[labelKey]), zIndex: this.labelZIndex, visible: true });
+                        const updateAttrs = Object.assign(Object.assign(Object.assign({ [coordKey]: coord + bandSize / 2 }, labels[labelKey]), attributes.label), { angle: attributes.label.syncAxisLabelAngle ? (_b = (_a = cacheInfo.axisLabel) === null || _a === void 0 ? void 0 : _a.attribute.angle) !== null && _b !== void 0 ? _b : 0 : 0, textStyle: Object.assign(Object.assign({}, (_c = attributes.label) === null || _c === void 0 ? void 0 : _c.textStyle), labelsTextStyle[labelKey]), zIndex: this.labelZIndex, visible: true });
                         this._updateCrosshairLabel(labelsComp[labelKey], updateAttrs, label => {
                             label.name = `crosshair-${field.replace('Field', '')}-${labelKey}-label`;
                             labelsComp[labelKey] = label;
@@ -92836,7 +92974,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             x = convertPercentToValue(datum.x, regionWidth) + regionStartLayoutStartPoint.x;
         }
         else {
-            x = relativeSeries.getXAxisHelper().dataToPosition([datum.x]) + regionStartLayoutStartPoint.x;
+            x =
+                convertDatumToValue(relativeSeries.getXAxisHelper(), [datum.x]) +
+                    regionStartLayoutStartPoint.x;
         }
         return x;
     }
@@ -92851,7 +92991,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             y = convertPercentToValue(datum.y, regionHeight) + regionStartLayoutStartPoint.y;
         }
         else {
-            y = relativeSeries.getYAxisHelper().dataToPosition([datum.y]) + regionStartLayoutStartPoint.y;
+            y =
+                convertDatumToValue(relativeSeries.getYAxisHelper(), [datum.y]) +
+                    regionStartLayoutStartPoint.y;
         }
         return y;
     }
@@ -92861,7 +93003,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         isNumber$1(datum.angle) &&
             isNeedExtendDomain(angleDomain, datum.angle, autoRange) &&
             ((_b = (_a = relativeSeries.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_angleAxis_extend', datum.angle));
-        return relativeSeries.angleAxisHelper.dataToPosition([datum.angle]);
+        return convertDatumToValue(relativeSeries.angleAxisHelper, [datum.angle]);
     }
     function getRadiusValue(datum, radiusDomain, autoRange, refSeries) {
         var _a, _b;
@@ -92869,11 +93011,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         isNumber$1(datum.radius) &&
             isNeedExtendDomain(radiusDomain, datum.radius, autoRange) &&
             ((_b = (_a = relativeSeries.radiusAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_radiusAxis_extend', datum.radius));
-        return relativeSeries.radiusAxisHelper.dataToPosition([datum.radius]);
+        return convertDatumToValue(relativeSeries.radiusAxisHelper, [datum.radius]);
     }
     function convertPercentToValue(percent, relativeLength) {
         return (Number(percent.substring(0, percent.length - 1)) * relativeLength) / 100;
     }
+    function convertDatumToValue(axisHelper, datum) {
+        const scale = axisHelper.getScale(0);
+        if (isContinuous(scale.type) && scale.domain()[0] === scale.domain()[1] && datum[0] !== scale.domain()[0]) {
+            return NaN;
+        }
+        return axisHelper.dataToPosition(datum);
+    }
     function isAggrSpec(spec) {
         return AGGR_TYPE.includes(spec);
     }
@@ -93038,8 +93187,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 isNeedExtendDomain(yDomain, yValue[0], autoRange) &&
                 ((_d = (_c = refRelativeSeries.getYAxisHelper()) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, 'marker_yAxis_extend', yValue[0]));
             points.push({
-                x: refRelativeSeries.getXAxisHelper().dataToPosition(xValue) + regionStartLayoutStartPoint.x + offsetX,
-                y: refRelativeSeries.getYAxisHelper().dataToPosition(yValue) + regionStartLayoutStartPoint.y + offsetY
+                x: convertDatumToValue(refRelativeSeries.getXAxisHelper(), xValue) + regionStartLayoutStartPoint.x + offsetX,
+                y: convertDatumToValue(refRelativeSeries.getYAxisHelper(), yValue) + regionStartLayoutStartPoint.y + offsetY
             });
         });
         return points;
@@ -93063,8 +93212,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 isNeedExtendDomain(radiusDomain, radiusValue[0], autoRange) &&
                 ((_d = (_c = refRelativeSeries.radiusAxisHelper) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, 'marker_yAxis_extend', radiusValue[0]));
             points.push({
-                angle: refRelativeSeries.angleAxisHelper.dataToPosition(angleValue),
-                radius: refRelativeSeries.radiusAxisHelper.dataToPosition(radiusValue)
+                angle: convertDatumToValue(refRelativeSeries.angleAxisHelper, angleValue),
+                radius: convertDatumToValue(refRelativeSeries.radiusAxisHelper, radiusValue)
             });
         });
         return points;
@@ -96147,7 +96296,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._linkedInBrushElementsMap = {};
             this._linkedOutOfBrushElementsMap = {};
             this._cacheInteractiveRangeAttrs = [];
-            this._needDisablePickable = false;
             this._releatedAxes = [];
             this._regionAxisMap = {};
             this._axisDataZoomMap = {};
@@ -96299,34 +96447,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._emitEvent(exports.ChartEvent.brushActive, region);
             });
             brush.addEventListener(IOperateType.drawStart, (e) => {
+                this._setRegionMarkPickable(region, true);
                 this._emitEvent(exports.ChartEvent.brushStart, region);
             });
             brush.addEventListener(IOperateType.moveStart, (e) => {
+                this._setRegionMarkPickable(region, true);
                 this._emitEvent(exports.ChartEvent.brushStart, region);
             });
             brush.addEventListener(IOperateType.drawing, (e) => {
-                this._needDisablePickable = true;
+                this._setRegionMarkPickable(region, false);
                 this._handleBrushChange(region, e);
                 this._emitEvent(exports.ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.moving, (e) => {
+                this._setRegionMarkPickable(region, false);
                 this._handleBrushChange(region, e);
                 this._emitEvent(exports.ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.brushClear, (e) => {
+                this._setRegionMarkPickable(region, true);
                 this._initMarkBrushState(componentIndex, '');
-                this._needDisablePickable = false;
                 this._emitEvent(exports.ChartEvent.brushClear, region);
             });
             brush.addEventListener(IOperateType.drawEnd, (e) => {
                 var _a;
-                this._needDisablePickable = false;
+                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();
                         this._initMarkBrushState(componentIndex, '');
-                        this._needDisablePickable = false;
                         this._emitEvent(exports.ChartEvent.brushClear, region);
                     }
                     else {
@@ -96336,16 +96487,18 @@ 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) {
+                    if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) {
                         this._setAxisAndDataZoom(operateMask, region);
                     }
                     this._emitEvent(exports.ChartEvent.brushEnd, region);
                 }
             });
             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) {
+                if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) {
                     this._setAxisAndDataZoom(operateMask, region);
                 }
                 this._emitEvent(exports.ChartEvent.brushEnd, region);
@@ -96387,8 +96540,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleBrushChange(region, e) {
             const { operateMask } = e.detail;
-            this._reconfigItem(operateMask, region);
-            this._reconfigLinkedItem(operateMask, region);
+            const { updateElementsState = true } = this._spec;
+            if (updateElementsState) {
+                this._reconfigItem(operateMask, region);
+                this._reconfigLinkedItem(operateMask, region);
+            }
         }
         _extendDataInBrush(elementsMap) {
             var _a, _b;
@@ -96468,7 +96624,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._outOfBrushElementsMap[elementKey] = graphicItem;
                         delete this._inBrushElementsMap[operateMask.name][elementKey];
                     }
-                    graphicItem.setAttribute('pickable', !this._needDisablePickable);
                 });
             });
         }
@@ -96526,7 +96681,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 graphicItem.addState(OUT_BRUSH_STATE, true);
                                 this._linkedOutOfBrushElementsMap[elementKey] = graphicItem;
                             }
-                            graphicItem.setAttribute('pickable', !this._needDisablePickable);
                         });
                     });
                 }
@@ -96592,6 +96746,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initItemMap(this._itemMap, this._outOfBrushElementsMap, stateName);
             this._initItemMap(this._linkedItemMap, this._linkedOutOfBrushElementsMap, stateName);
         }
+        _setRegionMarkPickable(region, pickable) {
+            region
+                .getGroupMark()
+                .getGraphics()
+                .forEach(g => g.setAttribute('childrenPickable', pickable));
+        }
         _stateClamp(state) {
             return Math.min(Math.max(0, state), 1);
         }
@@ -96671,7 +96831,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const container = this.getContainer();
                 this._brushComponents.forEach((brush, index) => {
                     this._initMarkBrushState(index, '');
-                    this._needDisablePickable = false;
                     brush.removeAllChild();
                     brush.releaseBrushEvents();
                     if (container) {
@@ -97897,12 +98056,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const rowStyle = this._domStyle.row;
             const chilren = [...this._rootDom.children];
             let titleDom = chilren.find(child => child.className.includes(TOOLTIP_TITLE_CLASS_NAME));
+            let contentDom = chilren.find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME));
             if (!titleDom && title.visible !== false) {
                 titleDom = document.createElement('h2');
                 const span = document.createElement('span');
                 titleDom.appendChild(span);
                 titleDom.classList.add(TOOLTIP_TITLE_CLASS_NAME);
-                this._rootDom.appendChild(titleDom);
+                if (this._rootDom.firstChild) {
+                    this._rootDom.insertBefore(titleDom, this._rootDom.firstChild);
+                }
+                else {
+                    this._rootDom.appendChild(titleDom);
+                }
             }
             if (titleDom && title.visible !== false) {
                 setStyleToDom(titleDom, Object.assign(Object.assign(Object.assign({}, this._domStyle.title), (hasContent ? rowStyle : { marginBottom: '0px' })), { marginTop: '0px' }));
@@ -97911,7 +98076,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else if (titleDom && title.visible === false) {
                 titleDom.parentNode.removeChild(titleDom);
             }
-            let contentDom = chilren.find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME));
             const columns = ['shape', 'key', 'value'];
             if (!contentDom && hasContent) {
                 contentDom = document.createElement('div');
@@ -100184,6 +100348,7 @@ 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;