@visactor/vchart 2.0.1-alpha.1 → 2.0.1-alpha.3

package/build/index.es.js

@@ -14733,7 +14733,7 @@ let Group$1 = class Group extends Graphic {
   }
   removeChild(child) {
     const data = super.removeChild(child);
-    return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
+    return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
   }
   removeAllChild(deep = !1) {
     this.forEachChildren(child => {
@@ -22115,7 +22115,7 @@ class Stage extends Group$1 {
     return this._cursor;
   }
   eventPointTransform(e) {
-    const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+    const point = this.global.mapToCanvasPoint(e, this.window);
     return this.stage.window.pointTransform(point.x, point.y);
   }
   pauseTriggerEvent() {
@@ -32118,7 +32118,8 @@ class DefaultTicker extends EventEmitter {
     this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
   }
   checkSkip(delta) {
-    if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
+    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;
     return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
   }
 }
@@ -32638,6 +32639,11 @@ class AnimationStateManager {
       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);
+    stateInfo && (stateInfo.executor.stop(), stateInfo.executor.execute(stateInfo.animationConfig));
+  }
 }
 
 class GraphicStateExtension {
@@ -32668,12 +32674,19 @@ class GraphicStateExtension {
   applyUnhighlightState(animationConfig, callback) {
     return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
   }
-  stopAnimationState(state, type) {
-    return this._getAnimationStateManager(this).stopState(state, type), 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;
   }
   clearAnimationStates() {
     return this._getAnimationStateManager(this).clearState(), this;
   }
+  reApplyAnimationState(state, deep = !1) {
+    return this._getAnimationStateManager(this).reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+      child.reApplyAnimationState(state, deep);
+    }), this;
+  }
   static extend(graphic) {
     return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
   }
@@ -32725,6 +32738,21 @@ class AnimateExtension {
   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() {
@@ -33805,7 +33833,7 @@ class GrowCenterIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33814,7 +33842,7 @@ class GrowCenterIn extends ACustomAnimate {
       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), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -33912,7 +33940,7 @@ class GrowHeightIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33921,7 +33949,7 @@ class GrowHeightIn extends ACustomAnimate {
       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), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -35772,16 +35800,15 @@ const moveIn = (graphic, options, animationParameters) => {
     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,
-    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;
+    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;
   switch (direction) {
     case "x":
       return {
         from: {
-          x: fromX
+          x: excludeChannels.includes("x") ? finalAttrsX : fromX
         },
         to: {
           x: finalAttrsX
@@ -35829,7 +35856,7 @@ const moveOut = (graphic, options, animationParameters) => {
     case "x":
       return {
         from: {
-          x: graphic.attribute.x
+          x: graphic.getGraphicAttribute("x")
         },
         to: {
           x: fromX
@@ -35838,7 +35865,7 @@ const moveOut = (graphic, options, animationParameters) => {
     case "y":
       return {
         from: {
-          y: graphic.attribute.y
+          y: graphic.getGraphicAttribute("y")
         },
         to: {
           y: fromY
@@ -35847,8 +35874,8 @@ const moveOut = (graphic, options, animationParameters) => {
     default:
       return {
         from: {
-          x: graphic.attribute.x,
-          y: graphic.attribute.y
+          x: graphic.getGraphicAttribute("x"),
+          y: graphic.getGraphicAttribute("y")
         },
         to: {
           x: fromX,
@@ -38779,7 +38806,8 @@ class LabelUpdate extends AComponentAnimate {
         prevText: prevText,
         curText: curText,
         prevLabelLine: prevLabelLine,
-        curLabelLine: curLabelLine
+        curLabelLine: curLabelLine,
+        increaseEffect = !0
       } = this.params,
       diff = {};
     for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
@@ -38789,7 +38817,7 @@ class LabelUpdate extends AComponentAnimate {
       to: rest,
       duration: duration,
       easing: easing
-    }), animator.animate(prevText, {
+    }), !1 !== increaseEffect && animator.animate(prevText, {
       type: "increaseCount",
       to: {
         text: curText.attribute.text
@@ -39483,16 +39511,15 @@ class LabelBase extends AnimateComponent {
       } = currentLabel;
     prevText.applyAnimationState(["update"], [{
       name: "update",
-      animation: Object.assign(Object.assign({
-        type: "labelUpdate"
-      }, this._animationConfig.update), {
-        customParameters: {
+      animation: {
+        type: "labelUpdate",
+        customParameters: Object.assign(Object.assign({}, this._animationConfig.update), {
           prevText: prevText,
           curText: curText,
           prevLabelLine: prevLabelLine,
           curLabelLine: curLabelLine
-        }
-      })
+        })
+      }
     }]);
   }
   _syncStateWithRelatedGraphic(relatedGraphic) {
@@ -51224,6 +51251,12 @@ class BaseModel extends CompilableBase {
         }
         return index;
     }
+    updateAnimateStateCallback(callback) {
+        this._aniamtionStateCallback = callback;
+    }
+    getAnimationStateCallback() {
+        return this._aniamtionStateCallback;
+    }
 }
 
 class LayoutItem {
@@ -53897,7 +53930,7 @@ class BaseMark extends GrammarItem {
             config = config.length === 1 ? config[0] : config;
         }
         if (Array.isArray(config)) {
-            config = config.map((item, index) => {
+            return config.map((item, index) => {
                 var _a;
                 return (Object.assign(Object.assign({}, item), { priority: (_a = item.priority) !== null && _a !== void 0 ? _a : Infinity }));
             });
@@ -53988,7 +54021,20 @@ class BaseMark extends GrammarItem {
         }
     }
     _setAnimationState(g) {
-        const customizedState = this._aniamtionStateCallback ? this._aniamtionStateCallback(g) : undefined;
+        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;
@@ -54491,9 +54537,6 @@ class BaseMark extends GrammarItem {
             this._runProgressiveStep();
         }
     }
-    updateAnimationState(callback) {
-        this._aniamtionStateCallback = callback;
-    }
     hasAnimationByState(state) {
         if (!state || !this._animationConfig || !this._animationConfig[state]) {
             return false;
@@ -54541,6 +54584,7 @@ class GroupMark extends BaseMark {
         super(...arguments);
         this.type = GroupMark.type;
         this._marks = [];
+        this._diffState = DiffState.enter;
     }
     getMarks() {
         return this._marks;
@@ -54598,13 +54642,12 @@ class GroupMark extends BaseMark {
         return [this._product];
     }
     renderInner() {
-        var _a, _b;
+        var _a;
         if (!this._product) {
             return;
         }
         const style = (_a = this._simpleStyle) !== null && _a !== void 0 ? _a : this.getAttributesOfState({});
-        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._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) {
@@ -54623,6 +54666,9 @@ class GroupMark extends BaseMark {
         }
         this.needClear = true;
     }
+    clearExitGraphics() {
+        this._diffState = DiffState.update;
+    }
     render() {
         if (this._isCommited) {
             log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -54633,12 +54679,6 @@ class GroupMark extends BaseMark {
             mark.render();
         });
     }
-    updateAnimationState(callback) {
-        super.updateAnimationState(callback);
-        this.getMarks().forEach(mark => {
-            mark.updateAnimationState(callback);
-        });
-    }
     release() {
         super.release();
         this.removeProduct();
@@ -55924,6 +55964,7 @@ class VChart {
         });
     }
     _updateAnimateState(initial) {
+        var _a, _b;
         if (this._option.animation) {
             const updateGraphicAnimationState = (graphic) => {
                 var _a;
@@ -55933,8 +55974,11 @@ class VChart {
                 }
                 return diffState;
             };
-            this._compiler.getRootMarks().forEach(mark => {
-                mark.updateAnimationState(updateGraphicAnimationState);
+            (_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);
             });
         }
     }
@@ -56557,10 +56601,20 @@ class VChart {
         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;
@@ -56844,7 +56898,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.1-alpha.1";
+const version = "2.0.1-alpha.3";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -89936,7 +89990,10 @@ class Tooltip extends BaseComponent {
         const activeType = this._spec.activeType;
         this.processor = {};
         activeType.forEach(type => {
-            this.processor[type] = Factory.createTooltipProcessor(type, this);
+            const instance = Factory.createTooltipProcessor(type, this);
+            if (instance) {
+                this.processor[type] = instance;
+            }
         });
     }
     _initEvent() {
@@ -95075,6 +95132,7 @@ class Player extends BaseComponent {
             this._option.globalInstance.on(ChartEvent.rendered, () => {
                 var _a;
                 if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
+                    this._playerComponent.pause();
                     this._playerComponent.play();
                 }
             });
@@ -97788,14 +97846,15 @@ const getDomStyle = (spec = {}) => {
     const marginKey = align === 'right' ? 'marginLeft' : 'marginRight';
     if (align === 'right') {
         panelStyle.direction = 'rtl';
-        titleStyle.textAlign = 'right';
-        keyStyle.textAlign = 'right';
-        valueStyle.textAlign = 'left';
     }
-    else {
-        titleStyle.textAlign = 'left';
-        keyStyle.textAlign = 'left';
-        valueStyle.textAlign = 'right';
+    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';
     }
     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);