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

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() {
@@ -32639,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 {
@@ -32669,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;
   }
@@ -32726,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() {
@@ -33806,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,
@@ -33815,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);
@@ -33913,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,
@@ -33922,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);
@@ -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) {
@@ -50216,6 +50243,9 @@ class Compiler {
         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;
@@ -51224,6 +51254,12 @@ class BaseModel extends CompilableBase {
         }
         return index;
     }
+    updateAnimateStateCallback(callback) {
+        this._aniamtionStateCallback = callback;
+    }
+    getAnimationStateCallback() {
+        return this._aniamtionStateCallback;
+    }
 }
 
 class LayoutItem {
@@ -53247,26 +53283,39 @@ class BaseMark extends GrammarItem {
     }
     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;
     }
@@ -53401,6 +53450,7 @@ class BaseMark extends GrammarItem {
         this._visible = true;
         this.stateStyle = {};
         this._unCompileChannel = {};
+        this._disabledAnimationStates = [];
         this._skipBeforeLayouted = false;
         this._extensionChannel = {};
         this._computeExChannel = {};
@@ -53818,6 +53868,7 @@ class BaseMark extends GrammarItem {
     }
     _getCommonContext() {
         return {
+            compiler: this.getCompiler(),
             markType: this.type,
             markId: this.id,
             modelId: this.model.id,
@@ -53841,7 +53892,6 @@ class BaseMark extends GrammarItem {
         this._dataByKey = mark._dataByKey;
         this._prevDataByKey = mark._prevDataByKey;
         this.needClear = mark.needClear;
-        this._aniamtionStateCallback = mark._aniamtionStateCallback;
     }
     _parseProgressiveContext(data) {
         const enableProgressive = this._markConfig.progressiveStep > 0 &&
@@ -53989,7 +54039,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;
@@ -54492,11 +54555,11 @@ class BaseMark extends GrammarItem {
             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];
@@ -54542,6 +54605,7 @@ class GroupMark extends BaseMark {
         super(...arguments);
         this.type = GroupMark.type;
         this._marks = [];
+        this._diffState = DiffState.enter;
     }
     getMarks() {
         return this._marks;
@@ -54599,13 +54663,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) {
@@ -54624,6 +54687,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}`);
@@ -54634,12 +54700,6 @@ class GroupMark extends BaseMark {
             mark.render();
         });
     }
-    updateAnimationState(callback) {
-        super.updateAnimationState(callback);
-        this.getMarks().forEach(mark => {
-            mark.updateAnimationState(callback);
-        });
-    }
     release() {
         super.release();
         this.removeProduct();
@@ -55833,7 +55893,7 @@ class VChart {
         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();
@@ -55853,20 +55913,16 @@ class VChart {
         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 = {}) {
@@ -55925,6 +55981,7 @@ class VChart {
         });
     }
     _updateAnimateState(initial) {
+        var _a, _b;
         if (this._option.animation) {
             const updateGraphicAnimationState = (graphic) => {
                 var _a;
@@ -55934,8 +55991,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);
             });
         }
     }
@@ -56558,10 +56618,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;
@@ -56845,7 +56915,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.1-alpha.2";
+const version = "2.0.1-alpha.4";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -63053,6 +63123,24 @@ class BandAxisMixin {
             };
         }
     }
+    _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) {
@@ -63145,7 +63233,7 @@ class BandAxisMixin {
     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;
@@ -63327,6 +63415,20 @@ class CartesianBandAxis extends CartesianAxis {
             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';
@@ -65438,17 +65540,11 @@ class BaseChart extends CompilableBase {
     }
     _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;
@@ -89937,7 +90033,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() {
@@ -97790,14 +97889,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);