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

package/build/index.js

@@ -14739,7 +14739,7 @@
       }
       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 => {
@@ -22121,7 +22121,7 @@
         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() {
@@ -32124,7 +32124,8 @@
         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;
       }
     }
@@ -32644,6 +32645,11 @@
           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 {
@@ -32674,12 +32680,19 @@
       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;
       }
@@ -32731,6 +32744,21 @@
       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() {
@@ -33811,7 +33839,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -33820,7 +33848,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), 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);
@@ -33918,7 +33946,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -33927,7 +33955,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), 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);
@@ -35778,16 +35806,15 @@
         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
@@ -35835,7 +35862,7 @@
         case "x":
           return {
             from: {
-              x: graphic.attribute.x
+              x: graphic.getGraphicAttribute("x")
             },
             to: {
               x: fromX
@@ -35844,7 +35871,7 @@
         case "y":
           return {
             from: {
-              y: graphic.attribute.y
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               y: fromY
@@ -35853,8 +35880,8 @@
         default:
           return {
             from: {
-              x: graphic.attribute.x,
-              y: graphic.attribute.y
+              x: graphic.getGraphicAttribute("x"),
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               x: fromX,
@@ -38785,7 +38812,8 @@
             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]);
@@ -38795,7 +38823,7 @@
           to: rest,
           duration: duration,
           easing: easing
-        }), animator.animate(prevText, {
+        }), !1 !== increaseEffect && animator.animate(prevText, {
           type: "increaseCount",
           to: {
             text: curText.attribute.text
@@ -39489,16 +39517,15 @@
           } = 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) {
@@ -51230,6 +51257,12 @@
             }
             return index;
         }
+        updateAnimateStateCallback(callback) {
+            this._aniamtionStateCallback = callback;
+        }
+        getAnimationStateCallback() {
+            return this._aniamtionStateCallback;
+        }
     }
 
     class LayoutItem {
@@ -53903,7 +53936,7 @@
                 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 }));
                 });
@@ -53994,7 +54027,20 @@
             }
         }
         _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;
@@ -54497,9 +54543,6 @@
                 this._runProgressiveStep();
             }
         }
-        updateAnimationState(callback) {
-            this._aniamtionStateCallback = callback;
-        }
         hasAnimationByState(state) {
             if (!state || !this._animationConfig || !this._animationConfig[state]) {
                 return false;
@@ -54547,6 +54590,7 @@
             super(...arguments);
             this.type = GroupMark.type;
             this._marks = [];
+            this._diffState = DiffState.enter;
         }
         getMarks() {
             return this._marks;
@@ -54604,13 +54648,12 @@
             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) {
@@ -54629,6 +54672,9 @@
             }
             this.needClear = true;
         }
+        clearExitGraphics() {
+            this._diffState = DiffState.update;
+        }
         render() {
             if (this._isCommited) {
                 log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -54639,12 +54685,6 @@
                 mark.render();
             });
         }
-        updateAnimationState(callback) {
-            super.updateAnimationState(callback);
-            this.getMarks().forEach(mark => {
-                mark.updateAnimationState(callback);
-            });
-        }
         release() {
             super.release();
             this.removeProduct();
@@ -55930,6 +55970,7 @@
             });
         }
         _updateAnimateState(initial) {
+            var _a, _b;
             if (this._option.animation) {
                 const updateGraphicAnimationState = (graphic) => {
                     var _a;
@@ -55939,8 +55980,11 @@
                     }
                     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);
                 });
             }
         }
@@ -56563,10 +56607,20 @@
             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;
@@ -56850,7 +56904,7 @@
         });
     };
 
-    const version = "2.0.1-alpha.1";
+    const version = "2.0.1-alpha.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -89942,7 +89996,10 @@
             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() {
@@ -95081,6 +95138,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._option.globalInstance.on(exports.ChartEvent.rendered, () => {
                     var _a;
                     if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
+                        this._playerComponent.pause();
                         this._playerComponent.play();
                     }
                 });
@@ -97794,14 +97852,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const marginKey = align === 'right' ? 'marginLeft' : 'marginRight';
         if (align === 'right') {
             panelStyle.direction = 'rtl';
-            titleStyle.textAlign = 'right';
-            keyStyle.textAlign = 'right';
-            valueStyle.textAlign = 'left';
         }
-        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);