@visactor/vchart 2.0.1-alpha.2 → 2.0.1-alpha.4

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() {
@@ -32645,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 {
@@ -32675,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;
       }
@@ -32732,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() {
@@ -33812,7 +33839,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -33821,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);
@@ -33919,7 +33946,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -33928,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);
@@ -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) {
@@ -50222,6 +50249,9 @@
             this._container = container;
             this._option = option;
         }
+        getChart() {
+            return this._compileChart;
+        }
         getCanvas() {
             var _a;
             return (_a = this._stage) === null || _a === void 0 ? void 0 : _a.window.getNativeHandler().nativeCanvas;
@@ -51230,6 +51260,12 @@
             }
             return index;
         }
+        updateAnimateStateCallback(callback) {
+            this._aniamtionStateCallback = callback;
+        }
+        getAnimationStateCallback() {
+            return this._aniamtionStateCallback;
+        }
     }
 
     class LayoutItem {
@@ -53253,26 +53289,39 @@
         }
         setAnimationConfig(config) {
             const defaultPrams = this.type === 'group' ? { selfOnly: true } : {};
+            const formatAnimationCfg = (cfg) => {
+                var _a;
+                const options = (_a = cfg.options) !== null && _a !== void 0 ? _a : {};
+                return Object.assign(Object.assign(Object.assign({}, defaultPrams), cfg), { options: (datum, graphic, customParams) => {
+                        var _a, _b;
+                        const _options = typeof options === 'function' ? options(datum, graphic, customParams) : options;
+                        if (graphic && graphic.context && graphic.context.compiler && isValid$1(graphic.context.modelId)) {
+                            const model = (_a = graphic.context.compiler.getChart()) === null || _a === void 0 ? void 0 : _a.getModelById(graphic.context.modelId);
+                            return Object.assign(Object.assign({}, _options), { layoutRect: (_b = model === null || model === void 0 ? void 0 : model.getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(model) });
+                        }
+                        return Object.assign({}, _options);
+                    } });
+            };
             const animationConfig = {};
             Object.keys(config).forEach(key => {
                 const value = config[key];
                 if (isArray$1(value)) {
-                    animationConfig[key] = value.map(item => {
-                        var _a;
-                        const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
-                        return Object.assign(Object.assign(Object.assign({}, defaultPrams), item), { options: (...args) => {
-                                var _a, _b;
-                                const _options = typeof options === 'function' ? options(...args) : options;
-                                return Object.assign(Object.assign({}, _options), { layoutRect: (_b = (_a = this.model).getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(_a) });
-                            } });
-                    });
+                    animationConfig[key] = value.map(formatAnimationCfg);
                 }
-                else {
-                    animationConfig[key] = Object.assign(Object.assign({}, defaultPrams), config[key]);
+                else if (isValid$1(value)) {
+                    animationConfig[key] = formatAnimationCfg(value);
                 }
             });
             this._animationConfig = animationConfig;
         }
+        disableAnimationByState(state) {
+            const states = array(state);
+            this._disabledAnimationStates = [...new Set([...this._disabledAnimationStates, ...states])];
+        }
+        enableAnimationByState(state) {
+            const states = array(state);
+            this._disabledAnimationStates = this._disabledAnimationStates.filter(s => !states.includes(s));
+        }
         setSkipBeforeLayouted(skip) {
             this._skipBeforeLayouted = skip;
         }
@@ -53407,6 +53456,7 @@
             this._visible = true;
             this.stateStyle = {};
             this._unCompileChannel = {};
+            this._disabledAnimationStates = [];
             this._skipBeforeLayouted = false;
             this._extensionChannel = {};
             this._computeExChannel = {};
@@ -53824,6 +53874,7 @@
         }
         _getCommonContext() {
             return {
+                compiler: this.getCompiler(),
                 markType: this.type,
                 markId: this.id,
                 modelId: this.model.id,
@@ -53847,7 +53898,6 @@
             this._dataByKey = mark._dataByKey;
             this._prevDataByKey = mark._prevDataByKey;
             this.needClear = mark.needClear;
-            this._aniamtionStateCallback = mark._aniamtionStateCallback;
         }
         _parseProgressiveContext(data) {
             const enableProgressive = this._markConfig.progressiveStep > 0 &&
@@ -53995,7 +54045,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;
@@ -54498,11 +54561,11 @@
                 this._runProgressiveStep();
             }
         }
-        updateAnimationState(callback) {
-            this._aniamtionStateCallback = callback;
-        }
         hasAnimationByState(state) {
-            if (!state || !this._animationConfig || !this._animationConfig[state]) {
+            if (!state ||
+                !this._animationConfig ||
+                !this._animationConfig[state] ||
+                this._disabledAnimationStates.includes(state)) {
                 return false;
             }
             const stateAnimationConfig = this._animationConfig[state];
@@ -54548,6 +54611,7 @@
             super(...arguments);
             this.type = GroupMark.type;
             this._marks = [];
+            this._diffState = DiffState.enter;
         }
         getMarks() {
             return this._marks;
@@ -54605,13 +54669,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) {
@@ -54630,6 +54693,9 @@
             }
             this.needClear = true;
         }
+        clearExitGraphics() {
+            this._diffState = DiffState.update;
+        }
         render() {
             if (this._isCommited) {
                 log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -54640,12 +54706,6 @@
                 mark.render();
             });
         }
-        updateAnimationState(callback) {
-            super.updateAnimationState(callback);
-            this.getMarks().forEach(mark => {
-                mark.updateAnimationState(callback);
-            });
-        }
         release() {
             super.release();
             this.removeProduct();
@@ -55839,7 +55899,7 @@
             return this._beforeRender(option);
         }
         _reCompile(updateResult, morphConfig) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (updateResult.reMake) {
                 this._releaseData();
                 this._initDataSet();
@@ -55859,20 +55919,16 @@
             if (updateResult.reMake) {
                 (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.releaseGrammar();
                 this._userEvents.forEach(e => { var _a; return (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(e.eType, e.query, e.handler); });
-                if (updateResult.reSize) {
-                    this._doResize();
-                }
             }
-            else {
-                if (updateResult.reCompile) {
-                    (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
-                    (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
-                }
-                if (updateResult.reSize) {
-                    const { width, height } = this.getCurrentSize();
-                    this._chart.onResize(width, height, false);
-                    this._compiler.resize(width, height, false);
-                }
+            else if (updateResult.reCompile) {
+                (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
+                (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
+            }
+            if (updateResult.reSize) {
+                const { width, height } = this.getCurrentSize();
+                this._currentSize = { width, height };
+                (_f = this._chart) === null || _f === void 0 ? void 0 : _f.onResize(width, height, false);
+                (_g = this._compiler) === null || _g === void 0 ? void 0 : _g.resize(width, height, false);
             }
         }
         _beforeRender(option = {}) {
@@ -55931,6 +55987,7 @@
             });
         }
         _updateAnimateState(initial) {
+            var _a, _b;
             if (this._option.animation) {
                 const updateGraphicAnimationState = (graphic) => {
                     var _a;
@@ -55940,8 +55997,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);
                 });
             }
         }
@@ -56564,10 +56624,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;
@@ -56851,7 +56921,7 @@
         });
     };
 
-    const version = "2.0.1-alpha.2";
+    const version = "2.0.1-alpha.4";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -63059,6 +63129,24 @@
                 };
             }
         }
+        _updateData() {
+            var _a, _b, _c;
+            const tickTransformType = this.registerTicksTransform();
+            if (this._spec.showAllGroupLayers && this._scales.length > 1) {
+                const layers = (_a = this._spec.layers) !== null && _a !== void 0 ? _a : [];
+                Object.keys(this._tickDataMap).forEach(layer => {
+                    const layerConfig = layers[this._scales.length - 1 - +layer] || {};
+                    const tickData = this._tickDataMap[layer];
+                    const tickTransform = tickData === null || tickData === void 0 ? void 0 : tickData.getDataView().transformsArr.find((t) => t.type === tickTransformType);
+                    tickTransform &&
+                        (tickTransform.options = Object.assign(Object.assign({}, this._tickTransformOption()), layerConfig));
+                });
+            }
+            else {
+                const tickTransform = (_c = (_b = this._tickData) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.getDataView().transformsArr.find(t => t.type === tickTransformType);
+                tickTransform && (tickTransform.options = this._tickTransformOption());
+            }
+        }
         dataToPosition(values, cfg = {}) {
             var _a, _b;
             if (values.length === 0 || this._scales.length === 0) {
@@ -63151,7 +63239,7 @@
         getLabelItems(length) {
             const labelItems = [];
             let preData = [];
-            this._scales.forEach((scale, index) => {
+            (this._spec.showAllGroupLayers ? this._scales : [this._scales[0]]).forEach((scale, index) => {
                 var _a;
                 const tickData = this._tickDataMap[index];
                 const isTickDataHaveData = (_a = tickData === null || tickData === void 0 ? void 0 : tickData.getLatestData()) === null || _a === void 0 ? void 0 : _a.length;
@@ -63333,6 +63421,20 @@
                 minBandSize
             };
         }
+        _compareSpec(spec, prevSpec) {
+            const result = super._compareSpec(spec, prevSpec);
+            if (result.reMake) {
+                return result;
+            }
+            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.showAllGroupLayers) !== (spec === null || spec === void 0 ? void 0 : spec.showAllGroupLayers) || !isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.layers, spec === null || spec === void 0 ? void 0 : spec.layers)) {
+                result.reMake = true;
+            }
+            return result;
+        }
+        reInit(spec) {
+            super.reInit();
+            this === null || this === void 0 ? void 0 : this._updateData();
+        }
     }
     CartesianBandAxis.type = ComponentTypeEnum.cartesianBandAxis;
     CartesianBandAxis.specKey = 'axes';
@@ -65444,17 +65546,11 @@
         }
         _enableMarkAnimation(states) {
             const marks = this.getAllMarks();
-            marks.forEach(mark => {
-                const product = mark.getProduct();
-                if (product && product.animate) ;
-            });
+            marks.forEach(mark => mark.enableAnimationByState(states));
         }
         _disableMarkAnimation(states) {
             const marks = this.getAllMarks();
-            marks.forEach(mark => {
-                const product = mark.getProduct();
-                if (product && product.animate) ;
-            });
+            marks.forEach(mark => mark.disableAnimationByState(states));
         }
         filterGraphicsByDatum(datum, opt = {}) {
             var _a;
@@ -89943,7 +90039,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() {
@@ -97796,14 +97895,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);